Реальный пиарHTMLОбщее представление → Основы HTML для начинающих. Урок 3 (Списки)

Основы HTML для начинающих. Урок 3 (Списки)

html 5

Всем привет! Давно уже не писал в блог, поэтому сразу переходим к делу. В третьем уроке по изучению языка HTML речь пойдет о списках.

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

В HTML списки бывают двух видов:

— нумерованные, где идет перечисление цифрами;

— и маркированные (выделяются посредством различных точек, кружочков, квадратиков и т.д.)

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

При создании нумерованного списка цифры проставляются сами собой. Вот как это выглядит в коде HTML вашей странички:
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.</li>
<li>Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.</li>
<li>Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.</li>
<li>Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.</li>
</ol>

Как видите, за создание списков в HTML отвечает тег <ol>, это своего рода контейнер, в который помещается дополнительный тег <li>, который, собственно, и отвечает за то, где должен начинаться и заканчиваться тот или иной элемент нумерованного списка.

В браузере наш список будет выглядеть так:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.
Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.

Маркированный список

Данный тип списка практически идентичен предыдущему, за исключением лишь того, что в данном случае элементы списка заключены в тег <ul>, а не в <ol>, как в случае с нумерованным списком. Вот как это выглядит в коде HTML:
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.</li>
<li>Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.</li>
<li>Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.</li>
<li>Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.</li>
</ul>

И на вашей страничке в браузере:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.
Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.
Атрибут type="..." в нумерованных списках

Отображение нумерованных списков латинскими буквами

Также тег нумерованного списка <ol> имеет различные атрибуты, к примеру, атрибут type="...". Если вы хотите чтобы вместо цифр отображались латинские буквы, то в данном атрибуте следует прописать латинскую букву «a» (или заглавную латинскую букву «A», если хотите чтобы список формировался заглавными буквами):

HTML-код

<ol type="a">

<li>...</li>
<li>…</li>
<li>...</li>
<li>…</li>

</ol>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.
Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.

Отображение списков римскими цифрами

В данном случае в атрибуте type="..." прописываете букву «i» (или «I», чтобы списки отображались заглавными цифрами):

HTML-код

<ol type="i">

<li>...</li>
<li>…</li>
<li>...</li>
<li>…</li>

</ol>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.
Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.
Атрибут start="..."

К примеру, вам не нужно чтобы ваш список начинался с цифры «1», с помощью атрибута start="..." вы можете задать отображение списка с той цифры, которая вам нужна, допустим, с цифры «5»:

HTML-код

<ol start="5">

<li>...</li>
<li>…</li>
<li>...</li>
<li>…</li>

</ol>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.
Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.
Атрибут value="..."

Чтобы отобразить часть списка с того числа, которое вам нужно, в тег <li> следует прописать атрибут value="...". К примеру, мы хотим, чтобы после «2» шло «20» «21» и т.д.:

HTML-код

<ol>

<li>...</li>
<li>…</li>
<li value="20">...</li>
<li>…</li>

</ol>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.
Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.
Атрибут type="..." в маркированных списках

В маркированных списках с помощью атрибута type="..." можно изменять форму маркеров. К примеру, для отображения квадратных маркеров в атрибуте type="..." следует прописать значение «square»:

<ul type="square">

<li>...</li>
<li>…</li>
<li>...</li>
<li>…</li>

</ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.
Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.

Для того чтобы маркированный список отображался с прозрачными маркерами, в type="..." пропишите «circle»:

<ul type="circle">

<li>...</li>
<li>…</li>
<li>...</li>
<li>…</li>

</ul>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
Praesent lobortis ornare felis, in fringilla risus euismod ut. Nunc commodo, nunc vel blandit laoreet, arcu sem pulvinar urna, at rutrum tortor ante ut tellus.
Donec ullamcorper bibendum pretium. Phasellus velit elit, ultricies eu lobortis at, ultrices quis diam. Ut rhoncus pulvinar egestas. Praesent ullamcorper enim vitae elit tempus scelerisque.


Источник: http://ajzetullin.com

Рекомендуем



Скобка, скобка, тег внутри - получился... WWW! Сам по себе язык SGML не получил сколько-нибудь заметного распространения и остался бы всего лишь изящной игрушкой, боксерской грушей для пытливого ума - если бы в науке не восторжествовал вездесущий принцип разделения труда


Основы HTML для начинающих. Урок 2 (Текст и заголовки) Теперь давайте поместим на нашей web-страничке какой-нибудь текст, ведь для этого мы ее и создавали, чтобы размещать свои мысли и статьи на ней


Основные теги элементов веб-страницы В этом посту я постараюсь поставить вас на путь истинный и раскрою для вас секрет использования тегов для построения сайтов