Вставка графических изображений

Чтобы вставить изображение, нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.

< IMG> – элемент для создания ссылки на графический файл (image). Он не содержит конечного тэга – вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т. д.

Необходимым атрибутом является SRC – указатель на графический файл:

SRC =" Ссылка на файл".

Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящееся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:

< IMG SRC=" picture.gif" >

Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на «подходе», пользователь должен видеть, какие изображения он сможет получить.

Пример

< HTML>

< HEAD>

< TITLE> Вставка изображения< /title>

< /head>

< BODY>

< IMG SRC=" picture.gif" ALT=" Картинка" >

< /body>

< /html>

Встретив такую метку, браузер покажет на экране текст “Картинка” и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).

Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае необходимо указать его полное имя (путь в файлу):

Можно использовать атрибуты выравнивания:

align =" bottom" — по нижнему краю;

align =" left" —влево;

align =" middle" —по центру;

align =" right" —вправо;

align =" top" — по верхнему краю.

Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов height - высота и width - ширина. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции.

Таким образом, применение только одного из атрибутов изменяет оба размера рисунка. Если задать явным образом оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданным размером. Масштабирование, как правило, ухудшает качество изображения.

 

Например, реальный размер рисунка 76x121 пикселов. Напишем два варианта отображения данного рисунка.

< IMG SRC = " picture.gif" width=" 76" height=" 121" >

< IMG SRC = " picture.gif" width=" 176”>

Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет пропорционально изменена автоматически) При этом происходит потеря качества изображения, поэтому желательно задавать эти атрибуты в соответствии с реальными размерами рисунка.

 

Атрибут border – задает рамку вокруг объекта. border=" 2" ширина рамки задается в пикселях. При наличии тегов hspace и vspace вокруг картинки образуется отступ в соответствующее количество пикселей от текста.

 

hspace = Число пикселов	Пустое пространство справа и слева от рисунка
vspace = Число пикселов	Пустое пространство выше и ниже рисунка

 

Полностью тэг img может выглядеть следующим образом:

< img src=" путь к файлу рисунка" width=" ширина картинки" height=" высота картинки" hspace=" число" vspace=" число" border=" число" align=" left…" аlt =" подпись к рисунку" >