Отправляет email-рассылки с помощью сервиса Sendsay

Как быстро и легко создать шикарный сайт.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Как начать проект онлайн и не тормозить!" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Август 2011   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
iappc2011vlad@list.ru

Статистика

260 подписчиков
-1 за неделю
←   Все выпуски   →

Как быстро и легко создать шикарный сайт. HTML для начинающих. Урок 3


Как быстро и легко создать сайт.
Тема выпуска: HTML для начинающих. Урок 3

 Здравствуйте!

В третьем уроке по изучению языка 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>, который, собственно, и отвечает за то, где должен начинаться и заканчиваться тот или иной элемент нумерованного списка.

В браузере наш список будет выглядеть так:

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
2. Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
3. 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.
4. 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>

a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.

b. Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.

c. 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.

d. 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>

i. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
ii. Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
iii. 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.
iv. 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>

5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
6. Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
7. 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.
8. 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>

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu felis, gravida ac condimentum et, laoreet eu mauris.
2. Vivamus varius, augue vitae tincidunt laoreet, lectus erat ullamcorper tortor, ac convallis mi nibh sit amet justo.
20. 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.
21. 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.

На этом всё, до встречи!
В избранное