Лекция: Основные положения гипертекстовой разметки
HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL-кодами (тегами). В HTML разрешено использовать только три управляющих символа: горизонтальную табуляцию, перевод каретки и перевод строки. Это облегчает взаимодействие с различными операционными системами.
Теги НТМL-документов в большинстве своем просты и понятны, так как они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений.
НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например, <HEAD> или <I>. Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:
<TABLE WIDTH=570 ALIGN=center CELLPADDING=10
CELLSPACING=2 BORDER=16>
Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.
Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет.
Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается., Однако при анализе значений атрибутов регистр символов учитывается. Например, особенно важно использовать нужный регистр при вводе URL (Uniform Resource Locator, унифицированный указатель ресурса).
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив <I> закрывающая пара представляет собой </I>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные теги никогда не содержат атрибутов.
По своему значению теги близки к понятию скобок «begin/end» или фигурных скобок {… } в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Теги определяют область действия правил интерпретации текстовых документов.
При использовании вложенных элементов разметки в документе следует соблюдать особую аккуратность. Вложенные теги нужно закрывать, начиная с последнего. Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например, теги <META> и <BASE>.
В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров устроено так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Самый распространенный тег такого типа — тег абзаца <Р>. Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца не пользуются.
Есть и другие конечные теги, без которых браузеры отлично работают, например, конечный тег </HTML>. Тем не менее, рекомендуется включать по возможности больше конечных тегов, чтобы избежать путаницы и ошибок при воспроизведении документа.
Для краткости и образности мы будем в ряде случаев вместо словосочетания «элемент разметки» применять термин «контейнер».
Общая схема построения контейнера в формате HTML может быть записана в следующем виде:
«контейнер»=
<«имя тега» «список атрибутов»>
содержание контейнера
</«имя тега»>
Следует отметить, что в литературе кроме термина «контейнер» еще используется и термин «элемент». Следует быть внимательным, чтобы не путать контейнер (например, BODY) и тег (BODY), используемый при формировании контейнера.
Кроме тегов, элементами HTML являются подстановочные коды (CER или Character Entity Reference). Они предназначены для представления специальных символов в документе HTML, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега ( к примеру — <BR>) просто в документе, браузер может воспринять его как непосредственно старт-тег. Для вывода таких символов и используются такие ссылки.
CER легко обнаружить, если посмотреть на структуру любого документа HTML, поскольку каждый из них начинается с амперсанда "&". В отличие от наименований тегов HTML, наименования CER чувствительны к регистру символов. Также наименования CER могут задаваться не в виде имени, а с помощью трехзначных кодов символов в виде &#nnn;. Далее в таблице 2.1 приведены наиболее часто используемые CER и соответствующие им числовые коды.
Таблица 2.1.
Наиболее часто используемые CER и соответствующие им числовые коды.
| Числовой код | Именная замена | Символ | Описание |
| " | " | " | Кавычка |
| & | & | & | Амперсанд |
| < | < | < | Меньше |
| > | > | > | Больше |
| ¡ | ¡ | ¡ | Перевернутый восклицательный знак |
| ¢ | ¢ | ¢ | Цент |
| £ | £ | £ | Фунт |
| ¤ | ¤ | ¤ | Валюта |
| ¥ | ¥ | ¥ | Йена |
| ¨ | ¨ | ¨ | Умляут |
| © | © | © | Копирайт |
| « | « | « | Левая угловая кавычка |
| ® | ® | ® | Зарегистрированная торговая марка |
| ± | ± | ± | Плюс или минус |
| » | » | » | Правая угловая кавычка |
2.1.3. Назначение и состав контейнера <HTML> … </HTML>
Тэги <HTML> и </HTML определяют границы собственно HTML документа. Все остальные элементы, описывающие HTML — документ, находятся внутри данного контейнера.
Гипертекстовый документ (или Контейнер HTML) состоит из двух других вложенных контейнеров: заголовочной части (или заголовка документа) HEAD и тела документа (BODY). Рассмотрим правила их составления подробнее.
2.2 Структура HTML – документа и используемые для этого тэги
Документ в формате HTML 4.0 состоит из трех частей:
● строки, содержащей информацию о версии HTML ;
● раздела заголовков (определяемого элементом HEAD);
● тела, которое включает собственно содержимое документа. Тело может вводиться элементом BODY.
Перед каждым элементом или после каждого элемента может находиться пустое пространство (пробелы, переход на новую строку, табуляции и комментарии).
Вот пример простого документа HTML:
| Раздел 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" «www.w3.org/TR/REC-html40/strict.dtd»> |
| Начало контейнера HTML | <HTML> |
| Раздел 2-заголовочная часть документа | <HEAD> <TITLE>Мой первый документ HTML</TITLE> </HEAD> |
| Раздел 3 — | <BODY> <P>Всем привет! </BODY> |
| Конец контейнера HTML | </HTML> |
Следует обратить внимание, что разделы 2 и 3 входят в состав контейнера <HTML>...</HTML>.
Рассмотрим подробнее части документа и теги, формирующие их структуру