Картинка в HTML – все о теге IMG. Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Картинка в HTML – все о теге IMG. Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
09.07.2019
Описание
Для вставки графических изображений в HTML-документ используется HTML тег (img
сокращение от англ. слова image
- изображение). Изображения не вставляются напрямую на веб-страницу, тег содержит лишь ссылку на изображение и создает требуемого размера пространство, в котором отображается картинка в графическом формате GIF, JPEG или PNG:
JPG
- наиболее распространенный формат для фотографий. Изображения с расширением.jpg отображают миллионы цветов, что особенно важно для точного отображения различных оттенков и градиентов в фотографиях. Однако, такие изображения не могут содержать прозрачные области.
GIF
используется для простой графики, например, такой как логотипы. Изображения в формате GIF не используются для фотографий, потому что они не могут содержать столько цветовой информации как JPG-изображения. Однако GIF-изображения могут иметь прозрачные области и могут быть сжаты в файлы очень маленьких размеров. Также формат GIF поддерживает анимацию.
PNG
- формат изображений, позволяющий, также как и JPG, отображать миллионы цветов и содержать прозрачные области. Однако, как правило, изображения с расширением.png имеют несколько больший размер, чем JPG или GIF.
HTML тег имеет два обязательных атрибута: src
и alt
.
Атрибут src
выполняет важную роль в отображении графики на странице - задает путь (относительный или абсолютный) к изображению, которое технически не вставляется на страницу: браузер отображает изображение на которое ведет ссылка.
Атрибут alt
задает альтернативный текст для изображения, который будет отображен только в том случае, когда изображение не может быть отображено (указан не правильный путь или картинка была удалена).
При необходимости изображение можно сделать ссылкой, для этого нужно всего лишь поместить тег внутрь элемента . При этом вокруг изображения появится рамка, которая легко убирается с помощью CSS :
Изображения также могут быть использованы в качестве карт-изображений - это когда одно изображение содержит несколько активных областей разной формы, каждая из которых является отдельной ссылкой. Такая карта по внешнему виду ничем не отличается от обычного изображения.
Примечание:
для добавления изображений на веб-страницу вы также можете воспользоваться CSS свойством background-image , которое позволяет обычный задний фон элемента заменить на картинку.
Атрибуты
src:
Указывает браузеру расположение (URL-адрес) нужного изображения.
Пример »
alt:
Предоставляет текстовое описание картинки, выводимое на экран только в случае, если картинка по каким-либо причинам не может быть отображена.
Примечание:
для создания всплывающей подсказки, при наведении курсора мыши на картинку, нужно использовать глобальный атрибут title. В качестве значения атрибута выступает произвольная строка, в которой можно сообщить дополнительную информацию о картинке.
Пример »
Если картинка используется в качестве украшения веб-страницы и не несет в себе никакой смысловой нагрузки, то вместо описания картинки в качестве значения можно оставить пустую строку (alt="").
height:
Указывает высоту изображения в пикселях.
ismap:
Атрибут ismap является атрибутом булева типа. Его присутствие указывает браузеру, что картинка является частью карты-изображения расположенной на сервере (карта-изображение - изображение с интерактивными областями). Допустимые значения логического атрибута ismap:
При нажатиии на интерактивную область карты-изображения, координаты клика отправляются на сервер в строке запроса URL-адреса.
Примечание:
атрибут ismap используется только если элемент является дочерним элементом тега , содержащего атрибут href.
Usemap:
Определяет изображение в качестве карты-изображения. Значение (обязательно должно начинаться с символа "#
"), указанное в данном атрибуте, ассоциируется со значением атрибута name или id тега
Примечание:
атрибут usemap нельзя использовать, если элемент является потомком элемента или
Width:
Указывает ширину изображения в пикселях.
Примечание:
всегда указывайте атрибуты width и height для изображения. В этом случае пространство требуемое для изображения будет заранее резервироваться браузером при загрузке страницы. Поскольку браузер сам не может заранее вычислить размер изображения, без этих атрибутов разметка страницы во время загрузки может отображаться некорректно, до тех пор пока изображение не будет загружено. Это будет особенно ощутимо для тех пользователей, у которых медленный интернет.
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения.
Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов
могут потребоваться специальные средства.
Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также,
как в ссылках. Если забыли посмотрите .
Во всех последующих примерах пути к изображениям
будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.
Фоновые изображения
Фоновое ихображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге
атрибут background="fon.gif"
, рисунком fon.gif будет залито все окно браузера.
Пример кода:
Результат
Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor
. Это связано с тем, что
у пользователя может быть отключена загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать
параметр bgcolor
.
Встраивание изображений
Для размещения на странице изображений используется тег , имеющий единственный обязательный параметр
src
, определяющий URL-адрес изображения.
Пример кода:
Тег img
Остальное содержимое документа
Результат:
Остальное содержимое документа
Согласитесь, текст рядом с картинкой выглядит не очень красиво.
Для того, чтобы наши изображения выглядели так, как нам хочется
их надо выровнять. И поможет нам в этом параметр align
.
У этого параметра есть несколько значений.
Рассмотрим их все на примерах.
Пример кода с параметром align="left"
Тег img с параметром align="left"
Картинка слева, а текст обтекает ее справа и
этот текст может занимать несколько строчек.
Результат:
Картинка слева, а текст обтекает ее справа и
этот текст может занимать несколько строчек.
Пример кода с параметром align="right"
Тег img с параметром align="right"
Картинка справа, а текст обтекает ее слева и
этот текст может занимать несколько строчек.
Результат:
Картинка справа, а текст обтекает ее слева и
этот текст может занимать несколько строчек.
Пример кода с параметром align="top"
Тег img с параметром align="top"
Верхняя граница изображения выравнивается по самому
высокому элементу текущей строки. Изображение
как бы встраивается в строчку. Если изображение
большое, то и строка раздвигается на эту высоту.
Результат:
Верхняя граница изображения выравнивается по самому
высокому элементу текущей строки. Изображение как бы встраивается в строчку. Если изображение
большое, то и строка раздвигается на эту высоту.
Пример кода с параметром align="texttop"
Тег img с параметром align="texttop"
Верхняя граница изображения выравнивается
по самому высокому текстовому элементу
текущей строки (заглавная буква строки).
Результат:
Верхняя граница изображения выравнивается
по самому высокому текстовому элементу текущей строки (заглавная буква строки).
Пример кода с параметром align="middle"
Тег img с параметром align="middle"
Выравнивание
середины изображения по
базовой линии текущей строки.
Результат:
Выравнивание
середины изображения по
базовой линии текущей строки.
* крупный шрифт сделан для наглядности разницы между middle absmiddle
Пример кода с параметром align="absmiddle"
Тег img с параметром align="absmiddle"
Выравнивание
середины изображения посередине текущей строки.
Результат:
Выравнивание
середины изображения посередине текущей строки.
Пример кода с параметром align="bottom"
Тег img с параметром align="bottom"
Выравнивание
нижней границы изображения по базовой линии
текущей строки.
Результат:
Выравнивание
нижней границы изображения по базовой линии текущей строки.
Пример кода с параметром align="absbottom"
Тег img с параметром align="absbottom"
Выравнивание
нижней границы изображения по нижней границе
текущей строки.
Результат:
Выравнивание
нижней границы изображения по нижней границе текущей строки.
Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег с
параметром clear
, который запрещает обтекание. Обтекание можно запретить с правой стороны (right),
с левой стороны (left) и с обеих сторон (all).
Пример кода:
Запрет обтекания картинки
Остальные элементы документа
Результат:
Остальные элементы документа
Размеры изображений
Любое изображение имеет размер, заданный в пикселах. При встраивании изображения
на страницу, возможно вам понадобиться уменьшить размер исходной картинки.
Для этого у тега
существуют параметры width
- ширина и height
- высота. Они задаются в пикселах или в процентах
(процент от ширины экрана)
При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только
имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его
искажению.
Пример кода:
Результат:
Отделение изображения от текста
Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не всегда красиво. Для решения этой
проблемы имеются параметры hspace
- горизонтальный отступ и vspace
- вертикальный
отступ. Отступы задаются в пикселах.
Пример кода:
Тег img с отступами
Остальное содержимое документа
теперь не прилипает к изображению.
Результат:
Альтернативный текст
Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик (в Internet Explorer) или
другую иконку (в других браузерах). Неплохо было бы дать ему подсказку, что изображено на рисунке.
Для этого используется параметр alt
. Текст из этого параметра будет отображаться вместо картинки (если отключен режим загрузки изображений). В случае же, если картинка отображается, этот параметр дает подсказку
при наведении курсора мыши, правда, не во всех браузерах.
Здравствуйте уважаемые читатели блога! В этой статье вы узнаете все о том как вставить изображение на html страницу
. У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Все это легко. Прочитав эту статью, вы сможете без каких-либо трудностей вставлять картинки на свои html страницы. Для этого мы подробно поговорим о теге и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим новые возможности HTML5, которые упрощают вставку видео и аудио на сайт.
Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег . Встретив такой тег с адресом, браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом, а только затем отображает его на Web-странице.
Все графические изображения и вообще любые данные, которые хранятся в отдельных от web-страницы файлах называются внедренными
элементами страницы.
Прежде чем вставлять картинки и подробно рассматривать тег , стоит немного узнать о графических форматах.
Форматы графических изображений.
Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.
1. Формат JPEG
(Joint Photographic Experts Group
). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.
2. Формат GIF
(Graphics Interchange Format
). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.
3. Формат PNG
(Portable Network Graphics
). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.
При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:
JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;
GIF используется в основном для анимации;
PNG — формат для всего остального (иконки, кнопки и др.).
Вставка картинок в html страницы
Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег . Браузер помещает изображение в том месте веб-страницы, где встретит тег .
Код вставки картинки в html
страницу имеет такой вид:
Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src
. Что такое я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла
.
Приведу еще несколько примеров указания адреса файла с изображением:
— этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.
В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:
Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.
Тег является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега
— абзац:
Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:
Тогда html-код страницы со вставленной картинкой будет таким:
Сайт об автомобилях.
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.
Научным языком автомобиль это:
Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.
Классификация автомобилей
Автомобили бывают следующих типов:
Легковой;
Грузовой;
Внедорожник;
Багги;
Пикап;
Спортивный;
Гоночный.
Все права защищены. 2010 год. Сайт об автомобилях.
И смотрим результат отображения в браузере:
Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега .
Атрибут alt — как запасной вариант
Поскольку файлы с изображениями хранятся отдельно от веб-страниц, то для их получения браузеру приходится делать отдельные запросы. А что если изображений на странице будет очень много и скорость подключения к сети маленькая, тогда на загрузку дополнительных файлов потребуется значительное время. А еще хуже если изображение было удалено с сервера без вашего ведома.
В этих случаях сама веб-страница будет успешно загружена, только вместо изображений будут отображаться белые прямоугольники. Поэтому, чтобы сообщить пользователю информацию, что представляет из себя изображение применяется . С помощью этого атрибута указывается так называемый текст замены, который будет отображаться в пустом прямоугольнике пока изображение не загрузится:
И примерно так это выглядит:
Задаем размеры изображению
Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width
и height
. Вы можете использовать их, чтобы указать размеры изображения:
width="300" height="200"
>
В обоих атрибутах указывается размер в пикселях
. Атрибут width указывает браузеру какой ширины должно быть изображение, а атрибут height какой высоты. Эти два атрибута можно применять вместе и по отдельности. Например, если вы укажите только атрибут width, то браузер подберет высоту автоматически пропорционально указанной ширине и также в случае использования только атрибута height. В случае если вы не укажите эти атрибуты вовсе, то браузер автоматически определить размер изображения перед выводом его на экран. Стоит только заметить, что указывание размеров изображений немного ускорит работу браузера при отображении страницы.
На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт...
Вставляем видео и аудио с помощью HTML 5
В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
Для вставки аудио
HTML5 предоставляет парный тег Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
Тег
По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге поставить атрибут без значения controls
, браузер выведет в том месте веб-страницы, где проставлен тег , элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
Для вставки видеоролика на веб-страницу предназначен парный тег . С этим тегом все тоже самое, что и с тегом — адрес видеофайла указывается с помощью атрибута src, а с помощью атрибутов autoplay и controls можно запустить автовоспроизведение ролика и вывести элементы управления воспроизведения видеоролика.
Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?»
я вам ответил. поэтому просто подведу итоги:
для вставки изображений на html
страницу пользуемся одиночным тегом и указываем адрес файла с картинкой в атрибуте src
: ;
с помощью атрибута alt
тега можно задавать текст замены на случай если изображение не загрузится;
с помощью атрибутов width
и height
можно задавать размеры изображения на веб-странице;
для вставки аудио и видео в html5 есть парные теги и
Если что не понятно, спрашивайте в комментариях и не забудьте подписаться на обновления моего блога . До встречи в следующих постах!
В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Для вывода изображений в html существует единственный тег
.
1. Синтаксис тега
Описание изображения
" src
="URL
" [атрибуты
]>
Обратите внимание, что данный тег является одиночным и не требует
закрывающего тега
.
Атрибут src
является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL . Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.
Атрибут alt="описание"
- не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.
Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.
2. Как вставить в html картинку
Для вставки картинки в html используется тег
. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.
Пример 2.1. Использование тега
...
...
Этот код
В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src="/img/kartinka.jpg", т.е. указывается относительный адрес.
Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.
Пример 2.2. Вывод нескольких картинок в html друг за другом
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.
Пример 2.3. Использование альтернативного текста (alt) в img
Рекомендуется прописывать альтернативный текст (атрибут alt) в теге
, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.
...
Пример изображения
" src
="321.jpg
">
...
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.
Теперь рассмотрим подробно все атрибуты тега
.
3. Атрибуты и свойства тега
1. Свойство align="параметр"
- определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
left
- выравнивание по левому краю
middle
- выравнивание середины изображения по базовой линии текущей строки
bottom
- выравнивание нижней границы изображения по окружающему тексту
top
- верхняя граница изображения выравнивается по самому высокому элементу текущей строки
right
- выравнивание по правому краю
Пример 3.1. Выравнивание изображения в html по правому краю
2. Свойство alt="текст"
- подсказка/описание картинки. Выполняет сразу две важные функции:
Выдает подсказку при наведении
Если в браузере отключены изображения, то выводится этот текст
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.
Пример 3.2. Вывод картинки в html с рамкой (границей)
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 пикселей.
Резервная копия Iphone необходима для сохранности данных при переустановке ОС, поломке устройства, сбоя ПО или облачного сервиса. Обеспечить синхронизацию информации:
Адресной книги (всех контактов) и истории вызовов.
Полного списка календарей,...
Найти подходящий аккумулятор для планшета непросто для пользователя, который слабо осведомлен о том, где в его таблете находится отсек для АКБ. Впрочем, если гаджет неожиданно «поправился» в размерах и демонстрирует все признаки готовности треснуть...
Информация о марке, модели и альтернативных названиях конкретного устройства, если таковые имеются. ДизайнИнформация о размерах и весе устройства, представленная в разных единицах измерения. Использованные материалы, предлагаемые цвета,...