Урок №3: создание списков в HTML

Для привлекательного и правильного оформления списков лучше использовать теги. Некоторые новички создают списки, используя клавиши "пробел", "enter" и различные символы в качестве маркеров. Это серьезная ошибка, так как в некоторых браузерах, списки созданные таким образом, отображаются совсем не так, как задумано.

Существует три вида списков. В первом, перечисляемые пункты помечаются цифрами или буквами. Во втором случае, пункты помечаются маркерами. Третий вид предназначен для определений.

---

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

• <ol> - парный тег, который задает начало нумерованного списка. Имеет параметр - type, который указывает, как будут нумероваться пункты данного списка, параметр имеет следующие значения:

• i - маленькие римские цифры
• I - большие римские цифры
• а - маленькие английские буквы
• А - большие английские буквы

Если параметр type не указывать, тогда по умолчанию будут использованы стандартные арабские цифры.

• <li> - парный тег, в который нужно обязательно брать каждый пункт из списка.

Для примера напишем код двух списков:

<ol>      <li>первый пункт</li>      <li>второй пункт</li>      <li>третий пункт</li> </ol> <ol type="I">      <li>первый пункт</li>      <li>второй пункт</li>      <li>третий пункт</li> </ol>

В браузере он примет такой вид:

первый пункт второй пункт третий пункт первый пункт второй пункт третий пункт

Если использовать type="A", то нумерация пойдет латинскими буквами - A B C и т.д.

---

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

• <ul> - парный тег, который задает начало маркированного списка. Также каждый пункт необходимо брать в парный тег <li> и также имеет параметр - type, который указывает какими маркерами будут обозначены пункты данного списка, имеет следующие значения:

• square - левее расположен соответственный маркер

• disc - левее расположен соответственный маркер

• square - левее расположен соответственный маркер

Иногда возникает необходимость создавать список в списке. Давайте попробуем создать один из таких.

<ul>      <li>Первый пункт основного списка</li>           <ul type="circle">                <li>первый пункт</li>                <li>второй пункт</li>                <li>третий пункт</li>           </ul>      <li>Второй пункт основного списка</li>           <ul type="square">                <li>первый пункт</li>                <li>второй пункт</li>                <li>третий пункт</li>           </ul>      <li>Третий пункт основного списка</li> </ul>

Вид в браузере получится такой:

Первый пункт основного списка первый пункт второй пункт третий пункт Второй пункт основного списка первый пункт второй пункт третий пункт Третий пункт основного списка

---

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

Такие списки используют абсолютно другие теги. Конечно, такие списки редко используются, однако лучше с ними ознакомимся

• <dl> - парный тег, который задает начало списка определений
• <dt> - в этот парный тег берется термин, которому будет дано определение
• <dd> - в данном парном теге пишется определение

Пример списка определений:

<dl>      <dt>Сайт</dt>           <dd> Совокупность нескольких веб-страниц, которые связаны между собой различными ссылками и объединены одним адресом, а также имеют общий дизайн - называется сайтом. Сайты бывают разные, в основном их делят на коммерческие(для рекламы и прибыли) и некоммерческие.           </dd>      <dt>Тег</dt>            <dd> Тег — это элемент языка разметки гипертекста, который применяется для вставки и редактирования различных элементов веб-страницы.           </dd> </dl>

Вид кода в браузере:

Сайт Совокупность нескольких веб-страниц, которые связаны между собой различными ссылками и объединены одним адресом, а также имеют общий дизайн - называется сайтом. Сайты бывают разные, в основном их делят на коммерческие(для рекламы и прибыли) и некоммерческие. Тег Тег — это элемент языка разметки гипертекста, который применяется для вставки и редактирования различных элементов веб-страницы.

В результате видно, что термин находится с левой стороны браузера, а его определение расположено немного правее.

Кстати возможности оформления списков значительно расширяются, если использовать при работе с ними CSS: Списки в CSS