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>. Надеюсь статья была полезной. Подписывайте на нас в ВК, ютубе и телеге! Если остались вопросы, то пишите их в комментариях!

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

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

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