HTML с нуля: как вставить картинку в HTML. Урок №5 Overcod.net

HTML с нуля: как вставить картинку в HTML. Урок №5

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

Изображения на веб-страницах могут быть фоновые или обычные. В чем их отличие?

Фоновое изображение — это картинка, которая размещается на заднем плане веб-страницы. Сверху можно добавлять текст, изображения, таблицы и другие элементы.
Обычное изображение — это отдельный элемент, который отталкивает другие элементы страницы.

Для веб-страниц рекомендуется использовать форматы изображений: JPEG (JPG), GIF, PNG.

Как сделать картинку фоном в HTML

Для этого используется атрибут <background> у тега <body>:

<body background="название_картинки.jpg">

Пример: файл картинки «fon.jpg» должен находиться рядом с HTML-файлом.

<html>
<head>
  <title>Моя первая HTML-страница на overcod.net</title>
</head>
<body background="fon.jpg">
  Здравствуйте, это моя первая страница на overcod.net.
</body>
</html>

Важно: Название файла должно быть написано латиницей!

Как вставить картинку в HTML

Для вставки изображения используется тег <img> с атрибутом src, указывающим путь к файлу:

<img src="название_картинки.jpg">

Пример:

<html>
<head>
  <title>Моя первая HTML-страница на overcod.net</title>
</head>
<body>
  <img src="kartinka.jpg">
  Здравствуйте, это моя первая страница на overcod.net.
</body>
</html>

Как вставить картинку из папки

Если изображение находится в папке, укажите путь:

<img src="img/название_картинки.jpg">

Для картинок с других сайтов:

<img src="https://www.overcod.net/images/example.jpg">

Как выровнять картинку в HTML

Используйте атрибут align:

left — по левому краю, текст обтекает справа.
right — по правому краю, текст обтекает слева.

<img src="kartinka.jpg" align="right">

Как сделать отступы от картинки

Используйте атрибуты hspace (горизонтальные отступы) и vspace (вертикальные отступы):

<img src="kartinka.jpg" hspace="20" vspace="20">

Как задать размер изображения

Атрибуты width и height задают ширину и высоту:

<img src="kartinka.jpg" width="100" height="50">

Как добавить рамку к изображению

Атрибут border задает толщину рамки:

<img src="kartinka.jpg" border="3">

Полный пример

Объединим все вышеперечисленное:

<html>
<head>
  <title>Моя первая HTML-страница на overcod.net</title>
</head>
<body background="fon.jpg">
  <h2>Моя мечта!</h2>
  <img src="https://www.overcod.net/images/example.jpg" 
       title="Добро пожаловать на overcod.net!" 
       align="right" hspace="20" vspace="20">
  <p>У меня есть мечта:</p>
  <p>&#8594; Путешествовать по миру;</p>
  <p>&#8594; Создавать интересные проекты;</p>
  <p>&#8594; Зарабатывать больше;</p>
  <p>&#8594; Иметь больше времени для творчества.</p>
</body>
</html>

Попробуйте реализовать эти примеры самостоятельно! 🌟