Html поле документа: 1С html. Cоздание поля html документа

Глава 2. Наш первый HTML-документ — HTML руководство для начинающих — Учебники — Каталог статей

Глава 2. Наш первый HTML-документ
Как устроен HTML-документ

HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:

<html> 
 <head> 
 <title> 
 Пример 1 
 </title>
 </head> 
 <body> 
 <h2> 
 Привет! 
 </h2> 
 <P> 
 Это простейший пример HTML-документа. 
 </P> 
 <P> 
 Этот *.html-файл может быть 
 одновременно открыт и в Notepad, и в Netscape. 
 Сохранив изменения в Notepad, просто нажмите
 кнопку Reload ('перезагрузить') в Netscape,
 чтобы увидеть эти изменения реализованными 
 в HTML-документе. 
 </P> 
 </body> 
</html>

Если хотите, можно посмотреть этот пример прямо сейчас.

Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:

<html> 
<head> 
<title>Пример 1</title> 
</head> 
<body> 
<h2>Привет!</h2> 
<P>Это простейший пример HTML-документа.</P> 
<P>Этот *.html-файл может быть одновременно открыт
 и в Notepad, и в Netscape. 
Сохранив изменения в Notepad, просто нажмите кнопку
 Reload ('перезагрузить') в Netscape, чтобы увидеть
 эти изменения реализованными в HTML-документе.</P> 
</body> 
</html>

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается «тэг»).

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением «/».

Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.

Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные метки <html> … </html>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<head> … </head>

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.

<title> … </title>

Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body> … </body>

Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

<h2> … </h2> — <H6> … </H6>

Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

<P> … </P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:

<h2 ALIGN=CENTER>Выравнивание заголовка
 по центру</h2>

или

<P ALIGN=RIGHT>Образец абзаца с выравниванием 
по правому краю</P>

Подытожим все, что мы знаем, с помощью примера 2:

<html> 
<head> 
<title>Пример 2</title> 
</head> 
<body> 
<h2 ALIGN=CENTER>Привет!</h2> 
<h3>Это чуть более сложный пример
 HTML-документа</h3> 
<P>Теперь мы знаем, что абзац можно выравнивать
 не только влево, </P> 
<P ALIGN=CENTER>но и по центру</P> 
<P ALIGN=RIGHT>или по правому краю.</P> 
</body> 
</html>

С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.

При копировании материалов, ссылка на источник обязательна.

Назад

Просмотров: 491

Тема 3: формирование текста web-документа

Цель работы состоит в овладении навыками разметки текста Web-документа с использованием языка гипертекстовой разметки

HTML: организация заголовка и содержательной части документа, методы логического и физического форматирования строк, заголовков, списков, разделение на абзацы, перевод строки, применение специальных символов, организация гиперссылок, формирование оглавления документа и др.

Задание для самостоятельной работы

HTML-документ содержит специальные компоненты, определяющие размещение элементов текста и графики на рабочем поле браузера. Процесс размещения осуществляется построчно, а специальными компонентами служат тэги (от слова tag — ярлык), которые и определяют место и способ выделения элементов текста и графики на текущей строке (группе строк). Подготовленный текст определяется как тэговая модель или HTML-докмент.

Для подготовки к записи HTML-документа следует выполнит следующие операции.

1.1.Вызвать на поле экрана стандартный текстовый редактор Блокнот.

  1. Сохранить текущий документ в рабочей папке под именем 3_1_ФИО (Первые буквы фамилии имени и отчества обучаемого) с расширением .html, используя. опцию «Сохранить как…».

  2. Разместить рабочее поле текстового редактора на левой половине экрана,

  3. Вызвать браузер Internet Explorer и установить его на левой половине экрана,

  4. Вызвать на рабочее поле браузера HTML-документ из своей рабочей папки для этого в меню «Файл» найти опцию «Из файла», включить кнопку «Обзор» и найти ранее подготовленный файл в рабочей папке.

1.2.Записать заголовок. Для его написания следует придерживаться следующих правил:

Тэг <HTML> открывает документ, тэг </HTML> закрывает документ,

HTML-документ состоит из двух областей: области заголовка и области содержания.

Тэг <HEAD> открывает область заголовка </HEAD> закрывает область заголовка,

Установить тэги заголовка внутри пары тэгов <HTML>.

В области заголовка определяется название документа, связь с другими документами, кодировка текста, размер, тип и цвет шрифта, используемого в тексте по умолчанию и др.

Тэг <TITLE> определяет название документа, тэг <BASE> указывает полный базовый URL-адрес документа с помощью обязательного параметра HREF=»URL».

Для записи названия документа следует выполнить следующие операции:

  1. В поле заголовка установить пару тэгов <TITLE> и записать между ними строку «Самостоятельная работа №3_ФИО».

  2. Сохранить измененный текст в текстовом редакторе, обращая внимание на расширение .html .

  3. Активизировать браузер, щелкнув по кнопке «Обновить». Обратить внимание на содержание верхней строки окна браузера. Она должна отобразить название документа. Запомнить URL-адрес документа, размещенный в поле адресной строки.

1.3.Оформить содержательную часть документа:

  1. Перейти на поле текстового редактора и установить пару тэгов <BODY> после тэга </HEAD>.

  2. Установить курсор между парой <BODY> и несколько раз нажать на клавишу «Ввод», чтобы расширить поле для строк разметки текста документа.

Объект документа HTML DOM

❮ Предыдущий Далее ❯


Объект документа

Когда HTML-документ загружается в веб-браузер, он становится объектом документа .

Объект документа является корневым узлом документа HTML.

Объект документа является свойством объекта окна .

Доступ к объекту документа осуществляется с помощью:

window. document или просто документ

Примеры

let url = window.document.URL;

Попробуйте сами »

let url = document.URL;

Попробуйте сами »


Свойства и методы объекта документа

Следующие свойства и методы могут использоваться в документах HTML:

Свойство/метод Описание
активный элемент Возвращает текущий элемент документа в фокусе
addEventListener() Добавляет обработчик события к документу
принятьУзел() Принимает узел из другого документа
анкеры Устарело
апплеты Устарело
базовый URI Возвращает абсолютный базовый URI документа
корпус Задает или возвращает тело документа (элемент)
кодировка Устарело
набор символов Возвращает кодировку символов для документа
закрыть() Закрывает выходной поток, ранее открытый с помощью document.
open()
печенье Возвращает все пары «имя/значение» файлов cookie в документе.
создать атрибут() Создает узел атрибута
создать комментарий() Создает узел комментариев с указанным текстом
createDocumentFragment() Создает пустой узел DocumentFragment
создатьЭлемент() Создает узел элемента
создать событие() Создает новое событие
создатьTextNode() Создает текстовый узел
вид по умолчанию Возвращает объект окна, связанный с документом, или null, если он недоступен.
DesignMode Определяет, должен ли быть редактируемым весь документ или нет.
тип документа Возвращает объявление типа документа, связанное с документом
элемент документа Возвращает элемент документа документа (элемент)
режим документа Устарело
URI документа Задает или возвращает местоположение документа
домен Возвращает доменное имя сервера, загрузившего документ
domConfig Устарело
встроенный Возвращает коллекцию всех элементов документа
execCommand() Устарело
формы Возвращает коллекцию всех элементов
в документе
getElementById() Возвращает элемент, имеющий атрибут ID с указанным значением
getElementsByClassName() Возвращает HTMLCollection, содержащую все элементы с указанным именем класса
getElementsByName() Возвращает активный NodeList, содержащий все элементы с указанным именем
getElementsByTagName() Возвращает HTMLCollection, содержащую все элементы с указанным именем тега
hasFocus() Возвращает логическое значение, указывающее, находится ли документ в фокусе.
головка Возвращает элемент документа
изображений Возвращает коллекцию всех элементов в документе
реализация Возвращает объект DOMImplementation, обрабатывающий этот документ.
importNode() Импорт узла из другого документа
inputEncoding Устарело
последний Модифицированный Возвращает дату и время последнего изменения документа
ссылки Возвращает коллекцию всех элементов и в документе, имеющих атрибут href
нормализация() Удаляет пустые узлы Text и соединяет соседние узлы
нормализовать документ() Устарело
открыть() Открывает поток вывода HTML для сбора вывода из document.write()
селектор запросов() Возвращает первый элемент, соответствующий указанному селектору CSS в документе
запросСелекторВсе() Возвращает статический NodeList, содержащий все элементы, которые соответствуют указанным селекторам CSS в документе
состояние готовности Возвращает статус (загрузка) документа
реферер Возвращает URL-адрес документа, который загрузил текущий документ
удалитьEventListener() Удаляет обработчик события из документа (который был присоединен с помощью метода addEventListener())
переименоватьУзел() Устарело
скрипты Возвращает коллекцию элементов