На седьмом уроке по HTML и CSS мы погрузимся в мир визуального контента. Вы узнаете, как превратить сухой текст в яркую историю с помощью изображений.
Картинки это не просто украшение. Они:
- Увеличивают время пребывания на странице на 40%
- Улучшают восприятие информации на 65%
- Повышают доверие к контенту
Но как правильно их использовать? Сейчас разберёмся!
Тег <img> наш главный инструмент
Базовый синтаксис:
<img src="путь/к/изображению.jpg" alt="Описание">
Атрибут src: указываем источник
Пути бывают:
- Относительные (для локальных файлов):
<img src="images/photo.jpg"> <img src="../cats/kitty.png">
- Абсолютные (для внешних ресурсов):
<img src="https://example.com/image.png">
Используйте CDN для тяжелых изображений, это ускорит загрузку!
Атрибут alt: доступность и SEO
Правила хорошего тона:
- Описывайте содержание:
alt="Рыжий кот на подоконнике" - Для декоративных изображений:
alt="" - Никогда не пропускайте этот атрибут!
Пример для слепых пользователей:
<img src="chart.png" alt="График роста продаж за 2025 год:
увеличение на 27% в третьем квартале">
Управление размерами: width и height
Лучшие практики:
- Всегда сохраняйте пропорции
- Используйте CSS для сложных сценариев
- Указывайте размеры для предотвращения смещения контента
Пример с сохранением пропорций:
<img src="mountains.jpg" width="800" height="450">
Ошибка новичка:
<!-- Искажение изображения! --> <img src="portrait.jpg" width="300" height="200">
Практические задания
Задание 1: Базовая вставка
Создайте структуру:
project/
├── index.html
└── assets/
└── images/
├── logo.png
└── banner.jpg
Вставьте изображение логотипа с:
- Относительным путем
- Alt текстом «Логотип школы веб-разработки»
- Размерами 150×150 пикселей
Задание 2: Галерея путешествий
Создайте раздел с 3 изображениями:
- Горизонтальный пейзаж (1200×800)
- Квадратный портрет (600×600)
- Вертикальное фото (400×800)
Используйте разные подходы к указанию размеров. Добавьте содержательные alt-тексты.
Хотите глубже погрузиться в мир веб-разработки? Присоединяйтесь к полному курсу HTML/CSS для начинающих.