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

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

  • маркированный (неупорядоченный) список;
  • нумерованный (упорядоченный) список;
  • список определений.

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

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

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

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

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

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

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

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

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

    • На языке 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.Как увеличить посещаемость сайта с помощью статей?

    По теме: