Внутренние гиперссылки
Ранее мы рассматривали связывание различных Web-страниц с помощью текстовых и графических якорей. Однако, если страница большая, то удобно организовывать гиперссылки на разделы страницы (это так называемые внутренние гиперссылки). Рассмотрим следующий пример на эту тему.
Листинг 17.
<HTML> <HEAD><TITLE> Добавление внутренних гиперссылок </TITLE> </HEAD><BODY BGCOLOR="#CDCDCD">
<CENTER><A NAME="1C"> </A><P> <FONT COLOR ="red" SIZE="+3" FACE="Arial"> КОНЦЕПЦИЯ СИСТЕМЫ 1С:ПРЕДПРИЯТИЕ<P> 1С:Предприятие является универсальной системой автоматизации деятельности предприятия ( занимающегося как торговлей так и производством). При этом 1С:Предприятие может быть использована для автоматизации самых разных участков работы. Основной особенностью системы 1С:Предприятие является возможность ее конфигурирования для каждого варианта использования (программу можно настроить для “себя”). И функционирование системы делится на 2 процесса – конфигурирование (создание вида или варианта использования программы) и исполнение (собственно работа с программой 1С:Предприятие ). На этапе конфигурирования можно создавать различные виды объектов.. </P><A HREF="#1C"> Перейти к концепции системы 1С:ПРЕДПРИЯТИЕ</A></BODY> </HTML>
Здесь в строке <A NAME="1C"> вводится внутренняя гиперссылка, а далее по тексту обеспечивается возможность перехода по данной гиперссылке с помощью тега - <A HREF="#1C">. Вы можете также создавать гиперссылки на закладки на других страницах html, указывая ссылку в виде HREF="имя_страницы.html#имя_ссылки”.
Создание карт гиперссылок
Ранее мы рассматривали создание гиперссылок при наведении курсора мыши на изображение. Теперь мы рассмотрим создание карт ссылок. В этом случае в качестве якоря гиперссылок используются отдельные части изображения, называемые горячими точками. В примере приведенном на листинге 17 тег <map> создает карту ссылок и присваивает ей имя, по которому на нее можно ссылаться.
Листинг 17.
<html> <body><map name="prim">
<area href="str1.html" shape="rect" coords="1,1,200,100">
<area href="str2.html" shape="rect" coords="1,100,200,200">
</map>
<img src="рис1.jpg" width="200" height="200" usemap="#prim">
</body> </html>
Все элементы карты ссылок располагаются между тегами <map> и </map>. Обязательным атрибутом тега <map> является атрибут name:
<map name="prim">
Далее в строке
…usemap="#prim">
используется имя элемента для ссылок на карту. Горячие точки на изображении вводятся элементами area. Каждый тег <area> должен содержать следующие атрибуты: href – адрес гиперссылки для данной области, shape и coords определяют тип геометрической фигуры горячей области и ее координаты. В строках
<area href="str1.html" shape="rect"
coords="1,1,200,100">
создается горячая область в форме прямоугольника, координаты которого задаются в атрибуте cords. Координаты создаются при помощи координатных пар, состоящих из двух чисел, определяющих положение по оси x и y. Ось x располагается горизонтально и начинается с левого верхнего угла, а ось y направлена вниз из этой же точки. Для определения прямоугольной горячей области достаточно задать координаты левого верхнего и правого нижнего углов прямоугольника. В записи первые два числа – это координаты левого угла, а следующие два числа координаты правого угла. В рассматриваемом примере мы создаем для данной картинки две различные гиперссылки.
Кроме прямоугольника существуют другие фигуры для формирования областей гиперссылок. Например,
<area href="str1.html" shape="poly"
coords="1,1, 50,1,200,100,100,100">.
В этом случае мы задаем прямоугольник произвольной формы, координаты которого определяются в атрибуте cords простым перечислением координат всех вершин многоугольника.
Еще один вариант фигуры можно задать следующим образом:
<area href="str1.html" shape="circle"
coords="50,60, 30">.
В этом случае в качестве области на экране формируется круг, а в качестве координат задаются координаты центра круга и его радиус.
Чтобы связать с картой ссылок графическое изображение, Вы должны включить атрибут usemap следующим образом:
<img src="Новая папка/рис1.JPG" width="200" height="200" usemap="#prim">.
ТЕГИ <META>
Для поиска информации в Web используются поисковые системы. Поисковые системы исследуют сайты по ссылкам на их страницах, запоминают информацию, идентифицирующую каждую страницу. Теги <META> содержат два обязательных атрибута. Первый из них, NAME, используется для уточнения самого тега <META>. В другом атрибуте CONTENT задаются данные, предназначенные для поисковых систем. В следующих строках используется элемент META с атрибутом keywords:
<META NAME=”keywords” CONTENT=”Сайт, тег, гиперссылки, методические разработки”>.
В данном случае используется ключевое слово keywords и далее перечисляются ключевые слова характеризующие тематику условного сайта. Эти ключевые слова используются поисковыми системами при поиске в Web. Если часть из указанных Вами слов будет присутствовать в строке поиска, заданной на клиентском компьютере, то Ваш сайт попадает в список найденных сайтов.
Возможен другой вариант использования тега META:
<META NAME=”discription” CONTENT=” Сайт c методически разработками по Web-дизайну.”>. Здесь вместо списка ключевых слов приводится краткое описание вашего сайта. Это описание используется поисковыми системами для классификации вашего сайта.
ТЕГ <FRAMESET>
Ранее рассмотренные страницы имели возможность ссылаться друг на друга, но не могли воспроизводиться браузером одновременно. Одновременно отобразить несколько страниц можно с помощью тега <frameset>. Для этого в нашей странице содержащей фреймы располагается строка
<frameset cols="200,*">
Эта запись сообщает браузеру, что в документе будут располагаться фреймы, описание которых приводится между тегами <frameset> и </frameset>. При этом параметр cols определяет положение фреймов в окне браузера. Значение, присваиваемое этому атрибуту задает ширину фрейма в пикселах или в процентах относительно ширины окна браузера. В приводимом на листинге 18 примере объявляются два фрейма. Первый из них начинается с левой стороны и имеет ширину 200 пикселей. Второй фрейм занимает все оставшееся пространство (для этого используется символ звездочка).
После распределения экранного пространства необходимо задать файлы, которые будут выводиться во фреймах. Делается это с помощью элементов
<frame name ="nav1" src="str1.html">
В этом элементе в атрибуте SRC указывается адрес выводимой в данный фрейм страницы. Атрибут name используется для идентификации фрейма. Это можно использовать в гиперссылках для указания фрейма в который нужно загружать целевую страницу. Например, гиперссылка
<A href=”primer.html” target=”v1”>
будет вызывать загрузку файла primer.html во фрейм со значением v1 у атрибута name.
На листинге 18 показан пример создания фреймов, а результат этой страницы приведен на рис.13.
Листинг 18.
<html><head></head>
<frameset cols="200,*">
<frame name ="nav1" src="str1.html">
<frame name ="nav2" src="str2.html">
</frameset>
</html>
Рис.13.