При создании сайта изображения имеют важное значение. Представьте себе 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">
