Списки / HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Библиотека (книги, учебники и журналы) / В помощь Веб-Мастеру

Обложка
Аннотация

Книги автора: Macromedia Flash Professional 8. Графика и анимация HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Списки

Списки используются для того, чтобы представить читателю перечень каких-либо позиций, пронумерованных или непронумерованных, — пунктов списка. Список с пронумерованными пунктами так и называется — нумерованным, а с непронумерованными — маркированным. В маркированных списках пункты помечаются особым значком — маркером, который ставится левее пункта списка.

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

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

Любой список в HTML создается в два этапа. Сначала пишут строки, которые станут пунктами списка, и каждую из этих строк помещают внутрь парного тега <LI>. Затем все эти пункты помещают внутрь парного тега <UL> (если создается маркированный список) или <OL> (при создании нумерованного списка) — эти теги определяют сам список (листинг 2.4).

Листинг 2.4

<UL>

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

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

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

</UL>

<OL>

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

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

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

</OL>

Списки можно помещать друг в друга, создавая вложенные списки. Делается это

следующим образом. Сначала во "внешнем" списке (в который должен быть помещен вложенный) отыскивают пункт, после которого должен находиться вложенный список. Затем HTML-код, создающий вложенный список, помещают в разрыв между текстом этого пункта и его закрывающим тегом </LI>. Если же вложенный список должен помещаться в начале "внешнего" списка, его следует вставить между открывающим тегом <LI> первого пункта "внешнего" списка и его текстом. Что, впрочем, логично.

В листинге 2.5 представлен HTML-код, создающий два списка, один из которых вложен внутрь другого. Обратите внимание, где размещается HTML-код, создающий вложенный список.

Листинг 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-страничка стала выглядеть симпатичнее.

Оглавление книги

Оглавление статьи/книги

Похожие страницы