🧱

Модуль 1. Введение и HTML

Занятие 7
Изображения

Сегодня мы сделаем галерею из трёх картинок с подписями и научимся правильно описывать изображения.

👀

Сегодня сделаем вот такое

🖼

Картинка — это отдельный файл

HTML не хранит картинку внутри себя.

Он говорит браузеру: «возьми файл вот отсюда и покажи здесь».

📁 my-site
  ├ index.html
  └ 📁 images
      └ cat.jpg

🏷

Тег <img>

  • Одиночный — закрывать не нужно
  • src — где лежит файл
  • alt — что на картинке
  • width — ширина в пикселях
<img src="/images/cat.svg"
     alt="Рыжий кот улыбается"
     width="180">
🧭

Путь к файлу

  • cat.jpg — в той же папке
  • images/cat.jpg — в папке images
  • ../cat.jpg — на папку выше

Буква в букву! cat.JPG ≠ cat.jpg

🦻

alt — голос картинки

  • 🔊 Программы для незрячих читают alt вслух
  • 📶 Картинка не загрузилась — видно alt
  • 🔍 Поисковики понимают, что на картинке

Справа путь сломан — и alt нас спас.

<img src="/images/kot.svg"
     alt="Рыжий кот спит на подоконнике"
     width="200">
✍️

Хороший и плохой alt

❌ alt="картинка"
❌ alt="IMG_2034"
❌ alt=""
✅ alt="Рыжий кот спит на подоконнике"

Опиши картинку так, будто рассказываешь другу по телефону.

🗒

Подпись: figure + figcaption

  • figure — картинка и подпись вместе
  • figcaption — подпись, её видят все
  • alt — замена картинки, figcaption — подпись к ней
<figure>
  <img src="/images/dog.svg"
       alt="Весёлая собака" width="160">
  <figcaption>Пёс Бобик</figcaption>
</figure>
©️

Чьи это картинки?

  • 📸 Свои фото и рисунки — можно
  • 🆓 Бесплатные фотостоки — можно
  • 🔎 «Нашёл в поиске» — нельзя без разрешения
  • ✍️ Указывай автора

У каждой картинки есть автор.

🃏

Запомни!

  • <img src="…" alt="…">Изображение
  • width="200"Ширина в пикселях
  • images/photo.jpgПуть к файлу в папке images
  • <figure>Картинка вместе с подписью
  • <figcaption>Подпись к картинке
⌨️

Практика: Галерея из 3 изображений

  1. Вставь три картинки из /images с шириной 150 пикселей.
  2. Каждой картинке напиши понятный alt.
  3. Оберни каждую картинку в figure и добавь подпись figcaption.
  4. Сломай путь в src у одной картинки и посмотри, где пригодился alt.

🚀 Со звёздочкой: Сделай картинку-ссылку: оберни img в тег a, который ведёт на страницу о животном.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Подбери 3–5 картинок для своего будущего проекта и запиши, откуда они взяты.