Ссылки различаются на внутренние и внешние (зависит от адресата), а также на текстовые и графические (зависит от представления на странице). Внешняя ссылка - ссылка, которая ведёт на другой сайт, внутренняя, соответственно, «работает» в рамках одного сайта. Текстовые ссылки — это текст, указывающий «путь» на другой обьект. Графические ссылки - вместо текста используется изображение.
Все ссылки на HTML страницах создаются посредством тегов <A></A> (от англ. anchor — якорь). Рассмотрим их подробнее.
Внешние ссылки
Гиперссылка - это определенный текст (слово, фраза) или графическое изображение (картинка), при клике (или наведении) мышкой по которым обеспечивается переход на внешний URL -адрес (другой сайт, документ, изображение и т.п.). Гиперссылка создается атрибутом тега <A> - href , который в качестве значения принимает URL-адрес. Чтобы вставить гиперссылку в свой документ нужную фразу пишут между парными тегами <A> </A>:<a href="URL-адрес"> текст ссылки </a>
К примеру, текстовая ссылка на главную страницу этого блога (ее HTML-код) будет выглядеть так:<a href="http://vvfed1blog.blogspot.com/">«WEB заморочки...»</a>
Чтобы создать графическую ссылку, нужно вместо текста вставить изображение - воспользоваться тегом IMG (подробности «Работа с изображениями»). Пример графической ссылки на главную страницу этого блога:<a href="http://vvfed1blog.blogspot.com/"><img src="logotip.gif" border="0"></a>
Текстовые и графические ссылки можно комбинировать, т.е. ссылкой будут как картинка, так и текст одновременно:<a href="http://vvfed1blog.blogspot.com/"><img src="logotip.gif">«WEB заморочки...»</a>
По умолчанию текст ссылок, как правило, в браузерах синий и подчеркнут. Изменить эти значения можно с помощью атрибутов тега <BODY>, а также здесь применимы все атрибуты форматирования текста (подробности «Форматирование текста на страницах сайта»).По умолчанию браузер окружает картинку рамкой, чтобы этого избежать нужно атрибуту border тега IMG присвоить значение 0:
<img src="logotip.gif" >border="0">
Внутренние ссылки
Внутренние ссылки позволяют перемещаться вверх-вниз по странице. Чтобы была понятнее сама суть внутренней ссылки, рассмотрим ее на конкретном примере. Скажем, составлен большой текстовый документ, который следует представить в удобочитаемой форме, к примеру, повесть с несколькими главами или отчет о работе на нескольких страницах печатного текста. Для удобства прочтения, как правило, составляется Содержание документа, представляющее собой своеобразное меню, позволяющее переходить из Содержания на конкретные главы (страницы) документа и обратно. Таким образом, читатель может выбрать любую часть документа не «прокручивая» его с начала.Якоря, которыми общий текст документа разделяется на составные части (главы, страницы), создаются атрибутом тега <A> - name (задает имя якоря в HTML документе). Чтобы попасть на нужную страницу в Содержании устанавливаются ссылки на якоря.
Ссылка на якорь - <a href="#Имя Якоря">Страница</a> Якорь - <a name="Имя Якоря"></a>
Внутренняя ссылка работает так: при клике на ссылку происходит перемещение к месту, где установлен якорь.Допустим, якорь размещён в начале страницы и называется home. Его код записывается так: <aname="home"></a>, а внизу страницы стоит ссылка - в начало (<A HREF="#home">в начало</a>), она должна переместить текст вверх, где установлен якорь home.
Таким же образом устанавливаются якоря в начале каждой страницы, а в Содержании - ссылки на них.
<A name="home"></a>
Содержание:
<a href="#1">Страница 1</a>
<a href="#2">Страница 2</a>
<a href="#3">Страница 3</a>
<a name="1"></a>
Страница 1
Текст первой страницы. Текст первой страницы
Текст первой страницы. Текст первой страницы
<A HREF="#home">в начало</a>
<a name="2"></a>
Страница 2
Текст второй страницы. Текст второй страницы
Текст второй страницы. Текст второй страницы
<A HREF="#home">в начало</a>
<a name="3"></a>
Страница 3
Текст третьей страницы. Текст третьей страницы
Текст третьей страницы. Текст третьей страницы
<A HREF="#home">в начало</a>
В данном случае на экран монитора выводится Содержание и ниже весь (большой) текст документа. Кликом по нужной опции (номеру страницы) в Содержании на экран будет выведена выбранная часть документа.В конце каждой страницы следует установить ссылку на первую страницу home, чтобы в любой момент можно было вернуться к Содержанию (в начало), а не «прокручивать весь» документ обратно. Таким же образом можно установить внутри страницы якоря с соответствующими именами (name) и ссылками на них в нужной части документа.
Есть небольшое дополнение к тегам, которое определяет способ открытия нового документа, вызванного гиперссылкой. По умолчанию браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это используется атрибут тега <A> - target, который определяет направление ссылки. Он имеет следующие значения:
"_self" - по умолчанию. Открывает ссылку в этом же окне: a href=”URL” target="_self">Ссылка</a>
"_blank" - открывает страницу в новом окне: <a href=”URL” target="_blank">Ссылка</a>варианты пересылки для страниц, расположенных во фреймах:
"_top" - открывает страницу в этом же фрейме: <a href=”URL” target="_top">Ссылка</a>
"_parent" - загружает ссылку в родительском окне: <a href=”URL” target="_parent">Ссылка</a>
<a href=”http://vvfed1blog.blogspot.com” target=”_blank”>«WEB заморочки…»</a>
Посредством атрибута title в теге <A> можно создать всплывающую при наведении мыши на ссылку подсказку:
<a href=”http://vvfed1blog.blogspot.com” title="Главная страница блога">«WEB заморочки…»</a>
Вместо URL-адреса в значении атрибута href можно написать адрес электронной почты с указанием протокола (mailto:) и тогда при щелчке по ссылке откроется окно почтовой программы с указанным адресом электронной почты. В HTML-коде это выглядит так:
<a href="mailto:svoi@yandex.ru">Это мой E-mail, пишите</a>
... Дерзайте ...
