| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Создание списков в HTML
|
|
Создание списков в HTML
В этом уроке мы поговорим о создании списков на странице. Списки достаточно часто используются на web-страницах, поэтому вы должны знать как они создаются!
Допустим, нам необходимо создать список из пяти пунктов. Можно создать такой список примитивным методом, применив тег <br> - тег переноса строки. Название списка возьмем в абзац - тег <p>.
Пример написания:
<p>Название списка</p>
1. Первый пункт списка <br>
2. Второй пункт списка <br>
3. Третий пункт списка <br>
4. Четвертый пункт списка <br>
5. Пятый пункт списка <br>
Проверив нашу запись в браузере, мы увидим более менее упорядоченный список из пяти пунктов. Но это неправильный метод создания списка, а простой перенос строк. Список создается немного по другому и мы сейчас разберемся как это делается.
Для создания нумерованного списка (пункты списка отсортированы по номерам) применяется тег <ol>. Весь список помещаем между открывающим тегом <ol> и закрывающим тегом </ol>, а каждый пункт списка ограничиваем тегами <li> и </li>.
Пример написания:
<p>Название списка</p>
<ol>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
<li>Четвертый пункт списка</li>
<li>Пятый пункт списка</li>
</ol>
Для создания ненумерованного списка (без нумерации пунктов списка) вместо тега <ol> применяем тег <ul> и каждый элемент списка выделить тегом <li>.
Пример написания:
<p>Название списка</p>
<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
<li>Четвертый пункт списка</li>
<li>Пятый пункт списка</li>
</ul>
Вот таким способом создаются нумерованные и ненумерованные списки.
Теперь давайте поговорим о некоторых атрибутах, используемых при создании списков и которые будут необходимы и нам. Вначале рассмотрим атрибуты списка <ol>. При просмотре в браузере мы видим, что нумерация идет арабскими цифрами. Если мы хотим что-бы нумерация была римскими цифрами к тегу <ol> добавляем атрибут type со значением "I" (большая буква I).
Пример написания:
<ol type="I">
Если хотим маленькие римские цифры - ставим значение "i" (маленькую букву i).
Для буквенного обозначения пунктов списка - ставим значение "A" или "a" (большую или маленькую букву А).
Пример написания:
<ol type="A">
Еще может возникнуть ситуация, в которой нумерацию пунктов списка понадобиться начинать не с единицы, а, например, с тройки. В этом случае используем атрибут start, а в значении прописываем то число (букву) с которого будет начинаться список.
Пример написания:
<p>Название списка</p>
<ol type="I" start="3">
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
<li>Четвертый пункт списка</li>
<li>Пятый пункт списка</li>
</ol>
Проверив нашу запись в браузере, мы увидим, что наш список начинается с номера три.
У ненумерованного списка тоже есть атрибут type отвечающий за форму метки у каждого пункта списка. Без атрибута ненумерованный список имеет метки каждого элемента списка - черный кружок. Если мы хотим иметь метку - черный квадрат, к атрибуту type пишем значение "skuare". Метка - белый кружок - это значение "circle".
Пример написания:
<p>Название списка</p>
<ul type="skuare">
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
<li>Четвертый пункт списка</li>
<li>Пятый пункт списка</li>
</ul>
Вот такие атрибуты, из основных, применяются при создании списков.
Еще рассмотрим такой момент, как вложенные списки. Это когда один список вложен в другой. Давайте в наш нумерованный список вложим наш ненумерованный, например, в третий пункт списка. Для этого нам, всего лишь, надо после закрывающего тега третьего пункта нумерованного списка вставить полностью наш ненумерованный список.
Пример написания:
<p>Название списка</p>
<ol type="I">
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
<ul type="skuare">
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
<li>Четвертый пункт списка</li>
<li>Пятый пункт списка</li>
</ul>
<li>Четвертый пункт списка</li>
<li>Пятый пункт списка</li>
</ol>
Не забывайте проверять результаты работы в браузере.
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
