Статья 12. Что такое ссылки? Как вставить текстовую ссылку? Как сделать картинку ссылкой? Ссылка на електронную почту.

Эту статью мы посвятим изучению ссылок. Мы разберёмся, зачем они нужны, какие теги используются для вставки ссылок и много другого. Итак, давайте приступим к обучению.

1. Что такое ссылки в HTML и зачем они нужны?

Итак, практически все сайты состоят из нескольких (или даже из огромного количества) страничек. Странички все разные, и для перехода между ними используются ссылки. Например, если у вас на сайте есть страничка index.html и lesson.html, то для их связи между собой мы вставляем ссылки.

Не мало важным является то, что файлы страничек могут лежать как в одной директории (в одной папке), так и в разных директориях. А ссылки могут без проблем "перебрасывать" нас между страницами сайта.

Так же ссылка может указывать на файл (например, на архив), лежащий на хостинге (на сервере) Вашего сайта, после нажатия на которую Клиент может скачать этот файл.

Ссылкой может быть как текст, так и обычная картинка.

2. Как вставить текстовую ссылку в HTML страничку?

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

<a href="название странички.http">То, что написано на ссылке</a>

Итак, мы используем тег <a></a> с атрибутом href="...", в котором необходимо указать путь и название файла, к которому мы будим обращаться. А между открывающимся и закрывающимся тегом <a>...</a>, мы пишем слово или несколько слов, которые будут служить надписью самой ссылкой в браузере. Ну, вот примерно так.

А в этой таблице приведены примеры ссылок:

Если index.html и lesson.html находятся в одной директории (D:\Уроки HTML)

Если index.html находится в верхней директории (D:\Уроки HTML), а lesson.html, в нижней (D:\Уроки HTML\lesson)

Cсылка, лежащая в файле index.html ведёт на файл, который можно скачать с сайта, например архив lesson.zip

Если необходимо, что бы ссылка, лежащая в index.html перебрасывала нас на страничку другого сайта или скачивала с другого сайта файл

Ссылка, лежащая на index.html:

<a href="lesson. html">уроки</a>

Ссылка, лежащая на index.html:

<a href="lesson/ lesson.html"> уроки</a>

Ссылка, лежащая на index.html, а файл lesson. zip в той же директории:

<a href="lesson. zip">уроки</a>

Ссылка, лежащая на index.html и ведущая на сайт www.uzeron.com:

<a href="http:// www.uzeron.com/ index.php"> уроки</a>

Ссылка, лежащая на lesson.html:

<a href="index. html">главная </a>

Ссылка, лежащая на lesson.html:

<a href="../index. html">главная </a>

Ссылка, лежащая на index.html, а файл в нижней директории в папке lesson:

<a href="lesson/ lesson.zip"> уроки</a>

Ссылка для скачивания с сайта www.uzeron.com файл web_color.zip, лежащая на index.html:

<a href="http:// www.uzeron.com/ files/html/ 18112009/ web_color.zip"> уроки</a>

По умолчанию, текстовая ссылка имеет синий цвет, если же вы хотите изменить её цвет, то тогда это делается так:

<a href="..."><font color="#ff0000">Ссылка красного цвета</font></a>

Так же мы можем задать цвет всех ссылок сразу. для этого в открывающемся теге body необходимо задать такие атрибуты:

link - цвет просто ссылки

alink - цвет активной ссылки (нажатой)

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

<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

ПРИМЕР текстовой ссылки:

Пусть у нас есть наш файл index.html. Так же давайте создадим файл lesson.html, который будет находиться в той же папке, что и index.html. Ну и конечно же, установим кнопки (ссылки), которые будут позволять нам переходить со странички index.html на lesson.html, и наоборот.

Так будет выглядеть ссылка, которая "перебрасывет" нас с файла index.html на файл lesson.html:

А так пишется ссылка с файта lesson.html на index.htm:

А таким будет результат странички index.html:

Так будет выглядеть страничка lesson.html:

Результат: мы прикрепили ссылки, которые перебрасывают нас со странички index.html на lesson.html, и наоборот.

Точно так же делаются ссылки на странички других сайтов в Интернете и на файлы для закачки с сайта.

3. Как сделать картинку ссылкой?

Сделать картинку ссылкой можно очень просто. Нам, всего-навсего, необходимо вставить вместо текста уже известный тег <img src="картинка.gif">, например:

Так же мы можем убрать рамку вокруг картинки и задать необходимый размер картинки, например:

1. align="left" - расположение картинки слева

2. hspace="10" - горизонтальное расстояние от картинки до текста = 10 пикселей

3. vspace="15" - вертикальный отступ от картинки = 15 пикселей

4. alt="Ссылка на страничку lesson.html" - при наведении мышки на картинку появится подсказка "Ссылка на страничку lesson.html"

5. border="0" - рамка вокруг картинки = 2 пикселя.

6. bordercolor="0000ff" - задаём синий цвет рамки вокруг картинки (Если же Вы зададите в тэге <body> атрибут, задающий цвет рамки, link, vlink, alink, то в таком случае атрибут bordercolor не будет иметь никакого значения, то есть рамка будет иметь цвет, заданный в body)

Итак, сейчас давайте применим полученные знания на практике. Я поместил картинку с именем ref.jpg в ранее созданную папку img. Теперь давайте разместим картинку-ссылку на страничке index.html. Наша ссылка будет вести посетителя на страничку lesson.html.

И еще, для того, чтобы резко оборвать текст в нужном месте, а остаток перенести вниз под картинку, можно использовать тег <br> с атрибутом clear. Атрибут clear может иметь значение alt, left или right, например <br clear="left">. All - останавливает обтекание объекта текстом. Left - останавливает обтекание текстом объекта, который выровнен по левому краю. Right - завершает обтекание текстом объекта, выровненного по правому краю.

Теперь сохраним документ и посмотрим в браузере, что вышло:

Результат: Мы научились задавать ссылку - картинкой, а так же задавать ей разнообразные атрибуты.

4. Как задать ссылку для отправки письма на электронный почтовый адрес (на e-mail)?

В утой части давайте рассмотрим, как можно задать установить ссылку на Ваш почтовый адрес, то есть на e-mail. Это свойство ссылок можно использовать для того, что бы человек мог по нажатию по ссылке моментально перейти на свою почтовую программу и сразу отправить Вам письмо. Так же, Вы можете написать бланк письма, который откроется при нажатии по ссылке.

Ссылка-почтовик имеет такой вид:

<a href="mailto:ВАШ e-mail"> Напишите мне письмо </a>

В атрибуте href обязательно задать параметр почты mailto:, а после двоеточия необходимо указать Ваш e-mail. Всё остальное так же, как и для обычной ссылки.

А если Вы хотите для удобства задать бланк письма, который откроется у посетителя, то задайте такие атрибуты:

- ?subject=Тема отправляемого пиcьма
- &Body=Текст Вашего сообщения
- &cc=pismo@rambler.ru,pismo2@rambler.ru (на эти адреса отправляются копии письма через запятую)
- &bcc=hidden_pismo@rambler.ru,hidden_pismo2@rambler.ru (скрытые копии письма через запятую)

Так выглядит комплекс всех атрибутов:

<a href="mailto:pismo@rambler.ru?subject=Hello&Body=text &cc=pismo1@rambler.ru&bcc=hidden_pismo1@rambler.ru"> Напишите мне письмо</a>

Я не буду включать эту часть статьи в наш пример, так как она очень простая, а я надеюсь, что Вы уже в состоянии самостоятельно вставить такую ссылку на Вашу страничку. А мы встретимся в следующей статье :-)

Коментарии к этой статье:

Комментарий добавил(а): Иван Корень
Дата: 2010-07-06

отличная статья!

Комментарий добавил(а): Таня
Дата: 2010-10-10

Очень помогла, спасибо!

Комментарий добавил(а): Алейла
Дата: 2010-11-18

Все очень понятно,спасибо

Комментарий добавил(а): ВЛАДИМИР
Дата: 2011-02-15

ничего не понял,извините чайник.

Комментарий добавил(а): Acer
Дата: 2011-07-01

alt="Ссылка на страничку lesson.html" - при наведении мышки на картинку появится подсказка "Ссылка на страничку lesson.html" Вообще-то это определяет аттрибуб title а не alt.

Комментарий добавил(а): Anjela
Дата: 2012-06-07

Otlichnaya statia! Spasibo.

Комментарий добавил(а): Сергей
Дата: 2012-07-04

radikal, что бы понять, нужно иметь хоть малейшее понятие об html. Если есть желание узнать более подробно об html из бесплатных видео уроков, то можете посмотреть здесь http://sozdat-site.uzeron.com

Комментарий добавил(а): Жазира
Дата: 2013-05-10

електронную пишется через э

Комментарий добавил(а): павел
Дата: 2013-09-07

подскажите есть красивый паралакс слайдер и вот хочу попробовать если получится картинки ссылками реально ли в нем сделать- вот код <p>[revobject type="image" image="images/sliders/creative_slider/slide1/button.png" effect="lfb" x="250" y="530" speed="800" start="3500" easing="easeOutExpo" parallax="5" url="#"]</p>

Комментарий добавил(а): Bars
Дата: 2013-12-17

Отлично, спасибо!

Добавить коментарий: