03.11.2012

Урок 4. Создание списков

С помощью тегов языка HTML можно создать три различных вида списков: маркированный, нумерованный и список определений.

Комбинируя эти виды, можно создавать списки разной степени вложенности.

Рассмотрим пример:

Маркированный список

Нумерованный список

Список определений

  • Январь
  • Февраль
  • Март
  • Апрель
  • Май

 1. Понедельник

 2. Вторник

 3. Среда

 4. Четверг

 5. Пятница

Клавиатура
Предназначена для ввода информации
Монитор
Предназначен для вывода информации

 Начнем с маркированного списка:

Создается он с помощью тега <UL>

Общий вид:

<UL>

 <LI>Элемент списка</LI>

 <LI>Элемент списка</LI>

 <LI>Элемент списка</LI>

  ...

</UL>

По умолчанию маркер списка - кружок. Но маркер можно поменять с помощью атрибута type: 

<UL type=circle> - окружность;

<UL type=disc> - круг;

<UL type=square> - квадрат.

 

Урок 4. Создание списков
Урок 4. Создание списков

 Маркированные списки можно вкладывать один в другой, получая при этом многоуровневые списки:

 

вложенные маркированные спискивложенные маркированные списки
вложенные маркированные спискивложенные маркированные списки

 

Следующий это нумерованный список:

Создается он с помощью тега <OL>

Общий вид:

<OL>

 <LI>Элемент списка</LI>

 <LI>Элемент списка</LI>

 <LI>Элемент списка</LI>

  ...

</OL>

По умолчанию списки нумеруются арабскими цифрами. Но вид номера можно поменять с помощью атрибута type: 

<OL type="I"> - римские большие цифры;

<OL type="i"> - римские маленькие цифры;

<OL type="A"> - большие буквы английского алфавита;

<OL type="a"> - маленькие буквы английского алфавита.

 

Урок 4. Создание списков
Урок 4. Создание списков

 Из нумерованных списков тоже можно делать многоуровневые списки.

 

Урок 4. Создание списков
Урок 4. Создание списков

 

Список определений задает тег <DL>, имеющий следующую структуру:

<DL>
   <DT>Термин</DT>
         <DD>Определение</DD>
   <DT>Термин</DT>
         <DD>Определение</DD>
   …
</DL>
 
Пример создания списка определений:
<DL>
 <DT>Процессор</DT>
   <DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде.</DD>
 <DT>Оперативная память</DT>
    <DD>Устройство, в котором хранятся программы и данные.</DD>
</DL>

 

 

Впрочем, списки определений используются, насколько мне известно, достаточно редко.

Кстати, вы, наверное, обратили внимание, что на этом сайте маркер у маркированных списков выглядит как кружок зеленого цвета. Просто с помощью тегов HTML так сделать сложно, а вот с помощью CSS - каскадных таблиц стилей - это совсем просто. Так что читайте и уроки по CSS.