Текст в HTML - часть 3 (Создание списков)

Александр 'S'
]]>
]]> spisok-html

Доброго времени суток, уважаемые читатели Ne-zhalko.ru!

Последняя часть урока по работе с текстами в html будет посвящена html-спискам и некоторым дополнениям по другим вопросам, касающимся текстовых тегов.

Итак, html-список, что же это такое и как оно работает? На этот вопрос ответить легко, и перейдем мы сразу к делу!

Списки (в html и не только) - это перечень структурированных по какому-либо признаку данных, расположенных в соответствии с определенным порядком или беспорядочно.

Списки в html бывают двух типов:

  • Упорядоченный - элементы списка отсортированы по алфавиту или числовому счету.
  • Неупорядоченный (маркированный) - не отсортированные элементы списка располагаются в произвольном порядке.

Кстати, типы списков у нас показаны в виде неупорядоченного списка

Рассмотрим оба варианта подробнее.

Неупорядоченный список <ul>Unsorted List</ul>

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

Принцип работы html-списка построен на наличии пунктов (элементов) списка, что естественно, ведь список нам и нужен только для расположения каких-то элементов подряд, теги элемента списка также парные <li>Элемент списка</li>. Выглядит это следующим образом:

  • Открываем тег неупорядоченного списка <ul>;
  • Открываем тег элемента списка <li>
  • Вписываем сам элемент списка, например, "Первый элемент списка";
  • Закрываем тег элемента списка </li>
  • Если нужны еще элементы, вписываем и их также <li>Второй элемент списка</li>
  • Если элементы списка закончены, закрываем сам неупорядоченный список </ul>

Чистый код выглядит так:

<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Последний элемент списка</li>
</ul>

Попробуйте скопировать и вставить данный код в самый низ Вашей html-странички "index.html", сохраните изменения и проверьте, что получилось. У меня получилось так:

example-ul-html

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

Неупорядоченные списки имеют атрибут, определяющий внешний вид маркера элемента (пунктов) списка:

Атрибут TYPE="" (вид маркера) - может принимать значения:

type="disc" - создает маркер в виде заполненного черного диска;

type="circle" - создает маркер в виде окружности черного цвета;

type="square" - маркер в виде заполненного квадрата черного цвета.

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

  • Первый элемент помеченный стандартным маркером
  • Второй элемент с квадратным маркером
  • Третий элемент с маркером-окружностью

<ul>
<li>Первый элемент помеченный стандартным маркером</li>
<li type="square">Второй элемент с квадратным маркером</li>
<li type="circle">Третий элемент с маркером-окружностью</li>
</ul>

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

Упорядоченный список <ol>Ordered List</ol>

Этот вид списков уже более сложный, но и более интересный. Сложный тем, что к тегам списка добавляются атибуты типа списка и стартовой точки нумерации. В остальном данный список ничем не отличается по конструкции от неупорядоченного списка.

Давайте посмотрим на упорядоченный список в схематичном виде:

  1. Открываем тег упорядоченного списка <ol>;
  2. Открываем тег элемента упорядоченного списка <li>;
  3. Вписываем элемент "Первый элемент списка";
  4. Закрываем тег элемента списка </li>;
  5. Добавляем еще элементов списка <li></li>;
  6. Закрываем тег упорядоченного списка </ol>

Теперь, собственно, о том, почему данный вид списка получил название "Упорядоченный". А получил он его за то, что элементы этого списка (то, что между тегами <li></li&gt всегда помечены возрастающим счетом (алфавитным перечислением), создающим видимость порядка, например, по умолчанию, пункты упорядоченного списка отмечены обычными арабскими цифрами, начиная с "1". Почему только видимость? Потому что логически порядок там может не иметь смысла, например, перечисление позиций прайса. Позиции нумеруются исключительно для удобства подсчета их общего конечного количества, а какая позиция идет за предыдущей - большой разницы нет. В то же время, описание порядка какого-либо действия должно содержать последовательность шагов, типа 1-е, 2-е, 3-е, что уже логично.

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

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

1) <ol TYPE=""> - атрибут, задающий стиль нумерации элементов (пунктов) списка. Может иметь следующие значения:

"1" - нумерация арабскими числами начиная с 1 (работает по умолчанию, без прописывания атрибута TYPE);

"a" - упорядочение с помощью прописных букв латинского алфавита;

"A" - то же, что выше, но с заглавными буквами;

"i" - упорядочение маленькими римскими цифрами, пример есть в предыдущей части урока, в части атрибутов тега <font>. Так как у нас нет римских клавиатур, то за римские цифры сойдут идентичные буквы латиницы;

"I" - аналогично предыдущему, но с большими, более похожими на оригинал, римскими цифрами;

Посмотрим на примере:

Пример упорядоченного списка без прописывания атрибутов списка.

  1. Тапочки детские;
  2. Тапочки мужские;
  3. Тапочки женские.

<ol>
<li>Тапочки детские;</li>
<li>Тапочки мужские;</li>
<li>Тапочки женские.</li>
</ol>

Такой же список получится, если прописать type="1"

  1. Тапочки детские;
  2. Тапочки мужские;
  3. Тапочки женские.

<ol type="1">
<li>Тапочки детские;</li>
<li>Тапочки мужские;</li>
<li>Тапочки женские.</li>
</ol>

Список с прописными латинскими буквами:

  1. Стол;
  2. Стул;
  3. Диван;

<ol type="a">
<li>Стол;</li>
<li>Стул;</li>
<li>Диван;</li>
</ol>

Сделаем список с заглавными латинскими буквами:

  1. Стол;
  2. Стул;
  3. Диван;

<ol type="A">
<li>Стол;</li>
<li>Стул;</li>
<li>Диван;</li>
</ol>

Так выглядит список с маленькими римскими цифрами:

  1. Марс;
  2. Венера;
  3. Вулкан.

<ol type="i">
<li>Марс;</li>
<li>Венера;</li>
<li>Вулкан.</li>
</ol>

А это список с большими римскими цифрами:

  1. Марс;
  2. Венера;
  3. Вулкан.

<ol type="I">
<li>Марс;</li>
<li>Венера;</li>
<li>Вулкан.</li>
</ol>

2) START="" атрибут, указывающий с какой цифры или буквы (по порядку) начинать нумерацию пунктов списка. Данный атрибут, как Вы уже догадались, работает не только для числовой нумерации. Если указать type="a" и прописать start="3", то нумерация списка начнется с буквы "c", что соответствует порядковому номеру буквы в алфавите.

  1. Синий;
  2. Красный;
  3. Зеленый;
  4. Фиолетовый.

<ol type="a" start="3">
<li>Синий;</li>
<li>Красный;</li>
<li>Зеленый;</li>
<li>Фиолетовый.</li>
</ol>

Пожалуй, стоит рассмотреть основную составляющую списков - элемент списка <li>List Item</li>

Данный тег <li> имеет свой атрибут, работающий только в упорядоченных списках <ol> из примера Вы поймете почему именно так.

VALUE="" - данный атрибут указывает номер элемента списка, от которого следует вести отсчет следующих элементов:

Перечень необходимых для поездки вещей:

  1. Сумка дорожная
  2. Туалетный комплект
  3. ...
  4. Удостоверение
  5. Вещи личного пользования

<ol>
<li>Сумка дорожная</li>
<li>Туалетный комплект</li>
<li>...</li>
<li value="8">Удостоверение</li>
<li>Вещи личного пользования</li>
</ol>

Как видно из списка выше, с помощь атрибута value и многоточия мы создали эффект пропущенных элементов списка, что иногда бывает необъходимо. Причем нумерация последнего элемента списка прошла как нужно, с цифры, прописанной в атрибуте "value", то есть с "8".

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

<p><strong>Ассортимент палаток в магазине "Охотник и рыболов"</strong></p>

<!--Открываем основной неупорядоченный список-->
<ul>
<!--Перечисляем ассортиментные позиции-->
<li>Палатки одноместные</li>
<li>Палатки двухместные:
<!-- Внутри элемента основного списка открываем вложенный неупорядоченный список-->
    <ul>
    <li>Палатки с мансардой</li>
    <li>Палатки с двойным дном</li>
    <li>Палатки с надувным полом</li>
    <!--Закрываем вложенный список-->
    </ul>
<!--Закрываем элемент основного списка-->
</li>
<!--Продолжаем перечисление основных позиций основного списка-->
<li>Палатки трехместные</li>
<li>Палатки четырехместные</li>
</ul>
<!--Основной список закрыт-->

Попробуйте вставить данный код в страницу "index.html", сохраните и получите в браузере следующее:

example-vlojennogo-spiska-html

(кликните для увеличения)

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

Что мы видим? Видим то, что внутри элемента одного списка можно открыть другой список со своими элементами, что весьма удобно и симпатично. Основной и вложенный списки могут быть разных типов, но все равно будут работать правильно, главное закрывать теги в нужном месте. В коде выше я выделил цветом теги, на которые нужно обязательно обратить внимание, немного внимания и все встанет на свои места

Обязательно попробуйте применить все теги и атрибуты списков-html в нашей странице "index.htm", запомните их синтаксис и не забывайте всегда закрывать парные теги!

Легкого усвоения урока, друзья!

]]>
]]>
Статьи из этой же рубрики: