- Абсолютні і відносні посилання
- Посилання щодо поточного документа
- Посилання щодо кореня сайту
- види посилань
- звичайна посилання
- відвіданих посилання
- активне посилання
- Атрибут target
- Завантаження файлу
- інші посилання
- Посилання на адресу електронної пошти
- Посилання на Skype
- Посилання на телефон
Посилання є основою гіпертекстових документів і дозволяють переходити з однієї веб-сторінки на іншу. Особливість посилань полягає в тому, що вона може вести не тільки на HTML-документ, але і на документ будь-якого типу, причому він може розміщуватися зовсім на іншому сайті. Головне, щоб до документа, на який робиться посилання, був доступ. Іншими словами, якщо шлях до документа можна вказати в адресному рядку браузера, і документ при цьому буде відкритий, то на нього можна зробити посилання.
Для створення посилання необхідно повідомити браузеру, що є посиланням, а також вказати адресу документа, на який слід зробити посилання. Обидва дії виконуються за допомогою елемента <a>. Загальний синтаксис створення посилань наступний.
<a href="<адрес> "> текст посилання </a>
Атрибут href визначає адресу документа, на який слід перейти, а вміст елемента <a> є посиланням. Текст, розташований між тегами <a> і </a>, за замовчуванням стає синього кольору і підкреслюється. У прикладі 1 показано створення декількох посилань на різні веб-сторінки.
Приклад 1. Додавання посилань
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Посилання на сторінці </ title> </ head> <body> <p> <a href = "dog.html" > Собаки </a> </ p> <p> <a href="cat.html"> Кішки </a> </ p> </ body> </ html>
В даному прикладі створюються два посилання з різними текстами. При натисканні по тексту «Собаки» у вікні браузера відкриється документ dog.html, а при натисканні на «Кішки» - cat.html.
Результат прикладу показаний на рис. 1. Зверніть увагу, що при наведенні курсору миші на посилання змінюється вид курсора, а в рядку стану браузера відображається повний шлях до документа.
Рис. 1. Вид посилань на веб-сторінці
Якщо вказана посилання на документ, якого не існує, наприклад, його ім'я в атрибуті href набрано з помилкою, то таке посилання називається «бита». Битих посилань слід уникати, оскільки вони вводять відвідувачів сайту в оману. Так, при натисканні на посилання з прикладу 1 в браузері Firefox відкриється не сам документ, а вікно з попередженням (рис. 2).
Рис. 2. Результат при відкритті битою посилання
Природно, подібне повідомлення буде відрізнятися в браузерах, але сенс залишається один - документ, на який веде посилання, не може бути відкритий. Щоб не виникало подібних помилок, тестируйте всі посилання на їх працездатність і відразу ж усувайте наявні похибки.
Абсолютні і відносні посилання
Адреса посилання може бути як абсолютним, так і відносним. Абсолютні адреси повинні починатися з вказівки протоколу (http: // або https: //) і містити ім'я домену. Відносні посилання ведуть відлік від кореня сайту або поточного документа.
Протокол для сайту можна не вказувати, в такому випадку посилання буде починатися відразу з // без протоколу. Браузер сам підставить потрібний протокол, на якому працює сайт. У прикладі 2 показано створення подібної посилання.
Приклад 2. Використання посилання
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Абсолютний адреса </ title> </ head> <body> <p> <a href = "// facebook.com "> Facebook </a> </ p> </ body> </ html>
В даному прикладі посилання виду <a href="//facebook.com"> Facebook </a> є абсолютною і веде на головну сторінку Facebook. Врахуйте, що при відкритті такої сторінки в локальному документі відбудеться помилка, оскільки такі посилання працюють тільки на веб-сервері.
Коли в адресі вказується тільки домен (//webref.ru) або після домену йде ім'я папки (//webref.ru/css/), то веб-сервер автоматично завантажує документ, зазвичай з ім'ям index.html або index.php. Таким чином, повний шлях до сайту буде https://webref.ru/index.php, а скорочений - //webref.ru.
Абсолютні посилання зазвичай застосовуються для вказівки на інший ресурс, втім, допустимо робити абсолютні посилання і всередині поточного сайту. Однак подібне практикується нечасто, оскільки такі посилання досить довгі і громіздкі. Тому всередині сайту переважно використовуються відносні посилання.
Посилання щодо поточного документа
При створенні відносних посилань треба розуміти, яке значення для атрибута href слід вказувати, оскільки воно залежить від вихідного розташування файлів. Розглянемо кілька типових варіантів.
1. Файли розміщуються в одній папці (рис. 3).
Рис. 3
Необхідно зробити посилання з вихідного документа source.html на target.html. В такому випадку код буде наступний.
<a href="target.html"> Посилання </a>
2. Файли розміщуються в різних папках (рис. 4).
Рис. 4
Коли вихідний документ зберігається в будь-якої папки, а посилається в корені сайту, то перед ім'ям документа в адресі посилання слід поставити дві крапки і косу риску (/), як показано нижче.
<a href="../target.html"> Посилання </a>
Дві точки в даному випадку означають вийти з поточної папки на рівень вище.
3. Файли розміщуються в різних папках (рис. 5).
Рис. 5
Тепер вихідний файл знаходиться в двох вкладених папках, і щоб послатися на документ в корені сайту, потрібно повторити написання попереднього прикладу два рази.
<a href="../../target.html"> Посилання </a>
Аналогічно іде справа з будь-яким числом вкладених папок.
4. Файли розміщуються в різних папках (рис. 6).
Рис. 6
Тепер ситуація змінюється, вихідний файл розташовується в корені сайту, а файл, на який необхідно зробити посилання - в папці. В цьому випадку шлях до файлу буде наступний.
<a href="folder/target.html"> Посилання </a>
Зауважте, що ніяких додаткових точок перед ім'ям папки немає. Якщо файл знаходиться всередині не однієї, а двох папок, то шлях до нього записується так.
<a href="folder1/folder2/target.html"> Посилання </a>
5. Файли розміщуються в різних папках (рис. 7).
Рис. 7
Кожен файл розташовується в своїй папці і щоб перейти з однієї папки в іншу посилання буде наступною.
<a href="../folder2/target.html"> Посилання </a>
Посилання щодо кореня сайту
Іноді можна зустріти шлях до файлу щодо кореня сайту, він виглядає як "/folder/target.html". Так, запис <a href="/course/"> Курси </a> означає, що посилання веде в папку з ім'ям course, яка розташовується в корені сайту, а в ній необхідно завантажити файл index.html.
Знову ж, така форма запису не працює на локальному комп'ютері, а тільки під управлінням веб-сервера.
види посилань
Будь-яке посилання на веб-сторінці може знаходитися в одному з наступних станів.
звичайна посилання
Такий стан характеризується для посилань, які ще не відкривали. За замовчуванням звичайні текстові посилання зображуються синім кольором і з підкресленням.
відвіданих посилання
Як тільки користувач відкриває документ, на який веде посилання, вона позначається як відвіданих і змінює свій колір на фіолетовий, встановлений за замовчуванням.
активне посилання
Посилання позначається як активна при натисканні на неї. Оскільки клацання відбувається досить швидко, подібний стан посилання вельми короткочасно. Колір такого посилання за замовчуванням червоний.
Атрибут target
Основний атрибут href елемента <a> ми вже освоїли, розглянемо корисний, але необов'язковий атрибут target.
При переході по посиланню документ за замовчуванням відкривається в поточній вкладці браузера. При необхідності ця умова може бути змінено атрибутом target. Синтаксис наступний.
<a target="_blank"> Посилання </a>
Таке посилання відкривається в новій вкладці або вікні браузера. Де саме відкриється посилання, залежить від налаштувань браузера і не може бути задано через HTML. Як правило, посилання відкриваються в новій вкладці.
У прикладі 3 показано, як зробити, щоб посилання відкривалася в новій, а не в поточній вкладці браузера.
Приклад 3. Відкриття посилання в новій вкладці
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Посилання в новій вкладці </ title> </ head> <body> <p> <a href = "page / new .html "target =" _ blank "> Відкрити в новій вкладці </a> </ p> </ body> </ html>
Візуально посилання з атрибутом target і без нього ніяк не відрізняються один від одного, тому слід акуратно використовувати даний атрибут, щоб не ввести користувача в оману.
Завантаження файлу
Браузер самостійно визначає тип документа і відкриває його, якщо може прочитати. Наприклад, при переході по посиланню до текстового документу він відкриється в браузері, а ось zip-архів браузер відкрити не може, тому запропонує користувачеві завантажити його на свій комп'ютер. Для HTML, PDF, текстових документів, зображень, відеофайлів і т. Д. Така поведінка браузера можна змінити і змусити його не відкривати файл за посиланням, а завантажувати його. Для цього до посиланням досить додати атрибут download, як показано в прикладі 4.
Приклад 4. Атрибут download
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Завантажити файл </ title> </ head> <body> <p> <a href = "page / new.html "> Подивитися </a> </ p> <p> <a href="page/new.html" download> Завантажити </a> </ p> </ body> </ html>
При використанні атрибуту download змінюється поведінка браузера, але вигляд самого посилання залишається колишнім.
інші посилання
Ми розглянули посилання на документи по протоколу HTTP або HTTPS, але крім цього існують і інші посилання - на адресу електронної пошти, номер телефону та ін.
Посилання на адресу електронної пошти
Створення посилання на адресу електронної пошти робиться майже також, як і посилання на веб-сторінку. Тільки замість протоколу http вказується mailto, після якого через двокрапку йде сам адреса пошти (приклад 5).
Приклад 5. Посилання на адресу електронної пошти
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Адреса електронної пошти </ title> </ head> <body> <p> <a href = "mailto: vlad @ webref.ru "> Задавайте питання по електронній пошті </a> </ p> </ body> </ html>
В атрибуті href елемента <a> спочатку пишеться ключове слово mailto, потім через двокрапку бажаний поштову адресу. Подібна посилання на свій вигляд нічим не відрізняється від посилання на веб-сторінку, але при натисканні на неї запускається поштова програма, встановлена за замовчуванням. Тому в назві посилання бажано вказувати, що вона має відношення до електронної пошти, щоб читачі розуміли, до чого призведе клацання по ній.
Можна також автоматично додати тему повідомлення, приєднавши до адреси електронної пошти через символ питання (?) Параметр subject з темою повідомлення, як показано в прикладі 6.
Приклад 6. Завдання теми повідомлення
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Тема листа </ title> </ head> <body> <p> <a href = "mailto: vlad @ webref .ru? subject = питання по HTML "> Задавайте питання по електронній пошті </a> </ p> </ body> </ html>
При запуску поштової програми поле Тема (Subject) буде заповнено автоматично.
Посилання на Skype
Для виклику програми Skype ви можете використовувати протокол callto, після якого через двокрапку слід номер телефону або логін користувача (приклад 7).
Приклад 7. Посилання на Skype
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Skype </ title> </ head> <body> <p> <a href="callto:vlad"> Мій Skype </a> </ p> </ body> </ html>
Не всі браузери підтримують такий формат посилань.
Посилання на телефон
На мобільних пристроях ви можете використовувати протокол tel, який дозволяє використовувати посилання для набору номера і виклику абонента. Номер слід вказувати в міжнародному форматі, припустимо вставляти в номер дефіс або писати його разом (приклад 8).
Приклад 8. Посилання на телефон
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Номер телефону </ title> </ head> <body> <p> <a href = "tel: + 1555 2368 "> Телефонуйте нам </a> </ p> </ body> </ html>
При натисканні на такому посиланню відкриється додаток для телефону і почнеться виклик абонента.
Перейти до завдань
Ru?