Изучаем HTML списки для красивого оформления страниц.

Сразу хотелось бы сказать, что сегодня будет не большой урок, но, впрочем, весьма полезный. А поговорим мы сегодня про html списки.

Дополнение: несмотря на то, что Андрей уделил этой теме не слишком много внимания, я настоятельно рекомендую отнестись к ней со всей серьезностью.

Очень удобный и легкий способ выделения на странице любого текста, к которому вы хотели бы привлечь внимание особо, т.е. акцентировать внимание читателя на отдельной фразе или целом абзаце способом его выделения.

В html поддерживается 3 вида списков: маркированные, нумерованные, список определений. Начнем с маркированного списка.

Маркированный список создается с помощью закрывающегося тега <ul>…</ul>.

Внутри этого тега располагаются теги <li>, которые содержат каждый конкретный пункт списка.

Тег <li> закрывающийся тег, но может и не закрываться.

Пример того, как нужно расположить теги и текст между ними:

<ul>
<strong>Виды спорта</strong>
<li>Хоккей
<li>Футбол <li>Баскетбол
</ul>

В результате получилось:

Виды спорта
• Хоккей
• Футбол
• Баскетбол

При этом нужно не забыть указать параметры тега <ul>: <ul>

compact – компактное представление списка;
type= disc – маркер – закрашенный кружок;
circle – маркер – не закрашенный кружок;
square - маркер – квадратик;

Параметр type можно также указывать для тега <li>, но действия только для конкретного пункта меню.

Допускается использование тега <img src…> вместо тега <li>. Смотрите результат в примере lesson4.html.

Настоятельно рекомендую Вам самим попрактиковаться. Ниже пример того, что может получиться при совмещении внутри тегов <ul> тега <img src…> и <li>

Виды спорта

Хоккей
• Футбол
• Баскетбол

Нумерованный список.

Нумерованный список создается при помощи тега <ol>… </ol>.

Внутри него располагаются теги <li>. Обязательных параметров у этих тегов нет.

Параметры тега <ol> :

compact – компактное представление списка;
type= A вид маркера – прописные латинские буквы;
I вид маркера – большие римские цифры;
i вид маркера – маленькие римские цифры;
1 вид маркера – арабские цифры (по умолчанию);
start=цифра - начальный номер нумерации;>

Параметр тега <li> в нумерованном списке:

<li type;> – можно указывать те же значения, что и для тега <ol>, только они действовать будут на 1 пункт списка;
value – конкретное значение нумерации (все последующие отсчитываются от данного)

Пример:

Виды спорта


1. Хоккей
2. Футбол
3. Баскетбол

Виды спорта


8. Хоккей
9. Футбол
10. Баскетбол

Список определений.

Список определений создается при помощи тега <dl>…</dl>. Внутри тега располагаются пары тегов <dt>(терин) и <dd> (определение), которые содержат конкретный термин и его определение соответственно. Параметров у тегов нет.

Объективно за все время моей работы в Интернете теги <dt> (терин) и <dd> (определение) использовать мне не доводилось. За это время мною было просмотрено большое количество исходных кодов сайтов и указанные теги я тоже не встречал.

На сегодня урок я заканчиваю.

Прошу Вас самостоятельно потренироваться, опираясь на файл lesson4.html, который также можно получить у меня, обратившись по адресу электронной почты.

Творческих Вам успехов.

А пока что предлагаю переместиться на следующую страницу и приступить к изучению пятого урока, который имеет название "Использование таблиц при верстке сайта".