Гиперссылки. Для реализации гиперсвязи надо указать координаты того документа, к которому осуществляется переход.

Для реализации гиперсвязи надо указать координаты того документа, к которому осуществляется переход.

Ярлык гиперсвязи такой: < A> … < /A>

Полный синтаксис имеет вид:

< A HREF = “имя _файла”> подсвеченный текст < /A>.

HREF(Hyper Reference - гиперссылка) – имеет значение полного имени файла, на который осуществляется переход или адрес чьей-либо страницы.

Например:

< A HREF = “inform.html”> логика< /A>.

На экране, в броузере, увидим слово логика подчеркнутым и синего цвета.

Щелкнув на слове «логика», попадем в файл inform, содержащий информацию о логике.

Если надо осуществить переход на другую интернет - страницу, то требуется обязательно указать точный адрес страницы. Например:

< A HREF = “https://www.narod.ru”> WEB-страница < /A>.

На экране появится начальная страница сайта.

WEB-страница – это совокупность связанных между собой страниц.

В качестве гиперссылок могут быть использованы изображения (фотографии, картинки, рисунки). Например:

< A HREF= “str2.html”> < img src = “foto.jpg” alt = “портрет”> < /A>

Эта запись устанавливает гиперссылку на изображении foto.jpg (при нажатии в области рисунка кнопкой мыши осуществляется переход на документ str2.html, находящийся в той же директории, что и текущая страница).

Для иллюстрации возможностей использования гиперссылок, соберем в виде оглавления файлы, уже созданные ранее и сохраненные под именами: музыканты.html, поэзия.html, списки.html. Добавим к ним еще один файл, который был рассмотрен как пример3, переименовав его в файл графика.html. Оглавление разместим в левой части листа и сохраним его потом с названием Link.html

< html>

< head>

< title> Link< /title>

< /head>

< body>

< H4> Содержание< /H4>

<! " гиперсвязи с другими файлами" >

< A HREF = " графика.html" > Компьютерная графика< /A>

< P>

< A HREF = " музыканты.html" > Зарубежные композиторы< /A>

< P>

< A HREF = " поэзия.html" > Баратынский< /A>

< P>

< A HREF = " списки.html" > Занимательные игры< /A>

< /body>

< /html>

При просмотре в броузере увидите содержание, состоящее из подчеркнутых названий. При подведении курсора мыши к этим названиям, курсор – стрелочка превращается в курсор «рука с пальчиком». Это гиперссылка. Щелчком мыши откройте документ. На экране текст созданного файла. Выйти обратно в оглавление можно, щелкнув по кнопке «назад» в меню броузера. Откройте поочередно все подчеркнутые документы.

Фреймы

Фреймы – это области, которые могут быть созданы в окне броузера для одновременной демонстрации нескольких документов.

Технология создания рамок предусматривает возможность вертикального и горизонтального деления экрана. Каждая область экрана может иметь вертикальные и горизонтальные полосы прокрутки.

Горизонтальное деление экрана задается при помощи атрибута rows, а вертикальное – при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах или процентах. Кроме этого, используется символ «*» для обозначения оставшейся части экрана.

Отдельная рамка определяется одиночным ярлыком < FRAME>, который имеет инструкцию SRC (source - источник) для описания файла, который размещается в данной рамке. < FRAME SRC = “имя_файла.html”>. Совокупность рамок задается с помощью двойного тега < FRAMESET> …< / FRAMESET>. В пределах этого тега можно определить отдельные рамки и их взаимное расположение и размеры. При использовании тега < FRAMESET>, тег < BODY > не используется.

Атрибут scrolling управляет прокруткой внутри одной области. Он может принимать значения YES (полосы прокрутки создаются в обязательном порядке), NO (прокрутка запрещена) и AUTO (полосы прокрутки появляются когда необходимо). Если этот атрибут отсутствует, броузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях.

Создадим страницу с тремя горизонтальными рамками, которые будут содержать файлы, созданные ранее и сохраним ее с именем «рамки.html»

< html>

<! Пример страницы с 3-мя горизонтальными рамками внутри>

< head>

< title> рамки< /title>

< /head>

<! Тег BODY здесь не нужен>

<! первая и третья рамки одинаковы, средняя - самая широкая>

< FRAMESET ROWS =" 30%, 40%, 30%" >

< FRAME src=" музыканты.html" >

< FRAME src=" поэзия.html" >

< FRAME src=" графика.html" >

< /FRAMESET >

< /html>

Просмотр в броузере дает следующую картину:

Теперь изменим расположение рамок, и рассмотрим вторую возможность задания их размера.

< html>

<! Пример страницы с 3-мя вертикальными рамками внутри>

< head>

< title> рамки 1< /title>

< /head>

<! первая и третья рамки одинаковы, средняя - в 2 раза толще>

< FRAMESET COLS =" *, 2*, *" >

< FRAME src=" музыканты.html" >

< FRAME src=" графика.html" >

< FRAME src=" поэзия.html" >

< /FRAMESET >

< /html>

При просмотре в броузере увидим:

Рассмотрим еще один случай, когда WEB-страница может содержать и горизонтальные, и вертикальные рамки.

< html>

<! Пример страницы с вертикальными и горизонтальными рамками внутри>

< head>

< title> рамки 2< /title>

< /head>

<! первый тег FRAMESET разделит экран на 2 части по вертикали>

< FRAMESET COLS =" 50%, 50%" >

< FRAME src=" списки.html" >

<! второй тег FRAMESET разделит правую часть экрана на 2 части по горизонтали>

< FRAMESET ROWS =" 60%, 40%" >

< FRAME src=" музыканты.html" >

< FRAME src=" поэзия.html" >

< /FRAMESET >

< /html>

При просмотре в броузере увидим:

WEB-страница может состоять из нескольких страниц, т.е. из набора HTML-файлов, один из которых представляет собой оглавление остальных страниц. Каждый раз после просмотра нужной страницы пользователю приходится возвращаться на страницу – оглавление, чтобы выбрать для просмотра следующую страницу. Это неудобно и долго.

Рамки позволяют поместить страницу оглавление в левой части, а страницу, на которую производится ссылка – в правой части.

Для этого применяются два дополнительных параметра: NAME (имя) и TARGET (цель).

В следующем примере воспользуемся уже созданным файлом, содержащим гиперссылки на несколько файлов. Это файл с именем Link.html. Внесем в него некоторые изменения, добавив указатель (TARGET) на имя правой рамки (main).

< html>

< head>

< title> Link< /title>

< /head>

< body>

< H4> Содержание< /H4>

<! " гиперсвязи с другими файлами" >

< A HREF = " графика.html" target=" main" > Компьютерная графика< /A>

< P>

< A HREF = " музыканты.html" target=" main" > Зарубежные композиторы< /A>

< P>

< A HREF = " поэзия.html" target=" main" > Баратынский< /A>

< P>

< A HREF = " списки.html" target=" main" > Занимательные игры< /A>

< /body>

< /html>

Теперь создадим файл-рамку, который сохраним с именем frame.html

<! Файл-рамка (frame.html)>

< html>

< head>

< title> frame< /title>

< /head>

< frameset cols= " 20%, *" >

<! " в левой части будет файл - оглавление" >

< FRAME SRC =" Link.html" >

<! " В правой части поместим любую из четырех страниц и

введем имя правой части " main" через параметр NAME" >

< FRAME SRC = " списки.html" NAME= " main" >

< /frameset>

< /html>

Благодаря вводу параметра NAME, появляется возможность указать месторасположение вызываемой страницы. Откройте сохраненный файл frame.html и посмотрите, что получилось.

Кликните мышкой поочередно на каждой из гиперссылок. Каждый из вызванных файлов по очереди будет размещаться в правой стороне экрана, сосуществуя с оглавлением.

Контрольные вопросы:

1. Гипертекст. Определение. Примеры.
2. Что означает HTML? Для чего он нужен?
3. Правила HTML. Теги. Элементы. Атрибуты.
4. Комментарии. Приведите пример.
5. Структура документа HTML.
6. В каком редакторе можно набирать текст для создания документа HTML?
7. Сохранение и просмотр готового документа.
8. Что такое Internet Explorer?.
9. Шрифты. Размеры шрифта и начертание: жирный, курсив, жирный курсив, подчеркивание.
10. Теги создания горизонтальной линии и ее ширины.
11. Что означают и для чего используются теги < P> и < BR>?
12. Фоновая графика (цвет текста, цвет фона).
13. Нумерованный список.
14. Маркированный список.
15. Теги для создания таблицы. Отличие тегов < TH> и < TD>.
16. Гиперссылки.
17. Вставка рисунка. Бегущая строка.
18. Размещение стихотворения.
19. Фреймы. Определение. Теги для создания фреймов.
20. Создание анкетной формы.
21. Структура ярлыка < INPUT>.
22. Для чего нужен ярлык < SELECT> и какой еще ярлык используется в паре с ним?
23. Как используется ярлык < TEXTAREA>?

ЛИТЕРАТУРА

1. Закарян И., Рафалович В. Что такое Internet, WWW и HTML. —М.: ИНФРА-М, 1998. -212с.
2. Гончаров А. Самоучитель HTML. —СПб: Питер, 2000.— 240с.
3. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML-4.0. – СПб.: БХВ-Петербург, 2000.-672с.
4. Алленова Н. HTML – первые шаги. Эл.учебник.
5. Кузнецова Т.К. Лекции «Основы языка HTML». Ростов н/Д. РГПУ. 2001г.