Создание веб-сайтов
Изображений
Изображения могут использоваться для задания тона веб-страницы.
Изображения должны
- Быть актуальным
- Передать информацию
- Передать правильное настроение
- Быть узнаваемым
- Соответствовать цветовой палитре
Хорошей практикой является хранение всех ваших изображений в папке. Это поможет сохранить порядок.
Добавление изображений
‹изображение›
Вы должны использовать ‹img›, чтобы добавить изображение на страницу. Он имеет два атрибута:
- src: Это сообщает браузеру, где он может найти файл изображения.
- alt: текстовое описание изображения. Он должен быть точным, чтобы его мог понять программа чтения с экрана (для людей с нарушениями зрения).
Я создал папку для своих изображений, чтобы она выглядела примерно так:
Я бы написал это как images/Untapped 2.png в своем коде, чтобы он отображал изображение. Это может отличаться в зависимости от имени папки и имени изображения, но должно выглядеть примерно так:
<!DOCTYPE html> <html> <head> <title>Tile of the Page</title> </head> <body> <img src="images/Untapped 1.png" alt="for description"> <img src="images/Untapped 2.png" alt="for description"> <img src="images/Untapped 3.png" alt="for description"> </body> </html>
Высота ширина
Вы также можете добавить два других атрибута, которые будут указывать его размер:
- height: высота изображения в пикселях
- width: ширина изображения в пикселях
<!DOCTYPE html> <html> <head> <title>Tile of the Page</title> </head> <body> <img src="images/Untapped 1.png" alt="for description" height="600" width="500"> <img src="images/Untapped 2.png" alt="for description" height="600" width="500"> <img src="images/Untapped 3.png" alt="for description" height="600" width="500"> </body> </html>
Где размещать изображения
Место, где вы разместите изображение, повлияет на то, как оно будет отображаться. Вот некоторые примеры,
- Перед абзацем: абзац начинается после изображения.
<img src="images/Untapped 1.png" alt="for description" height="600" width="500"> <p>Something something something</p>
2. Внутри начала абзаца: первая строка текста будет совмещена с нижней частью изображения.
Читай полную статью здесь:
https://ivanh.substack.com/p/html-essentials-a-beginners-guide-00d