Тег
Тег используется для вставки изображений в HTML-страницу. Он имеет два обязательных атрибута: src и alt . Изображения в интернете играют одну из ключевых ролей. Они активно применяются в оформлении сайтов, в ссылках (вставкой их в тег ), наглядно дополняют текстовую информацию и т.д. Если тег используется внутри ссылки или задает карту изображений, то вокруг самого изображения некоторые браузеры отображают рамку, которую можно убрать при помощи атрибута border .
Важным моментом при включении изображения в страницу является его размер (вес) в килобайтах, а точнее соотношение вес-качество. Естественно, чем меньше вес изображений - тем быстрее загрузится страница. В основном в сети используются графические форматы JPEG, GIF и PNG, которые вполне отвечают данным требованиям.
Также, для ускорения загрузки страниц рекомендуется устанавливать атрибуты width и height , тега . Тогда браузер не будет ожидать полной загрузки изображения, он просто выделит под него место и будет загружать страницу дальше, а его подгрузит потом. К тому же, если одно изображение используется на странице несколько раз (значение атрибута src одинаковое), то браузер загружает его с сервера только один раз, а потом берет из кэш-памяти.
Атрибуты
Личные атрибуты:
- align - Устанавливает положение изображения относительно окружающего контекста.
- alt - Обязательный атрибут. Альтернативный текст, если в браузере отключен показ изображений.
- border - Устанавливает размер рамки вокруг изображения.
- height - Переопределяет высоту изображения.
- hspace - Размер боковых полей изображения от его краев до окружающего контекста.
- ismap - Позволяет использовать серверные карты изображений.
- src - Обязательный атрибут. Указывает адрес местонахождения изображения.
- title - Выводит «всплывающую» подсказку при наведении курсора мыши на изображение.
- usemap - Позволяет использовать клиентские карты изображений.
- vspace - Устанавливает размер верхних и нижних полей изображения от его краев до окружающего контекста.
- width - Переопределяет ширину изображения.
- accesskey - устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class - задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir - указывает направление текста внутри элемента.
- - задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang - указывает язык, на котором написан текст внутри HTML-элемента.
- style - необходим для применения встроенных стилей CSS к тегу.
- tabindex - устанавливает порядок табуляции между элементами (клавиша Tab).
- title - выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: изображения .
Модель тега: inline (встроенный, уровня строки).
Может содержать: данный элемент является пустым/Empty.
Открывающий тег: необходим. Закрывающий тег: запрещен.
Синтаксис
Пример HTML: применение тега IMG
А вы знаете, что такое знак
Результат.
Поддержка версиями HTML
Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | |
Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
Поддержка: | Да | Да | Да | Да | Да |
Тагже картинку можно сделать фоном документа. Это прописывается в открывающем тэге :
Атрибут «align» есть и у картинок:
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать «right»:
Но это не все:
— текст располагается внизу картинки
— посередине
— вверху
Кроме атрибута «align» для тэга можно ввести еще несколько атрибутов:
(1) — vspace=»10″
>
(2) — hspace=»30″
>
(3) — title=»колобок»
>
(4) — width=»100″
>
(5) — height=»200″
>
(6) — border=»5″
>
(7) — alt=»рисунок»
>
(1) — атрибут «vspace» — задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. «Pixel» — минимальная единица изображения, точка. Например, разрешение экрана 800х600 — 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.
(2) — атрибут «hspace» — тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
(3) — атрибут «title» — краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза – «колобок».
(4) атрибут «width» — ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).
(5) — атрибут «height» — высота самой картинки (тоже в пикселях).
(6) – атрибут «border» — рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут «border» равным нулю.
(7) — атрибут «alt» — краткое описание картинки. В нашем случае это будет фраза – «рисунок» . Если параметр «alt» не задавать, описания не будет. А при заданном «alt», в случае если картинка по каким-то причинам не загружена браузером, можно увидеть надпись, для чего картинка предназначена.
Как мы помним, атрибуты для одного тэга могут употребляться одновременно друг с другом. Введем следующие атрибуты для нашей картинки:
Наша картинка будет прижата к правому краю экрана, высота изображения — 100 пикселей, ширина изображения — 150 пикселей, и если вы наведете на картинку курсор, то появиться надпись – «колобок» .
В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Для вывода изображений в html существует единственный тег .
1. Синтаксис тега
Описание изображения " src ="URL " [атрибуты ]>
Обратите внимание, что данный тег является одиночным и не требует закрывающего тега .
Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL . Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.
Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.
Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.
2. Как вставить в html картинку
Для вставки картинки в html используется тег . Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.
Пример 2.1. Использование тега
... ...
Этот код
В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src="/img/kartinka.jpg", т.е. указывается относительный адрес.
Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.
Пример 2.2. Вывод нескольких картинок в html друг за другом
... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.
Пример 2.3. Использование альтернативного текста (alt) в img
Рекомендуется прописывать альтернативный текст (атрибут alt) в теге , чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.
... Пример изображения " src ="321.jpg "> ...
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.
Теперь рассмотрим подробно все атрибуты тега .
3. Атрибуты и свойства тега
1. Свойство align="параметр" - определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
- left - выравнивание по левому краю
- middle - выравнивание середины изображения по базовой линии текущей строки
- bottom - выравнивание нижней границы изображения по окружающему тексту
- top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
- right - выравнивание по правому краю
Пример 3.1. Выравнивание изображения в html по правому краю
... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...
Преобразуется на странице в следующее:
2. Свойство alt="текст" - подсказка/описание картинки. Выполняет сразу две важные функции:
- Выдает подсказку при наведении
- Если в браузере отключены изображения, то выводится этот текст
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.
Пример 3.2. Вывод картинки в html с рамкой (границей)
... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...
Преобразуется на странице в следующее:
4. Свойство bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.
Пример 3.3. Вывод картинки в html с цветной рамкой
... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...
Результат можно видеть чуть выше.
ПримечаниеАтрибуты border и bordercolor можно задать в стилях CSS к img:
... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...
5. Свойство height="ЧИСЛО" - задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.
6. Свойство width="ЧИСЛО" - задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.
7. Свойство hspace="ЧИСЛО" - задает горизонтальный отступ изображения в пикселях от других объектов html.
8. Свойство vspace="ЧИСЛО" - задает вертикальный отступ изображения в пикселях от других объектов html.
ПримечаниеВместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:
- margin-top: X px; (X - отступ сверху)
- margin-bottom: Y px; (Y - отступ внизу)
- margin-left: L px; (L - отступ слева)
- margin-right: R px; (R - отступ справа)
Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.
Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.
... margin-top:10px; margin-left:50px " src ="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...
Преобразуется на странице в следующее:
В данном примере - отступ сверху составил 10 пикселей, слева 50 пикселей.
9. Свойство class="имя_класса" - можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.
4. Как сделать картинку ссылкой
Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег тегом (ссылкой).
Например
... Адрес_изображения "> ...
5. Как скруглить углы у картинки
https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg " style ="border-radius: 30px ">
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.
Прежде, чем ответить на вопрос «как вставить картинку в HTML? », следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.
При создании веб-сайтов чаще всего используют графические форматы PNG , GIF и JPEG , а для дизайнерских работ с изображениями - графический редактор Adobe Photoshop , обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.
Как вставить изображение в HTML?
Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:
,
где xxx - адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:
Однако скоростной и стабильный интернет добрался ещё не во все уголки земного шара, и бывает так, что изображение на веб-сайте попросту не загружается. Для таких случаев существует понятие альтернативного текста.
Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок ». Добавляется он с помощью атрибута alt тега .
Пример добавления альтернативного текста к графическому файлу:
Назначение размеров картинки в HTML
Для того чтобы изменить размеры отображения графического файла, используют теги height и width , где height - высота, а width - ширина, измеряемые в пикселях.
При использовании данных атрибутов браузер сначала выделяет место для графического контента, подготавливает общий макет страницы, отображает текст, после чего загружает саму картинку.
Рисунок помещается в прямоугольник с заданными размерами, а в том случае, если параметры меньше или больше исходных, картинка растягивается или сжимается.
Если атрибуты height и width не используются, браузер загружает изображение сразу, задерживая отображение текста и прочих элементов страницы.
Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).
Например:
Следует помнить, что в тот момент, когда вы изменяете исходный размер изображения, необходимо сохранять его пропорции.
Для этого достаточно указать значение только одного из параметров (ширины или высоты ), а значение второго браузер вычислит в автоматическом режиме.
Расположение картинки в HTML
Как и ко многим тегам HTML, к применим атрибут align , который выполняет выравнивание изображения:
- картинка располагается выше текста;
- картинка располагается ниже текста;
- картинка располагается слева от текста;
- картинка располагается справа от текста.
Картинка-ссылка
Делается это следующим образом:
Как видите, графическая вставка может быть ссылкой и при клике переадресовывать на любой адрес, записанный в полном или сокращённом варианте.
Как можно сделать картинку фоном в HTML?
Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx” , где xxx - адрес картинки, указанный таким же способом, как в примерах выше.
Для примера зададим такую текстурную картинку в роли фоновой:
Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:
Фон с текстом.
Фоновая картинка на странице задана.
HTML тегиЗначение и применение
Изображения в HTML документе определяются тегом .
Обращаю Ваше внимание, что элемент имеет два обязательных атрибута : src , который определяет URL адрес изображения (допускается использовать как абсолютный, так и относительный адрес) и alt , который указывает альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено).
Поддержка браузерами
Тег | Opera | IExplorer | Edge |
|||
---|---|---|---|---|---|---|
Да | Да | Да | Да | Да | Да |
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
align | left right top bottom middle | Не поддерживается в HTML5.
Определяет выравнивание изображения в соответствии с окружающими элементами. |
alt | text | Определяет альтернативный текст для изображения (для того случая, если изображение по каким-то причинам не было загружено). |
border | pixels | Не поддерживается в HTML5.
Определяет ширину границы вокруг изображения. |
crossorigin | anonymous use-credentials |
Атрибут определяет, используется ли при загрузке изображения. Изображения, загруженные с помощью CORS , могут использоваться в элементах |
height | pixels | Определяет высоту изображения. |
hspace | pixels | Не поддерживается в HTML5.
Определяет пробелы слева и справа от изображения. |
ismap | ismap | Сообщает браузеру, что изображение является серверной картой-изображением. |
longdesc | URL | Определяет URL адрес с аннотацией к изображению (URL более длинного, чем в атрибуте alt , описания изображения). |
src | URL | Задает URL адрес изображения (допускается использовать как абсолютные, так и относительные адреса). Является обязательным атрибутом. |
usemap | #mapname | Ссылается на элемент |
vspace | pixels | Не поддерживается в HTML5.
Определяет пробелы сверху и снизу изображения. |
width | pixels | Определяет ширину изображения. |
Пример использования
Результат добавления изображения, с помощью тега на HTML страницу.