Уроки HTML. Списки

Информация о материале
Категория: Уроки HTML
Просмотров: 2173
share with Whatsapp
share with Telegram

В любом месте тела веб-страницы (то есть между тегами <BODY> и </BODY>) можно создать различные списки.

Глоссарий:
OL: Ordered List, Нумерованный список
UL: Unordered List, Маркированный список
LI: List Item, Элемент списка
DL: Definition List, Список определений
DT: Definition Term, Термин
DD: Definition Data (?), Определение

Для создания нумерованного списка нужно создать:
[1]. Текст заголовка списка.
2. <OL
[3]. TYPE=x
где x, определяет тип нумерации, принимает одно из следующих значений:

  • A (заглавная латинская буква A) для присвоения заглавных букв элементам списка,
  • a (строчная латинская буква a) для присвоения строчных букв элементам списка,
  • I (заглавная латинская буква I) для нумерации элементов списка большими римскими цифрами,
  • i (строчная латинская буква i) для нумерации элементов списка римскими цифрами,
  • 1 для цифр. 1 является значением по-умолчанию (default), то есть если пропустить пункт 3, то элементам списка будут присвоены цифры 1, 2, ...

[4]. START=n
где n с какого числа должна начаться нумерация.
5. >
6. <LI>
7. Текст элемента списка.
8. </LI>
9. Повторить пункты 6-8 для каждого элемента списка.
10. </OL>.

Для создания маркированного списка нужно создать:
[1]. Текст заголовка списка.
2. <OL
[3]. TYPE=x
где x, определяет тип метки перед элементом списка, принимает одно из следующих значений: disc, circle, square.
4. >
5. <LI>
6. Текст элемента списка.
7. </LI>
8. Повторить пункты 5-7 для каждого элемента списка.
9. </OL>.

Для создания списка определений (глоссария) нужно набрать:
[1]. Текст заголовка.
2. <DL>
3. <DT>
4. Термин.
5. </DT>
6. <DD>
7. Определение.
8. </DD>
9. Повторить пункты 3-8 для каждого термина/понятия.
10. </DL>

Пример:

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
 <TITLE>Моя страница: Списки</TITLE> 
</HEAD> 
<BODY> 
 <H1>Список присутствующих:</H1> 
 <OL> 
 <LI>Вализода Р.</LI> 
 <LI>Назаров Д.</LI> 
 <LI>Шафкатов Ю.</LI> 
 </OL> 
 <H1>Список отсутствующих:</H1> 
 <OL TYPE="I"> 
 <LI>Солиев А.</LI> 
 <LI>Юлдошев И.</LI> 
 <LI>Кадаров Д.</LI> 
 <LI>Кадаров В.</LI> 
 </OL> 
 <H1>Продолжение списка присутствующих:</H1> 
 <OL START="4"> 
 <LI>Каримов П.</LI> 
 <LI>Тухташев О.</LI> 
 <LI>Ёкубов Н.</LI> 
 </OL> 
 <H1>Список предметов:</H1> 
 <UL TYPE="disc"> 
 <LI>Пение</LI> 
 <LI>Физкультура</LI> 
 <LI>Труд</LI> 
 </UL> 
</BODY> 
</HTML>

Пример вложенных списков:

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
 <TITLE>Моя страница: Вложенные списки</TITLE> 
</HEAD> 
<BODY> 
 <H1>В нашем магазине:</H1> 
 <OL> 
 <LI>Овощи 
 <OL TYPE="I"> 
 <LI>Морковь</LI> 
 <LI>Лук</LI> 
 <LI>Капуста</LI> 
 </OL> 
 </LI> 
 <LI>Фрукты 
 <UL TYPE="square"> 
 <LI>Слива</LI> 
 <LI>Персик</LI> 
 <LI>Яблоко</LI> 
 </UL> 
 </LI> 
 <LI>Зелень</LI> 
 </OL> 
</BODY> 
</HTML>

{jcomments on}