Створення списків в HTML

Категорії статей: HTML ; 11.07.2009

На сторінці веб-сайту можна розташувати маркіровані і нумеровані списки. Для створення маркірованого списку застосовується тег <ul> із закриваючим тегом </ul>. Весь вміст, поміщений цими тегами, вважається маркірованим списком, при цьому, кожен елемент списку має бути позначений тегом <li> із закриваючим тегом </li>. Хоча в HTML можна і не вказувати закриваючий тег </li>, але для xhtml він обов'язковий. Наприклад

Код
Сьогодні я їв з'їв:
<ul>
<li>2 котлети</li>
<li>багато бульби</li>
<li>салат з огірків</li>
</ul>

Отримаємо в браузері:

Сьогодні я їв з'їв:
  • 2 котлети
  • багато бульби
  • салат з огірків

Для організації нумерованого списку на веб-сторінці потрібно використовувати тег <ol> із закриваючим тегом </ol>. Елементи списку знову ж таки створюються тегом <li>(</li>). Наприклад

Код
Сьогодні я випив:
<ol>
<li> Чай </li>
<li> Літр Живчика </li>
<li> 6 літрів пива </li>
</ol>

Отримаємо в браузері:

Сьогодні я випив:
  1. Чай
  2. Літр Живчика
  3. 6 літрів пива

Нумеровані і маркіровані списки в більшості браузерів виділяються невеликим відступом. Можна робити вкладені списки, використовуючи все ті ж теги, просто помістити новий список усередині вже початого списку. Причому схема розташування тегов списків вийти приблизно наступна

Код
<ul>
<ul>
<ul>
</ul>
</ul>
</ul>

Наприклад

Код
Процесс викурювання трьох сигарет Winston Light
<ol>
<li> сигарета 1 </li>
<li> сигарета 2 </li>
<ul>
<li>намагався прикурити - спроба 1</li>
<li>намагався прикурити - спроба 2</li>
<li>намагався прикурити - спроба 3</li>
</ul>
</li>
<li> сигарета 3 </li>
</ol>

Отримаємо в браузері:

Процесс викурювання трьох сигарет Winston Light
  1. сигарета 1
  2. сигарета 2
    • намагався прикурити - спроба 1
    • намагався прикурити - спроба 2
    • намагався прикурити - спроба 3
  3. сигарета 3

Можна задати вигляд маркера, який відображуватиметься спочатку кожного елементу атрибутом type тега <ul>. Атрибут type може набувати наступних значень:

  • disc - маркер буде у вигляді замальованного кружка;
  • square - маркер набере вигляду квадрата;
  • circle - маркер набере вигляду не замальованного кола.

Наприклад

Код
<ul type="square">

Можна задати типа нумерації елементів нумерованого списку атрибутом type тега <ol>. За умовчанням (атрибут type не вказаний) нумерація елементів відбувається арабськими цифрами, також нумерація йтиме арабськими цифрами, якщо вказати як значення атрибуту type цифру "1". Якщо привласнити атрибуту type значення "i", то нумерація відбуватиметься римськими цифрами (з використанням рядкових букв). Якщо привласнити атрибуту type значення "I", то нумерація відбуватиметься римськими цифрами (з використанням прописних букв). Якщо привласнити атрибуту type значення "a", то нумерація відбуватиметься рядковими латинськими буквами. Якщо привласнити атрибуту type значення "A", то нумерація відбуватиметься прописними латинськими буквами.

Так само для нумерованого списку можна задати початкове значення, з якого буде продовжена нумерація елементів списку атрибутом start тега <ol>, наприклад

Код
<ol type="a" start="5">

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.37MB | 0.02Sec ad Google