Списки в HTML-документах
На этой странице мы разберемся с очень важной частью HTML-языка — со списками. При работе над сайтами списками вы будете пользоваться постоянно. Пэтому уделите этому вопросу достаточно внимания.
Списки в HTML бывают двух типов: нумерованные и ненумерованные. И, как вы понимаете, перед элементами нумерованных списков ставятся цифры (номера), а перед элементами ненумерованных списков — буллеты (точки, кружочки, квадратики).
Тег <ol> задает нумерованный список. Ненумерованный список задает тег <ul>. Для обозначения элемента списка внутри этих тегов служит тег <li>.
Тег OL
Тег <ol> создает упорядоченный (т.е. нумерованный) список. Закрывающий тег обязателен. Между открывающим и закрывающим тегами должен присутствовать как минимум один элемент <li>.
Атрибуты:
start —задает число, с которого будет начинаться список. По умолчанию — с еденицы.
type —задает стиль маркеров пунктов списка.
Атрибут может иметь значения:
A — заглавные латинские буквы;
a — строчные латинские буквы;
I — большие римские цифры;
i — маленькие римские цифры;
1 — арабские цифры. По умолчанию арабские цифры.
Пример кода:
<p>Чтобы сделать сайт вам необходимо:</p>
<ol type="A">
<li>Выучить HTML.</li>
<li>Выучить CSS.</li>
<li>Познакомиться с PHP.</li>
</ol>
<!--Пример списка с большими римскими цифрами-->
<p>Научиться пользоваться программами:</p>
<ol type="I">
<li>Adobe Dreamweaver.</li>
<li>Adobe Photoshop.</li>
<li>Total Commander.</li>
</ol>
<!--Пример списка не с начала-->
<p>Чтобы сайт приносил доход:</p>
<ol start="2">
<li>Публикуйте полезную для людей информацию.</li>
<li>Пишите уникальный текст.</li>
<li>Почаще пополняйте сайт новым содержимым.</li>
<li>Первый пункт придумайте сами.</li>
</ol>
В браузере увидим:
Чтобы сделать сайт вам необходимо:
- Выучить HTML.
- Выучить CSS.
- Познакомиться с PHP.
Научиться пользоваться программами:
- Adobe Dreamweaver.
- Adobe Photoshop.
- Total Commander.
Чтобы сайт приносил доход:
- Публикуйте полезную для людей информацию.
- Пишите уникальный текст.
- Почаще пополняйте сайт новым содержимым.
- Первый пункт придумайте сами.
Тег UL
Тег <ul> служит для создания ненумерованного списка. Закрывающий тег обязателен. Между тегами должен присутствовать элемент <li>.
Атрибут:
type —задает вид маркеров пунктов списка.
Значения:
disc — точка;
circle — кружочек;
square — квадрат. По умолчанию — disc.
Пример кода:
<li>Кружок. Пункт 1.</li>
<li>Кружок. Пункт 2.</li>
</ul>
<ul type="disc">
<li>Точка. Пункт 1.</li>
<li>Точка. Пункт 2.</li>
</ul>
<ul type="square">
<li>Квадрат. Пункт 1.</li>
<li>Квадрат. Пункт 2.</li>
</ul>
<ul>
<li>По умолчанию. Точка.</li>
</ul>
Вид в браузере:
- Кружок. Пункт 1.
- Кружок. Пункт 2.
- Точка. Пункт 1.
- Точка. Пункт 2.
- Квадрат. Пункт 1.
- Квадрат. Пункт 2.
- По умолчанию. Точка.
Тег LI
Тег <li> служит для обозначения отдельного элемента списка, как нумерованного, так и ненумерованного. Закрывающий тег не обязателен, но желателен.
Атрибут:
value — меняет порядок нумерации элементов списка. Атрибут value применяется только для нумерованных списков, когда тег <li> находится внутри тега <ol>.
Пример:
<ol>
<li>Первый пункт придумайте сами.</li>
<li value="4">Публикуйте полезную для людей информацию.</li>
<li>Пишите уникальный текст.</li>
</ol>
В браузере:
- Первый пункт придумайте сами.
- Публикуйте полезную для людей информацию.
- Пишите уникальный текст.
Еще следует сказать, что допускается вложение одного списка в другой. То есть можно сделать примерно следующее:
- Пункт 1.
- Первый вложенный.
- Второй вложенный.
- Пункт 2.
А код будет выглядеть так:
<ol>
<li>Пункт 1.</li>
<ul>
<li>Первый вложенный.</li>
<li>Второй вложенный.</li>
</ul>
<li>Пункт 2.</li>
</ol>
На этом со списками все. Переходим к работе с изображениями >>
Поиск по сайту