Создание гиперссылок
а) Cсылки на веб-страницы.
Гиперссылки — это связи, которые устанавливаются между текущим документом и другими объектами. В роли целевых объектов могут быть, например, другой документ, звуковой файл или даже человек, если речь идет об отсылке письма.
Наиболее часто связи устанавливаются с другими документами. Для создания гиперссылок на другие документы используется тег <a> (от anchor — якорь) с атрибутом href. Значением атрибута является адрес документа (в данной лабораторной работе просто имени файла). В окне браузера ссылка может представляться с помощью текста или картинки, которые должны давать пользователю представление о том, куда она ведет:
<a href=info.htm>Ссылка</A>
<a href=info.htm><img src="link.gif"></A>
б) Точки привязки на веб-страницах.
Ссылка может связывать текущий документ не просто с другим документом, а вести к конкретному разделу целевого документа. Для этого перед разделами содержания должны быть созданы точки привязки (метки).
Точки привязки добавляются в документ также с помощью тега <a>, но с атрибутом name и с пустым телом. Для ссылки на помеченный раздел в атрибуте href после адреса (имени файла) добавляется знак номера # и метка раздела.
Пример.
Точка привязки определена в начале документа info.htm следующим образом:
<body>
<a name="top"></A>
...
</body>
Ссылка на метку top документа info.htm из другого документа создается следующим образом:
<a HREF="info.htm#top">Получить информацию</a>
Ссылка может быть направлена и на раздел текущего документа. Тогда адрес (имя файла) в атрибуте HREF можно опустить.
<a HREF="#top">К началу</a>
Замечание
Современные браузеры позволяют упростить синтаксис. Вместо задания точек привязки с помощью элементов <a name="…"></a>, можно пользоваться атрибутами id обычных html-элементов. Например, точка привязки c меткой "text" может быть задана следующим образом:
<p id="text"> …</p>
При этом способ задание собственно ссылок остается прежним.
Управление переходами с помощью гиперссылок
Параллельно с введением в язык разметки фреймов, у тега <a> появился дополнительный атрибут target, который определяет, где должен быть открыт документ, определяемый ссылкой. Он может принимать одно из четырех значений:
-
Значение параметра
target
Способ загрузки документа
_blank
создать новое окно браузера и загрузить документ в него
_self
загрузить документ в текущее окно (фрейм)
_parent
загрузить документ в окно, являющееся родительским для данного окна (фрейма)
_top
загрузить документ в полное окно (в простых случаях совпадает с родительским для фрейма)
Элемент iframe
Чтобы загрузить на html-страницу несколько документов, обычно используются фреймы. Однако классическая фреймовая система, создаваемая с помощью элементов <frameset> и <frame>, предполагает использование для окна документа разбивки табличного типа. Фактически фреймовая система — это несколько самостоятельных браузерных окон (объектов типа window). Поэтому, например, полосы прокрутки при необходимости появляются в отдельных фреймах, а общей для документа.
Чтобы подгружаемый html-документ становился внутренней часть основного документа, в html был введен элемент <iframe> — встраиваемый (inline) или плавающий (float) фрейм. Этот элемент вставляется в обычную разметку документа, и становится его частью (например, прокручивается вместе с ним).
Некоторые из атрибутов элемента <iframe>:
Атрибут |
Описываемое свойство |
Значение по умолчанию |
name |
имя элемента, используемое для индексации в ассоциативном массиве window.frames |
|
id |
идентификатор элемента |
|
src |
URL-подгружаемого документа (файл полного html-документа) |
|
frameborder |
позывать ли границу фрейма (0 или 1)? |
1 (показать) |
scrolling |
показывать ли полосу прокрутки (yes, no, auto)? |
auto (показывать только при необходимости) |
height |
высота |
зависит от браузера |
width |
ширина |
зависит от браузера |
ЗАДАНИЕ 1
1. Для тестирования фреймовых структур создать три html-документа (назвать, например, doc1.htm, doc2.htm, doc3.htm), у которых
а) используются разные цвета для фона страниц и
б) в каждом документе выводится свой текст, например, "Документ 1".
2. Создать две фреймовые структуры (в файлах frames1.htm и frames2.htm соответственно), которые имеют вид, приведенный на следующих рисунках (таблицы формируются из клеток в 50% ширины и высоты экрана):
Замечание.
Для выполнения задания необходимо использовать вложенные наборы фреймов (frameset).
Элементам frame в обеих структурах присвоить имена (атрибут name), например, "F1, "F2" и "F3".