Html маркований. Створення списків HTML сторінки. Корисні матеріали за списками HTML
У HTML за організацію списків відповідає цілий набір тегів, організація яких має відповідати певним правилам структуризації даних.
Стандартом п'ятої версії html підтримується 3 види списків: нумеровані списки, марковані списки та списки визначень. Також надається можливість вкладати списки один одного, створюючи вкладені багаторівневі списки .
Нумерований список
Нумерований список- це набір елементів (пунктів списку), які мають певну послідовність. Кожен пункт нумерованого списку має унікальний маркер, що вказує на порядок проходження даного пункту щодо інших пунктів списку. За промовчанням маркерами пунктів нумерованого списку є числа. Перший пункт йде під числом 1, другий під числом 2 тощо.
Найпоширенішими прикладами нумерованих списків є рецепти різних страв. Оскільки будь-який рецепт - це нумерований список, із чіткою послідовністю дій.
Для створення нумерованих списків HTML використовується тег
- , всередині якого розміщуються елементи списку даних. Кожен пункт списку вказується за допомогою тега
- :
Нумерований список:
- Кава
- Чай
- Молоко
Спробувати »Примітка: тег
- як дочірні елементи може містити тільки теги
- , тобто весь вміст нумерованого списку має розміщуватися всередині елементів
- . Тег
- , своєю чергою, немає обмежень на вміст, у ньому можна розміщувати абзаци, картинки, посилання, таблиці, інші списки тощо.
Маркований список
Маркований список- це ненумеровані, тобто неупорядковані списки елементів, послідовність яких немає жодного значення. Всі пункти маркованого списку мають однакові маркери, за замовчуванням вони відображаються у вигляді чорних кіл.
Для створення маркованих списків HTML застосовується тег
- , всередині якого розташовуються елементи самого списку (як і у випадку з нумерованими списками, використовується тег
- , який містить у собі весь відображуваний вміст списку):
Маркований список:
- Кава
- Чай
- Молоко
Спробувати »Види маркерів
Види маркера нумерованого списку можна змінити за допомогою атрибута type . Цей атрибут підтримує п'ять видів маркерів:
Марковані списки не мають атрибута type , тому засобами HTML змінити вигляд маркера маркований список не вдасться. Для зміни виду маркера, у цьому випадку, можна скористатися CSS властивістю list-style-type , за допомогою якого, крім стандартного значення, можна вибрати ще два види маркера: circle або square .
Зміна маркерів у списків:
заголовок сторінки Нумерований список з атрибутом type="a":
- Яблука
- Банани
- Лимони
Нумерований список з атрибутом type="I":
- Яблука
- Банани
- Лимони
Види маркерів маркованих списків:
- Яблука
- Банани
- Лимони
- Яблука
- Банани
- Лимони
Спробувати »CSS властивість list-style-type крім видів маркерів для маркованих списків, має безліч різних видів маркерів і для нумерованих списків. Але не зміни одного стандартного виду маркера на інший буває достатньо для того, щоб красиво оформити список. Для оформлення списків краще використовувати CSS, який дозволяє не тільки змінювати вигляд маркера, але й замінювати маркери на картинки, контролювати їх розташування та керувати відступом. Як все це робити ви можете подивитися.
Горизонтальний перелік
Якщо ви використовуєте HTML список для створення горизонтального меню, вам потрібно буде розмістити елементи списку один за одним на одному рядку. Засобами HTML це зробити не вийде, тому потрібно буде скористатися CSS.
Щоб створити горизонтальний список, потрібно для пунктів списку прописати CSS властивість display зі значенням inline або inline-block , залежно від того, які властивості ви збираєтеся використовувати.
заголовок сторінки Нумерований список
- Яблука
- Банани
- Лимони
Маркований список:
- Яблука
- Банани
- Лимони
Спробувати »Після цього всі пункти списку вишикуються в один рядок. Зверніть увагу, що пункти списку пропадуть маркери і між ними не буде навіть пробілу, але відступ ліворуч у списку залишиться.
Як горизонтальний список перетворити на горизонтальне меню, ви можете переглянути .
У мові розмітки html розрізняють 3 види списків - упорядковані (нумеровані), невпорядковані (ненумеровані) та списки визначень (definition list).
Для побудови такого списку потрібні два види елементів: 'ul' (скорочення від unordered list, тобто невпорядкований список) і 'li' (елемент списку). Все, що написано всередині 'li', позначається маркером.
Зовнішній вигляд такого списку можна керувати, задаючи типи маркерів.
Типи маркерів
Існує спеціальний атрибут type, який ставиться в обох елементах списку. Це тип вашого маркеру. Всього 3 типи: коло, диск та квадрат:
- - Квадрат
- перший елемент
- другий елемент
- останній елемент
- Відділ маркетингу
- Даний відділ займається просуванням товарів та послуг
- Фінансовий відділ
- Цей відділ займається всіма фінансовими операціями
- НОВИНА ДНЯ
-
- Сьогодні йде дощ
- Вдень буде йти дощ
- НОВИНА НОЧІ
- Вдень та увечері буде йти дощ
- Завтра розпочнеться новий день
- Об'єднання фрагментів інформації в єдину структуру для надання виду, що легко читається.
- Опис складних покрокових процесів.
- Розташування інформації у стилі змісту, пункти якого вказують на відповідні розділи документа.
- (LI – List Item, елемент списку). Тег
- не потребує відповідного закриває тегу, хоча його наявність у принципі не забороняється. Браузери зазвичай при відображенні документа починають кожен новий елемент списку з нового рядка.
Наведених відомостей достатньо для побудови елементарного маркованого списку. Наведемо приклад HTML-документа, який використовує маркований список, відображення якого браузером показано на рис. 2.1.
Приклад маркованого списку - Овен
- Телець
- Близнюки
- Рак
- Лев
- Діва
- Терези
- Скорпіон
- Стрілець
- До озеро
- Водолій
- Риби
Знаки зодіаку:
Рис. 2.1.Відображення браузером маркованого списку
Зауважимо, що крім елементів списку, що відзначаються тегом
- , можуть бути й інші HTML-елементи. У наведеному вище прикладі одним з таких елементів є звичайний текст, що не є пунктом списку, а роль його заголовка.
Примітка
У деяких підручниках з мови HTML зустрічається вказівка, що для заголовка списку слід застосовувати тег-контейнер
(LH – List Header, заголовок списку). В даний час цей тег не розпізнається жодним із поширених браузерів і не входить до специфікації HTML. Таким чином, його застосування стає безглуздим, хоч і не призведе до будь-яких помилок. У тезі
- можуть бути вказані два параметри: COMPACT та TYPE.
- .
Приклад запису:
-
.
Примітка
Браузери по-різному інтерпретують вказівку виду маркера окремого елемента списку. Браузер Netscape змінює вигляд маркера для цього та всіх наступних, поки не зустрінеться чергове перевизначення виду маркера. Браузер Internet Explorer змінює вигляд маркера лише для цього елемента.
Графічні маркери списку
Як маркер списку можна використовувати графічні зображення, що широко застосовується для створення привабливих, красиво оформлених HTML-документів. Насправді, така можливість не надається безпосередньо мовою HTML, а реалізується дещо штучно. Це зовсім не означає, що так робити не рекомендується чи засуджено, а лише означає, що тут не застосовуватимуться ніякі спеціальні мовні конструкції HTML.
Щоб зрозуміти ідею, необхідно розібратися у механізмі реалізації списків на сторінках HTML. Виявляється, що тег списку
- (як, втім, і теги списків інших типів, що розглядаються нижче) виконує єдине завдання - вказує браузеру, що вся інформація, що розташовується після даного тега, повинна відображатися зі зсувом вправо (відступом) на деяку величину. Теги
- , що вказують окремі елементи списку, забезпечують виведення стандартних маркерів елементів списку.
Якщо нам потрібно побудувати список з графічними маркерами, то можна взагалі обійтися без тегів
- . Достатньо перед кожним елементом списку вставити бажане графічне зображення. Єдиним завданням, яке потрібно при цьому вирішити, буде відокремлення елементів списку один від одного. Для цього можна використовувати теги абзацу
Або примусового перекладу рядка
. Приклад реалізації списку із графічними маркерами, відображення якого представлено на рис. 2.2 показаний нижче:Маркований список Знаки зодіаку:
Овен
Рис. 2.2.Маркований список із графічними маркерами
У наведеному прикладі як маркер елементів списку використовується графічний файл Green_ball.gif. Зауважимо, що використання графіки на HTML-сторінках може значно збільшити обсяг інформації, що передається. Однак у цьому випадку це збільшення вкрай незначне. Тут для всіх маркерів використовується той самий файл,
який буде передано лише один раз. Розміри файлу, що містить невелике зображення, також дуже незначні.
Примітка
Методи створення списків з графічними маркерами обговорюються своєю чергою у розділі 8 .
Нумерований список
Іншим типом списків, реалізованих мовою HTML, є нумерований список. Інакше списки такого типу називають упорядкованими. Остання назва часто використовується як формальний переклад назви відповідного тега
- , за допомогою якого організовуються списки такого типу в HTML-документах (OL - Ordered List, впорядкований список).
- .
Наведемо приклад HTML-документа, який використовує нумерований список, відображення якогобраузером показано на рис. 2.3.
Приклад нумерованого списку - Сіріус
- До анопуса
- Арктур
- Альфа Центавра
- Вега
- До апелла
- Рігель
- Проціон
- Ахернар
- Бета Центавра
- Ветельгейзе
- Альдебаран
. . .- Міцар
. . .- Полярна
Найбільш яскраві зірки, видимі із Землі:
Рис. 2.З.Нумерований список
У тезі
- можуть бути вказані такі параметри: COMPACT, TYPE та START.
- .
Приклад запису:
- .
Параметр START тега
- дозволяє розпочати нумерацію списку не з одиниці. Як значення параметра START завжди має бути вказано натуральне число, незалежно від виду нумерації списку. Наведемо приклад:
- для нумерованих списків дозволяє використовувати параметри TYPE та VALUE. Параметр TYPE може приймати такі ж значення, як і для тега
- .
- .
Примітка
Браузери по-різному інтерпретують вказівку виду нумерації окремого елемента списку. Браузер Netscape змінює вигляд нумерації для даного елемента та всіх наступних, доки не зустрінеться чергове перевизначення. Internet Explorer змінює вигляд номера лише для цього елемента.
Значення параметра VALUE тега
- - дозволяє змінити номер даного елемента списку. При цьому змінюється нумерація та всіх наступних елементів. Типовим застосуванням є списки з пропуском деяких елементів. Приклад такого списку наведено вище (рис. 2.3). У ньому дається упорядкований список найбільш яскравих зірок, в якому на 58 і 75 місцях розташовані зірки, добре видимі в наших широтах (Міцар - найбільш яскрава зірка сузір'я Велика Ведмедиця, а Полярна зірка - Малої Ведмедиці).
Наведемо ще один оригінальний приклад використання нумерації різних видів. У HTML-коді, що наводиться нижче, задані три списки з різною нумерацією. Для зручності перегляду кожен із списків поміщений в окрему комірку таблиці. Усі три списки ідентичні і різняться лише видом нумерації: у першому стовпці таблиці – арабські цифри, у другому – римські, а третьому нумерація ведеться латинськими літерами. Звернемо увагу, що елементи списку порожні, тобто після будь-якого тега
- немає жодних даних. Приклад такого роду можна використовувати як таблицю відповідності між записом чисел арабськими та римськими цифрами. Виявляється, що будь-який браузер, що підтримує списки, можна використовувати як генератор такої таблиці (рис. 2.4), варто лише набрати HTML-код. Нумерація римськими цифрами правильно працює до значення 3999. Вивчаючи правий стовпець, можна зрозуміти, як виконується нумерація латинськими літерами. Після вичерпання однолітерної нумерації (від А до Z) як наступний номер береться перший дволітерний номер - АА і т.д.
Використання різного типу нумерації у списках -
. . .
-
. . .
-
. . .
Рис. 2.4.Різні типи нумерації HTML-списків
Список визначень
Списки визначень, також називані словниками визначень спеціальних термінів, є особливим видом списків. На відміну від інших типів списків кожен елемент списку визначень завжди складається з двох частин. У першій частині елемента списку записується термін, що визначається, а в другій частині - текст у формі словникової статті, що розкриває значення терміна.
Списки визначень задаються за допомогою тега-контейнера
- (Definition List). Всередині контейнера тегом
- (Definition Term) позначається термін, що визначається, а тегом
- (Definition Description) – абзац з його визначенням. Для тегів
- і
- можна не записувати відповідні теги, що закривають.
Загалом, список визначень записується так:
- Термін
- Визначення терміна
У тексті після тега
- не можуть використовуватися елементи рівня блоку, такі як, наприклад, теги абзацу
Або заголовків
-
. Як правило, текст визначається терміну повинен розташовуватися в одному рядку. Текст, що містить визначення терміну, виводиться, починаючи з наступного рядка (або через рядок для деяких браузерів) після визначення терміна з праворуч відступом. В інформації, поміщеній після тега
- можуть розташовуватися елементи рівня блоку. Звідси випливає, зокрема, що списки ухвал можуть бути вкладеними.
У тезі
- може бути вказано параметр COMPACT, призначення якого аналогічне до інших списків, що описуються вище.
- Флегматик
- Пасивний, дуже працездатний, що повільно пристосовується;
настрій стійкий, мало піддається зовнішньому впливу;
млявість емоційних реакцій та повільність у вольовій діяльності
- Сангвінік
- Активний, енергійний, легко пристосовується,
жвавість та рухливість емоційних реакцій, швидкість і сила вольових проявів
- Холерік
- Активний, дуже енергійний, наполегливий;
рвучкість і сила емоційних реакцій, бурхливі вольові прояви
- Меланхолік
- Пасивний, що легко втомлюється, важко пристосовується,-
слабкість вольових проявів та переважання пригніченого настрою, невпевненість у собі - Земпя
- Місяць
- Mapc
- Фобос
- Деймос
- Уран
- Аріель
- Умбріель
- Титанія
- Оберон
- Міранда
- Нептун
- Тритон
- Нереїда
Нумеровані списки є набором елементів з їх порядковими номерами. Вид та тип нумерації залежить від атрибутів тега
- , який застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом
- , як показано нижче.
- Перший пункт
- Другий пункт
- Третій пункт
Якщо не вказувати додаткових атрибутів і просто написати тег
- , то за замовчуванням застосовується список арабськими числами (1, 2, 3,...), як показано у прикладі 11.3.
- створення пунктуальності (ніколи не будете нікуди запізнюватися);
- лікування від пунктуальності (ніколи нікуди не поспішатимете);
- зміна сприйняття часу та годин.
- арабські числа (1, 2, 3, ...);
- великі латинські літери (A, B, C, ...);
- малі латинські літери (a, b, c, ...);
- великі римські числа (I, II, III, ...);
- малі римські числа (i, ii, iii, ...).
- Король Магнум XLIV
- Король Зігфрід XVI
- Король Сигізмунд XXI
- Король Хусбрандт I
- Перший пункт списку
- Другий пункт списку
- Третій пункт списку
- , то автоматично перед ним ставить .
- 1 – арабські цифри;
- A - великі;
- a - малі латинські літери;
- I - великі римські цифри;
- i - малі римські цифри.
Приклад 11.3. Створення нумерованого списку
Нумерований список Робота з часом
Результат цього прикладу показано на рис. 11.3.
Рис. 11.3. Вигляд нумерованого списку
Зауважте, що в нумерованому списку також додаються автоматичні відступи зверху, знизу та ліворуч від тексту.
Як нумеруючі елементи можуть виступати наступні значення:
Для вказівки типу нумерованого списку застосовується атрибут type тега
- . Його можливі значення наведено у табл. 11.2.
Табл. 11.2. Типи нумерованого списку
Тип списку Код HTML приклад Арабські числа
1. Чебурашка
2. Крокодил Гена
3. ШапоклякВеликі літери латинського алфавіту
A. Чебурашка
B. Крокодил Гена
C. ШапоклякРядкові літери латинського алфавіту
a. Чебурашка
b. Крокодил Гена
c. ШапоклякРимські числа у верхньому регістрі
I. Чебурашка
ІІ. Крокодил Гена
ІІІ. ШапоклякРимські числа у нижньому регістрі
i. Чебурашка
ii. Крокодил Гена
iii. ШапоклякЩоб почати список із певного значення, використовується атрибут start тега
- . При цьому немає значення, який тип списку встановлений за допомогою type , атрибут start однаково працює і з римськими і з арабськими числами. У прикладі 11.4 показано створення списку з використанням римських цифр у верхньому регістрі, що починаються з восьми.
Приклад 11.4. Нумерація списку
Римські числа
Результат цього прикладу показано на рис. 11.4.
Рис. 11.4. Нумерований список із римськими числами
У мові HTML існує два види списків: нумеровані та ненумеровані. Їхнє створення практично однакове. Навіть теги відрізняються однією символ. Також можна створювати які можуть включати як нумеровані, так і маркерні.
Ці списки можна перетворювати як завгодно. Все залежить від вашої фантазії. Спочатку ми розглянемо стандартні списки, такі ж як у редакторі Word, а потім їх покращуватимемо і оформлятимемо до невпізнанності.
Нумерований список HTML
Звичайний нумерований можна створити за допомогою наступних тегів:
Прості списки виглядають так
Згідно зі стандартами, кожен пункт списку повинен бути всередині тега li, що відкриває і закриває. Але якщо ви не поставите закриває тег, то результат буде таким самим. Обробник дуже розумний. Під час перетворення списку він аналізує теги, що відкривають. Якщо він бачить новий
Таким чином, списки можна робити так, як показано нижче.
Але з погляду фахівців це неправильно.
Ненумеровані (або маркерні) списки створюються так само, тільки замість тега ol, пишеться ul.
Немає цифр або букв - тільки різні символи, які називаються маркерами.
Багаторівневий нумерований список HTML
Багато користувачів цікавить така можливість. Тому слід зазначити, що будь-який нумерований список HTML можна зробити багаторівневим. Додаткові рівні можуть бути такими ж або маркованими.
Щоб створити список, вказаний у прикладі вище, потрібно написати наступне.
Зверніть увагу, що цей код, на відміну перших прикладів, доданий атрибут type. Завдяки йому можна вказати вид сортування як для нумерованих, так маркерних списків.
Для нумерованих вказуємо алфавіт чи тип цифр, а інших випадків - тип маркера.
Якщо ви використовуєте спеціальний HTML-тег, нумерований список може стати будь-яким, яким ви хочете.
Можна вказати атрибут type з будь-яким значенням таблиці. Або в класі стилю css вказати list-style-type із бажаним типом сортування.
Переклад значень досить простий. Досить базових знань англійської мови. Але навіть якщо ви не можете перекласти слова "коло", "квадрат" і т.п., то можна візуально зрозуміти, який буде результат при зазначенні цих значень в атрибуті type.
Для нумерованих списків слід використовувати такі варіанти:
За замовчуванням завжди використовується список з Тобто якщо ви нічого не вказали, це рівносильно type="1".
Крім цього, нумеровані списки можна розпочинати з будь-якої бажаної позиції. За замовчуванням – висновок від 1. Але за бажання можна почати хоч зі ста. Для цього потрібно вказати атрибут start із будь-яким значенням.
Крім цього, можна зробити висновок у зворотному порядку. Для цього необхідно написати reversed.
Оформлення списків
Нумерований список HTML можна оформити настільки красиво, що не відразу можна здогадатися, що це звичайний список, а не зображення, зроблене у Photoshop.
Ось приклади гарних списків.
Як видно з прикладу, можна змінювати зовнішній вигляд нумерації та самих елементів.
Створити звичайний список можна так.
У стилях css необхідно вказати оформлення для тегів ol. Зверніть увагу, що в цьому випадку параметри будуть застосовані до всіх списків всього сайту, де використовується цей файл стилів.
Розглянемо спочатку варіант із круглим оформленням списку. Поверніться до списку. Там вказано клас rounded-list. Саме з цим класом треба повозитися, щоб зробити таку красу. Назвати клас ви можете, як хочете.
Тепер розглянемо квадратне оформлення.
Стилі дуже схожі. Різниця в тому, що в першому випадку відбувається заокруглення елемента за допомогою можливостей CSS.
Професійний верстальник повинен передбачати та розуміти, що не всі користувачі використовують сучасні комп'ютери. Не всі встановлені Windows 7, 8, 10. Існує відсоток користувачів, хто досі сидить на Windows XP і використовує старі версії браузера Internet Explorer.
Як правило, майже всі сучасні дизайнерські покращення елементів ними не підтримуються. Користувачеві здаватиметься, що над дизайном сайту взагалі не працювали. Що все з'їхало. Елементи наїжджають один на одного. Щоб цього уникнути, потрібно прораховувати усі варіанти.
Деякі веб-майстри заплющують очі на них, оскільки їхня частка на сучасному ринку стає все меншою і меншою. Але для професіонала важливим є кожен відвідувач, особливо якщо це комерційний сайт.
Робіть щось потрібне для всіх або враховуйте всі варіанти браузерів.
Наведемо приклад HTML-документа, у якому використано перелік визначень:
Приклад списку визначень Класифікація типових темпераментів людини,
заснованана поглядах Гіппократа
Відображення наведеного HTML-документа у браузері показано на рис. 2.5.
Рис. 2.5.Список визначень (нагадує групу статей у словнику)
Списки типу
і - .
Спочатку списки цих типів замислювалися як компактніші порівняно із звичайними маркованими списками. Відповідно до правил запису елементів цих списків у них не дозволялося використовувати блокові елементи, що означає неможливість реалізації вкладеності списків такого типу. Кожен елемент списку був один рядок тексту.
Для списків типу
планувалося ввести обмеження на довжину тексту елемента списку (24 символи). Таке обмеження дозволило б виводити списки типу
у вигляді, подібному до висновку списку каталогів в операційних системах UNIX і MS-DOS при використанні ключа /W (у кілька колонок). Крім того, для елементів списків такого типу не відображалися маркери. Нині ці задуми не реалізовані, оскільки подальше вживання списків даних типів не рекомендується. Сучасні версії браузерів відображають списки цих типів повністю аналогічно до списків типу
- .
Вкладені списки
Бувають випадки, коли елемент списку одного типу потрібно включити цілий список такого ж типу або іншого. При цьому буде організовано багаторівневі або вкладені списки. У HTML припустимо довільне вкладення різних типів списків, проте за їх організації слід виявляти акуратність.
Нижче наводиться HTML-код документа із вкладеними списками, відображення якого показано на рис. 2.6. У цьому прикладі кожен елемент маркованого списку вкладено свій нумерований список.
Приклад вкладеного списку Супутники деяких планет
- можуть розташовуватися елементи рівня блоку. Звідси випливає, зокрема, що списки ухвал можуть бути вкладеними.
-
Пример запису:
- .
- .
Такий запис визначає нумерацію списку з великої латинської літери "E". Для інших видів нумерації запис START=5 задасть нумерацію відповідно з числа "5", римської цифри "V" і т.д.
Зміна виду нумерації списку та значень номерів допустимо проводити і для будь-якого елемента списку. Тег
- для нумерованих списків дозволяє використовувати параметри TYPE та VALUE. Параметр TYPE може приймати такі ж значення, як і для тега
Параметр COMPACT має той самий сенс, що й у маркованих списків. Параметр TYPE використовується для визначення типу нумерації списку. Може приймати такі значення:
TYPE = А - задає маркери у вигляді великих латинських букв;
TYPE = а - задає маркери у вигляді малих латинських літер;
TYPE = I - задає маркери як великих римських цифр;
TYPE = i - задає маркери як маленьких римських цифр;
TYPE = 1 – задає маркери у вигляді арабських цифр.
За замовчуванням використовується значення TYPE = 1, тобто нумерація за допомогою арабських цифр. Це стосується й вкладених нумерованих списків. Тут, на відміну від маркованих списків, браузери за замовчуванням не роблять різної нумерації на різних рівнях вкладення списків. Зауважимо, що після номера елемента списку завжди додатково виводиться знак "крапка".
Параметр TYPE з тими самими значеннями можна використовуватиме вказівки вила нумерації окремих елементів списку. Для цього параметр TYPE з відповідним значенням можна вказувати в тезі елемента списку
Списки даного типу зазвичай є упорядкованою послідовністю окремих елементів. Відмінністю від маркованих списків є те, що в нумерованому списку перед кожним елементом автоматично проставляється порядковий номер. Вигляд нумерації залежить від браузера і може бути задано параметрами тегів списку. В іншому реалізація нумерованих списків багато в чому схожа на реалізацію маркованих списків.
Теги
- і
Для створення нумерованого списку слід використовувати тег-контейнер, всередині якого розміщені всі елементи списку. Теги списку, що відкриває та закриває, забезпечують переклад рядка до та після списку, відокремлюючи таким чином список від основного вмісту документа.
Як і для маркованого списку кожен елемент нумерованого списку повинен починатися тегом
- , що вказують окремі елементи списку, забезпечують виведення стандартних маркерів елементів списку.
Параметр COMPACT записується без значень і застосовується для вказівки браузеру, що список слід виводити в компактному вигляді. Наприклад, може бути зменшений шрифт або відстань між рядками списку і т.д.
Примітка
В даний час наявність параметра COMPACT у тэзі
- ніяк не впливає на відображення списків провідними браузерами. Тому застосування даного параметра безглуздо, тим більше, що його вживання не рекомендується специфікацією HTML 4.0.
Параметр TYPE може приймати такі значення: disc, circle та square. Цей параметр використовується для примусового завдання маркерів списку. Конкретний вид маркера залежатиме від браузера, що використовується. Типовими варіантами відображення є такі:
TYPE = disc – маркери відображаються зафарбованими кружками; TYPE = circle – маркери відображаються не зафарбованими кружками; TYPE = square – маркери відображаються зафарбованими квадратиками. Приклад запису:
-
.
Значення, яке використовується за замовчуванням, є TYPE = disc. Для вкладених маркованих списків першому рівні за замовчуванням використовується значення disc, другого - circle, третьому і далі - square. Саме так робиться в останніх версіях браузерів Netscape та Internet Explorer. Зауважимо, інші браузери можуть інакше відображати маркери. Наприклад, у специфікації HTML 4.0 для виду маркера, що відображається при значенні TYPE = square, вказується квадратик (square outline).
Параметр TYPE з тими самими значеннями можна використовуватиме вказівки виду маркерів окремих елементів списку. Для цього параметр TYPE з відповідним значенням можна вказувати в тезі елемента списку
- .
- - диск
- - коло
Залежно від того, де вказати тип маркера, можна змінити його у всього списку або конкретного елемента.
Нумерований список (ordered list)
Для побудови списку також потрібно два елементи: 'ol' і 'li' (елемент списку). Маркери замінюються цифрами з точкою. Приклад простого списку:
Зовнішній вигляд упорядкованого списку можна керувати, задаючи різні типи нумерації.
Типи нумерації
Існує спеціальний атрибут type, який ставиться в елементі 'ol' або 'li'. Це тип списку. Усього 5 типів:
- - Нумерація арабськими цифрами (1, 2, 3)
- - Нумерація великими літерами (A, B, C)
- - Нумерація малими літерами (a, b, c)
- - нумерація великими римськими цифрами (I, II, III)
- - нумерація малими римськими цифрами (i, ii, iii)
- - З якої цифри розпочати нумерацію
Залежно від того, де вказати тип нумерації, можна змінити її у всього списку або конкретного елемента.
Список визначень (definition list)
Список визначень було розроблено для словникових статей.
Є загальний контейнер DL. Усередині нього стоять 'dt' (definition termin - термін) та 'dd' (definition description - опис). Найпростіший приклад:
Усі елементи всіх списків – блокові. Але всередині елемента 'dt' можна ставити лише малі елементи. В елементи 'dd' та 'li' можна ставити все, що завгодно. Звідси з'являються вкладені списки.
Вкладені (змішані списки)
Це багаторівневі списки, у яких є ієрархія. Часто такі списки застосовуються при розбудові карти сайту. Приклад:
- Змішаний список
У мові HTML передбачено спеціальний набір тегів надання інформації як списків. Списки є одним із найчастіше вживаних форм подання даних як і електронних документах, і у друкованих. Зі списками ми зустрічаємося практично щодня - це може бути список необхідних покупок у магазині, учнів у класі або просто справ, які необхідно виконати. Можливість організації спискових структур є в багатьох текстових редакторах, зокрема, потужний текстовий процесор Microsoft Word має зручні засоби форматування списків різного виду (можливості створення HTML-списків за допомогою Microsoft Word обговорюються в розділі 8). Наведемо низку випадків, для яких використання списків досить зручне:
Зауважимо, що наведені вище пункти якраз і організовані у вигляді спискової структури.
У мові HTML передбачені такі основні типи списків: маркований, нумерований та список визначень. Для реалізації списків різних типів використовуються такі теги:
- ,
- ,
- ,
, - , за допомогою якого організовуються списки такого типу в HTML-документах (UL - Unordered List, невпорядкований список).
У маркованому списку виділення його елементів використовуються спеціальні символи, звані маркерами списку (часто їх називають буллетами, що є формальним озвученням англійського терміна bullet - куля). Вигляд маркерів списку визначається браузером, причому під час створення вкладених списків браузери автоматично урізноманітнять вигляд маркерів різного рівня вкладеності.
Теги
- і<LI >
Для створення маркованого списку необхідно використовувати тег-контейнер, всередині якого розміщуються всі елементи списку. Теги списку, що відкриває та закриває, забезпечують переклад рядка до та після списку, відокремлюючи таким чином список від основного вмісту документа, тому тут немає необхідності використовувати теги абзацу
.Кожен елемент списку повинен починатись тегом
- , який містить у собі весь відображуваний вміст списку):
