Как добавить картинку в html

Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег <img>. Данный тег является одиночным и строчным, а также имеет два обязательных атрибута src и alt:

 <img src="image.jpg" alt="Альтернативный текст">

При помощи атрибута src указывается путь к картинке. При помощи атрибута alt указывается альтернативный текст для картинки. Если картинка по каким либо причинам не отобразится на веб-странице, то вместо нее вы увидите альтернативный текст:

Альтернативный текст

Также для изображения рекомендуется указывать ширину и высоту, это позволит браузеру быстрее загружать изображения на веб-страницу. Указывать ширину и высоту можно при помощи каскадных таблиц стилей, либо при помощи атрибутов width (ширина) и height (высота):

 <img src="image.jpg" alt="Альтернативный текст" width="300" height="250">

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

Как записать путь к изображению

Если изображение и файл, в котором прописан путь к этому изображению, лежат в одной папке:

Путь к изображению

то путь будет состоять из названия изображения и его расширения:

 <img src="car.jpg" alt="">

Если картинку перенести в папку img:

Путь к изображению

то путь к ней будет начинаться с названия папки, в которой она находится:

 <img src="img/car.jpg" alt="">

Если файл index.html поместить в папку files:

Путь к изображению

то путь к изображению будет начинаться с конструкции ../:

 <img src="../img/car.jpg" alt="">

Если папку files, содержащую файл index.html положить еще в одну папку, то путь станет таким:

 <img src="../../img/car.jpg" alt="">

и т.д.

Всплывающая подсказка

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

 <img src="car.jpg" alt="Альтернативный текст" width="300" height="250" title="Автомобиль">

Если навести курсор на картинку, то появится всплывающая подсказка:

Всплывающая подсказка


psd-html-css.ru

Как узнать адрес картинки и скопировать его

Скопировать адрес изображения можно несколькими способами:

  1. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено скопировать URL, щёлкнуть по необходимому пункту.
    Если навести на фото и нажать на правую клавишу мышки, то в Mozilla Firefox откроется контекстное меню с таким пунктами
    Рис.1 Если навести на фото и нажать на правую клавишу мышки, то в Mozilla Firefox откроется контекстное меню с таким пунктами
  2. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено изучить характеристики фотографии, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Информация об изображении»; в Internet Explorer см. пункт «Свойства»), в открывшемся окне выделить адрес рисунка,
    • нажать на правую клавишу мышки, в появившемся контекстном меню щёлкнуть по пункту «Копировать».
    • нажать комбинацию клавиш клавиатуры Ctrl+C.
    Информация об изображении в Mozilla Firefox
    Рис.2 Если в Mozilla Firefox навести на фото, нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Информация об изображении», то откроется окно, где можно посмотреть список картинок, используемых на странице, их адрес, альтернативный текст (содержимое в атрибуте alt), фактический размер и используемый масштаб
  3. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Открыть изображение»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью атрибутов height и width или с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера,
    • нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать».
    • нажать комбинацию клавиш клавиатуры Ctrl+C.
    Так выглядит страница картинки, в данном случае смайлика
    Рис.3 Так выглядит страница смайлика.
    Её URL: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
  4. На сенсорных устройствах (смартфон, планшет) долго без движения держать палец над фото, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (он может называться «Просмотр картинки»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью атрибутов height и width или с помощью с помощью CSS. Затем долго жать на адрес в адресной строке браузера. После того, как появятся ползунки и весь URL будет выделен (в случае необходимости, ползунки можно раздвинуть на необходимое расстояние), щёлкнуть в появившейся панели кнопку «Копировать».
  5. Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу фонового изображения, щёлкнуть по необходимому пункту. Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера (см. Рис.3),
    • нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать».
    • нажать комбинацию клавиш клавиатуры Ctrl+C.

    Перейти на страницу фонового изображения в Mozilla Firefox

  6. Из исходного кода страницы сайта.

Как сохранить изображение

Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено сохранить картинку, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Сохранить изображение как…»), в открывшемся окне выбрать папку на компьютере, куда будет сохранён рисунок. Как сохранить изображение на компьютер

Если фотография является фоновой картинкой, то нужно предварительно перейти на страницу картинки (см. Рис.3).

Возможно будет интересно: «Как сохранить изображение экрана монитора (сделать скриншот)»

shpargalkablog.ru

Тег <img> для вставки картинки

Итак, для размещения изображения на веб-странице используется тег <img>, у которого есть атрибуты src и alt. Src показывает браузеру где лежит картинка, а alt это альтернативный текст, который видит пользователь в случае если у него отключены картинки, во время загрузки или если изображение не загружается.

Для XHTML

Для HTML4, HTML5

Берем и недолго думая вставляем картинку в html. Результат:

текст для картинки

Учтите, что тег <img> это строчный элемент. Значит, когда используется XHTML/строгий HTML4, его можно размещать только внутри блочного элемента (<p>, <div>)

В остальных случаях (HTML4, HTML5) это не обязательно.

Параметры, применяемые к изображениям в HTML

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

width – ширина картинки
height – высота картинки

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

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

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

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

Для решения этой проблемы (например если лень высчитывать пропорции и смотреть оригинальное разрешение), можно указать один параметр по которому браузер и будет высчитывать пропорции. Кстати, не обязательно писать «20px», можно просто написать «20». Идем дальше, на очереди параметр alt.

alt – альтернативный текст (краткое описание изображения)

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

Пример HTML-кода:

Результат:

Логотип сайта blogwork.ru

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

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

Пример HTML-кода:

Результат:

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

Следующие атрибуты это vspace, hspace и border.

vspace – этот атрибут задает отступ по вертикали между изображением и текстом вокруг (в пикселях)

hspace – этот атрибут задает отступ по горизонтали между изображением и текстом вокруг (в пикселях)

border – этот атрибут задает рамку вокруг картинки (в пикселях)

Пример HTML-кода:

Результат:

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

align – (right, left, middle) этот атрибут выравнивает изображение по одному из краев, либо по центру

Код:

Результат:

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

 

 

 

Помимо этого можно использовать обычный атрибут style, если вам так хочется:

Вот что получится:

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

Сайты иногда присваивают картинкам классы в эстетических целях, чтобы все картинки имели одинаковый стиль обрамления (например, какие-нибудь красивые border). В .css файле задается общий параметр для одного класса, например, pic. Затем он указывается в HTML:

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

Читайте также:

  • Что такое HTML. Пояснение для новичков.
  • Как установить счетчик посещений на сайт? Устанавливаем счётчик LiveInternet, Яндекс.Метрика и Google Analytics: https://blogwork.ru/kak-ustanovit-schetchik-poseshhenij-na-sajt/
  • Перенос сайта с Денвера на хостинг — перенос WordPress с localhost.

Размещаем изображение с чужого сайта

Можно ли вставить картинку с чужого сайта? Можно. Это называется хотлинк (hotlink). Не все вебмастера это любят и позволяют делать, потому что картинка подгружается с чужого хостинга и если мы все начнем подгружать картинки с чужого хостинга, а он будет слабым и вообще не предназначенным для этого (как специальные сайты-хостинги картинок) то будет печаль. Но Вконтакте не такой. Вот смотрите, захожу в чужие сохраненные картинки Вконтакте и вставляю в html прямо на этой странице:

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

Как я это сделал? Очень просто:

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

Как вставить картинку в таблицу на веб-странице

Сделать это очень просто — достаточно поместить <img> внутри тега ячейки <td>

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

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

Как вставить картинку, сделав ее в качестве фона html страницы

Для этого вам нужно указать в параметре background тега body путь к картинке, которую вы хотите сделать фоном страницы (пропишите путь к картинке, как и при обычном размещении):

В качестве страховки от того что картинка не будет загружать можно оставить bgcolor.

Бонус — почему может не показывается картинка, если вы «все правильно указали»?

В заключении расскажу о нюансе, с которым я сталкивался лично. Называется он несоответствие расширения файла.

Бывает, что хостинг или движок сайта не видит разницы в регистре между html-kartinka.png и html-kartinka.PNG. А, бывает что разница есть и поэтому картинга не загружается. Еще обратите внимание на сам файл, ведь он может быть html-kartinka.jpg, а может быть и html-kartinka.jpeg. Внимательнее!

Сидишь под вечер голову ломаешь, а там все легко. И проверить просто, — достаточно заглянуть на хостинг:

картинки на хостинге

blogwork.ru

Выравнивание и обтекание текстом

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

  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Вставка картинки внутрь строки</title>   </head>   <body>   <!-- Блоку div мы задали ширину для наглядности примера -->   <div style="width: 300px">   <p>Этот текст будет поломан вставленным в него изображением   <img src="https://coder-booster.ru/images/main-logo.png">   нашего ресурса</p>   </div>   </body>  </html>  

Для решения проблемы нужно задать выравнивание изображению. В HTML это происходит с помощью атрибута align. Современные стандарты требуют использовать CSS для выравнивания, поэтому мы рассмотрим только два значения атрибута align.

Значения, которые может принимать атрибут align:

  • left — изображение будет перемещено к левому краю контейнера, а текст станет обтекать его справа.
  • right — выравнивание картинки происходит по правому краю контейнера, а текст обтекает её слева.
  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Выравнивание изображения с помощью атрибута</title>   </head>   <body>   <!-- Блокe div мы задали ширину для наглядности примера -->   <div style="width: 300px">   <p>Этот текст будет обрамлять логотип нашего ресурса   <img align="right" src="https://coder-booster.ru/images/main-logo.png">   с левой стороны</p>   </div>   </body>  </html>

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

Важно понимать, что реальный размер изображения может не соответствовать пространству, отведенному на HTML-странице. Элементу <img> можно задать атрибуты width (ширина) и height (высота). Они явным образом определяют размеры, которые будет иметь картинка после загрузки.

Значения атрибутов width и height задаются в пикселях или в процентах. Если размеры изображения заданы в процентах, то занимаемое пространство рассчитывается относительно родительского элемента. Выражение, в котором высота картинки задана в процентах, а ширина в пикселях может выглядеть следующим образом «<img src=»test.html» width=»150px» height=»50%»>».

  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Изменение размера изображения с помощью атрибута</title>   </head>   <body>   <img src="some-test.html" width="300px" height="100%">   </body>  </html>

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

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

Заметка
На самом деле необходимо указывать размеры для всех изображений. Неважно используете ли вы для этого атрибуты или CSS. Браузер сможет определить отведенное пространство для картинки еще до её загрузки, что предотвратит ужасные дерганья страницы.

Альтернативный текст

Стандарты W3C (аббр. Консорциум всемирной паутины) требуют добавления к каждому элементу <img> специального атрибута alt. Его значение должно содержать альтернативный текст, который в краткой форме описывает содержимое изображения. Это необходимо для лучшей индексации картинок поисковыми системами, а люди, использующие экранные дикторы, смогут понять их содержимое. Также этот текст будет показан пользователю вместо изображения, если браузер не сможет его загрузить.

coder-booster.ru

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.