HTML тег для вывода изображений «img»

Вконтакте
Google+

HTML тег для вывода изображений тег < img >

Для отображения jpg, gif или png картинки на веб – странице, используют тег <img>. URL – адрес картинки, которую нужно вывести, указывают в качестве значения атрибута src. У <img> не имеется закрывающий тег.  URL – адреса, как и у тега <a>, могут быть относительными или абсолютными.

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

Синтаксис img

Пример:

Будет отображено изображение kartinka.jpg, которое находится по адресу http://timurziev.ru/images/, или же, проще говоря, картинка на которую указывает URL – адрес http://timurziev.ru/images/kartinka.jpg.

В данном случае, изображение будет выводиться с рамкой. Чтобы убрать рамку, добавим в код еще один атрибут — арибут border

Как Вы наверное поняли, атрибут border определяет рамку изображения. При значении none – рамка отсутствует. Также мы можем добавить свой размер рамки, например, чтобы сделать рамку у изображения толщиной в 5 пикселей, пропишем в коде размер рамки

Используя атрибуты height (высота) и width (ширина) можно задать высоту и ширину изображения. Например чтобы наше изображение было шириной 300 пикселей и высотой 400 пикселей, пропишем в коде атрибуты height с значением 400 и width с значением 300

Также при необходимости картинку можно сделать ссылкой, то есть при нажатии на картинку будет выполнен переход на указаную страницу или документ. Для этого нужно заключить изображение в тег для создания ссылки – тег <a>. Читайте:  HTML-тег < a > для создания ссылки или якоря

Будет отображено изображение kartinka.jpg, при нажатии на которую будет выполняться переход по адресу http://timurziev.ru/map.html

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

HTML
09.04.2017
AMEERTEAM
ameerteam@timurziev.ru
Печалиться о прошлом абсурдно, ты не сможешь его изменить. Бояться будущего бессмысленно, оно не существует.

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

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