Урок 3. Списки

Здрастуй, шановний читачу.

Сьогодні ми поговоримо о списках. Після проходження уроку ви зрозумієте як вони влаштовані і де їх застосовувати.

Це третя стаття, присвячена вивченню html. Перед прочитанням даного уроку рекомендую пройти попередні два:
Перший урок
Другий урок

Теорія та практика

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

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

12345678910111213

lt;htmlgt;lt;headgt;lt;titlegt; Моя перша html сторінкаlt;/titlegt;lt;/headgt;lt;bodygt;lt;pgt; Фруктиlt;/pgt;lt;ulgt;lt;ligt; Бананlt;/ligt;lt;ligt; Яблукоlt;/ligt;lt;ligt; Персикlt;/ligt;lt;/ulgt;lt;/bodygt;lt;/htmlgt;

А ось так це буде виглядати в браузері:

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

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

Якщо зробити список зі значенням атрибута:

12345678910111213

lt;htmlgt;lt;headgt;lt;titlegt; Моя перша html сторінкаlt;/titlegt;lt;/headgt;lt;bodygt;lt;pgt; Фруктиlt;/pgt;lt;ul type="Disc"gt;lt;ligt; Бананlt;/ligt;lt;ligt; Яблукоlt;/ligt;lt;ligt; Персикlt;/ligt;lt;/ulgt;lt;/bodygt;lt;/htmlgt;

Відео: Target Hunter: Урок 3 - Списки в Хмарі (Промокод всередині)

У браузері ми побачимо той же список з кружечком:

Якщо зробити список зі значенням атрибута:

12345678910111213

lt;htmlgt;lt;headgt;lt;titlegt; Моя перша html сторінкаlt;/titlegt;lt;/headgt;lt;bodygt;lt;pgt; Фруктиlt;/pgt;lt;ul type="Circle"gt;lt;ligt; Бананlt;/ligt;lt;ligt; Яблукоlt;/ligt;lt;ligt; Персикlt;/ligt;lt;/ulgt;lt;/bodygt;lt;/htmlgt;

У браузері побачимо список з порожнім колом:

Якщо зробити список зі значенням атрибута:

Відео: [pascal] 8 урок 3 частина. списки

12345678910111213

lt;htmlgt;lt;headgt;lt;titlegt; Моя перша html сторінкаlt;/titlegt;lt;/headgt;lt;bodygt;lt;pgt; Фруктиlt;/pgt;lt;ul type="Square"gt;lt;ligt; Бананlt;/ligt;lt;ligt; Яблукоlt;/ligt;lt;ligt; Персикlt;/ligt;lt;/ulgt;lt;/bodygt;lt;/htmlgt;

У браузері ми побачимо список з маркером у вигляді квадрати:

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

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

12345678910111213

lt;htmlgt;lt;headgt;lt;titlegt; Моя перша html сторінкаlt;/titlegt;lt;/headgt;lt;bodygt;lt;pgt; Фруктиlt;/pgt;lt;olgt;lt;ligt; Бананlt;/ligt;lt;ligt; Яблукоlt;/ligt;lt;ligt; Персикlt;/ligt;lt;/olgt;lt;/bodygt;lt;/htmlgt;

Як він буде виглядати в браузері:

Відео: Урок 3. Створюємо нові списки

Також наведу приклад вкладеного списку. Можливо вам він сподобається і ви будете його використовувати.

Приклад коду вкладеного списку

12345678910111213141516171819202122232425262728

lt;htmlgt;lt;headgt;lt;titlegt; Моя перша html сторінкаlt;/titlegt;lt;/headgt;lt;bodygt;lt;pgt; Фруктиlt;/pgt;lt;ulgt;lt;ligt; Бананиlt;ulgt;lt;ligt; 100 р.lt;/ligt;lt;ligt; 200 р.lt;/ligt;lt;/ulgt;lt;/ligt;lt;ligt; Яблукаlt;ulgt;lt;ligt; 350 р.lt;/ligt;lt;ligt; 120 р.lt;/ligt;lt;/ulgt;lt;/ligt;lt;ligt; Персикиlt;ulgt;lt;ligt; 210 р.lt;/ligt;lt;ligt; 300 р.lt;/ligt;lt;/ulgt;lt;/ligt;lt;/ulgt;lt;/bodygt;lt;/htmlgt;

Як він буде виглядати в браузері:

Сьогодні ми розглянули як створюються списки і найменші модифікації пов`язані з ними. Спробуйте все прописати руками. Тоді ви краще запам`ятайте їх і будете пам`ятати де і як їх застосувати.

Більше практикуйтеся!

Відео: Урок 3. Фреймворк Lravel. Відображення списку статей