br 8eb34


search

Изображения в HTML-документе

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

Вставка изображений в html-документ

Для загрузки изображения используется тег img, при этом указывается абсолютный или относительный путь к файлу. Указав относительный путь, картинка должна быть сохранена в папке с сайтом в подпапке с изображениями.

<img src="/images/pict.jpg"> - изображение в папке images

<img src="http://pictures.com/kartinka.jpg"> - картинка на другом сайте

После загрузки картинки, её размер можно изменить, с помощью атрибутов ширины (width) и высоты (height):

<img src="/images/pict.jpg" width="200" height="150">

Кроме вставки в контенте, изображение может являться фоном сайта. Для этого его нужно указать в теге body с помощью атрибута background:

<body background="images/fon.jpg">

Позиционирование изображения в тексте

После вставки изображения, его нужно позиционировать в тексте, для этого применяется атрибут align.

<img src="/images/pict.jpg" align="left">

После этого изображение выравняется слева от текста, так как указано значение left, чтобы выровнять справа - указать значение right. Также текст может располагаться вверху (top), внизу (bottom) или посередине (middle) относительно картинки.

После выравнивания изображения и текста обычно требуется установить отступ между ними. Это можно сделать с помощью атрибутов hspace и vspace:

<img src="/images/pict.jpg" vspace="10"> - отступ по вертикали

<img src="/images/pict.jpg" align="left" hspace="10"> - по горизонтали

Для прерывания обтекания изображения можно воспользоваться тегом br с атрибутом all:

<img src="/images/pict.jpg" align="left">Начало<br clear="all">текст...

После тега br, текст остановит обтекание и окажется под рисунком.

Дополнительные операции с изображениями

К картинке принято устанавливать описание, которое покажется при наведении:

<img src="/images/pict.jpg" alt="картинка">

По умолчанию изображению задается рамка со значением 1, чтобы её убрать следует установить значение 0

<img src="/images/pict.jpg" border="0">

Чтобы узнать как установить ссылку на изображение читайте следующую статью.

{social}

Добавить комментарий

Защитный код
Обновить

Комментарии