| HTML 5.1 (W3C)
|
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
| Определяет ширину изображения.
|
Пример использования
Пример использования тега <img><span>
src =
"10.jpg"
alt =
"ничоси"
width =
"200"
height =
"200" title =
"ничоси"
>
Результат добавления изображения, с помощью тега ![]()
на HTML страницу.
Здравствуйте уважаемые читатели блога! В этой статье вы узнаете все о том как вставить изображение на html страницу
. У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Все это легко. Прочитав эту статью, вы сможете без каких-либо трудностей вставлять картинки на свои html страницы. Для этого мы подробно поговорим о теге img
и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим новые возможности HTML5, которые упрощают вставку видео и аудио на сайт.
Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег img
. Встретив такой тег с адресом, браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом, а только затем отображает его на Web-странице.
Все графические изображения и вообще любые данные, которые хранятся в отдельных от web-страницы файлах называются внедренными
элементами страницы.
Прежде чем вставлять картинки и подробно рассматривать тег «img», стоит немного узнать о графических форматах.
Форматы графических изображений.
Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.
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 страницы
Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег img
. Браузер помещает изображение в том месте веб-страницы, где встретит тег img.
Код вставки картинки в html
страницу имеет такой вид:
Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src
. Что такое я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла
.
Приведу еще несколько примеров указания адреса файла с изображением:
этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.
В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:
Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.
Тег img является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега «Р» — абзац:
Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:
Тогда html-код страницы со вставленной картинкой будет таким:
И смотрим результат отображения в браузере:
Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега «img».
Атрибут alt — как запасной вариант
Поскольку файлы с изображениями хранятся отдельно от веб-страниц, то для их получения браузеру приходится делать отдельные запросы. А что если изображений на странице будет очень много и скорость подключения к сети маленькая, тогда на загрузку дополнительных файлов потребуется значительное время. А еще хуже если изображение было удалено с сервера без вашего ведома.
В этих случаях сама веб-страница будет успешно загружена, только вместо изображений будут отображаться белые прямоугольники. Поэтому, чтобы сообщить пользователю информацию, что представляет из себя изображение применяется . С помощью этого атрибута указывается так называемый текст замены, который будет отображаться в пустом прямоугольнике пока изображение не загрузится:
И примерно так это выглядит:
Задаем размеры изображению
Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width
и height
. Вы можете использовать их, чтобы указать размеры изображения:
В обоих атрибутах указывается размер в пикселях
. Атрибут width указывает браузеру какой ширины должно быть изображение, а атрибут height какой высоты. Эти два атрибута можно применять вместе и по отдельности. Например, если вы укажите только атрибут width, то браузер подберет высоту автоматически пропорционально указанной ширине и также в случае использования только атрибута height. В случае если вы не укажите эти атрибуты вовсе, то браузер автоматически определить размер изображения перед выводом его на экран. Стоит только заметить, что указывание размеров изображений немного ускорит работу браузера при отображении страницы.
На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт...
Вставляем видео и аудио с помощью HTML 5
В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
Для вставки аудио
HTML5 предоставляет парный тег AUDIO
. Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
Тег «audio» создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге audio необходимо указать особый атрибут autoplay
. Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.
По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге «audio» поставить атрибут без значения controls
, браузер выведет в том месте веб-страницы, где проставлен тег audio, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости.
Об этом человеке известно только то,
что он не сидел в тюрьме, но почему не сидел - неизвестно.
Марк Твен.
Э
то урок о том, как вставить картинку в HTML
, как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег и его атрибуты весьма пригодится в современном Интернете. Но главное тут - чувство меры!
П
ереизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй только там, где это нужно. И будет тебе счастье!
В
уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
§ 1. Как вставить картинку
Д
ля вставки картинок в HTML используется тег IMG
с обязательным
атрибутом SRC
. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg
в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке
(каталоге)) нужно в этом месте вставить следующий html-код:
src="logo.jpg">
Е
сли картинка и страница расположены в разных
каталогах (папках), то нужно указать путь к изображению относительно
страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:
images/logo.jpg">
А
можно не мучиться и указать полный адрес картинки
. Например, так:
http://www..png">
В
последнем случае браузер отобразит код так:
Примечание.
Если картинка расположена на вашем компьютере
, а вставить вы её хотите на страницу в Интернете
, то ничего не выйдет. Для этого картинку нужно сначала переместить в какое-нибудь место в Интернете
(например, ). И указать в коде страницы полный адрес до этого места с картинкой
.
П
омимо обязательного атрибута SRC
у тега IMG
есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.
§ 2. Указание размеров картинки
Н
ачнём с атрибутов, которые позволяют задать размеры картинки
(точнее, застолбить место под эти размеры на страницы). Вот они:
- width
- ширина картинки в пикселах или процентах;
- height
- высота картинки в пикселах или процентах.
Е
сли используются эти атрибуты, то сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмёт) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ш
ирину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
width="50" height="20">
width="10%" height="5%">
§ 3. Альтернативный текст
В
случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT
:
В
этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT
:
П
овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.
§ 4. Выравнивание картинки
С
помощью уже знакомого тебе атрибута align
можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align
есть несколько значений, но нас больше всего на данный момент интересуют два:
- left
- изображение располагается у левого края страницы, а текст обтекает картинку справа;
- right
- изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.
Н
апример, HTML-код
браузер покажет так
А
этот HTML-код:
будет выглядеть вот так:
Д
ля прекращения обтекания картинки текстом можно использовать тег BR
(знакомый нам из прошлого раздела про ). У тега BR
есть атрибут clear
, который может принимать три значения:
- left
- прекращение обтекания текстом картинок, выровненных по левому краю;
- right
- прекращение обтекания текстом картинок, выровненных по правому краю;
- all
- прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
Возможно вас заинтересует
Если же мы не укажем размеры, браузер также отобразит картинку правильно, но это займет у него чуть больше времени, потому что ему придется сначала загрузить картинку и только после этого он сможет определить, сколько места ему нужно выделить. Если же указать размеры для изображения изначально, то это браузеру упростит задачу. Кроме того, изменив в коде размер изображения, браузер также изменит его размеры согласно указанным размерам.
