ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML

ГИППЕРТЕКСТОВЫЕ ССЫЛКИ

Лабораторная работа 6

Цель: Создание гипертекстовых ссылок на другие документы и фрагменты документа

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

В качестве указателя ссылки может выступать текст (отдельное слово, фразы) и графические изображения.

Для записи гипертекстовой ссылки используется тег <А> и главный атрибут НREF, который указывает адрес перехода. Простую ссылку можно записать в виде

<А НREF="http://www.institut.ru/index.html"> Отображаемое название гипертекстовой ссылки </А>

где значение атрибута HREF — адрес документа "index.htm" на машине "www.institut.ru", доступ к которой осуществляется по протоколу НТТР. Указатель ссылки описывается тегом А, атрибутом HREF.

1. Для рассмотрения создания гипертекстовых ссылок, позволяющих переходить в другой документ, создайте документ nast_opr.html (!!! Данный документ должен находиться в той же папке, что и документ Nast.html)

Введите следующий текст:

Определения «Розыгрыш» - период времени, когда мяч находится в игре. Игрок «ударяет» мяч, если он касается мяча своей ракеткой, держа ее рукой, или своей рукой (с ракеткой) ниже запястья.

Просмотрите документ в браузере.

2. Откройте документ Nast.html

3. Произведем создание гипертекстовой ссылки с именем «Определения», которая бы позволяла мгновенно переходить в документ nast_opr.html. Поэтому после заголовка приветствия вставьте следующую строку:

<A HREF="nast_opr.html">Определения</A>

Просмотрите документ в браузере.

4. Создайте документ nast_term.html и сохраните его в новую папку «Терминология».

Судейская терминология

Судейская терминология при выполнении подачи.

до объявления счета ведущим судьей	«Без счета»
не в соответствии с требованиями Правил	«Ошибка»
мяч, поданный во всех отношениях правильно, задел сетку и попал на игровую поверхность принимающего	«Сетка»

5. Если документ, на который Вы делаете гипертекстовую ссылку находиться в другой папке, например, в папке «Терминология», то необходимо сделать следующую запись (данная ссылка должна располагаться в документе после ссылки «Определения» :

<A HREF="Терминология/term.html">Терминология</A>

Просмотрите документ в браузере.

Расположите данную гипертекстовую ссылку на новой строке.

6. Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения <IMG> с указанием пути к рисунку, выполняющему роль гипертекстовой ссылки:

Например:

<A HREF="адрес файла или изображения"> <IMG SRC="image.gif"></A>

Рисунки, применяемые в качестве гиперссылок, обычно выделяются цветной рамкой.

6.1. Откройте редактор Paint и нарисуйте слово «Советы игрокам» и сохраните файл с именем coветы.gif cвою папку.

6.2. Создайте документ nast_cov.html, сохранив его в свою папку. Введите следующий текст:

Советы игрокам

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

6. Откройте документ Nast.html. Введите следующую запись:

<p><A HREF="nast_cov.html"><IMG SRC="советы.gif" WIDTH="95" HEIGHT="70"></A></P>

Просмотрите документ в браузере.

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

Анкер создается следующим образом: <A NAME="AAA"> </A>

где анкеру присваивается имя – ААА

Для перехода к анкеру необходимо сделать следующую запись:

<A HREF="2.htm#AAA">текст</A>

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

<A HREF="2.htm#AAA">Переход к анкеру AAA</A>

Произведем создание гипертекстовой ссылки «Виды соревнований», которая бы позволяла мгновенно переходить на фрагмент этого же документа , посвященный данной теме.

В документ Nast.html введите перед созданным списком о видах соревнований следующий текст:

<A NAME="ВВВ"> </A>

Перед заголовком «Виды соревнований» вставьте следующую запись:

<A HREF="#ВВВ">Виды соревнований</A>

Просмотрите документ в браузере.

САМОСТОЯТЕЛЬНО:

1. В страничке Ваша фамилия.html создайте гипертекстовой переход на страницу tabl_1.html, посвященной Вашим успехам в учебе. Указателем ссылки должно являтся графическое изображение (произвольное).

2. Вставьте в страницу Ваша фамилия.html (внизу документа) рисунок, посвященную своим друзьям (созданный в редакторе Paint и сохраненный в папке «Рисунки»). Создайте подрисуночную надпись «Мои друзья».

3. В страничке Ваша фамилия.html создайте заголовок «Мои друзья» и сделайте гипертекстовой переход на вставлены рисунок

Просмотрите документ в браузере и предъявите результаты лабораторной работы и самостоятельной работы преподавателю

Произведем создание гипертекстовой ссылки на другой документ

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:

<A HREF="pr.htm">Перейти к оглавлению</A>

Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ pr.htm. Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере. Из этого следует одно очень важное практическое соображение. Если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или... на Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком. На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например, если Вы хотите дать ссылку на это руководство со своей странички, Вам придется ввести в свой HTML-документ примерно такой фрагмент:

<A HREF="http://www.yi.com/home/ChuvakhinNikolai/pr.htm"> 

Практическое руководство по HTML Николая Чувахина</A>

Разберем это на примере. Допустим, что необходимо осуществить переход из файла 1.htm к словам "Переход закончен" в файле 2.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.htm:

<A NAME="AAA">Переход закончен</A>

Слова "Переход закончен" при этом никак не будут выделены в тексте документа. Затем в файле 1.htm (или в любом другом) можно определить переход на этот анкер:

<A HREF="2.htm#AAA">Переход к анкеру AAA</A>

Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.htm — достаточно только включить в него вот такой фрагмент:

<A HREF="#AAA">Переход к анкеру AAA</A>

На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа. Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно. Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:

<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>

Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.

<A HREF="mailto:user@mail.box">Послать письмо</A>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box. Разберем все, что мы знаем о связывании, с помощью примера 7.

<HTML> 

<HEAD> 

<TITLE>Пример 7</TITLE> 

</HEAD> 

<BODY>

<H1>Связывание </H1> 

<P>С помощью ссылок можно переходить к другим файлам 

(например, к <A HREF="pr.htm">оглавлению этого 

руководства</A>).</P> 

<P>Можно выгружать файлы (например, 

<A HREF="ftp://yi.com/home/ChuvakhinNikolai/html-pr.doc">это 

руководство в формате Microsoft Word 2.0</A>) по FTP.</P> 

<P>Можно дать пользователю возможность послать почту (например, 

<A HREF="mailto:nc@iname.com">автору этого руководства</A>).</P> 

</BODY> 

</HTML>