У мові HTML передбачений спеціальний набір тегів для подання інформації у вигляді списків. Списки є одним з найбільш часто вживаних форм представлення даних як в електронних документах, так і в друкованих. Зі списками ми зустрічаємося практично щодня, - це може бути список необхідних покупок в магазині, учнів в класі або просто справ, які необхідно виконати. Можливість організації спискові структур є в багатьох текстових редакторах, зокрема, потужний текстовий процесор Microsoft Word має зручні засобами форматування списків різного виду (можливості створення HTML-списків за допомогою Microsoft Word обговорюються в главі 8). Наведемо ряд випадків, для яких використання списків досить зручно:
- Об'єднання фрагментів інформації в єдину структуру для додання удобочитаем виду.
- Опис складних покрокових процесів.
- Розташування інформації в стилі змісту, пункти якого вказують на відповідні розділи документа.
Зауважимо, що наведені вище пункти якраз і організовані у вигляді списковому структури.
У мові HTML передбачені наступні основні типи списків: маркований, нумерований і список визначень. Для реалізації списків різних типів використовуються наступні теги:
- ,
- (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.
Приклад нумерованого списку - Сіріус
- До анопус
- Арктур
- Альфа Центавра
- Вега
- До апелла
- ригель
- Процион
- Ахернар
- бета Центавра
- Ветельгейзе
- Альдебаран
. . .- Міцар
. . .- Пoляpнaя
Найбільш яскраві зірки, видимі з Землі:
Рис. 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, ...);
- арабські цифри c нулем попереду для цифр менше десяти (01, 02, 03, ..., 10);
- прописні латинські букви (А, В, С, ...);
- рядкові латинські літери (а, b, с, ...);
- римські цифри у верхньому регістрі (I, II, III, ...);
- римські цифри в нижньому регістрі (i, ii, iii, ...);
- вірменська нумерація;
- грузинська нумерація.
- . Як значення вказується будь-яке ціле позитивне число. При цьому неважливо, який тип нумерації встановлений, навіть якщо в якості списку використовуються латинські літери. Якщо одночасно для списку застосовуються атрибути start і value, то останній має більшу перевагу, і нумерація відображається з числа, зазначеного value, як показано в прикладі 1.
Приклад 1. Зміна нумерації списку
списки - Слід ретельно подбати про своє робоче місце.
- Освітлення в приміщенні відрегулювати таким чином, щоб джерело світла знаходився збоку або ззаду оператора.
- Bo уникнути медичних ускладнень стілець рекомендується вибирати з м'яким сидінням.
Перший елемент списку в даному прикладі буде починатися з римської цифри IV, оскільки зазначений атрибут start \u003d "4", потім йде номер V, а останній елемент слід не по порядку і призначається номером X (рис. 1).
Рис. 1. Римські цифри в списку
написання чисел
За замовчуванням нумерований список має певний вид: спочатку йде число, потім точка і після цього через пробіл відображається текст. Така форма написання наочна і зручна, але деякі розробники вважають за краще бачити інший спосіб оформлення нумерації списків. А саме, щоб замість точки йшла закриває дужка, як продемонстровано на рис. 2 або щось подібне.
Рис. 2. Форма нумерованого списку з дужкою
Стилі дозволяють поміняти вид нумерації списків за допомогою властивостей content і counter-increment. Спочатку для селектора ol потрібно задати counter-reset: item, це потрібно для того, щоб нумерація в кожному новому списку починалася заново. В іншому випадку, нумерація буде продовжена і замість 1,2,3 можна буде побачити 5,6,7. Значення item це унікальний ідентифікатор лічильника, ми його вибираємо самі. Далі необхідно заховати вихідні маркери через стильову властивість list-style-type зі значенням none.
Властивість content, як правило, працює в поєднанні з псевдоелементи :: after і :: before. Так, конструкція li :: before говорить про те, що перед кожним елементом списку необхідно додати якийсь зміст (приклад 2).
Приклад 2. Створення своєї нумерації
Li :: before (content: counter (item) ")"; / * Додаємо до числам дужку * / counter-increment: item; / * Задаємо ім'я лічильника * /)
Властивість content зі значенням counter (item) виводить число; додаючи дужку, як показано в даному прикладі, отримаємо необхідний вид нумерації. counter-increment необхідний для збільшення номера списку на одиницю. Зверніть увагу, що всюди використовується один і той же ідентифікатор з ім'ям item. Остаточний код показаний в прикладі 3.
Приклад 3. Зміна виду списку
списки - перший
- другий
- третій
- четвертий
Наведеними способом можна робити будь-який вид нумерованого списку, наприклад, брати число в квадратні дужки, в стилях при цьому зміниться тільки один рядок.
Content: "[" counter (item) "]";
Список з російськими буквами
Нумерований список є з латинськими літерами, а от росіян букв для списку немає. Їх можна додати штучно, скориставшись вищенаведеним прийомом. Оскільки нумерація робиться через стилі, сам список залишається вихідним, до нього лише додається обраний клас, назвемо його cyrilic (приклад 4).
Приклад 4. Код для створення списку
- Один
- Два
- Три
Додавання букв здійснюється за допомогою псевдоелемента :: before і властивості content. Оскільки в кожному рядку повинна бути своя буква, скористаємося псевдоклас: nth-child (1), в дужках пишеться номер букви. Першою буквою, природно, йде А, другий - Б, третій - В і т. Д. Весь цей набір додається до селектора li наступним чином (приклад 5).
Приклад 5. Застосування псевдокласу: nth-child
Cyrilic li: nth-child (1) :: before (content: "а)"; ) .Cyrilic li: nth-child (2) :: before (content: "б)"; ) .Cyrilic li: nth-child (3) :: before (content: "в)"; )
У цьому прикладі після кожної букви йде кругла дужка, всі букви рядкові. Ви можете визначити власний вид нумерації списку, наприклад вона може містити заголовні букви з точкою, з однією або двома дужками або одні тільки букви. На відміну від стандартної нумерації ми тут вільні робити що завгодно. Списку з десяти букв повинно вистачити практично для всіх ситуацій, але якщо цього раптово виявиться мало, нічого не заважає розширити наш список, включивши в нього хоч всі букви російського алфавіту.
Остаточно налаштовуємо вирівнювання і положення букв, за бажанням вказуємо розмір шрифту, колір та інші параметри (приклад 6).
Приклад 6. Список з російськими буквами
перелік - борщ
- Котлети з щуки
- кулеб'яка
- Гриби в сметані
- Млинці з ікрою
- квас
Результат даного прикладу показаний на рис. 3.
Доброго вам дня!
У цій статті ви дізнаєтеся про всі можливості списків, зрозумієте як зробити нумерований список, освоїте теги, які допоможуть зробити з простого маркованого списку більш цікавий і помітний з довільними маркерами. Після проходження уроку у вас прийде розуміння того, де застосовуються списки і за яких обставин їх можна використовувати.
Дана стаття - третя в даному невеликому курсі з основ HTML. Перед прочитанням даного уроку рекомендую пройти попередні два:
Тільки почалася стаття, а ви вже можете помітити використання стандартного маркованого списку. У мене на сайті він виглядає досить просто: зліва є невеликий відступ з лінією і квадратний маркер. Далі в статті ми детально розглянемо які бувають маркери, як зробити цифри, а також як зробити власний маркер.
У кожній частині статті створення тих чи інших списків буде супроводжуватися детальними поясненнями по вставці того чи іншого списку.
1. Маркери в HTML
Даний вид списків використовується для перерахування в тексті набору схожих за значенням елементів. Це може бути перерахування посилань, які пов'язані однією тематикою, докладне пояснення для окремих частин тексту. Але давайте подивимося як в коді виглядає марковані списки:
А ось так виглядає в браузері:
Рис. 1.1. Стандартний вид маркованого ненумерованого списку HTML в браузері1.1 Стандартні маркери для маркованого списку
На зображенні вище (Рис 1.1.) Можна помітити гуртки на початку кожного елементу меню. Це і є маркер. За замовчуванням він в браузері у вигляді закрашеного кола. Всього є кілька видів маркерів в HTML: зафарбований круг, порожній коло і квадрат. Вони не вимагають ні CSS ні підключення сторонніх зображень:
1.2 Маркер списку у вигляді порожнього кола
Значення атрибута ви знаєте, а зараз подивимося як зробити маркований список HTML в коді. З таблиці вище ми вибрали друге значення "circle" для атрибута type і задали його нашому маркованому списку:
<html\u003e <head\u003e <title\u003eПриклад маркованого списку з маркером у вигляді порожнього кола</ Title\u003e </ Head\u003e <body\u003e <p\u003eзірки:</ P\u003e <ul type \u003d "circle"\u003e <li\u003eСіріус</ Li\u003e <li\u003eАрктур</ Li\u003e <li\u003eПоллукс</ Li\u003e <li\u003eБетельгейзе</ Li\u003e <li\u003eсонце</ Li\u003e </ Ul\u003e </ Body\u003e </ Html\u003e Відразу дивимося як цей код буде виглядати в браузері:
Рис. 1.2. Вид маркера для списку у вигляді кола в браузері1.3 Маркер списку у вигляді квадрата
Подивимося також і останній приклад з квадратним маркером для HTML списку:
Зверніть увагу на маркер, він став квадратним:
Рис. 1.3. Вид маркера для списку у вигляді квадрата в браузеріВажливе зауваження: Зараз вже не використовується такий спосіб для створення стилів маркованих списків. Існує чіткий поділ CSS (що таке CSS читайте) і HTML. HTML - для розмітки, а CSS - для створення привабливого зовнішнього вигляду.
Код, який містить даний атрибут, при вказівки типу поточного документа як HTML5 ( ""), Видасть помилку при валідації. Якщо не чули що таке валідація, то вам сюди -.
Помилка буде наступна:
Рис. 1.4. Помилка на валідаторі при використанні атрибута "type" у спискуЗ маркованими списками розібралися. Зараз перейдемо до нумерованим, а потім розглянемо вкладені списки і кілька готових прикладів, які використовуються найчастіше на реальних сайтах.
2. Нумеровані списки в HTML
На відміну від попереднього виду списків, в нумерованих списків є одна важлива особливість: вони автоматично проставляють нумерацію. Це буває корисно коли необхідно пронумерувати великий список. Вручну це займе дуже багато часу, при цьому ще можна збитися. Нумерований список задається за допомогою тега. Як це виглядає на практиці:
Приклад нумерованого списку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html\u003e <head\u003e <title\u003eПриклад стандартного нумерованого списку</ Title\u003e </ Head\u003e <body\u003e <p\u003eВід одного до п'яти:</ P\u003e <ol\u003e <li\u003eперший</ Li\u003e <li\u003eдругий</ Li\u003e <li\u003eтретій</ Li\u003e <li\u003eчетвертий</ Li\u003e <li\u003eп'ятий</ Li\u003e </ Ol\u003e </ Body\u003e </ Html\u003e Таким чином виглядає нумерований список зі стандартними настройками в браузері:
Рис. 2.1. Нумерований список в браузері за стандартних параметрівЯк і у його попередника (маркованого списку) у нього є свої стилі для виводу чисел. Звичайна нумерація - це не єдиний вид маркерів у нумерованого списку в HTML.
2.1 Стандартні маркери для нумерованого списку
Тут у нас є вибір не з трьох видів маркерів, а з п'яти:
Назва маркера Значення атрибута "type" приклад списку Маркери у вигляді арабських чисел 1 - бадмінтон
- бейсбол
Маркери у вигляді малих латинських букв a - Джомолунгма
- Чогорі
- Канченджанґа
Маркери у вигляді заголовних латинських букв A - Summit Plummet
- Tantrum Alley
- Insano
Маркери у вигляді римських цифр в нижньому регістрі i - Філіппінське море
- Аравійське море
- коралове море
Маркери у вигляді римських цифр у верхньому регістрі I - червоний
- зелений
- синій
2.2 Своя нумерація в списку HTML
Крім звичайного виведення нумерованого списку ми також можемо почати свою нумерацію з будь-цифри. Для цього необхідно задати додатковий атрибут "start". Така нумерація працює на всіх видах маркерів у нумерованих списків. Як це виглядає на практиці:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html\u003e <head\u003e <title\u003eДовільна нумерація для нумерованого списку</ Title\u003e </ Head\u003e <body\u003e <p\u003eПочинаємо нумерацію з дванадцяти:</ P\u003e <ol type \u003d "a" start \u003d "12"\u003e <li\u003eдванадцять</ Li\u003e <li\u003eтринадцять</ Li\u003e <li\u003eЧотирнадцять</ Li\u003e <li\u003eп'ятнадцять</ Li\u003e <li\u003eШістнадцять</ Li\u003e </ Ol\u003e </ Body\u003e </ Html\u003e Ось як це буде відображатися на реальному сайті:
Рис. 2.2. Нумерація з довільного числа в нумерованому спискуНа зображенні вище ми пронумерували список починаючи з дванадцяти, при цьому зробили маркери у вигляді малих латинських букв. Зараз, я думаю, стало зрозуміло як використовувати дані атрибути в своїх проектах.
Ну а зараз перейдемо до вкладених списків HTML.
3. Як зробити багаторівневий (вкладений) список в HTML
Багаторівневі списки використовуються на сайті в побудові меню. Це меню найчастіше виглядає випадає або вниз (урок по), або випадає вліво або вправо. Такі меню дозволяють зберігати в собі інші елементи меню в компактному вигляді.
На прикладі моделей автомобілів ми побудуємо багаторівневий список в HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html\u003e <head\u003e <title\u003eВкладений маркований список HTML</ Title\u003e </ Head\u003e <body\u003e <ul\u003e <li\u003eCitroen<ul\u003e <li\u003eBerlingo</ Li\u003e <li\u003eC1</ Li\u003e <li\u003eC2</ Li\u003e <li\u003eC3 Picasso</ Li\u003e <li\u003eC4 Grand Picasso</ Li\u003e </ Ul\u003e </ Li\u003e <li\u003eKIA</ Li\u003e <li\u003eToyota</ Li\u003e <li\u003eAudi</ Li\u003e <li\u003eLexus</ Li\u003e </ Ul\u003e </ Body\u003e </ Html\u003e Зверніть увагу, як виглядає багаторівневий список в браузері:
Рис. 3.1. Приклад багаторівневого списку в HTMLМи робили багаторівневий список за допомогою маркованого (тег
- ). Багаторівневий список з моделями Citroen з'явився з іншими маркерами. Основний список з зафарбованими маркерами, а список на 2-му рівні - з порожніми кружками. Але, як пам'ятаєте, за допомогою атрибута "type" ми можемо перевизначити маркери (краще ставити).
- (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, показаний нижче:який буде переданий тільки один раз. Розміри файлу, що містить маленьке зображення, також вкрай незначні.
Примітка
Методи створення списків з графічними маркерами обговорюються в свою чергу в главі 8.
Різниця лише в тому, що цей тег строго зроблений для нумерації списків. Назва тега прийшло від англійського скорочення "Ordered List" - нумерований список.
синтаксис тега
- Елемент # 1
- Елемент # 2
- Елемент # 3
- ...
Де атрибут type \u003d "value" може набувати таких значень
- A - задає маркери у вигляді прописних латинських букв (A, B, C ..);
- a - задає маркери у вигляді малих латинських букв (a, b, c ..);
- I - задає маркери у вигляді великих римських цифр (I, II, III, IV ..);
- i - задає маркери у вигляді маленьких римських цифр (i, ii, iii, iv ..);
- 1 (за замовчуванням) - задає маркери у вигляді арабських цифр (1, 2, 3 ..);
Атрибут start \u003d "value" задає початкове значення (стартове значення) звіту.
Атрибут reversed задає зворотний рахунок (у разі потреби).
тег
- вимагає обов'язкового використання закриває тега
Для формування елементів списку використовується парний тег
- , Що вказують на окремі елементи списку, забезпечують виведення стандартних маркерів елементів списку.
- . Між відкриває і закриває тегами розташовуються окремі слова, фрази, абзаци, зображення, шматки коду і багато іншого, що є вмістом маркованого списку.
Примітка
Всередині списку є можливість змінювати рахунок на свій. Для цього є спеціальний атрибут value \u003d "" у тега
- , Якому присвоюється якесь числове значення. наприклад
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 10
- Елемент # 11
- Елемент # 12
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 1
- Елемент # 2
- Елемент # 3
- .
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 4
Ось як це виглядає на сторінці:
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 4
Приклад 5. Реверсивний нумерований список в html
Нижче наведено приклад реверсивного нумерованого списку (рахунок в зворотному порядку).
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 4
Ось як це виглядає на сторінці:
- Елемент # 1
- Елемент # 2
- Елемент # 3
- Елемент # 4
Параметр COMPACT записується без значень і застосовується для вказівки браузеру, що даний список слід виводити в компактному вигляді. Наприклад, може бути зменшений шрифт або відстань між рядками списку і т. Д.
Примітка
В даний час наявність параметра COMPACT в тезі
- ніяк не впливає на відображення списків провідними браузерами. Тому застосування даного параметра безглуздо, тим більше що його вживання не рекомендується специфікацією HTML 4.0.
Параметр TYPE може набувати таких значень: disc, circle і square. Цей параметр використовується для примусового завдання виду маркерів списку. Конкретний вид маркера буде залежати від використовуваного браузера. Типовими варіантами відображення є наступні:
TYPE \u003d disc - маркери відображаються зафарбованими кружками; TYPE \u003d circle - маркери відображаються не зафарбованими кружками; TYPE \u003d square - маркери відображаються зафарбованими квадратиками. Приклад запису:
- .
Значним, використовуваним за замовчуванням, є TYPE \u003d disc. Для вкладених маркованих списків на першому рівні за замовчуванням використовується значення disc, на другому - circle, на третьому і далі - square. Саме так робиться в останніх версіях браузерів Netscape і Internet Explorer. Зауважимо, що інші браузери можуть інакше відображати маркери. Наприклад, в специфікації HTML 4.0 для виду маркера, відображуваного при значенні TYPE \u003d square, вказується зафарбований квадратик (square outline).
Параметр TYPE з тими ж значеннями може вживатися для вказівки виду маркерів окремих елементів списку. Для цього параметр TYPE з відповідним значенням дозволено вказувати в тезі елемента списку
Приклади з нумерований списками в html (
- )
Приклад 1. Нумерований список html у вигляді латинських букв
Приклад з великими літерами
Приклад з малими буквами
Ось як це виглядає на сторінці:
Приклад 2. Нумерований список html у вигляді римських букв
Приклад з великими літерами
Ось як це виглядає на сторінці:
Приклад з малими буквами
Ось як це виглядає на сторінці:
Приклад 3. Нумерований список html різна позиція старту
Приклад, який показує можливості атрибута start, який дозволяє задавати стартове значення лічильника.
Ось як це виглядає на сторінці:
Приклад 4. Зміна рахунку в нумерованих списках html
Нижче представлений приклад з можливістю змінювати значення лічильника за допомогою атрибута value при виведенні нових елементів в тегах
- .
Але ми можемо об'єднати багаторівневі списки з нумерований і маркованими наступним чином:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html\u003e <head\u003e <title\u003eНумеровані, маркіровані та багаторівневі списки в HTML</ Title\u003e </ Head\u003e <body\u003e <ul\u003e <li\u003eПерша група тюльпанів<ol\u003e <li\u003eПерший клас<ul\u003e <li\u003eПрості ранні тюльпани</ Li\u003e </ Ul\u003e </ Li\u003e <li\u003eДругий клас<ul\u003e <li\u003eмахрові тюльпани</ Li\u003e </ Ul\u003e </ Li\u003e </ Ol\u003e </ Li\u003e </ Ul\u003e </ Body\u003e </ Html\u003e В наведеному вище прикладі у нас подвійна вкладеність (2 рівня). Спочатку вкладається список з двох класів тюльпанів, він у нас нумерований. Потім в кожен з елементів нумерованого списку вкладається маркований список.
Дивимося його вид в браузері:
Рис. 3.2. Приклад багаторівневого нумерованого списку в маркований список в браузері4. Корисні матеріали за списками HTML
Тут знаходиться інформація, для якої необхідне розуміння властивостей CSS. Для цього рекомендую вивчити наступні уроки:. Всі приклади будуть відразу з вихідним кодом і розбиті по вкладках HTML (структура), CSS (стилі) і Result (результат).
4.1 Як зробити список HTML в рядок
Зробити список HTML в рядок може знадобитися при створенні горизонтального меню. Зробити його дуже просто:
4.2 Як зробити список HTML без значка
За це відповідає властивість list-style-type в CSS (докладніше):
4.3 Як зробити список в HTML по центру
Приклад - це блоковий елемент, тому по центру його необхідно вирівнювати за допомогою зовнішніх відступів. Але є один важливий момент - ми повинні явно вказати ширину, щоб вирівнювання спрацювало:
4.4 Як зробити список в HTML з картинками
Досить лише одного властивості CSS list-style-image. Усередині url вказати адресу до іконки. Хочу лише зауважити, що зображення краще відразу підбирати маленьке, тому що від нього залежить висота рядка списку:
4.5 Маркований список HTML свій маркер
В цьому випадку необхідно заздалегідь підключити шрифтові іконки (наприклад, FontAwesome). Тоді можна зробити будь-яку іконку замість стандартного маркера:
4.6 Як зробити список в HTML в декілька стовпців
Щоб зробити список в декілька стовпців ми скористаємося властивістю CSS column-count (властивість підтримується тільки в наступних браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5 +). Також необхідно задати висоту для списку, щоб побачити розбиття на декілька стовпців:
5. Практика роботи зі списками
На відео нижче ви можете побачити всю роботу зі списками HTML на практиці:
Щоб закріпити отриману інформацію, я рекомендую всі дії виконати вручну. Спробувати різні маркери для списків, створити нумеровані списки, а після перейти до багаторівневим (вкладеним) списками і поекспериментувати з ними.
На цьому зі списками закінчуємо і переходите до наступного уроку по зображеннях.
Більше практикуйтеся!
Урок 3. Як зробити список в HTML 4.91 /5 (98.26%) 23 голос (ів)
Одним з типів списків, реалізованих в мові HTML, є маркований список. Інакше списки такого типу називають ненумерований або неупорядкованими. Остання назва часто використовується як формальний переклад назви відповідного тега
- , За допомогою якого і організуються списки такого типу в HTML-документах (UL - Unordered List, невпорядкований список).
У маркірованих списках для виділення його елементів використовуються спеціальні символи, звані маркерами списку (часто їх називають Буллет, що є формальним озвученням англійського терміна bullet - куля). Вид маркерів списку визначається браузером, причому при створенні вкладених списків браузери автоматично урізноманітнюють вигляд маркерів різного рівня вкладеності.
Теги
- і
Для створення маркованого списку необхідно використовувати тег-контейнер, всередині якого розташовуються всі елементи списку. Хто відкриває і закриває теги списку забезпечують переклад рядка до і після списку, відділяючи, таким чином, список від основного вмісту документа, тому тут немає необхідності використовувати теги абзацу
.Кожен елемент списку повинен починатися тегом
З практичної точки зору, принципи відображення елементів маркованого списку можуть аналогічним способом застосовуватися і до нумерований списку. Але з огляду на, що ми маємо справу з перерахуванням, існують деякі особливості, про які і піде мова далі.
нумерація списку
Допускається починати список з будь-якого номера; для цієї мети застосовується атрибут start елемента
- або value у елемента
Наведемо приклад HTML-документа, в якому використаний список визначень:
Приклад списку визначень Класифікація типових темпераментів людини,
заснованана поглядах Гіппократа
Відображення наведеного HTML-документа в браузері показано на рис. 2.5.
Рис. 2.5. Список визначень (нагадує групу статей в словнику)
списки типу
і - .
Спочатку списки цих типів замислювалися як більш компактні в порівнянні зі звичайними маркованими списками. Згідно з правилами запису елементів цих списків в них не дозволялося використовувати блокові елементи, що означає неможливість реалізації вкладеності списків такого типу. Кожен елемент списку був один рядок тексту.
Для списків типу
планувалося ввести обмеження на «довжину тексту елемента списку (24 символу). Таке обмеження дозволило б виводити списки типу
у вигляді, подібному висновку списку каталогів в операційних системах UNIX та MS-DOS при використанні ключа / W (в кілька колонок). Крім цього, для елементів списків такого типу не відображалися маркери. В даний час всі ці задуми не реалізовані, оскільки подальше вживання списків даних типів не рекомендується. Сучасні версії браузерів відображають списки цих типів повністю аналогічно списками типу
- .
вкладені списки
Бувають випадки, коли в елемент списку одного типу потрібно включити цілий список такого ж типу або іншого. При цьому будуть організовані багаторівневі або вкладені списки. В HTML допустимо довільне вкладення різних типів списків, однак при їх організації слід проявляти акуратність.
Нижче наводиться HTML-код документа з вкладеними списками, відображення якого показано на рис. 2.6. У цьому прикладі в кожен елемент маркованого списку вкладений свій нумерований список.
Приклад вкладеного списку Супутники деяких планет
- , Можуть розташовуватися елементи рівня блоку. Звідси випливає, зокрема, що списки визначень можуть бути вкладеними.
-
Пример записи:
- .
- .
Такий запис визначає нумерацію списку з великої латинської літери "E". Для інших видів нумерації запис START \u003d 5 задасть нумерацію, відповідно, з числа "5", римської цифри "V" і т. Д.
Зміна виду нумерації списку і значень номерів допустимо виробляй ть і для будь-якого елемента списку. тег
- для нумерованих списків дозволяє використовувати параметри TYPE і VALUE. Параметр TYPE може прини мати такі ж значення, як і для тега
Параметр COMPACT має таке ж значення, що і у маркованих списків. Параметр TYPE використовується для завдання виду нумерації списку. Може приймати наступні значення:
TYPE \u003d А - задає маркери у вигляді прописних латинських букв;
TYPE \u003d а - задає маркери у вигляді малих латинських букв;
TYPE \u003d I - задає маркери у вигляді великих римських цифр;
TYPE \u003d i - задає маркери у вигляді маленьких римських цифр;
TYPE \u003d 1 - задає маркери у вигляді арабських цифр.
За замовчуванням завжди використовується значення TYPE \u003d 1, т. Е. Нумерація за допомогою арабських цифр. Це стосується і вкладених нумерованих списків. Тут, на відміну від маркованих списків, браузери за замовчуванням не роблять різної нумерацію на різних рівнях вкладеності списків. Зауважимо, що після номеру елементу переліку завжди додатково виводиться знак "точка".
Параметр TYPE з тими ж значеннями може вживатися для вказівки вила нумерації окремих елементів списку. Для цього параметр TYPE з відповідним значенням дозволено вказувати в тезі елемента списку
Списки даного типу зазвичай являють собою упорядковану послідовність окремих елементів. Відмінністю від маркованих списків є те, що в нумерованому списку перед кожним його елементом автоматично проставляється порядковий номер. Вид нумерації залежить від браузера і може здаватися параметрами тегів списку. В іншому реалізація нумерованих списків багато в чому схожа на реалізацію маркованих списків.
Теги
- і
Для створення нумерованого списку слід використовувати тег-контейнер, всередині якого розташовуються всі елементи списку. Хто відкриває і закриває теги списку забезпечують переклад рядка до і після списку, відділяючи таким чином список від основного вмісту документа.
Як і для маркованого списку, кожен елемент нумерованого списку повинен починатися тегом
- , Що вказують на окремі елементи списку, забезпечують виведення стандартних маркерів елементів списку.
Параметр COMPACT записується без значень і застосовується для вказівки браузеру, що даний список слід виводити в компактному вигляді. Наприклад, може бути зменшений шрифт або відстань між рядками списку і т. Д.
Примітка
В даний час наявність параметра COMPACT в тезі
- ніяк не впливає на відображення списків провідними браузерами. Тому застосування даного параметра безглуздо, тим більше що його вживання не рекомендується специфікацією HTML 4.0.
Параметр TYPE може набувати таких значень: disc, circle і square. Цей параметр використовується для примусового завдання виду маркерів списку. Конкретний вид маркера буде залежати від використовуваного браузера. Типовими варіантами відображення є наступні:
TYPE \u003d disc - маркери відображаються зафарбованими кружками; TYPE \u003d circle - маркери відображаються не зафарбованими кружками; TYPE \u003d square - маркери відображаються зафарбованими квадратиками. Приклад запису:
-
.
Значним, використовуваним за замовчуванням, є TYPE \u003d disc. Для вкладених маркованих списків на першому рівні за замовчуванням використовується значення disc, на другому - circle, на третьому і далі - square. Саме так робиться в останніх версіях браузерів Netscape і Internet Explorer. Зауважимо, що інші браузери можуть інакше відображати маркери. Наприклад, в специфікації HTML 4.0 для виду маркера, відображуваного при значенні TYPE \u003d square, вказується зафарбований квадратик (square outline).
Параметр TYPE з тими ж значеннями може вживатися для вказівки виду маркерів окремих елементів списку. Для цього параметр TYPE з відповідним значенням дозволено вказувати в тезі елемента списку
- .
- ,
- ,
- , За допомогою якого і організуються списки такого типу в HTML-документах (UL - Unordered List, невпорядкований список).
У маркірованих списках для виділення його елементів використовуються спеціальні символи, звані маркерами списку (часто їх називають Буллет, що є формальним озвученням англійського терміна bullet - куля). Вид маркерів списку визначається браузером, причому при створенні вкладених списків браузери автоматично урізноманітнюють вигляд маркерів різного рівня вкладеності.
Теги і<LI\u003e
Для створення маркованого списку необхідно використовувати тег-контейнер, всередині якого розташовуються всі елементи списку. Хто відкриває і закриває теги списку забезпечують переклад рядка до і після списку, відділяючи, таким чином, список від основного вмісту документа, тому тут немає необхідності використовувати теги абзацу
.
Кожен елемент списку повинен починатися тегом