06. Картинки и ссылки
Сегодня ты сделаешь свой сайт живым и интересным! Мы научимся добавлять картинки и делать ссылки — чтобы переходить на другие страницы и сайты, как в настоящем интернете!
Сайт без картинок — как комикс без рисунков. А ссылки — это дороги, по которым мы путешествуем по интернету!
Что такое картинка на сайте
Чтобы вставить картинку, используется тег <img>. Он сам закрывается — у него нет пары.
<img src="cat.jpg" alt="Мой кот">
Что значат атрибуты
- src — путь к файлу картинки (от слова “source” — источник).
- alt — короткое описание картинки (показывается, если файл не загрузился).
alt — важен! Он помогает людям с нарушением зрения и поисковикам понимать, что на изображении.
Пример: добавляем картинку в страницу
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой котик</title>
</head>
<body style="background-color: lightyellow; text-align: center;">
<h1>Это мой кот Барсик </h1>
<img src="cat.jpg" alt="Барсик лежит на диване" width="300">
<p>Он очень ленивый и любит спать!</p>
</body>
</html>
Сохрани файл как index.html и помести картинку cat.jpg в ту же папку, где лежит файл сайта. Если всё сделано правильно, браузер покажет твоего котика!
Как добавить картинку из интернета
Можно вставить и картинку с сайта, просто указав ссылку на неё:
<img src="https://placekitten.com/300/200" alt="Котик с сайта">
Что такое ссылка 🔗
Чтобы сделать ссылку, используется тег <a> (от слова “anchor” — якорь).
<a href="https://example.com">Перейти на сайт</a>
- href — адрес, куда ведёт ссылка.
- Текст между тегами <a>…</a> — то, на что нажимают мышкой.
Пример: добавим ссылку на Википедию
<p>Хочешь узнать больше про кошек?</p>
<a href="https://ru.wikipedia.org/wiki/Кошка" target="_blank">Открыть статью в Википедии </a>
Атрибут target="_blank" делает так, чтобы ссылка открывалась в новой вкладке.
Мини-задание
1️⃣ Добавь картинку своего любимого персонажа — из мультика, игры или фильма. 2️⃣ Под ней напиши пару предложений о нём. 3️⃣ Сделай ссылку на страницу с информацией о нём (например, на Википедии).Пример:
<h1>Соник — самый быстрый ёж!</h1>
<img src="sonic.jpg" alt="Соник бежит" width="300">
<p>Соник — герой игр от SEGA. Он бегает быстрее звука!</p>
<a href="https://ru.wikipedia.org/wiki/Sonic_the_Hedgehog">Подробнее о Сонике</a>
Добавляем кнопку-ссылку
Хочешь сделать красивую кнопку? Можно просто оформить ссылку как кнопку:
<a href="https://example.com" style="display:inline-block; padding:10px 20px; background-color:skyblue; color:white; border-radius:8px; text-decoration:none;">Нажми меня!</a>
Забавный факт
Первая в мире ссылка в интернете вела на... другую страницу про гиперссылки! Это была страница проекта CERN, где учёные изобрели WWW (World Wide Web).Главное запомни
- <b><img></b> — вставляет картинку, обязательно с атрибутами src и alt.
- <b><a href="..."></b> — создаёт ссылку на другую страницу или сайт.
- <b>target="_blank"</b> открывает сайт в новой вкладке.
- Все файлы (HTML и картинки) должны лежать рядом — в одной папке проекта.
Мини-тест
- Что делает тег <img>?
- Зачем нужен атрибут alt?
- Как сделать, чтобы ссылка открывалась в новой вкладке?