Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Читать онлайн «HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов». Страница 8

Автор Владимир Дронов

<LI>Я— второй пункт вложенного списка.</LI>

<LI>Я— третий пункт вложенного списка.</LI>

</UL>

</LI>

<LI>Я — третий пункт внешнего списка.</LI>

</UL>

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

Еще HTML позволяет создать так называемый список определений, представляющий собой перечень терминов и их разъяснений. Такой список создают с помощью парного тега <DL>. Внутри него помещают пары "термин — разъяснение", причем термины заключают в парный тег <DT>, а разъяснения — в парный тег <DD> (листинг 2.6).

Листинг 2.6

<DL>

<DT>Содержимое</DT>

<DD>Информация, отображаемая на Web-странице</DD>

<DT>Представление</DT>

<DD>Набор правил, определяющих формат отображения содержимого</DD>

<DT>Поведение</DT>

<DD>Набор правил, определяющих реакцию Web-страницы или ее элементов на действия посетителя</DD>

</DL>

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

На нашей Web-странице есть несколько абзацев, перечисляющих основные возможности HTML. Превратим их в маркированный список (листинг 2.7).

Листинг 2.7

<UL>

<LI>абзацы;</LI>

<LI>заголовки;</LI>

<LI>цитаты;</LI>

<LI>списки;</LI>

<LI>таблицы;</LI>

<LI>графические изображения;</LI>

<LI>аудио- и видеоролики.</LI>

</UL>

Теперь наша Web-страничка стала выглядеть симпатичнее.

Цитаты

В тексте Web-страницы, которую мы создаем, присутствует большая цитата из Русской Википедии. Давайте ее как-то выделим.

HTML уже приготовил для нас выход из положения — парный тег <BLOCKQUOTE>, внутри которого размещается HTML-код, создающий цитату (листинг 2.8). Web- обозреватель выводит цитату с отступом слева.

Листинг 2.8

<P>Я — начало большой цитаты.</P>

<P>Я — продолжение большой цитаты.</P>

</BLOCKQUOTE>

Как видим, в тег <BLOCKQUOTE> можно поместить несколько абзацев. Там также могут быть заголовки и списки (если уж возникнет такая потребность). Большая цитата HTML также относится к блочным элементам.

Осталось только сделать то, что было задумано, — оформить цитату (листинг 2.9).

Листинг 2.9

<P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.</P>

</BLOCKQUOTE>

Текст фиксированного формата

Аппетит приходит во время еды. Мы еще не успели доделать свою первую Web- страницу, а уже хотим сделать еще одну. Давайте же ее сделаем. Дадим аппетиту разгуляться!

Новая Web-страница (листинг 2.10) будет посвящена тегу <TITLE>.

Листинг 2.10

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE>Тег TITLE</TITLE>

</HEAD>

<BODY>

<H1>Тег TITLE</H1>

<P>Тег TITLE служит для указания названия Web-страницы. Он ставится в ее секции заголовка.</P>

<H6>Пример:</H6>

<P>!HEAD!!TITLE!Я — заголовок Web-страницы!/TITLE!

!HEAD!</P>

</BODY>

</HTML>

Здесь мы поместили краткое описание тега <TITLE> и код примера, имеющий такой вид:

!HEAD!

!TITLE!Я — заголовок Web-страницы!/TITLE!

!/HEAD!

Вместо символов < и >, которые, как мы помним из главы 1, недопустимы в обычном тексте, мы поставили восклицательные знаки. В главе 3 мы узнаем, как все- таки вставить в текст недопустимые символы, и заменим их.

Сохраним набранный код в файле с именем t_title.htm и откроем его в Web-обозревателе. И что мы там увидим?

Рис. 2.1. Web-страница t_title.htm в Web-обозревателе. Обратим внимание на код примера

Как видно на рис. 2.1, Web-обозреватель вывел код примера в одну строку и без всяких отступов. Но ведь мы разбили его на три строки и создали отступы с помощью пробелов, чтобы HTML-код лучше читался и сразу была видна вложенность тегов! Что случилось?

Вспомним два правила, которыми руководствуется Web-обозреватель при выводе текста блочного элемента и которые были перечислены в разделе, посвященном абзацам. Эти правила гласят, что два или более следующих друг за другом пробела или переноса строки преобразуются в один пробел и перенос строки считается за пробел. Так Web-обозреватель и поступил: преобразовал переносы строки в пробелы, а последовательные пробелы — в один пробел. И вывел код примера в виде обычного абзаца, который у него поместился в одну строку.

Web-обозреватель все сделал правильно! Просто мы не указали ему, как следует выводить данный текст.

Специально для случаев, когда текст должен быть выведен именно так, как набран, с сохранением всех пробелов и переносов строк, язык HTML предусматривает парный тег <PRE>. Выводимый текст помещают внутри этого тега (листинг 2.11).

Листинг 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 с горизонтальными линиями