Переход к другому документу

Листинг. Внедрение графического файла.

<HTML>

<HEAD><TITLE>Фотография</TITLE></HEARD>

<BODY BACKGROUND=vts.jpg><CENTER>

<IMG SRC=green.jpg WIDTH=486 HEIGHT=400 BORDER=0 ALT=”Греция”>

</CENTER> </BODY>

</HTML>

Так выглядит браузер после загрузки HTML – документа

Листинг

<HTML>

<HEAD><TITLE>Фотография</TITLE></HEARD>

</CENTER> </BODY>

</HTML>

Так выглядит браузер после загрузки HTML – документа

Гиперссылки

Для Осуществления связи между HTML – документами применяются так называемые гипертекстовые ссылки.

Гипертекстовая ссылка состоит из двух частей: псевдокнопки и адресной части (URL). Псевдокнопка – это просто какой-то текст или графическое изображение, по которому пользователь должен щелкнуть мышью, приблизительно также, как он «нажимает» на кнопку диалоговой панели.

Абсолютный и относительный URL

В общем случае URL имеет следующий вид (части, заключенные в квадратные скобки, не обязательны и могут быть опущены):

протокол://адрес_узла[:порт]/путь/файл[#метка]

В таблице ниже приведены назначения компонент URL.

Компонента	Назначение
протокол	Обозначение одного из протоколов, используемых для обращения к ресурсу, возможные значения: http, ftp, file и др.
адрес_узла	Доменное имя или IP-адрес компьютера в сети Интернет
порт	Порт, по которому клиент обращается к серверу для установления соединения; указывается только в случае обращения к нестандартному порту
путь	Путь к требуемому ресурсу
файл	Имя файла, содержащего HTML-документ или другой ресурс
метка	Позиция в документе, начиная с которой он отображается в окне браузера

URL, заданный в таком виде, называется абсолютным URL, так как он полностью описывает расположение ресурса в глобальной сети.
Пример
При обращении к конкретному ресурсу порт и позиция в документе часто не указываются:

http://www.ctc.msiu.ru/education/book/index1.html

Якорь

Для создания гипертекстовой ссылки используется тэг <A>, следующего формата:

<A HREF=”URL”>Любой текст</A>

Буква А означает anchor (“якорь”), HREF – Hypertext Reference («Гипертекстовая ссылка) URL может быть полным, например:

<A HREF=http://www.infa-m.ru>Издательство INFA-M</A>

Если происходит ссылка на документ, который расположен на том же самом диске, более того, в том же каталоге, можно применять сокращенную запись URL, указывая только имя файла например:

<A HREF=”page15.htm”> Страница 15</A>

Эта гипертекстовая ссылка приведет к загрузке HTML – документа, хранящегося в том же каталоге в виде файла page15.htm.

Следующий пример демонстрирует ссылку на файл demo.jpg. хранящегося в каталоге pictures:

<A HREF=”pictures/demo.jpg”>

Тэг <A> может иметь дополнительный атрибут TARGET=, который указывает на способ загрузки страницы в браузер. Например, следующая ссылка приведет к созданию нового экземпляра браузера, в который и будет загружена страница:

<A HREF=’page15.htm” TARGET=”_BLANK”> Страница 15 </A>

Разберем следующую ситуацию. В одном HTML – документе (например, contents.htm) описано оглавление некоторого большого текста, разбитого на главы. А сам текст в полном объеме хранится в другом HTML – документе (например, text.htm является гипертекстовой ссылкой на сам текст. Например:

<A HREF=”text.htm”>Глава 77</A>

В этом случае документ будет загружен с самого начала и пользователю придется с помощью полосы прокрутки позиционировать его на главу 77. HTML позволяет путем введения так называемых именованных гипертекстовых ссылок избежать поиска нужного фрагмента. Имя гипертекстовой ссылке присваивается так же при помощи тэга <A> с атрибутом Name.

Например, для указанного примера в HTML – документе text.htm вместо Глава 77 следует поместить тэг:

<A NAME=”chapter77”>Глава 77</A>

А в HTML – документе contents.htm соответствующий вызов оформить следующим образом:

<A HREF=”text.htm#chapter77”>Глава 77</A>

В этом случае загруженный документ сразу будет установлен с искомой точки.

Использование изображения в качестве гиперссылки ничуть не сложнее, чем использования для этой цели обычного текста. Для этого тэг, описывающий изображение, следует обрамить тэгом гиперссылки:

Пример связи страниц

Простейший HTML – документ, содержащий гиперссылку(05_01.htm)

<HTML>

<HEAD><TITLE>Документ 1</HEAD></TITLE>

<BODY.

<H1>Документ №1</H1><BR>

<A HREF=”05_02.htm”>Документ № 2</A>

</CENTER>

</BODY></HTML>

Листинг 2 Простейший HTML – документ, содержащий гиперссылку(05_02.htm)

<HTML>

<HEAD><TITLE>Документ 2</HEAD></TITLE>

<BODY.

<H1>Документ №1</H1><BR>

<A HREF=”05_01.htm”>Документ № 1</A>

</CENTER>

</BODY></HTML>

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

Циклическая связь двух HTML – документов с помощью тэгов <A HREF>

Многие авторы учебников даже стесняются называть HTML-тексты программами. Работу HTML-проектировщика они называют разметкой текста. На самом деле, в этом названии заключена методическая ошибка. Ведь оно (название) предполагает такой порядок работы:

· берется обычный текст

· и размечается, то есть, на него накладывается сетка из тегов так, чтобы браузер смог показать строчки текста на экране.

Однако, хорошие гипертекстовые документы при таком подходе получить гораздо сложнее, чем в случае когда, структура HTML-документа планируется еще до написания текстов. Ведь гипертекст устроен принципиально иначе (см. третью причину).

2. Переносимость.

Если, работая в Word'e, вы создаете документ для собственного потребления, у вас нет проблем. Нет проблем и тогда, когда вы посылаете свою работу в мир как печатную копию. Если же ваш партнер, издатель или коллега просит прислать электронную версию -- начинаются проблемы.

· Для того чтобы документ появился на экране у абонента, необходимо, чтобы его компьютер и операционная система (платформа) позволяли запустить ваш любимый редактор.

· Для того чтобы документ загрузился в Word, крайне желательно совпадение версий этого продукта у вас и вашего коллеги.

· Для того чтобы текст на экране не выглядел как древненорвежский манускрипт, необходимо, чтобы ваш партнер имел на своем компьютере шрифты, которые были использованы при создании вашего текста.

3. HTML-документ -- это гипертекст.

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

· Первый этюд к гипертексту

· Второй этюд к гипертексту

· Третий этюд к гипертексту

· Последний этюд к гипертексту

Для задания гипертекстового перехода внутри документа используют две команды <A>. Первая команда с атрибутом href является источником перехода, вторая с атрибутом name -- приемником.

Общий вид программы
	Задание перехода по меткеНа экран выводится ссылка: текст Метка. Сюда браузер приходит по ссылке.На экране ничего не отображается.

Для организации перехода внутри документа нужно:

1. Выбрать имя для метки.

· Имя должно быть уникальным в HTML-программе. Это означает, что других меток с таким именем в программе быть не должно.
А что будет, если не послушаться этого совета?
Когда одинаковых меток несколько, браузер выполняет переход на самую первую метку в программе.

· Имя может заключаться в кавычки.

· Имя может состоять из любых символов. В том случае, когда имя содержит пробелы или ключевые символы HTML, кавычки обязательны.

2. Запрограммировать переход по метке.
В месте перехода нужно написать команду < A href=#метка>текст</ A >.
Здесь:

· # -- ключевой символ;

· метка -- выбранное имя для метки;

· текст -- запись, которая будет выглядеть на экране браузера как ссылка.

3. Установить тег с меткой в нужном месте HTML-программы.
Перед фрагментом HTML-программы, на который должен выполниться переход записать команду-метку < A name=метка></ A >.
При этом:

· имя метки должно быть то же самое, что и в команде, задающей переход;

· на экране тег-метка < A name=метка> никаких изображений не строит.

Пример
Программа

Переход к другому документу

Для того, чтобы браузер загрузил в свое окно новый HTML-документ, нужно записать в программе ссылку при помощи команды < A > с атрибутом href=имя_файла.

Общий вид программы
	Выполнить файл "имя_файла".На экран выводится ссылка: текст При щелчке пользователя на ссылкебраузер строит на экране документпо программе, заданной в файле"имя_файла".

Документ
Программа (файл doc1.htm)
Программа, на которую настроена ссылка в документе (файл doc2.htm)