Как вставить картинку в HTML.


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

На самом деле, все, что вам необходимо знать – это всего один html-тег, который отвечает за вывод изображения — <img>. Однако, этот тег имеет несколько атрибутов, без которых нам не обойтись. Итак, давайте рассмотрим простейший пример вставки картинки в HTML:

1
<img src='auto.png'>
Как вставить картинку в HTML

В данном примере помимо основного тега img мы использовали обязательный атрибут src, который указывает на адрес картинки. Само изображение может быть размещено как на сервере, где расположен сайт, так и на других внешних серверах (сайтах). В последнем случае нам необходимо задать полный путь к изображению:

1
<img src='http://anothersite.com/auto.png'>

Если вы не укажете содержимое атрибута src, то браузер ничего не отобразит.

Рассмотрим другие необязательные атрибуты (свойства) изображения:

width – ширина картинки

height – высота картинки

Если мы не указываем данные свойства, то браузер отобразит изображение в его оригинальном размере, то есть он определит его высоту и ширину автоматически. На это уходит небольшое время, однако в качестве оптимизации скорости загрузки страниц все же рекомендуется указывать размеры явно. Например:

1
<img src='auto.png' width ='300' height='100' >

Мы указали, что изображение имеет ширину в 300 пикселей и высоту в 100 пикселей. Если картинка имеет большие размеры, то браузер принудительно уменьшит ее размер.

alt – атрибут, в котором указывается альтернативный текст – краткое описание того, о чем картинка. Сейчас, наверное, уже сложно найти пользователя, который отключает в своем браузере показ изображений. Раньше это делали из-за низкоскоростного интернета, но сейчас это уже в прошлом. Если пользователь отключает отображение картинок, то браузер вместо изображения отображает альтернативный текст. Специалисты по поисковой оптимизации до сих пор рекомендуют заполнять альтернативные теги для картинок, так как поисковые системы также используют его для определения тематики данной страницы. Помимо этого есть большая вероятность, что ваши изображения будут участвовать в поиске по картинкам, и вы сможете получать дополнительный трафик на свой сайт.

title – краткий заголовок картинки. Также имеет важно значение для поисковой оптимизации.

vspace – атрибут задает отступ в пикселях по вертикали между картинкой и окружающим текстом.

hspace – задает отступ по горизонтали

border – рамка вокруг картинки в пикселях. По умолчанию его значение равно 0.

Вот пример использования всех описанных атрибутов:

1
<img src='auto.png' alt='новая модель автомобиля KIA' title='KIA' width='400' height='200' hspace='5' vspace='5' border = '1'>




Другие посты

Категория: HTML

Оставить комментарий