Списки в HTML




Как создавать списки в HTML, синтаксис тегов <UL> <LI> <OL>, написание меню.

В процессе создания сайта, очень часто приходится писать какие-то тексты, выводить информацию в порядке поочередности, что-то перечислять и т.д. А процесс написания «меню» для сайта без списков почти не обходится.

Списки в HTML

Правда можно написать при помощи тега <P >, или таблицы и т.д., но при помощи тегов <UL> <LI> сделать «меню» для сайта наиболее эффективно. Такое меню легко поддается оформлению при помощи стилей CSS, не требует очень глубоких познаний в программировании, а главное — для начинающего верстальщика самый быстрый и практичный вариант.

Списки в HTML

Теги <UL> <LI> <OL>

И так, списки создаются при помощи тега <UL> или <OL> и закрывающего тега </UL>и соответственно </OL> ( закрывать — обязательно!). Каждый элемент списка должен начинаться с тега <LI> и заканчиваться тегом </LI> (обязательно!). Списки могут быть пронумерованы или не пронумерованы. Могут быть выделены каким-то символом, например кружком, точкой, буквой, неупорядоченными цифрами, или самодельным символом, зависимо от потребности и фантазии. Ниже представлены некоторые примеры синтаксиса и отображения в броузере, для написания списков, этих вариантов достаточно для простого применения.

Синтаксис тегов <UL> <LI> <OL>:

<UL> <LI>элемент списка</LI> </UL>, можно писать и малыми буквами —
<ul> <li> элемент списка </li> </ul>, или <ol> <li> элемент списка </li> </ol>

Параметры тегов <UL> <LI> <OL>:

Параметр TYPE (type) — устанавливает вид маркера для определенного списка, или для всех списков данного сайта ( с применением стиля CSS).

Синтаксис тега TYPE (type):

Варианты маркеров для непронумерованных списков, их три «disc», «circle», «square».

пример c type=»disc»

пример c type=»circle»

пример c type=»square»

Некоторые варианты маркеров для пронумерованных списков.

Стандартная нумерация

заданный отсчет «start=2011»

пример c «type=A»

В стилях CSS задавать маркер можно параметром style=»list-style:тип маркера».

Оформление списков с помощью стилей.

style=»list-style:lower-latin»

style=»list-style:upper-alpha»

произвольный маркер

Примеры можно посмотреть здесь.