HTML изображения – тег img

Автор Damir-Tote. Опубликовано в HTML, Блог

Рассмотрим на блоге damirtote.ru, как работать с HTML изображениями. В качестве HTML изображения используется тег img, поэтому все возможные форматы мы и рассмотрим ниже.
 
Изображения на сайте используются в двух форматах, либо в качестве фона или же в виде отдельного изображения. Рекомендуется использовать графики изображений в трех форматах, которые поддерживают все браузеры, это: JPEG, GIF и PNG.
HTML изображения – тег img

 

Как правило изображения сайта хранятся на сервере (хостинге) сайта, но есть и исключения. На Blogger картинки хранятся в Пикасе, но я их держу в Яндекс фотках. Они хорошо индексируются и сервер, как вы понимаете очень хороший.

Фоновые изображения

Фоновое изображение – это изображение, которое заполняет все пространство сайта, на котором оно задано. На моем блоге он белого фона. Так примеру, использовав в теге BODY атрибут background=»ссылка на картинку», данное изображение будет использовано в окне всего браузера. Использование фонового изображения для Blogger можете посмотреть тут.

Встраивание изображений

Для того, чтобы разместить на странице изображение, нам потребуется тег img, имеющий обязательный параметр для этого SRC, который определяет адрес картинки.
 
Теперь будем рассматривать примеры изображений и их постановка в виде HTML.
 
Пример:
 
<imgsrc=»Ссылка на картинку»>
     Содержание Вашего текста
 
Результат:

Содержание Вашего текста

 
Из примера видно, что текст расположен внизу картинки, что не очень красиво. Для того, чтобы картинка и текст выровнять нам потребуется HTMLтег align.
 
Пример:
 
<imgsrc=»Ссылка на изображение» alignleft«>
     Картинка слева, содержание Вашего текста.
 
Результат:

Картинка слева, содержание Вашего текста.

 
Уже, что-то получше, теперь текст обтекает сверху картинки.
 



Пример:
 
<imgsrc=»Ссылка на изображение» aligntop«>
     Содержание Вашего текста перед картинкой.
 
Результат:

Содержание Вашего текста перед картинкой.

 
Изображение расположено справа, а текст слева.
 
Пример:
 
<imgsrc=»Ссылка на изображение» aligntexttop«>
     Содержание Вашего текста и плавный переход на другую строчку под картинкой.
 
Результат:

Содержание Вашего текста и плавный переход на другую строчку под картинкой.

 
В результате, текст и изображение выравнивается и если строчка довольна длинная, то строка продолжится под картинкой.
 
Пример:
 
<imgsrc=»Ссылка на изображение» alignmiddle«>
     Содержание Вашего текста по середине изображения.
 
Результат:

Содержание Вашего текста по середине изображения.

 
В данном случае текст выравнивается посередине изображения, так смотрится на много привлекательнее.
 
Пример:
 
<imgsrc=»Ссылка на изображение» alignabsbottom«>
     Содержание Вашего текста. Продолжение следует уже под ней.
 
Результат:

Содержание Вашего текста. Продолжение следует уже под ней.

 
В этом случае, текст оказывается под картинкой, что смотрится тоже довольно не плохо.

Размеры изображений.

Любое изображение имеет заданный размер в пикселях. Во время встраивании картинки Вам возможно потребуется размер уменьшить. Для этих действий в HTMLизображении используют тег width – ширина и height – высота. Чаще всего они задаются в размерах (пикселях). Давайте рассмотрим один из примеров:
 
Пример:
 
<imgsrc=»Ссылка на изображение»>
     <imgsrc=»Ссылка на изображение» width=»50″ height=»50″>
     <imgsrc=»Ссылка на изображение» width=»25″ height=»25″>
 
Результат:

 

Отделение изображения от текста.

В предыдущих примерах вы могли заметить, что текст очень близко расположен к картинке, а как отделить текст от изображения, для решения этой проблемы у нас имеется тег hspase – горизонтальный отступ и vspace – вертикальный отступ.
 
Пример:
 
<imgsrc=»Ссылка на изображение»
          align=»left» hspace=»20″ vspace=»20″>
     Содержание Вашего текста теперь не прилипает к изображению.
 
Результат:

Содержание Вашего текста теперь не прилипает к изображению.

 






Изображение в качестве ссылки

Для того, чтобы изображение сделать ссылкой, нам потребуется поместить в код HTML тег <a>. В примере изображение будет ссылаться на один из моих статей и открываться в отдельном окне.
 
Пример:
 
 
     <imgsrc=»Ссылка на изображение» alt=»рыбка»>
    
 
Результат:

рыбка

 
На этом примере и закончим. Теперь вы знаете, как использовать тег imgв HTML изображении, если что-то еще интересует, задавайте вопросы в комментариях.

Трекбэк с Вашего сайта.