Работа с изображениями в HTML (как вставить картинку, изменить ее размер, сделать картинку ссылкой). Вставляем графический файл на web-страницу
Вставка изображения
Для вставки изображения в 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 документ. Это вовсе не сложно. Но вначале я бы хотел вам дать несколько рекомендаций по поводу картинок на веб-странице.
Совет: когда будете размещать картинки на веб-страницу, не увлекайтесь анимированными картинками, так как это отвлекает внимание читателя от самого важного - текста. Лучше используйте обычные картинке без анимации.
Старайтесь использовать на веб-страничках уникальные картинки. Как сделать уникальную картинку вы можете почитать , а взять красивые картинки вы можете .Приступим.
Как вставить картинку в html?
Так, как я говорил - здесь сложного ничего нет, добавьте этот html код.
kartinka - это название картинки
jpg - это расширение картинки. Расширение может быть gif, png, bmp.Если картинка размещена в папке images, тогда путь к картинке будет таким:
images - название папки, где лежит картинка "kartinka.jpg ".
Если картинка лежит на другом сайте, тогда код будет таким:
https://www.сайт - это адрес сайта.
Пример :
Как вставить картинку в html Для этого просто заключите картинку между ссылочным элементом:
Атрибуты для картинок
ALIGN - этот атрибут предназначен для обтекания или выравнивания картинки по горизонтали.
left - выравнивание по левому краю, текст будет обтекать справа.
right - выравнивание по правому краю, текст обтекает слева.
Результат :
выравнивание по правому краю
HSPACE - отступы от картинки по горизонтали (в пикселях).
VSPACE - отступы от картинки по вертикали (в пикселях).
Результат :
отступы от картинки
HEIGHT - высота изображения (пикселях).
WIDTH - ширина изображения (пикселях).
Результат :
TITLE - это заголовок картинки. Заголовок будет отображаться, если навести на картинку курсор мышки.
title="Всем привет - сайт!!! ">
Результат :
заголовок картинки
BORDER - этот атрибут отвечает за размер рамки вокруг картинки. Рамки появляются в таких случаях, когда вы картинку сделаете ссылкой. Если установить нулевое значение атрибута BORDER , рамка отображаться не будет.
Результат :
А если поменять значение border на 5:
Результат :
Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background .
background="ваш_фон.jpg" >На картиночном фоне может отображаться текст.
Пример :
Как вставить ссылку-якорь в html Результат :
Картинка как фон
На этой ноте можно было бы и закончить тему "Как вставить картинку в HTML", но знаю, что многих интересует вопрос, а как поставить картинку по центру.
Чтобы поставить картинку по центру, вам достаточно применить такой фокус:
Вот теперь точно все. Переходим к следующему уроку.
Д ля вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (динамические баннеры), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега , закрывающего тега нет.
Атрибут SRC
Посредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image . Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg . Далее мы будем обращаться к ней для обучения.
Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):
src="image/primer.jpg" >
То, без чего не создать сайт: ∼ ∼За вставку картинок в 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код:
Навигационная карта