HTML списки, теги списков | Как создать свой сайт

HTML списки, основные теги списков

Мар-10-2010 Автор: VeryOldMan

К Вашему вниманию четвертый  урок html верстки сайта. Это урок посвящен созданию списков, вернее  html тегам, с помощью которых создаются html списки на web-страницах.

В html документах используются три вида html списков: пронумерованныепромаркированные и html списки определений или как их еще называют – списки описаний. Отдельно о вложенных списках, то есть одного списка внутри другого. Создаются такие списки очень просто. Для этого достаточно расположить пару тегов (открывающий и закрывающий) внутри другой пары. Итак:

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

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

Начало пронумерованного списка определяется открывающим тэгом <ol> а конец – закрывающим тэгом </ol>. Все элементы списка начинаются с тэга <li>. Например:

<ol> <li>Сайт</li> <li>Блог</li> <li>Ресурс </li> </ol>

В визуальном режиме это будет выглядеть так:

1. Сайт 2. Блог 3. Ресурс

Атрибуты тега <ol> — type и start. Атрибут type устанавливает стиль нумерации элементов html списка и может принимать следующие значения:

«А» — заглавные буквы A, B, C … «а» — строчные буквы a, b, c … «I» — большие римские числа I, II, III … «i» — маленькие римские числа i, ii, iii … «1» — арабские числа 1, 2, 3 …

По умолчанию <ol type=»1″ >

Атрибут start. устанавливает первое число, с которого начинается нумерация элементов списка. Может быть: start=»1,2,3… и.т.д.» Например, нумерованные html списки:

<ol type=»I» start=»5″> <li>Сайт</li> <li>Блог</li> <li>Ресурс </li> </ol>

Будет выглядеть в визуальном режиме вот так:

V. Сайт VI. Блог VII. Ресурс

Маркированный список в html

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

<ul> <li>Сайт</li> <li>Блог</li> <li>Ресурс </li> </ul>

В визуальном режиме такие html списки будут выглядеть так:

• Сайт • Блог • Ресурс

Атрибут тега <ul> — type. Атрибут type устанавливает внешний вид маркера. Круглый (circle), квадратный (square) или дисковидный (disc), который, кстати, используется по умолчанию. Например:

<ul type=»square»> <li>Сайт</li> <li>Блог</li> <li>Ресурс </li> </ul>

В визуальном режиме это будет выглядеть так:

основные теги списков

Вложенные списки html

Вот такой небольшой пример:

<ol> <li> Сайт <ul> <li>Страница сайта1 <li>Страница сайта2 </ul> <li> Блог <ul> <li>Страница блога1 <li>Страница блога2 </ul> </ul>

В визуальном режиме это будет выглядеть так:

Сайт • Страница сайта1 • Страница сайта2

Блог • Страница блога1 • Страница блога2

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

Список определений начинается с тэга <dl> и завершается тэгом </dl>. Данный список служит для создание списков типа «термин»-«описание». Каждый термин начинается тэгом <dt> , а описание — тэгом <dd>. Например:

<dl> <dl> <b> Статический сайт</b> <DD> Содержит статическую информацию <dt> <b> Динамический сайт</b> <dd> Содержит динамическую информацию <dt> <b> Сайт на движке</b> <dd> Динамический сайт </dl>

В визуальном режиме это будет выглядеть так:

основные теги списков

HTML списки очень часто используются в html верстке сайта при создании раскрывающихся или выпадающих меню сайта.






2 комментария
  1. TAG Пишет,

    Небольшая ошибка в коде

    Сайт

    Страница сайта1

    Страница сайта2

    Блог

    Страница блога1

    Страница блога2

    —————— надо написать

  2. TAG Пишет,

    ой,,, код не написало !

Добавить комментарий