Продолжаем урок по работе ссылками на html странице.

Продолжаем урок по работе над ссылками.


Изменяем цвет ссылки

Выводим описание ссылки при наведении на неё

Открыть ссылку в новом окне

Ссылка на электронную почту



Как изменить цвет ссылок на всей странице сайта.

Давайте рассмотрим, как можно изменять цвет ссылок на сайте. Если нам нужно указать цвет на всех ссылках на всём странице то мы воспользуемся элементом <BODY>. С ним ещё используют дополнительные атрибуты, такие как <LINK> цвет ссылок, <ALINK> цвет активных ссылок, <VLINK> цвет ссылок уже посещённых. Ещё мы можем изменять цвет каждой ссылке в отдельности. В этом примере мы указали что цвет ссылок на всей странице будет чёрной, цвет активных будет красной, а ссылки которые мы посетили станут зелёными.


  <body link="black" vlink="red" alink="green">
 

Всё это мы помешаем в <body> которая находится в начале документа. Вот пример с первых уроков по созданию html страницы. Здесь я выделил в красном цвете, где мы вставили наш код.


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
Здесь размешается описание вашей страницы с ключевыми словами, отображается в самом верху браузера.
</title>
<link href="css.css" rel="stylesheet" type="text/css"/>
</HEAD>
<BODY link="black" vlink="red" alink="green">
Между этими тегами будет содержание страницы доступный пользователю вашего сайта.
</BODY>
  </HTML>
 



Теперь давайте посмотрим как изменять цвет в отдельной ссылке. Здесь мы добавили <font color="red"> указывающий цвет и не забудьте про закрывающий тег </font>.


  <a href="http://www.sozdat-svoysayt.ru"><font color="red">Красная ссылка на сайт</font></a>
 

Вот как это выглядит ссылка стала красная.


Красная ссылка на сайт
 


Как при наведении на ссылку вывести описание на неё.

Для вывода информации о ссылке при наведении на него мы используем TITLE. Можно сделать так что при наведении на ссылку указателем мыши появится описание к ссылке как дополнительная информация. Посмотрим на примере как надо добавлять описание.


  <a href="http://www.sozdat-svoysayt.ru" title="Ссылка указывает на сайт wwwsozdat-svoysayt.ru работаем над ссылкам "> www.sozdat-svoysayt.ru </a>
 

Теперь поднесите указатель и вы увидите как появится дополнительное описание к ссылке.


www.sozdat-svoysayt.ru
 



Как сделать чтоб ссылка открывалась в новом окне.

Если мы захотим чтоб ссылка открывалась в другом окне браузера, то используем элемент target ="_blank". При клике на такую ссылку откроется новое окно со страницей указанной в ссылке. Смотрим пример.


  <a href="http://www.sozdat-svoysayt.ru" target="_blank">Открываем страницу в новом окне</a>
 

Если вы нажмёте на ссылку ниже то она откроется в новом окне.


Открываем страницу в новом окне.
 


Как сделать ссылку на электронную почту E-mail.

Вот пример как сделать ссылку на электронную почту. Вот так указывается ссылка на E-mail почту , если у вас на сайте настроена почта и вы хотите чтоб вам отправляли по этому адресу письма с сайта. Но вы можете создать ссылку на любой другой адрес электронной почты после mailto: Посмотрите ниже на примере как сделать ссылку на почту.


  <a href="mailto:admin@sozdat-svoysayt.ru">Письмо администратору сайта</a>
 

Теперь если перейти по ссылке то откроется почтовая программа с уже заполненным адресом получателя. Можете попробовать работоспособность ссылки на E-mail.


Письмо администратору сайта
 

На этом мы закончим работу над ссылками, а на следующем уроке мы будем учиться как размещать изображение на странице своего сайта.




Рейтинг@Mail.ru   Яндекс.Метрика