Теоретический материал для подготовки к практической работе по теме «Создание ссылок различных типов» (средствами xhtml и css)

Задания для студентов:

1. Внимательно изучите предложенный теоретический материал.

2. Напишите опорный конспект, внеся в него все основные понятия, назначение тегов, атрибутов и их значений.

3. Реализуйте на практике все специально выделенные практические примеры.

Замечание: каждый студент получает допуск к выполнению практической работы, показав владение изученным теоретическим материалом и предоставив решение всех заданий.

Ссылки (или гиперссылки) применяются в большинстве существующих Web-страниц и являются их главным инструментом. Ссылки могут быть текстовыми и графическими в зависимости от вида указателя ссылки - отображаемого элемента, щелчок на котором левой кнопкой мыши инициализирует переход к другому доку­менту. Текстовые ссылки представляют собой слово или целую фразу, выделенную цветом и/или подчеркиванием, в зависимости от настройки браузера. В графических ссылках роль чувствительного к щелчку элемента играет изображение. Можно так­же создать комбинированные ссылки, указателем в которых будет и изображение, и текст. Ссылки на фрагменты текущего документа (внутренние ссылки) органи­зуются особым образом. В любом случае ссылку задает контейнерный тег <а>.

Для создания ссылки на другой документ используется следующий синтаксис:

<а href="адрес_ссылки"> указатель_ссылки </а>

Здесь атрибут href (от англ. hyper reference- гиперссылка) принимает в каче­стве значения URL-адрес или имя файла (возможно, с указанием пути), к которому следует перейти при инициализации ссылки; указатель_ссылки- текст или/и тег <img>, вставляющий графическое изображение, на которых можно щелкнуть, чтобы активизировать ссылку.

Документ, вызываемый при активизации ссылки, по умолчанию открывается в текущем окне браузера, заменяя документ, содержащий эту ссылку. Это происхо­дит, если браузер способен открыть документ в своем окне (некоторые документы открываются в окне соответствующих приложений). Однако вы можете принуди­тельно назначить, в каком окне браузера или фрейме следует открыть вызываемый документ. Это делается с помощью атрибута target, который принимает следую­щие значения:

1. имя_окна - имя (значение атрибута name) окна или фрейма;

2. _blank - указатель на новое окно;

3. parent- указатель на родительский фрейм, а если фреймов нет, то данный параметр работает как _self;

4. _top - отменяет все фреймы и загружает документ в главное окно браузера, а если фреймов нет, то данный параметр работает как _self;

5. _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-адрес файла.