#7 Гіперпосилання

Головною ознакою гіпертекстового документу є наявність гіперпосилань на інші документи. Для створення в документі гіперпосилання використовують тег a з атрибутом href.

Загальний вигляд гіперпосилання:

<a href = "адреса посилання"> текст або зображення </a>

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

Текст гіперпосилання відрізняється від іншого тексту кольором, або підкресленням. Зображення на якому здійснюється посилання не виділяється. При наведенні курсору миші на активний елемент, курсор виглядатиме як вказіний палець.

Адреса посилання

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

Зовнішні посилання. Поняття URL

Всі документи в інтернеті мають рядок посилання, що називається URL (уніфікований вказівник ресурсу). URL має таку структуру:

протокол//доменне ім'я/шлях/документ


Наприклад:

https://www8.hp.com/ua/ru/home.html

  1. https: - протокол
  2. www8.hp.com - доменне ім'я
  3. ua/ru/ - шлях
  4. home.html - документ

В URL, після шляху замість html документу може бути будь-який документ, або запит. Це залежить від походження URL

Розглянемо приклад посилань на сайти відомих футбольних клубів:

<h4> Сайти футбольних клубів</h4>
<ol>
<li> <a href = "http://www.fcdynamo.kiev.ua/"> Динамо Київ </a>
<li> <a href = "https://www.realmadrid.com/"> Реал Мадрид </a>
<li> <a href = "https://fcbayern.com/en"> Баварія Мюнхен </a>
</ol>
Вправа №1
Створіть гіперпосилання на сайти районів м.Києва:
  • Дніпровський район
  • Деснянський район
  • Печерський район
URL сайтів знайдіть в мережі Інтернет.

Внутришні гіперпосилання

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

<a href = "шлях/документ"> текст або зображення посилання </a>

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

Наприклад посилання із lesson1.html на документ lesson2.html
<a href = "lesson2.html"> Урок 2 </a>


Якщо документ на який здійснюється посилання знаходиться в папках на нижщих рівнях дерева папок, то перед ім'ям файлу вставляються список всіх папок на шляху через слеш /.

Наприклад посилання із index.html на документ lesson1.html
<a href = "physics/lesson1/lesson1.html"> Урок 1 </a>


Якщо документ на який здійснюється посилання знаходиться в теках на вищих рівнях дерева папок, то перед ім'ям файлу вставляється ../ стільки разів скілки рівнів гілки перед документом.

Наприклад посилання із lesson2.html на документ index.html

<a href = "../../index.html"> Головна сторінка </a>


Веб сайт - це структура папок і документів які пов'язані між собою гіперпосиланнями. Розглянемо декілька випадків переходу з одного документу в інший:

Вправа №2
Завантажте файл з завданням та виконайте його.


Вправа №3
Завантажте архів сторінок сайту . Розархівуйте файли та зв'яжіть сторінки сайту між собою через необхідні гіперпосилання на пунктах меню та на фразах "Повернутися на головну".