Урок 9. Лінки — 1

Гіперлінки та Якорі

Гіперлінк — це «адреса» документу чи будь-якого ресурсу в мережі інтернет. Гіперлінком можна позначити будь-який веб-ресурс: сторінку HTML, зображення, медіа-файл і так далі.

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

HTML-елемент Якір <a> використовуєтья для означення не тільки якорів, але й гіперлінків. Тому надалі я буду називати елемент <a> коли він переводитиме кліком на іншу частину одного й того ж самого документу якорем, а коли переводитиме на інший HTML-документ, лінком.

Правила написання лінка:

<a href=»інтернет-адреса»>Текст лінка</a>

Стартовий тег a містить в собі атрибут href, який робить зі звичайного якоря гіперлінк. 
Між відкриваючим та закриваючим тегами знаходиться текст, який будуть читати в браузері (і клікати по ньому) відвідувачі вашої сторінки. Майте на увазі, що зміст між тегами не обов’язково має бути текстом. Завжди можна залінкувати картинку 🙂

Пам’ятаєте, як додаються атрибути? До тега a після атрибута href можна додати атрибут target, який пояснює браузеру, в якому вікні відкривати лінк. За замовчуванням гіперлінк відкривається в тому ж самому вікні браузера. Додайте до тега target значення _blanktarget=»_blank»; і гіперлінк відкриється в новій вкладці:

<a href=»http://www.Blox.ua/» target=»_blank»>Створи блог!</a>

Якщо ми хочемо пролінкувати між собою частини однієї й тієї ж самої замітки, слід використовувати атрибут name.

Як зробити якір:

<a name=»comment»>Коментарі</a> (позначаємо заголовок тієї частини тексту, до якої хочемо перейти за допомогою лінка, в лапках a name знаходиться назва якоря)

Лінк до якоря з того ж самого документа:

<a href=»#comment»>Перейти до коментарів</a>

Позначка «#comment» вказує браузеру, що цей лінк веде до якоря з назвою comment.

Лінк до заякорених коментарів з іншої інтернет-сторінки:

<a href=»Інтернет-адреса сторінки#comment»>Перейти до коментарів</a>

Слід пам’ятати, що не можна різним якорям давати однакові назви. Якщо подтрібно зробити переходи на декілька фрагментів тексту з коментарями, відмічайте їх як comment1 і comment2.

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

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

Сьогодні домашнього завдання не буде, а у вівторок ви знов зустрінетеся з Алісою, що пояснюватиме, як за допомогою CSS стилізувати всі ваші лінки 🙂

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*