У будь-яких НТМL-документах для покращення сприйняття тексту можна використовувати три види списків:
невпорядкований (маркований);
упорядкований (нумерований);
список визначень.
У невпорядкованому списку для виділення елементів використовуються певні позначки (крапки, квадрати тощо). Починається такий список із тегу <UL>, а закінчується — </UL>. Кожний елемент списку починається з тегу <LI>. Тег <UL> може мати атрибут TYPE, який визначає форму позначки. Цей атрибут набуває таких значень:
disk — зафарбоване коло;
circle — коло;
square — маленький чорний квадрат (<ul style="list-style-type:square;"> )
В упорядкованому списку всі елементи пронумеровані. Починається список із тегу <OL>, а закінчується — </OL>. Кожний елемент такого списку також починається з тегу <LI>. Тег <OL> може мати атрибут TYPE, який визначає тип нумерації. Цей атрибут набуває таких значень:
А — велика літера;
а — мала літера <ol type="a">
І — велика римська цифра;
і — мала римська цифра;
1 — арабська цифра.
У разі потреби за допомогою атрибута START можна задати відмінний від одиниці початковий номер елемента, наприклад <OL TYPE="I" START="5">.
Тип маркера вказується у відкриваючому тегу контейнера списку: <UL TYPE=SQUARE>. Спосіб нумерування елементів списку вказує атрибут тегу. Допускається довільне вкладення списків, наприклад, одним із пунктів нумерованого списку може бути ненумерований список (або ненумерований список може містити ненумерований список з іншими маркерами).
Зверніть увагу на те, що за допомогою тегу <BASEFONT> для всього документа призначено розмір шрифту 6, а за допомогою тегів <FONT> визначено колір шрифту для кожного елемента списку.
Парний тег-контейнер для реалізації навігації по сайту — <nav>.
У найпростішій таблиці інформація розміщена у комірках, утворених у результаті поділу прямокутника на стовпці та рядки. Для створення таблиці використовують чотири елементи.
Таблицю описують за допомогою тегів <TABLE>...</TABLE>. Кожний рядок таблиці починається з тегу <TR> і закінчується тегом </TR>. Якщо рядок містить заголовки стовпців таблиці, то використовують теги <ТН> і </ТН>, якщо ж дані — то <TD> і </TD>.
У HTML-документах таблицю заповнюють зліва направо, комірку за коміркою, починаючи з лівого верхнього кута і закінчуючи правим нижнім.
За умовчанням таблиця має невидимі межі комірок. Для того щоб зробити їх видимими, використовують атрибут BORDER, який має цілочислове значення, що визначає товщину рамки в пікселах, наприклад <TABLE BORDER=5>.
У тегах <ТН> та <TD>: для:
для об'єднання рядків служить атрибут rowspan= " число рядків"
для об'єднання стовпців служить атрибут colspan=" число стовпців"
Гіперпосилання
Для організації гіперпосилань використовується тег <a>, який має обов'язковий атрибут href.
Гіперпосилання бувають зовнішні та внутрішні.
Зовнішні гіперпосилання. Для посилання на іншу сторінку використовують парний тег <a>...</a>. Тег має обов’язковий атрибут href, значенням якого є назва сторінки з розширенням .html.
Між відкриваючим і закриваючим тегами розміщується посилання на ресурс. Натиснувши на нього, користувач може переходити до потрібної сторінки:
<а href= "http://nvk12.rv.ua/"> Сайт нашої школи</а>
!!!Використовуйте target="_blank", щоб відкрити пов’язаний документ у новому вікні чи вкладці браузера:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Зовнішні гіперпосилання використовуються для:
переходу на інші сайти
переходу між сторінками сайту <a href="index.html" > Головна </a>
відкривання або скачування документів та програм <a href="doc/history.docx > Реферат з історії </a>
телефонних дзвінків <a href="tel:+380967777777">+38 096 777 77 77</a>
!!!Використовуйте веб-сайт для вивчення веб-технологій в Інтернеті, який містить навчальні посібники для вивчення HTML, CSS, JavaScript тощо:
Увага! Під час роботи з комп'ютером дотримуйтеся вимог безпеки життєдіяльності та санітарно-гігієнічних норм.
Завдання 1:
Завантажте Notepad++. Створіть новий файл list1.html і збережіть його у власній папці.
Пропишіть код, забезпечте відображення списків згідно зразка.
3. Додайте до коду маркований список "Кольори веселки" згідно зразка
4. Збережіть файл у власній папці.
Завдання 2:
Створіть файл list2.html, збережіть у власній папці. Пропишіть код для відображення списків згідно зразка.
Завдання 3: Створіть файл table.html, збережіть у власній папці. Пропишіть код для відображення таблиці згідно зразка (додайте відповідні теги для створення структури веб-сторінки: <html> , <head>, <body>...)
Завдання 4: Створіть файл link.html, збережіть у власній папці. Пропишіть код для відображення гіперпосилань.