Як зробити список в списку. HTML-посібник для початківців

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

Види списків

Для початку виділимо основні види списків, з якими ми можемо працювати. Це впорядкований, невпорядкований і випадає списки.

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

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

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

Впорядкований список

Почнемо з найбільш уживаного і поширеного списку - упорядкованого. В даному випадку перерахування тих чи інших відомостей йде в певному порядку, а кожен з елементів пронумерований. Наприклад, список класу:

1. Іванов.
2. Петров.
3. Сидоров і т. П.

Здається такий список за допомогою парних тегів

і

. Починається він з відкриваючого тега

, а закінчується тегом

. Кожен новий елемент списку починається з парного тега

і закінчується закриває

.

Тепер ви знаєте, як зробити список HTML. Як бачите, для цього досить запам`ятати всього два тега.

Трохи про параметри тега

- type і start.





Перший задає тип нумерації - буквений або цифровий. Може приймати такі параметри: A, a, I, i, 1.

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

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

Другий параметр - start - задає число, з якого й починається нумерація списку.

Скажімо також пару слів і про параметри тега

1. . У нього їх також два. Перший параметр value може змінювати порядок нумерації. Причому він буде змінений до того моменту, поки знову не буде прописаний цей параметр (або ж до кінця всього списку).
   
   
   
   

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

   1. Вступ.
   2. Основна частина.
      а) думка інших-
      в) моє думка-
      с) докази.
   3. Висновки.

   Створити такий список у списку HTML досить просто. Достатньо написати один основний список, а потім створити в потрібному місці другий з підпунктів, використовуючи іншу нумерацію. Ось приклад коду, заснований на нашому списку:

   • .
     2. 1. Вступ
     .
     4. 2. Основна частина
     .
   • думка інших
   .
   • моя думка
   .
   • докази
   .

.

3. Висновки

.

.

Невпорядкований список

Другий вид списку - невпорядкований. У ньому не важливо, в якому порядку йдуть елементи. Це може бути перелік чого завгодно - покупок, гостей, книг і т. Д.

Здається даний список за допомогою парного тега

і

. При цьому кожен новий елемент починається з усе того ж парного тега

.

Має всього один параметр - type, за допомогою якого задається тип маркера. Маркер може бути кружечком - зафарбовані чи ні, а також зафарбовані квадратом. Так, незакрашенним коло має значення disc, зафарбований - circle. Квадрат задається за допомогою square.

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

Випадає список

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

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

Побіжно згадаємо про тегах, за допомогою яких створюється список, що розкривається. HTML не володіє повноцінним функціоналом для створення даних списків. Відзначимо, що при роботі з даним типом списків потрібно знати не тільки основи розмітки сторінок, але і мати поняття про стилі CSS і java-скрипти.

Сам список задається за допомогою парних тегів .

Кожен новий елемент починається з парного тега .

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

Висновки

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