Создание сайта.Урок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.Как увеличить посещаемость сайта с помощью статей?