Вставка изображения html – Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML. — Вебджем.рф

Содержание

HTML-уроки. Как вставить картинку в html

Очень часто при работе с сайтами нам надо вставить картинку на страницу. В html для вставки картинок используется специальный тег . Разберем основные для нас атрибуты которые имеют тег:

align — определяет как рисунок будет выравниваться по краю и способ обтекания текстом;
alt — альтернативный текст для изображения, такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений;
border — толщина рамки вокруг изображения;
height — высота изображения;
width — ширина изображения;
src — путь к картинке;
hspace — горизонтальный отступ от изображения до окружающего контента;
vspace — Вертикальный отступ от изображения до окружающего контента.

В статье про HTML-редакторы я использовал несколько картинок, давайте в качестве примера возьмем одну из них, например скриншот программы SublimeText. Ссылка на эту картинку: https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png

Итак, в нашей рабочей папке создаем подпапку «Урок 2», копируем туда наш файл, который мы сделали в прошлом уроке и добавляем в него тег <img> в атрибуте src которого содержится ссылка на выбранную нами картинку.

<h2>Вставка изображения в html-страничку</h2> <img src=»https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png» alt=»Изображение из статьи про html-редакторы» align=»left» border=»2″ hspace=»20″ /> Это текст моей html-странички, а ниже картинка.

<h2>Вставка изображения в html-страничку</h2>

Это текст моей html-странички, а ниже картинка.

Если мы сохраним эту картинку у себя на компьютере, то увидим, что она имеет довольно большой размер — 1600px x 903px. Для того чтобы изменить размеры картинки при выводе на нашей странице применяются атрибуты height и width. Эти атрибуты можно применять как вместе, так и по отдельности. Я задал ширину картинки при выводе на экран — 500px, а высоту задавать не стал — в этом случае браузер сам, пропорционально подберет высоту.

Теперь можно попробовать поменять местами теги <p> и <img> при этом задав атрибут align=»left» — изображение будет расположено у левого края страницы, а текст обтекать справа. А если задать атрибут align=»right», то изображение будет расположено у правого края страницы, а текст обтекать слева.

В случае когда текст обтекает справа мы можем заметить, что между картинкой и текстом нет отступа, давайте зададим этот отступ с помощью атрибута hspace=»20″. Теперь картинка слева и справа имеет отступ 20px.

С помощью атрибута border мы можем задать рамку вокруг изображения — border=»2″ — у картинки будет черная рамка с толщиной 2px. Цвет рамки мы можем изменить только с помощью css и о том, как это сделать я расскажу в следующих уроках.

Изображение в качестве ссылки | htmlbook.ru

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a> и </a>, как показано в примере 1.

Пример 1. Создание рисунка-ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылка</title>
 </head>
 <body> 
   <p><a href="sample.html"><img src="images/sample.gif" 
   alt="Пример"></a></p>
 </body> 
</html>

Атрибут href тега <a> задает путь к документу, на который указывает ссылка, а src тега <img> — путь к графическому файлу.

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

Чтобы убрать рамку, следует у тега <img> установить атрибут border=»0″ (пример 2).

Пример 2. Удаление рамки вокруг изображения

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылка</title>
 </head>
 <body>
   <p><a href="sample.html"><img src="images/sample.gif" 
   border="0" alt="Пример"></a></p>
 </body> 
</html>

Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3).

Пример 3. Использование CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ссылка</title>
  <style type="text/css">
    A IMG { border: none; }
  </style>
 </head>
 <body>
  <p><a href="sample.html"><img src="images/sample.gif" 
  alt="Пример"></a></p>
 </body>
</html>

Конструкция A IMG определяет контекст применения стилей — только для тега <img>, который находится внутри контейнера <a>. Поэтому изображения в дальнейшем можно использовать как обычно.

Урок 5. Работа с изображениями в html

Тег img

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

<img>

Для отображения изображения на странице используется атрибут src. Src появилось от source, что означает Источник. Значением атрибута src является url-адрес изображения.

<img src="image.jpg">

Строка выше означает, что изображение находится в той же директории (папке), что и сам html-файл, ссылающийся на данное изображение. Допустим, у Вас есть папка html, в которой содержится index.html с указанным выше кодом и само изображение с названием image.jpg.

<html>

<head></head>

<body><img src="image.jpg">
</body>

</html>

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

Внимание! Сразу научитесь отслеживать две вещи: правильность адреса изображения и правильность написания самого названия. Так как при невнимательной ошибке в одном из этих параметров изображение НЕ отобразится, а Вы можете потратить некоторое количество времени и нервов.

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

Атрибуты тега img

Помимо src у тега img есть и другие атрибуты, которые отвечают за размеры отображаемого изображения, подпись к нему и прочее.

<img src="image.jpg" width="150" height="100" title="Высвечивающаяся подпись" alt="Моё первое изображение" border="0">

src — адрес изображения
width — ширина изображения
height — высота изображения
title — подпись, которая высвечивается при наведении на изображение

alt — альтернативный текст. Нужен для поискового робота и индексации изображений
border — толщина границы изображения. 0 — нет границы, 1 — самая тонкая граница и тд

Не обязательно указывать все атрибуты. Минимум — src, чтобы браузер знал, откуда нужно взять изображение.

Адрес вставленного изображения (примеры)

Как правило, изображения хранятся не в той же папке, что и сам html-файл. Для этого в той же директории создаётся папка images (или img, тут на вкус и цвет). А в неё уже кладутся все нужные изображения. В случае с отдельным хранением нужно будет прописывать для атрибута src уже другой адрес

<img src="images/image.jpg">

Если файл лежит на папку выше, то так

<img src="../image.jpg">

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

 <img src="http://examplesite.ru/images/image.jpg">

Фоновое изображение в HTML

В качестве фонового изображения могут выступать файлы с расширениями gif, jpg, jpeg и png. В том случае, если размер изображения меньше окна браузера, то изображение будет автоматически дальше заполнять оставшийся фон. В body используем атрибут background, в котором прописываем путь к изображению

<html>

<head>

<title>Фоновое изображение</title>

</head>

<body background="images/image.jpg"><h2>Теперь есть фон!</h2> 
</body>

</html>

Как вставить изображения в HTML // Вебшкола онлайн

Пример

Примеры

Вставка изображения

Пример демонстрирует, как вставить изображение на вашу страничку.

Вставка изображения из различных источников

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

Тег <img> и атрибут src

В HTML изображения вставляются с помощью тега <img>.

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

Для отображения изображения на странице используется атрибут src. Src произошло от слова «source» (источник). Значением атрибута src является url-адрес изображения.

Синтаксис тега <img>:

URL указывает на адрес ресурса, где хранится изображение. Например, изображение boat.gif, сохраненное в папке images на сайте www3schools.com имеет URL: http://www.w3schools.com/images/boat.gif.

Браузер вставляет изображение в то место, где встречается тег <img>. Если вы вставите изображение между двух параграфов, тогда браузер отобразит первый параграф, затем изображение и после него второй параграф.

Атрибут alt

Атрибут alt используется для вставки альтернативного текста для изображения.

Этот текст определяется автором страницы:

Значение атрибута alt отображается вместо изображения, если браузер не может отобразить его. Вставка атрибута alt является хорошей практикой, потому что она помогает узнать пользователям текстовых браузеров, какие изображения вставлены в страницу.

Полезные советы

Если на вашу страницу вставлено десять изображений, это значит, что для отображения этой страницы нужно 11 файлов. Загрузка изображений занимает время, поэтому мой вам совет: используйте изображения осторожно.

Еще примеры

Фоновое изображение

Пример демонстрирует, как добавить фоновое изображение html-страницы.

Выравнивание изображений

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

Изменение размера изображения

Пример демонстрирует как изменить размер изображения.

Альтернативный текст изображения

Пример демонстрирует как отображать альтернативный текст, если браузер не может отобразить ваше изображение.

Изображение как ссылка

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

Создание изображения-карты

Пример демонстрирует создание карты-изображения с активными участками. Каждый активный участок является ссылкой.

Теги вставки изображения

Тег	Описание
<img>	Вставка изображения
<map>	Карта-изображение
<area>	Активный участок внутри карты-изображения

Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

Вставка изображения html – Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML.