Изображения в HTML

В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Для вывода изображений в html существует единственный тег .

1. Синтаксис тега

Описание изображения " src ="URL " [атрибуты ]>

Обратите внимание, что данный тег является одиночным и не требует закрывающего тега .

Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL . Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.

Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.

Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.

2. Как вставить в html картинку

Для вставки картинки в html используется тег . Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.

Пример 2.1. Использование тега

... ...

Этот код

В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src="/img/kartinka.jpg", т.е. указывается относительный адрес.

Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.

Пример 2.2. Вывод нескольких картинок в html друг за другом

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.

Пример 2.3. Использование альтернативного текста (alt) в img

Рекомендуется прописывать альтернативный текст (атрибут alt) в теге , чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.

... Пример изображения " src ="321.jpg "> ...

Преобразуется на странице в следующее:

Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.

Теперь рассмотрим подробно все атрибуты тега .

3. Атрибуты и свойства тега

1. Свойство align="параметр" - определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:

• left - выравнивание по левому краю
• middle - выравнивание середины изображения по базовой линии текущей строки
• bottom - выравнивание нижней границы изображения по окружающему тексту
• top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
• right - выравнивание по правому краю

Пример 3.1. Выравнивание изображения в html по правому краю

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...

Преобразуется на странице в следующее:

2. Свойство alt="текст" - подсказка/описание картинки. Выполняет сразу две важные функции:

• Выдает подсказку при наведении
• Если в браузере отключены изображения, то выводится этот текст

Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.

Пример 3.2. Вывод картинки в html с рамкой (границей)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...

Преобразуется на странице в следующее:

4. Свойство bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.

Пример 3.3. Вывод картинки в html с цветной рамкой

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...

Результат можно видеть чуть выше.

Примечание

Атрибуты border и bordercolor можно задать в стилях CSS к img:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg "> ...

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 пикселей.

... margin-top:10px; margin-left:50px " src ="https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg "> ...

Преобразуется на странице в следующее:

В данном примере - отступ сверху составил 10 пикселей, слева 50 пикселей.

9. Свойство class="имя_класса" - можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.

4. Как сделать картинку ссылкой

Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег тегом (ссылкой).

Например

... Адрес_изображения "> ...

5. Как скруглить углы у картинки

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg " style ="border-radius: 30px ">

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.

За вставку картинок в HTML-документ отвечает тег и его атрибуты, главным из которых можно считать src , задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.

Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):

Раньше у тега был ещё один обязательный атрибут - alt , но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.

Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width (указывает ширину) и height (определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).

Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:

Навигационная карта

О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.

Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:

• - контейнер, внутри которого описывается карта изображения.
• - тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов и придётся поставить. Связка - работает точно так же, как связки
  -
  1. и
     -
     • , создающие списки.
     • shape - атрибут тега , задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
     • cords - определяющий координаты области атрибут. Также принадлежит тегу . Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
     • usemap - атрибут тега img , который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.

     Пример карты изображения

     Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg . Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.

     1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:

     

     2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).

     3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:

     4. С помощью тегов area определяем активные области:

     5. Закрываем карту:

     Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:

     

     Несмотря на то, что в качестве примера был рассмотрен самый простой случай, который только можно придумать, он наглядно демонстрирует принцип создания навигационных карт. Дальше - дело техники и определения координат, с точки зрения HTML ничего не усложняется.

     Путешествуя по Интернету Вы конечно же видите на многих сайтах различные картинки, баннеры, фотографии, графические изображения. Сегодня мы научимся вставлять изображения на HTML страницу.

     Добавление изображения происходит в два этапа: сначала готовится графический файл нужного размера и формата, а затем он добавляется на web-страницу через тег: . Сам HTML документ предназначен только для того, чтобы отобразить требуемую картинку, при этом никак ее не меняя .

     При подготовке изображений следует учесть несколько моментов.

     1. Поскольку веб-страница загружается по сети, существенным фактором выступает размер ("вес") графического файла , встроенного в web-документ. Чем он меньше, тем быстрее отобразится изображение.

     2. Довольно часто физические размеры изображения (ширину и высоту) необходимо ограничить (уменьшить) по ширине и высоте. Например, установить по ширине не более 700-800 пикселов. Иначе изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

     Форматы графики для web-сайтов

     Наиболее широкое распространение для веб-графики получили два основных формата: GIF и JPEG . Такие качества как: многофункциональность, универсальность, небольшой объем исходных файлов при достаточном хорошем качестве, сослужили этим форматам хорошую службу, фактически определив их как стандарт для веб-изображений.

     Есть еще формат: PNG , который также поддерживается браузерами при добавлении изображений и существует в двух вариантах: PNG-8 и PNG-24 . Однако популярность формата PNG сильно уступает по признанию форматам GIF и JPEG .

     Обычно для изображений (картинок) создают отдельную папку в корневом каталоге и в неё складывают все изображения для сайта. Иногда таких папок бывает несколько (если того требует структура сайта или Вам так проще ориентироваться). Эту папку чаще всего называют: img или images (изображения ). В коде web-страницы прописывают полный путь до графического файла (где лежит изображение), а также имя данного файла (картинки), который Вы хотите вставить в html-документ.

     Пишем код для вставки картинки на web-страницу

     Для вставки изображений в HTML документ используется конструкция, указанная в Листинг 8.1. Данный код вставляется в нужное место web-страницы (туда, где Вы хотите видеть картинку).

     На нашей we-странице, посвященной автомобилям, я подготовил и вставил два изображения. Код вставки первого изображения Вы видите в Листинге 8.1.

     Листинг 8.1.

     Вот так будет выглядеть первое вставленное изображение на web-странице сайта:

     А теперь прокоментирую подробнее то, что написано в Листинге 8.1.

     Само изображение "вставляется" с помощью тега: img src . Полностью запись выглядит вот так: img src="img/mers1.jpg" , где "img/mers1.jpg" – указывает, что наша картинка лежит в папке: img , а имя графического файла (картинки): mers1.jpg .

     В принципе этого уже достаточно, чтобы вставить изображение на web-страницу, остальные параметры не обязательные, но все, же рекомендую всегда их прописывать, иначе картинка, может подвергнуться геометрическим искажениям .

     Давайте рассмотрим дополнительные параметры:

     border="0" – указывает, что рамки вокруг изображения нет, попробуйте поменять 0 на другое число, например на 1 , - соответствует толщине рамки вокруг изображения в 1 пиксель, 2 – соответствует толщине рамки вокруг изображения в два пикселя и т.д.

     Важно! Если Вы планируете сделать изображение ссылкой, обязательно указывайте значение: border="0" .

     width="400" – указывает, что ширина изображения составляет: 400 пикселей (ставьте реальную цифру ширины ваших изображений).

     height="209" - указывает, что высота изображения составляет: 209 пикселей (ставьте реальную цифру высоты ваших изображений).

     Если не указать параметры: width и height , то изображение может получить геометрические искажения.

     hspace="20" – указывает на отступ текста вокруг изображения в 20 пикселей.

     align="left" – это уже знакомый Вам тег….. Правильно, обозначает выравнивание по левому краю, также может принимать, значение: right - выравнивание по правому краю.

     alt="Вид машины спереди" – здесь прописывается альтернативный текст, который высвечивается при наведении мышки на изображение.

     Точно таким же образом мы "вставим" на web-страницу и второе изображение, с той лишь разницей, что выравнена оно будет по правому краю.

     
     
     

     Комментарии к этой статье (уроку):

     Скажите пожалуйста, где именно надо создать папку img?

     Папка img - это просто условное название, можете обозвать её как угодно, лишь бы сами потом поняли. Создавать её можно где угодно, для простоты создайте её в корневом каталоге и сложите туда все изображения.

     Дело в том, что картинка не отображается, только надпись. В чем может быть дело? Спасибо.

     Посмотрите внимательно Листинг 8.1 выше. Возьмите его целиком к себе. В корневом каталоге (там где лежат все HTML-файлы вашего сайта) сделайте папку img . Поместите в эту папку все ваши изображения. В листинге измените mers1.jpg на название фашего файла. Значения width и height так же поменяйте на реальные размеры вашего файла. Удачи.

     Спасибо большое, все получилось.

     Здравствуйте.У меня таже ситуация,что и предыдущего оратора:прописываю код как у вас,меняю только название файла:вместо mers.1/jpeg вставляю связку мерседес/jpeg.На странице появляется только окно с надписью сверху"Вид автомобиля спереди",а изображения нет.По моему,браузер не может найти путь до фото или он не правильно прописан.ВОТ МОЙ КОД: б

     Посмотрите внимательно на свой код img/мерседес/jpeg. Вы правильно поняли браузер не находит путь до графического файла. 2. Неправильно указано имя файла, смотрите как у меня mers1.jpg

     Ну вот я скопировал код вставил у меня овал без картинки в овале в верху написана сылка!

     Здравствуйте!Проблема такая же, создала папку с названием img там же где и документы сайта, в этой папке сохранены изображения с названием 1.jpg, прописываю все как на вашем примере.

     Если Вы заметили у меня картинка лежит в папке img

     Очень полезная статья для начинающих "web-мастеров". Единственное замечание к атрибуту "alt". Применительно к рисунку в статье даётся такое его толкование: "alt="Вид машины спереди" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.

     вот мой код ТАК ПОЧЕМУ ЖЕ КАРТИНКА СТАВИТСЯ СБОКУ, КОГДА ЗАДАЧА ДЛЯ НЕЕ CENTER?

     А если я возьму изоброжение с чужого сайта это не будет нарушением авторских прав?

     Объясните, почему при выкладке HTML документа на сервер на месте изображений пустые места в рамке. Хотя до выкладки, изображения были, как надо.

     Дмитрий, чудес не бывает, Вы где-то допустили ошибку, проверьте все пути до картинок, т.е. как прописаны картинки в коде.

     это мой код,на страничке выявляется все кроме изображения,я целый день пытаюсь любыми способами но никак. подскажите пожалуйста что делать

     АндрейК,обратите пожалуйста на мое письмо.не могу никак вставить изображение,ввожу все правильно но никак,выявляется только рамка и надпись

     Эльвира, Ваше письмо я прочитал, как впрочем и все остальные комментарии и письма. Но отвечать то куда... на деревню дедушке???

     не знаю почему у всех запара!? нужно просто коды не копировать-затем вставлять, а самим прописывать и усе будет работать..вот текст моей картинки

     Скопировал Ваш листинг,вставил свои значения-картинка есть.Далее вбиваю ниже то же самое(вручную)картинки нет-что за чудо?

     АндрейК пожалуйста скажите где ошибка? сколко пробывал не получается((

     Андрей, подскажите, почему не получается увидеть картинку. Мой код: Надпись есть, картинки нет. Мой адрес: [email protected] Спасибо.

     Тоже долго мучилась, но получилось! Действительно папку imj надо открыть в HTML-документе.

     Обязательно попробую,Спасибо

     ииииииииууууууу крррррроши мои

     тоже долго мучился, оказывается папка с картинками должна лежать там же где и index.html , спасибо вам Елена

     Андрей я вставляю:

     Андрей я вставляю: и у меня нет картинки в документе только надпись!!!Мой адрес:[email protected]

     мой код...тоже нет картинки. Папка img находится в тойже папке что и index... помогите,пожалуйста. [email protected] Спасибо!

     Ну не знаю. Прочитала все комментарии. Перепробовала все. Копировала, вставляла свои данные. Ничего не получается. Папка с картинками (img) лежит там же,где index.html. Но картинки нет. Вместо нее крестик красный и надпись.Работаю в браузере IE. Вот, что я ввела:

     Посмотрела HTMLкод страницы на месте фото в уроке: Код на странице отличается от того, что в листинге. Почему? и, кстати на странице код "mers1.jpg" подчеркнут. Скопировать с подчеркиванием не удалось. Пробовала и так вставлять. Все равно картинки нет. В чем дело?

     Сами спрашиваем, сами и отвечаем. Долго мучилась картинка не вставлялась. Оказалось: 1, вместо тега src у меня было srk 2. запуталась,когда составляла путь к картинке. Переименовала папку в IMG и все получилось. На это потратила почти два дня.Но это того стоило.

     Любовь, зато теперь Вы это запомните на всю жизнь:) шучу конечно, не обижайтесь. А если серьезно, то если человек не оставляет обратного адреса, то помочь ему с моей стороны практически невозможно.

     Здраствуйте а подскажите как разместить одно изображение сверху второе ниже слева, а третье снизу справа))))

     ...........в чем моя ошибка отсутствия изображения?

     В коде все правильно, если ничего не напутали все должно работать. Но название файла (картинки) пишите английскими буквами. Многие сервера не воспринимают латиницу.

     Но вот что странно... пока называла папку разными именами, никак картинка не хотела появляться, хоть и путь был прописан правильно. Как только назвала IMG,сразу появилась. В чем подвох?

     Марина, никакого подвоха и провокаций нет:). В код Листинга 8.1. указано, что данное избражение лежит в папке: img. Если Вы меняете у себя на хосте название папки для изображениий, то поменяйте и в листинге, вот и вся хитрость.

     Я пытаюсь вставить изображение!!! прописываю все через блокнот я все верно делаю может через блокнот не стоит??

     И открываю все в мозиле файр фокс последний))

     Путь моей картинкаи C:Documents and SettingsденисРабочий столkoffevinogradwwwImg и сама картинка названа gif тоже в название входит 1.gif...Я в блокноте делаю так делал и полный путь не выходит мозила не видит фото еxpoler красным крестом выделяет

     Денис, переименуйте папку Img в img , т.е. все прописными буквами, и путь до нее тоже переименуйте. Многие сервера некорректно отображают заглавные регистры.

     у меня все тот же вопрос: почему не изображения, а только надпись. я создала отдельную папку для сайта: в ней Web-страница и рисунок. Вставила: ПОМОГТЬЕ, В ЧЕМ ОШИБКА МОЯ ПОЧТА: [email protected]

     А как сделать картинку, чтобы её можно было увеличивать или уменьшать?

     У меня тоже почему-то не центрирует картинку. В чем подвох?.. Код такой:

     Всем привет!!! По этой статье вы научитесь вставлять картинку в HTML документ. Это вовсе не сложно. Но вначале я бы хотел вам дать несколько рекомендаций по поводу картинок на веб-странице.

     Совет: когда будете размещать картинки на веб-страницу, не увлекайтесь анимированными картинками, так как это отвлекает внимание читателя от самого важного - текста. Лучше используйте обычные картинке без анимации.
     Старайтесь использовать на веб-страничках уникальные картинки. Как сделать уникальную картинку вы можете почитать , а взять красивые картинки вы можете .

     Приступим.

     Как вставить картинку в html?
     Так, как я говорил - здесь сложного ничего нет, добавьте этот html код.

     

     kartinka - это название картинки
     jpg - это расширение картинки. Расширение может быть gif, png, bmp.

     Если картинка размещена в папке images, тогда путь к картинке будет таким:

     

     images - название папки, где лежит картинка "kartinka.jpg ".

     Если картинка лежит на другом сайте, тогда код будет таким:

     

     https://www.сайт - это адрес сайта.

     Пример :

     

     Для этого просто заключите картинку между ссылочным элементом:

     Атрибуты для картинок

     ALIGN - этот атрибут предназначен для обтекания или выравнивания картинки по горизонтали.
     left - выравнивание по левому краю, текст будет обтекать справа.
     right - выравнивание по правому краю, текст обтекает слева.

     

     Результат :

     выравнивание по правому краю

     HSPACE - отступы от картинки по горизонтали (в пикселях).
     VSPACE - отступы от картинки по вертикали (в пикселях).

     

     Результат :

     

     отступы от картинки

     HEIGHT - высота изображения (пикселях).
     WIDTH - ширина изображения (пикселях).

     

     Результат :

     

     TITLE - это заголовок картинки. Заголовок будет отображаться, если навести на картинку курсор мышки.

     title="Всем привет - сайт!!! ">

     Результат :

     

     заголовок картинки

     BORDER - этот атрибут отвечает за размер рамки вокруг картинки. Рамки появляются в таких случаях, когда вы картинку сделаете ссылкой. Если установить нулевое значение атрибута BORDER , рамка отображаться не будет.

     Результат :

     

     А если поменять значение border на 5:

     Результат :

     

     Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background .

     background="ваш_фон.jpg" >

     На картиночном фоне может отображаться текст.

     Пример :

     Результат :

     

     Картинка как фон

     На этой ноте можно было бы и закончить тему "Как вставить картинку в HTML", но знаю, что многих интересует вопрос, а как поставить картинку по центру.
     Чтобы поставить картинку по центру, вам достаточно применить такой фокус:

     
     
     

     Вот теперь точно все. Переходим к следующему уроку.