Создание ссылок в HTML

Данный урок html посвятим созданию ссылок в html-документе. Ссылок бывает много различных и о том как они создаются, какие у них атрибуты мы сейчас и рассмотрим.

Самый главный тег, позволяющий создавать ссылки - это тег <a> . Все, что мы разместим между открывающим тегом <a> и закрывающим тегом </a> называется якорем ссылки (что будет видно на нашей странице).

Пример:

<a>ссылка на другую страницу</a>

Проверив в браузере нашу страницу, мы увидим эту ссылку, но она не действует. А не действует потому-что мы не указали никаких атрибутов (куда же она должна ссылаться).

Самый основной атрибут ссылки - это атрибут href. Именно он отвечает за то куда ссылка должна ссылаться. В значении этого атрибута мы должны указать ту страницу, на которую наша ссылка должна нас перебросить (прописать полный путь на эту страницу).

Пример:

<a href="/testpage.html"> ссылка на другую страницу</a>

Следующий атрибут, применяемый у ссылок - это атрибут target, отвечающий за открытие ссылки (а именно в каком окне (вкладке) откроется страница, на которую ведет ссылка). Можно открыть в том же окне, а можно и в новом окне (вкладке).

Для открытия ссылки в новом окне используем значение "_blank" (со знаком подчеркивания).

Пример:

<a href="/testpage.html" target="_blank"> ссылка на другую страницу</a>

Еще один атрибут у ссылок - это атрибут title. Этот атрибут не обязательный, а применяем его для указания темы той страницы на которую ссылаемся. При наведении курсора на ссылку будет всплывать подсказка (то что мы пропишем в значении атрибута title).

Пример:

<a href="/testpage.html" target="_blank" title="проверка ссылок"> ссылка на другую страницу</a>

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

Пример:

<a href="http://www.wikipedia.org " target="_blank" >Википедия </a>

Вот таким способом создаются ссылки на другие интернет-ресурсы.

Теперь рассмотрим следующий тип ссылок - это ссылки на скачивание файлов. В якоре такой ссылки пропишем - скачать файл, а в значении атрибута href необходимо указать полный адрес расположения файла для скачивания.

Пример:

<a href="/... file.rar" target="_blank" title="тема файла">скачать файл </a>

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

Теперь давайте создадим ссылку на ваш email-адрес, при клике по которой у пользователя загружается почтовая программа где он может написать вам письмо. В значении атрибута прописываем следующее: "mailto:адрес вашей электронной почты, на который будут приходить письма".

Пример:

<a href="mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ">написать мне письмо</a>

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

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

Как видим у нас появился новый атрибут - name, а в значении этого атрибута пишем имя метки (любое).

Дальше создаем саму ссылку в том месте, откуда мы будем делать переход. В значении атрибута href пишем имя метки через символ решетки - #.

Пример:

<a href="#metka">читать ниже</a>

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

Пример:

<a href="/testpage.html#metka"> ссылка на другую страницу</a>

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

Исправляется это в теге <body> нашего html-документа. У тега <body> тоже есть свои атрибуты и некоторые из них отвечают за цвет ссылок.

Атрибут link - отвечает за цвет не посещенных ссылок.

Атрибут vlink - отвечает за цвет уже посещенных ссылок.

Атрибут alink - отвечает за цвет ссылки при клике по ней.

В значениях атрибутов прописываем цвет, который нам необходим.

Пример:

Еще один важный момент - это подчеркивание ссылок и его влияние на поведенческие факторы - endseo.ru

Вот все о создании ссылок.