Атрибуты тега IMG

SCR=url - определяет URL для файла изображения. Броузеры (например, Internet Explorer) поддерживают несколько графических форматов: GIF, JPG,BMP.

ALIGN=тип_выравнивания – определяет выравнивание текста относительно изображения. Возможные значения:

TOP – текст располагается на уровне верхней части изображения;

MIDDLE - текст располагается на уровне средней части изображения;

CENTER - текст располагается на уровне центральной части изображения;

BOTTOM - текст располагается на уровне нижней части изображения;

LEFT – изображение располагается слева по отношению к обтекающему тексту;

RIGHT - изображение располагается справа по отношению к обтекающему тексту.

ALT=текст – задает альтернативный текст, который будет виден на экране, если рисунок не загружен. Этот текст является также текстом всплывающих подсказок. Очень важно, чтобы при наличии на странице рисунков для них был задан альтернативный текст. Некоторые пользователи для ускорения процесса загрузки страниц в своем броузере устанавливают опцию Do not load images (не загружать рисунки). При этом наличие альтернативного текста позволяет без затруднения знакомиться с содержимым узла.

Border=n – задает толщину рамки вокруг рисунка в пикселях. Рамка отображается на экране только в том случае, если изображение является гиперссылкой (о гиперссылках подробнее см. ниже п. 8.9).

HEIGHT=n и WIDTH=n – высота и ширина изображения в пикселях. Если эти параметры заданы, то броузер перед загрузкой изображения обычно рисует пустой прямоугольник. Если его размеры отличны от фактических размеров рисунка, то изображение растягивается или сжимается в соответствии с указанными границами.

HSPACE=n и VSPACE=n – задают размеры полей вокруг рисунка в пикселях.

Пример 12. Страница с рисунком

<head>

<title> HTML-страница с рисунком</title>

</head>

Уральский государственный технический

университет

<img src="upi_logo.gif" align=left hspace=20 vspace=20

width=165 height=205>

Уральский государственный технический

университет - один из крупнейших и престижных

вузов страны - образован в 1920 году. За годы своего

существования университет подготовил более 150000

инженеров более 90 специальностей. Диплом УГТУ -

надежное подтверждение высокой квалификации

специалиста не только в России, но и на

международном уровне.

</body>

</html>

В этом документе имеется рисунок (см. рис. 8.11). Имя файла рисунка upi_logo.gif. Для рисунка заданы размеры: ширина (width) – 165 пикселей, высота (height) – 205 пикселей. Расстояние от границы рисунка до текста (hspace, vspace) – 20 пикселей. Текст обтекает рисунок слева (align=left). Текст выровнен по ширине ().

В рассмотренном примере файл рисунка и файл HTML-документа располагались в одном каталоге.

Рис.8.11. Пример HTML-документа с рисунком

Чаще всего Web-страница содержит не одно изображение, а несколько. Тогда для рисунков удобно создать отдельную папку. Обычно имя этой папке дают такое же, как и имя HTML-документа, но с расширением files. В качестве примера рассмотрим страницу, изображенную на рис. 8.12.

При создании этой страницы были использованы три графических файла:

· Satldish.jpg - содержит рисунок антенны.

· Kaf-rts.gif - содержит изображение объемной кнопки с названием кафедры.

· Paper1.gif - содержит фоновый рисунок страницы.

Имя файла рассматриваемого HTML-документа Prim11.htm. Файлы с изображениями размещаются в папке Prim11.files. При этом ссылки на URL файлов рисунков и фона будут выглядеть следующим образом:

<body background=Prim11.files/Paper1.gif> - задает фоновое изображение для всей страницы.

<img src=Prim11.files/Kaf-rts.gif> - вставляет рисунок кнопки с названием кафедры.

Полный текст документа см. ниже в примере 13.

Рис. 8.12. Пример страницы с несколькими рисунками

Пример 13. Страница с несколькими рисунками, хранящимися в отдельной папке

<html>

<head>

<title> HTML-страница с рисунками</title>

</head>

Государственный Технический Университет

Специальности:

201600 Радиоэлектронные системы

201200 Средства связи с подвижными объектами

</body>

</html>

<32 33 343536 37 38 >

Дата добавления: 2015-08-26; просмотров: 1052;