4 Посилання та прив’язки
Посилання
Посилання є частиною Web-сайту (створеного зазвичай за допомогою HTML, але не завжди), які вказують на інші ресурси – інші HTML-документи, текстові файли, файли PDF, і т.д. Існують посилання, по яким браузер має переходити автоматично, створені за допомогою елементів link (використовуються для імпорту файлів CSS в документ HTML), та існують також посилання, які користувач не зобов’язаний активувати. Вони називаються анкерами, і їх можна додавати в документ за допомогою елемента a. Елемент a позначає "якір/anchor". Атрибут href це скорочення від "hypertext reference/гіпертекстове посилання", вказує місце, на яке виконується перехід по даному посиланню - зазвичай це інтернет-адреса та/або ім'я файлу.
Будь-який рядковий елемент у документі можна перетворити на анкерне посилання, додаючи навколо нього елемент a. Наприклад, в наступному документі HTML текст Yahoo Developer Network перетворений на посилання (переглянути ).
<!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>Link Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> A link to the YDN <a href="http://developer.yahoo.com">Yahoo Developer Network</a> </body> </html>
Анкер має декілька атрибутів, які можна використовувати:
href – ресурс, на який вказує анкер (зовнішній файл або ID анкера).
id – ID анкера, якщо анкер є метою, а не посиланням.
title – додаткова інформація про зовнішній ресурс.
Зовнішні й внутрішні посилання
Приклад зовнішнього посилання:
<a href="http://uk.wikipedia.org/">uk.wikipedia.org</a>
У прикладі атрибут href має значення "http://uk.wikipedia.org", яке є повною адресою uk.wikipedia.org і називається URL (Uniform Resource Locator/універсальний локатор ресурсу). Зверніть увагу, що "http://" завжди повинно входити до складу URL-ів.
Якщо ви робите посилання між сторінками на одному web-сайті, то не треба вказувати повну адресу (URL) документа. Наприклад, якщо у вас дві сторінки (назвемо їх page1.htm і page2.htm), збережені в одній папці, ви можете зробити посилання з однієї сторінки на іншу, просто надрукувавши ім'я файлу на посиланні. Тобто посилання з page1.htm на page2.htm буде виглядати так:
<a href="page2.htm">Натисніть для переходу на сторінку 2</a>
Крім тексту, в якості посилань можна використовувати і малюнки. Зображення в цьому випадку треба помістити між тегами <a> і </a>. Приклад:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Посиланя</title>
</head>
<body>
<a href="sample.html">
<img src="images/sample.gif" width="50" height="50" alt="Приклад">
</a>
</body>
</html>
Прив'язки
Прив'язка CSS до HTML-коду
Прив'язка CSS до HTML-коду. Існує кілька способів прив'язки CSS в документі HTML. Найкращим є спосіб прикріплення каскадних списків стилів окремим файлом з розширенням css. Також властивості можна прописувати всередині документа у вигляді класів і застосовувати класи стилів до елементів сторінки, або прописувати css -властивості для елементів сторінки всередині тегів за допомогою властивості style = "".
Розміщення стилів у окремому файлі
В html таблиця стилів css прив'язується в тезі <head> у вигляді:
<head> <link href="style.css" type="text/css" rel="stylesheet"> </head> href = "style.css" - шлях до таблиці стилів css, вказується URL або просто ім'я CSS файлу, якщо він знаходиться в тому ж каталозі, що і html файл; type = "text/css" - тип завжди text/css; rel = "stylesheet" - даний атрибут вкаже, що цей файл є таблицею стилів для html.
Запишемо в блокноті код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example 2</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <a href=" http://wiki.tneu.edu.ua./">Головна сторінка</a> <a class ="my" href="http://wiki.tneu.edu.ua/index.php?title=4_Посилання_та_прив’язки">Посилання та прив’язки</a> </body> </html>
та збережемо, як index.html.
Створимо в блокноті новий документ, запишемо код:
a: link {
color: green;/ * змінюємо колір всіх невідвіданих посилань на сторінці " * /
}
a.my {
color: red/ * створюємо новий клас для посилань * /
}
Збережемо його в ту-ж директорію де лежить записаний вище index.html з ім'ям style.css.
Ми прикріпили файл списку стилів style.css до документа index.html, вміст index.html. Переглянути приклад
Перевага цього способу полягає в тому що один файл списку стилів можна прикріпити до кількох документів html, і для зміни стилів цих сторінок не доведеться редагувати код кожної сторінки, достатньо буде змінити опис стилів в одному файлі сss, що дуже зручно при редагуванні сайту з десятками і сотнями сторінок.
Розміщення стилів CSS всередині HTML
При розміщенні опису стилів всередині документа використовується тег <style type="text/css"></style>. Цей тег зазвичай розміщується всередині <head></head>, але це не обов'язково, головне, опис стилю повинен бути розміщеним вище місця його застосування в коді. Приклад:
<head>
<style type="text/css">
.moj2 {
color: #6633FF;
}
</ style>
</head>
