Начало HTML. Работаем с изображением

Вставка изображений на страницу сайта - тэг и атрибуты, примеры
Начало HTML. Работаем с изображением

При создании сайта изображения имеют важное значение. Представьте себе Web-страницу без фотографий, клипарта (картинок), пиктограмм и т.д.

Как вы уже наверно заметили физически изображения на страницу обычно не вставляются, а присутствуют в виде ссылок. Например, в редакторе Wordpress (самой распространенной и пожалуй простой CMS) при вставке изображения вы загружаете его в папку «upload» и даете на него ссылку на странице.

Для вставки изображения в Web-страницу применяется тег img который имеет следующие параметры:

1. src — ссылка – прописывается путь к какому-либо файлу в папке в корне сайта или в Интернете. Этот параметр является единственным обязательным, т.е. без него изображения не будет.

Например:

<img src="/image/logo-2.png" />

Получаем:

2. align — значение - вертикальное и/или горизонтальное выравнивание - этот параметр показывает, где будет располагаться изображение и как текст будет обтекать его. Может принимать следующие значения:

  • align="left" - картинка слева. фактически получаем: float: left; vertical-align: top;
  • 2 align="right" - картинка справа. получаем: float: right; vertical-align: top;
  • 3 align="center" - картинка по центру, по вертикали. получаем: vertical-align: middle;

Например:

<img src="/image/logo-2.png" align="center" />

3. alt – текстовое описание изображения. Этот атрибут имеет важное значение т.к. учитывается роботами поисковых систем — по нему поисковик ранжирует картинки в поиске по изображениям. Кроме того, если посетитель отключил графику при просмотре сайта, или изображение не загрузилось, то вместо него будет видна рамка с названием картинки.

Для изображения выше можем использовать такой вариант: alt="логотип", или, что ещё лучше, alt="prohostings.ru - обзоры хостинга", второй вариант будет полезнее ссточки зрения оптимизации. Не забывайте об этом атрибуте.

Например:

<img src="/image/logo-2.png" alt="prohostings.ru - обзоры хостинга" />

4. Значение border="n" – задается ширина рамки изображения. По умолчанию "0"

1 <img src="..." border="0">

2 <img src="..." border="1">

3 <img src="..." border="3">

Может будет интересно?

Топ хостинг-провайдеров

На основе средней оценки и общего количества голосов

3.39 / 44
средняя оценка хостинга 3
Radisol
3.33 / 95
средняя оценка хостинга 3
Inoventica
3.33 / 40
средняя оценка хостинга 3
Hostiman
3.32 / 56
средняя оценка хостинга 3
AdminVPS
3.29 / 78
средняя оценка хостинга 3
HOSTLIFE
3.21 / 154
средняя оценка хостинга 3
VDSina
3.13 / 85
средняя оценка хостинга 3
Ru VDS
3.07 / 71
средняя оценка хостинга 3
HotHat
3.05 / 60
средняя оценка хостинга 3
AvaHost
2.98 / 50
средняя оценка хостинга 3
VPS.ua