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


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

<a href=“file.html”> 
текст посилання, який бачить користувач
</a> 

Тег посилання називається <a> і в нього є обов'язковий атрибут href, в значенні якого ми вказуємо на той файл, на те місце в документі, або на ту сторінку іншого сайту, куди хочемо перейти. У вмісті цього тега необхідно написати той текст, який побачить користувач. За замовчуванням, це текст синього кольору і підкреслений.

Посилання можуть бути двох видів:

1. Відносні посилання, які використовуються для переміщення всередині нашого документа.

<a href=“orders/order.html”> 
подивитися замовлення, яке знаходитися в папці orders
</a> 

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

<a href=“http://yandex.ua/” target=”_blank”> 
сторінка yandex.ua відкриється в новій вкладці
</a> 

У тега посилання існує атрибут - target. Якщо вказати target ="_blank" , То це означає, що дана сторінка відкриється в новій вкладці браузера.

Якоря в гіперпосиланнях

За допомогою гіперпосилань можна переміщатися не тільки між сторінками документа, але і всередині даної сторінки. Це буває дуже корисно, коли ваша стаття складається з кількох розділів і має досить об'ємний вміст. У цьому випадку розумно буде використовувати так звані якорі, щоб швидко переходити в певний розділ. У тому елементі, на який нам слід перейти, потрібно визначити унікальний ідентифікатор. Для цього існує атрибут id, який можна визначати практично для будь-якого HTML тега. Назва ця атрибута може бути будь-яким і обов'язково має бути унікальним. У значенні атрибута href тега-посилання ставиться символ решітки, після якого вказується ім'я того ідентифікатора, до якого необхідно звернутися.

<a href=“#p10”>прочитати 10 параграф</a>  
<h1 id=“p10”>  Ось і довгоочікуваний параграф </h1>