EasyCode365EasyCode365

Посилання та зображення

Вітаємо на наступному кроці у веброзробці! До цього моменту твої сторінки, ймовірно, виглядали як прості текстові документи. Сьогодні ми це змінемо. Посилання — це ключова можливість, яка насправді робить World Wide Web саме "павутиною". У цьому уроці ти навчишся з'єднувати сторінки між собою та оживляти їх зображеннями.

Поїхали!

Створення гіперпосилань (тег <a>)

Щоб створити посилання в HTML, ми використовуємо так званий тег "anchor", який записується як <a>. Сам по собі цей тег робить небагато, тому що ти маєш вказати браузеру, куди саме має вести посилання.

Для цього використовується атрибут. Уяви, що атрибут — це спеціальна інструкція всередині HTML-тега. Для посилань обов'язковий атрибут називається href (hypertext reference). Саме атрибут href містить адресу призначення.

Ось як записується просте текстове посилання:

Лише читання
<a href="https://www.example.com">Відвідай наш сайт!</a>

У цьому прикладі текст "Відвідай наш сайт!" стає клікабельним, а href каже браузеру, куди перевести користувача.

Схема тега anchor із позначенням відкривального тега, URL у href, target blank, видимого тексту посилання та закривального тега.

Додавання зображень (тег <img>)

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

На відміну від тега anchor, тег зображення є "самозакривним", його також називають порожнім елементом. Це означає, що він не обгортає текст, тому йому не потрібен закривальний тег </img>. Він просто вставляє зображення прямо на сторінку.

Для коректної роботи тегу <img> потрібні два дуже важливі атрибути:

  • src (Source): Вказує браузеру, де саме знаходиться файл зображення.
  • alt (Альтернативний текст): Текстовий опис зображення.

Чому alt настільки важливий? Ти завжди маєш додавати атрибут alt! Якщо зображення не завантажиться або завантажується занадто довго, браузер покаже цей текст замість нього. І що найважливіше — це критично для доступності сайту. Люди з порушеннями зору використовують скрінрідери, які озвучують сторінки, а текст alt безпечно описує зображення для них.

Ось як виглядає повний тег зображення:

Лише читання
<img src="puppy.jpg" alt="Пухнасте цуценя золотистого ретривера грається на траві.">

Схема тега зображення з позначенням шляху src, тексту alt та атрибутів width і height.

Велика ідея: абсолютні та відносні шляхи

Коли ти використовуєш атрибут href або src, ти передаєш браузеру "шлях" до конкретного файлу. Є два основні типи шляхів, і розуміння різниці між ними — дуже важливий крок для початківців.

Абсолютні шляхи Уяви абсолютний шлях як повну поштову адресу. У справжній адресі є країна, область, місто, вулиця і номер будинку, щоб точно знайти місце. У вебі абсолютний шлях завжди починається з протоколу на кшталт https:// і містить повне доменне ім'я сайту. Абсолютні шляхи використовують, коли ти посилаєшся на інші сайти.

Відносні шляхи Уяви відносний шлях як інструкцію, як пройти від того місця, де ти вже стоїш. Замість повної адреси можна сказати: "зайди в кімнату поруч" або "піднімися на один поверх". У вебі відносні шляхи використовуються для посилань на файли або зображення у твоєму власному проєкті.

Наприклад, якщо у тебе є зображення в папці "images" поруч із поточною сторінкою, можна використати такий відносний шлях:

Лише читання
<img src="./images/pic.jpg" alt="Гарний захід сонця.">

./ просто підказує браузеру почати пошук у поточній папці.

Клікабельні зображення

Тепер, коли ти знаєш, як створювати посилання та зображення, ти можеш поєднати їх! Якщо хочеш, щоб зображення працювало як кнопка й відкривало нову сторінку, просто обгорни тег <img> у тег <a>.

Ось короткий приклад клікабельного зображення:

Лише читання
<a href="https://www.example.com">
  <img src="./images/button.png" alt="Натисни тут, щоб перейти на сайт нашого спонсора.">
</a>

Підсумок

Чудова робота! Тепер ти вмієш з'єднувати вебсторінки та додавати медіа. Коротко повторимо головне:

  • Гіперпосилання: Використовуй тег <a> з атрибутом href, щоб створювати текстові посилання.
  • Зображення: Використовуй самозакривний тег <img> з атрибутом src, щоб показувати картинки.
  • Доступність: Завжди додавай змістовний текст alt до зображень для скрінрідерів і надійності.
  • Абсолютні шляхи: Використовуй повні адреси (https://...) для посилань на інші сайти.
  • Відносні шляхи: Використовуй локальні шляхи (./...) для файлів усередині свого проєкту.
  • Клікабельні зображення: Можна зробити зображення клікабельним, якщо помістити елемент <img> всередину елемента <a>.