"ВОКРУГ САЙТА" www.vokrug-saita.ru

как создать сайт самостоятельно

Главная Рассылка Секрет Автор сайта

УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 10. Как создавать списки в HTML? Списки упорядоченные и неупорядоченные

В этом уроке мы узнаем, как создавать списки.

О, чём, собственно, речь. Ну, например, перед походом в магазин некоторые составляют список, что нужно купить. Или - список дел на день. Или - список номеров телефонов. Или… да чего угодно!

На Веб-странице благодаря спискам легче определять структуру документа, проще воспринимать при чтении.

Проще с этим вопросом разобраться на практике, что и сделаем сейчас.

Списки бывают двух видов.

Упорядоченные (нумерованные) списки:

  1. Сделать это.
  2. Сделать то.
  3. Совершить подвиг.
  4. Пойти туда-то,

- и т. д.

Неупорядоченные (маркированные) списки:

  • Сделать это;
  • Сделать то;
  • Совершить подвиг;
  • Пойти туда-то,

- и т. д.

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

Маркированные списки - тегом <ul>... </ul>.

А для введения элемента списка (сделать то; сделать это; совершить… и т. д.) нужен ещё тег <li>, который не требует закрывающего тэга.

Вот, как это будет выглядеть в коде страницы:

<ol>
<li>Сделать то;
<li>Сделать это;
<li>Совершить подвиг;
<li> Пойти туда-то.
</ol>

Или:

<ul>
<li>Сделать то;
<li>Сделать это;
<li>Совершить подвиг;
<li> Пойти туда-то
</ul>

Если не до конца понятно, примени эти знания к своему сайту.

Откройте файл poroda.htm:

Уроки html для начинающих
Рис. 29

Здесь у нас начата статья о породах собак. Логично будет после первого абзаца привести список пород, относящихся к каждой группе.

Откройте этот файл в "Блокноте" и добавьте следующий фрагмент кода в код второй ячейки нижней строки:

Листинг 10.1

……
<td valign="top">
<font face="Verdana">
<div align="center">
<H3> <font color="#008000" face="Verdana"><u>Породы собак.</u></font></H3>
</div>
<p align="justify">Традиционно все породы собак делятся на три группы: служебные, охотничьи, декоративные.</p>
<div align="center">
<H4> <font color="#008000" face="Verdana"><u>Служебные собаки</u></font></H4>
</div>
<p>
<ul>
<li>немецкая овчарка
<li>кавказская овчарка
<li>среднеазиатская овчарка
<li>южнорусская овчарка
<li>шотландская овчарка (колли)
<li>ротвейлер
<li>русский чёрный терьер
<li>доберман
<li>московская сторожевая
<li>боксёр
<li>дог
</ul>
</p>
<div align="center">
<H4> <font color="#008000" face="Verdana"><u>Охотничьи собаки</u></font></H4>
</div>
<p>
<ul>
<li>сибирская лайка
<li>афганская борзая
<li>миттельшнауцер
<li>спаниель
<li>такса
<li>жёсткошерстный фокстерьер
</ul>
</p>
<div align="center"><H4> <font color="#008000" face="Verdana"><u>Декоративные собаки</u></font></H4>
</div>
<p>
<ul>
<li>пудель
<li>чау-чау
<li>французский бульдог
<li>карликовый пинчер
<li>пекинес
<li>японский хин
<li>мальтийская болонка
</ul>
</p>
</font>

</td>
……

Сохраните документ, обновите страницу в браузере. Вот, что должно получиться:

Уроки html для начинающих
Рис. 30

У тэгов <li>, <ul> и <ol> есть атрибут type, который отвечает за стиль элемента списка, визуально и в виде кода это выглядит так:

  • По умолчанию - <li type="disk">
  • Полый кружок - <li type="circle">
  • Квадрат - <li type="square">

 

Можете самостоятельно ввести эти атрибуты как отдельно для каждого тега <li>, так и для всего списка в целом. А так же посмотреть, что получится, если вместо тегов <ul>…</ul> поставить <ol>... </ol>.

Для тега <ol>... </ol> также может употребляться атрибут type. У атрибута type в упорядоченных списках возможны следующие значения:

1

арабские цифры (по умолчанию)

1, 2, 3, ...

a

буквы нижнего регистра

a, b, c, ...

A

буквы верхнего регистра

A, B, C, ...

i

римские цифры в нижнем регистре

i, ii, iii, ...

I

римские цифры в верхнем регистре

I, II, III, ...

Если ввести такой код:

<ol type="I">
<li>Сделать то
<li>Сделать это
<li>Совершить подвиг
<li>Пойти туда-то
</ol>

- получаем:

  • Сделать то
  • Сделать это
  • Совершить подвиг
  • Пойти туда-то

 

Предлагаю потренироваться задавать разные маркеры для списков самостоятельно.

Успехов и до встречи на следующем уроке >>>

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

Подпишитесь на рассылку
"Вокруг Сайта "
и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта


Узнать подробней о рассылке "Вокруг Сайта" >>






PHP-песочница
Подписаться письмом



Карта
rss
Карта