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


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

Что такое SSL-сертификат

Что такое SSL-сертификат

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

Что такое PHP?

Что такое PHP?

Если вы только начинаете изучать PHP, то вы должны знать некоторые понятия. Итак, что же такое PHP?

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

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