+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Ссылки. Создание ссылок, цвет ссылок, ссылка на адрес электронной почты

Ссылка начинается с тега <A> и содержит в себе какой-либо адрес
<a href="http://www.net-f.ru/">перейти на сайт НэтФорс</a>
Данная ссылка является абсолютной.

Относительные ссылки построены относительно текущего документа или адреса.
pictures/1.gif

../pictures/ex.gif
Двоеточие перед именем указывает браузеру перейти на уровень выше в списке каталогов сайта

Задание цвета всех ссылок
Чтобы задать всем ссылкам цвета, отличные от цвета по умолчанию, в тег <BODY> мы добавляем следующие параметры:
LINK – определяет цвет ссылок (цвет по умолчанию синий, #0000FF).
ALINK – цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.
VLINK – цвет посещенных ссылок. Цвет по умолчанию фиолетовый, #800080
<body link="#53ba0e" alink="Orange" vlink="#53ba0e">
Изменение ссылки с помощью стилей
Убрать подчеркивание невозможно средствами HTML, воспользуемся стилями.

В стилях существует такое понятие как ПСЕВДОКЛАССЫ, они позволяют управлять отображением элементов, находящихся в каком-нибудь состоянии. Псевдоклассы присоединяются к имени тега двоеточием, и их имена заранее определены.

Итак, изменяем нашу ссылку, допустим мы придали ей класс item
<a href="page.html" class="item">на страницу</a>
/* в стилевом документе пишем: */
a.item:link{color: #53ba0e;
text-decoration: none;}

a.item:visited{color: #53ba0e;
text-decoration: none;}

a.item:hover{color: #747474;
text-decoration: underline;}
Итак, в нашем примере, ссылки и посещенные ссылки будут

- неподчеркнутые text-decoration: none; и цвета #53ba0e;
- когда мышь попадет на ссылку a.item:hover цвет ее станет #747474 и под ней будет черта text-decoration: underline;

Если в ссылку добавить параметр target="_blank", то ссылка будет открыта в новом окне.
<a href="http://www.net-f.ru/" target="_blank">в новом окне</a>

По мимо текста как ссылку можно использовать и картинку, например:
<a href="news.php">
<img src="pic/news.gif" width="120" height="20">
</a>
Ссылки внутри страницы
Допустим мы имеем большой документ и чтобы пользователь не листал его до нужной ему информации руками, мы создаем оглавление, которое перекинет его на нужный ему материал. Для этого вы в документе делаете как бы закладку с помощью тега A и параметра name
<!-- это оглавление -->
<a href="#top">Введение</a>
<a href="#1">Пункт 1</a>
<a href="#2">Пункт 2</a>

И далее ваш текст, в нужных местах вставляете
<a name='top'></a>
Тут текст введения

<a name='1'></a>
Тут текст пункта 1

<a name='2'></a>
Тут текст пункта 2
Ссылка на адрес электронной почты
<a href="mailto:info@net-f.ru">написать нам письмо</a>


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 4506