Контрольные вопросы
1. Приведите пример пустой страницы на HTML 5. Какие теги используются и что они обозначают?
2. По каким принципам размещаются элементы в HTML документе?
3. Объясните принцип построения DOM-дерева.
§ 3. Структурирование текста
Если оформить текст в виде большого монолитного "куска", его вряд ли кто-то будет читать. Такой "кусок" текста выглядит как высокий черный забор, за которым не видно ни единой мысли автора.
Именно поэтому текст всегда разграничивают на абзацы. Небольшие, включающие по несколько связанных по смыслу предложений, они доносят авторский текст постепенно, по частям, от простого к сложному. В общем, превращают непроницаемый "забор" в читабельный текст.
В HTML для создания абзаца используется парный тег <p>. Содержимое этого тега становится текстом абзаца. Рассмотрим следующий пример части HTML-страницы:
Листинг 1.2. Создание двух абзацев
<p>Текст короткого абзаца</p>
<p>Текст очень длинного абзаца, который может содержать несколько предложений.
Можно переводить каретку на новую строку, всё равно в браузере перехода на новую строку внутри абзаца не будет.</p>
Рисунок 1.2. Пример отображения абзацев
Также в языке HTML существуют специальные теги, которые обозначают, что в них заключены заголовки. Это h1, h2, h3, h4, h5 и h6. Тег <h1> обозначает заголовок самого верхнего уровня, то есть, самый главный, тег <h6> — заголовок самого низкого уровня.
Важно отметить, что в некоторых случаях перевод каретки необходим и внутри абзаца, например, при написании стихотворений. Для этой цели используется тег <br>. Но не стоит вставлять этот тег там, где можно использовать логически понятное разделение на абзацы.
В листинге 1.3 показан пример создания web-страницы с изложенными выше тегами.
Листинг 1.3. Вёрстка стихотворения
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Весенняя гроза, Тютчев</title>
</head>
<body>
<h1>Весенняя гроза</h1>
<h2>Фёдор Иванович Тютчев</h2>
<p>
Люблю грозу в начале мая,<br>
Когда весенний, первый гром,<br>
Как бы резвяся и играя, <br>
Грохочет в небе голубом.
</p>
</body>
</html>
Рисунок 1.3. Пример отображение листинга 1.3
В HTML 5 были добавлены семантические (смысловые) теги для обработки информации машинным методом. Например, тег <hgroup> позволяет дополнительно группировать заголовки, тег <section> объединять разные элементы, если они относятся к чему-то общему по смыслу, а теги <article>, <header>, <footer> и прочие отделить разные части страницы друг от друга.
Контрольные вопросы
1. Сколько уровней заголовков существует в HTML? Какие теги они имеют?
2. Как устроено построение текстовой информации в HTML? Какие теги для этого используются?
3. Продемонстрируйте и поясните, в чём польза введения семантических тегов HTML 5 при структурировании текстовой информации.
§ 4. Оформление документа
При написании текстом может понадобиться выделение каких-либо его частей. Например, необходимо выделить определение конкретного термина. Для данных действий в HTML предусмотрено использование специализированных тегов.
Самый распространённый тег физической разметки (то есть не отражающий смысл информации внутри него) — <span>. Он является строчным, то есть его можно использовать так, как показано в листинге 1.4.
Листинг 1.3. Использование тега span
<p>Абзацы следует выделять тегом <span class=”code”>p</span></p>
В листинге также был использован один из ключевых атрибутов практически всех тегов — class. Но в данном контексте он рассмотрению не подлежит.
Для выделения информации из контекста может применяться семантический тег <strong>. Большинство браузеров отображают выделенный текст жирным начертанием, а некоторые поисковые системы повышают приоритет текста внутри данного элемента.
Ещё одним тегом для акцентирования текста является <em>. Браузеры выделяют текст внутри такого элемента курсивным начертанием.
Во время распространения HTML 4.01 были популярны теги <b>, <i>. Они являются аналогами <strong> и <em>, но не рекомендованы в использовании, так как, опять же, не несут смысловой нагрузки для анализатора гипертекстовой разметки (пользователя или машину).
Некоторую информацию легче представлять в табличной форме (например, отчёты, сводные таблицы и т.п.). В HTML есть средства для отображения таблиц. Для определения, что данные внутри будут представлены в виде таблицы, следует писать тег <table>. Внутри него последовательно заполняются строки, а внутри строк ячейки. Тег, обозначающий описание строки — <tr>, пишется внутри <table> (вспомните про принцип матрёшки). Для описания ячейки используется тег <td>. Известно, что некоторые смежные ячейки могут быть объединены. Для этого предусмотрены свойства colspan и rowspan, определяющие количество “сросшихся” ячеек по вертикали и горизонтали соответственно. На листинге 1.4 представлен пример таблицы.
Листинг 1.4. Создание таблицы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Компьютеры</title>
</head>
<body>
<h1>Количество компьютеров по годам</h1>
<table border="1">
<tr>
<td rowspan="2">Год</td>
<td colspan="2">Количество</td>
</tr>
<tr>
<td>1 полугодие</td>
<td>2 полугодие</td>
</tr>
<tr>
<td>2012</td>
<td>500</td>
<td>200</td>
</tr>
<tr>
<td>2013</td>
<td>1400</td>
<td>800</td>
</tr>
<table>
</body>
</html>
Рисунок 1.4. Пример отображения листинга 1.4
Следует отметить, что использование атрибута border не желательно, но необходимо для наглядности представления объединения ячеек.
Иногда требуется разместить некоторую информацию в виде списка. Конечно, можно вручную ставить маркеры или номера пунктов, а каждый элемент списка отделять как абзац, но данный подход неверен, так как пропадает вся семантика документа. Для решения данной задачи в HTML предусмотрено несколько тегов, которые позволяют создать списки. Например, тег <ul> указывает, что список будет маркированным, а тег <ol> — нумерованный. Элементы списка заключаются тегом <li>. В листинге 1.5 показаны примеры списков. Также показан пример создания вложенного списка.
Листинг 1.5. Создание вложенных списков
<ol>
<li>Канада</li>
<li>Россия
<ul>
<li>Ульяновская область</li>
<li>Москва</li>
<li>Саратов</li>
</ul>
</li>
<li>Мадагаскар</li>
</ol>
Рисунок 1.5. Пример отображения разных видов списков
Может сложиться впечатление, что HTML работает только с текстом, но это не так. Новые мультимедиа технологии позволяют сделать HTML не только гипертекстовым, но и гипермедийным языком. Самым простейшим и распространённым примером включения мультимедиа информации в web-страницу, является добавление изображений. В HTML это делается при помощи тега <img src=”ссылка” alt=”описание”>. Ссылка на изображение может быть как абсолютной, так и относительной. Описание будет появляться, если изображение не может быть загружено, либо поддержка показа картинок отключена в браузере. В листинге 1.6 представлен пример вставки изображения.
Листинг 1.6. Расположение изображения на странице
<img src=”welcome.png” alt=”Добро пожаловать!”>
Стилизация текста, позиционирование различных элементов web-страницы и другие задачи, связанные с приданием странице индивидуального вида, будут рассмотрены позже, в главе “Каскадные таблицы стилей (CSS)”. Стилизация элементов специально не будет рассматриваться в этой главе, так как следует понимать различие между каркасом HTML документа (DOM-деревом) и стилизацией отдельных его элементов. В профессиональной вёрстке сначала подготавливается основа будущей страницы (то, что рассматривается в этой главе), а потом стилизуются элементы (это будет рассмотрено далее). Такой подход наиболее продуктивен и позволяет облегчить написанный код, уменьшить количество часов рабочего времени и, соответственно, затраты на вёрстку.