HTML с нуля: Создание списков на HTML. Урок №8 Overcod.net

HTML с нуля: Создание списков на HTML. Урок №8

Продолжаем изучать основы HTML.
В этом уроке я расскажу, как создавать маркированные и нумерованные списки. Не пропустите этот урок! Если вы будете уметь создавать списки, то сможете красиво оформлять веб-страницы, например, настроить меню сайта.

Создание маркированного списка в HTML
Чтобы создать маркированный список на HTML-странице, нужно использовать такие теги:

<ul>
  <li>текст №1</li>
  <li>текст №2</li>
</ul>

Пояснение:
<ul></ul> — определяет маркированный список.
<li></li> — определяет пункты маркированного списка.

Пример:

<html>
<head>
  <title>Создание маркированного списка в HTML - overcod.net</title>
</head>
<body>
  <ul>
    <li>текст №1</li>
    <li>текст №2</li>
  </ul>
</body>
</html>

Результат будет таким:

текст №1
текст №2

Перед каждым элементом появятся закрашенные кружочки.

Атрибуты маркированного списка
Если к тегу <ul> добавить атрибут «type» со значением «circle», то вместо закрашенных кружочков вы увидите незаполненные кружочки:

<ul type="circle">

Пример:

<html>
<head>
  <title>Создание маркированного списка в HTML - overcod.net</title>
</head>
<body>
  <ul type="circle">
    <li>текст №1</li>
    <li>текст №2</li>
  </ul>
</body>
</html>

Результат будет таким:
○ текст №1
○ текст №2

Если добавить атрибут «type» со значением «square», вместо кружочков вы увидите закрашенные квадратики:

<ul type="square">

Пример:

<html>
<head>
  <title>Создание маркированного списка в HTML - overcod.net</title>
</head>
<body>
  <ul type="square">
    <li>текст №1</li>
    <li>текст №2</li>
  </ul>
</body>
</html>

Результат будет таким:
▪ текст №1
▪ текст №2

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

Пример:

<html>
<head>
  <title>Создание маркированного списка в HTML - overcod.net</title>
</head>
<body>
  <ul>
    <li>текст №1</li>
    <li>текст №2
      <ul>
        <li>текст №3</li>
        <li>текст №4</li>
      </ul>
    </li>
    <li>текст №5</li>
  </ul>
</body>
</html>

Результат будет таким:

текст №1
текст №2
- текст №3
- текст №4
текст №5

Создание нумерованного списка в HTML
Чтобы создать нумерованный список на HTML-странице, используйте такие теги:

<ol>
  <li>текст №1</li>
  <li>текст №2</li>
</ol>

Пояснение:
<ol></ol> — определяет нумерованный список.
<li></li> — определяет пункты нумерованного списка.

Пример:

<html>
<head>
  <title>Создание нумерованного списка в HTML - overcod.net</title>
</head>
<body>
  <ol>
    <li>текст №1</li>
    <li>текст №2</li>
  </ol>
</body>
</html>

Результат будет таким:

текст №1
текст №2

Атрибуты нумерованного списка
Если добавить атрибут «start» со значением «5», то нумерация начнется с указанного числа:

<ol start="5">

Пример:

<html>
<head>
  <title>Создание нумерованного списка в HTML - overcod.net</title>
</head>
<body>
  <ol start="5">
    <li>текст №1</li>
    <li>текст №2</li>
  </ol>
</body>
</html>

Результат будет таким:
5. текст №1
6. текст №2

Если добавить атрибут «type» со значением «A», то вместо цифр будут большие буквы:

<ol type="A">

Пример:

<html>
<head>
  <title>Создание нумерованного списка в HTML - overcod.net</title>
</head>
<body>
  <ol type="A">
    <li>текст №1</li>
    <li>текст №2</li>
  </ol>
</body>
</html>

Результат будет таким:
A. текст №1
B. текст №2

Если добавить атрибут «type» со значением «a», то вместо больших букв будут маленькие:

<ol type="a">

Пример:

<html>
<head>
  <title>Создание нумерованного списка в HTML - overcod.net</title>
</head>
<body>
  <ol type="a">
    <li>текст №1</li>
    <li>текст №2</li>
  </ol>
</body>
</html>

Результат будет таким:
a. текст №1
b. текст №2

Создание списка определений
Чтобы создать список определений на HTML-странице, используйте такие теги:

<dl>
  <dt>1. HTML</dt>
  <dd>Гипертекстовый язык разметки</dd>
  <dt>2. CSS</dt>
  <dd>Каскадные таблицы стилей</dd>
</dl>

Пояснение:
<dl></dl> — определяет список определений.
<dt></dt> — определяет термины.
<dd></dd> — определяет описания терминов.

Пример:

<html>
<head>
  <title>Создание списка определений в HTML - overcod.net</title>
</head>
<body>
  <dl>
    <dt>1. HTML</dt>
    <dd>Гипертекстовый язык разметки</dd>
    <dt>2. CSS</dt>
    <dd>Каскадные таблицы стилей</dd>
  </dl>
</body>
</html>

Результат будет таким:

На сегодня это все! Подписывайтесь на обновления моего блога! Не пропустите новые уроки по основам HTML.
Удачи!