Войти

Все для создания сайта
Начало » Статьи » XHTML » XHTML.

Списки
В XHTML существует набор элементов, позволяющий представлять информацию в виде списка. Применение списков удобно для следующих видов представления информации:
  1. объединения фрагментов информации для удобочитаемости (структуризация);
  2. описания сложных пошаговых операций (алгоритмы программ, списки дел, распорядок дня для склеротиков);
  3. составления оглавления, списка ссылок в стиле книжного оглавления и пр.
Существует два вида списков: маркированные и нумерованные, которые в свою очередь делятся на типы.

Маркированные списки (Unordered Lists) <ul>

Синтаксис списков, элементы <ul> и <li> Для начала необходимо ознакомиться с общей структурой создания списка. Первым идёт открывающий тег списка <ul>, который указывает на то, что именно с этого места начинается маркированный (неупорядоченный) список. Естественно, что этот тег является парным, и по окончании списка его необходимо закрыть. Внутри этого элемента располaгаются элементы списка, создаваемые элементом <li>. В качестве примера создадим маркированный список месяцев по названию. Код приведён ниже. 
<html> 
 <head> 
 <title> Пример списка</title> 
 </head> 
 <body> 
 <h1> Список месяцев<h1> 

<ul> 
<!-- Начало маркированного списка --> 
	 <li> январь</li> <!-- Элемент списка --> 
	 <li> февраль</li> <!-- Элемент списка -->

	 <li> март</li> <!-- Элемент списка --> 
	 <li> апрель</li> <!-- Элемент списка -->
	 <li> май</li> <!-- Элемент списка --> 
	 <li> июнь</li> <!-- Элемент списка --> 
	 <li> июль</li> <!-- Элемент списка --> 
	 <li> август</li> <!-- Элемент списка -->

	 <li> сентябрь</li> <!-- Элемент списка --> 
	 <li> октябрь</li> <!-- Элемент списка --> 
	 <li> ноябрь</li> <!-- Элемент списка --> 
	 <li> декабрь</li> <!-- Элемент списка --> 
 </ul> <!-- Окончание списка -->

 </body> 
</html>
Комментарии и выделение списка из общего кода помогут Вам разобраться, тем более, что результат интерпретации приведённого выше кода выглядит следующим незатейливым образом:

Список месяцев

  • январь
  • февраль
  • март
  • апрель
  • май
  • июнь
  • июль
  • август
  • сентябрь
  • октябрь
  • ноябрь
  • декабрь
По умолчанию (без указания типа маркеров списка) маркеры отображаются в виде заполненных дисков (тип disk).

Атрибут type элемента <ul>

Атрибут type исключён из спецификации HTML 4.0. В XHTML 1.0 его также нет. Тип списка можно было задавать атрибутом type элемента <ul> с такими возможными значениями:
  • disk — отображение маркеров в виде заполненных дисков;
  • square — отображение маркеров в виде заполненных квадратов;
  • circle — отображение маркеров в виде заполненных кружков.
То есть, запись тегов списка с квадратными маркерами будет следующей: 
<html> 
 <head> 
 <title> Пример списка</title> 
 </head> 
 <body> 
 <h1> Список месяцев<h1> 

<ul type="square"> 
<!-- Начало маркированного списка --> 
	 <li> январь</li> <!-- Элемент списка --> 
	 <li> февраль</li> <!-- Элемент списка -->

	 <li> март</li> <!-- Элемент списка --> 
	 <li> апрель</li> <!-- Элемент списка -->
	 <li> май</li> <!-- Элемент списка --> 
	 <li> июнь</li> <!-- Элемент списка --> 
	 <li> июль</li> <!-- Элемент списка --> 
	 <li> август</li> <!-- Элемент списка -->

	 <li> сентябрь</li> <!-- Элемент списка --> 
	 <li> октябрь</li> <!-- Элемент списка --> 
	 <li> ноябрь</li> <!-- Элемент списка --> 
	 <li> декабрь</li> <!-- Элемент списка --> 
 </ul> <!-- Окончание списка -->

 </body> 
</html>
Соответственно все маркеры элементов списка будут отображатся в виде заполненых квадратов:

Список месяцев

  • январь
  • февраль
  • март
  • апрель
  • май
  • июнь
  • июль
  • август
  • сентябрь
  • октябрь
  • ноябрь
  • декабрь
Кроме всего прочего, для каждого элемента списка <li> можно задать свой тип маркера, например в нашем случае выделить месяцы, в которых 31 день, маркерами типа circle. 
<h1>Список месяцев</h1>

 <ul > <!--Начало маркированного списка.--> 
	 <li type="circle">январь</li>
	 <!--Элемент списка с атрибутом type.--> 
	 
	 <li>февраль</li> <!--Элемент списка.--> 
	 
	 <li type="circle">март</li>
	 <!--Элемент списка с атрибутом type.--> 
	 
	 <li>апрель</li> <!--Элемент списка.--> 
	 
	 <li type="circle">май</li>
	 <!--Элемент списка с атрибутом type.--> 
	 
	 <li>июнь</li> <!--Элемент списка.--> 
	 
	 <li type="circle">июль</li> 
	 <!--Элемент списка с атрибутом type.--> 
	 
	 <li type="circle">август</li>
	 <!--Элемент списка с атрибутом type.--> 
	 
	 <li>сентябрь</li><!--Элемент списка.--> 
	 
	 <li type="circle">октябрь</li> 
	 <!--Элемент списка с атрибутом type.--> 
	 
	 <li>ноябрь</li> <!--Элемент списка.--> 
	 
	 <li type="circle">декабрь</li>
	 <!--Элемент списка с атрибутом type.--> 
	 
 </ul><!--Окончание списка-->
Внешний вид этого списка следующий:

Список месяцев

  • январь
  • февраль
  • март
  • апрель
  • май
  • июнь
  • июль
  • август
  • сентябрь
  • октябрь
  • ноябрь
  • декабрь
Обозреватели по-разному интерпретировали указание типа маркера для отдельного элемента списка <li>. Netscape изменял вид маркера для данного и всех последующих элементов списка, пока не встретится переопределение вида маркера. Internet Explorer изменял маркер только для одного элемента. Теперь это значения не имеет, так как атрибут type считается устаревшим и использоваться не должен. Ему на смену пришли каскадные таблицы стилей, с которыми мы познакомимся в статьях позже.

Нумерованные списки (Ordered Lists) <ol>

Технология создания нумерованых (упорядоченных) списков незначительно отличается от технологии создания маркированых списков. Просто теги элемента <ul> заменяются на теги подобного ему во всём элемента <ol>.(Кстати, u - unordered, o - ordered, order - порядок по-английски). Воспользуемся предыдущим примером для иллюстрации нумерованого списка, только в данном случае пронумеруем месяцы по порядку: 
<html> 
 <head> 
 <title> Пример списка</title> 
 </head> 
 <body> 
 <h1> Список месяцев<h1> 

<ol> 
<!-- Начало нумерованого списка --> 
	 <li> январь</li> <!-- Элемент списка --> 
	 <li> февраль</li> <!-- Элемент списка -->

	 <li> март</li> <!-- Элемент списка --> 
	 <li> апрель</li> <!-- Элемент списка -->
	 <li> май</li> <!-- Элемент списка --> 
	 <li> июнь</li> <!-- Элемент списка --> 
	 <li> июль</li> <!-- Элемент списка --> 
	 <li> август</li> <!-- Элемент списка -->

	 <li> сентябрь</li> <!-- Элемент списка --> 
	 <li> октябрь</li> <!-- Элемент списка --> 
	 <li> ноябрь</li> <!-- Элемент списка --> 
	 <li> декабрь</li> <!-- Элемент списка --> 
 </ol> <!-- Окончание списка -->

 </body> 
</html>
В обозревателе Вы сможете наблюдать следующий результат:

Список месяцев

  1. январь
  2. февраль
  3. март
  4. апрель
  5. май
  6. июнь
  7. июль
  8. август
  9. сентябрь
  10. октябрь
  11. ноябрь
  12. декабрь

Атрибут start элемента <ol>

Атрибут start считается устаревшим. Атрибут start позволяет начать нумерацию списка с произвольного номера. Например: 
<ol start="10"> <!-- Начало нумерованного списка с 10-й позиции. -->

 <li>октябрь</li> <!-- Элемент списка будет пронумерован 10-ю. -->
 <li>ноябрь</li>
 <!-- Элемент списка будет пронумерован 11-ю. -->
 <li>декабрь</li> <!-- Элемент списка будет пронумерован 12-ю. -->

</ol> <!-- Окончание списка -->
  1. октябрь
  2. ноябрь
  3. декабрь
Мы задали нумерацию с номера 10, указав атрибут start равным 10.

Атрибут value элемента <ol>

Атрибут value считается устаревшим. Атрибут value позволяет изменить нумерацию произвольного элемента списка. Например: 
<ol> <!-- Начало нумерованого списка. -->
 <li>январь</li> <!-- Элемент списка будет пронумерован 1-й. -->
 <li>февраль</li> <!-- Элемент списка будет пронумерован 2-й -->

 <li value="11">ноябрь</li>
 <!-- Элемент списка будет пронумерован 11-ю. -->
 <li>декабрь</li> <!-- Элемент списка будет пронумерован 12-ю. -->
</ol> <!-- Окончание списка -->
  1. январь
  2. февраль
  3. ноябрь
  4. декабрь
Мы задали нумерацию 11-ю для ноября, указав атрибут value равным 11.

Атрибут type элемента <ol>

Атрибут typе исключён из спецификации HTML 4.0. В XHTML 1.0 его также нет. Тип списка можно задать при помощи атрибута typе элемента <ol> с такими возможными значениями:
  1. 1 — нумерация арабскими цифрами;
  2. a — нумерация строчными латинскими буквами;
  3. A — нумерация прописными латинскими буквами;
  4. i — нумерация строчными римскими цифрами;
  5. I — нумерация прописными римскими цифрами.
То есть, запись тегов списка с римской нумерацией будет следующей: 
 <h1> Список месяцев<h1>

 <!-- Начало нумерованого списка с атрибутом typе --> 
 
<ol type="I"> 
	 <li> январь</li> <!-- Элемент списка --> 
	 <li> февраль</li> <!-- Элемент списка -->

	 <li> март</li> <!-- Элемент списка --> 
	 <li> апрель</li> <!-- Элемент списка -->
	 <li> май</li> <!-- Элемент списка --> 
	 <li> июнь</li> <!-- Элемент списка --> 
	 <li> июль</li> <!-- Элемент списка --> 
	 <li> август</li> <!-- Элемент списка -->

	 <li> сентябрь</li> <!-- Элемент списка --> 
	 <li> октябрь</li> <!-- Элемент списка --> 
	 <li> ноябрь</li> <!-- Элемент списка --> 
	 <li> декабрь</li> <!-- Элемент списка --> 
 </ol> <!-- Окончание списка -->
Вот как выглядит нумерация римскими цифрами:

Список месяцев

  1. январь
  2. февраль
  3. март
  4. апрель
  5. май
  6. июнь
  7. июль
  8. август
  9. сентябрь
  10. октябрь
  11. ноябрь
  12. декабрь
Вот как будет выглядеть нумерованный список с различными вариантами атрибута typе:
type="A" type="a" type="I" type="i" type="1"
  1. Январь
  2. Февраль
  3. Март
  4. Апрель
  5. Май
  6. Июнь
  7. Июль
  8. Август
  9. Сентябрь
  10. Октябрь
  11. Ноябрь
  12. Декабрь
  1. Январь
  2. Февраль
  3. Март
  4. Апрель
  5. Май
  6. Июнь
  7. Июль
  8. Август
  9. Сентябрь
  10. Октябрь
  11. Ноябрь
  12. Декабрь
  1. Январь
  2. Февраль
  3. Март
  4. Апрель
  5. Май
  6. Июнь
  7. Июль
  8. Август
  9. Сентябрь
  10. Октябрь
  11. Ноябрь
  12. Декабрь
  1. Январь
  2. Февраль
  3. Март
  4. Апрель
  5. Май
  6. Июнь
  7. Июль
  8. Август
  9. Сентябрь
  10. Октябрь
  11. Ноябрь
  12. Декабрь
  1. Январь
  2. Февраль
  3. Март
  4. Апрель
  5. Май
  6. Июнь
  7. Июль
  8. Август
  9. Сентябрь
  10. Октябрь
  11. Ноябрь
  12. Декабрь
Как и в случае с маркированым списком, у нумерованого списка существует возможнось изменить тип цифры для любого отдельного элемента <li> атрибутом typе. Например, если мы хотим указать только для одного элемента списка римскую нумерацию, то это будет выглядеть следующим образом: 

<li type="I">апрель</li> <!-- Апрель будет пронумерован римской IV.
 Остальные месяцы будут нумероваться римскими цифрами. -->
Обозреватели по-разному интерпретировали указание типа нумерации для отдельного элемента списка <\li>. Netscape изменял нумерацию для данного и всех последующих элементов списка, пока не встречал переопределение. Internet Explorer изменял нумерацию только одного элемента. Теперь это значения не имеет, так как атрибут typе считается устаревшим и использоваться не должен. Ему на смену пришли каскадные таблицы стилей.

Вложенные списки.

Вложение списков позволяет структурировать документ и упростить его восприятие. Элементы <ul>, <ol> и <li> являются обычными блочными элементами и могут свободно включаться друг в друга. Давайте сгруппируем месяцы по временам года. Для этого создадим маркированный список <ul>, и в каждый из его элементов <li> вложим элементы <ol>. 
<ul><!--Начинаем маркированый список.> 
 <li>Зимние месяцы:
 <!--Это первый элемент маркированого списка.--> 
 
 <ol><!--Вложим в него нумерованый список.--> 
 <li value="12">декабрь,</li>
 <!--Это элемент вложенного нумерованого списка.--> 
 
 <li value="1">январь,</li>
 <!--Это элемент вложенного нумерованого списка.--> 
 
 <li value="2">февраль;</li>
 <!--Это элемент вложенного нумерованого списка.--> 
 
 </ol>
 <!--Завершим вложенный нумерованый список.--> 
 
 </li>
 <!--Завершим элемент внешнего маркированого списка.-->
 
 <li>весенние месяцы:
 <!--Начнём следующий элемент внешнего маркированого списка…--> 
 
 <ol start="3">

 <li>март,</li> 
 <li>апрель,</li> 
 <li>май;</li>
 </ol>
 </li>

 <li>летние месяцы:
 <ol start="6">
 <li>июнь,</li> 
 <li>июль,</li> 
 <li>август;</li>

 </ol>
 </li>
 <li>осенние месяцы:
 <ol start="9">
 <li>сентябрь,</li> 
 <li>октябрь,</li> 
 <li>ноябрь.</li>

 </ol>
 </li>
</ul>
Принцип крайне прост. Если есть пункт списка, к которому мы хотим добавить подпункты, то мы должны вставить список подпунктов между открывающим и закрывающим тегами пункта основного списка. Обозреватель представит приведённый код так:
  • Зимние месяцы:
    1. декабрь,
    2. январь,
    3. февраль;
  • весенние месяцы:
    1. март,
    2. апрель,
    3. май;
  • летние месяцы:
    1. июнь,
    2. июль,
    3. август;
  • осенние месяцы:
    1. сентябрь,
    2. октябрь,
    3. ноябрь.

Списки определений (Definition Lists) <dl>

Списки определений, также называемые словарями определений специальных терминов, являются особенным видом списка. В отличие от других типов списков, каждый элемент списка определений всегда состоит из двух частей. В первой — линейной — части элемента списка записывается термин, который Вы хотите растолковать, а во второй части — блочной — текст в форме словарной статьи, растолковывающий термин. Списки определений создаются элементом <dl> (Definition List). Внутри него элементом <dt> (Definition Term) помечается определяемый термин, а тегами элемента <dd> (Definition Description) — его определение. В общем, синтаксис списка определений выглядит следующим образом: 
<dl><!--Начало списка определений.--> 
 <dt>Термин</dt><!--Определяемый термин.--> 
 <dd><!--Толкование этого термина.--> 
 Толкование термина
 </dd>

 <dt>Термин</dt><!--Следующий термин.--> 
 <dd><!--Толкование этого термина.--> 
 Толкование термина
 </dd>
</dl>
Рассмотрим это на примере: 

<dl><!--Начинается список определений.--> 
 <dt>Поддержка программных продуктов</dt>
 <!--Определяемое понятие.--> 
 <dd><!--Разъяснение этого понятия.--> 
 При возникновении вопроса, относящегося к работе 
 с Microsoft&reg; Windows 98, в первую очередь следует
 заглянуть в документацию, обратиться к справочной 
системе или заглянуть в текстовые файлы с последними
сведениями «ReadMe». Если ответ на вопрос найти 
так и не удалось, Microsoft предлагает широкий спектр 
технической поддержки, начиная со средств самостоятельного 
поиска ответов и заканчивая консультацией инженера
из службы технической поддержки Microsoft. 
 </dd><!--Разъяснение закончилось.--> 

 <dt>Интерактивная техническая поддержка Microsoft</dt>
 <!--Определяемое понятие.--> 
 <dd><!--Разъяснение этого понятия.--> 
 Этот Web-узел разработан на основе последних технических достижений 
Microsoft. Он обеспечивает самостоятельное получение сведений по 
интересующему вопросу. Мастера разрешения вопросов (Troubleshooting
 wizards) позволяют легко выполнять диагностику и отвечают
 на технические вопросы. Статьи, советы по программированию
 и ответы на технические вопросы можно найти в базе 
 данных Microsoft Knowledge Base, содержащей более 75 000 статей. 
 Посетите узел <a href="http://www.microsoft.com/support/">
http://www.microsoft.com/support</a>
и откройте для себя, насколько просто найти нужный ответ.
 </dd><!--Разъяснение закончилось.--> 

 <dt>Обращение в службу поддержки Microsoft</dt>
 <!--Определяемое понятие.--> 
 <dd><!--Разъяснение этого понятия.--> 
 Собираясь позвонить в службу поддержки Microsoft, Вы должны находиться 
за компьютером и иметь под рукой документацию к соответствующему
продукту. Будьте готовы предоставить следующие сведения:
 <ul><!--Начался вложенный маркированный список.--> 
 <li>номер используемой версии программного продукта;</li>
 <!--Элемент вложенного списка.--> 
 <li>тип аппаратуры, с которой Вы работаете, включая сетевую аппаратуру, 
если таковая используется;</li> 
<!--Элемент вложенного списка.--> 
 <li>тип используемой операционной системы;</li>
 <!--Элемент вложенного списка.--> 
 <li>точный текст сообщения, которое появилось на экране;</li>
 <!--Элемент вложенного списка.--> 
 <li>описание того, что случилось, и что Вы делали во время 
 возникновения неполадки;</li>
 <!--Элемент вложенного списка.--> 
 <li>описание того, как Вы пытались устранить ее.</li>
 <!--Элемент вложенного списка.--> 
 </ul><!--Закончился вложенный список.--> 
</dd><!--Разъяснение закончилось.--> 
</dl><!--Закончился список определений.-->
Вот как покажет этот список обозреватель.
Поддержка программных продуктов
При возникновении вопроса, относящегося к работе с Microsoft® Windows 98, в первую очередь следует заглянуть в документацию, обратиться к справочной системе или заглянуть в текстовые файлы с последними сведениями «ReadMe». Если ответ на вопрос найти так и не удалось, Microsoft предлагает широкий спектр технической поддержки, начиная со средств самостоятельного поиска ответов и заканчивая консультацией инженера из службы технической поддержки Microsoft.
Интерактивная техническая поддержка Microsoft
Этот Web-узел разработан на основе последних технических достижений Microsoft. Он обеспечивает самостоятельное получение сведений по интересующему вопросу. Мастера разрешения вопросов (Troubleshooting wizards) позволяют легко выполнять диагностику и отвечают на технические вопросы. Статьи, советы по программированию и ответы на технические вопросы можно найти в базе данных Microsoft Knowledge Base, содержащей более 75 000 статей. Посетите узел http://www.microsoft.com/support и откройте для себя, насколько просто найти нужный ответ.
Обращение в службу поддержки Microsoft
Собираясь позвонить в службу поддержки Microsoft, Вы должны находиться за компьютером и иметь под рукой документацию к соответствующему продукту. Будьте готовы предоставить следующие сведения:
  • номер используемой версии программного продукта;
  • тип аппаратуры, с которой Вы работаете, включая сетевую аппаратуру, если таковая используется;
  • тип используемой операционной системы;
  • точный текст сообщения, которое появилось на экране;
  • описание того, что случилось, и что Вы делали во время возникновения неполадки;
  • описание того, как Вы пытались устранить ее.
Категория: XHTML. | Добавил: design (10.11.06) | Автор: evra
Просмотров: 1451 | Рейтинг: 5.0 |
Комментарии
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Все права защищены © 2007Создать сайт бесплатно