Создание сайта.Урок2. Создание списков.

Сегодня мы поговорим с Вами о списках. Вообще в  HTML возможно 3 варианта отображения списка:

Каждый из этих списков выполняет свою роль и необходим для решения разного рода задач.

Маркированный список выглядит следующим образом:

• элемент списка 1;
• элемент списка 2;
• элемент списка 3.

Для того, чтобы получить список такого вида необходима следующая запись на языке HTML:

 <UL>
  <LI>элемент списка 1;</LI>
  <LI>элемент списка 2;</LI>
  <LI>элемент списка 3.</LI>
</UL>

Элемент UL (unordered list) определяет маркированный список.

Элемент LI (list item) определяет элемент маркированного или нумерованного списка.

А вот так вот выглядит нумерованный список:

На языке HTML это записывается следующим образом:

<OL>
  <LI>элемент списка 1;</LI>
  <LI>элемент списка 2;</LI>
  <LI>элемент списка 3.</LI>
</OL>Элемент OL (ordered list) определяет нумерованный список.

И, наконец, третий вариант это список определений, который состоит из пары термин/определение:

КопирайтСоздание совершенно новой статьиРерайтСоздание новой статьи путем видоизменения статьи — оригинала

На языке HTML это записывается следующим образом:

<DL>
  <DT><b>Копирайт</b></DT>
  <DD>Создание совершенно новой статьи</DD>
  <DT><b>Рерайт</b></DT>
  <DD>Создание новой статьи путем видоизменения статьи — оригинала</DD>
</DL>Элемент DL (definition list) определяет список определений.     Он отличается от остальных типов списков тем, что каждый элемент этого списка представляется двумя элементами HTML:     элементом DT (definition term), содержащим имя определяемого термина,      и элементом DD (definition description), содержащим определение этого термина.Элемент DT может содержать любые текстовые (но не блочные) элементы. Элемент DD может содержать как текстовые, так и блочные элементы,     позволяя тем самым создавать многоуровневые вложенные списки.

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

Для того, чтобы до конца уяснить себе, что же такое списки , давайте рассмотрим HTML-код, который был использован для создания меню на этой странице:

<ul class=»uz»>    
<li class=»m»><a class=»m» href=»http://мой сайт/»>Главная страница</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/publ/3″>Работа</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/publ/7″>Обучение</a></li>
    <ul style=»list-style-image: url(/marker.jpg)»>
        <li><a class=»m» href=»http://мой сайт/publ/8″ >Изучение иностранных языков</a></li>
        <li><a class=»catNameActive» href=»http://мой сайт/publ/20″ >Создание своего сайта</a></li>
        <li><a class=»m» href=»http://мой сайт/publ/24″ >Другое</a></li>
    </ul><li class=»m»><a class=»m» href=»http://мой сайт/publ/9″>Дети</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/publ/13″>Домашний очаг</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/publ/16″>Здоровье и красота</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/load/»>Библиотека</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/forum/»>Форум</a></li>
<li class=»m»><a class=»m» href=»http://мой сайт/index/0-3″>Обратная связь</a></li></ul>

Как видно из этого примера, для создания меню использовались маркированные списки. Об этом говорит элемент <ul>. Элемент <li>отображает каждый из элементов меню. Кроме того, раздел Обучение имеет свое подменю, которое представляет собой еще один маркированный список. Заметьте, для того, чтобы в подменю в качестве маркера был использован маленький зеленый кружок, используется атрибут style. Он показывает, где хранится рисунок, который будет отображаться в меню в качестве маркера.Кроме того, в этом коде используется гиперссылки на другие страницы сайта. Реализуется это с помощью элемента <a>: <a href=»адрес странички, на которую следует перейти при нажатии на ссылку»> Текст, который увидит пользователь</a>.  Ну и последнее, что используется в этом коде, это атрибут class. Этот атрибут определяет такие значения, как цвет шрифта, его размер, фон и так далее. Все этого именно в этом конкретном случае задается в каскадной таблице стилей CSS, о которой мы поговорим на следующем уроке.

Таким образом, создание списков — дело совсем несложное, но позволяющее значительно расширить возможности для создания приятного и читабельного дизайна интернет-страниц.

Другие статьи по теме:

Создание своего сайта. Введение
Создание своего сайта. Урок 1.
Создание своего сайта.Урок2. Создание списков.
Создание своего сайта. Урок 3 . Таблица CSS
Создание своего сайта. Урок 4. Информеры.
Создание своего сайта.Урок 5.Раскрутка форума и привлечение активных пользователей
Создание своего сайта. Урок 6.Как увеличить посещаемость сайта
Создание своего сайта. Урок 7.Как увеличить посещаемость сайта или бесплатная регистрация в каталогах сайтов
Создание своего сайта.Урок 8.Как увеличить посещаемость сайта с помощью форумов других сайтов?
Создание своего сайта.Урок9.Как увеличить посещаемость сайта с помощью статей?