Швидко освоїти Html

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

    Швидко освоїти Html

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

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

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

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

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

    Швидко освоїти HtmlШвидко освоїти Html

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

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

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

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

    • — зафарбований гурток (за замовчуванням);
      • — не зафарбований гурток;
        • – квадрат

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

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

          Швидко освоїти HtmlШвидко освоїти Html

        • Маркер у вигляді диска зафарбованого
        • Маркер у вигляді не зафарбованого диска
        • Квадрат
        • Нумеровані списки в Html на основі тега OL

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

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

          Швидко освоїти HtmlШвидко освоїти Html

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

        • — нумерація буде виконуватися звичайними арабськими цифрами (цей же варіант буде використовуватися за замовчуванням, при відсутності атрибута «Type»);
        • — заголовні літери в якості нумерації;
        • — малі літери;
        • — великі римські цифри;
        • — малі римські цифри;
        • Приклад нумерованого списку з різними типами нумерації для кожного пункту:

          Швидко освоїти HtmlШвидко освоїти Html

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

          Швидко освоїти HtmlШвидко освоїти Html

        • Перший елемент, номер якого заданий в тезі OL атрибутом start=»23″
        • Наступний пункт, з номером на одиницю великим
        • Ще на одиницю більше
        • Для OL так само можна почати нову нумерацію з будь-якого значення, починаючи з будь-якого пункту, прописавши у початковому LI цього пункту атрибут VALUE з необхідним числом. Наприклад:

          Швидко освоїти HtmlШвидко освоїти Html

        • Перший пункт з номером один
        • Цей елемент отримає номер, зазначений в атрибуті value=»32″
        • Пункт з великим номером
        • Оформлення зовнішнього вигляду списків в CSS (таблицях стилів)

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

          У правилах CSS, прописаних для цього класу або Id, вказується, яка картинка буде використовуватися в якості маркера, на якій відстані маркер буде відстояти від тексту і ще багато чого. Подробиці дивіться в статті про властивості таблиць стилів List style ( type, image, position).

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

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

          Але а про тонкощі роботи з CSS ми поговоримо в наступних статтях. Саме таким способом визначається зовнішній вид маркерів для UL на цьому блозі. В якості маркерів використовуються картинки: для звичайних пунктів не нумерованого списку Швидко освоїти HtmlШвидко освоїти Html, для вкладених пунктів ненумерованного — Швидко освоїти HtmlШвидко освоїти Html.

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

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

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

          Перший термін
          Опис
          Другий термін
          Його опис

          Швидко освоїти HtmlШвидко освоїти Html

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

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

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

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

          Швидко освоїти HtmlШвидко освоїти Html

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