HTML конструювання За допомогою HTML можна задавати кольори всіх посилань на сторінці, а також змінювати кольори для окремих посилань.
Завдання кольору всіх посилань на сторінці
Кольори посилань задаються як атрибути тега. Атрибути є необов’язковими і якщо вони не вказані використовуються значення за замовчуванням.
link – визначає колір посилань на веб-сторінці (колір за замовчуванням синій, # 0000FF).
alink – колір активного посилання. Колір посилання змінюється при натисканні на неї кнопки миші. Колір за умовчанням червоний, # FF0000.
vlink – колір вже відвіданих посилань. Колір за умовчанням фіолетовий, # 800080.
В HTML кольору задаються зазвичай цифрами в шістнадцятковому коді, у вигляді #rrggbb, де r, g і b позначають відповідно червону, зелену і синю складову. Для кожного кольору задається шістнадцяткове значення від 00 до FF, що відповідає діапазону від 0 до 255 в десятковому численні. Потім ці значення об’єднуються в одне число, перед яким ставиться символ # (приклад 1).
Приклад 1. Завдання квітів посилань
<!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=utf-8"> <title>Цвет ссылок</title> </head> <body link="red" vlink="#cecece" alink="#ff0000" bgcolor="black"> <p><a href="content.html">Содержание сайта</a></p> </body> </html>
Колір не обов’язково ставити в шістнадцятковому форматі, можна використовувати і ключові слова. В даному прикладі колір фону веб-сторінки встановлений чорним, а колір посилань – червоним.
Для зміни кольору посилань зручніше використовувати CSS. Щоб встановити колір для всіх посилань на веб-сторінці застосовуються наступні псевдокласи, які додаються до селектора A.
visited – Стиль для відвіданого посилання.
active – Стиль для активного посилання. Активною посилання стає при натисканні на неї.
hover – Стиль для посилання при наведенні на неї мишею.
У прикладі 2 показано, як змінити колір посилань на веб-сторінці за допомогою стилів. Для цього скористаємося стильовою властивістю color, воно задає колір певного тексту, в даному випадку, посилань.
Приклад 2. Колір посилань, заданих через стилі
<!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=utf-8">
<title>Использование стилей</title>
<style type="text/css">
BODY {
background: black; /* Цвет фона веб-страницы */
}
A {
color: red; /* Цвет ссылок */
}
A:visited {
color: #cecece; /* Цвет посещенных ссылок */
}
A:active {
color: #ffff00; /* Цвет активных ссылок */
}
</style>
</head>
<body>
<p><a href="content.html">Содержание сайта</a></p>
</body>
</html>
Завдання кольору окремих посилань на сторінці
Вищеописаний спосіб завдання квітів працює для всіх посилань веб-сторінки. Однак, іноді виникає необхідність одночасно використовувати різні кольори. Світлі, наприклад, для темних областей веб-сторінки, а темні кольори – відповідно для світлих. Для цього також можна скористатися стилями.
Для зміни кольору посилання слід використовувати атрибут style=”color: #rrggbb” в тезі <a>, де #rrggbb – колір у шістнадцятковому представленні. Можна, також, використовувати назви кольорів або вказувати колір в форматі: rgb (132, 33, 65). У дужках вказані десяткові значення червоного, зеленого і синього кольору (приклад 3).
Приклад 3. Зміна кольору посилання за допомогою стилів
<!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=utf-8"> <title>Цвет ссылок</title> </head> <body link="#ffcc00" vlink="#cecece" alink="#ff0000" bgcolor="black"> <p><a href="content.html" style="color: white">Содержание сайта</a></p> <p><a href="1.html" style="color: #ffffff">Интернет-маркетинг</a></p> <p><a href="2.html" style="color: rgb (255, 255, 255)">Юзабилити</a></p> </body> </html>
В даному прикладі наведено три різні способи завдання кольору за допомогою стилів.