Визначення маркованого списку. Марковані списки. Маркер списку у вигляді порожнього кола

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

З елементом

там, де зустрічається
- у списку є відступи зверху та знизу;
- маркери за замовчуванням відображаються як зафарбованого кружка;
- кожен елемент списку зсувається праворуч по відношенню до основного тексту.
На рис.1 показаний результат прикладу, що ілюструє наведені особливості маркованого списку.
Рис. 1. Вид маркованого списку
Вид маркера
Маркери можуть приймати один із трьох видів: зафарбований кружок (за замовчуванням), незафарбований кружок та квадрат. Для вибору типу маркера використовується властивість list-style-type або універсальний list-style (приклад 1). Використовуються такі значення:
- disc – маркери у вигляді зафарбованого кружка;
- circle – маркери у вигляді незафарбованого гуртка;
- square – квадратні маркери.
Приклад 1. Зміна маркера
Списки
- Сепульки
- Сепулькарії
- Сепулювання
У прикладі показано створення маркованого списку, де як значок маркера використовується невеликий однотонний квадрат. Хоча кількість значень обмежена трьома, це означає, що у нашому розпорядженні лише три види маркера. Існує безліч спецсимволів, які з успіхом можуть виступати як значок маркера. «Прикрутити» їх безпосередньо до
не вийде, тому доведеться діяти в обхід. Для цього ховаємо маркери списку за допомогою властивості list-style зі значенням none та в тексті перед вмістом
додаємо свій власний символ за допомогою псевдоелементу :: before. У прикладі 2 як такий маркер виступає трикутник.
Приклад 2. Використання:before
Списки
- Сепульки
- Сепулькарії
- Сепулювання
Результат цього прикладу показано на рис. 2. Оскільки використання властивості list-style зі значенням none не прибирає маркери зовсім, а лише приховує їх від перегляду, список виходить зміщеним вправо. Щоб позбавитися цієї особливості, у прикладі додається властивість text-indent з негативним значенням. Його завдання – перемістити текст ліворуч на один символ.
Рис. 2. Довільні маркери у списку
Символ не обов'язково має бути у шістнадцятковому форматі, його можна вставити і безпосередньо у текст. Головне, зберегти документ у кодуванні UTF-8 і щоб редактор його підтримував. Самі символи та їх коди можна взяти, наприклад, із LibreOffice Writer (рис. 3).
Рис. 3. Вибір символу в LibreOffice
Список із мальованими маркерами
Стилі дозволяють встановити як маркер будь-яке відповідне зображення через властивість list-style-image . Як значення використовується відносний чи абсолютний шлях до графічного файлу, як показано у прикладі 3.
Приклад 3. Використання зображення як маркер
Списки
- Сепульки
- Сепулькарії
- Сепулювання
Малюнок найкраще вибирати невеликого розміру, щоб не перетворювати елементи списку на підписи. На рис. 4 показаний результат дії прикладу використання як маркерів невеликих картинок.
Рис. 4. Малюнок як маркер
Застосування list-style-image має деякі недоліки:
- малюнок не можна зрушити вгору чи вниз;
- у різних браузерах положення малюнку щодо тексту може відрізнятися.
Цих недоліків можна уникнути з допомогою якості background , воно встановлює фонове зображення. Для кожного елемента списку

ми прибираємо вихідні маркери та встановлюємо фонову картинку без повторення. Щоб текст не виводився поверх малюнка, зміщуємо його вправо через padding-left (приклад 4).

Приклад 4. Використання background

Ul ( margin-left: -1em; ) li ( list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )

Положення тексту та маркера

Існує два способи розміщення маркера щодо тексту: маркер виноситься за кордон елементів списку або обтікається текстом (рис. 5).


inside	outside

Рис. 5. Розміщення маркерів щодо тексту

Щоб керувати положенням маркерів, застосовується властивість list-style-position. Воно має два значення: outside – маркери розміщуються за межами текстового блоку (це значення за замовчуванням) та inside – маркери є частиною текстового блоку та відображаються в елементі списку (приклад 5).

Приклад 5. Зміна положення маркерів

Списки

Перед початком роботи перевірте наявність обладнання, що входить до комплекту 3BM.
За відсутності одного або кількох периферійних пристроїв слід одразу звернутися до технічного персоналу ВЦ.
Після огляду візуальними методами робочого місця можна обережно включити живлення 3BM.

Результат цього прикладу показано на рис. 6.

Здрастуйте, шановні читачі блогу сайт. Сьогодні в рамках цієї рубрики я хочу поговорити про різноманітні списки Html, які можна створити на основі спеціально призначених для цього тегів UL, OL, LI і DL. За допомогою пари UL та LI створюються марковані списки, за допомогою OL та LI – нумеровані, а за допомогою елементів DL, DT та DD створюються так звані лістинги визначень. Також ми розглянемо коротко принципи створення вкладених конструкцій.

Хочу нагадати вам, що ми вже встигли, встигли поговорити про основи сучасної, а так само табличної верстки (). Крім цього ми торкнулися основи, та й дізналися через.

Марковані списки на основі тегів UL та LI

Для створення маркованих списків використовується тег UL, а для створення нумерованих – OL. Ці теги є парними та блоковими, так само, як і елемент LI.

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

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

Перший рядок
Друга
Останній елемент

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

Тобто. UL служить тільки для організації маркованого (не впорядкованого) лістингу, а все, що ви бачитимете на web сторінці всередині нього, реалізується за допомогою вмісту елементів LI.

Для UL можна змінювати вигляд маркера, прописуючи у ньому різні значення атрибуту «Type». Якщо «Type» (керування зовнішнім виглядом маркерів) для елемента UL не вказано, відображатиметься вид маркера, прийнятого за замовчуванням (disc — зафарбований у колір тексту кружок):

У наведених прикладах атрибут Type ми прописували в елементі UL, застосовуючи даний тип маркерів для всіх пунктів. Але атрибут "Type" можна прописати і для кожного окремого тегу LI, задавши для цього пункту свій тип маркера.

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

Маркер у вигляді зафарбованого диска
Маркер у вигляді незафарбованого диска
Квадрат

Нумеровані списки в Html на основі OL

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

Виходить, що OL і UL - це службові теги, які потрібні тільки для того, щоб вказати браузеру, який саме вид списку ми формуємо (маркований або нумерований). У разі нумерованого — ліворуч від кожного пункту ми бачитимемо не маркер, а цифру і точку, що стоїть за нею:

Перший рядок
Другий пункт
Третій рядок

Як я вже згадував трохи вище, елементи UL, OL і LI мають можливість використовувати атрибут TYPE. Він дозволяє налаштувати тип маркера або задати, якими цифрами або літерами нумеруватимуться пункти лістингу. Для нумерованого списку параметри цього атрибуту можуть приймати такі значення:

Приклад нумерованого списку з різними типами нумерації кожного пункту:
1. з нумерацією великими римськими цифрами
2. Нумерація маленькими латинськими літерами
3. Нумерація малими римськими цифрами
При створенні нумерованих списків є також можливість розпочати нумерацію не з одиниці, а з заданого в атрибуті START числа. Наприклад:
1. Перший елемент, номер якого заданий у тезі OL атрибутом start="23"
2. Наступний пункт з номером на одиницю більшим
3. Ще на одиницю більше
Для OL так само можна почати нову нумерацію з будь-якого значення, починаючи з будь-якого пункту, прописавши в LI цього пункту, що відкриває, атрибут VALUE з необхідним числом. Наприклад:
1. Перший пункт із номером один
2. Цей елемент отримає номер, вказаний у атрибуті value="32"
3. Пункт із великим номером
Оформлення зовнішнього вигляду списків у CSS (таблицях стилів)
Але, як правило, зараз зовнішній вигляд маркерів задається не через атрибут TYPE, а для яких прописуються відповідні властивості.
Тут я наведу приклад різних маркерів для ненумерованих списків, зовнішній вигляд яких задається через окремий файл з таблицями каскадних стилів.
- Перший пункт
- Другий
- Останній
Але ж про ми поговоримо в наступних статтях. Саме в такий спосіб задається зовнішній вигляд маркерів для UL на цьому блозі. Як маркерів використовуються картинки: для звичайних пунктів не нумерованого списку - , Для вкладених пунктів ненумерованого -.
Спеціальні та вкладені списки в Html коді
Третій та останній вид називається «списки визначень» і задаються вони за допомогою трьох тегів – DL, DT та DD. DL повідомляє браузеру, що далі буде список визначень.
Зазвичай такий вид використовується (ну, або передбачалося, що він використовуватиметься) для написання словникових статей, що складаються з термінів (укладених у теги DT) та їх описів (укладених у теги DD).

Перший термін

Опис

Другий термін

Його опис

Якщо ви подивіться на наведений вище приклад, помітите, що елемент DD (опис терміна) зсувається (на 40 пікселів) щодо елемента DT (самого терміна).
Взагалі, DL, DT і DD є блоковими тегами, причому всередині елемента DT можна вставляти тільки контент з малими тегами (виходить, що всередині DT не можна буде використовувати блокові елементи заголовків і абзаців). А всередині тегів DD можна вставляти будь-які елементи і малі та блокові.
Вкладений список Html створюється за аналогією з простим, але всередині основного списку частина пунктів полягає ще раз в тег UL або OL, що відкриває і закриває.
Зверніть увагу, що закриваючий LI того пункту, в якому буде створено вкладений пункт, ставиться лише після всього коду вкладеного списку (це дуже важливо для правильного відображення на веб-сторінці). Вкладений список може виглядати приблизно так:
1. Перший пункт основного нумерованого
2. Другий пункт
  - Перший елемент вкладеного маркованого
  - Другий
  - Третій та останній пункт маркованого
3. Третій елемент нумерованого
Удачі вам! До швидких зустрічей на сторінках блогу сайт
Вам може бути цікаво
Як вставити в HTML посилання та картинку (фото) - теги IMG та A Select, Option, Textarea, Label, Fieldset, Legend - теги Html форми списків, що випадають, і текстового поля
Html форми для сайту - теги Form, Input та Select, Option, Textarea, Label та інші для створення елементів вебформ
Як задаються кольори в Html та CSS коді, підбір RGB відтінків у таблицях, видачі Яндекса та інших програмах
Embed та object - Html теги для відображення медіа контенту (відео, флеш, аудіо) на веб-сторінках
Теги та атрибути заголовків H1-H6, горизонтальної лінії Hr, перенесення рядка Br та абзацу P за стандартом Html 4.01
Таблиці в Html - теги Table, Tr і Td, а також Colspan, Cellpadding, Cellspacing і Rowspan для їх створення
Що таке мова гіпертекстової розмітки Html і як переглянути список усіх тегів у валідаторе W3C
Теги Font (Face, Size та Color), Blockquote та Pre - застаріле форматування тексту в чистому HTML (без використання CSS)
Iframe та Frame - що це таке і як краще використовувати фрейми в Html
Img - Html тег для вставки картинки (Src), вирівнювання та обтікання її текстом (align), а також завдання фону (background)

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

У прикладі 11.1 наведено HTML-код для додавання маркованого списку на веб-сторінці.

Приклад 11.1. Створення маркованого списку

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

Чебурашка
Крокодил Гена
Шапокляк
Пацюк Лариса

Результат цього прикладу показано на рис. 11.1.

Рис. 11.1. Вид маркованого списку

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

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

Тип списку	Код HTML	приклад
Список із маркерами у вигляді кола		Перший Другий Третій
Список з маркерами у вигляді кола		Перший Другий Третій
Список із квадратними маркерами		Перший Другий Третій

Вид маркерів може незначно відрізнятися в різних браузерах, а також зміні шрифту і розміру тексту.

Створення списку з квадратними маркерами показано на прикладі 11.2.

Приклад 11.2. Тип маркерів

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

Зміна переконань

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

Результат цього прикладу показано на рис. 11.2.

У мові HTML існує два види списків: нумеровані та ненумеровані. Їхнє створення практично однакове. Навіть теги відрізняються однією символ. Також можна створювати які можуть включати як нумеровані, так і маркерні.

Ці списки можна перетворювати як завгодно. Все залежить від вашої фантазії. Спочатку ми розглянемо стандартні списки, такі ж як у редакторі Word, а потім їх покращуватимемо і оформлятимемо до невпізнанності.

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

Звичайний нумерований можна створити за допомогою наступних тегів:

Перший пункт списку

Другий пункт списку

Третій пункт списку

Прості списки виглядають так

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

, то автоматично перед ним ставить

Таким чином, списки можна робити так, як показано нижче.

Але з погляду фахівців це неправильно.

Ненумеровані (або маркерні) списки створюються так само, тільки замість тега ol, пишеться ul.

Немає цифр або букв - тільки різні символи, які називаються маркерами.

Багаторівневий нумерований список HTML

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

Щоб створити список, вказаний у прикладі вище, потрібно написати наступне.

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

Для нумерованих вказуємо алфавіт чи тип цифр, а інших випадків - тип маркера.

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

Можна вказати атрибут type з будь-яким значенням таблиці. Або в класі стилю css вказати list-style-type із бажаним типом сортування.

Переклад значень досить простий. Досить базових знань англійської мови. Але навіть якщо ви не можете перекласти слова "коло", "квадрат" і т.п., то можна візуально зрозуміти, який буде результат при зазначенні цих значень в атрибуті type.

Для нумерованих списків слід використовувати такі варіанти:

1 – арабські цифри;
A - великі;
a - малі латинські літери;
I - великі римські цифри;
i - малі римські цифри.

За промовчанням завжди використовується список з Тобто, якщо ви нічого не вказали, це рівносильно type="1".

Крім цього, нумеровані списки можна розпочинати з будь-якої бажаної позиції. За замовчуванням – висновок від 1. Але за бажання можна почати хоч зі ста. Для цього потрібно вказати атрибут start із будь-яким значенням.

Крім цього, можна зробити висновок у зворотному порядку. Для цього необхідно написати reversed.

Оформлення списків

Нумерований список HTML можна оформити настільки красиво, що не відразу можна здогадатися, що це звичайний список, а не зображення, зроблене у Photoshop.

Ось приклади гарних списків.

Як видно з прикладу, можна змінювати зовнішній вигляд нумерації та самих елементів.

Створити звичайний список можна так.

У стилях css необхідно вказати оформлення для тегів ol. Зверніть увагу, що в цьому випадку параметри будуть застосовані до всіх списків всього сайту, де використовується цей файл стилів.

Розглянемо спочатку варіант із круглим оформленням списку. Поверніться до списку. Там вказано клас rounded-list. Саме з цим класом треба повозитися, щоб зробити таку красу. Назвати клас ви можете, як хочете.

Тепер розглянемо квадратне оформлення.

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

Професійний верстальник повинен передбачати та розуміти, що не всі користувачі використовують сучасні комп'ютери. Не всі встановлені Windows 7, 8, 10. Існує відсоток користувачів, хто досі сидить на Windows XP і використовує старі версії браузера Internet Explorer.

Як правило, майже всі сучасні дизайнерські покращення елементів ними не підтримуються. Користувачеві здаватиметься, що над дизайном сайту взагалі не працювали. Що все з'їхало. Елементи наїжджають один на одного. Щоб цього уникнути, потрібно прораховувати усі варіанти.

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

Робіть щось потрібне для всіх або враховуйте всі варіанти браузерів.

У мові HTML передбачено спеціальний набір тегів надання інформації як списків. Списки є одним із найчастіше вживаних форм подання даних як і електронних документах, і у друкованих. Зі списками ми зустрічаємося практично щодня - це може бути список необхідних покупок у магазині, учнів у класі або просто справ, які необхідно виконати. Можливість організації спискових структур є в багатьох текстових редакторах, зокрема, потужний текстовий процесор Microsoft Word має зручні засоби форматування списків різного виду (можливості створення HTML-списків за допомогою Microsoft Word обговорюються в розділі 8). Наведемо низку випадків, для яких використання списків досить зручне:

Об'єднання фрагментів інформації в єдину структуру для надання виду, що легко читається.
Опис складних покрокових процесів.
Розташування інформації у стилі змісту, пункти якого вказують на відповідні розділи документа.

Зауважимо, що наведені вище пункти якраз і організовані у вигляді спискової структури.

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

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

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

Одним із типів списків, реалізованих у мові HTML, є маркований список. Інакше списки такого типу називають ненумерованими або

невпорядкованими. Остання назва часто використовується як формальний переклад назви відповідного тега

У маркованому списку виділення його елементів використовуються спеціальні символи, звані маркерами списку (часто їх називають буллетами, що є формальним озвученням англійського терміна bullet - куля). Вигляд маркерів списку визначається браузером, причому під час створення вкладених списків браузери автоматично урізноманітнять вигляд маркерів різного рівня вкладеності.

Теги

і<LI >

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

Кожен елемент списку повинен починатись тегом

(LI – List Item, елемент списку). Тег
не потребує відповідного закриває тегу, хоча його наявність у принципі не забороняється. Браузери зазвичай при відображенні документа починають кожен новий елемент списку з нового рядка.

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

Приклад маркованого списку
Рис. 2.1.Відображення браузером маркованого списку

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

Примітка

У деяких підручниках з мови HTML зустрічається вказівка, що для заголовка списку слід застосовувати тег-контейнер (LH – List Header, заголовок списку). В даний час цей тег не розпізнається жодним із поширених браузерів і не входить до специфікації HTML. Таким чином, його застосування стає безглуздим, хоч і не призведе до будь-яких помилок.

У тезі