З попереднього практикуму ви вже знаєте, які теги використовуються для створення різних типів списків. Більш детально з цими тегами ви можете ознайомитись у відповідному розділі посібника Основи HTML.
Щоб приступити до роботи
завантажте архів файлуlists.html і розпакуйте завантажений архів. Виконуючи роботу, читайте текст вебсторінки. Адже, як і в попередньому практикумі, тут частково викладено матеріал, який стосується наступної теми.
Відкрийте файл у браузері. Зверніть увагу як відображається вміст веб-сторінки. Деякі фрагменти документу, наприклад, заголовки, вже розмічені раніше вивченими тегами, що відповідно вплинуло на їх вигляд.
Відкрийте файл lists.html у текстовому редакторі. Перегляньте його вміст. Зверніть увагу, які теги вже використані. Перегляньте коментарі до частин контенту, розташованого в <body>.
У цій роботі ми створимо заготовку для майбутньої панелі навігації нашого маленького тренувального сайту, який буде складатись із декількох сторінок.
Розпочніть розмітку тегами маркованого списку. Встановіть курсор на початку рядка за коментарем <!-- майбутня панель навігації, огорніть її в тег <nav> --> і введіть відкриваючий тег <ul>. Щоб не забути закрити контейнер, відразу встановіть курсор у рядку перед коментарем <!-- кінець панелі навігації --> і уведіть закриваючий тег </ul>.
Встановіть курсор на початку рядків списка першого рівня (Знайомство з HTML і CSS та Мультимедіа та гіперпосилання). Відкрийте тег <li>. Закрити цей контейнер необхідно після коментарів <!-- кінець вкладеного списку -->
Розмітьте списки другого рівня. Встановіть курсори після коментарів <!-- вкладений список -->. (Ви вже вмієте вводити один код одночасно у декількох місцях. Якщо ні, поверніться до Практикуму: Структура документа). Натисніть клавішу Enter і введіть тег <ul>. Закрити ці контейнери слід у рядку перед коментарями <!-- кінець вкладеного списку -->.
Нарешті, встановіть курсори перед кожним елементом вкладеного списку і введіть тег <li>. Перемістіть курсори в кінець цих елементів і введіть відповідний закриваючий тег.
Щоб ваш дворівневий список відповідав рисунку 1, необхідно до тегів <ul> додати атрибути type з певними значеннями. Значення атрибуту можна запитати в Google або знайти у розділі Створення списків вже відомого вам посібника. Встановіть курсор відразу після ul, додайте пробіл і атрибут type з потрібним значенням. Наприклад, для маркера окружність код виглядатиме так: <ul type="circle">.
Рис. 1. Багаторівневі списки використовуються, зокрема, для створення панелей навігації (меню) з випадаючими підпунктами
Якщо результат вашої роботи відрізняється від представленого на рисунку 1, порівняйте свій код з прихованим. Відрізнятись може лише розташування коментарів.
<ul type="square">
<li>Знайомство з HTML і CSS
<!-- вкладений список -->
<ul type="disc">
<li>Структура HTML документа</li>
<li>Розмітка тексту</li>
<li>Списки</li>
<li>Таблиці</li>
</ul>
<!-- кінець вкладеного списку -->
</li>
<li>Мультимедіа та гіперпосилання
<!-- вкладений список -->
<ul>
<li>Зображення на вебсторінках</li>
<li>Відео та звук</li>
</ul>
<!-- кінець вкладеного списку -->
</li>
</ul>
Огорніть список майбутньої панелі навігації у контейнер <nav>. У майбутньому цей список (рис. 2) буде перетворено на дві кнопки панелі навігації з виринаючими підзаголовками. Для цього встановіть курсор після тега <body>, натисніть клавішу Enter і впишіть <nav>. Закриваючий тег панелі навігації розташуйте в рядку після відповідного коментаря.
Рис. 2. Щоб список у майбутньому перетворився на панель навігації, з нього прибирають маркери, поля та відступи, які браузер додає ліворуч
У першому абзаці сторінки (шукайте відповідний коментар) створіть ще один маркований список після відповідного коментаря, маркер повинен бути як на рисунку 3.
Рис. 3. Використайте відповідне значення атрибута type, щоб отримати маркер-окружність
Після другого заголовку <h2> створіть впорядкований список одного зі способів дій при додаванні таблиці на вебсторінку. Для цього втановіть курсор у рядку після коментаря <!-- Нумерований список; кожне нове речення, це новий елемент списку --> й уведіть тег <ol>. На початку кожного елемента списку (вони розділені порожніми рядками) напишіть тег <. Потім встановіть курсори у порожніх рядках за елементами списка і пропишіть закриваючі теги. Змініть тип нумерації. Пронумеруйте пункти римськими цифрами (рис. 4).
Рис. 4. За умовчанням впорядкований список нумерується арабськими цифрами. Щоб змінити тип нумерації також використовується атрибут type
Змініть атрибут type таким чином, щоб нумерація була великими латинськими літерами, і додайте атрибут start, щоб список починався з літери С (рис. 5).
Рис. 5. Який би тип нумерації ви не обрали, значення атрибуту start це завжди порядковий номер початку нумерації в послідовності цифр або літер
В решті решт, ваш нумерований список буде відкриватись тегом <ol type="A" start="3">.
Після заголовку <h2>Деякі інші теги</h2> створіть список визначень. У рядку після відповідного коментаря введіть тег <dl>. Закрити цей контейнер можна у рядку перед або після коментаря <!-- кінець списка визначень -->.
Встановіть курсори перед кожним тегом <code>, який стоїть перед терміном визначення. Напишіть тег <dt>, натисніть клавішу End і введіть закриваючий тег.
ЗАУВАЖЕННЯ:
Користуючись клавішами швидкого переміщення по тексту при груповому вводі, стежте за тим, щоб остаточне розташування кожного курсора відповідало потрібному. Особливо це важливо, якщо коди в рядках мають різну довжину, а вікно текстового редактора згорнуте. У такому випадку, один з рядків коду може завершуватись на іншому рядку і, натискаючи клавішу End ви насправді не досягнете кінця потрібного фрагменту. В такому випадку необхідно встановити кінцеве положення курсорів, використовуючи клавішу Ctrl.
Залишилось огорнути тегом <dd> </dd> самі визначення. Вони відокремлені від термінів порожніми рядками. Сподіваємось, що ви впораєтесь із цим без підказок. І, якщо все зроблено правильно, результат відповідатиме рисунку 6.
Рис. 6. У браузера є власні стилі для списка визначеннь. Пояснення до терміну починається з тире, на новому рядку з відступом від лівого краю
Якщо не впевнені у правильності, перевірте себе:
Підніміться вгору html-документа. Над тегом </style> знайдіть та розкоментуйте наступний код.
Для цього достатньо встановити курсор в будь який рядок цього коду і натиснути сполучення клавіш Ctrl+/ (остання клавіша знаходиться ліворуч від правої клавіші Shift).
Цей стиль зробить шрифт термінів списку визначень напівжирним і курсивним.
Розпочніть розмітку тегами маркованого списку, який починається за коментарем <!-- майбутня панель навігації, огорніть її в тег <nav> -->. На даному кроці огортати його в контейнер <nav> не потрібно. Використовуйте відповідне значення атрибуту type, щоб отримати дворівневий список наступного вигляду (рис.1).
Рис. 1. Багаторівневі списки використовуються, зокрема, для створення панелей навігації (меню) з випадаючими підпунктами
Огорніть список майбутньої панелі навігації у контейнер <nav>. У майбутньому цей список (рис. 2) буде перетворено на дві кнопки панелі навігації з виринаючими підзаголовками.
Рис. 2. Щоб список у майбутньому перетворився на панель навігації, з нього прибирають маркери, поля та відступи, які браузер додає ліворуч
У першому абзаці сторінки створіть ще один маркований список після відповідного коментаря, маркер повинен бути як на рисунку 3.
Рис. 3. Використайте відповідне значення атрибута type, щоб отримати маркер-окружність
Після другого заголовку <h2> створіть впорядкований список одного зі способів дій при додаванні таблиці на вебсторінку. Пронумеруйте пункти римськими цифрами (рис. 4).
Рис. 4. За умовчанням впорядкований список нумерується арабськими цифрами. Щоб змінити тип нумерації також використовується атрибут type
Змініть атрибут type таким чином, щоб нумерація була великими латинськими літерами, і додайте відповідний атрибут, щоб список починався з літери С (рис. 5).
Рис. 5. Щоб змінити початок нумерації використайте атрибут start
Після заголовку <h2>Деякі інші теги</h2> створіть список визначень відповідно до наявного в коді коментаря. Якщо все зроблено правильно, результат відповідатиме рисунку 6.
Рис. 6. У браузера є власні стилі для списка визначеннь. Пояснення до терміну починається з тире, на новому рядку з відступом від лівого краю
Підніміться вгору html-документа, знайдіть та розкоментуйте наступний код, який зробить шрифт термінів списку визначень напівжирним і курсивним.
dt {
font-style: italic;
font-weight: bold
}
На рисунку 7 остаточний вигляд вашої вебсторінки (без панелі навігації). Якщо ваш результат чимось відрізняється, ви можете порівняти його з готовою роботою, завантаживши відповідний архів.
Рис. 7. Різні типи списків допоможуть сформувати панель навігації, структурувати інформацію, створити глосарій тощо
