Категории:

Астрономия
Биология
География
Другие языки
Интернет
Информатика
История
Культура
Литература
Логика
Математика
Медицина
Механика
Охрана труда
Педагогика
Политика
Право
Психология
Религия
Риторика
Социология
Спорт
Строительство
Технология
Транспорт
Физика
Философия
Финансы
Химия
Экология
Экономика
Электроника

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

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

<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)