HTML первые шаги - урок 6 - Изображения

04/12/2019, by Ivan

Изображения на сайте очень важный элемент, без них сайт выглядит серо и некрасиво. Изображения используются для оформления сайта, для фотогалерей, да и просто картинки.

Вставляются изображения с помощью тега IMG (заметьте, что мы пишем не полностью image, а только img). Тег IMG одинарный <img />, то есть без парного тега.

Основным атрибутом тега IMG является атрибут src. Он работает как href у ссылки, в атрибут src мы должны вставить путь к картинки. Путь как и в ссылках можно писать относительный или абсолютный.

Это код нашего index.html:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>  
    <h1>Мой первый HTML-документ</h1>
    <p>
      <a href="files/file.html">Ссылка на второй документ</a>
    </p>
  </body>
</html>

Давайте теперь создадим папку images рядом с этим файлом. В папку images мы скопируем файл изображения. Допустим имя изображения будет image.jpg. Давайте вставим тег img в текст index.html.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>  
    <h1>Мой первый HTML-документ</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">Ссылка на второй документ</a>
    </p>
  </body>
</html>

Тег мы вставили теперь давайте писать путь к изображению, будем писать относительный путь, начнем его с ./

./

Теперь добавим имя папки в которой лежит изображение

./images/

И дальше пишем имя файла:

./images/image.jpg

И теперь вставляем путь к файлу в атрибут src.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>  
    <h1>Мой первый HTML-документ</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">Ссылка на второй документ</a>
    </p>
  </body>
</html>

Сейчас изображение отображается в оригинальном размере, но мы можем задать его размер с помощью атрибутов высоты и ширины.

Атрибут ширины у тега img - width. Атрибут высоты - height. Мы можем задавать только ширину изображения, только высоту или же высоту и ширину одновременно. Например так:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>  
    <h1>Мой первый HTML-документ</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">Ссылка на второй документ</a>
    </p>
  </body>
</html>

Или только высоту:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>  
    <h1>Мой первый HTML-документ</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">Ссылка на второй документ</a>
    </p>
  </body>
</html>

Если вы задаете и высоту, и ширину одновременно, то следите чтобы ширина и высота была пропорциональна ширине и высоте оригинального изображения. Иначе вы исказите изображение на сайте.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>  
    <h1>Мой первый HTML-документ</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">Ссылка на второй документ</a>
    </p>
  </body>
</html>

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

HTML первые шаги - урок 6 - Изображения