Основи HTML (частина 2)

147

Основы HTML для начинающих (часть 2)

Створення та використання різних типів списків HTML

Всім привіт! На прохання постійних читачів та гостей мого SEO блогу, продовжую тему основи HTML для початківців. Сьогоднішня HTML тема створення списків. Крім того, що HTML списки допомагають візуально виділяти важливу інформацію, що дуже зручно при написанні повідомлення в блозі або на сайті, тому їх ще дуже люблять ПС. В основному списки застосовують для виділення змісту HTML документа або для систематизації схожої інформації. Але це в основному – взагалі, застосування списків HTML набагато ширше.

Чому списків HTML важливі?

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

  • список
  • html
  • сторінки

Крім гарненького виведення інформації, вони насправді можуть бути використані для вирівнювання інших речей на блозі/сайті – таких, як навігація (меню) і іконки соціальних медіа, та й взагалі, скрізь, де вам здасться це доречним! Тому, після сьогоднішнього огляду основ створення HTML списків, ви можете застосувати до будь-яких елементів у своєму блозі чи сайті (головне – не забувайте робити бекап).

Типи списків HTML

В HTML існують наступні види списків:

  • нумеровані списки називаються впорядковані списки
  • марковані списки називаються невпорядковані списки

Списки вкладення HTML – це означає, що є тег, який ідентифікує тип списку, як нумеровані списки або маркіровані списки

    , свого роду контейнери, а всередині цих контейнерів є одна ознака, який створює елемент у списку –

  • . Списки – ті ж теги контейнерного типу, про які писалося в основи HTML і у них є відкриваючий і закриваючий тег.

    Рекомендую до прочитання: Кнопки соціальних мереж

    Створення упорядкованого пронумерованого списку HTML

    Упорядкований список показує елементи списку в порядку 1, 2, 3 і т. д. По-перше, ми повинні вказати браузеру, який саме список є, так що для впорядкованого списку ми використовуємо тег , так ми додаємо відкриває, то не забуваємо його закрити. Виглядає це так:

    Потім, між вищевказаними тегами, ми додаємо наші елементи списку –

  • відкривати і </ li> , щоб закрити.

  • Перший список примірників </ li>
  • Другий елемент списку </ li>

    і це буде виглядати наступним чином:

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

  • Перший елемент списку, який в даний час є посиланням на головну сторінку мого блогу </ li>
  • ”Второй </ li>
  • ”Третий </ li>

  • Перший елемент списку, який в даний час є посиланням на головну сторінку мого блогу
  • Второй элемент списка, которым в настоящее время является картинка
  • Третий элемент списка, который в настоящее время является изображением-ссылкой
  • Створення неупорядкованого маркірованого списку HTML

    Ненумерованний список показує елементи списку з “точкою”. Для створення маркірованого списку робимо те ж саме, тільки замість використання ми використовуємо

      , який вказує браузеру, що це невпорядкований список.

      Рекомендую до прочитання: Що треба знати про favicon SEO-оптимізатор

      • Перший список </ li>
      • Другий список </ li>
      • Третій список </ li>
        </ ul>

        • Перший список
        • Другий список
        • Третій список

        Додавання HTML списку на сайт

        Виходячи з вправ створення веб-сторінки в першій частині “Основи HTML”, ми створили порожню HTML-сторінку в текстовому редакторі і додали HTML-код до неї. Таким же способом додаються списки. Думаю, що особливих складнощів не виникне.

        Ну ось, зі списками розібралися. У наступній статті планую розповісти про текстових посиланнях і про те, як додати посилання до зображень.