Списки в HTML

Raisa Kravets -

Списки часто використовуються в різних документах. Іноді, щоб зробити список, користувач просто нумерує рядки тексту. Такий підхід не є хорошим, так як в документі відсутня логічна сутність «список». 

ТегОпис
<ol>Визначає впорядкований список
<ul>визначає неупорядкований список
<li>Визначає пункт списка
<dl>Визначає список визначень
<dt>Визначає пункт списка визначень
<dd>Визначає опис  пункта списка визначень

 Невпорядковані списки

У HTML існує сімейство тегів для створення списків: невпорядкованих, упорядкованих і списків визначень. У наступних завданнях ми будемо тренуватися працювати з ними.

Невпорядковані (або марковані) списки створюються за допомогою тега <ul>, який може містити в собі теги <li>, що позначають «елемент списку»

Тег <ul> може мати атри­бут type, який визначає форму позначки. Цей атрибут набуває таких значень:

Тип спискуКод HTMLПриклад
Список з маркерами у вигляді кола<ul type = "disc">
    <li> ... </li>
</ul>
Список з маркерами у вигляді окружнoсті<ul type = "circle">
    <li> ... </li>
</ul>
Список з квадратними маркерами<ul type = "square">
    <li> ... </li>
</ul>

Впорядковані списки

Впорядкований список також є списком елементів . Елементи списку маркуються за допомогою чисел або букв.

Впорядкований список починається з тега <ol> . Кожен елемент списку починається з тега <li>/

Якщо не вказувати ніяких додаткових атрибутів і просто написати тег <ol>, то за замовчуванням застосовується список з арабськими числами (1, 2, 3, ...).

В нумерованому списку також додаються автоматичні відступи зверху, знизу і зліва від тексту.

При нумерації елементів можуть використовуватись наступні значення:

    • арабські числа (1, 2, 3, ...);
    • великі латинські літери (A, B, C, ...);
    • малі латинські букви (a, b, c, ...);
    • прописні римські числа (I, II, III, ...);
    • малі римські числа (i, ii, iii, ...).

Для вказівників типу нумерованого списку застосовується атрибут type тега <ol>.

Типи нумерованого списку

Тип спискуКод HTMLПриклад
Арабські числа<ol type = "1">
    <li>...</li>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Прописні букви латинського алфавіту<ol type = "A">
    <li>...</li>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Малі літери латинського алфавіту<ol type = "a">
    <li>...</li>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Римські числа в верхньому регістрі<ol type = "I">
    <li>...</li>
</ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Римські числа в нижньому регістрі<ol type = "i">
    <li>...</li>
</li>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
Щоб почати список з певного значення, використовується атрибут start тега <ol>. При цьому не має значення, який тип списку встановлений за допомогою type, атрибут start однаково працює і з римськими, і з арабськими числами. 

У наступному прикладі показано створення списку з використанням римських цифр у верхньому регістрі, який починається з восьми.


Список визначень 

Cкладається з двох елементів − терміну та його визначення. Сам список задається за допомогою контейнера <dl>, термін  −  тегом <dt>, а його визначення  −  за допомогою тега <dd>. Використання тегів для створення списку визначень продемонстровано в наступному прикладі.

Список визначень добре підходить для розшифровки термінів, створення глосарію, словника, довідника тощо. У наступному прикладі показано одне з можливих використань цього виду списку.

Приклад cтворення списку визначень

Багаторівневі списки

 Cтворювати досить просто. Досить лише вставити новий список перед закриваючим тегом </li> того елемента, у якого є підпункти.

Приклад списку з двома рівнями





ЗАВДАННЯ 1:

Вписати в код файлу вказану інформацію:

ЗАВДАННЯ 2

Створити у свої папці файл list_task.html такого зразка:

Текст для файлу:

Що потрібно знати, щоб створювати сайти:

Основи Web-дизайну:

HTML  CSS Web-програмування: PHP SQL JavaScript jQuery Flash SEO

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

Види скриптів

Для цього пишуться скрипти (англ. Script - «сценарій») - програми, які дозволяють реагувати на дії користувача. Скрипти бувають двох видів:

ті, які виконуються на сервері, а результат їх виконання приходить в браузер до користувача вже в готовому вигляді. Це скрипти, написані на мові PHP. На ньому пишуться CMS-ки - системи управління контентом.

ті, які виконуються прямо в браузері користувача. Це скрипти, написані на мові JavaScript. Вони найчастіше використовуються для, того щоб зробити сторінку більш зручною і красивою.

Тестове завдання: 

вписати в кутових дужках теги замість слів

Tags:
Нові Старіші