Начало 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">


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

CSS — каскадные таблицы стилей

CSS — каскадные таблицы стилей

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

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

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