"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Оптимизация сайта
Дополнительно


Реклама на сайте:



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


папка digest

Статья № 2

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

Для добавления изображений на страницу вы также можете воспользоваться свойством каскадных таблиц стилей (CSS)

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

Важно знать. Если вы создаете сайт с нуля, то полезно создать отдельную папку для хранения всех используемых на нем изображений.
Обычно ей дают имя images либо img.


Вставка изображения (картинки) на страницу в HTML

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

src – содержит ссылку до изображения, может быть как абсолютной (ссылка до файла, который находится на другом сайте), так и относительной (ссылка до файла, который находится на вашем сайте). Допустимые форматы: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, SVG и Base64.

Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.

align – задает выравнивание изображения относительно рядом находящегося текста (создание обтекания изображения текстом).
Допустимые значения: top, bottom, middle, left и right.

Пример использования:

<img src="/img/logo.png" align="right" />

Как вставить изображение (картинку) в таблицу

Без разницы куда вы хотите вставить изображение на сайте, например это может быть таблица или, блок div. Во всех случаях вставка осуществляется все по тому же принципу:

<table>
	<tr>
		<td>Картинка</td>
		<td>
			<img src="/img/logo.png" alt="картинка">
		</td>
	</tr>
</table>

Картинка ссылка в HTML

Очень часто возникает вопрос у молодых вебмастеров, как сделать картинку ссылкой? На самом деле все очень просто. Для этого достаточно обрамить тег <img >тегом <a >(ссылкой).
Кроме того, что ссылка может вести на другую страницу, она например может быть якорем.

<a href="/about_us" title="Главная">
	<img src="/img/logo.png" alt="Логотип">
</a>

Использование альтернативного текста (alt) в img

Многие не раз слышали что, рекомендуется прописывать альтернативный текст (атрибут alt) в теге <img>, чтобы застраховать себя от случая, что картинка не доступна. В первом варианте мы не задавали размеры картинки. Во втором варианте мы задаем размеры картинки.

На примере видно использование альтернативного текста.

1.<img src="pictures.jpg">
2.<img width="400" height="50" alt="Пример изображения" src="321.jpg">

 





Создано|Обновлено: 23.11.2020.