Основи HTML. Списки та гіперпосилання

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

Тег <ul> встановлює маркований список. Кожен елемент списку повинен починатися з тега <li>. Якщо до тегу <ul> застосовується таблиця стилів, то елементи <li> успадковують ці властивості.

Синтаксис:

<ul>

<li>Елемент маркованого списку</li>

</ul>

Атрибути:

type – встановлює тип маркера

Синтаксис:

<ul type="disc | circle | square">...</ul>

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

Тег <ol> встановлює нумерований список. Кожен елемент списку повинен починатися з тега <li>. Якщо до тегу <ol> застосовується таблиця стилів, то елементи <li> успадковують ці властивості.

Синтаксис:

<ol>

<li>Елемент нумерованого списку</li>

<li>Елемент нумерованого списку </li>

</ol>

Атрибути:

type – встановлює тип маркера

Синтаксис:

<ol type="A | a | I | i | 1">...</ol>

reversed - змінює нумерацію в списку на зворотний порядок, замість 1,2,3 буде виводитися 3,2,1.

Синтаксис:

...

</ol>

start – встановлює номер, з якого буде починатися перелік. При цьому не має значення, який тип списку встановлений за допомогою type, атрибут start однаково працює і з римськими і з арабськими числами.

Синтаксис:

<li>Елемент списку</li>

</ol>

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

Для організації багаторівневого списку достатньо один список помістити в середину іншого.

Наприклад:

<ol>

<li>Понеділок</li>

<ul>

<li>Математика</li>

<li>Фізика</li>

<li>Хімія</li>

<li>Фізкультура</li>

</ul>

<li>Вівторок</li>

<li>Середа</li>

<li>Четвер</li>

<li>П’ятниця</li>

</ol>

Гіперпосилання

Тег <a> є одним з важливих елементів HTML і призначений для створення посилань. Залежно від присутності атрибутів name або href тег <a> встановлює посилання або якір. Якорем називається закладка всередині сторінки, яку можна вказати в якості мети посилання. При використанні посилання, яка вказує на якір, відбувається перехід до закладки всередині веб-сторінки.

Для створення посилання необхідно повідомити браузеру, що є посиланням, а також вказати адресу документа, на який слід зробити посилання. Як значення атрибута href використовується адреса документа (URL, Universal Resource Locator, універсальний покажчик ресурсів), на який відбувається перехід. Адреса посилання може бути абсолютною і відносною. Абсолютні адреси працюють по всіх усюдах незалежно від імені сайту або веб-сторінки, де прописане посилання. Відносні посилання, як випливає з їх назви, побудовані щодо поточного документа або кореня сайту.

Синтаксис:

Атрибути:

coords - Встановлює координати активної області.

download - Пропонує завантажити вказаний по посиланню файл.

href - Задає адресу документа, на який слід перейти.

hreflang - Ідентифікує мову тексту за посиланням.

name - Встановлює ім'я якоря всередині документа.

shape - Задає форму активної області посилання для зображень.

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

target - Ім'я вікна або фрейму, куди браузер буде завантажувати документ.

title - Додає підказку до тексту посилання.

Додаткові матеріали:

Перевірка засвоєння матеріалу:

Завдання:

1. Опрацювати статтю та законспектувати основні моменти.

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

Хід виконання:

Створити сторінку у власній папці з назвою timetable_list.html
У створеному документі створити структуру пустої веб сторінки.
Використовуючи теги списків, створити розклад уроків на тиждень.
Використовуючи атрибут type задати відповідний вигляд нумерації.
Додати над списком відповідний заголовок.
Використовуючи атрибут створення гіперпосилань <a> прив’язати до заголовку посилання на раніше створену веб сторінку timetable.html, яка містить розклад уроків у вигляді таблиці (обидва файли веб сторінок, обов'язково повинні зберігатися в одній папці!!!).
Зберегти створений документ та перевірити його працездатність.

3. Створену папку з двома веб сторінками заархівувати доступним архіватором та переслати на перевірку використовуючи E-mail.