ID: 38037

Название работы: Гиперссылки

Категория: Лабораторная работа

Предметная область: Информатика, кибернетика и программирование

Описание: href= т ссылка. Атрибуты: href= задает URL адрес. Чтобы по ссылке в левом кадре открылся файл в правом кадре конструкция ссылки в файле загруженном в левый кадр должна быть такой: href= имя файлаимя метки trget= правый указатель ссылки где: имя файла имя файла загружаемого в правый кадр имя метки имя метки в этом файле. Принципы прописывания пути здесь такие же как в случае с картинками: 1 href= prf.

Язык: Русский

Дата добавления: 2013-09-25

Размер файла: 138.5 KB

Работу скачали: 3 чел.

Лабораторная работа №6. «Гиперссылки»

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

Цель работы: научиться выполнять в web-документах ссылки на другие страницы и метки (ссылки на место в том же документе).

<a a >т</a>

контейнер для описания указателя ссылки, как-то: подчеркнутый текст, маркер - точка, звездочка; пиктограммы - экранные кнопки, рекламные вставки и т.д. На указателе нужно щелкнуть мышью, чтобы сделать переход по ссылке. Атрибуты:

title="" 

задает текст, всплывающий, если задержать курсор мыши на указателе, 

style="" - описание стиля.

<a name="" >т</a>

метка (закладка) внутри текущей HTML - программы. Этим оператором метят место, куда предполагается делать переходы. Текст контейнера в этом случае выводится на WEB - странице в место закладки. Обязательный атрибут:

name="" - задает имя метки из символов латинского алфавита. 

<a href="" >т</a>

ссылка. Атрибуты:

href="" 

задает URL - адрес. Адрес может быть относительный: 

. . . # . . . - имя файла в пределах данного компьютера плюс имя метки в пределах данного файла; 

или абсолютный адрес, задающий компьютер, каталог, файл. Абсолютный адрес может давать переход на любой компьютер сети Интернет: 

http: // www. ( . . . ) . ( . . . )/ - на WEB - страницу, 

mailto: ( . . . ) @ ( . . . ) - на электронную почту - E-mail , 

news: ( . . . ) . ( . . . ) - на Newsgroup - группу новостей системы телеконференций UseNet, 

ftp: // ftp. ( . . . ) . ( . . . ) - на FTP - сайты системы хранения и передачи файлов, где хранятся новые программные продукты, гостевые файлы (FAQ) и т.д., 

goppher: // goppher. ( . . . ) . ( . . . )/ - на сайты системы Gopher, 

wais: // wais. ( . . . ) . ( . . . )/ - на WAIS - систему больших (распределенных) баз данных, 

telnet: // bbs.( . . . ) . ( . . . )/ - на Telnet - систему удаленных компьютеров; 

file: //( ... ):\( . . . ) . ( . . . ) - файл с диска данного компьютера; 

. . . ? . . . - URL - адрес плюс строка поиска - ссылка на поиск строки. 

target="" 

задает имя кадра (фрейма), в который делается загрузка по ссылке - заменяется содержимое кадра. Можно указывать имя целого экрана. Если этого атрибута нет, то файл будет выведен в том же окне, где указана ссылка. Зарезервированные (служебные) имена кадров: 

_blank - загрузить файл в новое окно без названия; 

_self - загрузить файл в кадр, откуда делается вызов. Перед новой загрузкой выполняется очистка; 

_parent - загрузить файл в старший (родительский) кадр. Заменяет всю сетку кадра. Если старшего кадра нет, то в кадр вызова;

_top - загрузить файл в полное окно. Разрушает всю структуру кадров. 

new - загрузить файл в новое окно.

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

Чтобы по ссылке в "левом" кадре открылся файл в "правом" кадре, конструкция ссылки в файле, загруженном в "левый" кадр должна быть такой:
<a href="имя файла#имя метки" target="правый" >указатель ссылки</a>,

где: "имя файла" - имя файла, загружаемого в "правый" кадр,
"имя метки" - имя метки в этом файле.

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

простой текст	.txt	файл PostScript	.ps
документ HTML	.html или .htm	звуковой файл AIFF	.aiff
рисунок GIF	.gif	звуковой файл AU	.au
рисунок TIFF	.tiff	звуковой файл WAV	.wav
рисунок X Bitmap	.xbm	анимация QuickTime	.mov
рисунок JPEG	.jpg (.jpeg)	фильм MPEG	.mpeg (.mpg)

Пример1.

Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же как в случае с картинками:

(1) - <a href="prf.html">мои фотографии</a>

(2) - <a href="photos/prf.html">мои фотографии</a>

(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a> 

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Следует запомнить то, что ссылка на ваш почтовый ящик прописывается так:

<a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишите письма </a>

Цвет ссылки можно прописывать, а иначе по умолчанию он будет простым, поэтому вспомним об открывающем тэге боди:

<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> 

Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, что также возможно, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой).

Пример 2.

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

<center>

<H3>Здравствуйте, это моя первая страница.</H3>

<br>

<font color="#CC0000"> Добро пожаловать!</font> :) </center>

<p align="justify">

<a href="1.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя
фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых вирту-альных друзей и знакомых, чтобы они могли <a href="1.html">посмотреть мои фотогра-фии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немно-го проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже ду-маешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, мо-жет быть мы и в реальной жизни станем друзьями:)

</p>

</body>

</html>

Должно получиться следующее:

Заметим, что работает гиперссылка при нажатии на картинку и на фразу «посмотреть мои фотографии». Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0"

<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" border="0">

Пример 3.

Иногда возникает такая ситуация: нам нужно сделать ссылку не на другой документ, а внутри того же документа - закладку, в народе называемую якорем (см. в папке примеры с названиями example.html (1 способ) и exampl1.html (2 способ)). Такая навигация внутри одного и того же документа весьма удобна. Создаваться она может двумя способами.

Способ первый - с помощью атрибута name (имя закладки) тега A:

<H2>Григорий Остер, "Вредные советы.<BR>

Книга для непослушных детей и их родителей".</H2>

<A href="#stih1">Ссылка на стих первый</A><BR>

<A href="#stih2">Ссылка на стих второй</A><BR>

<A href="#stih3">Ссылка на стих третий</A><BR><BR>

<PRE>

Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.

</PRE>

<H3><A name="stih1">Стих первый</A></H3>

<PRE>

... тра-ля-ля 1...

</PRE>

<H3><A name="stih2">Стих второй</A></H3>

<PRE>

... тра-ля-ля 2...

</PRE>

<H3><A name="stih3">Стих третий</A></H3>

<PRE>

... тра-ля-ля 3...

</PRE>

Заголовки (стих первый, стих второй, стих третий) в нашем примере мы сделали закладками, использовав параметр тега A - name:

<A name="stih3">Стих третий</A> 

Затем, без стеснения, мы сделали на них ссылки:

<A href="#stih3">Ссылка на стих третий</A> 

Заметьте - <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:

<A href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то другого документа </A>

или

<A href="http://www.mysite.ru/ancorpri.html#stih1"> Ссылка на стих третий из какого-то другого документа </A>

Способ второй - есть такой атрибут (параметр) - id, который назначает тегу (элементу) уникальное имя в пределах одного документа (кроме тегов Base, Head, Html, Meta, Script, Style, Title). Что мешает нам задать id, например, тегу H3 (заголовкам)?

<H2>Григорий Остер, "Вредные советы.<BR>

Книга для непослушных детей и их родителей".</H2>

<A href="#stih1">Ссылка на стих первый</A><BR>

<A href="#stih2">Ссылка на стих второй</A><BR>

<A href="#stih3">Ссылка на стих третий</A><BR><BR>

<PRE>

Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>

<H3 id="stih1">Стих первый</H3>

<PRE>

... тра-ля-ля 1...

</PRE>

<H3 id="stih2">Стих второй</H3>

<PRE>

... тра-ля-ля 2...

</PRE>

<H3 id="stih3">Стих третий</H3>

<PRE>

... тра-ля-ля 3...

</PRE>

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

<A href="#stih">Ссылка на ...</A><BR>

...

<A name="STIH">Закладка</A> 

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

Задание: 

1.  связать все имеющиеся у вас страницы в нужной последовательности гиперссылками. В документе со списками, где вы написали содержание своего сайта, также оформите ссылки по всем пунктам которые уже написаны. На каждой странице напишите ссылки «назад» и «на главную страницу». Проверьте, чтобы все работало.
2.  на странице резюме используйте любой из описанных в третьем примере способов, чтобы оформить метки. Например, с ФИО на дату рождения.