Главная / Верстка / Html / Ссылки в HTML-документах +

Ссылки в HTML-документах +


08.07.2015 13:251215

После того, как мы научились помещать в HTML-страницу изображения, пора изучить основу гипертекстового пространства — ссылки.

 

Ссылки бывают разные: ссылка с одной страницы сайта на другую, ссылка на страницу другого сайта, ссылка на ящик электронной почты, ссылка на закачку файла, ссылка в виде картинки.

Тег A

Для создания и использования гипертекстовых ссылок используется тег <a>. Этот тег является самым необходимым элементом. Без него гиперткст (HTML) и, собственно, Интернет просто немыслим.

Гипертекстовая ссылка

Но, как и все в HTML, сделать ссылку довольно просто. Используем тег <a> с одним единственным атрибутом href (сокр. от hypertext reference - гипертекстовая ссылка).

Пример:

<a href="http://www.convent.su">Ссылка на сайт Convent.su</a>

Результат в браузере:

 

Как видете, все, что расположено внутри тега <a>, становится видно в окне браузера. Этот текст называется анкор (ancor) или, в переводе, якорь. А атрибут href задает адрес ресурса и\или имя файла, который браузер должен открыть.

Обратите внимание: закрывающий тег обязателен.

Ссылка на страницу в пределах одного сайта

Сделать ссылку на страницу Вашего сайта еще проще. Но давайте вначале сделаем две не сложные вещи.

Если Вы делали все так, как я вам советовал, то сейчас у Вас в папке www находятся папка images и файл index.html.

Давайте в папке www создадим еще один файл с именем page_1.html. Впишите в него минимальный набор тегов. Между тегами <title> напишите к примеру "Тестовая страница", а между тегами <body> —"Проверка ссылок". Это первая не сложная вещь.

Вторая — в папке www создадим еще одну папку с именем archives (архивы) и поместим в нее какой нибудь архив (с расширением rar или zip).

А теперь, собственно , ссылка. Если страница, на которую ведет ссылка, расположена в одной папке с исходной, то код выглядет так:

<a href="page_1.html">Ссылка на тестовую страницу</a>

Т.е. в значении атрибута href просто пишем имя файла.

Если мы создадим подпапку subfolder и в нее поместим нашу Тестовую страницу (файл page_1.html), то в значении атрибута href нужно будет указать еще и имя папки. Т.е прописать путь к файлу:

<a href="subfolder/page_1.html">Ссылка на тестовую страницу</a>

Обратная ссылка на нашу Первую страницу с Тестовой страницы, находящейся в папке subfolser будет выглядеть так:

<a href="../index.html">Обратная ссылка на Первую страницу</a>

Таким образом, две точки и слеш "../" перед именем файла указывают на то, что файл находится в папке, расположенной на уровень выше от позиции файла, с которого делается ссылка.

Очень полезен атрибут target. По умолчанию страница, на которую ведет ссылка, открывается в том же самом окне браузера. Но очень часто нужно, чтобы страница открывалась в новом окне или новой вкладке (в зависимости от настроек Вашего браузера). Для этого ссылке нужно придать атрибут target со значением _blank.

И еще один не обязательный атрибут title. Он добавляет поясняющий текст к ссылке в виде всплывающей подсказки при наведении на нее курсора.

Пример кода:

<a href="http://www.prohtml.net" target="_blank">Ссылка на сайт Prohtml.net , откроется в новом окне.</a><br>
<br>
<a href="http://www.convent.su" title="Создаем сайт и ...зарабатываем">
Ссылка на сайт Prohtml.net, при наведении курсора появится заголовок.</a>

Результат:

Ссылка на сайт Prohtml.net, откроется в новом окне.
Ссылка в виде картинки (или картинка в виде ссылки)

А как сделать ссылку в виде картинки? Тоже очень просто. Для этого пишем тег ссылки со всеми неоходимыми атрибутами, а на место анкора (текста ссылки) вставляем изображение. Например:

<a href="http://prohtml.net/" title="Сделай свой сайт сам!" target="_blank"><img src="images/web_426.jpg" width="100" height="67" border="0"></a>

Результат:

cms_dlya_im.jpg

Когогда делается картинка в виде ссылки, то по умолчанию вокруг картинки появляется не очень красивая рамка. Чтобы эту рамку убрать, прописываем атрибут border со значением ноль.

Ссылка на закачку файла

Ссылка на закачку файла ничем не отличается от обычной ссылки. В арибуте href просто прописываем путь к файлу, который мы хотим дать для скачивания. Такой файл обычно архивируют.

Пример:

<a href="archives/your_file.rar" target="_blank" title="Книга">Скачать файл</a>

Если Вы в атрибуте href укажете имя файла, который Вы поместили в папку archives (как я Вам советовал), то после клика по этой ссылке у Вас начнется скачивание этого файла.

Ссылка на адрес электронной почты

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

<a href="mailto:vash_mail@prohtml.net">Написать мне письмо</a>

В браузере мы будем видеть:

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

Цвета ссылок

По умолчанию браузеры не посещенные ссылки показывают синим цветом, посещенные — фиолетовым, а активные ссылки (в момент нажатия на нее) — красным.

Если такие цвета не подходят под основной дизайн сайта или страницы, цвета ссылок можно изменить.

Для этого нужно придать специальные атрибуты тегу <body>.
link — цвет не посещенной ссылки;
vlink (visited link) — цвет посещенной ссылки;
alink (active link) — цвет активной ссылки.

Цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

Таблица базовых цветов. В скобках — RGB-значение цвета.

black
(#000000)
maroon
(#800000)
green
(#008000)
navy
(#000080)
silver
(#C0C0C0)
red
(#FF0000)
lime
(#00FF00)
blue
(#0000FF)
gray
(#808080)
purple
(#800080)
olive
(#808000)
teal
(#008080)
white
(#FFFFFF)
fuchsia
(#FF00FF)
yellow
(#FFFF00)
aqua
(#00FFFF)

Если Вам этих цветов недостаточно, более точно подобрать RGB-значение можно.

Например, если тегу <body> придать следующие атрибуты и их значения:

<body link="red" vlink="black" alink="green">

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

Ну вот, на этом с ссылками закончим. Эксперементируйте, и Вы очень быстро все поймете.

Про атрибут rel со значением nofollow, а также тег <noindex> читайте в отдельной статье.

На следующей странице будем разбираться с таблицами в HTML >>


Html , Ссылки В Html



Верстка / Html PRoHtml


«Ссылки в HTML-документах +» - Похожие страницы

Списки в HTML-документах + На этой странице мы разберемся с очень важной частью HTML-языка — со списками. При работе над сайтами списками вы будете пользоваться постоянно. Пэтому уделите этому вопросу достаточно внимания. Списки в HT...
Html 1429
Как поисковые системы находят покупные ссылки сайта Приветствую друзья я Виталий, сегодня речь пойдет о ссылках и о поисковиках. На популярность любого сайта влияет качество его продвижения и раскрутки, однако, кроме оптимизации сайта, подготовки оптимизиров...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям