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


 

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

43735. Создании базы данных для построения крепёжных деталей 3.34 MB
  Исходное информационное обеспечение. Обеспечить пользователя необходимой информацией о крепёжных деталях. Решение: Использование формы в которых будет содержаться необходимая информация о крепежных элементах. Создать программу которая позволила бы обрабатывать сортировать и изменять информацию о крепёжных элементах.
43736. Реализация базы данных центра занятости 587.17 KB
  С чисто практической точки зрения базы данных позволяют избавиться от большого количества бумажных документов и значительно ускорить поиск и внесение информации. Цель данного курсового проекта – реализация базы данных центра занятости. Для выполнения работ в базе данных необходима авторизация с помощью пары...
43737. Система управління складським обліком продовольчих товарів 24.23 MB
  Завдяки використанню топології складських приміщень, система наочно відображає завантаженість товаром осередків та стелажів Грамотна організація роботи підприємств складського комплексу веде до підвищення продуктивності праці, скорочує витрати робочого часу на виконання складських операцій і дозволяє ефективно використовувати складські приміщення. Все це сприяє підвищенню економічної ефективності підприємства.
43738. Обґрунтування роздільної технології збирання льону-довгунця з використанням льонопідбирача-молотарки ПМЛ-1 в Інституті луб’яних культур 1.64 MB
  Первинна очистка насіння здійснюеться на чотирьох машинах ОВС-25, великі партії насіння до посівних кондицій доробляються на двох лініях, одна з яких змонтована з послідовно підключених Петкусі-Гігантів, друга являе з себе комплекс КЗС-40, переобладнаний зерноочисними машинами фірми “Петкус”. Доробка машин малих парків насіння здійснюется на чотирьох Петкус-Суперах і одному Петкус-Гіганті.
43739. Исследование торговой деятельности малых предприятий розничной торговли продовольственными товарами магазина ООО «Эклар» 329.68 KB
  Организация малого предпринимательства в сфере торговли Понятие малого предпринимательства и этапы его развития Формы государственной поддержки малого предпринимательства Организация торговой деятельности малого предприятия в розничной торговле на примере ООО Эклар.
43740. Определение способов модернизации системы управления сбытом в ООО «Шебекинcкий Картон» 519.4 KB
  Комплекс мероприятий решений и действий по формированию ассортимента выпускаемой продукции и ценообразованию по формированию спроса и стимулированию сбыта реклама обслуживание покупателей коммерческое кредитование скидки заключению договоров продажи поставки товаров товародвижению транспортировке по инкассации дебиторской задолженности организационным материально-техническим и прочим аспектам сбыта. Таким образом в хозяйственной деятельности организации одним из основных вопросов являются сбыт реализация готовой...
43742. Расчет конструктивных схем двигателей класса тяги 12...18 тонн 1.58 MB
  Расчет газодинамических параметров КВД. Проработка конструкции КВД. Проработка конструкции статора КВД и направляющего аппарата 1й ступени. Расчет на статическую прочность рабочей лопатки 2й ступени КВД.
43743. Разработка конструкции компрессора высокого давления 1.6 MB
  В работе проведен сравнительный анализ конструкций компрессоров высокого давления двигателей класса тяги 1218 тонн выбрана конструктивная схема КВД выполнена детальная проработка конструкции. Проведены расчеты на прочность рабочей лопатки 2й ступени и промежуточного диска расчет лопатки 2й ступени на колебания расчет крепления направляющего аппарата 1й ступени КВД.1 Проточная часть КВД 15 1.5 Расчет газодинамических параметров КВД 17 1.