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