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.  на странице резюме используйте любой из описанных в третьем примере способов, чтобы оформить метки. Например, с ФИО на дату рождения.


 

А также другие работы, которые могут Вас заинтересовать

31159. Что такое внушение 24 KB
  Непосредств словесного воздействие эмоц насыщенным, повелительным тоном. Словесная формула: прямая речь, обращенная к объекту воздействия. В ней выражается требуемое поведение либо состояние, кот должно наступать сразу же после высказанных слов.
31160. Расскажите о приемах внушения 24.5 KB
  вызвать через преподносимый образ понятие лозунг идею ассоциацию с чемлибо или кемлибо имеющим в глазах объекта бесспорный престиж ценность чтобы сделать содержание воздействия приемлемым. Заключается в цитировании высказываний личности кот уважает или наоборот ненавидит объект воздействия. Этот способ заключается в побуждении объекта воздействия принять содержащуюся в инфе идею суждение оценку мнение на том основании что якобы большинство представителей данной соц группы или воинского подразделения разделяют ее.
31161. Что такое внушаемость и каковы условия ее повышения 22.5 KB
  Условия повышающие внушсть: 1пребывание в большой группе людей. 3псих состояние внушаемого внуш легче осущ когда индивид наход в расслабленном состоянии или в сост психич возбуждения. 4Воздействие на органы чувств: Внушающие цвета: красный приводит к возбуждению фиол и синий подавляет.
31162. Расскажите о природе и формах конформизма 21.5 KB
  2 вида: 1уступчивость готовность действовать так как говорят и действуют другие члены группы не затрагивающие личные убеждения этого чека.Нормативные условия когда индивид с помощью группы хочет избежать суждения или наказания 2.Условия привлекательности группы если члены группы симпатичны в группе прочные связи; если группа противостоит другой; если группа отвергается обществом Сочувствие и желание выделиться толкает людей вливаться в эти группы.
31163. Что такое подражание? Каков его механизм 22.5 KB
  Объекты и условия подражания: 1Подражание группе конформизм способ воздействия в результате кот индивид меняет свое поведение и псих состояние в соответствии с поведением и состоянием группы. 2 вида: 1уступчивость готовность действовать так как говорят и действуют др члены группы не затрагивающие личные убеждения этого чека.Нормативные условия индивид с помощью группы хочет избежать суждения или наказания 2.Условия привлекательности группы если члены группы симпатичны в группе прочные связи; если группа противостоит другой; если...
31164. Кому и чему подражают люди 21.5 KB
  Эксперимент аподражают тому кто сам явл положит подкреплением кто симпатичен или тот кто доступен бподражают тому кто положительно подкрепляет хвалит Предмет подражания: 1.Люди старшего возраста подражают правилам поведения традициям от1325 скорее будут подражание личности; от 2535 менее они более самодостаточные.
31165. Каковы характеристики образа вожака толпы 22.5 KB
  Харакки вожака: Наличие группы людей. Главная задача вожака создать веру религ политич соц или веру в какоенибудь дело чека или идею6Вожакине мыслители это люди действия.Принцип воздействия вожака на топу: Сильная вера одержимость идеей сила воли.
31166. Расскажите об особенностях косвенного убеждения 23.5 KB
  Виды убежд по харру аргументов: 1 прямое У использ фактов аппеляции к память логике; 2косв У использ правдоподобные аргументы намеки обещания косв переменные.Приемы конструир компетентности:1прием представления рассказать о заслугах использование символов надежности атрибуты успеха жостиж профессионального уровня или приндалежти к соц группе2прием безуслов согласия сначала сообщ использ тезисы вызывающ безуслов согласие ауд.3использ влятельной речи.4использ нескольких коммуникаторов больше людей знают о темеПриемы...
31167. В чем отличие убеждения от внушения 22 KB
  Эффект убеждения: может быть достигнут только при выполнении нескольких условий: аДостаточное колво времени бзаинтересованность ауд в вопросе вУ может состояться если у ауд есть возможность воспринимать и обработать полученную инфу гСравнительное сходное понимание аргументов и тезисов коммуникаторами и ауд.Косвенное У основано на использовании факторов отвлекающих на себя внимание ауд но создающих иллюзию убедительности. вхарки ауд.