Маркери

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

Для установки маркованого списку використовуються теги <UL> і <LI> (приклад 1).

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

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Список </ title>
</ Head>
<Body>
<P> Що слід враховувати при тестуванні сайту: </ p>
<Ul>
<Li> працездатність всіх посилань </ li>
<Li> підтримку різних браузерів </ li>
<Li> читабельність тексту </ li>
</ Ul>
</ Body>
</ Html>

Нижче показаний результат даного прикладу (рис. 1).

Мал. 1

Мал. 1. Вид маркованого списку в браузері Opera

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

Табл. 1. Види маркерів
код HTML приклад
<Ul type = "disc"> Що слід враховувати при тестуванні сайту:
  • працездатність всіх посилань
  • підтримку різних браузерів
  • читабельність тексту
<Ul type = "circle"> Що слід враховувати при тестуванні сайту:
  • працездатність всіх посилань
  • підтримку різних браузерів
  • читабельність тексту
<Ul type = "square"> Що слід враховувати при тестуванні сайту:
  • працездатність всіх посилань
  • підтримку різних браузерів
  • читабельність тексту

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

Приклад 3. Зміна виду маркера

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Списки </ title>
</ Head>
<Body>

<P> Коктейлі на основі текіли </ p>
<ul type = "circle">
<Li> Старовинний мексиканський </ li>
<Li> Голубая луна </ li>
<Li> Хоробрий бик </ li>
<Li> С'єрра Маргарита </ li>
</ Ul>

</ Body>
</ Html>

Результат прикладу показано нижче (рис. 2).

Мал. 2

Мал. 2. Маркери списку у вигляді кола

За допомогою CSS цей список можна розширити і замість вбудованих символів використовувати в якості маркера малюнки. З цією метою застосовується стильовий атрибут list-style-image, значенням якого виступає шлях до зображення. Його треба додати усередині ключового слова url, як показано в прикладі 4.

Приклад 4. Використання стилів для додавання малюнків до маркерів

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Списки </ title>
<Style type = "text / css">
UL {
list-style-image: url (images / square.gif); / * Шлях до графічного файлу з маркером * /
}
</ Style>
</ Head>
<Body>
<Ul>
<Li> заголовок повинен бути коротше за три рядки; </ li>
<Li> при назві розділів використовуйте вже сталі терміни, такі як гостьова книга, чат, посилання, головна сторінка та інші; </ li>
<Li> перед використанням спеціального терміну або слова, вирішите, чи буде воно зрозуміло читачеві. </ Li>
</ Ul>
</ Body>
</ Html>

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

Мал. 3

Мал. 3. Маркери списку у вигляді малюнків

Copyright що кредитують © www.htmlbook.ru