Створення веб-сторінок Одеська школа 27 Урок 3

Урок 3

Списки

Для подання тексту в структурованому вигляді, коли кожен абзац виділено за допомогою графічної позначки або номера, призначені списки.

Теги

<ol> обов'язковий парний йому </ol> - створення нумерованого списку

<ul> обов'язковий парний йому </ul> - створення маркерованого списку

<li> НЕобов'язковий парний йому </li> - створення ЕЛЕМЕНТУ нумерованого або маркерованого списку

Нумеровані списки

Для створення нумерованого списка служить тег <ol> (від ordered list) та обов'язковий парний йому </ol>

Допускається вкладення нумерованого списка в списки другого виду

Атрибути

type Тип маркера

A	Великі англійські літери
a	Малі англійські літери
I	Великі римскі цифри
i	малі римскі цифри
1	Арабські цифри (за замовчуванням)

start

Початкове значення для нумерованого списка при використанні арабських цифр

title

Спливаюча підказка

Наприклад

1. Іван Франко
2. Тарас Шевченко
3. Леся Українка
4. Павло Загребельний
5. Олесь Гончар

А так виглядає сам HTML-код.

<ol type=1 title="Top 5">
<li> Іван Франко
<li> Тарас Шевченко
<li> Леся Українка
<li> Павло Загребельний
<li> Олесь Гончар
</ol>

Маркеровані списки

Для створення маркерованого списка служить тег <ul> (від unordered list) та обов'язковий парний йому </ul>

Допускається вкладення нумерованого списка в списки другого виду

Атрибути

type Тип маркера

disk	Замальований кружок. За замовчуванням
circle	Незамальований кружок
square	Квадратик

title

Спливаюча підказка

Наприклад

• Іван Франко
• Тарас Шевченко
• Леся Українка
• Павло Загребельний
• Олесь Гончар

А так виглядає сам HTML-код.

<ul type=square title="Top 5">
<li> Іван Франко
<li> Тарас Шевченко
<li> Леся Українка
<li> Павло Загребельний
<li> Олесь Гончар
</ul>

Наприклад

• Іван Франко
  1. Каменярі
  2. Борислав Сміється
  3. Захар Беркут
• Тарас Шевченко
  1. Сон
  2. Катерина
  3. Заповіт
• Леся Українка
  1. Лісова Пісня
  2. Камінний господар
  3. Бояриня
• Павло Загребельний
  1. Роксолана
  2. Я, Боган
  3. Думки на розхрист
• Олесь Гончар
  1. Тронка
  2. Прапороносці
  3. Собор

Сам HTML-код.

<ul type=square title="Українські літератори та їх твори">
<li> Іван Франко
        <ol>
        <li>Каменярі
        <li>Борислав Сміється
        <li>Захар Беркут
        </ol>
<li> Тарас Шевченко
        <ol>
        <li>Сон
        <li>Катерина
        <li>Заповіт
        </ol>
<li> Леся Українка
        <ol>
        <li>Лісова Пісня
        <li>Камінний господар
        <li>Бояриня
        </ol>
<li> Павло Загребельний
        <ol>
        <li>Роксолана
        <li>Я, Боган
        <li>Думки на розхрист
        </ol>
<li> Олесь Гончар
        <ol>
        <li>Тронка
        <li>Прапороносці
        <li>Собор
        </ol>
</ul>

Завдання

1. Створіть HTML-сторінку за зразком поданим на Рис. 1 Збережіть у свою папку у файл з іменем List.html

2. Змініть файл List.html відповідно до Рис. 2. Для зміни кольору тексту використайте тег <font> (див. Урок 2)

3. Створіть HTML-сторінку за зразком поданим на Рис. 3 Збережіть у свою папку у файл з іменем Sesons.html