русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Html ссылка | Ссылки в HTML

ОГЛАВЛЕНИЕ

1 Представление ссылок на Web-странице
1.1 Задание параметров ссылок
1.2 Использование CSS в ссылках
1.3 Изображение курсора на Web-странице
1.4 Сегментированная графика
1.5 Использование локальних ссылок
Пример 1

Оглавление

1 Представление ссылок на Web-странице

Ссылки в html - это выделенные объекты на Web-странице (слова, изображения и др.), которые при наведении курсора мыши меняют свои параметры с появлением на экране изображения "ладошки". После щелчка мыши по ссылке происходит поиск и загрузка требуемой Web-страницы.


1.1 Задание параметров ссылок

Для задания ссылки и ее параметров используется тэг-контейнер <A>ссылка </A> (Anchor - якорь), который содержит такие параметры:

  • HREF - указывает URL-адрес Web-страницы, которая будет загружена после щелчка мыши по ссылке;
  • NAME - указывает имя в документе, куда будет перемещен указатель при внутреннем использовании ссылок (см. пункт 1.4);
  • TARGET - указывает имя окна (фрейма), куда будет загружена вызываемая Web-страница;
  • TITLE - задает поясняющую надпись под ссылкой, которая появляется некоторое время спустя после наведения мыши на ссылку.

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

<A HREF="prim1-1.htm">Урок № 1</A>

Для изменения параметров цвета ссылки ипользуются следующие параметры тэга <BODY>:

  • LINK - задает цвет непросмотренной ссылки (по умолчанию синий);
  • VLINK - задает цвет посещенной ссылки (по умолчанию красноватый);
  • ALINK - задает цвет сылки после щелчка мыши по ней, но до загорузки Web-страницы (используется редко).

Ссылка может быть задана также с помощью рисунка. Для этого необходимо тэг <IMG >, задающий рисунок, поместить внутри контейнера <A> </A>:

<A HREF="lab2.htm"><IMG SRC="fish.gif"></A>

В примере №1 приведено использование стандартных ссылок, а также ссылок в виде изображения.

Оглавление

1.2 Использование CSS в ссылках

В каскадных листах стилей для ссылок имеются псевдоклассы с таким форматом:

  •  A:link{ } - для задания параметров (цвета, формы и др.) тех ссылок, которые еще не были использованы для загрузки Web-страниц;
  •  A:visited{ } - для задания параметров тех ссылок, которые уже были использованы для загрузки Web-страниц;
  •  A:active{ } - для задания параметров тех ссылок, которые были использованы, но загрузка Web-страницы еще не произошла;
  •  A:hover{ } - для задания параметров тех ссылок, на которые наведен курсор мыши.

Псевдоклассы и их свойства описываются там же, где и классы (см. внешнее и внутреннее задание CSS в лабораторной работе №2).
Если на Web-странице нужно использовать несколько изображений для ссылок, необходимо вместе с псевдоклассами задавать обычные классы. Например, можно создать класс изображений ссылок в виде кнопок. Ниже приводятся каскадные листы стилей, которые описывают класс ссылок "kn", задающий для трех состояний ссылок (link, visited и hover) такие параметры, как цвет, тип и размер текста, тип состояния кнопки (отжата - outset, нажата - inset) и цвет фона:

A.kn:link{color:#004040; font:italic 0.6cm; border:outset #FF00AA 5; background:#E0E0E0; text-decoration:none}
A.kn:visited{color:#0000A0; font:italic 0.6cm; border:outset #FF00AA 5; background:#00E0E0; text-decoration:none}
A.kn:hover{color:white; font:italic 0.6cm; border:inset #FF00AA 5; background:#FF60a0; text-decoration:none}

Эти описания параметров ссылок добавлены во внешний файл CSS "my.css" (теперь он называется "my_d.css") и используются в примере №1 для задания параметров ссылок с помощью каскадных листов стилей.
Ссылка класса "kn" задается так:

<A CLASS="kn" . . . >

Оглавление

1.3 Изображение курсора на Web-странице

При наведении курсора мыши на ссылку обычно появляется изображение "ладошки". В CSS имеется возможность изменить вид курсора (и не только для ссылок, но и для других элементов Web-страницы, например, изображений). Для этого необходимо использовать свойство cursor , которое имеет следующие значения:

  •  default - изображение, задаваемое по умолчанию (обычно это "ладошка");
  •  hand - "ладошка";
  •  text - текстовый курсор;
  •  help - в виде знака вопроса ("?");
  •  wait - в виде песочных часов (означает "подождите");
  •  e-resize или w-resize - двойная горизонтальная стрелка (восток - запад);
  •  ne-resize или sw-resize - двойная стрелка направления северо-восток - юго-запад;
  •  nw-resize или se-resize - двойная стрелка направления северо-запад - юго-восток;
  •  s-resize или n-resize - вертикальная двойная стрелка (север - юг);

В примере №1 показано использование изображение курсора в виде знака вопроса.

Оглавление

1.4 Сегментированная графика

К сегментированной графике относятся изображения, условно разбитые на отдельные части в виде определенных геометрических фигур, каждая из которых представляет собой область чуствительности к щелчку мыши и является ссылкой.
Для перечисления областей чувствительности используется тэг-контейнер <MAP>, параметр которого NAME задает имя карты с описанием этих областей.
Каждая область чуствительности описывается с помощью одиночного тэга <AREA>, который содержит такие параметры:

  •   SHAPE - задает геометрическую фигуру, описывающую форму области чуствительности:
    • rect - прямоугольник;
    • circ - окружность;
    • poly - многоугольник.
  •   COORDS - задает коодинаты этих фигур:
    • для прямоугольника - в виде координат его левого правого угла и левого нижнего (x1,y1,x2,y2);
    • для окружности - в виде пары координат центра и величины радиуса (x,y,r);
    • для многоугольника - в виде пар координат для каждой вершины (x1,y1,x2,y2, . . ).
  •   HREF - задает URL-адрес требуемой Web-страницы;
  •   NOHREF - указывает на то, что данная область нечуствительна к наведению мышки (должна быть объявлена первой);
  •   ALT - задает поясняющую надпись под ссылкой, которая появляется некоторое время спустя после наведения указателя мышки на ссылку (аналогично параметру TITLE тэга A).

Например, для задание фигур и координат трех областей чуствительности (они выделены цветом) изображения используются следующие значения параметров SHAPE и COORDS:

  • для прямоугольника - SHAPE=rect COORDS=10,6,50,30
  • для треугольника - SHAPE=poly COORDS=10,40,10,80,50,40
  • для окружности - SHAPE=CIRC COORDS=88,49,20

В примере №1 показано использование сегментированной графики на Web-странице.

Оглавление

1.5 Использование локальных ссылок

Локальные ссылки используются для облегчения доступа к отдельным частям документа, представленного на Web-странице. Для этого в HTML-документе с помощью тэга <A> в требуемых местах документа устанавливаются метки доступа. При этом в тэге <A> вместо параметра HREF используется параметр NAME, задающий имя метки доступа. К этому месту на Web-странице можно обратиться с помощью обычной ссылки, в которой в качестве значения параметра HREF указывается имя метки с предшедствующим знаком #.
Локальные ссылки можно также использовать для доступа к внутренним частям другого документа. В этом случае к URL-адресу документа добаляется знак # и имя внутренней ссылки в этом документе.Например, с помощью ссылки

<A HREF="html-ssilka2.htm#2">

обеспечивается доступ не к началу описания на странице № 2, а к ее разделу 2.
В примере (№1) показано применение локальных ссылок для внутреннего и внешних документов.

Оглавление

Пример 1

<HTML>
<HEAD>
<TITLE> Ссылки в HTML </TITLE>
<LINK REL=stylesheet HREF="my_d.css">
<STYLE>P, TABLE{color:#0000c0; font: 6mm} </STYLE>
</HEAD>
<BODY>
<A NAME="beg"></A><BR>
<TABLE WITH=80% HEIGHT= 130% ALIGN=center>
<TR><TD> Ссылка со стандартными параметрами:
<TD>
<A HREF="prim1-1.htm"> Ssilka № 1 </A>
<TR><TD> Локальная ссылка:
<TD><A HREF="#text"> Текст HTML-документа </A>
<TR><TD> Ссылка в виде рисунка:
<TD><A HREF="prim5-1.htm"
TITLE="Использование графики в ссылках">
<IMG SRC="fish.gif"></A>
<TR><TD> Ссылка в виде кнопки на раздел 2 документа:
<TD><A CLASS="kn" HREF="html2.htm#2"> Ssilka№ 2 </A>
<TR><TD>Ссылка-справка:
<TD>
<A CLASS="kn" STYLE="border-style:none; cursor: help" HREF="prim3-1.htm"> Списки </A>
<TR><TD> Ссылка в виде сегментированной графики:
<TD><IMG SRC="seg.bmp" ALIGN=middle
BORDER=0 USEMAP="#my_map">
<TR><TD> Ссылка в виде кнопки-изображения:
<TD><A HREF="prim4-1.htm" CLASS="kn" style= "border-width:10" >
<IMG DYNSRC="Orbit.avi" START=fileopen LOOP=1 HEIGHT=40 ></A>
</TABLE>
<MAP NAME="my_map">
<AREA SHAPE=circ COORDS=88,49,5 NOHREF>
<AREA SHAPE=rect COORDS=10,6,50,30 HREF= "prim1-2.htm"
ALT="Задание параметров шрифтов">
<AREA SHAPE=poly COORDS=10,40,10,80,50,40 HREF="prim1-3.htm"
ALT="Физическое и логическое форматирование текста">
<AREA SHAPE=CIRC COORDS=88,49,20 HREF= "prim2-1.htm"
ALT="Использование CSS для форматирования текста">
</MAP>
<A NAME="text"></A><BR>
<A CLASS="kn" HREF="#beg">Начало</A>
<P> Текст HTML-документа
</BODY>
</HTML>

Оглавление

Просмотров: 18709

Вы можете --> заказать сайт - полноценный или в качестве обучения для студентов.

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.