Вставка изображения в HTML. Теги HTML для вставки картинки, изображения в HTML Web элементы html изображение
Текстовое содержимое веб-страницы является частью HTML-документа, окруженной тегами, определяющими смысл и цель каждой части текста. Изображения, с другой стороны, являются внешними файлами и фактически не являются частью веб-страницы. Изображения на страницу встраиваются с помощью тега . Отображение веб-страницы, которая включает в себя изображения, представляет собой двухэтапный процесс: сначала браузер загружает разметку, а затем загружает внешние изображения. Везде, где в коде HTML-документа расположен тег
, браузер запрашивает с веб-сервера файл, на который ссылается тег, и отображает его на месте тега.
Как вставить картинку
HTML тег относится к элементам, вставляющим контент, то есть сам элемент не добавляется непосредственно на веб-страницу, браузер создаёт пространство требуемого размера, в котором отображается изображение, на которое он ссылается. Тег
является одиночным тегом, не имеющим содержимого, он имеет обязательный атрибут src , указывающий путь (относительный или абсолютный) к графическому файлу.
Браузеры обрабатывают картинки, как строчные элементы , поэтому они будут располагаться на одной строке с текстом или другими строчными элементами (включая другие картинки):
Это смайлик:
, он улыбается.
Альтернативный текст и всплывающая подсказка
Атрибут alt является еще одним обязательным атрибутом HTML тега , он предоставляет альтернативный текст, отображаемый когда изображение недоступно. Это может произойти к примеру из-за того, что неверно указано расширение изображения, неправильно прописан путь и т.д.
Текст атрибута alt должен быть значимой заменой картинки, поэтому вы должны попытаться описать, что изображено на картинке. Хорошо написанный альтернативный текст может информировать пользователя, что отсутствующее изображение это логотип, фотография, иллюстрация, портрет, пейзаж, эскиз, карта, диаграмма и так далее.
Картинки, которые не относятся к основному содержимому страницы, а имеют чисто декоративный характер, тоже должны иметь атрибут alt , но вместо описания их декоративных свойств его значение можно оставить пустым (alt="").
Примечание: если вам нужно добавить всплывающую подсказку, с дополнительным описанием к картинке, то вы можете воспользоваться глобальным атрибутом title:
Это смайлик:, он улыбается.
Чтобы увидеть всплывающую подсказку, то есть информацию, размещённую в атрибуте title , надо навести курсор мыши на картинку.
Работа с изображениями в HTML (как вставить картинку, изменить ее размер, сделать картинку ссылкой).Вставка изображения
Для вставки изображения в html-документ используется непарный тег
, который помещается в то место документа, где должно быть вставлено изображение. У этого тега есть обязательный параметр src , значение которого указывает путь к нужному изображению в каталоге вашего сайта.
Например, чтобы поместить на страничку изображение:
в нужном месте документа помещается строчка:
Это дает браузеру понять, что в корневом каталоге сайта www.mysite.com есть подкаталог img 1.png
Здесь мы указали полный путь (или абсолютный адрес ) до изображения. А можно указать относительный адрес изображения:
Такую строчку браузер интерпретирует так: в каталоге, где лежит данный html-документ, есть подкаталог img , в нем лежит изображение с именем 1.png , которое и нужно поместить на страничке.
А вот пример указания относительного адреса изображения, если у вашего сайта более сложная структура и предыдущий пример не подходит:
Такую строчку браузер интерпретирует так: сочетание символов ../ означает, что из каталога, где лежит данный html-документ, нужно выйти на уровень вверх; а далее как в предыдущем примере: в том каталоге, где мы оказались есть подкаталог img , в нем лежит изображение с именем 1.png , которое и нужно поместить на страничке.
В целях безопасности предпочтительнее указывать относительный адрес изображения, кроме тех случаев, когда Вы на своей страничке помещаете изображение, расположенное на другом сайте.
Размеры изображения
Размер каждого изображения задается двумя параметрами: ширина и высота. У тега
есть соответствующие параметры: width и height . Эти параметры принимают значения в пикселах (px).
Вы можете задать истинные размеры изображения:
Это делать необязательно, но полезно, т.к. немного ускоряет процесс загрузки странички браузером (браузеру не приходится самостоятельно вычислять эти величины). Если размеры изображения сразу заданы в параметрах тега
, то под данное изображение будет выделено место на страничке, и структура странички при загрузке уже не будет меняться - текст прыгать, например.
А можете увеличить или уменьшить изображение, присвоив параметрам width и height другие значения. Причем, если вы хотите пропорционально изменить оба параметра, достаточно указать новое значение только одному из них, а второй - просто опустить. Браузер вычислит его автоматически.
Например, чтобы увеличить наше изображение в 1,5 раза, можно написать:
или
Результат будет один:
Еще параметры width и height могут принимать значения в процентах. Но! Следует учесть, что это проценты от размера окна браузера. В таком случае тоже можно указать только один параметр, а второй - опустить.
Например, если мы хотим, чтобы изображение по ширине занимало ровно половину нашей странички, надо написать следующее:
И мы получим:
Рамка вокруг изображения
У тега
есть еще один необязательный параметр border . С его помощью можно задать толщину рамки вокруг изображения. По умолчанию толщина рамки изображения нулевая, т.е. рамки нет.
Например, так можно добавить к нашей картинке рамку толщиной 3 пиксела:
Вот что покажет нам браузер:
Цвет рамки совпадает с цветом текста на странице, заданным с помощью параметра text тега (См. Урок 6. Свойства страницы - параметры тега body), по умолчанию это черный цвет.
И если Вы не хотите видеть рамку, принудительно присвойте параметру border нулевое значение:
Альтернативный текст
Альтернативный текст отображается браузером на месте картинки, пока та не загрузится. Или вместо картинки, если она по какой-либо причине не отобразилась.
Когда и если картинка загрузилась, альтернативный текст будет показываться при наведении курсора мыши на эту самую картинку.
Чтобы добавить альтернативный текст, используется параметр alt тега
, которому присваивается строковое значение, обязательно заключенное в кавычки.
Можно создать многострочный альтернативный текст.
Для этого достаточно вставить перенос строки в html-документе.
текст">
Выравнивание изображения
Для изображения, как и для параграфа, существует понятие выравнивания относительно текста и других изображений на странице. Задать тип выравнивания можно также с помощью параметра align тега
.
Ниже приведена таблица возможных значений параметра align :
Параметры texttop , top , middle , absmiddle , baseline , bottom задают выравнивание изображения по вертикали. А параметры left и right дают браузеру понять, с какой стороны текст должен обтекать изображение.
Отступы вокруг изображения
Чтобы при обтекании текст не прилегал близко к изображению, можно задать отступы вокруг изображения. Сделать это можно с помощью параметров hspace (отступы слева и справа) и vspace (отступы сверху и снизу) тега
.
В следующем примере продемонстрирован случай, когда текст обтекает изображение, при этом изображение выровнено по левому краю и имеет отступы вокруг, равные 5 пикселам:
Вот результат в браузере:
В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.Разбиение изображения на части
Бывают случаи, когда на странице необходимо поместить большое изображение. Но тогда страница будет долго грузиться. Что же делать?
Один из возможных
вариантов выхода из положения - разрезать изображение на части и разместить его на странице с помощью таблицы. A чтобы изображение выглядело как целое, необходимо у таблицы удалить границу и все отступы внутри и между ячейками. Т.е. присвоить соответствующим параметрам теганулевые значения: border="0" , cellspacing="0" , cellpadding="0" .
В следующем примере мы разбили изображение на 4 части. Вот как будет выглядеть таблица:
А вот результат:
За вставку картинок в HTML-документ отвечает тег
и его атрибуты, главным из которых можно считать src , задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.
Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):
Раньше у тега
был ещё один обязательный атрибут - alt , но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.
Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width (указывает ширину) и height (определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).
Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:
Навигационная карта
О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.
Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:
- - контейнер, внутри которого описывается карта изображения.
- - тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов и придётся поставить. Связка - работает точно так же, как связки
-
- и
-
- , создающие списки.
- shape - атрибут тега , задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
- cords - определяющий координаты области атрибут. Также принадлежит тегу . Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
- usemap - атрибут тега img , который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.
Пример карты изображения
Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg . Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
4. С помощью тегов area определяем активные области:
5. Закрываем карту:
Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:
Навигационная карта 
