Создание веб-сайтов

Изображений

Изображения могут использоваться для задания тона веб-страницы.

Изображения должны

  • Быть актуальным
  • Передать информацию
  • Передать правильное настроение
  • Быть узнаваемым
  • Соответствовать цветовой палитре

Хорошей практикой является хранение всех ваших изображений в папке. Это поможет сохранить порядок.

Добавление изображений

‹изображение›

Вы должны использовать ‹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>

Где размещать изображения

Место, где вы разместите изображение, повлияет на то, как оно будет отображаться. Вот некоторые примеры,

  1. Перед абзацем: абзац начинается после изображения.
        <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