Краткий справочник по XHTML - Мои статьи - Каталог статей

Для того чтобы написать структурно грамотную разметку, на начальном этапе достаточно знать всего несколько логических тегов. Краткий справочник по основным тегам XHTML приведен на этой страничке. Вы можете распечатать его и держать под рукой во время создания своего сайта.

Минимальный документ

Прежде, чем разбираться с конкретными тегами, я приведу шаблон минимального XHTML-документа, которому должна соответствовать любая Ваша страничка. Вы можете использовать его в качестве отправной точки.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
 <head>
 <title>Название страницы</title>
 </head>
 
 <body>
 
 <p>Содержимое страницы</p>
 
 </body>
 </html>

Заголовки

В стандарте XHTML предусматривается 6 уровней заголовков, которые используются для того, чтобы структурировать документ. Каждый последующий заголовок является менее важным, чем предыдущий. В грамотно размеченном документе все заголовки должны появляться последовательно. После заголовка 1-го уровня не может сразу идти заголовок 3-го уровня. В обычных документах количество уровней заголовков не превышает трех.

 <h1>Заголовок 1-го уровня</h1>
 <h2>Заголовок 2-го уровня</h2>
 <h3>Заголовок 3-го уровня</h3>
 <h4>Заголовок 4-го уровня</h4>
 <h5>Заголовок 5-го уровня</h5>
 <h6>Заголовок 6-го уровня</h6>

Абзацы

Все абзацы в тексте необходимо обязательно помечать открывающим и закрывающим тегом абзаца. В случае, если Вам необходимо сделать перенос в строке, то используйте для этого тег перевода строки <br />.

 <p>Это пример абзаца, который содержит<br />
 перенос строки</p>

Списки

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

Пример маркированного списка:

 <ul>
 <li>Физика</li>
 <li>Математика</li>
 <li>Химия</li>
 </ul>

Пример нумерованного списка:

 <ol>
 <li>Бананы</li>
 <li>Яблоки</li>
 <li>Груши</li>
 <li>Апельсины</li>
 </ol>

Списки могут быть вложенными и при этом смешанными:

 <ol>
 <li>Физика</li>
 <li>Математика
 <ul>
 <li>Арифметика</li>
 <li>Алгебра</li>
 <li>Геометрия</li>
 </ul>
 </li>
 <li>Химия</li>
 </ol>

При использовании стилевой верстки в виде списков удобно представлять меню сайта.

Определения

Кроме обычных списков стандарт HTML поддерживает т.н. списки определений терминов. Его синтаксис несколько отличается от обычных нумерованных и маркированных списков.

 <dl>
 <dt>Луна</dt>
 <dd>Естественный спутник Земли</dd>
 <dt>Венера</dt>
 <dd>Одна из двух ближайших к Земле планет</dd>
 </dl>

Логическое выделение

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

 <p>В этом абзаце один фрагмент текста выделен <em>наклонным</em> 
 начертанием, а другой <strong>полужирным</strong>.</p>

Горизонтальная черта

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

 <hr />

Таблицы

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

 <table width="100%">
 <caption>Название таблицы</caption>
 <tr>
 <th>Заголовок 1-го столбца</th>
 <th>Заголовок 2-го столбца</th>
 </tr>
 <tr>
 <td>Содержимое ячейки</td>
 <td>Содержимое ячейки</td>
 </tr>
 </table>

В таблице можно объединять ячейки по горизонтали или по вертикали. Это делается при помощи атрибутов colspan илиrowspan соответственно. При этом значение атрибута указывается в самой левой и/или верхней ячейки. Объединенная ячейка имеет ширину, равную сумме ширин исходных ячеек.

 ...
 <td colspan="3">Объединение трех ячеек по горизонтали</td>
 ...
 <td rowspan="2">Объединение двух ячеек по вертикали</td>
 ...

Ссылки

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

 <a href="page_2.htm">Перейти на вторую страницу</a>

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

 <a href="http://www.yandex.ru/">Поисковая система Yandex</a>

Мы также можем сослаться на конкретное место в странице. Для этого предварительно необходимо пометить нужный фрагмент при помощи атрибута id, добавив его к нужному тегу:

 <h2 id="section_1">Заголовок фрагмента<h2>
 <p>Содержимое фрагмента текста, на который мы хотим сослаться.</p>

А затем мы можем сослаться на этот фрагмент, используя символ решетки (#):

 <a href="#section_1">Перейти к 1-му фрагменту</a> на этой же странице</p>

Изображения

Перед тем, как добавить изображение на страничку, его необходимо предварительно подготовить. Изображение должно быть в формате GIF, JPEG или PNG. В формате GIF или PNG удобно сохранять рисованную графику, а также скриншоты программ, в то время как формат JPEG используется для сохранения фотографий. Вставка изображения в текст производится при помощи следующей конcтрукции:

 <img src="picture.gif" style="width:150px; height:50px;" alt="Поясняющий текст" />

Необходимо обязательно указывать ширину и высоту изображения, т.к. это позволяет браузеру начать отрисовку изображения, не дожидаясь его полной загрузки. Также очень важно в атрибуте alt указать альтернативный текст для изображения для тех случаев, когда по каким-либо причинам графика на страничке недоступна.

Мы можем задать обтекание изображения текстом слева или справа. Для этого используется атрибут align, указываемый во встроенном стиле, который может принимать значения left или right:

 <img src="picture.gif" style="width:150px; height:50px; align:left;" 
 alt="Изображение выровнено влево с обтеканием">
 
 <p>Этот текст будет обтекать изображение, которое разместится слева от него.</p>

Верхние и нижние индексы

Иногда необходимо написать текст в виде подстрочного или надстрочного индекса. Скажем, чтобы пометить сноску или написать несложную математическую формулу. Это можно сделать используя теги <sub> (нижний индекс) и <sup> (верхний индекс).

 ...
 H<sub>2</sub>O - формула воды
 ...
 x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup> - математическое уравнение
 ...

Неформатированный текст

В ряде случаев возникает необходимость включить в текст странички некую информацию с сохранением всех отступов. Скажем, Вы пишите статью о программировании и иллюстрируете код фрагментами программ или, например, увлекаетесь искусством создания рисунков из символов - так называемый ASCII-art. В обоих случаях пробелы играют немаловажную роль, а сам такой текст в HTML называется неформатированным. Для его вставки используется специальный тег <pre>.

 <pre>
 Текст внутри этих тегов будет 
 показан моноширинным 
 шрифтом с сохранением 
 всех пробелов!
 </pre>

Специальные символы

В ряде случаев необходимо отобразить символы, которые отсутствуют на клавиатуре и/или в кодовой таблице выбранной кодировки страницы. В этом случае необходимо использовать амперсанд-подстановки. Наиболее важные из них приведены в таблице.

Символ	Подстановка	Описание
<	<	Левая угловая скобка (знак меньше)
>	>	Правая угловая скобка (знак больше)
"	"	Прямая кавычка (знак дюйма)
&	&	Амперсанд
		Неразрывный пробел
©	©	Знак авторского права
®	®	Зарегистрированная торговая марка
§	§	Знак параграфа