Перегляд вихідного коду сторінки 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>