Ссылки в html

Наш сайт может состоять из нескольких страниц. Главная страница, имеющая название index.html, должна находится на хосте в интернете. Все другие могут располагаться на этом же сайте или же на других сайтах. Ссылки в документах html нужны для связывания этих страниц. Ссылкой может служить текст (слово или фраза) или картинка. Посмотрите на рекламу ниже. Здесь ссылкой служат выделенные серым цветом слова, а зеленым цветом - адрес рекламодателя, щелкнув по которым можно перейти на сайт этого самого рекламодателя.

Создайте новый документ и следуя предыдущей главе вставьте в нее несколько картинок. Назовите ее, например, myfoto.html и сохраните ее в том же каталоге. Для того, чтобы посмотреть эту страничку из главной страницы, мы должны установить на нее ссылку. Делается это при помощи парного тэга <a> с атрибутом href.

Приведем пример текстовых ссылок:

Пример:

<a href="myfoto.html">Мои фото</a>

 Если ваша страничка расположена в другом каталоге, укажите к ней путь, например:

<a href="имя каталога/myfoto.html">мои фото</a>

 Эти две ссылки называются относительными ссылками. Существуют еще и абсолютные ссылки. Они выглядят так:

<a href="http://www.имя вашего сайта/myfoto.html">мои фото</a>

 С помощью абсолютных ссылок можно ссылаться и на другие сайты.

Вы уже обратили внимание, что текст ссылки подчеркнут и написан синим цветом. После того, как Вы щелкните по ссылке, на экран будет выведена ваша страничка myfoto.html. Если Вы вернетесь назад на главную страницу, то увидите что ссылка подкрашена фиолетовым цветом. Это говорит о том, что с этой ссылки было обращение на какую-либо другую страницу. Все эти цвета выводятся по умолчанию. Но их можно изменить. Для этого в тэге <body> необходимо вставить дополнительные атрибуты, определяющие цвет всех ссылок для этой страницы. Вот эти атрибуты:

link - цвет ссылки;
alink - цвет нажатой ссылки;
vlink - цвет уже посещенной ссылки;

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

<body link="#0000FF" alink="#8B4513" vlink="#008000">

Ну, а если вам необходимо выделить важную текстовую ссылку другим цветом? No problem. Вставляем перед текстом ссылки парный тэг Текст вашей ссылки и ссылка будет радовать ваш глаз.

Если у Вас уже есть почтовый ящик, например, на mail.ru, то ссылка на него будет выглядеть следующим образом:

<a href="mailto:Имя ящика@mail.ru"> Мой почтовый ящик </a>

Заметьте, параметр mailto: ОБЯЗАТЕЛЕН! Иначе никто не напишет Вам письмо с признанием в любви или как он Вас ненавидит.

Параметр mailto: имеет несколько опций:

?subject=Тема пиcьма;
&Body=Текст вашего сообщения;
&cc=copy@mail.ru,copy2@mail.ru (копии письма через запятую);
&bcc=hidden_copy@mail.ru,hidden_copy2@mail.ru (скрытые копии письма через запятую);

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

<a href="mailto:pochta@mail.ru?subject=Знакомство&Body=Хочу с Вами познакомиться и общаться&cc=copy@mail.ru&bcc=hidden_copy@mail.ru"> Моя почта </a>

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

А как сделать ссылкой картинку, спросите Вы? Да также. Только вместо текста ссылки прописываем картинку. Сравним:

<a href="myfoto.html">Мои фото</a> 
<a href="myfoto.html"><img src="Ваша любимая картинка"></a> 

Если Вы хотите сделать картинку ссылкой на ваш почтовый ящик, то пропишите следующий код:

<a href="mailto:Имя ящика@mail.ru"><img src="Ваша любимая картинка для почтового ящика"></a>

Если Вы помните, вокруг картинки рисуется рамка по умолчанию, если только Вы не использовали атрибут border="0". Цвет рамки в обычных картинках можно изменить, применив атрибут bordercolor="#xxxxxx". Но если картинка является ссылкой, цвет рамки будет задан атрибутами тэга body - link, alink и vlink. И отдельно их цвет изменить нельзя.

В принципе ссылку можно организовать практически на любой файл - *.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:. Ну, например так:

<a href="http://www.melody.ru/music.mp3"> Скачать песню </a>.

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

<a href="file://localhost/>Путь к вашему текстовому файлу"> Сохранить </a>.

Вам будет предложено сохранить куда-нибудь этот текстовый файл.

Внимание

Атрибут file://localhost/ приведен в качестве примера и использоваться на вашем сайте в интернете НЕ ДОЛЖЕН, т.к. этот атрибут можно использовать только на локальном компьютере. Для закачки файлов с других сайтов используйте абсолютный путь.

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

<a href="Ваша большая картинка"><img src="Ваша маленькая картинка"></a>.

Имейте ввиду, что все действия происходят в этом самом окне. А можно ли выводить информацию в другое окно? Конечно можно. Для этого существует атрибут target с параметром _blank. Попробуем переписать предыдущий пример, чтобы получить увеличенную картинку в другом окне:

<a href="Ваша большая картинка" target="_blank"><img src="Ваша маленькая картинка"></a>

Как получилось у меня можно посмотреть здесь.

Примечание

Не забывайте в код кртинки-ссылки добавлять атрибут alt. В ссылках он также важен, как и в простых картинках.

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

1 способ:

Первый способ заключается в использовании атрибута name тэга <a>. Для начала необходимо установить закладку (якорь) в нужном месте документа. Делается это следующим образом:

<a name="Имя закладки">Текст, на который Вы хотите сослаться. Можно выделить одно слово.</a>.

Затем в тексте, из которого Вы хотите сделать ссылку, прописываете следующий код:

<a href="#Имя закладки">Текст, с которого Вы хотите сделать ссылку</a>.

Имейте ввиду: символ # ОБЯЗАТЕЛЕН. Если Вы хотите сослаться на текст другой страницы, то необходимо указывать путь к этой страничке. Выглядеть это будет так:

<a href="Название страницы.html#Имя закладки">Текст, с которого Вы хотите сделать ссылку</a>.

Вот и все - ничего сложного.

Рассмотрим это на примере этой страницы. У меня установлена закладка на названии этой страницы следующим образом

<a name="ancor">Ссылки в HTML</a>.

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

<a href="#ancor">Вверх</a>.

Теперь если вы нажмете слово Вверх - Вы попадете в начало страницы.

2 способ:

Второй способ отличается от первого только способом присвоения имени закладки. Для этого используется атрибут id (идентификатор). Но действие идентификатора распространяется только на текущую страницу. Делается это так:

Текст, на который Вы хотите сослаться.

или

Текст, на который Вы хотите сослаться.

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

И еще: если имя закладки написано маленькими символами, то и при вызове необходимо использовать маленькие буковки. Иначе некоторые браузеры могут посчитать их как разные имена.

Ссылки являются важным элементом гипертекстового документа, поэтому будьте внимательны при их написании и ОБЯЗАТЕЛЬНО проверяйте их работоспособность. Неработающие ссылки портят пользователям настроение и побывав один раз на таком сайте они больше никогда к Вам не вернутся.

В следующей главе мы перейдем к изучению таблиц.

Ссылки в html

Реклама