Всем привет дорогие читатели. В этом посте мы с вами узнаем как вставить картинку в html. Особо тут ничего не расскажешь, поэтому эта статья будет в формате микропост.
Как вставить картинку в html?
Начнем с того, что картинку можно вставить в любое место на сайте. Будь то блок, абзац, бегущая строка и т.д. Практически везде используется один и тот же тег <img src>. Есть несколько вариантов использования этого тега для вставки картинок. Первый способ: картинка хранится у вас локально(или на вашем сервере) в той же папке, где находится файл главной страницы вашего сайта, тогда вставка изображения будет выглядеть так:
|
1 |
<img src="1.jpg"> |
Обратите внимание — закрывающий тег не требуется.
Второй способ изображение находится где-то в сети. Тогда нужно использовать такой синтаксис:
|
1 |
<img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/1200px-NewTux.svg.png"> |
Выглядеть это будет так 🙂
Для того, чтобы исходную картинку уменьшить используйте свойства ширины и высоты в css. А пока этот большой пингвин посидит тут.
Теперь рассмотрим ситуацию, когда картинка располагается у вас локально, но в другой папке. Это не проблема, ведь в html так же и в других языках, можно прыгать по папкам с помощью точек. Допустим ваш файл лежит на 2 уровня выше, да еще и в папке images. Не вопрос:
|
1 |
<img src="../../images/1.jpg"> |
Или наоборот лежит еще в паре папочек, которые валяются на особый случай:
|
1 |
<img srv="images/blackday/friday/discount.gif"> |
Запомните. Мы используем тег img и добавляем атрибут src. Src это source, то есть атрибут отвечает за ресурс. Помимо src у тега img есть еще ряд весьма полезных атрибутов:
- alt — выводящийся текст при наведении на картинку (а вообще называется альтернативный текст)
- align — расположение на странице (левый край, правый край, по центру)
- border — рамка и ее толщина вокруг изображения
- height — вместо использования css, можно обойтись этой настройкой высоты
- width — опять же, настройка ширины изображения вместо css
- hspace — горизонтальный отступ изображения до окружающих материалов
- vspace — вертикальный отступ изображения до окружающего контента
- ismap — сообщает браузеру, что картинка является серверной картой
- longdesc — содержит адрес до аннотации к изображению
- lowsrc — адрес изображения низкого качества
- usemap — Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.
Как видите тег Img можно разнообразно настроить, как для отображения, так и для функциональной нагрузки. Картинку можно так же сделать ссылкой, поместив тег <img> в тег <a>. Надеюсь статья была полезной. Подписывайте на нас в ВК, ютубе и телеге! Если остались вопросы, то пишите их в комментариях!