HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - [12]
Списки можно помещать друг в друга, создавая вложенные списки. Делается это
следующим образом. Сначала во "внешнем" списке (в который должен быть помещен вложенный) отыскивают пункт, после которого должен находиться вложенный список. Затем HTML-код, создающий вложенный список, помещают в разрыв между текстом этого пункта и его закрывающим тегом . Если же вложенный список должен помещаться в начале "внешнего" списка, его следует вставить между открывающим тегом
В листинге 2.5 представлен HTML-код, создающий два списка, один из которых вложен внутрь другого. Обратите внимание, где размещается HTML-код, создающий вложенный список.
Листинг 2.5
- Я — первый пункт внешнего списка.
- Я — второй пункт внешнего списка.
- Я— первый пункт вложенного списка.
- Я— второй пункт вложенного списка.
- Я— третий пункт вложенного списка.
- Я — третий пункт внешнего списка.
HTML позволяет вкладывать нумерованный список внутрь маркированного и наоборот. Глубина вложения списков не ограничена.
Еще HTML позволяет создать так называемый список определений, представляющий собой перечень терминов и их разъяснений. Такой список создают с помощью парного тега
- . Внутри него помещают пары "термин — разъяснение", причем термины заключают в парный тег
- , а разъяснения — в парный тег
- (листинг 2.6).
Листинг 2.6
- Содержимое
- Информация, отображаемая на Web-странице
- Представление
- Набор правил, определяющих формат отображения содержимого
- Поведение
- Набор правил, определяющих реакцию Web-страницы или ее элементов на действия посетителя
Осталось сказать, что списки и их пункты относятся к блочным элементам Web-страницы, и при их выводе на экран Web-обозреватель руководствуется теми же правилами, что и при выводе абзацев и заголовков.
На нашей Web-странице есть несколько абзацев, перечисляющих основные возможности HTML. Превратим их в маркированный список (листинг 2.7).
Листинг 2.7
- абзацы;
- заголовки;
- цитаты;
- списки;
- таблицы;
- графические изображения;
- аудио- и видеоролики.
Теперь наша Web-страничка стала выглядеть симпатичнее.
Цитаты
В тексте Web-страницы, которую мы создаем, присутствует большая цитата из Русской Википедии. Давайте ее как-то выделим.
HTML уже приготовил для нас выход из положения — парный тег
, внутри которого размещается HTML-код, создающий цитату (листинг 2.8). Web- обозреватель выводит цитату с отступом слева.Листинг 2.8
Я — начало большой цитаты.
Я — продолжение большой цитаты.
Как видим, в тег
можно поместить несколько абзацев. Там также могут быть заголовки и списки (если уж возникнет такая потребность). Большая цитата HTML также относится к блочным элементам.Осталось только сделать то, что было задумано, — оформить цитату (листинг 2.9).
Листинг 2.9
HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине.
Текст фиксированного формата
Аппетит приходит во время еды. Мы еще не успели доделать свою первую Web- страницу, а уже хотим сделать еще одну. Давайте же ее сделаем. Дадим аппетиту разгуляться!
Новая Web-страница (листинг 2.10) будет посвящена тегу
Тег TITLE
Тег TITLE служит для указания названия Web-страницы. Он ставится в ее секции заголовка.
Пример:
!HEAD!!TITLE!Я — заголовок Web-страницы!/TITLE!
!HEAD!