
- •Теоретический материал для подготовки к практической работе по теме «Создание ссылок различных типов» (средствами xhtml и css)
- •1. Текстовые ссылки
- •1.1. Простое меню ссылок
- •1.2. Двухуровневое меню ссылок
- •2. Графические и комбинированные ссылки
- •3. Графические карты ссылок
- •3.1. Клиентский вариант графической карты ссылок
- •3.2. Серверный вариант графической карты ссылок
- •4. Внутренние ссылки
- •5.1. Структура url
- •5.2. Абсолютные и относительные пути
- •5.3. Кодирование url
- •5.4. Псевдо-url JavaScript
Теоретический материал для подготовки к практической работе по теме «Создание ссылок различных типов» (средствами xhtml и css)
Задания для студентов:
Внимательно изучите предложенный теоретический материал.
Напишите опорный конспект, внеся в него все основные понятия, назначение тегов, атрибутов и их значений.
Реализуйте на практике все специально выделенные практические примеры.
Замечание: каждый студент получает допуск к выполнению практической работы, показав владение изученным теоретическим материалом и предоставив решение всех заданий.
Ссылки (или гиперссылки) применяются в большинстве существующих Web-страниц и являются их главным инструментом. Ссылки могут быть текстовыми и графическими в зависимости от вида указателя ссылки - отображаемого элемента, щелчок на котором левой кнопкой мыши инициализирует переход к другому документу. Текстовые ссылки представляют собой слово или целую фразу, выделенную цветом и/или подчеркиванием, в зависимости от настройки браузера. В графических ссылках роль чувствительного к щелчку элемента играет изображение. Можно также создать комбинированные ссылки, указателем в которых будет и изображение, и текст. Ссылки на фрагменты текущего документа (внутренние ссылки) организуются особым образом. В любом случае ссылку задает контейнерный тег <а>.
Для создания ссылки на другой документ используется следующий синтаксис:
<а href="адрес_ссылки"> указатель_ссылки </а>
Здесь атрибут href (от англ. hyper reference- гиперссылка) принимает в качестве значения URL-адрес или имя файла (возможно, с указанием пути), к которому следует перейти при инициализации ссылки; указатель_ссылки- текст или/и тег <img>, вставляющий графическое изображение, на которых можно щелкнуть, чтобы активизировать ссылку.
Документ, вызываемый при активизации ссылки, по умолчанию открывается в текущем окне браузера, заменяя документ, содержащий эту ссылку. Это происходит, если браузер способен открыть документ в своем окне (некоторые документы открываются в окне соответствующих приложений). Однако вы можете принудительно назначить, в каком окне браузера или фрейме следует открыть вызываемый документ. Это делается с помощью атрибута target, который принимает следующие значения:
имя_окна - имя (значение атрибута name) окна или фрейма;
_blank - указатель на новое окно;
parent- указатель на родительский фрейм, а если фреймов нет, то данный параметр работает как _self;
_top - отменяет все фреймы и загружает документ в главное окно браузера, а если фреймов нет, то данный параметр работает как _self;
_self - указатель на тот же самый (текущий) фрейм или окно.
Если требуется, чтобы при наведении указателя мыши на указатель ссылки появлялась всплывающая подсказка (поясняющий текст), то в теге <а> следует добавить атрибут title, принимающий в качестве значения текст всплывающей подсказки.
1. Текстовые ссылки
Структура текстовой ссылки имеет следующий вид:
<а href="адрес_ссылки"> текст_ссылки </а>
Например, следующий тег описывает ссылку на HTML-файл мой_документ.htm, при этом ссылка на экране будет выглядеть в виде слова "Портфолио":
<а href="мой_документ.htm" >Портфолио</а>
Браузер не выводит в клиентскую область окна имя файла, к которому требуется перейти по ссылке, а лишь показывает текст, заключенный между открывающей и закрывающей частями тега <а>.
Поскольку настройки цвета в браузере у различных пользователей могут отличаться, возникает задача принудительного задания цвета, чтобы ссылки были хорошо видны и соответствовали дизайну вашего сайта. Это делается с помощью псевдоклассов CSS:
a:link {color:white}- неиспользованные ссылки;
a:visited {color:gray} - использованные ссылки;
a:hover {color: #ooffff} - ссылка, на которой находится указатель мыши;
a:active {color:yellow} - активная ссылка.
примечание. В приведенных примерах ссылка задавалась как имя файла. В этом случае предполагается, что файл находится в той же папке, что и документ, содержащий эту ссылку. Если этого не достаточно, то вы можете указать базовый адрес с помощью тега <base>, задать относительные и абсолютные пути, а также URL-адрес файла.