Как сделать ссылку

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега A, который имеет единственный параметрhref. В качестве значения используется адрес документа (URL).

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

Пример 1. Использование абсолютных ссылок
<html>
<body>

<a href=www.yandex.ru>Поисковая система Яндекс</a>

</body>
</html>

Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.
Примеры таких адресов:
1. /
2. /demo/
3. /images/pic.gif
4. ../help/me.html
5. manual/info.html

Первые две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html) находящемуся в корне сайта (пример 1) или папке demo (пример 2). Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Слэш перед адресом говорит о том, что адресация начинается от корня сайта (пример 3), двоеточие - перейти на уровень выше в списке каталогов сайта (пример 4).

Пример 2. Использование относительных ссылок <html>
<body>

<a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br>
<a href=tip.html>Как сделать такое же фото?</a>

</body>
</html>

Квартиры на продажу, объявления: кулер для воды.

Цвет ссылок

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве параметров тега BODY. Параметры являются необязательными и если они не указаны используются значения по умолчанию.

LINK - определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).
ALINK - цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.
VLINK - цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются цифрами в шестнадцатеричном коде, в виде #RRBBGG, где R, G и B обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #.

Пример 1. Задание цветов ссылок
<html>
<body link=#FFCC00 vlink=#CECECE alink=#FF0000 bgcolor=black>

<a href=content.html>Содержание сайта</a>

</body>
</html>

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета - соответственно для светлых. Для этого существует два основных метода.

1. Использование тега FONT
Ссылка помещается между тегами <font> и </font>, которые должны находиться внутри контейнера <a href=...> и </a>.

Пример 2. Изменение цвета ссылки с помощью тега FONT
<html>
<body link=#FFCC00 vlink=#CECECE alink=#FF0000 bgcolor=black>

<a href=content.html><font color=#FFFFFF>Содержание сайта</font></a>

</body>
</html>

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

2. Использование стилей
Для изменения цвета ссылки следует использовать параметр style="color: #rrggbb" в теге А, где #rrggbb - цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета.

Пример 3. Изменение цвета ссылки с помощью стилей <html>
<body link=#FFCC00 vlink=#CECECE alink=#FF0000 bgcolor=black>

<a href=content.html style="color: white">Содержание сайта</a><br>
<a href=im.html style="color: #FFFFFF">Интернет-маркетинг</a><br>
<a href=use.html style="color: rgb (255, 255, 255)">Юзабилити</a>

</body>
</html>

Изменить вид ссылки при наведении на нее курсора мыши?

Псевдокласс hover, который добавляется к селектору A, как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A, потом через двоеточие hover.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет ссылок</title>
<style type="text/css">
A {
color: #008000; /* Цвет обычной ссылки */
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
A:visited {
color: #800080; /* Цвет посещенной ссылки */
}
A:hover {
color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */
text-decoration: underline; /* Добавляем подчеркивание */
}
</style>
</head>
<body>
<p><a href="rome.html">Cras ingens iterabimus aequor</a> - завтра снова мы выйдем в огромное море.</p>
</body>
</html>

В данном примере ссылка становится подчеркнутой и меняет свой цвет, когда на нее наводится указатель . Заметьте, что псевдокласс hover в таблице стилей идет после visited. Это имеет значение, иначе посещенные ссылки в данном случае не будут изменять свой цвет.

Увеличение букв ссылки

Ещё можно увеличить буквы при наведение на ссылку

a:hover {text-transform:uppercase;}

Параметр Target

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено параметром target="" тега А. Target может принимать следующие значения:

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

Если на сайте используются фреймы, то в качестве значения target можно использовать имя фрейма.

Пример 1. Открытие документа в новом окне
<html>
<body>

<a href=www.htmlbook.ru target=_blank>Ссылка открывает новое окно на сайт www.htmlbook.ru</a>

</body>
</html>

Пример 2. Открытие документа во фрейме
<html>
<body>

<a href=www.htmlbook.ru target=newframe>Сайт www.htmlbook.ru</a>

</body>
</html>

Ссылка в примере 2 ведет на сайт www.htmlbook.ru, открывающийся во фрейме с именем newframe.

Ссылки без подчеркивания

Средствами тегов HTML убрать подчеркивание у ссылок не представляется возможным. Поэтому для этой цели используются каскадные таблицы стилей (CSS).

Одно из наиболее популярных применений CSS - это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли - раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно.

Подчеркивание прячется параметром text-decoration: none.

Пример. Убирание подчеркивания у ссылки
<html>
<head>
<style type="text/css">
A:link {text-decoration: none} // убирает подчеркивание для ссылок
A:hover {text-decoration: underline; color: red;} // делает ссылку красной и подчеркнутой при наведении на нее курсора
</style>
</head>
<body>
<a href=#>Наведи сюда курсор, увидишь результат</a>
</body>
</html>

Изображения в качестве ссылки

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a href=...> и </a>.

Пример 1. Создание рисунка-ссылки
<a href="sample.html"><img src="sample.gif" width=50 height=50></a>

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

Чтобы убрать рамку, следует задать параметр border=0.

Пример 2. Удаление рамки вокруг изображения
<a href="sample.html"><img src="sample.gif" width=50 height=50 border=0></a>

Меню сайта

Это интересно