За вставку картинок в 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 документ и настроить ее отображение. Для работы понадобится только вышеупомянутый редактор и браузер .

     Если все же у вас нет Notepad++ или проблема с его скачиванием и вас мучает вопрос - как вставить картинку в html в блокноте?

     Ответ прост, работа в обычном блокноте отличается лишь тем, что в нем отсутствует подсветка кода разными цветами, для удобочитаемости и разделения кода от самого текста.

     Как вставить картинку в HTML страничку

     После установки редактора, в контекстном меню, выпадающем по правому клику на любой файл, появится соответствующий пункт.

     Теперь для редактирования такого файла достаточно вызвать контекстное меню правым кликом по нему, далее «Edit with Notepad++».

     

     Для наблюдений результатов изменений в коде будет использована тестовая страница.

     

     Чтобывставить картинку в htmlкод используется одиночный строчный тегimg . Основной его атрибут – источник фото.

     Это может быть любой файл, на жестком, так и ссылка на существующее в сети изображение. Обрамляется тегами< p>p> .
     

     Для добавления фото, понадобится вписать такую строку:

     

     .

     Вот так она будет выглядеть в редакторе:

     

     А вот так ее наличие отобразится на странице:

     

     Src указывает на источник картинки. Одного названия файла достаточно, если файл с изображением находится в одной с документом html директории.

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

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

     
     

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

     Таблица форматирования пути к файлу

     

     Чтобы изменить размер изображения понадобится добавить два атрибута:width иheight . Значение оформляется так же, как и для любого атрибута.

     После знака равенства необходимо указать размер в пикселях.

     

     При наличии четко заданных размеров иллюстрации, отображаться на странице она будет следующим образом:

     

     Выравнивание и редактирование картинки

     Как вставить фото в html по центру? Для назначения положения картинки на странице служит align , относящий к тегуp .

     Для него допустимо несколько значений:center (центр),left (левый край) иright (правый край).

     

     Вот выглядит изображение на странице с прилеганием к центру и правому краю.

     

     Важно! Чтобы назначить расположение фото относительно текста, а не страницы, атрибутalignнужно использовать в тегеimg.Значения такие же, как и у атрибута тегаp.

     

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

     

     Чтобы разместить изображение в тексте, достаточно вписать тегimg (со всем обрамлением) в текстовом блоке в .

     Для добавления рамки используется атрибут border с числовым значением, которое означает толщину рамки в пикселях.

     

     Чтобы задать вертикальный и горизонтальный отступы, используются vspace иhspace . Их числовое значение означает расстояние от текста до картинки, непосредственно в пикселях.

     В примере атрибутуvspace задано значение в 50 пикселей.

     

     Размер горизонтального отступа укажет расстояние, на котором будет находиться текст при обтекании изображения.

     Еще два полезных атрибута –alt иtitle . Первый задает альтернативный текст изображению.

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

     

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

     

     Текст, указанный как значение атрибутаtitle , будет выводить подсказку при непосредственном наведении мыши на картинку. В коде его оформление не отличается от прочих атрибутов.

     

     

     

     После обновления страницы результат будет таким:

     Таблица атрибутов тегаimg

     голос[ов]
     

     	Описание
     src =””	Указатель источника изображения. Может использоваться как сохраненное на жестком диске, так и размещенное в сети (указывается адрес вместо расположения на жестком диске).
     width =””; height=””	Указатели высоты и ширины изображения. Если задан только один, то второй автоматически масштабируется, в соответствии с первым. Числовое значение означает количество пикселей.
     align= ””	Атрибут расположения изображения относительно текста. Допустимые значения:top, middle, bottom, left, right .
     border =””	Назначает рамку вокруг изображения. Числовое значение соответствует толщине рамки в пикселях.
     vspace =””; hspace=””	Указатели отступа от соседних элементов по вертикали и горизонтали. Значение указывает количество пикселей между элементами. При обтекании текстом, атрибут назначает расстояние до текста.
     alt =””	Назначает альтернативное описание на случай, если картинка почему-то не прогрузилась. Значение произвольное.
     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 части. Вот как будет выглядеть таблица:

     
     

     
     
     
     
     
     
     
     
     
     
     

     
     

     А вот результат:

     
     
     

     Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

     Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:

     • были информативными
     • соответствовали цветовой гамме вашего сайта
     • были уместны

     Если у вас нет подходящего фото, можно воспользоваться так называемым фотостоком (фотобанком ) - местом, где хранится множество фотографий, иллюстраций и векторной графики. Таких ресурсов море, вы возможно даже слышали об одном из крупнейших - Shutterstock, но скачивания там платные.

     Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус - список нескольких фотобанков , где можно скачать огромное количество качественных красивых материалов совершенно бесплатно 🙂

     Форматы изображений

     Во Всемирной паутине в основном используются 3 вида изображений:

     gif (Graphics Interchange Format - формат для обмена изображениями )

     это первый формат, который начал использоваться в интернете. Плюсы такого формата - наличие анимации и маленький размер, страница загружается быстро. К тому же он поддерживает прозрачность. Недостаток - используется только 256 цветов (собственно потому и размер маленький), т.е. его нельзя использовать для полноцветных изображений.

     jpeg , он же jpg (Joint Photographic Experts Group - Объединенная группа экспертов по фотографии - так называется организация-разработчик)

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

     png (Portable Network Graphics - Портативная сетевая графика . Произносится так же как ping, т.е. )

     этот формат изначально разрабатывался для веба, т.е. изображение обычно мало "весит" и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8 , как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном , причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.

     Подытожим

     gif - для анимации

     jpeg - для фотографий

     png - для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном

     Вставка изображения в html-файл

     Для добавления картинки на страницу используется тег (от англ. image - изображение, картинка). Это одиночный тег, ему не нужен закрывающий. Внутри этого тега содержатся атрибуты.

     Атрибут src (от англ. source - источник) указывает путь к файлу (место, где лежит изображение). Если картинка лежит у вас на компьютере (пока сайт только в процессе разработки) или на вашем сервере - используйте относительную ссылку. Если имидж из сети, тогда нужна абсолютная ссылка. Как это сделать читайте в статье "Ссылки ".

     Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:

     

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

     Поисковики обращают пристальное внимание на то, чтобы этот атрибут был заполнен. А html валидатор (ресурс для проверки кода на правильность) воспримет отсутствие атрибута alt как ошибку. Если же все атрибуты будут заполнены, да еще и содержать по возможности ключевые слова - видимость вашего сайта ощутимо повысится, т.е. его чаще будут показывать на поиске. Это из области SEO, а на данном этапе нам достаточно знать, что есть такой атрибут, и у "живого" сайта он должен быть заполнен. Пока сайт лежит у нас на диске - его вполне можно оставить пустым.

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

     Высота и ширина изображений

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

     В HTML5 это рекомендуется делать с помощью CSS или атрибута style , вот так:
     
     В данном примере мы взяли 30% от ширины, но не оригинального имиджа, а размера окна браузера. Когда ширина = 100%, то изображение открывается на всю ширину браузера. Запомните эту особенность процентов , как единицы измерения.

     Кстати, если бы мы написали только ширину, результат был бы тот же, попробуйте:

     

     < img src = "https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "панда на дереве" style = "width:30%;" >

     Также ширину и высоту можно задавать в пикселях. В случае с нашей пандой, у которой исходные размеры 1196 х 796 пикселей, чтобы при сжатии животное не пострадало, нам нужно сохранить пропорции, а здесь без калькулятора не обойдешься. Допустим, мы хотим уменьшить размер картинки в 3 раза, тогда нам нужно прописать размеры 399 х 265 пикселей.
     
     Обратите внимание, если мы увеличиваем изображение пропорционально, то достаточно указать только один параметр, напр. ширину. Умный браузер сам вычислит полный размер картинки.

     Попробуйте запустить такой код и посмотрите на результат:

     

     < img src = "https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "панда на дереве" style = "width:399px;" >

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

     Немножко нафталина

     Если вам доведется ковыряться в коде сайта, созданного на HTML-4 или еще более ранних, то вы заметите, что размеры изображений устанавливаются с помощью специальных атрибутов width и height . Это устаревший метод, хотя всё еще валидный в HTML5. Тем не менее советуем использовать style, т.к. на атрибуты width и height могут влиять внутренние или внешние стили, которые будут жить в браузере или вашем CSS-файле. Мы остановимся на этом детальней, когда будем рассматривать CSS, а пока просто посмотрите пример, как стили влияют на атрибуты высоты и ширины.

     В этом окне 3 вкладки: на первой вы видите html-код, на 2-й код CSS, ну а на последней - как всегда результат. Это работает, как если бы первая вкладка была файлом index.html, вторая - файлом style.css, а третья браузером. Так вот, сейчас в нашем CSS написано, что все элементы с тегом img имеют ширину 100%. Размеры атрибутов width и height по умолчанию в пикселях, поэтому здесь не надо дописывать никаких единиц.

     Разница в результате на лицо 🙂
     

     Также в старых версиях html использовались такие атрибуты:

     align , с помощью которого выравнивалось изображение по горизонтали или вертикали.

     hspace - отступ слева и справа от изображения до окружающего контента (напр. текста или соседней картинки)

     vspace - отступ сверху и снизу от картинки до контента вокруг.

     border - задавал толщину рамки вокруг изображения (по умолчанию она равна нулю)

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

     Размещение картинки в коде

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

     Пример №1 - перед параграфом:
     
     Такие элементы как

     И

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

     Пример №2 - в начале параграфа
     
     это встроенный элемент, он помещается внутри блочного и не начинает новую строчку. В примере выше текст обтекает изображение, так как код прописан внутри

     Подписи к иллюстрациям

     Чтобы пометить или подписать фото на странице используется тег

     (от английского figure - рисунок). Этот тег указывает на то, что внутри него помещается контент типа иллюстраций, фотографий, диаграмм и т.п.

     Тег