Урок 3: Додавання зображень і посилань — Бо хто ж хоче нудну веб-сторінку?

Урок 3

Урок 3: Додавання зображень і посилань — Бо хто ж хоче нудну веб-сторінку?

Вітаємо на Уроці 3! На цей момент ваша веб-сторінка може нагадувати шкільну доповідь, але ми ось-ось це виправимо. Сьогодні ми додамо трохи перцю у вигляді зображень і посилань — адже ніщо не каже «професійно», як сторінка, повна фотографій котиків і клікабельних мемів. Давайте виведемо вашу сторінку з «та таке» на «оце так!» за допомогою кількох простих тегів!

Додавання зображень: Картинка варта тисячі слів (і менше зівання)

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

Ось як це робиться:

Варіант 1: Використовуємо зображення з інтернету

Знайшли картинку в інтернеті? Чудово! Клацніть правою кнопкою миші на зображенні, відкрийте його в новій вкладці, скопіюйте URL і вставте його в атрибут src, як тут:

<img src="https://example.com/your-image.jpg" alt="Опис зображення">
  • src: Посилання на ваше зображення (це як GPS, який каже браузеру, де знаходиться зображення).
  • alt: Короткий опис на випадок, якщо зображення не завантажиться або ваші друзі все ще користуються діал-апом.

Варіант 2: Використовуємо локальне зображення з вашого комп’ютера

Є картинка на комп’ютері? Чудово! Збережіть її в папку вашого проекту (скажімо, в папку images) і вкажіть шлях до неї в атрибуті src, як тут:

<img src="images/my-local-image.jpg" alt="Опис локального зображення">

Приклад:

<!-- Зображення з інтернету -->
<img src="https://example.com/cool-cat.jpg" alt="Дуже крутий кіт на пляжному лежаку">

<!-- Локальне зображення -->
<img src="images/my-local-cat.jpg" alt="Місцевий кіт, який дивиться на вас з осудом зі свого місця на робочому столі">

Завдання: Додайте зображення на свою сторінку

Знайдіть зображення — кумедне, надихаюче або просто дивне — і додайте його на свою сторінку. Можете використовувати URL з інтернету або локальне зображення зі свого комп’ютера. Не забудьте про alt-текст, бо що може бути професійніше, ніж добре описане зображення?

Додавання посилань: Дайте людям можливість кудись перейти

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

Ось магічна формула:

<a href="https://www.example.com">Натисніть тут, щоб побачити щось круте!</a>
  • href: Це те, куди приведе ваше посилання (ніякого GPS не потрібно, але це як цифрова адреса).
  • Текст між <a> і </a> — це те, що побачать і на що натискатимуть ваші відвідувачі — зробіть його спокусливим!

Приклад:

<a href="https://www.cats.com">Подивіться на колекцію наймиліших котів!</a>

Завдання: Створіть кілька посилань

Додайте посилання на свій улюблений сайт — це може бути блог, YouTube-канал або остання сенсація TikTok. Головне, щоб це було весело (або принаймні корисно).

Відкриття посилань у новій вкладці

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

Ось як це зробити:

<a href="https://www.cats.com" target="_blank">Подивіться на цих милих котиків у новій вкладці!</a>

Тепер відвідувачі можуть насолоджуватися безкінечними картинками котиків, не покидаючи вашу сторінку. Виграш!

Хостинг оновленої сторінки за допомогою Caddy

Тепер ваша сторінка виглядає набагато цікавіше. Давайте знову використаємо Caddy, щоб показати її світові (або хоча б вашим друзям).

Крок 1: Відкрийте термінал

Перейдіть до папки, в якій збережений ваш HTML-файл. Мабуть, він знаходиться у вашій надійній папці проекту:

cd ~/my-website

Крок 2: Запустіть Caddy

Використайте цю команду, щоб хостити сайт локально на порту 8080:

caddy file-server --listen :8080

Крок 3: Перегляньте свою сторінку

Відкрийте браузер і перейдіть на http://localhost:8080, щоб побачити свою оновлену сторінку. Тепер вона має зображення, посилання та всі прикраси, на які вона заслуговує!

Підсумок:

У цьому уроці ви навчилися:

  • Додавати зображення на веб-сторінку за допомогою тега <img> (як з інтернету, так і з локальних файлів).
  • Створювати клікабельні посилання за допомогою тега <a>.
  • Відкривати посилання в новій вкладці за допомогою target="_blank" (бо хто ж любить втрачати відвідувачів?).

Ваша веб-сторінка офіційно перейшла від текстової до мультимедійної! Наступного разу ми займемося формами, щоб ви могли взаємодіяти зі своїми відвідувачами. Готуйтеся до ще більшої магії HTML!

HTML  Початківці  Веб-дизайн  Caddy 

See also