Лекция 2. Структура HTML-документа

Изучаемые вопросы

1. Элементы языка HTML

2. Структура HTML-документа

3. Теги тела документа

4. Html-формы Из истории языка

Год	Событие
около 1991	Тим Бернерс-Ли изобрел World Wide Web, он создал первые Веб-сервер и Веб-браузер и первую версию HTML
1995	Разработана версия 2.0 языка HTML
1997	Консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров.
1999	Опубликована версия HTML 4.01
2000	Консорциум W3C опубликовал спецификацию XHTML 1.0, которая была реструктуризацией HTML, чтобы сделать его действительным документом XML
В настоящее время	Опубликована версия HTML 5

1. Элементы языка html

HTML (Hyper Text Markup Language) является описательным языком разметки документов. Указателями раз метки являються теги – заключенные в треугольные скобки символы. HTML – документ можно представить как совокупность элементов, каждый из которых начинается и заканчивается разметочными тегами, то есть документ НТМL представляет собой не что иное, как обычный текстовый АSСII-файл с добавленными в него управляющими НТМL-кодами (тегами).

Каждый элемент может иметь свое имя, атрибуты-параметры и содержимое, которое часто называют контентом (от англий­ского content — содержимое).

Большинство элементов представляется в виде последователь­ности:

открывающий тег, в котором располагается имя элемента и его атрибуты;

содержимое (контент);

закрывающий тег.

Открывающий тег представляет собой угловые скобки < >, в которых располагается название тега, другими словами, сама ко­манда-инструкция для браузера, например:

<р> — тег, открывающий элемент-абзац.

Большинству открывающих тегов соответствует закрывающий тег — аналогичная комбинация, в которой перед именем команды ставится косая черта (слеш) например:

</p> - тег, закрывающий элемент-абзац.

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

Некоторые элементы не имеют закрывающего те­га. Такими элементами являются, например, элементы <meta>, <frame>, <hr> и др. Они состоят только из открывающего тега, по­этому не могут ограничивать никакую часть документа, и, следова­тельно, не имеют содержимого, а сами по себе образуют отдельные элементы. Далее они будут называться одиночными тегами.

Расположение элементов. Элементы могут следовать друг за дру­гом, а могут быть вложенными (если они представляют собой кон­тейнер). Но элементы не могут пересекаться.

Например, правильного расположения вложенных элементов

<div><p>Hello, world!</p></div>

В данном случае элемент <р> вложен в эле­мент <div>.

Пример следующих друг за другм элементов

<div>Hello, world!</div><p>Это новый абзац</р>

Если элементы пересекаются, то ошибки не возникает, и документ все равно будет отображаться, но отображаться таким образом как браузер обработает неправильную комбинацию элементов. А это означает, что при неправильном расположении элементов документ будет отображен не так, как задумывал его автор.

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

Атрибуты

Каждый элемент может содержать атрибуты, которые располагаются в от­крывающем теге тег. Атрибуты вставляются в теги для того, чтобы предоставить программе-браузеру дополнительную информацию о том, как браузер должен выполнить инструкцию тега.

Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Если значение атрибута содержит несколько слов (символов), разделенных пробелами, то его обязательно нужно заключить в одинарные или двойные кавычки. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов.

Например, запись элемента <р> с атрибутом align выглядит так:

<р align=center>

В одном элементе одновременно может присутствовать несколько атрибутов. В этом случае они отделяются друг от друга пробелом:

<р атрибут1=значение1 атрибут2=значение2 ….>

Для каждого элемента существует определенный набор возмож­ных атрибутов.

Теги сходного назначения могут иметь одинаковые атрибуты. В некоторых случаях атрибуты являются уникальными. Когда атрибуты не указаны явно, используются их значения, задан­ные по умолчанию. В HTML допускаются атрибуты без значений. По сути — это ло­гические атрибуты, имеющие значение 0 или 1, «yes» или «no». Указание атрибута подразумевает, что он уже имеет одно из значе­ний. Отсутствие атрибута указывает на противоположное значение.

Типы данных

В HTML используются следующие типы данных:

• текстовые строки;

• символы;

• URI;

• цвет;

• линейные размеры (длина и ширина);

• дата и время;

• MIME-типы (указывают характер содержимого).

Текстовые строки. Представляют собой последовательность чи­таемых символов — букв, цифр, знаков препинания. Особенность строк заключается в том, что при интерпретации браузером из них изымаются символы перевода строки, и несколько идущих подряд пробелов заменяются одним. Аналогично не воспринимаются на­чальный и конечный пробелы в значениях атрибутов. Например, значения “ left “ - и “left” будут интерпретированы одинаково.

Символы. Иногда кодировка, используемая при наборе текста или программы, не содержит нужный символ документа. Неко­торых символов просто нет на клавиатуре. Иногда возникает необходимость включить в текст HTML документа символы, которые могут быть восприняты браузером как теги. В таких случаях можно использовать соответствующий численный (в десятичной или шестнадцатеричной системе счисления) эквивалент или специальные буквенные сочетания — строковые константы, или литералы. Признаком строковой константы является знак & в начале. Например, знак «меньше» (<) может быть обозначен литералом < (от английского «меньше чем» — less than) или кодом &#060; , а символ «больше» (>) - литералом &gt; (от английского «больше чем» - greater then) или кодом >.Если указать в тексте HTML строку <BODY>, то она будет выглядеть на экране как текст <BODY> и не будет воспринята как тег.

CER (Character Entity Reference – ссылка на сущность символа) всегда начинается с амперсанда «&». В отличие от наименований тегов   HTML, наименования CER чувствительны к регистру символов. В таблице 2.1. приведены наиболее часто используемые CER и соответствующие им числовые коды.

Таблица 2.1.

Числовой код	Именная замена	Символ	Описание
"	"	«	Кавычка
&	&	&	Амперсанд
<	<	<	Меньше
>	>	>	Больше
			Неразрывный пробел
¡	¡	¡	Перевернутый восклицательный знак
¢	¢	¢	Цент
£	£	£	Фунт
¤	¤	¤	Валюта
¥	¥	¥	Йена
¨	¨	¨	Умляут
©	©	©	Копирайт
«	«	«	Левая угловая кавычка
®	®	®	Зарегистрированная торговая марка
±	±	±	Плюс или минус
»	»	»	Правая угловая кавычка

Подробный список литералов и соответствующих цифровых кодов приведен в приложении 2.

URI (Universal Resource Identifier). При разработке Web-страниц часто используются адреса различных связанных документов — URI. Это могут быть гипер­ссылки новых страниц или ресурсы, которые необходимо загрузить на текущую страницу.

Различают URI абсолютные и относительные.

Абсолютные URI могут иметь следующий вид :

http://www.tutor.com/html/index.html

1. Первая часть адреса — http: // — указывает тип сервиса, которым вы хотите воспользоваться. В частности http: // указывает на протокол HTTP, который используется для обмена сообщениями в виде гипертекста. Могуть использоваться и другие протоколы, например, ftp:// - протокол для обмела файлами и др. Не обходимо отметить, что в Интернете применяются соглашения операционной системы Unix, в которой для разделения каталогов используется косая черта «/» (слеш), в отличие от DOS, где при указании пути употребляется «обратный» слеш «\».

2. Вторая часть адреса, www.tutor.com/, является доменным име­нем сервера, на котором находится запрашиваемый ресурс.

3. Третья часть, html/, указывает путь (каталог html/) к файлу на сервере, в котором находится запрашиваемый ресурс.

4. Последняя часть (index.html) определяет имя самого файла, index, и его расширение, html. Если имя файла отсутствует, то сервер от­крывает файл, заданный по умолчанию. Обычно таким файлом является файл с именем index.html, или index.htm, или default.html или default.htm.

Если запрашиваемый ресурс находится на том же сервере, что и текущий ресурс, то для обращения к нему может бать использован относительный адрес (относительно текущего ресурса). Для формирования относительного адреса действуют те же правила, что и в MS-DOS. Например, если адрес используемого ресурса http://www.tutor.com/html/index.html, а требуемый ресурс расположен по адресу http://www.tutor.com/html/CER/index.html, то путь к этому ресурсу может быть представлен в виде CER/index.html. Если текущий ресурс находится в каталоге CER, то для перехода в родительський каталог можно записать ../index.html/

Цвет. Существуют несколько основных способов представления цветов в HTML.

1. В виде #RRGGBB. Представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:

две первые цифры (RR) — красный

две в середине (GG) — зелёный

две последние цифры (BB)— синий

2. Представление ключевыми словами, например red, green, blue, black. Во избежание случаев, когда указанное ключевое слово «не понимается» браузером следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.

3. В виде rgb(*,*,*), где «*» — десятичные числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.

Единицы измерения длины

Единицы измерения длины делятся на абсолютные и относительные.

Абсолютные единицы измерения длины

in — дюймы (1 дюйм равен 2,54 сантиметра),

cm — сантиметры,

mm — миллиметры,

pt — points. Point — это «точка», равная 1/72 дюйма или 0,36 мм, которая еще уверенно различается человеческим глазом.

рс — picas. 1pica (пика) равна 12 pt.

Относительные единицы измерения .

em — единица измерения, которая базируется на ширине стан­дартной для типографии буквы «т». Значение 1,5еm будет в полтора раза больше базового размера данного шрифта.

ех — единица измерения, которая основана на высоте шрифта.

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

MIME-типы данных. Протокол MIME (Multipurpose Internet Mail Extension) первоначально был разработан для описания фай­лов, вкладываемых в электронную почту. Он определял, какой тип данных передается сервером. Сейчас протокол активно использует­ся и в других интернет-сервисах. Сначала указывается тип файла, а затем (через косую черту) — конкретный его формат: «тип файла/ формат», например image/gif или text/html, или application/jp. Когда строка с MIME-типом данных является значением атрибута (часто атрибута type), то подобная за­пись может выглядеть так: type="text/html". Подробный список MIME-типов приведен в приложении 5.

Комментарии

Текст, заключенній в теги <!-- --> воспринимается как комментарий к коду и не отображается в окне браузера