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

Журнал Начинающего ВебМастера

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

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

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

←   Сентябрь 2010   →
 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
Автор
Lord Expert

Статистика

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

Журнал Начинающего Программиста

ОСНОВЫ РАБОТЫ С HTML                                   

Лекция 5. Списки HTML
 
Этот урок посвящен созданию списков, их оформлению и упорядочению.
 
HTML поддерживает упорядоченные списки, неупорядоченные списки, и списки определений.
Отличаются эти разновидности списков лишь способом оформления. Перед пунктами
неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики
и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.
 
Неупорядоченные списки

Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью
специальных знаков (обычно небольшой черный круг).
Неупорядоченный список начинается с тега  <ul> . Каждый элемент списка начинается с тега
<li>. 

<html>
<body>
 
<h4>Неупорядоченный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
</ul>
 
</body>
</html>
 
Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки,
другие списки, и т.д.
 
Упорядоченные списки

Упорядоченный список также является списком элементов. Элементы списка маркируются с
помощью чисел или букв.
Упорядоченный список начинается с тега <ol> . Каждый элемент списка начинается с тега  <li>.  У
тега  <ol>  может быть два атрибута start (определяет первое число, с которого начинается
нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:
∙     "A" - заглавные буквы A, B, C ...
∙     "a" - строчные буквы a, b, c ...
∙     "I" - большие римские числа I, II, III ...
∙     "i" - маленькие римские числа i, ii, iii ...
∙     "1" - арабские числа 1, 2, 3 ...
 
<html>
<body>
 
<h4>Упорядоченный список:</h4>
<ol>
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
</ol>
 
</body>
</html>
 
Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки,
другие списки, и т.д.
 
Списки определений

Список определений не является списком элементов. Это список терминов и определений
терминов.
Список определений начинается с тега  <dl>.  Каждый термин списка определений начинается с
тега  <dt>.  Каждое определение списка начинается с тега  <dd>.
 
<html>
<body>
 
<dl>
<dt>элемент 1</dt>
<dd>описание элемента 1</dd>
<dt>элемент 2</dt>
<dd>описание элемента 2</dd>
</dl>
 
</body>
</html>
 
Внутри определения списка определений (тег  <dd> ) можно помещать параграфы, переносы
строк, изображения, ссылки, другие списки, и т.д.
 
Дополнительные примеры

Различные типы упорядоченных списков
<html>
<body>
 
<h4>Список проектов с цифрами:</h4>
<ol>
 <li>nextexpert.ru</li>
 <li>forum.nextexpert.ru</li>
 <li>proekt.ru</li>
</ol>  
 ****************************************************************************
<h4>Список с буквами:</h4>
<ol type="A">

<li>proekt.ru</li>
 <li>proekt.ru</li>
 <li>proekt.ru</li>
</ol>  
 ****************************************************************************
<h4>Список с буквами нижнего регистра:</h4>
<ol type="a">
<li>proekt.ru</li>
 <li>proekt.ru</li>
 <li>proekt.ru</li>
</ol>  
 ****************************************************************************
<h4>Список с римскими цифрами:</h4>
<ol type="I">
<li>proekt.ru</li>
 <li>proekt.ru</li>
 <li>proekt.ru</li>
</ol>  
 ****************************************************************************
<h4>Список с римскими цифрами в нижнем регистре:</h4>
<ol type="i">
<li>proekt.ru</li>
 <li>proekt.ru</li>
 <li>proekt.ru</li>
</ol>  
 
</body>
</html>
 
 
Различные типы неупорядоченных списков

<html>
<body>
 
<h4>Список со значком кругом:</h4>
<ul type="disc">
<li>proekt.ru</li>
 <li>proekt.ru</li>
 <li>proekt.ru</li>
</ul>  
 ****************************************************************************
<h4>Список со значком окружностью:</h4>
<ul type="circle">
<li>proekt.ru</li>
 <li>proekt.ru</li>
 <li>proekt.ru</li>
</ul>  
 ****************************************************************************
<h4>Список со значком квадратом:</h4>
<ul type="square">
<li>proekt.ru</li>
 <li>proekt.ru</li>
 <li>proekt.ru</li>
</ul>  
 
</body>
</html>
 
Вложенный список
<html>
<body>
 
<h4>Вложенный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
    <ul>
    <li>элемент 2.1</li>
    <li>элемент 2.2</li>
    </ul>
  <li>элемент 3</li>
</ul>
 
</body>
</html>
 
<html>
<body>
****************************************************************************
<h4>Вложенный список:</h4>
<ul>
  <li>элемент 1</li>
  <li>элемент 2</li>
    <ul>
    <li>элемент 2.1</li>
    <li>элемент 2.2</li>
      <ul>
      <li>элемент 2.2.1</li>
      <li>элемент 2.2.2</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>элемент 3</li>
</ul>
 
</body>
</html>
 
 
Список определений

<html>
<body>
 
<h4>Список определений:</h4>
<dl>
  <dt>элемент 1</dt>
  <dd>описание элемента 1</dd>
  <dt>элемент 2</dt>
  <dd>описание элемента 2</dd>
</dl>
 
</body>
</html>
 
 
 Теги списков



Тег Описание
<ol> Определяет упорядоченный список
<ul> Определяет неупорядоченный список
<li> Определяет элемент списка
<dl> Определяет список определений
<dt> Определяет термин определения
<dd> Определяет описание определения
<dir> Не рекомендуется. Используйте вместо этого  <ul>
<menu> Не рекомендуется. Используйте вместо этого  <ul>


 2010 LORD-EXPERT     ∙ Forum   ∙ Site

Архив рассылки




Практический обучающий видео-курс
"Как сделать Flash-сайт за 120 минут!"
Узнать подробнее


В избранное