Урок 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 

Смотрите также