Ссылки. Теги HTML для создания гиперссылок.

    Главным признаком HTML-документа является наличие в нем гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т.д. Именно возможность добавлять в страницы ссылки на объекты вне нее и сделала Интернет столь популярным и удобным для использования. Поэтому при создании своего сайта не забывай про магию ссылок.

    Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за «пределы» html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по умолчанию он выделен синим цветом и подчеркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какое-либо изображение. Все эти разновидности ссылок создаются в HTML с помощью тега < A>< /A> (сокращение от англ. anchor — якорь). Рассмотрим его поподробнее.

    Для создания ссылки на другой документ (внешняя ссылка) служит атрибут тега A href. В качестве значения этот атрибут принимает URL-адрес документа или имя файла, если файл расположен в этом же каталоге, в противном случае нужно указывать полный путь. Текст ссылки (его еще называют анкором) может быть как обычным текстом (текстовая ссылка), так и графическим изображением (графическая ссылка). Графическая ссылка создается вставкой тега IMG между тегами < A> и < /A>. В общем, синтаксис создания ссылки выглядит так:

< a href="URL-адрес или имя файла">текст ссылки (анкор)< /a>

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

< a href="http://www.seoded.ru/">Главная страница сайта seoded'а.< /a>

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

Главная страница сайта seoded'а.

    Цвет текста ссылок можно изменить с помощью атрибутов тега BODY. Вообще, к тексту ссылок можно применять все те же атрибуты форматирования, что и к основному тексту страницы, т.е. выделять жирным, курсивом, использовать заголовки и т.д.

    Чтобы создать графическую ссылку, как я уже сказал выше, нужно вместо текста ссылки воспользоваться тегом IMG. Пример этой ссылки выглядит так:

< a href="http://www.seoded.ru/">< img src="logo.jpg">< /a>

    А браузер покажет

    По умолчанию браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0

< a href="http://www.seoded.ru/">< img src="logo.jpg" border="0">< /a>

    Текстовые и графические ссылки можно комбинировать. Если написать

< a href="http://www.seoded.ru/">< img src="logo.jpg">Главная страница< /a>

,то ссылкой будет как картинка, так и текст «Главная страница»

Главная страница

    Опять-таки по умолчанию браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это используется атрибут тега A target. Он имеет следующие значения:

_blank — открывает страницу в новом окне;

_parent — загружает ссылку в родительском окне;

_self — по умолчанию. Открывает ссылку в этом же окне.

    Это не все значения атрибута target, но это самые основные. Пример использования этого атрибута

< a href="http://www.seoded.ru/" target="_blank">Главная страница< /a>

    В теге A можно также использовать атрибут title. С его помощью можно создать всплывающую при наведении мыши на ссылку подсказку

< a href="http://www.seoded.ru/" title="Перейти на главную страницу">Главная страница< /a>

    Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается якорь ссылки. Якорь создается атрибутом name:

< a name="имя якоря">текст< /a>

    Имя якоря задается произвольно. Тут стоит сказать, что не все браузеры понимают русские имена якорей, поэтому рекомендую использовать латиницу. Текст между тегами < A> и < /A> для создания якоря не обязателен и чаще всего не указывается. HTML-код внутренней ссылки будет выглядеть так:

< a href="#zagolovok">К заголовку< /a>

,а в браузере так

К заголовку

    Сам якорь находится рядом с заголовком этой страницы «Ссылки. Теги HTML для создания гиперссылок», туда ты и попадешь, если щелкнешь по ссылке. Якорь, как ты и сам, наверное, догадался, имеет вид

< a name="zagolovok">< /a>

    Вместо URL-адреса в значении атрибута href можно написать адрес электронной почты с указанием протокола (mailto:) и тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле «Кому» этим адресом электронной почты. В HTML-коде это выглядит так:

< a href="mailto:aleksei.seoded@gmail.com">Моя почта< /a>

,а в браузере так

Моя почта

    Это все, что я могу тебе рассказать о создании ссылок в HTML. И этот раздел можно объявлять законченным. А данный факт говорит о том, что большую часть основ HTML ты уже освоил. Рекомендую тебе сейчас еще раз пробежаться по предыдущим разделам, а затем создать полноценную HTML-страницу, посвященную, например, тебе любимому. По твоему дизайну и сообразно твоим желаниям. После чего выложить ее на какой-нибудь бесплатный хостинг (конечно, если у тебя есть платный хостинг, то на него) и уже полноценно полюбоваться на свой первый сайт. Можешь показать его друзьям или еще кому. Вообщем почувствовать себя сайтовладельцем. А затем, после небольшого загула по случаю такого события, переходить к следующему разделу, в котором я расскажу тебе о создании таблиц в HTML. А это уже будет первый шаг на пути к превращению личной странички в серьезный ресурс.