Лекція 17. Списки, параграфи
1. Списки в HTML
В текстових документах використовуються списки (перерахування) елементів різних типів. HTML підтримує списки трьох видів:
- нумеровані списки;
- ненумеровані списки;
- списки-визначення.
Нумеровані списки
Для задання нумерованих списків, тобто таких списків, перед перерахованими елементами яких зазначаються або цифри або букви, використовується у HTML тег-контейнер <ol> ... </ol> (ol - Ordered List, впорядкований список). Він містить два параметри:
type - задає тип нумерації:
- 1 - арабськими цифрами (задається за замовчуванням);
- A - великими латинськими літерами;
- a - малими латинськими літерами;
- I - прописними римськими цифрами;
- i - малими римськими цифрами.
start - задає початок нумерації списку (типово - з першого елемента).
Самі елементи списку вказуються з допомогою тега-контейнера <li> ... </li> (li - List Item, елемент списку). Закриваючий тег </li> можна не виконувати.
Ненумеровані списки
Для задання ненумерованных списків, тобто таких списків, перед кожним перерахованими елементом яких указыватся один і той же знак, використовується у HTML тег-контейнер <ul> ... </ul> (ul - Unordered List, невпорядкований список). Він містить параметр type, значеннями якого є:
- disk - диск (задається за замовчуванням);
- circle коло;
- square - квадрат.
Елементи ненумерованных списків так же, як і елементи нумерованих списків, задаються за допомогою тега-контейнера <li> ... </li>.
Списки-визначення
Для задання списків-визначень використовується у HTML тег-контейнер <dl> . . . </dl> (dl - Defination List, список визначень). Для задання визначень (наприклад, фрукти) використовується тег-контейнер <dt> ... </dt> (dt - Defination Type, тип визначення ). Елементи визначення перераховуються за допомогою тега-контейнера <dd> . . . </dd> (dd - Defination Data, що визначаються дані). Закриваючий тег </dd> можна не виконувати.
2. Форматування тексту
У цьому розділі ми розглянемо базові HTML-елементи, які використовуються для розмітки тексту.
Елементи "Heading" дозволяють вам вказати, що певні частини контенту вашої сторінки є заголовками або підзаголовками. Так само, як у книжці є назва книги, назви розділів і підзаголовки, у HTML-документі це також є. HTML має заголовки шістьох рівнів, <h1>–<h6>, хоча зазвичай використовуються перші 3-4.
<h1>Мій головний заголовок</h1>
<h2>Мій важливий заголовок</h2>
<h3>Мій підзаголовок</h3>
Елемент <p> містить частину тексту, яка становить один абзац. Параграфи використовуються дуже часто, особливо при розмітці звичайного текстового контенту:
<p>Це один параграф.</p>
Посилання дуже важливі — це те, що робить мережу мережею! Щоб додати посилання, потрібно використовувати елемент <a> ("a" скорочено від "anchor" — якір). Щоб перетворити параграф на посилання, робіть так:
Виберіть текст. Ми вибрали "Mozilla Manifesto".
Загорніть цей текст в елемент <a>, отак:
<a>Mozilla Manifesto</a>
Додайте до елементу <a> атрибут href, отак:
<a href="">Mozilla Manifesto</a>
Додайте значення цьому атрибута — адресу посилання:
<a href="https://www.mozilla.org/en-US/about/manifesto/"> Mozilla Manifesto </a>
Не пропускайте частину https:// чи http:// на початку адреси, так званий протокол, інакше результати можуть бути неочікуваними. Після того, як елемент доданий, клікніть на посилання і переконайтеся, що вас відправило туди, куди ви хотіли.