Для добавления картинки на HTML-страницу используется тег IMG. Поддерживаются форматы изображений: PNG, GIF и JPEG. К обязательным атрибутам тега относится атрибут src, в котором указывается адрес файла с изображением.
Простой способ, как вставить картинку на сайт html:
<img src="http://nubex.ru/img.png" />Но в таком виде изображение будет выведено с оригинальными размерами, без выравнивания, без дополнительной информации. Поэтому, для того, чтобы добавить картинку более красиво и правильно, нужно использовать дополнительные параметры. Рассмотрим их более подробно.
Атрибуты тега IMG
Для отображения картинки с помощью тега IMG используются следующие параметры:
- width/height – указывает ширину/высоту изображения (в процентах или пикселях);
- align – выравнивание картинки (right, left, center);
- border – определяет толщину рамки вокруг рисунка (в пикселях). Если атрибут не задан явно, то используется значение по умолчанию (border=0);
- hspace/vspace – указывает размер горизонтального/вертикального отступа от картинки до окружающего контента.
Рассмотрим теперь, как сделать картинку в html коде:
<img src="http://nubex.ru/img.png" width="640" height="480" align="center" border="3" hspace="10" vspace="10" />Здесь размеры указаны в пикселях.
Адаптивные размеры картинки при помощи HTML
Если вы верстаете «резиновый» или «адаптивный» дизайн сайта, то в html код картинки стоит указывать размеры в процентах. Попробуйте создать HTML-страницу с указанным ниже кодом (предварительно поместив рядом с html-файлом картинку с именем “img.jpg”) и изменять размер окна браузера. Вы увидите, что размер картинки будет изменяться в зависимости от размера окна.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Как вставить картинку на HTML-страницу</title>
</head>
<body>
<p>Абзац 1</p>
<img src="img.jpg" width="30%" align="center" border="3" hspace="10%" vspace="10%" />
<p>Абзац 2</p>
</body>
</html>В конструкторе сайтов «Нубекс» добавить картинку можно при помощи средств редактора. Более подробно об этом вы сможете узнать из статьи: Как добавить в текст изображение