Використання посилань і зображень на веб-сторінці

Посилання

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

Посилання створюються за допомогою дуже простого і короткого тега <a>. Наприклад:

<a href="https://www.google.com.ua"> Google </a>

Тег <a> без адреси не використовують, так як він описує посилання, яке нікуди не веде.

Адреса посилання задається за допомогою атрибута href.

Значенням атрибута є URL, який зазвичай називають просто адреса. Адреси бувають різні: абсолютні, відносні, що вказують на сторінку, на файл, зображення, що містять якір і так далі. А значить і посилання може вказувати на будь-який об'єкт в Інтернеті.

Абсолютні адреси

Абсолютні адреси містять в собі протокол, ім'я сервера і шлях. Абсолютна адреса однозначно вказує розташування документа. Браузер просто відповідає на запит (за вказаним протоколом із зазначеного сервера) документа із зазначеним шляхом.

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

http://site.ru/pages/tips/tips1.html

//site.ru/pages/tips/tips1.html

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

http://site.ru/index.html

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

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

Відносні адреси

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

Шлях для відносних посилань має три спеціальні позначення:

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

./  вказує на поточну папку.

../  піднятися на одну папку (директорію) вище.

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

Якір

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

<a href="#p1">Про нас</a>

Зображення-посилання

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

Спливаюча підказка

Для того, щоб додати посиланням підказку, треба використовувати атрибут title. наприклад:

<a title="Підказка" href="#">

Підказка з'явиться, коли курсор затримається над посиланням деякий час.

Зображення

HTML-зображення додаються на веб-сторінки за допомогою тега <img>.

Елемент <img> представляє зображення і його резервний контент, який додається за допомогою атрибута alt. Так як елемент <img> є рядковим, то рекомендується розташовувати його всередині блокового елемента, наприклад, <p> або <div>.

Тег <img> має обов'язковий атрибут src, значенням якого є абсолютний або відносний шлях до зображення:

<img src = "image.png" alt = "Назва зображення">

Адреса зображення

1.Адреса зображення може бути вказана повністю (абсолютний URL).

2 Або ж через відносний шлях від документа або кореневого каталогу сайту.

Розміри зображення

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

<img width="100" src="...">