Two Pilots - учебные странички


 

Уроки HTML

3. Списки.

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

Маркированные списки - это списки, в которых элементы списка отмечаются маркерами.
Для установки маркированного списка используются теги <ul> и <li>

Тег <ul> - unordered list (неупорядоченный список).
Тег <li> - list item (элемент списка)

Код, написанный таким образом

<ul>
<li> Книги </li>
<li> Электроника </li>
<li> CD и DVD </li>
</ul>
будет отображен на экране так:



Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type=... тега <ul>.


С помощью CSS можно задать в качестве маркера любое изображение. В этом случае следует помнить: при масштабировании текста при просмотре в браузере стандартные маркеры масштабируются вместе с ним, а изображения, используемые в качестве маркера, не масштабируются.

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

Нумерованные (или упорядоченные) списки представляют собой списки из пронумерованных пунктов.
Для установки нумерованного списка используется тег <ol> вместо <ul>
Тег <ol> - ordered list (упорядоченный список).

Самый простой список имеет следующий код:

<ol>
<li> Выйдете на станции метро Войковская. </li>
<li> Сядьте на троллейбус 57 маршрута.</li>
<li> Выйдете на четвертой остановке. </li>
<li> Перейдите дорогу. Я Вас буду ждать у киоска.</li>
</ol>

На экране он отобразится так:

         1. Выйдете на станции метро Войковская.
         2. Сядьте на троллейбус 57 маршрута.
         3. Выйдете на четвертой остановке.
         4. Перейдите дорогу. Я Вас буду ждать у киоска.


Вид и тип нумерации зависит от параметров тега <ol>

Код HTML Отображение на экране
<ol start="5">
 Список начинающийся с пяти:

    5. Желтый
    6. Синий
    7. Красный
<ol type="A">
 Заглавные латинские буквы:

  1. Желтый
  2. Синий
  3. Красный
<ol type="a">
 Прописные латинские буквы:

  1. Желтый
  2. Синий
  3. Красный
<ol type="I">
 Cписок с римскими буквами:

  1. Желтый
  2. Синий
  3. Красный


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

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

Например, код
<ol>
<li> Крупные города России:
      <ul type="square">
      <li> Москва
      <li> Санкт-Петербург
      </ul>
<li> Крупные города Украины:
      <ul type="square">
      <li> Киев
      </ul>
</ol>

отобразится на экране так:

 
  1. Крупные города России:
    • Москва
    • Санкт-Петербург
  2. Крупные города Украины:
    • Киев

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

Списки определений являются способом определения терминов и понятий. Списки определений состоят из трех элементов: элемента списка определений <dl> ... </dl>, элемента определения термина <dt> ... </dt>, элемента определения описания <dd> ... </dd>.

Код примера
<dl>
      <dt>Пиксель</dt>
      <dd>Элементарная цветная точка, совокупность которых образует изображение.</dd>

      <dt>Экспозиция</dt>
      <dd>Количественная мера световой энергии, падающая на светочувствительный элемент.</dd>

      <dt>Диафрагма</dt>
      <dd>Параметр, регулирующий количество света, который освещает матрицу.</dd>

</dl>

отобразится в браузере так:

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



Упражнение

Создайте по образу скриншота html-документ с соблюдением всех элементов оформления списков.

Выложите получившийся файл в личный каталог, составьте линк (посмотреть как) и откройте Вашу страничку в браузере.

Пришлите, пожалуйста, линк на Вашу страничку на адрес группы HTML Pilot в качестве отчета о выполнении данного упражнения. Посмотреть, как подписаться...

05/03/2007, К. Жданова

- Главная страничка "Уроки HTML" -

 

Главная страничка :: Машинопись :: Mozilla Firefox :: Mozilla Thunderbird :: Total Commander ::
Local server :: ConTEXT :: Уроки HTML :: Справочный сайт (! только для пилотов) :: Отзыв