1. 1. Структура посилання
2. 2. Абсолютний і відносний шлях
3. 2.1. абсолютний шлях
4. 2.2. Відносний шлях
5. 3. Якорі
6. 4. Як зробити зображення-посилання
7. 5. Як зробити посилання на телефонний номер, скайп або адресу електронної пошти
8. 6. Атрибути посилань

HTML-посилання створюються за допомогою елементів <a>, <area> і <link>. Посилання являють собою зв'язок між двома ресурсами, одним з яких є поточний документ.

1. Структура посилання

Гіперпосилання створюються за допомогою парного тега <a> </a>. Всередину тега поміщається текст, який буде відображатися на веб-сторінці. Текст посилання відображається в браузері з підкресленням, колір шрифту - синій, при наведенні на посилання курсор миші змінює вид.

Обов'язковою параметром тега <a> є атрибут href, який задає URl-адреса веб-сторінки.

Посилання складається з двох частин - покажчика та адресної частини. Покажчик посилання являє собою фрагмент тексту або зображення, видимі для користувача. Адресна частина посилання користувачеві не видно, вона являє собою адресу ресурсу, до якого необхідно перейти.

Адресна частина посилання складається з URl. URl (Uniform Resource Locator) - уніфікований адресу ресурсу. При створенні адрес для поділу слів між собою рекомендується використовувати дефіс, а не символ підкреслення. У загальному вигляді URl що має такий вигляд:

Метод доступу, або протокол, здійснює обмін даними між робочими станціями в різних мережах. Найбільш поширені протоколи передачі даних:

file забезпечує читання файлу з локального диска:

http надає доступ до веб-сторінці по протоколу HTTP:

https - спеціальна реалізація протоколу HTTP, яка використовує шифрування (як правило, SSL або TLS)

ftp здійснює запит до FTP-сервера на отримання файлу:

mailto запускає сеанс поштового зв'язку із зазначеним адресатом і хостом:

Ім'я сервера описує повне ім'я машини в мережі, наприклад, site.ru. Якщо ім'я сервера не вказано, то посилання вважається локальної, тобто вона відноситься до тієї ж машині, на якій знаходиться HTML-документ, що містить посилання.

Номер порту ТСР, на якому функціонує веб-сервер. Являє собою число, яке необхідно вказувати, якщо метод вимагає номер порту (окремі сервера можуть мати свій відмітний номер порту). Якщо порт не вказаний, за замовчуванням використовується порт 80. Стандартними портами є:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP

Шлях містить ім'я папки, в якій знаходиться файл.

2. Абсолютний і відносний шлях

Коли на засланні вказується тільки ім'я файлу, браузер передбачає, що файл знаходиться в тій же папці, що і документ, що містить гіперпосилання. На практиці веб-сайти містять сотні документів, які розміщують в окремі папки, щоб ними було легше керувати. Щоб створити посилання на файл, що знаходиться поза папки, що містить поточний документ, необхідно вказати розташування файлу або шлях. HTML підтримує два види шляху: абсолютний і відносний.

2.1. абсолютний шлях

Абсолютний шлях вказує точне місце розташування файлу в межах всієї структури папок на комп'ютері (сервері). Абсолютний шлях до файлу дає доступ до файлу зі сторонніх ресурсів і містить наступні компоненти:
1) протокол, наприклад, http (опціонально);
2) домен (доменне ім'я або IP-адреса комп'ютера);
3) папка (ім'я папки, що вказує шлях до файлу);
4) файл (назва файлу).

Існує два види запису абсолютного шляху - із зазначенням протоколу і без нього:

Якщо файл знаходиться в кореневій папці, то шлях до файлу буде наступним:

При відсутності імені файлу буде завантажуватися веб-сторінка, яка задана за замовчуванням в налаштуваннях веб-сервера (так званий індексний файл).

Зазвичай в якості індексного файлу виступає документ з ім'ям index.html. Наявність завершального слеша / означає, що звернення йде до папки, якщо його немає - безпосередньо до файлу.

2.2. Відносний шлях

Відносний шлях описує шлях до зазначеного документу щодо поточного. Шлях визначається з урахуванням місця розташування веб-сторінки, на якій знаходиться посилання. Відносні посилання використовуються при створенні посилань на інші документи на одному і тому ж сайті. Коли браузер не знаходить на засланні протокол http: //, він виконує пошук зазначеного документа на тому ж сервері.

Відносний шлях містить наступні компоненти:
1) папка (ім'я папки, що вказує шлях до файлу);
2) файл (назва файлу).

Шлях для відносних посилань має три спеціальні позначення:
/ Вказує на кореневу директорію і говорить про те, що потрібно почати шлях від кореневого каталогу документів і йти вниз до наступної папки
./ вказує на поточну папку
../ піднятися на одну папку (директорію) вище

Головна відмінність відносного шляху від абсолютного в тому, що відносний шлях не містить імені кореневої папки і батьківських папок, що робить адресу коротше, і в разі переїзду з одного домену на інший не потрібно прописувати новий абсолютний адресу. Але якщо сторонній ресурс буде посилатися наприклад, на ваші зображення з відносними адресами, то вони не будуть відображатися на іншому сайті.

3. Якорі

Якоря, або внутрішні посилання, створюють переходи на різні розділи поточної веб-сторінки, дозволяючи швидко переміщатися між розділами. Це виявляється дуже зручним у випадку, коли на сторінці занадто багато тексту. Внутрішні посилання також створюються за допомогою тега <a> з різницею в тому, що атрибут href містить ім'я покажчика - так званий якір, а не URl-адреса. Перед ім'ям покажчика завжди ставиться знак #.

Наступна розмітка створить зміст з швидкими переходами на відповідні розділи:

Якщо потрібно зробити посилання з однієї сторінки сайту на певний розділ іншої сторінки, то необхідно задати id для цього розділу сторінки, а потім додати його до абсолютного адресою посилання:

4. Як зробити зображення-посилання

Щоб зробити клікабельно зображення, необхідно помістити елемент <img> всередину тега <a>. Щоб посилання відкривалася в іншому вікні, потрібно додати атрибут target = "_ blank" для посилання.

5. Як зробити посилання на телефонний номер, скайп або адресу електронної пошти

У посилань з'явилися нові можливості - при натисканні можна не тільки переходити на інші сторінки і завантажувати файли, але і здійснювати дзвінки на телефони, відправляти повідомлення або дзвонити по скайпу.

6. Атрибути посилань

Елемент <a> підтримує глобальні атрибути і власні.

<a href="/images/logo.png" download> <img src = "/ images / logo.png" alt = "logo"> </a>

<a href="/images/logo.png" download="logo"> <img src = "/ images / logo.png" alt = "logo"> </a>

<a href="files/20022014.pdf" download="Отчет Лютий 2014.pdf"> Завантажити звіт за Лютий 2014 </a>

<a href="http://www.anysite.ru" hreflang="en"> Anysite </a>