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.
Удачі!

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

Залишити відповідь Скасувати коментар

Останні записи у цій категорії

Популярні записи