Ссылки – это переходы с одной Интернет-страницы на другую, с одного сайта на другой.

Для создания ссылки используется все тот же всемогущий тег. Простой тег с одним элементом и одним атрибутом - и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на главную страницу этого проекта:

<a href="http://www.freeadvice.ru">"Бесплатные советы"</a>

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

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

В примере атрибут href имеет значение "http://www.freeadvice.ru", которое является полным адресом сайта и называется URL (Uniform Resource Locator - универсальный локатор ресурса). Обратите внимание, что"http://" всегда должно входить в состав URLов. Слова "Бесплатные советы" - это текст, который показывается в браузере как ссылка. При создании ссылки, не забудьте закрыть тэг </a>.

Если ваш сайт состоит из нескольких страниц, а чаще всего так и бывает, вы можете делать ссылки между этими страницами,  не указывая полный адрес (URL) документа. Например, если у вас две страницы (назовём их index.html и page.html), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с index.html на page.html будет выглядеть так:

<a href="page.html">Кликните по этой ссылке для перехода на страницу page</a>

Если файл page.html  расположен не в корневой директории сайта, а в одной из его дополнительных папок, например, в папке "additional", ссылка выглядит так:

<a href="additional/page.html">Кликните по этой ссылке для перехода на страницу page</a>

Альтернативно, вместо имени файла,  вы всегда можете указать полный адрес файла (URL).

Ссылки внутри страницы

Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо - использовать атрибут id и символ "#".

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

<h1 id="top">Начало страницы</h1>

Теперь нужно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должно следовать имя, которое вы дали атрибуту id, на который выполняется переход. Например:

<a href="#top">Перейти к началу страницы</a>

(Примечание: имя атрибута id обязательно должно начинаться с буквы!)

Пример ссылки на начало страницы вы можете увидеть в действии в каждом из этих уроков. Обратите внимание: в конце каждого урока стоят четыре ссылки. Так вот ссылка "К началу урока" и есть та самая - с атрибутом "id", который добавлен в тег заголовка урока - именно с него начинается страница, если вы нажимаете на ссылку.

Вы можете также сделать ссылку на e-mail адрес почти так же, как и ссылку на документ:

<a href="mailto:webmaster@freeadvice.ru">Написать веб-мастеру сайта</a>

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

Единственное отличие в ссылках на e-mail и на файл состоит в том, что вместо адреса документа, вы записываете кодовое слово «mailto» с последующим адресом электронной почты (e-mail). При щелчке по ссылке открывается программа "по умолчанию" для работы с электронной почтой с адресом, уже записанным в адресной строке письма. Обратите внимание, что эта функция будет работать только в том случае, если на вашем компьютере установлена  e-mail программа – Microsoft Outlook, The Bat или любая другая. Попробуйте!

Для создания ссылки обязательно должен использоваться атрибут href. Кроме того, в ссылку можно поместить дополнительный атрибут "title":

<a href="http://www.freeadvice.ru/" title="Учим HTML с помощью online-учебника и создаем сайты самостоятельно!">Учим HTML</a>

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

Учим HTML

Атрибут "title" используется для краткого описания ссылки. Если вы, не щёлкая мышью, поместите её указатель над ссылкой, вы увидите, как появится текст "Учим HTML с помощью online-учебника и создаем сайты самостоятельно!"