«Виртуальный выделенный сервер» — специальные технологии, которые позволяют разделить несколько серверов в одном физическом носителе. Часто такие виды хостинг услуги называют VDS (Virtual Dedicated Server) и VPS (Virtual Private Server). Такие сервера дают вам сильный и крутой IT инструмент пользователям, ведь благодаря серверам вы можете открыть для себя большой спектр возможностей. Однако мы знаем точно, […]
154 просмотров
3 минут
Содержание
Нет времени читать статью?
Но вам требуется продвижение сайта или создание сайта-лидера, идеального для SEO? Тогда вы можете оставить заявку на продвижение или заявку на создание сайта. Если вы собираетесь продвигать сайт самостоятельно — продолжайте чтение!
Все знают, что если текст содержит сопутствующие картинки с наглядной демонстрацией тех или иных действий, восприятие информации посетителем возрастает в несколько раз.
Для добавления изображения на страницу с HTML разметкой существует специальный тег <img>, но том, как им пользоваться, знают далеко не все. В рамках данной статьи мы приведем инструкции с методами работы с данным инструментов и расскажем, какие атрибуты он поддерживает.
Вставка изображения на страницу в HTML
Как сказано выше, для вставки картинки применяется тег <img>, и разметке HTML он выглядит вот так:
<img src="/img/logo.webp">
Так он обозначен в XHTML:
<img src="/img/logo.webp" />
Разница только в слеше (косой линии), вставляемой в конце. Однако это лишь топорная, быстрая вставка изображения без каких-либо атрибутов.
Так тег используется с рекомендуемым атрибутом alt:
<img src="/img/logo.webp" alt="Логотип">
Таким образом, в момент неполной прогрузки сообщения демонстрируется ссылка на файл.
Далее речь пойдет обо всех возможных атрибутах тега <img>.
Список существующих атрибутов тега <img> в HTML
Помните, чтобы выставить тот или иной атрибут изображению, нужно использовать пробел.
SRC — данный атрибут содержит адрес используемой картинки. Ссылка может быть абсолютной, если изображение находится на вашем сайте, и относительной, в случае, если файл расположен на другом ресурсе. Поддерживаются как распространенные, так и менее популярные форматы, включая стандартные PNG, BMP, JPG и даже Base64.
Вот как выглядит код если нужно применить тег с абсолютным адресом:
<img src="https://example.com/img/logo.webp" />
Вот его вид с относительной ссылкой:
<img src="/img/logo.webp" />
ALT — у этого атрибута задача проста — он показывает текст с подсказкой в случае если изображение не появилось или повредилось:
<img src="/img/logo.webp" alt="Логотип" />
ALIGN — выравнивает изображение в зависимости от расположения текста, но в HTML 5 не поддерживается:
<img src="/img/logo.webp" align="right" />
BORDER — выставляет ширину рамки вокруг картинки. Также не поддерживается в HTML 5. Пример:
<img src="/img/logo.webp" border="2px" />
HEIGHT — выставляет высоту изображения в величинах px, % и т.д:
<img src="/img/logo.webp" height="200px" />
WIDTH — ширина изображения, выставляемая в тех же величинах, что и предыдущие атрибуты:
<img src="/img/logo.webp" width="200px" />
HSPACE — устанавливает горизонтальный отступ:
<img src="/img/logo.webp" hspace="20px" />
VSPACE — определяет вертикальный отступ от картинки:
<img src="/img/logo.webp" vspace="20px" />
В HTML 5, как и некоторые вышеупомянутые атрибуты, не поддерживается.
LONGDESC — содержит ссылку с дополнительным TXT файлом, в котором находится расширенное описание картинки. По аналогии с атрибутом SRC его адрес может быть относительным или абсолютным:
<img src="/img/logo.webp" longdesc="/img/desc-logo.txt" />
CROSSORIGIN — атрибут, с помощью которого использовав кросс-доменный запрос можно вставить картинку, расположенную на любом другом ресурсе. Имеет несколько значений. Пример:
<img src="https://example.com/img/logo.webp" crossorigin="anonymous" />
SRCSET — использование атрубита выводит общий список файлов, который располагается в зависимости от заданных параметров величины, ширины или плотности экрана:
<img src="/img/logo.webp" srcset="/img/logo-min.webp 320w, /img/logo-mid.webp 480w, /img/logo-full.webp 768w" /> <img src="/img/logo.webp" srcset="/img/logo-mid.webp 2x" />
SIZES — регулирует размер картинок, параметры которых указаны в атрибуте srcet:
<img src="/img/logo.webp" srcset="/img/logo-min.webp 320w, /img/logo-full.webp 768w" sizes="(max-width: 600px) 300px, (min-width: 600px) 600px" />
Принцип работы следующий: в случае, если разрешение дисплея, с которого просматривается страница, ниже значения 600 px, задается ширина картинки не более 300 px, и наоборот. Стоит помнить, что описанные атрибуты не имеют поддержки обозревателей на платформах Android, и некорректно отображаются в IE (Internet Explorer).
USERMAP — атрибут связывает картинку с картой, заданной в параметрах <map>:
<img src="/img/logo.webp" usemap="#my_point">
ISMAP — при использовании инструмент связывает картинку с одной из областей серверной карты. Пример использования в HTML:
<a href="/map/ismap.php"> <img src="/img/logo.webp" ismap> </a>
Так тег применяется в XHTML:
<a href="/map/ismap.php"><img src="/img/logo.webp" ismap="ismap" /></a>
Кроме прочего, <map> поддерживает атрибуты Class и iD, и через него напрямую может быть произведено встраивание стилей:
<img src="/img/logo.webp" style="width: 200px; border: 0" />
Если пользователю это необходимо, он может заменить некоторую часть атрибутов <map> стилями.
Как вставить изображение (картинку) в таблицу?
Куда бы вы не хотели вставить картинку, принцип работы с кодом будет один и тот же:
<table>
<tbody>
<tr>
<td>Наш логотип:</td>
<td><code><img src="/img/logo.webp" alt="Логотип" />
</code></td>
</tr>
</tbody>
</table>
Как видим, всё просто. Изображение может быть вставлено и в таблицу, и в блок div — во всех случаях алгоритм не меняется.
Как сделать изображение (картинку) ссылкой в HTML?
Если вы хотите, чтобы изображение стало кликабельным и по нажатию осуществлялось перенаправление на страницу вашего или любого другого сайта, следует обернуть её в тег <a>:
<a title="О нас" href="/about"><img src="/img/logo.webp" alt="Логотип" /></a>
Кроме банального перенаправления, изображение может быть использовано как якорь.