HTML-тег img добавление изображений

Помимо текста на вебстраницах довольно часто можно встретить различные картинки, изображения, схемы и прочие графические элементы. Как правило, их добавляют при помощи стандартного HTMLтега img, обладающего целым рядом полезных атрибутов и возможностей.

Характерный пример добавления изображения в коде страницы:

В данном случае используется лишь два атрибутаalt и src. Основное предназначение первого атрибутапредоставлять альтернативный текст / описание изображения, которое проиндексируется поисковой системой и, скорее всего, будет использоваться при составлении выдачи по картинкам. Если не заполнять alt, то в плане SEO (привлечение пользователей с поисковиков) от картинки не будет практически никакой пользы. Кроме того, текст из alt будет показываться на вебстранице вместо самого изображения в ситуации, когда пользователь полностью отключит графику в своем браузере. Атрибут src, как вы догадались, содержит адрес графического файла, который будет вставлен на страницу. Сюда можно вставить внутренний (если картинка располагается в одной из директорий вашего сайта) или внешний адрес. При указании внутреннего адреса можно использовать не только абсолютный, но и относительный путь.

Атрибут title используется у картинок достаточно часто, хоть и является общим для всех HTMLэлементов. Обычно здесь прописывают человекопонятное название изображения на русском языке (если сайт русскоязычный). Содержимое title показывается в небольшой всплывающей подсказке при наведении курсора мышки на картинку.

Атрибут align позволяет задавать картинке нужный тип выравнивания. К примеру, если вы хотите, чтобы изображение размещалось с правой или с левой стороны страницы, а текстовый контент обтекал его по противоположной стороне (и занимал несколько строк),то следует использовать значения align=”right или align=”left соответственно. Если хотите, чтобы на одной линии с изображением (независимо от его высоты) помещалась лишь одна строка текста, то используйте одно из следующих значений для alignmiddle (строка пройдет по середине высоты), bottom (строка пройдет по нижней границе), top (строка пройдет по верхней границе).

Посредством стандартных атрибутов width и height можно задавать пиксельную / процентную высоту и ширину изображений. Однако стоит учитывать, что при изменении пропорций браузер исказит картинку. Можно задавать отступы от изображения до ближайших элементов в обе стороны, а также вверх / вниз. Делается это посредством атрибутов hspace и vspace (указываются значения в пикселях).

Часто картинке задают небольшую рамку для того, чтобы визуально выделить ее. Сделать это можно при помощи таких атрибутов, как border и bordercolor. Первый атрибут задает пиксельную толщину нашей границы, а второйее цвет. Цвет следует задавать лишь тогда, когда толщина не равна нулю.

Если вы захотите оформить картинку в виде ссылки, к примеру, на какуюлибо страницу или раздел, то воспользуйтесь связкой элементов a + img. Вот пример такой связки:

Здесь example_url – это адрес нужной страницы, аimg_url – адрес картинки.

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

Ваш e-mail не будет опубликован.