HTML – IMG

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

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

Начнем с того, что картинку можно вставить в любое место на сайте. Будь то блок, абзац, бегущая строка и т.д. Практически везде используется один и тот же тег <img src>. Есть несколько вариантов использования этого тега для вставки картинок. Первый способ: картинка хранится у вас локально(или на вашем сервере) в той же папке, где находится файл главной страницы вашего сайта, тогда вставка изображения будет выглядеть так:

Обратите внимание – закрывающий тег не требуется.

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

Выглядеть это будет так 🙂

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

Теперь рассмотрим ситуацию, когда картинка располагается у вас локально, но в другой папке. Это не проблема, ведь в html так же и в других языках, можно прыгать по папкам с помощью точек. Допустим ваш файл лежит на 2 уровня выше, да еще и в папке images. Не вопрос:

Или наоборот лежит еще в паре папочек, которые валяются на особый случай:

Запомните. Мы используем тег img и добавляем атрибут src. Src это source, то есть атрибут отвечает за ресурс. Помимо src у тега img есть еще ряд весьма полезных атрибутов:

  • alt – выводящийся текст при наведении на картинку (а вообще называется альтернативный текст)
  • align – расположение на странице (левый край, правый край, по центру)
  • border – рамка и ее толщина вокруг изображения
  • height – вместо использования css, можно обойтись этой настройкой высоты
  • width – опять же, настройка ширины изображения вместо css
  • hspace –  горизонтальный отступ изображения до окружающих материалов
  • vspace – вертикальный отступ изображения до окружающего контента
  • ismap – сообщает браузеру, что картинка является серверной картой
  • longdesc – содержит адрес до аннотации к изображению
  • lowsrc – адрес изображения низкого качества
  • usemap – Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

Как видите тег Img можно разнообразно настроить, как для отображения, так и для функциональной нагрузки. Картинку можно так же сделать ссылкой, поместив тег <img> в тег <a>. Надеюсь статья была полезной. Подписывайте на нас в ВК, ютубе и телеге! Если остались вопросы, то пишите их в комментариях!

0

Автор публикации

не в сети 6 часов

Vapi

0
Комментарии: 19Публикации: 103Регистрация: 14-04-2017

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

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

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