Списки в тексте, как их создавать и использовать в документе.
Данный урок посвящен важной теме html языка, а именно html списки. Как Вы наверняка уже видели в интернете, списки бывают не упорядоченные (перед пунктами в списке стоит точка, ромб или какая-то картинка) и упорядоченные (пункты списка нумеруются всякого рода цифрами или буквами). Вот в этом разница списков, давайте перейдем непосредственно к элементам языка html тегам для списков:
- UL |
Тег для создания неупорядоченного списка |
- OL |
Тег для создания упорядоченного списка |
- LI |
Тег для создания пунктов в списках OL или UL |
UL – тег предназначен для создания неупорядоченного списка, данный тег обязательно нужно закрывать! Так же для обозначения элементов списка нужно применять еще один тег LI. Этот тег указывает пункты списка.
Код html:
<ul>
<li>Первый пункт для списка </li>
<li>Второй пункт </li>
<li>Третий</li>
<li>Четвертый пункт, можно продолжить перечисление если нужно </li>
</ul>Выглядит это примерно так:
OL – Этот тег предназначен чтобы создавать упорядоченные списки. Как и в предыдущим примере, обязательно нужно использовать тег LI для обозначения пунктов списка.
Атрибуты:
START – данный атрибут устанавливает число, с которого будет начинаться нумерация списка. Использовать можно только целые числа. Атрибут не обязательный, если его не указывать, то список начнет нумероваться с начала.
TYPE – с помощью этого атрибута можно указать как нумеровать список (цифры, буквы и тд..)
Тег может принимать значения:
"1" – арабские числа 1, 2, 3 ...
"A" – буквы заглавные A, B, C ...
"a" – буквы маленькие a, b, c ...
"I" – римские числа заглавные I, II, III ...
"i" – римские числа обычные i, ii, iii ...По умолчанию стоит нумерация арабскими цифрами.
Пример html кода:
<!-- арабскиме числа -->
Чтобы создать свой сайт самому нужно:
<ol type="1" >
<li> Изучить html </li>
<li> Изучить css </li>
<li> Желательно выучить php </li>
</ol>
<!-- большие римские числа -->
Для удобства и скорости создания сайта нужно знасть:
<ol type="I" >
<li> Adobe Dreamweaver </li>
<li> TOpStylePro </li>
<li> Photoshop </li>
</ol>
<!-- маленькие буквы -->
Для заработка на сайте нужно:
<ol type="a" >
<li> повысить посещаемость сайта </li>
<li> монетизировать сайт </li>
<li> оптимизировать рекламу </li>
</ol>
<!-- устанавливаем номер начала нумирации -->
Веб мастер должен:
<ol type ="1" start="2" >
<li> писать статьи для сайта </li>
<li> постоянно вести работы с сайтом </li>
<li> знать кучу кучу всего </li>
</ol>Браузер обработает код так:
LI – Как Вы уже думаю поняли, данный тег нужен чтобы создавать пункты списка. Этот тег обязательно нужно закрывать и находиться он должен только между тегами OL или UL. Если не закрыть этот тег или поместить вне тегов для создания списка ничего страшного не случиться, но код нужно писать правильно и без ошибок. Иначе поисковые системы будут косо смотреть на сайт.
Атрибуты:
VALUE – атрибут позволяет изменить порядковый номер для нумерации списка. Атрибут можно использовать только в списках OL. Значение устанавливается в цифровом формате:
Чтобы создать сайт на домашнем компьютере необходимо:
<ol ><!-- если не указан тип списка, используется нумерация цыфрами -->
<li> html выучить просто!</li>
<!-- теперь присваиваем нумерацию с пятого пункта -->
<li value="5"> css тоже не сложно выучить </li>
<li> php простой язык, но требует усидчивости </li>
</ol>В браузере мы увидим:
Примечание: Вот и все по спискам, так же можно применять списки внутри списка, это тоже бывает полезно. Для этого вставляем в главный список еще один список, можно использовать как нумерованные, так и не нумерованные.
Пример:
<ol>
<li> html выучить просто!</li>
<ol>
<li> пройти вводный курс!</li>
<li> закрепить на практике </li>
<li> делать свои сайты! </li>
</ol>
<li> css тоже не сложно выучить </li>
<li> php простой язык, но требует усидчивости </li>
</ol>
Итог:
