Комментарии
Напоследок рассмотрим одну очень важную возможность HTML, которая, хоть и не касается напрямую Web-дизайна, но сильно поможет забывчивым Web- дизайнерам.
Комментарий - это фрагмент HTML-кода, который не выводится на Web- страницу и вообще не обрабатывается Web-обозревателем. Он служит для того, чтобы Web-дизайнер смог оставить текстовые заметки для себя или своих коллег.
Текст комментария помещают между открывающим тегом <!-- и закрывающим тегом --> и обязательно отделяют от этих тегов пробелами. Как видим, теги комментария не укладываются в основное правило HTML: закрывающий тег должен иметь то же имя, что и открывающий. Открывающий и закрывающий теги комментария - разные!
Пример:
<!-- Я - комментарий. Меня не видно на Web-странице. -->
Мы можем создать в HTML-коде наших Web-страниц комментарии, указывающие, что нам следует доработать. Хотя бы просто для практики:
<!-- Выделить важные фрагменты текста и доделать код примеров. -->
<!-- Создать Web-страницы, посвященные остальным тегам HTML. -->
Что дальше?
В этой главе мы научились разделять текст Web-страницы на логические "куски" - абзацы, создавать заголовки, списки, цитаты, текст фиксированного формата и горизонтальные линии. В общем, структурировать текст для его удобного чтения.
В следующей главе мы научимся выделять фрагменты абзацев и заголовков, чтобы привлечь к ним внимание посетителей. HTML предоставляет для этого много новых тегов, которые мы постараемся запомнить. А еще мы узнаем, как вставить в текст недопустимые символы, в частности, < и >.
ГЛАВА 3. Оформление текста
В предыдущей главе мы научились структурировать текст Web-страницы, разбивая его на логические "куски". Также мы узнали о комментариях HTML, которые позволяют создавать небольшие заметки прямо в коде Web-страницы. И создали две Web-страницы нашего первого Web-сайта. В этой главе мы продолжим работать с текстом. Мы научимся оформлять его, выделяя отдельные фрагменты текста, чтобы привлечь к ним внимание посетителя. А еще мы научимся вставлять в текст недопустимые символы.
Выделение фрагментов текста
Собственно, средства HTML для оформления текста мы начали изучать еще в главе 1. Это парные теги <STRONG> и <EM>, которые выделяют свое содержимое полу- жирным и курсивным шрифтом соответственно.
Однако на самом деле теги <STRONG> и <EM> - это нечто большее, чем просто выделение текста. Они дают фрагменту текста, являющемуся их содержимым, особое значение с точки зрения Web-обозревателя. Они говорят, что данный фрагмент текста является важным, и на него следует обратить внимание посетителя. Тег <STRONG> делает фрагмент текста очень важным, а тег <EM> - менее важным (листинг 3.1).
Листинг 3.1
<P><STRONG>Я - очень важный текст и поэтому набран полужирным шрифтом!</STRONG> Прочитайте меня в первую очередь!</P>
<P><EM>А я - менее важный текст и набран курсивом. </EM> Не забудьте прочитать меня, но можете сделать это потом.</P>
HTML предусматривает для выделения текста довольно много тегов (табл. 3.1), имеющих две особенности:
- все они парные;
- служат для выделения частей текста блочных элементов (абзацев, заголовков, пунктов списков, текста фиксированного форматирования; подробнее о блочных элементах см. в главе 2).
Таблица 3.1. Теги HTML, предназначенные для выделения фрагментов текста
| Тег | Назначение | Отображение Web-обозревателем |
|---|---|---|
| <ABBR> | Аббревиатура | Подчеркнутым |
| <ACRONYM> | Аббревиатура. Фактически то же самое, что и тег <ABBR> | Подчеркнутым |
| <CITE> | Небольшая цитата | Курсивом |
| <CODE> | Фрагмент исходного кода программы | Моноширинным шрифтом |
| <DEL> | Текст, удаленный из Web-страницы | Зачеркнутым |
| <DFN> | Новый термин | Курсивом |
| <EM> | Менее важный текст | Курсивом |
| <INS> | Текст, вновь помещенный на Web-страницу | Подчеркнутым |
| <KBD> | Данные, вводимые пользователем в какую-либо программу | Моноширинным шрифтом |
| <Q> | Небольшая цитата. Фактически то же самое, что и тег <CITE> | Обычным шрифтом |
| <SAMP> | Данные, выводимые какой-либо программой | Моноширинным шрифтом |
| <STRONG> | Очень важный текст | Полужирным шрифтом |
| <TT> | Данные, выводимые какой-либо программой. Фактически то же самое, что и тег <SAMP> | Моноширинным шрифтом |
| <VAR> | Имя переменной в исходном коде программы | Курсивом |
Как уже говорилось ранее, все эти теги служат для выделения фрагментов текста, являющихся частью блочных элементов, скажем, абзацев (листинг 3.2). Элементы Web-страницы, которые они создают, не являются независимыми и не отображаются отдельно от их "соседей", а принадлежат другим элементам - блочным. Такие элементы Web-страницы называются встроенными.
Листинг 3.2
<P>Теги HTML служат для создания элементов Web-страниц.
<STRONG>Соблюдайте порядок вложенности тегов!</STRONG><P>
<P>Тег <CODE>P</CODE> служит для создания <DFN>абзаца</DFN> HTML.</P>
<P>Язык <ABBR>HTML</ABBR> служит для создания <INS>содержимого</INS>
Web-страниц.</P>
<P>Наберите в Web-обозревателе интернет-адрес
<KBD>http://www.w3.org</KBD>.<P>
Из всех рассмотренных нами тегов чаще всего встречаются <STRONG> и <EM>. Остальные теги так и не снискали большой популярности среди Web-дизайнеров.
Для практики давайте откроем Web-страницу index.htm и выделим некоторые фрагменты ее текста с помощью тегов, перечисленных в табл. 3.1 (листинг 3.3).
Листинг 3.3
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках <DFN>HTML</DFN> и <DFN>CSS</DFN>.</P>
. . .
<P><CODE>!DOCTYPE</CODE>, <CODE>BODY</CODE>, <CODE>EM</CODE>,
<CODE>HEAD</CODE>, <CODE>HTML</CODE>, <CODE>META</CODE>, <CODE>P</CODE>,
<CODE>STRONG</CODE>, <CODE>TITLE</CODE></P>
Все эти фрагменты так и просятся: оформите нас надлежащим образом! Мы ведь особенные!
Разрыв строк
Мы совсем забыли поместить на Web-страницы сведения об авторских правах их разработчика, т. е. о нас. Давайте сделаем это. Поместим их в самый низ Web- страниц посредством изученного в главе 2 тега <ADDRESS>:
<ADDRESS>Все права защищены. Читатели, 2010 год.</ADDRESS>
Все хорошо, за одним исключением. Обычно предупреждение о том, что авторские права защищены, и имя или название разработчика разносят на разные строки. Но как нам это сделать?
Можно, конечно, использовать два тега <ADDRESS>: один - для предупреждения, а другой - для имени разработчика. Но тогда строки будут разделены довольно большим расстоянием. (Вспомним - тег <ADDRESS> ведет себя как абзац, т. е. отделяется от соседних абзацев отступом.) А это будет выглядеть некрасиво.
Выход - добавить разрыв строк HTML. Он выполняет безусловный перевод строки, в которой он присутствует, в том месте, где проставлен. Разрыв строки определяется одиночным тегом <BR>:
<P>Этот абзац будет разорван на две строки в этом<BR>месте.</P>
Разрыв строки также относится к встроенным элементам Web-страницы.
Давайте вставим разрыв строки в текст сведения об авторских правах, между точкой в первом предложении и началом второго предложения. Пробел между ними можно убрать - он там совершенно не нужен:
<ADDRESS>Все права защищены.<BR>Читатели, 2010 год.</ADDRESS>
Откроем исправленную Web-страницу в Web-обозревателе и посмотрим на результат (рис. 3.1). Видно, что текст сведений об авторских правах разделен на строки в том самом месте, куда мы вставили тег <BR>.
Рис. 3.1. Абзац с разрывом строк
Разрыв строк следует применять экономно, только в тех случаях, когда нужно разделить один абзац на несколько логически связанных частей. Ранее неопытные Web-дизайнеры с его помощью нередко разбивали текст на абзацы, но сейчас это дурной тон Web-дизайна.