Main menu

  2. Головна
  3. Уроки HTML
  4. Урок "html-списки"

Мітки

Базовий html-код

Кольори html

Цвета HTML https://colorscheme.ru/html-colors.html 

Google Fonts

Урок "html-списки"

Post on 03 лютого 2018
by Super User
in Уроки HTML

html-списки часто використовуються для створення навігації на веб-сторінці. Докладніше - у статті...

html-списки використовуються для того, щоб

  • створити перелік (список) якихось об'єктів. Наприклад, список акторів, які грають у кінофільмі, список частин комп'ютерної гри, список пісень якогось виконавця
  • створити навігацію на сайті.
Перейти до завдань

Списки буваю трьох видів:
- ненумеровані
- нумеровані
- списки визначення.
 
Ненумерований список - список без порядкових номерів. Замість порядкових номерів - маленькі темні круги (маркери).
Ненумерований список сворюється тегом <ul></ul>.
Кожен елемент списку створюється тегом <li></li>.

Наприклад,
<ul>
  <li>Радомир</li>
  <li>Федір</li>
  <li>Кіріл</li>
  <li>Олексій</li>
</ul>
результат:
  • Радомир
  • Федір
  • Кіріл
  • Олексій

 
Маркер можна змінити, вказавши атрибут type, який вказується для тегу <ul>:
<ul type="disc">...</ul> <!-- маркери - темні кружечки, маркер за замовчуванням, його можна у не вказути -->
<ul type="circle">...</ul> <!-- маркери - круги -->
<ul type="square">...</ul> <!-- маркери - квадрати -->
Наприклад:
<ul type="disc">
  <li>Радомир</li>
  <li>Федір</li>
  <li>Кіріл</li>
  <li>Олексій</li>
</ul>
результат:
  • Радомир
  • Федір
  • Кіріл
  • Олексій

<ul type="circle">
  <li>Школа №23</li>
  <li>Школа №33</li>
  <li>Школа №21</li>
  <li>Школа №15</li>
</ul>
результат:
  • Школа №23
  • Школа №33
  • Школа №21
  • Школа №15

<ul type="square">
  <li>Школа №23</li>
  <li>Школа №33</li>
  <li>Школа №21</li>
  <li>Школа №15</li>
</ul>
результат:
  • Школа №23
  • Школа №33
  • Школа №21
  • Школа №15

 
Нумерований список - список з порядковими номерами 1, 2, 3 ... .
Нумерований список створюється тегом <ol></ol>
Наприклад:
<ol>
  <li>Windows XP</li>
  <li>Windows 7</li>
  <li>Windows 8</li>
  <li>Windows 10</li>
</ol>
результат:
  1. Windows XP
  2. Windows 7
  3. Windows 8
  4. Windows 10

 

Маркер можна змінити, вказавши атрибут type, який вказується для тегу <ol>:

<ol type="1">...</ol> <!-- нумерація 1, 2, 3, ... , за замовчуванням-->
<ol type="A">...</ol> <!-- нумерація A, B, C, ... -->
<ol type="a">...</ol> <!-- нумерація a, b, c, ... -->
<ol type="I">...</ol> <!-- нумерація I, II, III, IV, V , ... -->
<ol type="i">...</ol> <!-- нумерація i, ii, iii, iv, v, ... -->
Наприклад:
<ol type="A">
  <li>Радомир</li>
  <li>Федір</li>
  <li>Кіріл</li>
  <li>Олексій</li>
</ol>
результат:
  1. Радомир
  2. Федір
  3. Кіріл
  4. Олексій

 
Список визначення створюється тегом <dl></dl>.
Між цими тегами пишуться пари тегів:
слово, для якого буде даватись визначення, вказується тегами <dt></dt>
визначення пишеться між тегами <dd></dd>
Наприклад:
<dl>
  <dt>Телесеріал:</dt>
    <dd>Школа</dd>
  <dt>Головні герої:</dt>
    <dd>Яніна</dd>
    <dd>Нікіта</dd>
    <dd>Олена</dd>
    <dd>та ін.</dd>
</dl>
результат:
Телесеріал:
Школа
Головні герої:
Яніна
Нікіта
Олена
та ін.

 
Cписки можуть бути багаторівневими, тобто всередині одного списку може бути інший - з підпунктами.
Наприклад,
для ненумерованого списку:
<ul>
  <li>Пункт 1</li>
    <ul>
      <li>Підпункт</li>
      <li>Підпункт</li>
    </ul>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
</ul>
результат:
  • Пункт 1
    • Підпункт
    • Підпункт
  • Пункт 2
  • Пункт 3
  • Пункт 4


для нумерованого списку
<ol>
  <li>Пункт 1</li>
    <ol>
      <li>Підпункт 1.1</li>
      <li>Підпункт 1.2</li>
    </ol>
  <li>Пункт 2</li>
    <ol>
      <li>Підпункт 2.1</li>
        <ol>
          <li>Підпункт 2.1.1</li>
          <li>Підпункт 2.2.2</li>
        </ol>
      <li>Підпункт 2.2</li>
    </ol>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
</ol>
результат:
  1. Пункт 1
    1. Підпункт 1.1
    2. Підпункт 1.2
  2. Пункт 2
    1. Підпункт 2.1
      1. Підпункт 2.1.1
      2. Підпункт 2.2.2
    2. Підпункт 2.2
  3. Пункт 3
  4. Пункт 4

 
УВАГА!
Інколи потрібно створити список, у якого не буде видно маркерів. Щоб створити список або елементи списку без маркера, використовують стильову властивість list-style-type
Наприклад,
для усього списку
<ul style="list-style-type:none;">
  <li>Головна</li>
  <li>Ігри</li>
  <li>Статті</li>
  <li>Про сайт</li>
  <li>Контакти</li>
</ul>
результат:
  • Головна
  • Ігри
  • Статті
  • Про сайт
  • Контакти


для окремого елементу списку
<ul>
  <li style="list-style-type:none;">Головна</li>
  <li>Ігри</li>
  <li>Статті</li>
  <li>Про сайт</li>
  <li>Контакти</li>
</ul>
результат:
  • Головна
  • Ігри
  • Статті
  • Про сайт
  • Контакти

 
ВАЖЛИВО!
html-списки використовують для того, щоб створити навігацію (меню) на сайті. У цьому випадку кожен елемент списку - посилання на сторінку чи розділ сайту.
Приклад 1:
<ul> <!-- вертикальне меню -->
  <li><a href="#">Головна</a></li>
  <li><a href="#">Ігри</a></li>
  <li><a href="#">Статті</a></li>
  <li><a href="#">Про сайт</a></li>
  <li><a href="#">Контакти</a></li>
</ul>
результат:

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

Приклад 2:
<ul> <!-- горизонтальне меню -->
  <li style="display: inline;"><a href="#">Головна</a></li>
  <li style="display: inline;"><a href="#">Ігри</a></li>
  <li style="display: inline;"><a href="#">Статті</a></li>
  <li style="display: inline;"><a href="#">Про сайт</a></li>
  <li style="display: inline;"><a href="#">Контакти</a></li>
</ul>
результат:

Так як елементи списку розташовані зліва направо, то меню називають горизонтальним. Щоб створити список у такому вигляді, використовують вбудований стиль.
 
Завдання 1
1. Створити у робочій папці файл index.html
2. Набрати у цьому файлі код:
<!DOCTYPE HTML>
<html>
  <head>
     <title>Пори року</title>
  </head>
  <body>
     <h1 align="center">Пори року</h1>
    <ul>
       <li>Зима</li>
       <li>Весна</li>
       <li>Літо</li>
       <li>Осінь</li>
    </ul>
  </body>
</html>
результат:
Пори року

Пори року

  • Зима
  • Весна
  • Літо
  • Осінь

 
Завдання 2
У робочій папці для Завдання 2 створити папку images і зберегти у цій папці файл 04-02-18-list-top.jpg
1. Створити файл index.html і набрати у ньому основу html-файлу (як створити основу html-файлу, див. за посиланням http://it-shkola.in.ua/uroky-html/99-shparhalka-po-html#1)
2. Вказати колір фону #EF2C19 
підказка: <body bgcolor="#EF2C19">
3. Вставити зображення 04-02-18-list-top.jpg .
підказка: <img src=″images/04-02-18-list-top.jpg">
4. Вирівняти малюнок по центру рядка
підказка: <p align="center">
5. Вставити заголовок першого рівня з текстом Топ 5 кращих комп'ютерних ігор.
підказка: <h1>Топ 5 кращих комп'ютерних ігор</h1>
6. Вирівняти заголовок по центру.
підказка: <h1 align="center">
7. Вставити нумерований список з таких слів: World of Warcraft , Black Desert , Leagua of Legends , Counter Strike , World of Tanks
підказка:
<ol>
  <li>World of Warcraft</li>
  <li>Black Desert</li>
  <li>Leagua of Legeds</li>
  <li>Counter Strike</li>
  <li>World of Tanks</li>
</ol>
Результат:


Завдання 3
У робочій папці Завдання 3
- створити папку images і зберегти туди файл http://it-shkola.in.ua/images/html_lessons/04-02-18-list/04-02-18-photo3.jpg
- створити папку audio і зберегти туди 3 аудіо-файли http://zk.fm/song/11150784 , http://zk.fm/song/2968213 , http://zk.fm/song/1687964
- зберегти прямо у робочій папці допоміжний файл http://it-shkola.in.ua/images/html_lessons/04-02-18-list/04-02-18-list-task3.txt 
1. Створити файл index3.html, набрати у ньому основу html-файлу.
2. Створити сторінку за зразком, вказаним нижче. При цьому вказати:
- заголовок сторінки Время и Стекло - альбоми, хіти, новини
- фон сторінки #F2B800
- шрифт Comic Sans MS
- головна картинка http://it-shkola.in.ua/images/html_lessons/04-02-18-list/04-02-18-photo3.jpg
- код для вставки аудіо і відео взяти з файлу http://it-shkola.in.ua/images/html_lessons/04-02-18-list/04-02-18-list-task3.txt 
Зразок


Завдання 4.
Створити веб-сторінку за зразком. При цьому використати таку інформацію:
1) скачати картинки-логотипи залежно від теми
https://drive.google.com/file/d/1nV9q1TAbyrpdE2jxApwMppWd8v_o6qy6/view?usp=sharing
2) використати налаштування: фон сторінки чорний, шрифт накреслення "Calibri" колір "білий";
3) у верхній частині - горизонтальне меню "Головна Аудіо Відео Про групу" (за допомогою тегу "список" і його налаштування).
Пункти "Аудіо", "Відео" - внутрішні посилання на відповідні місця сторінки, пункт нижнього меню "На початок" - перехід з кінця сторінки на початок (як це робиться - див. сторінку http://it-shkola.in.ua/uroky-html/98-urok-html-posylannia );
4) код для вставки аудіо та відео взяти з файлу 
https://drive.google.com/file/d/10aYTazYwgSRoHx5dtFx4FVoZPRg7l5Uj/view?usp=sharing
(обрати частину коду залежно від обраної теми);
5) аудіо для відтворення взяти з файлів  
Imagin Dragons https://drive.google.com/file/d/1a2HC6_JAEe71hRK_o7_AFYUW4vnQkEjq/view?usp=sharing,
Feder - Lordly https://drive.google.com/file/d/1Pd8brzHM6wBe_W_TeI6n36zpanyfzfVg/view?usp=sharing,
Дзідзьо https://drive.google.com/file/d/1jkk7pQG4A2J21i4kLHRFYH7tm_vvCeOS/view?usp=sharing,
Вівальд https://drive.google.com/file/d/1TxnPqbPWvJZuSn029MCFfyAwSRhcUKZr/view?usp=sharingі.

   
   

 

Свіже