2.6 Гипертекстовые ссылки
Большинство авторов Web-страниц не ставят перед собой задачу последовательно изложить материал в одном документе. Вместо этого они снабжают свои страницы ссылками на другие документы и разделы того же документа, предоставляя читателям возможность переходить по ссылкам и отображать информацию, наиболее интересующую их. Элемент <A> позволяет автору оформлять фрагменты текста или изображения так, чтобы при активизации их пользователем браузер отобразил в своем окне требуемый раздел другого документа. Элемент <A> также предоставляет возможность именовать позицию и документе, чтобы на нее могли указывать гипертекстовые ссылки.
В примере 2.11 показаны четыре типа гипертекстовых ссылок: содержащую абсолютный URL, относительный URL, указывающую на позицию внутри текущего документа, а также на позицию в документе с заданным URL. Помимо ссылок http:, большинство браузеров также поддерживают ссылки mailto: (для адресов электронной почты), file: (для локальной файловой системы на клиентской машине) и ftp: (для FTP-узлов).
|
Пример 2.11. Гипертекстовые ссылки |
|
The official HTML specifications are available from <А HRЕF="http://www.w3.оrg/MаrkUp/"> the World Wide Web Consortium (W3C)</A>, with some examples given in <A HRЕF="HTML-Examples.html">my example page</А>. The Java programming language is discussed in <A НREF="#Section-3">Section 3</A>. For a discussion of COBOL, see <А HREF="johndoe.html#COBOL">my friend's home page</А>.
|
2.7 Изображения
Элемент IMG позволяет включать изображения в состав документа. Большинство браузеров может обрабатывать форматы GIF (Graphic Interchange Format), JPEG (Joint Photographic Expert Group) и PNG (Portable Network Graphic). Поскольку время загрузки изображения определяет время загрузки всей страницы, желательно представлять изображение в том формате, который обеспечивает минимальный размер файла.
Элемент IMG включает изображение в текущую позицию в документе. IMG представляет собой элемент текстового уровня и не приводит к созданию нового абзаца. IMG не является контейнером, поэтому закрывающий дескриптор не указывается. SRC - обязательный атрибут. Он определяет расположение файла, содержащего изображение, которое должно быть включено в документ. Атрибут ALT задает строку, которая выводится вместо изображения в браузерах, не поддерживающих графические файлы.
В примере 2.12 приведены различные варианты выравнивания изображения относительно текстовой строки. Результаты показаны на рис. 2.10.
|
Пример 2.12. Варианты выравнивания изображения |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIТLE>Выравнивание изображения</TITLE> </HЕАD> <BODY> <Н1 align=center>Выравнивание изображения</H1> <TABLE border=1> <TR><ТН>Выравнивание <TН>Результат <TR><TH><СОDE>LЕFT</CODE> <TD><IMG srС="rude-pc.gif" align="left" Аlt="Rude PC" width=54 height=77> This positions the image at the left side, with text flowing around it on the right. <TR><TH><CODE>RIGHT</CODE> <TD><IMG src="rude-pc.gif" align="RIGHT" alt="Rude PC" width=54 height=77> This positions the image at the right side, with text flowing around it on the left. <TR><TH><СОDE>TOP</CODE> <TD><IМG src="rude-pc.gif" align="tOP" alt="Rude PC" width=54 height=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image top. <TR><TH><CODE>BOTTOM</СОDE> <ТD><IМG src="rude-pc.gif" align="BOTTOM" alt="Rude PC" width=54 height=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image bottom. <TR><TH><CODE>MIDDLE</CODE> <ТD><IMG src="rude-pc.gif" align="MIDDLE" alt="Rude PC" width=54 height=77> Here, the image runs into the paragraph and the line containing the image is aligned with the image center. </TАВLE> </BОDY> </HTML>
|
Рисунок может являться ссылкой, для чего элемент <img> должен быть помещен в контейнер <а href=...>...</a>. Еще эффектнее воспринимается сайт, на котором части изображения являются ссылками на разные страницы. Такое изображение называется графической картой.
В примере 2.13 приведено изображение, разделенное на три прямоугольника, с каждым из которых связан HTML-документ. Изображение карты ссылок показано на рис. 2.11.
|
Пример 2.13. Организация карты ссылок |
|
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Карта ссылок</TITLE > </HEAD> <BODY> <IMG SRC="arrows.gif" USEMAP="#arrows" BORDER=0> <MАP NAME="arrows"> <ARЕА SHAPE="RECT" COОRDS="0,0,100,190" HREF="left.html" АLT="Налево"> <AREA SHАРE="RECT" COORDS="101,0,200,190" NОНREF АLT="Прямо"> <AREA SHAPЕ="RЕСT" CООRDS="201,0,300,190" HRЕF="right.html" АLT="Направо"> </МАР> </BODY> </HTML> |
Строка 7: код этой строки выводит изображение и ссылается на элемент с именем #arrows, в котором описана карта.
Контейнер <MAP> содержит строки 8-12: описание карты.
Строки 9-11 описывают отдельные области и указывают, какую ссылку они будут вызывать.
Проведя указателем мыши по такому изображению, можно легко обнаружить, где находится ссылка, а где ее нет (рис. 2.11). Справа и слева карты изображения ссылки существуют, а в центре - отсутствует. Адрес ссылки можно прочитать в статусной строке 6pаузера. Выполняя пример, обратите внимание, как адрес ссылки меняется при перемещении маркера с левой стрелки поворота на правую.