Картинки в HTML

	HTML
	Картинки в HTML Тематические порталы • Портал Веб-разработчиков • Портал HTML •

Картинки — важный элемент любого сайта, так как они являются неотъемлемой частью оформления сайта (дизайн и общий цветовой фон), а также выполняют роль информативности в качестве фотографий, картинок, графиков для той или иной тематической страницы сайта. Расположение, размер и оформление картинка создаёт общее восприятие сайта и информации опубликованной в нём, поэтому владельцам сайта необходимо уделять внимание этому элементу сайта.

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

Синтаксис картинок в HTML

Тег HTML <img> используется для вставки изображения на веб-страницу. Технический картинки не вставляются в веб-страницу, а они связаны с веб-страницами. Тег <img> создает связь картинки через ссылку с пространством, где она находится.

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

У тега <img> есть два обязательных атрибута:

src - указывает путь к изображению
alt - Задает альтернативный текст для изображения.

Атрибут подсказки картинок

Обязательный атрибут alt предоставляет текст подсказки изображения при наведении курсора на неё. Чтобы сделать эту подсказку необходимо прописать это следующим образом:

<img src="url" alt="текст подсказка">

Свойства картинок

Размер картинки

Можно использовать атрибут "style", чтобы указать ширину и высоту изображения:

<img src="img_girl.jpg" alt="Девочка в юбке" style="width:500px;height:600px;">

Есть также альтернативный способ задать размер картинке:

<img src="img_girl.jpg" alt="Девочка в юбке" width="500" height="600">

Обратите внимание, что задавать параметры размера картинки можно только в пикселях.

Источники картинок

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

<img src="folder_name/img_girl.jpg" alt="Девочка в юбке" width="500" height="600">

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

<img src="https://ru.wikijournal.org/images/img_girl.jpg" alt="Девочка в юбке" width="500" height="600">

Картинка в виде ссылок

Картинка может выступать в качестве ссылки на другой объект внутреннего или внешнего сайта. Это может быть ссылка на более крупное изображение картинки, а также другие страницы сайта в зависимости от стоящей от разработчика задачи. Оформить ссылку картинки можно следующим образом:

<a href="somepage_or_file.html"><img src="folder_name/img_girl.jpg" alt="Девочка в юбке" width="500" height="600"></a>

Расположение картинки

В HTML можно задать расположение картинки на странице, т.е. расположить её слева или справа от текста, при этом задать свойства, чтобы текст не "прилипал" к самому изображению. Сделать это можно следующим образом:

<p><img src="img_girl.jpg" alt="Девочка в юбке" style="float:right;width:42px;height:42px;">
Изображение расположено справа от текста</p>

<p><img src="img_girl.jpg" alt="Девочка в юбке" style="float:left;width:42px;height:42px;">
Изображение расположено слева от текста</p>

Примечание

Подведём итог по данной статье:

Используйте элемент <img> для определения изображения
Используйте атрибут src, чтобы определить URL-адрес изображения.
Используйте атрибут alt, чтобы определить текст для изображения.
Используйте атрибуты width и height, чтобы определить размер изображения.
Используйте свойство float, чтобы изображение перемещалось влево или вправо.

Статьи по теме HTML