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


 

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

35140. Использование встроенных средств SQL-сервера InterBase для создания и использования базы данных 127 KB
  оздание БД интерфейсными средствами WISQL. Выполняется путем использования функции WISQL File Create Database. Диалог создания БД показан на рисунке 1. В поле Location Info устанавливается переключатель Local Engine
35142. Программная реализация выборки и модификации данных в базе данных Interbase 56.5 KB
  При этом сохранение результатов редактирования выполняется путем вызова рассмотренной ранее функции pplyUpdtes класса TBDEDtSet и всех его потомков например компонента Query содержимое выборки которого редактируется и кэшируется которая выполняет отправку в БД закэшированных на клиентской стороне изменений. Пример реализации функции обработки события OnUpdteRecord: void __fstcll TDtModule1::Query1UpdteRecordTDtSet DtSet TUpdteKind UpdteKind TUpdtection Updtection { switch UpdteKind { cse ukModify: brek; cse ukInsert:...
35143. АИС Магазин бытовой техники и электроники 419.63 KB
  Проектирование функциональных особенностей системы 5. Требуется создание информационной системы использование которой будет способствовать повышению эффективности работы всех отделов компании и обеспечивать ведение учета в единой системе. В расчетном задании предполагается осуществить представление информационной системы которая будет вести реестр создавать отчеты и генерировать заказы. Иметь оперативную связь между всеми пользователями системы содержать все необходимые данные о технике.
35144. Создание и заполнение справочников 8.26 MB
  Выполнить действия: А Выбрать пункт меню Справочник щелчком левой кнопки мыши Б Выбрать команду Фирмы щелчком левой кнопки мыши если разрешен учет по нескольким фирмам В Нажать клавишу SHIFTENTER для ввода новой фирмы Астра Г Заполнить реквизиты фирмы 2. Выполнить действия: А Выбрать пункт меню Справочник щелчком левой кнопки мыши Б Выбрать команду Места хранения щелчком левой кнопки мыши В Нажать клавишу Insert для ввода нового элемента Г в пункте Тип выбрать Склад Д в пункте Вид склада выбрать Склад оптовый Е Можно ввести...
35145. Ввод начальных остатков 2.75 MB
  12 в пункте Сумма: ничего не вводим в пункте Содержание операции: ввести для чего предназначена данная операция и Enter 4 Переходим к заполнению табличной части: А введем остатки по уставному фонду для Кливер и Русь колонка Дт – это дебет счета. Из выпадающего меню выбираем счет 00 это специально придуманный счет используемый только для введения остатков в данной программе и ENTER ENTER колонка Кт – это кредит счета. Из выпадающего меню выбираем счет 40 Уставной фонд и ENTER ENTER колонка СубконтоКт – это объект...
35146. Учет поступления материальных ценностей 16.32 MB
  Д в пункте Поставщик Контрагент из выпадающего меню выбрать группу Поставщики а затем элемент Ротонда Е в пункте Примечание можно дать краткую характеристику о вводимой информации Ж в пункте Номер счета поставщика задать номер З перейдем к заполнению табличной части: в колонке ТМЦ справочник номенклатура выбрать группу Товары элемент Костюм женский в колонке Ед. выбрать шт в колонке Колво ввести 31 все остальные колонки заполнятся автоматические ввести также товары костюм мужской и пиджак мужской и ОК И в результате...
35147. Информационные системы. Общие сведения 10.58 MB
  К средствам извлечения информации относятся: штатные средства ручного ввода клавиатура мышь; средства автоматизированного ввода с твердых копий сканеры; специализированные средства ручного ввода дигитайзеры световые перья сенсорные экраны; средства ввода речевой информации; средства ввода данных с аппаратуры датчики измерительные устройства аппаратура связи. Это программное обеспечение может быть как достаточно простым и предполагать только передачу операционной системе данных от аппаратных компонентов так и сложным...
35148. редства удалённого выполнения заданий в Windows 38 KB
  Планировщик заданий Windows осуществляет настройку как для локального компьютера так и для удаленной системы. На удаленных системах эта возможность обеспечивается совместной работой нескольких служб и программ: Планировщик заданий это стандартная служба Windows управляющая планировщиком заданий. Создание заданий на локальном компьютере осуществляется через: ПускВсе программыСтандартныеНазначенные задания Создание заданий на удаленном компьютере осуществляется через: Сетевое окружениеОтобразить компьютеры рабочей группывыбираем...