Многообразие гиперссылок на веб-страницах

Диков Андрей Валентинович

Диков Андрей Валентинович

МНОГООБРАЗИЕ ГИПЕРССЫЛОК НА ВЕБ-СТРАНИЦАХ

Просматривая веб-страницы во Всемирной паутине, обязательно встретишь фрагменты текста или графические изображения, при наведении на которые курсора мыши, он превращается в кисть руки с вытянутым указательным пальцем В этот момент в статусной строке браузера появляется адрес (URL) страницы или иного ресурса, который будет загружен в том случае, если щелкнуть левой кнопкой мыши.

Текст, который организован нелинейно за счет содержания в нем ссылок на фрагменты того же текста или на другие тексты или ресурсы Интернета (видео- или аудиофайлы, графические изображения, какой-либо слайд презентации и т. д.), называется гипертекстом (термин ввел Тед Нельсон). Документы, на которые установлены ссылки, могут находиться как на разных серверах сети Интернет, так и на том же компьютере, где находится просматри-

Рисунок 1. Связи в гипертексте (Связи между американскими политическими блогами [1]).

ваемая страница. Сами указатели называют гиперссылками.

Гиперсвязи между различными веб-документами одинаковой тематики могут выглядеть как показано на рисунке 1. Точками обозначены документы, содержащие гиперссылки, линиями обозначены гиперсвязи между ними.

Огромное число веб-страниц в Интернете хранится в формате HTML. Создать гипертекстовую ссылку на HTML можно тегом <A> (от слова Anchor - якорь), который употребляется с параметром HREF, от слова HyperREFerence - гиперссылка. Значением параметра HREF может быть URL -Uniform Resource Locator (универсальный указатель ресурса). URL представляет собой следующую схему: Протокол://сервер/путь к файлу.

Имя главной страницы веб-сайта не указывается, так как браузеры его знают как index.html

Примеры протоколов, по которым передается информация в различных службах Интернета:

• Http для веб-страниц,

• Ftp для файлов,

• News для групп новостей,

• Mailto для электронной почты. Примеры URL.

http://www.sura.ru/dikov/tests.htm

http://www.informika.ru/

ftp://ftp.mccme.ru/pub/users/shen/progbook

mailto:andr271 @yandex.ru

news:comp.lang.logo

mailto: [email protected]?subject=homepage

Таблица 1.

Параметр Значение параметра Комментарий

LINK номер или название цвета просматриваемая ссылка

ALINK номер или название цвета активная ссышка

VLINK номер или название цвета посещенная ссышка

В последнем примере показано, как можно в ссылке заранее задавать тему будущего сообщения. Следующий пример показывает как можно сослаться на 8-ой кадр презентации PowerPoint.

http://www.newseducation.ru/.cmsc/ upload/docs/20061031171222KS.ppt#8

Тег <A> является контейнером. Между открывающимся и закрывающимся тегами размещается текст, который становится при просмотре в браузере гипертекстом.

<A HREF="http://www.sura.ru"> Провайдер Связьинформ </A>

Гипертекстовые ссылки в браузере по умолчанию выделяется синим цветом и подчеркиванием. При щелчке мышью ссылка становится активной (Active Link) и меняет свой цвет. Если вернуться на эту же страницу после посещения ссылки (Visited Link), то ее цвет поменяется на третий вариант. Таким образом различают три состояния ссылки и каждому из них соответствует свой цвет, который может быть установлен разработчиком страницы в теге <BODY> следующими атрибутами ^м. таблицу 1).

Группу ссылок можно оформить в виде списка. Например, в виде списка поисковых систем Интернета (см. листинг 1).

В виде гиперссылки можно оформить и любое графическое изображение.

Задание 1.

Загрузите из Интернета (http:// www.sura.ru/dikov/Mybooks/STUFF.HTM) архив «Библиотека Consilium Medicum.rar». Распакуйте его. Вы получили часть веб-сайта. В документе «ПРИНЦИПЫ РАЦИОНАЛЬНОГО ЛЕЧЕНИЯ СЕРДЕЧНОЙ НЕДОСТАТОЧНОСТИ^» удалены некоторые URL гиперссылок на внутренние страницы сайта. Восстановите их.

ВНУТРЕННИЕ ССЫЛКИ И УКАЗАТЕЛИ

В том случае, если ссылка осуществля-

Листинг 1. <UL>

<LH> Наиболее популярные каталоги Интернета </LH>

<Li><A HREF="http://catalog.mbt.ru/free/"> Свободный каталог </A>

<LiXA HREF="http://yp.piter.com//"> Желтые страницы INTERNET </A>

<LiXA HREF="http://www.diamondteam.ru/catalog/"> Diamond Team - каталог русскоязычных ресурсов Internet </A>

<LiXA HREF="http: //www.ipclub.ru/linkmaker/"> LINKMAKER! - Каталог INTERNET ресурсов</A> <LiXA HREF="http://url.linet.ru/"> Каталог ресурсов URL </A> <Li><A HREF="http://www.ulitka.ru/"> Улитка </A>

<LiXA HREF="http://www.relcom.ru/win/Internet/Treasures/"> Сокровища Интернета. Россия и ближнее зарубежье </A>

<Li><A HREF="http://www.intel.ru/inetmap/"> Карта русскоязычных ресурсов Интернета</A> </UL>

просто путь к файлу, без указания протокола связи.

<A HREF = "fotogalary.html"> Галерея фотографий </A>

<A HREF = "../../index.html"> На главную </A>

В случае, когда HTML-документ очень вытянут в длину, удобно составить небольшое оглавление в начале страницы в виде списка ссылок, которые будут перемещать выбранные щелчком разделы документа сразу на экран, чтобы их можно было не искать на странице. В конце каждого такого раздела размещается гиперссылка, направляющая обратно на начало страницы, где находится оглавление.

Чтобы создать такой указатель, необходимо в тексте HTML-документа расставить именные якоря в начале каждого раздела, на который затем будет осуществляться ссылка. Для этого предназначен тот же тег <A>, но с атрибутом NAME, значение которому дается разработчиком веб-документа. Это значение является уникальным именем текущего раздела (листинг 2).

Из примера видно, что оформлено гипертекстовое оглавление разделов страницы в виде одной строки таблицы с вертикальными границами. Здесь надо обратить внимание в коде HTML на то, что URL внут-

Рисунок 2.

ренней ссылки начинается не с протокола связи, а со знака #, после которого идет имя раздела, данное тегом <А КАМЕ=. ..>. Существует реальная возможность де-

лать ссылку и на именованную таким же образом часть веб-страницы, расположенную на удаленном компьютере в сети Интернет. Такая ссылка будет выглядеть примерно так:

<A HREF="http://shafran.com/ index.htm #Professional Information"> Профессия Энди Шафрана - автора книги "Создание Web-страниц" </A>

Задание 2.

Загрузите из Интернета (http:// www.sura.ru/diko v/M ybooks/STUFF. HTM) документ «Постановление». Разместите его на веб-странице. Создайте в начале html-документа гипертекстовое оглавление на основные разделы документа.

ИЗОБРАЖЕНИЯ-КАРТЫ

Изображения-карты - это такие графические изображения, отдельные части которых являются гиперссылками. Удобны они из-за того, что наглядно показывают содержание имеющейся ссылки и объединяют группу ссылок в единое целое.

Практически любое изображение можно превратить в изображение-карту. Каждому фрагменту изображения соответствуют собственные координаты, выражаемые в пикселях. Левый верхний угол карты имеет координату (0,0) (рисунок 2).

В ИТМЬ-документе необходимо открыть именной раздел-контейнер для описания изображения-карты.

<МАР МАМЕ="Карта 1"> </МАР>

В этом разделе для каждой области карты, которая будет служить ссылкой, размещается тег <АЯЕА> с параметрами. Существует возможно описать области, имеющие форму прямоугольников, многоугольников и кругов.

Листинг 2.

<H1> КОНЦЕПЦИЯ МАТЕМАТИЧЕСКОГО ОБРАЗОВАНИЯ </H1>

<TR>

<TH> <A HREF="#раздел1">Подготовка и повышение квалификации педагогических кадров </A> </TH>

<TH> <A HREF="#раздел2">Значение математического образования </A> </TH>

<TH> <A HREF="#раздел3">Общие принципы</A> </TH>

</TR>

</TABLE>

<A NAME="раздел1"> <H2>Подготовка и повышение квалификации педагогических кадров</H2> </A> <P ALIGN=JUSTIFY>Сложившаяcя система воспроизводства педагогических кадров сохраняет традиционную приверженность к «знаниевой» парадигме педагогического образования. Между тем природа современной профессиональной деятельности требует учителя, ценностными установками которого являются приоритет личностного развития школьников, его способность свободно ориентироваться в сложных социокультурных обстоятельствах, готовность обслуживать не только инновационные процессы, но и процессы творчества в широком смысле.</Р> <A HREF="#cодержание">Вернутьcя в начало</A> <A NAME="раздел2">

<^>Значение математического образования</^> </A>

<Р ALIGN=JUSTIFY>B течение многих столетий математика является неотъемлемым элементом системы общего образования всех стран мира. Объясняется это уникальностью роли учебного предмета «Математика» в формировании личности. Образовательный, развивающий потенциал математики огромен. </Р>

<Р ALIGN=JUSTIFY>Универcальный элемент мышления - логика. Полноценное развитие мышления современного человека, осуществляемое в ходе самопознания и общения с другими людьми, в ходе рассуждений и знакомства с образцами мышления, невозможно без формирования известной логической культуры. </Р> <A HREF="#cодержание">Bернутьcя в начало</A> <A NAME="раздел3"><H2>Общие принципы</H2> </A>

<Р ALIGN=JUSTIFY>Главный принцип концепции математического образования в 12-летней школе, направленный на осуществление этих идей, состоит в реальном осуществлении в методической системе обучения математике <!>двух генеральных функций</!> школьного математического образования, определяемых глобальным совпадением и локальными различиями общественных и личных интересов в математических знаниях и математической культуре:</Р> <OL TYPE = a>

<Li> <I>образование с помощью математики,<Д> <Li> <I>cобcтвенно математическое образование.<Д> </OL>

<A HREF="#cодержание">Bернутьcя в начало</A>

</BODY>

</HTML>

ПРЯМОУГОЛЬНИК (RECTangle)

0, 0

188, 57

КРУГ (CIRCLE)

МНОГОУГОЛЬНИК (POLYgon)

124, 49

80, 99

255, 22

240, 159

Если фрагменты имеют область перекрытия, то срабатывает ссылка того фрагмента рисунка, который стоит первым в описании областей.

ССЫЛКА ПО УМОЛЧАНИЮ

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

Она описывается последней в контейнере <MAP> и должна перекрывать формой все изображение-карту.

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

После того как все области описаны и задана при желании ссылка по умолчанию, в нужное место HTML-документа вставляется непосредственно само изображение-карта тегом <IMG> с параметром USEMAP, значением которого является название изображения, данное параметром NAME тега <MAP>.

Для облегчения создания изображения-карты существуют специальные визуальные инструменты в редакторах создания веб-сайтов. Сначала Вы загружаете изображение в формате GIF или JPEG, а затем визуальным образом, с помощью соответствующих инструментов, разбиваете изображение на области и вносите в диалоговое окно адреса ссылок. Редактор автоматически генерирует соответствующий HTML код.

Задание 3.

Подберите из имеющихся рисунков изображение-карту или создайте собственное. Разместите его на веб-странице и используйте по назначению.

ПСЕВДОКЛАССЫ ССЫЛОК

Нередко у веб-дизайнеров возникают желания более «тонкого» стилевого оформления создаваемых страниц, чем позволяют стандартные теги. Для реализации желаний предназначены каскадные таблицы стилей (CSS). Они позволяют изменять ряд свойств (обозначенных и не только в HTML) каждого элемента веб-документа, в том числе гиперссылок. Каскадные таблицы стилей поддерживают следующие псевдоклассы ссылок: :link (непосещенная ссылка), :visited (посещенная ссылка), :hover (неопределенная ссылка, мышиный курсор нависает над ссылкой), :active (активная, то есть выбранная ссылка).

Пример использования:

A:link { color: red }

A:visited { color: blue }

A:hover { color: yellow }

A:active { color: lime }

A:focus:hover { background: gold }

</style>

</head>

<body>

<a href="page1.htmn>cTpaHM4a 1</a> <br>

<a href="page2.htmn>cTpaHM4a 2</a>

</body>

</html>

Важно заметить порядок следования в описании данных стилей. Он должен быть как в приведенном примере. Данный способ описания стилей изменяет оформление всех гиперссылок на веб-странице. Чтобы применить стиль к отдельным элементам html-документа, необходимо использовать классы. В приведенном ниже примере описаны два класса "p1" и "p2" в разделе style. Применение класса к элементу осуществляется через атрибут class тега элемента (в нашем случае это тег <a>) (листинг 3).

Кроме псевдоклассов к гиперссылкам можно применять и многие другие свойства стилей. Таблицу стилей можно скачать из Интернета по адресу http:// www.sura.ru/dikov/Mybooks/ html.htm или http://www.w3.org/ TR/REC-CSSP ИР2

Задание 4.

Используя стили, создайте разнообразные гиперссылки на одной веб-странице.

Однако не все задачи веб-дизайна можно решить средствами HTML и CSS. Очень популярной технологий для улучшения вебстраниц является JavaScript. Так, например, чтобы сделать из ячейки таблицы вместе с ее содержи-

мым гиперссылку, необходимо прибегнуть и к HTML, и к CSS, и написать небольшой сценарий на JavaScript (листинг 4).

События onClick, onMouseOver, onMouseOut возникают при щелчке мышки, нависании курсора над элементом веб-страницы и при перемещении мышки за область элемента соответственно. Обработчики этих событий являются сценариями JavaScript. Сценарий document. loca tion='variant1 .htm' изменяет адрес html-документа на variant1.htm. Скрипт window. status='variant1. htm' изменяет текущее сообщение статусной строки так, как это обычно происходит при использовании «реальной» гиперссылки, созданной тегом <A>. Чтобы адрес гиперссылки исчезал из статусной строки браузера

Листинг 3.

A:link.p1 { color: silver } A:visited.p1 { color: aquamarine } A:hover.p1 { color: yellow } A:active.p1 { color: lime } A:focus:hover.p1 { background: gold } A:link.p2 { color: red } A:visited.p2 { color: DarkViolet } A:hover.p2 { color: pink } A:active.p2 { color: tomato } A:focus:hover.p2 { background: forestGreen } </style> </head> <body>

<a class="p1" href="page1.htm">cTpaHM4a 1</aXbr>

<a class="p2" href="page2.htm">cTpaHM4a 2</aXbr>

<a href="page30.htm">cTpaHM4a 30</aXbr>

<a class="p2" href="page32.htm">cTpaHM4a 32</a>

</body>

</html>

Диков A.B.

Листинг 4. <html> <head> <style>

td.p {cursor: pointer} </style>

<title>MHoroo6paSHe гиперссылок на Be6-CTpaH^ax</title> </head>

window.defaultStatus=T0T0B0' </script>

</tr> </table>

зуем команду status=defaultStatus. Где defaultStatus - сообщение статусной строки, установленное по умолчанию. В примере мы его задаем скриптом window.defaultStatus='Готово'. (Пример опробован в браузерах Internet Explorer и Opera)

Задание 5.

Используя стили и JavaScript, сделайте несколько ячеек таблицы (фон ячейки плюс содержимое) гиперссытками. Для компактности кода напишите функцию на JavaScript.

Варианты

1 2 3

О

Литература

1. Дембинская Н. Социологи составляют карту киберпространства // Компьюлента. 3 июля 2006. http://net.compulenta.ru//275403/?phrase id=4995121

2. Мак-Федрис П. Использование JavaScript. Специальное издание. М.: Вильямс, 2002.

3. Морис Б. HTML в действии. СПб: Питер, 1997.

Диков Андрей Валентинович, кандидат педагогических наук, доцент кафедры информатики и методики преподавания информатики ПГПУ им. В.Г. Белинского, г. Пенза.

Многообразие гиперссылок на веб-страницах Текст научной статьи по специальности «Компьютерные и информационные науки»

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Диков Андрей Валентинович

Похожие темы научных работ по компьютерным и информационным наукам , автор научной работы — Диков Андрей Валентинович

Текст научной работы на тему «Многообразие гиперссылок на веб-страницах»