38037
Гиперссылки
Лабораторная работа
Информатика, кибернетика и программирование
href= т ссылка. Атрибуты: href= задает URL адрес. Чтобы по ссылке в левом кадре открылся файл в правом кадре конструкция ссылки в файле загруженном в левый кадр должна быть такой: href= имя файлаимя метки trget= правый указатель ссылки где: имя файла имя файла загружаемого в правый кадр имя метки имя метки в этом файле. Принципы прописывания пути здесь такие же как в случае с картинками: 1 href= prf.
Русский
2013-09-25
138.5 KB
3 чел.
Гипертекстовым документом называется документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро переходить от одного документа к другому, не задумываясь, где находится этот документ.
Цель работы: научиться выполнять в 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) |
Тэг <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 - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, что также возможно, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой).
<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>
Если вы, например, напишите имя закладки большими буквами, а ссылаясь укажете это имя маленькими, то броузер может посчитать это за два разных имени (а может и за одно), поэтому во избежание ошибок учитывайте это, и пишите имена в одном регистре.
Задание:
А также другие работы, которые могут Вас заинтересовать | |||
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 минут Оснащение: опорный конспект заранее приготовленные записи на доске прилагается презентация по теме Ход урока: Этап урока Деятельность учителя Деятельность ученика Организационный момент... | |||