В данном материале я вам расскажу об очень важных тегах HTML, для вставки картинок и графики на страницу, ведь без этого сложно создать красивый и хороший сайт.
Картинки сделают твой сайт уникальным и будет выделять из общей массы. Однако помни, что чрезмерное использование графики на сайте может быть плохим фактором.
Не награмождай html-страницу картинками, страница должна быть легкой и не отпугивать посетителей. Посетитель всегда должен усваивать главную информацию и не отвлекаться, вставляй картинки в HTML только там, где в этом есть необходимость.
на странице Атрибуты тега BODY я уже говорил, что картинки могут быть фоном html-страницы, а сейчас я вам расскажу, как эти же картинки можно использовать на более высоком уровне, нежели фон.
И так, для того, что вставить картинку в HTML-страницу, тебе понадобится тег , у которого есть самый главный атрибут SRC. Данный атрибут необходим для указания адреса к картинке. Допустим, тебе нужно ставить картинку image.jpg в какое-нибудь место на html-страницу, а наша картинка будет находится в одной папке (каталоге)) со страницей, тогда надо писать вот такой html-код:
Если картинка и html-страница находятся в разных папках или каталогах, то надо написать путь к изображению относительно страницы. Например, наша html-страница находится в папке или каталоге news, в этом же каталоге или папке находится подкаталог (папка) pop, в котором и расположена наша картинка image.jpg, то для ее вставки надо писать так:
Кроме атрибута src у тега есть еще парочка необязательных, но важных атрибутов:
- width — ширина картинки (можно указывать пиксели или проценты);
- height — высота картинки (можно указывать пиксели или проценты).
Если не указывать данные атрибуты, браузер загрузит реальные размеры картинки. Однако не стоит переусердствовать со значениями данных атрибутов, ведь увеличение длины или ширины картинки может её исказить, что испортит её, например фотографию человека, где изменятся пропорции человека.
Как я уже написал, размеры картинки можно указывать как в пикселах, так и в процентах. Приведу просто пример:
еще пример html-кода:
Бывают случаи, когда в браузере отключена возможность отображения графики, в том числе и картинок, и чтобы ваша страница не потеряла смысл, применяют атрибут alt, в котором мы пишем альтернативный текст, если картинка не под грузилась на страницу. html-код на примере:
- left — картинка расположится слева, а текст, который рядом — справа;
- right — картинка расположится справа, а текст, который рядом — слева.
Приведу HTML-код:
Текст, радом с картинкой.
а браузер выведет следующее:
Текст, радом с картинкой.
HTML-код для значения right:
Текст, радом с картинкой.
на html-странице будет так:
Текст, рядом с картинкой.
Для того, чтобы текст не обтекал картинку, можно использовать ранее упомянутый тег BR на странице Форматирование текста в HTML. Кстате, тег BR имеет атрибут clear, со своими значениями значения:
- left — не обтекать текстом, который выровнем по левому краю;
- right — не обтекать текстом, который выровнем по правому краю;
- all — не обтекать текстом, который выровнем по левому и правому краям.
Без атрибута align текст обтекат по умолчанию справа картинки и почти вплотную. Если ты хочешь чтобы текст не обтукал вплотную картинку, можно использовать вот такие атрибуты:
- vspace — делает верхнее и нижнее поля в пикселях;
- hspace — делает боковые поля (слева и справа) в пикселях.
Приведу простой html-код на примере:
Вот такая красивая картинка.
Что получится по данному примеру попробуй посмотреть сам.
Вокруг картинки еще можно сжделать рамку с помощью атрибута border и указывать в пикселях её величину. Чем больше значение, тем больше рамка вокруг изображения. HTML-код будет таким:
на html-странице будет вот так:
Я написал основные теги HTML, необходимые для вставки картинок на html-страницу. Далее я расскажу тебе, как создать ссылки в HTML, а также как сделать картинку ссылкой.
Дата публикации: 15 мая, 2012
Тег ![]()
Тег
используется для вставки изображений в 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 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
Пример
Описание и использование
Тег используется для вставки изображения на страницу.
Технически изображение не вставляется на страницу, на странице всего лишь стоит ссылка на изображение и оставляется место под картинку.
Тег имеет два обязательных атрибута: src и alt.
Браузерная поддержка
Тег поддерживается всеми основными браузерами.
Отличия между HTML и XHTML
В HTML тег не имеет закрывающего тега, а в XHTML он должен быть закрыт.
Атрибуты «align», «border», «hspace» и «vspace» были признаны устаревшими в HTML 4.01 и не поддерживаются в XHTML 1.0 Strict DTD.
Атрибут alt является альтернативным текстом изображения, а не текстом, всплывающим при наведении мыши. Для вставки всплывающего текста для изображения используйте атрибут title, например, 
Обязательные атрибуты
DTD
Альтернативные атрибуты
DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| align | top bottom middle left right |
Устарело . Используйте CSS. Выравнивание изображения относительно окружающих элементов |
TF |
| border | пиксели | Устарело . Используйте CSS. Ширина рамки вокруг изображения |
TF |
| height | пиксели % |
Высота изображения | STF |
| hspace | пиксели | Устарело . Используйте CSS. Отступ слева и справа до соседних элементов |
TF |
| ismap | ismap | Указывает на то, что изображение является серверной картой изображением. Редко используется. Используйте лучше usemap | STF |
| longdesc | URL | Указывает на URL, содержащий документ с полным описанием изображения. Слабо поддерживается браузерами | STF |
| usemap | #название_карты | Указывает на то, что изображение является клиентской картой-изображением | STF |
| vspace | пиксели | Устарело . Используйте CSS. Отступ сверху и снизу до соседних элементов |
TF |
| width | пиксели % |
Ширина изображения | STF |
Стандартные атрибуты
Тег поддерживает следующие стандартные атрибуты:
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| class | название класса | Указывает название класса для элемента | STF |
| dir | rtl ltr |
Указывает направление вывода текста для элемента | STF |
| id | id | Указывает id для элемента | STF |
| lang | код_языка | Указывает код языка содержимого элемента | STF |
| style | описание_элемента | Указывает строчный стиль элемента | STF |
| title | текст | Указывает дополнительную информацию об элементе | STF |
| xml:lang | код_языка | Указывает код языка содержимого элемента в XHTML документах | STF |
Дополнительная информация о стандартных атрибутах .
События
Тег поддерживает следующие атрибуты событий:
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| onabort | скрипт | Скрипт, который должен быть выполнен, если загрузка изображения была прервана | STF |
| onclick | скрипт | Скрипт, который должен быть выполнен при одинарном щелчке мышью | STF |
| ondblclick | скрипт | Скрипт, который должен быть выполнен при двойном щелчке мышью | STF |
| onmousedown | скрипт | Скрипт, который должен быть выполнен, если пользователь зажал кнопку мыши | STF |
| onmousemove | скрипт | Скрипт, который должен быть выполнен при движении курсора мыши | STF |
| onmouseout | скрипт | Скрипт, который должен быть выполнен, если пользователь передвинул курсор мыши за пределы элемента | STF |
| onmouseover | скрипт | Скрипт, который должен быть выполнен, когда пользователь двигает курсор мыши над элементом | STF |
| onmouseup | скрипт | Скрипт, который должен быть выполнен, когда пользователь отпускает кнопку мыши | STF |
| onkeydown | скрипт | Скрипт, который должен быть выполнен при нажатии клавиши пользователем | STF |
| onkeypress | скрипт | Скрипт, который должен быть выполнен при нажатии и отпускании клавиши пользователем | STF |
| onkeyup | скрипт | Скрипт, который должен быть выполнен при отпускании клавиши пользователем | STF |
Дополнительная информация о
Здравствуйте, уважаемые читатели блога сайт. Про то, какие именно и в каких случаях лучше всего будет использовать для вставки картинок на страницы своего сайта, мы подробно успели поговорить с статье, ссылка на которую приведена чуть выше.
Сегодня же мы подробно рассмотрим все аспекты использования тега Img для вставки изображений, посмотрим как задать обтекание фотографии текстом в Html коде, узнаем как использовать изображения в качестве фона для сайта, как изменять их размер и задавать выравнивание (по центру, влево и вправо).
Использование тега Img и его атрибутов Src, Width и Height
Итак, давайте посмотрим, как можно использовать графику на своем сайте. Во-первых, это возможность вставки изображения как элемента (объекта) в Html код страницы. Как раз именно такая вставка осуществляется с помощью Img, который является особенным — строчным элементом с замещаемым контентом , к которым относятся всего лишь четыре , одни из которых мы уже упомянули, а три остальных — (современный вариант использования фреймов), (для вставки видео и другого медиа контента).
Ведет себя он в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент (фото в случае Img или видео и флеш в случае Object и Embed). Любой из этих четырех элементов подразумевает наличие внешнего файла, который будет подгружаться вот в эту самую область, заданную в нем атрибутами.
Для указания пути до графического файла, который должен подгружаться на страницу, служит специальный атрибут Src .
Браузер пользователя при разборе Html кода страницы, как только встретит в нем тэг Img, сразу же создает область для строчного элемента, в которую загружается внешний файл (например, фотография). Путь до файла браузер берет из содержимого Src.
Когда изображение начинает загружаться с вашего сервера на компьютер пользователя, браузер определяет истинные размеры этой картинки и раздвигает на эти самые размеры ту строчную область, которую создал при обнаружении в коде элемента Имг.
Если вы хотите, чтобы браузер сразу же выделял для этого элемента область нужного размера, а не потом ее изменял при получении данных о размере загружаемого изображения, то вы должны будет обязательно указать атрибуты Width и Height .
Если вы задали их, то тогда браузер пользователя создает область с нужными размерами и туда уже будет вписывать ваше фото, даже если оно другого размера. Кстати, иногда приходится встречать на сайтах начинающих вебмастеров такую ошибку.
На сервер заливается графический файл огромного размера и весом в несколько мегабайт (сразу после фотографирования без обработки) и прописывается до него путь в Src. А для того, чтобы изображение не занимало бы весь экран, в тэг Img дописывают Width и Height с приемлемыми размерами по ширине и высоте.
И что получается в результате? Посетитель такого сайта наблюдает удручающе медленную подгрузку изображения в сравнительно малую область, заданную в упомянутых атрибутах (несколько мегабайт веса вписываются в размер 300 на 400 пикселов).
Поэтому сразу же делайте картинки для выкладывания в Веб того самого размера, который вы будете показывать на сайте и прописывать в Width и Height тега Img. Уважайте своих пользователей и не тратьте понапрасну их трафик (особенно мобильный). можно, например, в FastStone Image Viewer или любом другом графическом ректоре, например, .
Кстати, кроме заблаговременного уменьшения размера изображений для вставки на страницы сайта, следует со всей тщательностью подойти еще и к оптимизации веса. Порой можно без потери качества добиться кратного уменьшения веса графических файлов, что приведет к гораздо более быстрой их загрузке и снижению нагрузки на сервер хостинга. Можете для этой цели воспользоваться очень удобным и эффективным .
Теперь давайте посмотрим, каким образом можно указать путь до файла с изображением в Src тега Img. Собственно, можно использовать и , о которых я уже довольно подробно писал в приведенной статье. Все зависит от нюансов и удобства.
Т.е. Src может содержать, например, следующие записи:
В первом случае, графический файл должен лежать в той же папке, что и файл вашей веб страницы (в случае использования вами , первые два варианта вам вряд ли подойдут, хотя для задания фонового изображения в CSS это очень удобно). Во-втором случае, графика лежит во вложенной папке относительно файла вашей страницы, ну, а в третьем случае, в Src указан абсолютный путь до файла с картинкой.
Вообще, по правилам языка Html, на вашем сервере обязан находиться только сам документ (web страница), а все остальные документы и файлы (графика, видео, скрипты, стили), которые будут подгружаться вместе с ним, могут находиться на разных серверах.
В этом, кстати говоря, заключается один из способов повышения . Да и те же самые счетчики посещений, которые вы наверняка будет использовать на своем ресурсе для наблюдения за , тоже будут подгружать свои информеры и скрипты с отличных от вашего хостов.
Как вставить картинку с ссылкой, назначение Alt и Title в Img?
Если Img по своей сути является строчным элементом, то его можно просто считать большой буквой , а значит нам ничто не мешает сделать изображение ссылкой, заключив этот тег внутрь гиперссылки. Вообще, про это я уже достаточно подробно писал в недавней статье про , но немного повториться будет не грех.
Ru/image/webcamxp.png">
В браузере IE вокруг картинки, которую вы сделали ссылкой, появится рамочка шириной в три пиксела. Чтобы ее убрать, вам нужно будет добавить в тэг Img атрибут Border со значением ноль:
Для всех тех случаев, когда графический файл по каким-либо причинам не может подгрузиться вместе с Html документом (путь до него прописан не верно или же еще что-то), предусмотрен специальный атрибут Alt .
Alt выполняет роль альтернативного представления изображения. Что происходит в том случае, когда графика не грузится? Браузер все равно, обнаружив в коде элемент Img, формирует под него область, которая в зависимости от используемого пользователем браузера может либо оставаться заданного размера, либо схлопываться.
Но чтобы пользователь имел представление, что на этом месте страницы должна быть картинка, вы и прописываете Alt в Img, где и вводите текст с описанием того, что здесь должно быть изображено. Содержимое Alt будут выводиться в области неподгрузившейся фотографии.
Ну, и кроме этого, для картинок в Html коде, а так же и для других элементов языка гипертекстовой разметки (например, все для тех же гиперссылок) имеется возможность при наведении пользователем на них курсором мыши показывать ему какой-либо сопровождающий текст.
Делается это с помощью специального атрибута Title , который в нашем случае вставляется в Img. Он по сути является всплывающей подсказкой и его можно использовать практически для всех видимых на странице элементах Html кода, когда вам нужно что-то дополнительно пояснить.
Раньше, кстати, к всплывающей подсказке приводило и добавление текста Alt, но сейчас от такого поведения отказываются и этот атрибут теперь в основном выполняет только роль альтернативного текста, а Title используется исключительно для всплывающих подсказок.
Pngя" height="71" width="90" alt="" title="">
На самом деле содержимое Alt и Title тега Img не только служит для удобства посетителей вашего сайта, но и может оказывать очень существенную роль на успешность продвижения вашего проекта.
Для этого нужно не забывать употреблять в них , как я об этом неоднократно писал, например, в статье про или же в публикации про то, .
Ключевые слова в Alt и Title (особенно в Alt) могут заметно улучшить , а так в сервисах . Однако с этим нужно быть осторожным , ибо довольно легко можно попасть под .
Обтекание картинки текстом в Html — атрибут Align тега Img
Теперь давайте поговорим про выравнивание вставленных изображений в Html коде. У всех четырех строчных элементов с замещаемым контентом (Img, Iframe, Object и Embed) есть возможность выравнивания с помощью атрибута Align . Но он вообще-то применяется только для блочных элементов, а упомянутые теги — строчные.
Поэтому некоторые значения Align для Img (например, задание обтекания картинки текстом) будут означать совсем иное, нежели при использовании этого же атрибута в блочных элементах ( и т.п.).
Вообще, выравнивание картинок с помощью Align при использовании в Img можно разделить на две группы.
Итак, что же происходит, когда мы вставляем графический файл в текст документа? Фактически он встает как одна большая буква:
По умолчанию используется выравнивание по нижнему краю, т.е. добавление в элемент Img атрибута align="bottom" ничего не изменит. Но зато можно попробовать задать выравнивание картинки по верхнему краю, добавив в элемент align="top":
Png" align="top">
В этом случае произошло выравнивание текста в строке, где расположена фотография, по верхнему ее краю.
Возможно еще одно значение этого атрибута align="middle" :
Png" align="middle">
В этом случае текст в строке с картинкой будет выравниваться по середине этого самого рисунка.
Но кроме выравнивания по вертикали в Html предусмотрено и обтекание картинок текстом, для чего используются значения — Left и Right . Эта группа значений атрибута Align сильно отличается от предыдущей.
При использовании значений Left и Right внутри элемента Img мы добиваемся, так называемого, обтекания картинки текстом, которое задается в Html коде. В этом случае рисунок становится и текст начинает ее обтекать.
Например, при align="left" мы получим такой результат:
Png" align="left">
Значение Left в Img означает, что фото плавает в левую сторону, а текст ее обтекает справа. В случае align="right" картинка будет плавать в правую сторону, а текст ее будет обтекать слева:
Png" align="right">
При задании обтекания изображения текстом есть один нюанс — текст слишком близко располагается от него, что создает неприятный глазу эффект прилипания . Данную проблему совсем легко решить с помощью , но и в чистом Html существует свое решение.
Для этого можно использовать атрибуты элемента Img — Hspace и Vspace . С помощью них отжимается обтекающий текст от изображения. Hspace задает отступы слева и справа от изображения до обтекающего его текста, а Vspace — сверху и снизу. Отступы задаются в , например:
Png" align="left" hspace="30" vspace="30">
Background — как сделать фон для сайта в чистом Html
Графические файлы можно использовать не только как элементы кода страницы, но и как заливку в качестве ее фона. Вообще, в языке Html можно задать либо цветом, либо с помощью фоновых изображений. Ну, а в с использованием свойств CSS являются одним из основных элементов, ибо никаких оформительских элементов, вставленных с помощью Img на страницах современных сайтов, нет.
Поэтому фоновые изображения играют очень важную роль в современной верстке с использованием CSS (поговорим об этом в приведенной статье). Пока же мы рассмотрим, как это все делается в чистом Html с помощью атрибута Background элемента Body и , показывает путь до графического файла, которым будет залита web страница или же таблица (или ее отдельная ячейка).
Например, добавив в Body атрибут Background следующего вида:
Мы получим фон для нашего сайта, состоящий из размноженной фотки, которой будет заполнена вся видимая область на манер плитки:
Фоновое изображение, начиная с левого верхнего угла, повторяется сразу по двум осям (абсцисс и ординат). Последующее состыковывается с предыдущим и т.д. Кстати, если вы захотите залить фон страницы или таблицы одним цветом, то для этого вам нужно использовать уже не Background, а атрибут bgcolor , в качестве значения которого вы может вставить , например, так:
То получим следующий цвет фона заданный через bgcolor:
Точно так же, как и в случае с атрибутом background, bgcolor можно еще использовать и для задания фона всей таблицы или же отдельных ее элементов.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Значение и применение
Изображения в 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 страницу.
Загрузка...