Маркери
Маркери дозволяють розбити великий текст на окремі блоки. Тим самим привертається увага читача до тексту і підвищується його читабельність. З урахуванням того, що сприйняття тексту з екрану монітора гірше, ніж з його друкованого варіанту, це є дуже корисним прийомом.
Для установки маркованого списку використовуються теги <UL> і <LI> (приклад 1).
Приклад 1. Створення маркованого списку

<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. Вид маркованого списку в браузері Opera
Маркери можуть приймати один з трьох видів: коло (за замовчуванням), окружність і квадрат. Для вибору типу маркера використовується параметр type = "..." тега <UL>. Замість трьох крапок підставляється одне з трьох значень зазначених в табл. 1.
код HTML | приклад |
---|---|
<Ul type = "disc"> | Що слід враховувати при тестуванні сайту:
|
<Ul type = "circle"> | Що слід враховувати при тестуванні сайту:
|
<Ul type = "square"> | Що слід враховувати при тестуванні сайту:
|
У прикладі 3 показано створення маркованого списку, маркери в якому набирають вигляду кола.
Приклад 3. Зміна виду маркера

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

<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. Маркери списку у вигляді малюнків
Copyright що кредитують © www.htmlbook.ru
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.