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

Элемент ABBR

   Элемент ABBR определяет текст как аббревиатуру. С помощью атрибута title можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте title.
   Пример:
   <abbr title="Научно-исследовательский институт">НИИ</abbr>

Элемент ACRONYM

   Элемент ACRONYM указывает, что текст является акронимом.

   Примечание
   Акронимы – это некие устоявшиеся сокращения, например СНГ, США и т. п.

   Атрибут title позволяет задать расшифровку акронима. Пример:
   <acronym>СНГ</acronym>

Элемент CITE

   Элемент CITE отмечает небольшую цитату или сноску, взятую из другого источника. Такой текст обычно отображается курсивом.
   Пример:
   <cite>Здесь указан источник информации</cite>

Элемент CODE

   Этот элемент указывает на программный код, который может содержать, например, переменные, функции, небольшие куски программы. Такой текст обычно выводится моноширинным шрифтом.
   Пример:
   Зададим функцию <code> func(int a, char b);</code>

Элемент DEL

   Элемент DEL помечает текст как удаленный и может использоваться при внесении изменений в документы. У этого элемента есть два атрибута: cite должен содержать URL документа, в котором описаны причины удаления фрагмента, а datetime – дату и время удаления фрагмента в формате ГГГГ-ММ-ДДTчч: мм: ccTZD (аббревиатура от Time Zone region with Daylight Saving Time – регион часового пояса с летним временем). Браузеры такой текст отображают как зачеркнутый.
   Пример:
   <del cite="whydel.html" datetime="2007-10-06T10:11:45+3.00"> Неактуальный фрагмент</del>

Элемент DFN

   Этот элемент выделяет текст как определение. Элемент можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.
   Пример:
   <dfn>Определение</dfn>-описание

Элемент EM

   Элемент EM выделяет важные фрагменты текста. Браузер отображает такой текст курсивом.
   Пример:
   <em>Важно</em>

Элемент INS

   Элемент INS отмечает текст как вставку и применяется для выделения изменений, вносимых в документ. У этого элемента есть два атрибута: cite должен содержать URL документа, в котором описаны причины добавления фрагмента, а datetime должен содержать дату и время добавления в формате ГГГГ-ММ-ДДTчч: мм: ссTZD. Браузеры отображают такой текст как подчеркнутый.
   Пример:
   <ins cite="whyadd.html" datetime="2007-10-06T10:11:45+3.00">Новый фрагмент</ins>

Элемент KBD

   Элементом KBD помечают текст, вводимый пользователем с клавиатуры. Браузеры отображают такой текст моноширинным шрифтом.
   Пример:
   Введите слово <kbd>дом</kbd>

Элемент Q

   Этот элемент обозначает текст как цитату и применяется для добавления коротких высказываний в текст. Обычно отображается как курсив, но некоторые браузеры берут в кавычки текст, отмеченный этим элементом.
   Пример:
   Цитата: <q>Как сказал поэт</q>

Элемент SAMP

   Элемент SAMP определяет текст как пример и обычно используется для выделения результатов работы программы. Браузер выделяет этот текст моноширинным шрифтом.
   Пример:
   <samp>Образец</samp>

Элемент STRONG

   Элемент STRONG предназначен для постановки акцента на тексте. Браузеры выделяют такой текст полужирным шрифтом.
   Пример:
   <strong>Очень важный фрагмент</strong>

Элемент VAR

   Этот элемент применяется для выделения переменных из программ. Браузер отмечает такой текст курсивом.
   Пример:
   Введите переменную <var>X</var>
   В листинге 2.16 показан код страницы с различным форматированием текста.

Листинг 2.16. Логическое форматирование текста

   <html>
   <head>
   <title>Логические элементы для форматирования</title>
   <body>
   <abbr title="Научно-исследовательский институт">НИИ</abbr><br />
   2.6. Форматирование текста
   <acronym>СНГ</acronym><br />
   <cite>Здесь указан источник информации</cite><br />
   Зададим функцию <code>func(int a, char b);</code><br />
   <del cite="whydel.html" datetime="2007-10-06T10:11:45+3.00">Неактуальный фрагмент</del><br />
   <dfn>Определение</dfn>-описание<br />
   <em>Важно</em><br />
   <ins cite="whyadd.html" datetime="2007-10-06T10:11:45+3.00">Новый фрагмент</ins><br />
   Введите слово <kbd>дом</kbd><br />
   Цитата: <q>Как сказал поэт</q><br />
   <samp>Образец</samp></br>
   <strong>Очень важный фрагмент</strong><br />
   Введите переменную <var>X</var><br />
   </body>
   </html>
 
   Результат обработки браузером кода из листинга 2.16 показан на рис. 2.16.
   Рис. 2.16. Логическое форматирование текста
 
   На рис. 2.16 видно, что не все логические элементы для форматирования изменяют вид текста, потому что предназначены не для этого. Различные браузеры могут по-разному выводить различные элементы, поэтому перед тем как выложить сайт в Интернете, проверьте его вид в различных программах.

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

Элемент B

   Элемент B задает полужирное написание шрифта.
   Пример:
   <b>Полужирный шрифт</b>

Элемент I

   Элемент I отображает выделенный текст курсивом.
   Пример:
   <i>Курсив</i>

Элемент TT

   Этот элемент задает моноширинное написание текста.
   Пример:
   <tt>Моноширинный шрифт</tt>

Элемент U

   Элемент U отображает текст подчеркнутым шрифтом.
   Пример:
   <u>Подчеркнутый</u>

Элемент S

   Элемент S зачеркивает текст горизонтальной линией.
   Пример:
   <s>Зачеркнутый</s>

Элемент STRIKE

   Этот элемент также зачеркивает текст горизонтальной линией.
   Пример:
   <strike>Снова зачеркнутый</strike>

Элемент BIG

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

   Примечание
   В языке HTML размеры шрифта измеряются в условных единицах от одного до семи. Размером по умолчанию принят третий размер.

   При вложении элементов размер шрифта будет увеличиваться на единицу каждый раз.
   Пример:
   Шрифт <big>побольше <big>Еще больше</big></big>

Элемент SMALL

   Элемент SMALL отображает выделенный текст шрифтом на единицу меньшего размера относительно окружающего текста. При вложении элементов шрифт будет уменьшаться на единицу с каждым вложением.
   Пример:
   Шрифт <small>поменьше</small>

Элемент SUB

   Этот элемент задает подстрочное написание символов, то есть текст располагается ниже уровня базовой строки и становится меньшего размера. Удобно при вводе формул.
   Пример:
   _{Подстрочный} шрифт

Элемент SUP

   Элемент SUP задает надстрочное написание символов, то есть текст располагается выше базовой линии и становится меньшего размера. Этот элемент используют при написании формул.
   Пример:
   ^{Надстрочный} шрифт

Элемент SPAN

   Элемент SPAN позволяет выделить часть текста и определить для нее особые параметры отображения с помощью таблиц стилей. Он применяется для выделения небольших областей текста.
   Пример:
   <span style="background-color:#00FFFF">Текст с фоном</span>
   В листинге 2.17 представлен код страницы с различным форматированием текста.

Листинг 2.17. Физическое форматирование

   <html>
   <head>
   <title>Элементы физического форматирования</title>
   <body>
   <b>Полужирный шрифт</b><br />
   <i>Курсив</i><br />
   <tt>Моноширинный шрифт</tt><br />
   <u>Подчеркнутый</u><br />
   <s>Зачеркнутый</s><br />
   <strike>Снова зачеркнутый</strike><br />
   Шрифт <big>побольше <big>Еще больше</big></big><br />
   Шрифт <small>поменьше</small><br />
   _{Подстрочный} шрифт<br />
   ^{Надстрочный} шрифт<br />
   <span style="background-color:#00FFFF">Текст с фоном</span>
   </body>
   </html>
 
   Результат обработки браузером кода из листинга 2.17 представлен на рис. 2.17.
   Рис. 2.17. Физическое форматирование
 
   На рис. 2.17 видно, что любой физический элемент форматирования изменяет вид текста, потому что именно это является его функцией.
   Как видно из описания, зачастую действие логических и физических элементов дублируется. В принципе, рекомендуется использовать логические элементы форматирования, так как они определяют суть фрагмента текста.
   В табл. 2.1 кратко описаны аналоги рассмотренных физических элементов среди логических элементов и показано, какие элементы являются взаимозаменяемыми.

Таблица 2.1. Элементы форматирования текста

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

   Элементы, которые мы рассмотрим в этом подразделе, позволяют форматировать большие блоки текста. Они определяют параметры отображения и расположения текста, заключенного в их блок.
   Начнем рассмотрение с элемента, напрямую отвечающего за параметры шрифта.

Элемент FONT

   Элемент FONT задает параметры шрифта для текста. Хотя для форматирования предпочтительнее использовать таблицы стилей, некоторые простые документы допускают и такое определение параметров текста.
   Параметры текста задаются с помощью атрибутов элемента FONT. Можно определить шрифт, размер и цвет текста, расположенного внутри него.
   За шрифт отвечает атрибут face, значением которого должно быть название шрифта. Однако название должно быть знакомо компьютеру пользователя, иначе будет применен шрифт по умолчанию. Для решения проблемы несоответствия или отсутствия шрифтов можно задать несколько допустимых типов, введя их через запятую в качестве значения атрибута face.
   За размер шрифта отвечает атрибут size. Значение задается в относительных величинах, то есть 2 или 6. По умолчанию используется размер 3. При этом можно задать размер шрифта относительно остального текста. Для этого нужно сначала указать +, если необходимо, чтобы размер шрифта на данном участке был больше, чем основной текст, или —, если требуется обратное форматирование. После знака надо указать количество пунктов, на которое текст должен быть больше или меньше.
   За цвет шрифта отвечает атрибут color, значением которого должно быть либо ключевое слово, обозначающее имя цвета, либо код цвета в формате #RRGGBB.

   Совет
   Код цвета можно посмотреть в любом графическом редакторе.

   В листинге 2.18 показан пример кода для определения параметров текста с помощью элемента FONT.

Листинг 2.18. Использование элемента FONT

   <html>
   <head>
   <title>Элемент FONT</title>
   <body>
   <font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif" size="+2">
   Текст красного цвета с размером +2
   </font><br />
   <font color="#FF00FF" face="Verdana, Arial, Helvetica, sans-serif" size="-4">
   Текст фиолетового цвета с размером –4
   </font><br />
   </body>
   </html>
 
   Результат вывода на экран кода из листинга 2.18 показан на рис. 2.18.
   Рис. 2.18. Использование элемента FONT
 
   В примере задан список похожих шрифтов. Браузер будет просматривать список по порядку и выведет текст тем шрифтом, который найдет первым. В качестве последнего варианта указан не шрифт, а семейство шрифтов Sans Serif. Если браузер не найдет ни один из перечисленных шрифтов, он возьмет известный ему шрифт из этого семейства.
   Как задать параметры шрифта, мы разобрались. Однако этот метод не лучший. Как уже говорилось, удобнее задавать форматирование с помощью таблиц стилей.

Элемент DIV

   Элемент DIV служит для выделения больших блоков текста под форматирование с помощью таблиц стилей. Иными словами, вы помещаете необходимый блок текста между тегами элемента DIV и либо задаете ему параметры в атрибуте style, либо подключаете класс из таблицы стилей с помощью атрибута class.
   Единственное, что вы можете сделать с помощью HTML, – выровнять текст в блоке с помощью атрибута align и создать всплывающую подсказку для блока с помощью атрибута title.
   В листинге 2.19 представлен пример кода для выделения текста с помощью элемента DIV.

Листинг 2.19. Использование элемента DIV

   <html>
   <head>
   <title>Элемент DIV</title>
   <body>
   <div style="cursor:crosshair" align="center">
   Текст внутри этого элемента выровнен по центру, а с помощью стилей задается вид указателя мыши при наведении на этот блок.
   </div>
   </body>
   </html>
 
   Результат обработки кода из листинга 2.19 показан на рис. 2.19.
   Рис. 2.19. Использование элемента DIV
 
   Теперь рассмотрим ситуацию, когда у вас уже есть отформатированный нужным образом текст и вы не хотите ничего менять.

Элемент PRE

   Этот элемент служит для ввода текста без форматирования, то есть с сохранением всех пробелов и переносов строк.

   Примечание
   Обычно в HTML несколько пробелов подряд воспринимаются как один пробел.

   При использовании этого элемента текст выводится моноширинным шрифтом. Элемент PRE часто используют для вывода кодов программ. Внутри этого элемента можно применять большинство элементов форматирования текста.
   В листинге 2.20 приведен пример использования элемента PRE.

Листинг 2.20. Использование элемента PRE

   <html>
   <head>
   <title>Элемент PRE</title>
   <body>
   <pre>
   Здесь
   можно
   расположить
   код
   программы
   </pre>
   </body>
   </html>
 
   На рис. 2.20 показано, как текст, расположенный между тегами элемента PRE, выглядит в браузере.
   Рис. 2.20. Использование элемента PRE
 
   Далее рассмотрим элемент, предназначенный для форматирования больших объемов текста и отвечающий за цитаты.

Элемент BLOCKQUOTE

   Элемент BLOCKQUOTE определяет выделенный текст как цитату и применяется для описания больших высказываний. Он задает для текста отступы сверху, снизу и слева. Внутри этого элемента могут присутствовать элементы форматирования текста.
   В листинге 2.21 представлен пример выделения цитаты с помощью элемента BLOCKQUOTE.

Листинг 2.21. Ввод больших цитат

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>Элемент BLOCKQUOTE</title>
   <body>
   <blockquote>
   Здесь можно расположить важную и большую цитату.
   </blockquote>
   </body>
   </html>
 
   На рис. 2.21 показано, как в браузере выглядит текст из элемента BLOCKQUOTE.
   Рис. 2.21. Использование элемента BLOCKQUOTE
 
   Мы рассмотрели, как действует каждый вариант форматирования текста отдельно, но HTML позволяет вкладывать элементы, при этом объединяя их действие.

   Язык HTML позволяет вкладывать элементы форматирования друг в друга. При этом их действия суммируются. Если вложить в элемент B элемент I, то получится текст, написанный полужирным курсивом. При этом нужно следить за правильным закрытием элементов: тот, что открыт раньше, закрывается позже.
   В листинге 2.22 показаны примеры правильного и неправильного вложения элементов.

Листинг 2.22. Вложение элементов

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>Вложение элементов</title>
   <body>
   <del><b><i>Это неправильное вложение элементов</b></i></del><br />
   <ins><b><i>Это правильное вложение элементов</i></b></ins>
   </body>
   </html>
 
   Неправильную запись некоторые браузеры могут отображать некорректно.

   3.1. Что такое таблица
   3.2. Создание тела таблицы
   3.3. Ячейки таблицы
   3.4. Граница таблицы
   3.5. Ширина и высота таблицы и ячеек
   3.6. Группировка строк и столбцов
   3.7. Выравнивание таблицы и содержимого ячеек
   3.8. Объединение ячеек таблицы
   3.9. Установка фонового цвета или рисунка ячейки
   3.10. Создание вложенных таблиц
 
   В технической литературе и в различных документах таблицы используют, чтобы расположить информацию в простом и понятном виде. О том, как использовать таблицы в своих сайтах, вы узнаете в этой главе.
   В языке HTML таблицы используются в двух случаях: для представления числовых данных, разбитых по строкам и столбцам, или как средство форматирования веб-страниц, задания взаимного расположения элементов страницы. Ячейки таблицы могут содержать любые HTML-элементы, например заголовки, списки, абзацы, фигуры, графику, а также элементы форм. Фактически весь сайт расположен в большой сложной таблице (рис. 3.1).
   Рис. 3.1. Пример использования HTML-таблицы при создании сайта
 

   Примечание
   Как и в прошлой главе, напоминаю, что оформление таблицы согласно требованиям языка XHTML должно выполняться средствами CSS. Все элементы и атрибуты форматирования признаны в спецификации языка HTML 4. 01 нежелательными.

   Таблица состоит из ячеек, образующихся при пересечении строк и столбцов (рис. 3.2).
   Рис. 3.2. Пример стандартной таблицы
 
   Рассмотрим элементы таблицы.
   • Ячейка – это основной элемент таблицы. Она формируется пересечением строки и столбца.
   • Строка – это прямая линия ячеек, расположенных слева направо.
   • Столбец – это набор ячеек, расположенных одна над другой сверху вниз.
   • Граница – это линия, которая окружает каждую ячейку и таблицу в целом.
   В стандартной таблице каждая строка и каждый столбец содержат одинаковое количество ячеек. Однако таблицы могут очень сильно отличаться от предложенной стандартной. В таблице, изображенной на рис. 3.3, одна ячейка объединяет в себе четыре строки, а другая – три столбца.
   Рис. 3.3. Пример нестандартной таблицы
 
   Кстати, при создании таблицы лучше начать с ее планирования, потом будет легче верстать, так как вы наглядно будете видеть вашу таблицу и будет меньше вероятности ошибиться. Для этого вам следует выбрать оптимальный способ создания таблицы.