Учимся вставлять ссылки в документ html.

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

Создаются html ссылки очень легко. Всего лишь используется элемент с одним атрибутом. Давайте разберем на примере:

<a href="http://site.ru">Ссылка ведущая на site.ru</a>

Браузер её будет отображать как:

Ссылка ведущая на site.ru

Текст который заключен в элемент а (ancor), а именно между открывающимся открывающим <a> и закрывающимся </a>тегом , и будет текстом вашей ссылки. Атрибут href (сокращенно «hypertext reference/гипертекстовая ссылка»), специфирует место, на которое будет выполняться переход по этой ссылке – зачастую это internet-адрес и/или имя файла.

Делаем ссылку между страницами сайта.

Создать html ссылку между страницами одного веб-сайта намного легче. Допустим у нас есть две страницы stranica1.htm и stranica2.htm, которые расположенные в одной папке, то тогда код ссылки с stranica1 на stranica2 будет выглядеть так:

<a href="stranica2.htm"> Для перехода на stranica2 жми! </a>

Как вы видите, необходимо написать лишь название страницы, на которую мы хотим перейти.

Если же страница stranica2 будет находиться в подпапке «blog», то и код ссылки выглядит соответственно:

<a href="blog/stranica2.htm"> Для перехода на stranica2 жми! </a>

А так будет выглядеть код html ссылки со страницы stranica2 на stranica1 (т.е. наоборот):

<a href="../stranica1.htm"> Для перехода на stranica1 жми! </a>

Сочетание «../« указывает как бы на папку, которая расположена на один уровень выше от данной позиции файла, с которого делается ссылка.

Теперь делаем ссылку внутри страницы.

Может случиться такое, что вам нужно будет сделать ссылку ведущую в конец страницы с её начала, или же наоборот. Это делается легко и просто! Вам нужно будет разместить место документа следующей конструкцией:

<!-- этот способ используется при маркировании заголовков --> <h2 id="punkt1">Пункт 1</h2> <!-- а такую метку можно поставить везде где понадобится--> <h2> <a name="punkt1"></a> Пункт 1: </h2>

Ссылаться на помеченную область (в данном случае Пункт1) можно теперь простым указанием её имени после символа #.

Именно так будет выглядеть ваша ссылка на пункт:

<a href="#punkt1"> Ссылка на Пункт 1 </a>

Ниже покажу более наглядно:

<h1 > Оглавление </h1> <br> <a href="#punkt1">Пункт 1: как стать богатым</a> <br> <a href="#punkt2">Пункт 2: как стать счастливым</a><br> <a href="#punkt3">Пункт 3: как быть здоровым</a> <h2 id="punkt1">Пункт 1: как стать богатым </h2> <p> Для того, чтобы стать богатым необходимо очень много трудиться ..... </p> <h2 id="punkt2">Пункт 2: как стать счастливым </h2> <p>Для того чтобы стать счастливым, нужно использовать каждую минуту...</p> <h2>Пункт3:<a name="punkt3"></a>как быть здоровым</h2> <p>Для того чтобы быть здоровым нужно много заниматься физкультурой...</p>

Вот так будет отображено в браузере:

Оглавление

Пункт 1: как стать богатым Пункт 2: как стать счастливым Пункт 3: как быть здоровым

Пункт 1: как стать богатым

Что бы стать богатым необходимо много работать…

Пункт 2: как стать счастливым

Что бы стать счастливым, нужно использовать любую свободную минуту…

Пункт3: как быть здоровым

Что бы стать здоровым, нужно заниматься спортом…

Можно так же сделать ссылку на почту.

Сейчас приведу пример как сделать ссылку на е-mail сайта primer.com.

<a href="mailto:[e-mail]">Написать письмо админу site </a>

В браузере будет выглядеть:

Отправить письмо администратору site

Все очень просто, мы используем mailto затем двоеточие и емаил получателя. После нажатия на ссылку у вас запуститься почтовая программа-клиент с заполненным полем имени получателя.

Дополнительные атрибуты:

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

TITLE – укажет заголовок, который появится при наведении на ссылку.

Рассмотрим пример:

<a href="http://site.ru" target="_blank"> Это ссылка на сайт primer.com, откроется в новом окне  </a> <br> <br> <a href="http://site.ru" title="Учебник создания сайта "> Эта - тоже на site.ru. При наведении появится заголовок. </a>

Смотрите на результат:

Это ссылка на site.ru, откроется в новом окне.

Эта – тоже на site.ru. При наведении появится заголовок.

Меняем цвет ссылки.

Что бы сменить цвет ссылки существуют специальные атрибуты элемента BODY.

LINK – цвет просто ссылок.

ALINK(Active Link) – цвет активных ссылок (активная означает в момент нажатия на нее)

VLINK(Visited Link) – цвет уже посещенных ссылок

Задавать цвета нужно или в RGB-значением в шестнадцатеричной системе, или же одним из 16 базовых цветов.

Если же мы при открытии тела документа, элементу body пропишем:

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

то и все ссылки в этом документе станут зелёными, уже посещенные ссылки станут красными,  а ссылки в момент нажатия будут синими.

Если нам нужно что бы все ссылки были зелеными, а в одном месте синие?

Для этого необходимо внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета:

<a href="http://site.ru"><font color="white">Белая ссылка</font></a>

Если сделать так, то данная ссылка будет белой.