Язык HTML
Списки
Списком называется взаимосвязанный упорядоченный набор информации. Списки предоставляют возможность систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
По типам различают:
Нумерованные списки
Маркированные списки
Списки определений
Вложенные списки
Маркированные списки
В маркированном списке для упорядочения элементов используются маркеры. Для создания маркированного списка используются теги <ul> и </ul>.
Весь список располагается между этими тегами и каждый его пункт задается тегом <li> (возможен (необязателен) закрывающий </li>).
Пример кода для маркированного списка:
<h4>
ЛИМОННЫЙ ТОРТ-ДЕСЕРТ "ПОЛНОЧЬ В ПАРИЖЕ" <br>
ИНГРЕДИЕНТЫ<br>
</h4>
<ul>
<li>250 г сахара
<li>5 ст.л. крахмала
<li>3 желтка
<li>2 ст.л. лимонной цедры
<li>3 лимона (выжать сок)
<li>2 стакана кипятка
<li>3 ст.л. сливочного масла
<li>взбитые сливки или белковый крем для украшения
</ul>
По умолчанию маркер отображается в виде черного кружочка.
disc - закрашенный кружочек
circle - пустой кружочек
square - закрашенный квадратик.
Это можно изменить с помощью параметра type тэга <ul> со значениями:
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Практическое задание:
Создать документ, содержащий рецепт блюда с его изображением и со спискам ингредиентов.
Нумерованные списки
Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.
Чтобы указать браузеру, что список будет нумерованным, используются теги <ol> и <ol>.
Весь список располагается между ними и каждый его пункт задается также тегами <li> (</li>).
Практическое задание:
Создать документ - тест УЗП на выявление первых симптомов при инсульте.
По умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type тэга <ol> со значениями:
A - нумерация заглавными латинскими буквами (A, B, C)
a - нумерация прописными латинскими буквами (a, b, c)
I - нумерация большими римскими цифрами (I, II, III)
i - нумерация маленькими римскими цифрами (i, ii, iii).
Чтобы начать список с определенного значения, используется параметр start тега <ol>.
При этом не имеет значения, какой тип списка установлен с помощью type, атрибут start одинаково работает и с римскими и с арабскими числами.
Например:
<ol type="I" start="8">
Практическое задание:
Создать документ - список дежурств, начиная с 12 по 16 номера.
У тега <li> можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.
Практическое задание:
Создать документ - загадку про радугу (что это? 1 красный, 2 оранжевый, 3 желтый...7 фиолетовый).
Список определений
Список определений состоит из двух элементов — термина и его определения.
Сам список задается с помощью тэга <dl>, термин — тегом <dt>, а его определение — с помощью тега <dd>.
Общая структура списка определений:
<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>
Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д.
Пример кода списка определений:
<dl>
<dt>Тег</dt>
<dd>Тег — это специальный символ разметки, который применяется для
вставки различных элементов на веб-страницу таких как: рисунки,
таблицы, ссылки и др., и для изменения их вида.</dd>
<dt>HTML-документ</dt>
<dd>Обычный текстовый файл, который может содержать в себе текст,
теги и стили. Изображения и другие объекты хранятся отдельно.
Содержимое такого файла обычно называется HTML-код.</dd>
<dt>Сайт</dt>
<dd>Cайт — это набор отдельных веб-страниц, которые связаны между собой
ссылками и единым оформлением.</dd>
</dl>
Практическое задание:
Создать документ – список терминов с расшифровкой школьного слэнга (5 элементов).
Вложенные списки
Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков. Уровень вложенности может быть любым, главное не запутайтесь.
Практическое задание:
Создать документ – меню (десерты, кофе-бар, салат-бар, коктейль-бар), нумерованный список – названия, вложенный маркированный – состав блюд. Оформление табличное, к каждому блюду графика.
Основа:
| ← Язык HTML. Ссылки. | Язык HTML. Вставка звука и видео. → |