HTML. Зображення та гіперпосилання на вебсторінці

Опрацюйте теоретичний матеріал:

Зображення роблять вебсторінку привабливою та інформативною.

Для вбудовування зображення використовують одинарний тег <img>.

На веб-сторінці зображення додається за допомогою тегу <img src="...">, а гіперпосилання створюються за допомогою тегу <a>...</a>.

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

Як вставити зображення:

1. Використовуйте одинарний тег <img src="ім'я_файлу.jpg">.

2. Атрибут src вказує на файл зображення (наприклад, .jpg, .png, .gif).

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

1. Тег <img>

Тег <img> (image) — це одинарний тег, який не має закриваючого тегу. Він вставляє зображення у документ.

Приклад:

2. Гіперпосилання на вебсторінці

Гіперпосилання (посилання) — це елемент вебсторінки, який дозволяє переходити на іншу вебсторінку, інший розділ цієї ж сторінки або завантажувати файли.

Тег <a>

Для створення гіперпосилань використовують парний тег <a> (anchor - якір).

Типи гіперпосилань

Синтаксис:

Приклад використання target="_blank":

Цей атрибут вказує браузеру відкрити посилання у новій вкладці.

Практичне завдання

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

Щоб зображення відображалося на вебсторінці, браузер має його знайти. Для цього потрібно правильно вказати шлях у тезі <img>.

Правило розміщення файлів

💡 Золоте правило: Файл зображення має бути доступний і розміщений відносно вашого HTML-файлу, як ви вказуєте в атрибуті src.

Приклад:

Середовище: http://htmlbook.in.ua/htmledit.html