Создание списков в HTML

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали выравнивание текста в html. В данной статье я хочу рассказать о создании списков в HTML. Создать списки достаточно просто. Сразу скажу, что списки бывают двух видов: нумерованные списки и ненумерованные списки.
Нумерованные списки создаются с помощью тега <ol>,а ненумерованные с помощью тега <ul>. Данные теги являются парными, т.е. у них есть закрывающиеся теги: </ol> и </ul>. Тегом <li> задается элемент списка.Перейдём к примеру, создадим нумерованный список:

<html>
<head>
<meta charset="utf-8"/>
<title>Создание нумерованного списки</title>
</head>
<body>
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>
</body>
</html>

Для задания внешнего вида маркеров нумерованного списка используется атрибут type. Существует несколько видов маркеров:

type="1" — нумерация, которая используется по умолчанию,
type="A" — нумерация обозначается большими латинскими буквами,
type="a" — нумерация обозначается строчными (маленькими) латинскими буквами,
type="I" — нумерация римскими цифрами в верхнем регистре,
type="i" — нумерация римскими цифрами в нижнем регистре.

Иногда возникает необходимость начать нумерацию не с единицы, а с другого числа. Для этого используется атрибут "start"

<ol start="3">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>

Для того, чтобы создать ненумерованный список вместо <ol> нужно написать <ul>:

<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>

Теперь вместо цифр, напротив элементов списка, будут черные кружечки.

Для задания внешнего вида маркеров ненумерованного списка также используется атрибут type. Всего существует три вида маркеров:

type="disk" — маркер в виде закрашенного круга (используется по умолчанию),
type="circle" — маркер в виде незакрашенного круга,
type="square" — маркер в виде закрашенного квадрата.

Стоит отметить, что в элементы списка можно вкладывать что угодно, например ссылки, изображения. Вот вам как раз домашнее задание:

1) Создать нумерованный список, состоящий из трех элементов, элементами которого являются ссылки на сайты Яндекса, Гугла и Рамблера.
2) Создать ненумерованный список, состоящий из трех элементов, элементами которого являются картинки, например, 3 ваших любимых марки автомобилей.

На этом можно было бы и закончить статью, но хотел бы рассказать о том, о чем многие забывают. Это список определений.
Список определений состоит из термина и его определения. Список определений создается с помощью тега <dl>. Термин с помощью тега <dt>, определение с помощью тега <dd>. Все эти теги являются закрывающимся.
Чтобы вам было проще понять сразу приведу наглядный пример:

<dl>
  <dt>Термин 1</dt>
    <dd>Определение 1</dd>
  <dt>Термин 2</dt>
    <dd>Определение 2</dd>
</dl>

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

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

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.