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 сторінки з описом, використовується наступний тег:

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

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

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

прикладі №1 наведено використання стандартних посилань, а також посилань у вигляді зображення.

Заголовок

1.2 Використання CSS в посиланнях

У каскадних аркушах стилів для посилань є псевдокласи з таким форматом:

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

Псевдокласи і їх властивості описуються там же, де і класи (див. зовнішнє і внутрішнє завдання в CSS лабораторної роботи №2).
Якщо на Web-сторінці потрібно використовувати кілька зображень для посилань, необхідно разом з псевдоклассами задавати звичайні класи. Наприклад, можна створити клас зображень посилань у вигляді кнопок. Нижче наводяться каскадні листи стилів, які описують клас посилань "kn", задає для трьох станів посилань (visited link, і 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=""></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>

Заголовок