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

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

Листинг 2.5

<UL>

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

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

<UL>

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

<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

<BLOCKQUOTE>

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

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

</BLOCKQUOTE>

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

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

Листинг 2.9

<BLOCKQUOTE>

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

</BLOCKQUOTE>