Листинг 2.11
<PRE>Я — текст, который будет выведен на Web-страницу
со всеми
отступами и
переносами строк.</PRE>
Такой текст называется текстом фиксированного формата.
Правила отображения текста фиксированного формата:
— для вывода используется моноширинный шрифт (у моноширинного шрифта все символы имеют одинаковую ширину, в отличие от пропорциональных, у которых ширина символов различна);
— все пробелы и переносы строк сохраняются при выводе (это мы уже знаем);
— если строка текста фиксированного формата не помещается в окне Web- обозревателя по ширине, она ни в коем случае не будет переноситься. Из-за этого может возникнуть потребность в горизонтальной прокрутке Web-страницы. (что, вообще-то, плохой стиль Web-дизайна…);
— возможно наличие HTML-тегов для выделения текста и гиперссылок (подробнее о них будет рассказано в главах 3 и 5).
Текст фиксированного формата также является блочным элементом.
Исправим HTML-код Web-страницы t_title.htm так, чтобы пример выводился в виде текста фиксированного формата (листинг 2.12).
Листинг 2.12
<!DOCTYPE html>
<HTML>
.
<H6>Пример:</H6>
<PRE>!HEAD!
!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!</PRE>
</BODY>
</HTML>
Откроем исправленную Web-страницу в Web-обозревателе и убедимся, что он выводится правильно (рис. 2.2).
Как правило, текст фиксированного формата используется для вывода исходных текстов программ и быстрой публикации в Сети документов, набранных обычным текстом. В качестве примера можно вспомнить библиотеку Мошкова (http://www.lib.ru), в которой все книги опубликованы как раз в виде текста фиксированного формата.
Горизонтальные линии
Что бы нам еще такое сделать с Web-страницами… Давайте дополнительно выделим на главной Web-странице index.htm цитату из Википедии, описывающую HTML. Только как?
Для любителей все выделять HTML припас подарок — горизонтальную линию, создаваемую с помощью одинарного тега <HR>:
<P>Я буду отделен от следующего абзаца горизонтальной линией.</P>
<HR>
<P>Я отделен от предыдущего абзаца горизонтальной линией.</P>
Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web- страницы, имеет один-два пиксела в толщину и выпуклый или вдавленный вид (конкретные параметры зависят от Web-обозревателя). Она применяется для отделения одной части содержимого Web-страницы от другой и просто "для красоты". Однако нужно помнить, что слишком большое число горизонтальных линий — дурной тон Web-дизайна.
Больше о горизонтальных линиях рассказывать нечего. Так что внесем в HTML-код страницы index.htm необходимые исправления (листинг 2.13).
Листинг 2.13
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!
Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. А именно, о языках HTML и CSS.</P>
<HR>
<P>Русская Википедия определяет термин HTML так:</P>
.
<P>Пожалуй, ни убавить ни прибавить…</P>
<HR>
<P>HTML позволяет формировать на Web-страницах следующие элементы:</P>
Результат показан на рис. 2.3. Симпатично вышло, не так ли?
Рис. 2.3. Web-страница index.htm с горизонтальными линиями
Адреса
Часто на Web-страницах указывают контактные данные их создателей (почтовые и электронные адреса, телефоны, факсы и пр.). Для этого HTML предусматривает особый тег <ADDRESS>. Он ведет себя так же, как тег абзаца <P>, но его содержимое выводится курсивом:
<ADDRESS>Я — адрес создателя данной Web-страницы: почтовый, электронный, телефоны и факсы.</ADDRESS>
Комментарии
Напоследок рассмотрим одну очень важную возможность 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, предназначенные для выделения фрагментов текста
Как уже говорилось ранее, все эти теги служат для выделения фрагментов текста, являющихся частью блочных элементов, скажем, абзацев (листинг 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>. Остальные теги так и
