Пример 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>
8.10. Создание гиперссылок
Возможность создания гиперссылок делает язык HTML столь мощным средством представления информации в WWW. Гиперссылки позволяют осуществлять переход из просматриваемого документа на другую страницу (или другой раздел этого же документа).
Для создания ссылок используется тег <a> (и </a>). Этот тег имеет несколько атрибутов, наиболее важными из которых являются:
HREF, определяющий гиперссылку на другую Web-страницу или источник информации WWW;
NAME, позволяющий обозначить (пометить) определенную «именованную» позицию в HTML-документе. Эта позиция может быть установлена как в текущем, так и во внешнем документе.
Общий синтаксис гипертекстовой ссылки следующий:
<A HREF=url>ссылка</A>
Например,
<A HREF=Spec.htm>Специальности</>
Здесь слово Специальности ссылается на документ Spec.htm, образуя гипертекстовую ссылку. Если документ, формирующий ссылку, находится в другой папке, то подобная ссылка называется относительной, например,
<A HREF=RTS/Spec.htm>Специальности</>,
здесь документ Spec.htm находится в папке RTS.
Если документ, на который формируется ссылка, находится на другом компьютере (другом Web-узле), то необходимо указать его URL полностью в соответствии с синтаксисом, приведенным в гл. 6.
Другим, не менее важным атрибутом тега <A>, является атрибут NAME. Этот атрибут позволяет обозначить в HTML-документе определенную «именованную» позицию. Благодаря этому можно ссылаться не только на другой документ, но и на определенное место в документе.
Рассмотрим документ, содержащий ссылки.