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


 

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

54749. Сухан 62 KB
  - Çапла вара çантлăк кашни кунах улшăнса тăрать.Нумай чухне, çакăн пек çанталăкра, çынсем чирлеççĕ. Сирĕн хушăра та чирлекенсем çук. Ку питĕ савăнтарать. Чирлес мар тесе мĕн тумалла-ши?
54750. Задачи на движение 98 KB
  Оборудование – интерактивная доска (или мультимедиа проектор), компьютер, конверты с заданиями, чистые карточки для записи слов, фломастеры, цветовые жетоны для распределения по группам.
54751. ОТСУТСТВИЕ ВРЕДНЫХ ПРИВЫЧЕК – ЗАЛОГ ЗДОРОВЬЯ 48 KB
  Цель: формирование у учащихся представления о вредных привычках и их влиянии на организм человека. выяснить как дети относятся к различным вредным привычкам; сформировать негативное отношение к вредным привычкам.
54752. Кровь – это жизнь 276 KB
  Учитель: Как по другому мы называем постоянство внутренней среды Дети: Гомеостаз Учитель: Какие параметры гомеостаза или мы их еще называли биологические константы вы знаете Дети: температура тела артериальное давление состав крови пульс и т. Как нельзя себе представить государство без транспортных линий связи так нельзя понять существование человека без движения крови по сосудам когда во все органы и ткани разносятся кислород вода белки и другие...
54753. Глобальные проблемы атмосферы 70 KB
  Чем больше производится вредных выбросов в атмосферу тем больше ее кислотность и больше кислот содержится в обыкновенном дожде. Вопросы к теме Кислотные дожди примерный вариант: Какие из газообразных оксидов формируют естественную кислотность осадков В чем проявляет себя синдром кислотных частиц Какие из газообразных оксидов преимущественно влияют на подкисление атмосферных осадков сверх нормы Какие из производств являются поставщиками в атмосферу кислотообразующих веществ Оказывают ли подкисляющее действие на атмосферную...
54754. Опера М.И. Глинки «Иван Сусанин» 163.5 KB
  Задачи урока: Способствовать осознанию детьми мотивов поведения героев и определению личностного отношения к событиям и персонажам. Развивать умение чувствовать настроение героя музыкального произведения. Воспитывать чувство гордости за русский народ, патриотизм. Способствовать накоплению навыков работы с литературой.
54755. Модель «совокупный доход – совокупные издержки» 59.84 KB
  Однако сами издержки бывают внешними (явными) и внутренними (неявными). К внешним издержкам относятся платежи внешним (по отношению к данной фирме) поставщикам.
54756. Природа в опасности! Охрана природы 1.36 MB
  Развитие у детей умения осуществлять самоконтроль. Развитие восприятия: Развитие целостности предметности осмысленности восприятия. Развитие речи: Развитие диалогической и монологической речи развитие содержательности понятности и выразительности речи. Развитие памяти: Развитие образной эмоциональной словесно-логической памяти.
54757. Проценты 58 KB
  Цели урока: Формирование у учащихся понятия Процент; умений перевода процентов в дробь и обратно; умений нахождения процента от числа разными способами; Развитие кругозора и математической культуры у учащихся; Воспитание активности аккуратности точности. Тип урока: комбинированный Время проведения: 40 минут Оснащение: опорный конспект заранее приготовленные записи на доске прилагается презентация по теме Ход урока: Этап урока Деятельность учителя Деятельность ученика Организационный момент...