2 Структурирование и разметка контента
Большое количество элементов HTML предназначено для организации контента и прежде всего текста, который обычно составляет подавляющую часть содержимого Web-страниц.
Структурирование контента подразумевает его разбивку на логические блоки. Первым среди таких блоков, как правило, следует заголовок.
2.1 Заголовки
Элементы Н1-Н6 предназначены для определения заголовков различных уровней в составе документа. H1 задает заголовок первого, или верхнего, уровня, Н2 — заголовок второго уровня, Н3 - третьего уровня и т. д. Как правило, раздел BODY начинается с заголовка первого уровня, содержащего тот же текст, что и элемент TITLE, находящийся в разделе HEAD. В остальной части документа заголовки второго уровня (Н2) используются для определения заголовков разделов, НЗ - для подразделов и т. д.
В большинстве браузеров заголовки отображаются полужирным шрифтом: H1 - наибольшего размера, а Н6 - наименьшего.
По умолчанию к заголовкам применяется выравнивание по левому краю, однако при необходимости они могут быть расположены по центру либо выровнены по правому краю документа. Тип выравнивания задается с помощью атрибута ALIGN, допустимыми значениями которого являются LEFT, RIGHT, CENTER и JUSTIFY. Если задано значение JUSTIFY, то заголовки, длина которых превышает ширину окна браузера, располагаются так, что их левая и правая границы совпадают с границами окна.
Примеры заголовков различных уровней приведены в примере 2.1. Заголовок третьего уровня отображается с подчеркиванием. На рис. 2.1 показан внешний вид этого документа в окне браузера Internet Explorer 5.0.
|
Пример 2.1. Документ с заголовками разных уровней |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTМL> <HEAD> <TIТLE>Уровни заголовков</TITLE> </HEAD> <ВODY> <Н1>Заголовок 1-го уровня (H1)</Н1> <Н2 ALIGN="СЕNTER"> Заголовок 2-го уровня (H2)</H2> <H3><U>Заголовок 3-го уровня (H3)</U></H3> <Н4 ALIGN="RIGНТ"> Заголовок 4-го уровня (H4)</H4> <H5> Заголовок 5-го уровня (H5)</Н5> <Н6> Заголовок 6-го уровня (H6)</H6> </BОDY> </НТML>
|
2.2 Встроенные и блочные элементы
Все элементы, отвечающие за представление контента, принято разделять на две большие группы: элементы уровня блока, или блочные (block) и встроенные, или элементы уровня текста (inline).
Первые отделяют в тексте и вообще в контенте большие блоки (например, заголовок, абзац, адрес автора публикации). Вторые выделяют фрагмент внутри строки (одно слово или фразу).
По умолчанию блоки начинаются с новой строки и отделяются от предыдущего и последующего блока строкой. Блоки могут быть вложены друг в друга. Блочные элементы могут содержать встроенные элементы.
Элементы более низкого уровня - уровня текста - по умолчанию выводятся друг за другом в текущей строке. Они могут встраиваться в элементы уровня блока и включать другие встроенные элементы.
|
Пример 2.2. Блочная структура Web-страницы |
|
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
16 17
18 19
|
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.0 Transit! onal//EN"> <html> <head> <TITLE>Заголовки,блоки,абзацы</TITLE> </hЕАd> <ВОdy leftmargin="100" bgcolor="#ffffff"> <Н1 align="center"> <Р>Часть первая <Р>Старгородский лев </h1> <Н2> <р>Глава 1<Р>Безенчук и "Нимфы" </Н2> <div style="background:#ffddff; color:#006600; margin-left:-40px"> <Р>В уездном городе N было так много парикмахерских заведений и бюро похоронных процессий, что казалось, жители города рождаются лишь затем, чтобы побриться, остричься, освежить голову вежеталем и сразу же умереть. А на самом деле в уездном городе N люди рождались, брились и умирали довольно редко. Жизнь города N была тишайшей.</р> </div> <р>Вопросы любви и смерти не волновали Ипполита Матвеевича Воробьянинова, хотя этими вопросами по роду своей службы он ведал с девяти утра до пяти вечера ежедневно с получасовым перерывом для завтрака.</р> </ВОdy> </hТml>
|
Анализируя данную Web-страницу, можно отметить следующее.
Строки 7-10: заголовок первого уровня.
Строки 11-13: заголовок второго уровня, выполненный по умолчанию более мелким шрифтом.
Строки 14-16: блок <div>. Для наглядности он выделен другим цветом текста и фоном, а также смещен на 40 пикселей влево от линии других элементов.
Строка 17. Обычный абзац, созданный при помощи элемента <р>.
Все перечисленные элементы входят в элемент <body>. В терминах программирования говорят, что этот элемент является родительским, для вложенных элементов-потомков <h1>, <h2>, <div>, <р>. Элементы-потомки наследуют ряд свойств элемента-родителя. Например, <h1>, <h2>, <p> наследуют от <body> значение левой границы. Элемент <div> выпадает из этого списка, поскольку для него явно задано левое поле. А вот элемент <р>, который входит в <div>, наследует от него смещенную левую границу (рис. 2.2).
