Підручник html 5

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

• Нумерований (упорядкований) список.
• Маркований (невпорядкований) список.
• Список описів.
• Список контекстних меню.

нумерований список

Нумерований (упорядкований) список призначений для елементів, які слідують в певному порядку. Нумерований список починається з тега

(Скорочене від англійського ordered list - впорядкований список). Кожен елемент списку починається з тега
1. (Елемент списку).

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

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

   Якщо ви хочете, щоб список починався з певного номера (не з 1), то необхідно вказати атрибут start для тега

   .

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

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

   Розглянемо приклад в якому представлені всі можливі значення атрибута type (відмінні від значення за замовчуванням):

   Результат нашого прикладу:

   
   Мал. 14 Види нумерованих списків.

   Ще один нюанс: при використанні атрибута start з буквами (type = "A" і type = "a"), число, вказане в значенні атрибута є порядковим номером букви в алфавіті. Наприклад, start = "4". буде відповідати букві "D" і список почнеться саме з неї. При використанні значення start = "27" лічильник обнуляється, при цьому список стає двозначним ( "27" = "AA", "28" = "AB", "29" = "AC".). Значення повинні бути цілочисельними, допускається використання негативних значень.

   Звертаю Вашу увагу, що допускається формувати нумеровані (впорядковані) списки, вкладені в інші нумеровані списки (всередині елемента списку

   1. ):

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

      Але і це ще не все, атрибут reversed елемента дозволяє задати, що порядок в нумерованому (упорядкованому) списку повинен йти по спадаючій. Атрибут не підтримує браузерами Internet Explorer і Edge.

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

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

      Маркований (невпорядкований) список в HTML визначається тегом

      (Unordered List Element). Кожен елемент списку повинен починатися з тега
      • (Скорочене від англійського list item - елемент списку).

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

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

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

        Забігаючи вперед, скажу, що кожен елемент HTML має стиль за замовчуванням. Зміна стилю за замовчуванням в HTML елементі може бути зроблено з використанням глобального атрибута style. Більш детально цей атрибут буде розглянуто в наступній статті "HTML стилі".

        Для зміни типу маркера (стилю) ви можете скористатися властивістю CSS list-style-type. щоб визначити стиль маркера. Можливі значення властивості:

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

        Результат нашого прикладу:

        
        Мал. 15 Маркери.

        Звертаю Вашу увагу, що допускається формувати марковані (невпорядковані) списки, вкладені в інші марковані списки (всередині елемента списку

      • ) При цьому елементи вкладеного списку за замовчуванням будуть з порожнім колом усередині, a наступні будуть з квадратом:
        • Перший пункт
          • Перший пункт
            • Перший пункт
              • Перший пункт
              • другий пункт
              • третій пункт
            • другий пункт
            • третій пункт
          • другий пункт
          • третій пункт
        • другий пункт
        • третій пункт

        список описів

        Списки описів використовуються для формування пар типу «ім'я / значення» / «питання / відповідь» і т.п.

        Тег

        (HTML Description List Element) визначає список, тег

        (HTML Definition Term Element) визначає його ім'я, а тег

        (HTML Description Element) описує його значення.

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

        Як ви можете помітити значення списку описів (елемент

        ) Має за замовчуванням зовнішній відступ з лівого боку рівний 40 пікселям:

        

        Мал. 16 Список описів.

        Звертаю Вашу увагу, що допускається формувати списки описів, вкладені в інші списки описів (всередині елемента значення списку

        ).

        Марковані (невпорядковані), нумеровані (впорядковані) і списки описів всередині себе можуть містити елементи нового списку (всередині елементів списку / значень списку), інші елементи HTML, такі як, зображення, посилання і т.д. Списки можна розміщувати горизонтально, формувати з них меню навігації і так далі. Більш докладно про можливості CSS (каскадних таблицях стилів) і деякі особливості HTML 5 ви дізнаєтеся пізніше.

        Список контекстних меню

        тег

        використовується для контекстних меню, панелей інструментів і для включення елементів управління форми.

        тег визначає елемент команди / меню, який користувач може викликати з контекстного меню.

        В даний час теги

        і мають дуже обмежену підтримку браузерами і практично не використовується з цієї причини:

        Розглянемо приклад для розширення кругозору:

        Для тих у кого браузер не відображає результат:

        

        
        Використання глобального атрибута contextmenu. тегів і .

        елемент

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

        Питання і завдання по темі

        Перед тим як перейти до вивчення наступної теми виконайте практичні завдання.

        • Використовуючи отримані знання складіть такі HTML списки:

        
        

        

        Практичне завдання № 6.

        

        Практичне завдання № 7.

        

        Практичне завдання № 8.

        

        Практичне завдання № 9.

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