Электронное приложение

Технология создания web - сайтов

HTML

 

Раздел 2. Язык гипертекстовой разметки HTML.

 
  Оглавление
§ 6. Структура html-документа. Теги и атрибуты.
§ 7. Создание моей первой странички.
§ 8. Форматирование текста.
§ 9. Списки.
§ 10. Простые таблицы.
§ 11. Сложные таблицы.
§ 12. Изображения и управления рисунками.
§ 13. Гиперссылки. Оформление гиперссылок.
§ 14. Формы.

Тест по теме «Язык гипертекстовой разметки HTML.

 

 

§ 9. Списки.

Списки.

  • Маркированные списки
  • Нумерованные списки
  • Вложенные списки
  • Списки определений
  • Упражнение

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

Маркированные списки - это списки, в которых элементы списка отмечаются маркерами.
Для установки маркированного списка используются теги <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-документ с соблюдением всех элементов оформления списков.

 

 


© Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
© 2012 год.  При использовании материалов обязательна ссылка на владельца