• доступно о веб-разработке
30.10.2012 HTML, Технологии

Списки / Неделя HTML

Уверен, что многие со мной согласятся в том, что если бы текст шел сплошной «простыней» без какого-то ни было различия, то читать, в таком случае, было бы много тяжелее. Обычно мы привыкли к тому, что глаз отдыхает переводя область своего внимания между разными типами текстовых данных. К примеру, с абзаца на таблицу, с таблицы на цитату, а с цитаты на список. Вот о последнем мы сегодня и поговорим.

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

Почему именно список? Из-за особенностей форматирования он быстрее воспринимается, чем перечисленные через запятую названия.

К тому же, в списке легко читается порядок или приоритет, если это касается дел.

В веб-разработке многие связанные элементы построены на списках.

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

Но давайте ближе к основам.

Есть списки нумерованные, а есть ненумерованные.

Нумерованный:

  1. Молоко.
  2. Мука.
  3. Сметана.
  4. Булка.
  5. Хлеб.

Ненумерованный:

  • Молоко.
  • Мука.
  • Сметана.
  • Булка.
  • Хлеб.

Давайте посмотрим, как они выглядят в виде кода.

Нумерованный:

<ol>
	<li>Молоко.</li>
	<li>Мука.</li>
	<li>Сметана.</li>
	<li>Булка.</li>
	<li>Хлеб.</li>
</ol>

Ненумерованный:

<ul>
	<li>Молоко.</li>
	<li>Мука.</li>
	<li>Сметана.</li>
	<li>Булка.</li>
	<li>Хлеб.</li>
</ul>

Как видите, между собой они отличаются только главным тегом — <ol>(нумированный) или <ul>(ненумированный).

К примеру, логично нумеровать список чего-то в тексте, расставляя элементы списка (<li>) по приоритету.

И совершенно нелогично нумеровать меню сайта, так как каждая страница имеет свое значение, не поддающееся «взвешиванию».

Через CSS вы можете менять свойства списка. Такие как:

Можно вместо точки слева поставить какое-нибудь изображение (как это сделано в данном блоге). Или сместить символ элемента левее. Изменить его тип с точки на квадратик. И так далее.

Подробнее об этом здесь:

http://htmlbook.ru/css/list-style

Завтра мы поговорим о позиционировании элементов и посмотрим на примере, как можно сделать при помощи списка горизонтальное меню.

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Работа с текстом / Неделя HTML

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

Закрыть