Создание списков.



Списки очень часто используется в процессе создание сайтов. Иногда приходится печатать перечень документов, предметов. Чтобы документ имел деловой вид, чтобы определить строгий порядок в нумерации статей, чтобы показать подчинённость мелких абзацев более крупным, используются списки.

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


В маркированном списке вместо букв и цифр используются маркеры. Чтобы создать маркированный список, необходимо использовать тег <ul></ul>, а в создании элементов списка участвует все тот же тег <li></li>.
Пример записи кода:

<html> <head> <title></title> </head> <body> <ul> <li>ромашки</li> <li>тюльпаны</li> <li>нарциссы</li> </ul> </body> </html>

РЕЗУЛЬТАТ:

  • ромашки
  • тюльпаны
  • нарциссы

Виды маркеров можно менять (по умолчанию маркер отображается в виде черного кружочка). Изменить вид можно с помощью параметра type:

- type="disc" - закрашенный кружочек.

- type="circle" - пустой кружочек.

- type="square" - закрашенный квадратик.

Пример записи кода:

<html> <head> <title></title> </head> <body> <ul type="disc"> <li>ромашки</li> <li>тюльпаны</li> <li>нарциссы</li> </ul> <ul type="circle"> <li>ромашки</li> <li>тюльпаны</li> <li>нарциссы</li> </ul> <ul type="square"> <li>ромашки</li> <li>тюльпаны</li> <li>нарциссы</li> </ul> </body> </html>

РЕЗУЛЬТАТ:

  • ромашки
  • тюльпаны
  • нарциссы

  • ромашки
  • тюльпаны
  • нарциссы

  • ромашки
  • тюльпаны
  • нарциссы


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


Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы. Чтобы создать пронумерованный список, необходимо использовать тег <ol></ol>, а в создании элементов списка участвует все тот же тег <li></li>.
Пример записи кода:

<html> <head> <title></title> </head> <body> <ol> <li>ромашки</li> <li>тюльпаны</li> <li>нарциссы</li> </ol> /body> </html>

РЕЗУЛЬТАТ:

  1. ромашки
  2. тюльпаны
  3. нарциссы

По умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:

- type="A" - нумерация заглавными латинскими буквами (A, B, C).

- type="a" - нумерация прописными латинскими буквами (a, b, c).

- type="I" - нумерация большими римскими цифрами (I, II, III) .

- type="i" - нумерация маленькими римскими цифрами (i, ii, iii).

Пример записи кода:

<html> <head> <title></title> </head> <body> <ol type="A"> <li>ромашки</li> <li>тюльпаны</li> <li>нарциссы</li> </ol> <ol type="I"> <li>ромашки</li> <li>тюльпаны</li> <li>нарциссы</li> </ol> /body> </html>

РЕЗУЛЬТАТ:

  1. ромашки
  2. тюльпаны
  3. нарциссы

  1. ромашки
  2. тюльпаны
  3. нарциссы


Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).

Пример записи кода:

<html> <head> <title></title> </head> <body> <ol type="I" start="3"> <li>ромашки</li> <li>тюльпаны</li> <li>нарциссы</li> </ol> </body> </html>

РЕЗУЛЬТАТ:

  1. ромашки
  2. тюльпаны
  3. нарциссы

У тега <li> можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.

Пример записи кода:

<html> <html> <head> <title></title> </head> <body> <ol> <li>ромашки</li> <li>тюльпаны</li> <br>............... <li value="7">розы</li> <li>нарциссы</li> </ol> /body> </html>

РЕЗУЛЬТАТ:

  1. ромашки
  2. тюльпаны

  3. ...............
  4. розы
  5. нарциссы


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

Такие списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения - в теги <dd></dd>.

Пример записи кода:

<html> <head> <title></title> </head> <body> <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> <dt>Термин 2</dt> <dd>Определение термина 2</dd> </dl> /body> </html>

РЕЗУЛЬТАТ:

Термин 1
Определение термина 1
Термин 2
Определение термина 2


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

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

Пример записи кода:

<html> <head> <title></title> </head> <body> <ul> <li>Цветы <ol> <li>ромашки</li> <li>тюльпаны</li> </ol> </li> <li>Деревья <ol> <li>клен</li> <li>береза</li> </ol> </li> < ul> /body> </html>

РЕЗУЛЬТАТ:

    • Цветы
      1. ромашки
      2. тюльпаны
    • Деревья
      1. клен
      2. береза


Далее рассмотрим: Работа с изображениями - тег img.