4 Посилання та прив’язки

Матеріал з Wiki TNEU
Перейти до: навігація, пошук

Посилання

Посилання є частиною 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>
Особисті інструменти
Простори назв

Варіанти
Дії
Навігація
Інструменти