Html5 img: Атрибут align | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

Изображения | WebReference

Для встраивания изображения в документ используется элемент <img>, имеющий два обязательных атрибута — src и alt. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив <img> внутрь <a>.

Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выполняющие функцию ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.

Далее описаны атрибуты элемента <img>, отвечающие за отображение изображений и их характеристики.

alt. Устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке поисковикам и другим автоматизированным системам, которые пока не распознают изображения. В качестве значения атрибута alt служит любая подходящая текстовая строка. Если она содержит пробелы, то её обязательно надо брать в двойные или одинарные кавычки.

height и width. Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width. Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент <img>. В случае отсутствия родительского контейнера, его роль играет окно браузера. Иными словами, width=100% означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута width или height сохраняет пропорции и сооотношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

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

src. Адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается полный или относительный путь к файлу.

Добавление изображения на страницу с учётом этих атрибутов продемонстрировано в примере 1.

Пример 1. Использование <img>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Изображения</title> </head> <body> <img src=»image/redcat.jpg» alt=»Рыжая кошка»> </body> </html>

Если после добавления изображения оно не отображается на веб-странице, проверьте следующие моменты.

Имя файла должно писаться с учётом регистра. Операционная система Linux, на базе которой преимущественно устанавливается хостинг, щепетильно относится к именам файлов, поэтому файлы img.png, IMG.png и Img.png воспринимаются как разные. Чтобы указанная особенность не привела к ошибкам с отображением рисунков, всегда задавайте имена файлов в нижнем регистре. Иными словами пишите их маленькими буквами.
Графические файлы с русскими символами в названиях файлов не всегда корректно отображаются в браузерах. Лучше использовать для этого латинские символы.

<img>
<picture>
Выравнивание картинок
Добавление медиа-контента
Масштабирование картинок
Подрисуночная подпись
Форматы графических файлов

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

HTML тег img

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

Тег <img> имеет два обязательных атрибута: src и alt.

Технически изображения не вставляются в HTML страницу, а подключаются к HTML странице.

Чтобы создать ссылку-изображение на другой документ, поместите элемент <img> внутри тега <a>.

Разница между HTML 4.01 и HTML5

Атрибуты align, border, hspace и vspace не поддерживаются в HTML5.

Различия между HTML и XHTML

HTML тег <img> — одиночный элемент без закрывающего тега. В XHTML тег <img> должен закрываться должным образом, а именно — <img />.

Атрибуты тега <img>

Атрибут	Описание
align	Определяет горизонтальное выравнивание содержимого элемента
alt	Определяет альтернативный текст, если элемент не удается отобразить
border	Определяет толщину рамки вокруг элемента
height	Определяет высоту изображения
hspace	Определяет величину отступов слева и справа от изображения
ismap	Определяет, что изображение является серверной картой-изображением.
longdesc	Определяет гиперссылку на подробное описание изображения
src	Определяет URL изображения
usemap	Определяет картинку, как клиентскую карту-изображение
vspace	Определяет величину отступов сверху и снизу от изображения
width	Определяет ширину изображения

Общие атрибуты

Тег <img> поддерживает общие атрибуты и атрибуты-события.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <img> со следующими стилями

img { 
    display: inline-block;
}

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

Вставляем изображение:

<img src='smiley.gif' alt="Smiley face">

HTML img src Attribute

❮ HTML тег

Пример

Изображение размечено следующим образом:

Попробуйте Себя »

Определение и использование

Обязательный атрибут src указывает URL-адрес изображения.

Существует два способа указать URL-адрес в src атрибут:

1. Абсолютный URL

— Ссылки на внешнее изображение, которое размещено на другом сайте. Пример: src=»https://www.w3schools.com/images/img_girl.jpg».

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

2. Относительный URL-адрес — Ссылки на изображение, размещенное внутри веб-сайт. Здесь URL-адрес не включает доменное имя. Если URL-адрес начинается без косой черты, это будет относительно текущей страницы. Пример: src=»img_girl.jpg». Если URL-адрес начинается с косой черты, он будет относиться к домену. Пример: src=»/images/img_girl.jpg».

Совет: Почти всегда лучше использовать относительные URL-адреса. Они не сломается, если вы смените домен.

Примечание: A сломан значок ссылки и текст alt отображаются, если браузер не может найти изображение.

Поддержка браузера

Атрибут
источник	Да	Да	Да	Да	Да

Синтаксис

Значения атрибутов

Значение	Описание
URL-адрес	URL изображения. Возможные значения: Абсолютный URL-адрес — указывает на другой веб-сайт (например, src=»http://www.example.com/image.gif») Относительный URL-адрес — указывает на файл на веб-сайте (например, src=»image.gif»)

Значение

Описание

URL-адрес

URL изображения.

Возможные значения:

Абсолютный URL-адрес — указывает на другой веб-сайт (например, src=»http://www.example.com/image.gif»)
Относительный URL-адрес — указывает на файл на веб-сайте (например, src=»image.gif»)

❮ HTML-тег

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.