Переход к другому документу
Листинг. Внедрение графического файла.
<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>
<BODY BACKGROUND=pictures/IMG_0119.JPG><CENTER>
<IMG SRC=IMG_0165.JPG WIDTH=486 HEIGHT=400 BORDER=0 ALT=”Греция”>
</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>
В этом случае загруженный документ сразу будет установлен с искомой точки.
Использование изображения в качестве гиперссылки ничуть не сложнее, чем использования для этой цели обычного текста. Для этого тэг, описывающий изображение, следует обрамить тэгом гиперссылки:
<A HREF=”index.htm”><IMG SRC=”home.gif”ALT=”На главную страницу”></A>
Пример связи страниц
Простейший HTML – документ, содержащий гиперссылку(05_01.htm)
<HTML>
<HEAD><TITLE>Документ 1</HEAD></TITLE>
<BODY.
<CENTER>
<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.
<CENTER>
<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)
