Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Атрибуты тега 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>

 

<body bgcolor=aqua>

 

<p align=center>

<font size=5>Уральский государственный технический

университет</font>

</p>

<p align=justify>

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

width=165 height=205>

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

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

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

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

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

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

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

международном уровне.</p>

 

</body>

</html>

 

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

В рассмотренном примере файл рисунка и файл 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>

 

<body background=Prim11.files/Paper1.gif>

<p align=center>

<font size=5>Государственный Технический Университет</font>

</p>

<p align=center>

<img src=Prim11.files/Kaf-rts.gif>

</p>

<p align=Left>

<img src=Prim11.files/Satldish.jpg align=left width=150 height=200 hspace=20 vspace=5 >

<font Face=Courier new size=5> <B>

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

</B>

</font>

</p>

<font size=4>

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

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

</font>

</p>

 

</body>

</html>

 




Поделиться с друзьями:


Дата добавления: 2014-11-29; Просмотров: 461; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.015 сек.