Приклад коду списку визначень:

Списки визначень Термін 1 Визначення терміна 1 Термін 2 Визначення терміна 2

Результат:

Вкладені списки

Бувають ситуації, коли елемент списку необхідно включити свій список. Такі списки називаються багаторівневими чи вкладеними. Для цього використовують комбінацію вже відомих нам тегів списків.

Приклад коду багаторівневого списку:

Вкладені списки

• Тварини
  1. кішки
  2. собаки
• Рослини
  1. дерева
  2. квіти

Нумеровані списки є набором елементів з їх порядковими номерами. Вид та тип нумерації залежить від атрибутів тега

, який застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом
1. , як показано нижче.
   1. Перший пункт
   2. Другий пункт
   3. Третій пункт

   Якщо не вказувати додаткових атрибутів і просто написати тег

   , то за замовчуванням застосовується список арабськими числами (1, 2, 3,...), як показано у прикладі 11.3.

   Приклад 11.3. Створення нумерованого списку

   Робота з часом

   1. створення пунктуальності (ніколи не будете нікуди запізнюватися);
   2. лікування від пунктуальності (ніколи нікуди не поспішатимете);
   3. зміна сприйняття часу та годин.
   
   
   

   Результат цього прикладу показано на рис. 11.3.

   Мал. 11.3. Вигляд нумерованого списку

   Зауважте, що в нумерованому списку також додаються автоматичні відступи зверху, знизу та ліворуч від тексту.

   Як нумеруючі елементи можуть виступати наступні значення:

   • арабські числа (1, 2, 3, ...);
   • великі латинські літери (A, B, C, ...);
   • малі латинські літери (a, b, c, ...);
   • великі римські числа (I, II, III, ...);
   • малі римські числа (i, ii, iii, ...).

   Для вказівки типу нумерованого списку застосовується атрибут 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. Нумерація списку

   8. Король Магнум XLIV
   9. Король Зігфрід XVI
   10. Король Сигізмунд XXI
   11. Король Хусбрандт I
   
   
   

   Результат цього прикладу показано на рис. 11.4.

   

   Мал. 11.4. Нумерований список із римськими числами

   - 4.5 out of 5 based on 2 votes

   Дуже часто певну інформацію на сайті необхідно подати у вигляді списків.

   Списки дозволяють упорядкувати та систематизувати різну інформацію та подати її для відвідувача у зручному вигляді.

   Списки HTML можуть бути трьох різновидів: марковані списки, нумеровані списки і списки визначень. Розглянемо, як їх робити по порядку.

   Маркований список.

   Цей вид списку використовується найчастіше. Маркований список у HTML створюється за допомогою тегів

   • . При цьому напроти кожного елемента списку додається маркер, за замовчуванням це маркер у вигляді кухля. З допомогою тегів створюється контейнер, у якому розташовуються елементи списку: .

     Код маркованого списку виглядатиме так:

     • Варіант такий
     • Варіант сякий
     • Варіант такий собі

     Можете спробувати створити HTML сторінку, використовуючи цей код і у вас в результаті вийде наступний список:

     

     Як ви можете помітити, кожен елемент списку розташовується з нового рядка, при цьому ліворуч, зверху та знизу створюються певні відступи. Кожен пункт списку починається з маркера, як маркера може використовуватися зафарбований кружок (використовується за замовчуванням), коло або квадратик. У тега

     є атрибут type, з якого, і задається стиль маркера. Цей атрибут має такі значення:
     • disc – коло;
     • circle - коло;
     • square – квадрат.

     Значення disc використовується за замовчуванням.

     Приклад створення маркованого списку з маркерами у вигляді кола:

     • Варіант такий
     • Варіант сякий
     • Варіант такий собі

     В результаті список прийме наступний вигляд:

     

     Створення маркованого списку з маркерами у вигляді квадратиків:

     • Варіант такий
     • Варіант сякий
     • Варіант такий собі

     Список матиме вигляд:

     

     Атрибут type можна застосовувати не лише до тегу

     , але і до тегу
     • . Таким чином, можна створити список з різноманітними маркерами.
       • Варіант такий
       • Варіант сякий
       • Варіант такий собі

       В результаті вийде таке:

       

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

       Нумеровані списки HTML є списками, в яких кожен пункт має порядковий номер, створюються нумеровані списки за допомогою тега

       і вкладених у його тегів

       1. 1. Перший рядок
          2. Другий рядок
          3. Третій рядок

          Виглядає такий перелік так:

          

          За замовчуванням нумерація виконується арабськими цифрами. Але у тега

          є атрибут type, з допомогою значень якого нумерацію можна робити великими (type="A") чи малими (type="a") латинськими літерами, римськими цифрами у верхньому (type="I") і нижньому (type="i") ) регістрі.

          Нижче наведені скорочені варіанти коду, та вид нумерації який може бути у тому чи іншому випадку.

          Вид списку:

          Вид списку:

          

          Нумерація малими літерами латинського алфавіту:

          Вид списку:

          

          Вид списку:

          

          Вид списку:

          

          Список визначень у HTML.

          p align="justify"> Особливим видом списків є списки визначень. Вони відрізняються тим, що кожен елемент списку складається з двох елементів, терміну та тексту, який розкриває його значення. Створюються дані списки за допомогою тегів

          . Тег

          створює контейнер для списку, тег

          встановлює термін, а тег

          опис чи визначення терміна.

          Записується цей список наступним чином:

          Термін 1

          Визначення терміна 1

          Термін 2

          Визначення терміна 2

          Термін 3

          Визначення терміна 3

          В результаті вийде наступний список:

          

          Як ви можете бачити, при цьому створюються відповідні відступи терміна та тексту визначення.

          Вкладені або багаторівневі списки HTML.

          Іноді необхідно вкласти в один елемент певного виду списку інший список. HTML має можливість необмежено влагоджувати одні списки в елементи інших списків.

          Наприклад, код, за допомогою якого в елементи маркованого списку вкладені нумеровані списки.

          • Варіант такий
            1. Перший рядок
            2. Другий рядок
            3. Третій рядок
          • Варіант сякий
            1. Перший рядок
            2. Другий рядок
            3. Третій рядок
          • Варіант такий собі
            1. Перший рядок
            2. Другий рядок
            3. Третій рядок

          Маркований список визначається тим, що перед кожним елементом списку додається невеликий маркер зазвичай у вигляді зафарбованого кружка. Сам список формується за допомогою контейнера

          , а кожен пункт списку починається з тега
          • , як показано нижче.
            • Перший пункт
            • Другий пункт
            • Третій пункт

            У списку неодмінно має бути закриваючий тег

          , інакше виникне помилка. Закриваючий тегхоч і не обов'язковий, але радимо завжди додавати його, щоб чітко розділяти елементи списку.

          У прикладі 11.1 наведено HTML-код для додавання маркованого списку на веб-сторінці.

          Приклад 11.1. Створення маркованого списку

          ---

          • Чебурашка
          • Крокодил Гена
          • Шапокляк
          • Пацюк Лариса

          ---

          
          
          

          Результат цього прикладу показано на рис. 11.1.

          Мал. 11.1. Вид маркованого списку

          Зверніть увагу на відступи зверху, знизу та зліва від списку. Такі відступи автоматично додаються.

          Маркери можуть приймати один із трьох видів: коло (за замовчуванням), коло та квадрат. Для вибору стилю маркеру використовується атрибут type тега

          . Допустимі значення наведені в табл. 11.1
          Табл. 11.1. Стилі маркерів списку

          Тип списку	Код HTML	приклад
          Список із маркерами у вигляді кола		Перший Другий Третій
          Список з маркерами у вигляді кола		Перший Другий Третій
          Список із квадратними маркерами		Перший Другий Третій

          Вид маркерів може незначно відрізнятися в різних браузерах, а також зміні шрифту і розміру тексту.

          Створення списку з квадратними маркерами показано на прикладі 11.2.

          Приклад 11.2. Тип маркерів

          Зміна переконань

          • зміна релігійної віри (на вибір: буддизм, конфуціанство, індуїзм). Спеціальна пропозиція - іудаїзм та мусульманство разом;
          • зміна віри у непогрішність улюбленої партії;
          • переконання у тому, що інопланетяни існують;
          • перевага політичного ладу, як найкращого у своєму роді (на вибір: феодалізм, соціалізм, комунізм, капіталізм).
          
          
          

          Результат цього прикладу показано на рис. 11.2.

          Здрастуйте, шановні читачі блогу сайт. Сьогодні в рамках цієї рубрики я хочу поговорити про різноманітні списки Html, які можна створити на основі спеціально призначених для цього тегів UL, OL, LI і DL. За допомогою пари UL та LI створюються марковані списки, за допомогою OL та LI – нумеровані, а за допомогою елементів DL, DT та DD створюються так звані лістинги визначень. Також ми розглянемо коротко принципи створення вкладених конструкцій.

          Хочу нагадати вам, що ми вже встигли, встигли поговорити про основи сучасної, а так само табличної верстки (). Крім цього ми торкнулися основи, та й дізналися через.

          Марковані списки на основі тегів UL та LI

          Для створення маркованих списків використовується тег UL, а для створення нумерованих – OL. Ці теги є парними та блоковими, так само, як і елемент LI.

          Між тегом, що відкриває і закриває, розташовуються окремі пункти списку, які в свою чергу полягають в відкриває і закриває елемент LI. Зверху та знизу Html списків браузер додає відступи в один рядок, подібні до відступів, створюваних тегом абзацу.

          Давайте подивимося, наприклад, маркований варіант, який може виглядати так:

          • Перший рядок
          • Друга
          • Останній елемент

          Усередині відкриваючого та закриваючого тегів UL можуть стояти тільки елементи LI, а вже всередині цих елементів (пунктів) можна вставляти будь-який контент (текст, картинки, заголовки, абзаци, посилання і навіть інші списки).

          Тобто. UL служить тільки для організації маркованого (не впорядкованого) лістингу, а все, що ви бачитимете на web сторінці всередині нього, реалізується за допомогою вмісту елементів LI.

          Для UL можна змінювати вигляд маркера, прописуючи у ньому різні значення атрибуту «Type». Якщо «Type» (керування зовнішнім виглядом маркерів) для елемента UL не вказано, відображатиметься вид маркера, прийнятого за замовчуванням (disc — забарвлений у колір тексту кружок):

          1. - Зафарбований гурток (за замовчуванням);
             • - Не зафарбований гурток;
               • - Квадрат

          У наведених прикладах атрибут Type ми прописували в елементі UL, застосовуючи цей тип маркерів для всіх пунктів. Але атрибут «Type» можна прописати і для кожного окремого тегу LI, поставивши для цього пункту свій тип маркера.

          Приклад маркованого списку з різними типами маркера для кожного пункту:

          

          1. Маркер у вигляді зафарбованого диска
          2. Маркер у вигляді незафарбованого диска
          3. Квадрат

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

          Для створення нумерованого лістингу використовуються теги OL, усередині яких знову ж таки будуть розташовані елементи LI. OL і LI, як я вже згадував, є блоковими (тобто прагнуть зайняти все доступне їм місце по ширині) і всередині OL не можна буде розміщувати нічого, крім елементів LI.

          Виходить, що OL і UL - це службові теги, які потрібні тільки для того, щоб вказати браузеру, який саме вид списку ми формуємо (маркований або нумерований). У разі нумерованого — ліворуч від кожного пункту ми бачитимемо не маркер, а цифру і точку, що стоїть за нею:

          

          1. Перший рядок
          2. Другий пункт
          3. Третій рядок

          Як я вже згадував трохи вище, елементи UL, OL і LI мають можливість використовувати атрибут TYPE. Він дозволяє налаштувати тип маркера або задати, якими цифрами чи літерами нумеруватимуться пункти лістингу. Для нумерованого списку параметри цього атрибуту можуть приймати такі значення:

          1. — нумерація виконуватиметься звичайними арабськими цифрами (цей самий варіант використовуватиметься за умовчанням, за відсутності атрибута «Type»);
             1. - великі літери як нумерація;
                1. - малі літери;
                   1. - Великі римські цифри;
                      1. - малі римські цифри;

                         Приклад нумерованого списку з різними типами нумерації кожного пункту:

                         

                         1. з нумерацією великими римськими цифрами
                         2. Нумерація маленькими латинськими літерами
                         3. Нумерація малими римськими цифрами

                         При створенні нумерованих списків є також можливість розпочати нумерацію не з одиниці, а з заданого в атрибуті START числа. Наприклад:

                         1. Перший елемент, номер якого заданий у тезі OL атрибутом start="23"
                         2. Наступний пункт з номером на одиницю великим
                         3. Ще на одиницю більше

                         Для OL так само можна почати нову нумерацію з будь-якого значення, починаючи з будь-якого пункту, прописавши в LI цього пункту, що відкриває, атрибут VALUE з необхідним числом. Наприклад:

                         1. Перший пункт із номером один
                         2. Цей елемент отримає номер, вказаний у атрибуті value="32"
                         3. Пункт із великим номером

                         Оформлення зовнішнього вигляду списків у CSS (таблицях стилів)

                         Але, як правило, зараз зовнішній вигляд маркерів задається не через атрибут TYPE, а для яких прописуються відповідні властивості.

                         Тут я наведу приклад різних маркерів для ненумерованих списків, зовнішній вигляд яких задається через окремий файл з таблицями каскадних стилів.

                         • Перший пункт
                         • Другий
                         • Останній

                         Але ж про ми поговоримо в наступних статтях. Саме в такий спосіб задається зовнішній вигляд маркерів для UL на цьому блозі. Як маркерів використовуються картинки: для звичайних пунктів не нумерованого списку - , Для вкладених пунктів ненумерованого -.

                         Спеціальні та вкладені списки в Html коді

                         Третій та останній вид називається «списки визначень» і задаються вони за допомогою трьох тегів – DL, DT та DD. DL повідомляє браузеру, що далі буде список визначень.

                         Зазвичай такий вид використовується (ну, або передбачалося, що він використовуватиметься) для написання словникових статей, що складаються з термінів (укладених у теги DT) та їх описів (укладених у теги DD).

                         Перший термін

                         Опис

                         Другий термін

                         Його опис

                         

                         Якщо ви подивіться на наведений вище приклад, помітите, що елемент DD (опис терміна) зсувається (на 40 пікселів) щодо елемента DT (самого терміна).

                         Взагалі, DL, DT і DD є блоковими тегами, причому всередині елемента DT можна вставляти тільки контент з малими тегами (виходить, що всередині DT не можна буде використовувати блокові елементи заголовків і абзаців). А всередині тегів DD можна вставляти будь-які елементи і малі та блокові.

                         Вкладений список Html створюється за аналогією з простим, але всередині основного списку частина пунктів полягає ще раз в тег UL або OL, що відкриває і закриває.

                         Зверніть увагу, що LI того пункту, в якому буде створено вкладений пункт, ставиться лише після всього коду вкладеного списку (це дуже важливо для його правильного відображення на web сторінці). Вкладений список може виглядати приблизно так:

                         

                         1. Перший пункт основного нумерованого
                         2. Другий пункт
                            • Перший елемент вкладеного маркованого
                            • Другий
                            • Третій та останній пункт маркованого
                         3. Третій елемент нумерованого

                         Успіхів вам! До швидких зустрічей на сторінках блогу сайт

                         Вам може бути цікаво

                         Як вставити в HTML посилання та картинку (фото) - теги IMG та A Select, Option, Textarea, Label, Fieldset, Legend - теги Html форми списків, що випадають, і текстового поля
                         Html форми для сайту - теги Form, Input та Select, Option, Textarea, Label та інші для створення елементів вебформ
                         Як задаються кольори в Html та CSS коді, підбір RGB відтінків у таблицях, видачі Яндекса та інших програмах
                         Embed та object - Html теги для відображення медіа контенту (відео, флеш, аудіо) на веб-сторінках
                         Теги та атрибути заголовків H1-H6, горизонтальної лінії Hr, перенесення рядка Br та абзацу P за стандартом Html 4.01
                         Таблиці в Html - теги Table, Tr і Td, а також Colspan, Cellpadding, Cellspacing і Rowspan для їх створення
                         Що таке мова гіпертекстової розмітки Html і як переглянути список усіх тегів у валідаторе W3C
                         Теги Font (Face, Size та Color), Blockquote та Pre - застаріле форматування тексту в чистому HTML (без використання CSS)
                         Iframe та Frame - що це таке і як краще використовувати фрейми в Html
                         Img - Html тег для вставки картинки (Src), вирівнювання та обтікання її текстом (align), а також завдання фону (background)