SEMNIC                                                     Главная | HTML | CSS | Статьи


 


Урок 6: Изучаем html ссылки

Давайте сначала поговорим о ссылках - переход с одной на другую страницу. Без этого базового элемента невозможно  представить интернет.

Ссылку html создать очень просто. Для этого используем простой элемент с одним атрибутом. Вот вам пример:            

<a href="http://semnic.ru/"> Ссылка на сайт semnic.ru</a>

 В браузере выглядит так:


Элемент а (ancor) как бы является якорем, т.е. заключенный между открывающим тегом <a> и закрывающим тегом</a>текст  будет ссылкой.

Атрибут href  является сокращением от "hypertext reference/гипертекстовая ссылка", обозначает место, куда будет  выполнен переход по этой ссылке - обычно это интернет-адрес и/или имя файла.

Вам нужно создать ссылку между страницами одного сайта.

Между страницами одного сайта создать html ссылку так же не сложно. К примеру, если у нас есть две страницы (  например page1.htm и page2.htm ) находящееся в одной папке , код ссылки с page1 на page2 следует прописать так:

<a href="page2.htm"> Переход на page2, нажать здесь! </a>

Т.е. просто пишем название страницы, на которую надо перейти.

Если страница page 2 расположена в подпапке "subfolder", код ссылки выглядит следующим образом:

<a href="subfolder/page2.htm"> Переход на page2 нажать здесь! </a>

Со страницы page 2 на страницу page1 ( в обратную сторону ) код html ссылки выглядит так :

  <a href="../page1.htm"> Переход на page1 нажать здесь! </a>

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

Если нужно создать ссылку внутри одной страницы?

Случается когда  вам нужно сделать ссылку от начала  в конец страницы  или наоборот, или например с оглавления на  главы и.т.п. Это сделать  просто! Нужно отметить место документа такой конструкцией:
   
      <!-- данный способ используют при маркировки заголовков -->
      <h2 id="razdel1">Раздел 1</h2>
      <!-- а такую метку можно ставить везде где потребуется->
      <h2> <a name="razdel1"></a> Раздел1: </h2>

Теперь можно ссылаться на отмеченную область(в этом случае Раздел1) просто указываем ее имя после значка #.

Так выглядит ссылка на раздел1:
 
<a href="#razdel1"> Ссылка на Раздел 1 </a>

Приведу наглядный пример:

<h1 > Содержание </h1><br>
<a href="#razdel1">Раздел 1: цель: богатство</a><br>
<a href="#razdel2">Раздел 2: цель: счастье</a><br>
<a href="#razdel3">Раздел 3: цель: здоровье</a>
<h2 id="razdel1">Раздел 1: цель: богатство</h2>
<p> Для того, чтобы разбогатеть нужно много работать.... </p>
<h2 id="razdel2">Раздел 2: цель: счастье</h2>
<p>Чтобы быть счастливым, нужны здоровье и деньги....</p>
<h2>Раздел3:<a name="razdel3"></a> цель: здоровье</h2>
<p>Для здоровья нужно заниматься зарядкой....</p>

В браузере увидим следующее :

Привожу пример ссылки на е-mail сайта semnic.ru.

<a href="mailto:admin@semnic.ru">Написать письмо админу semnic.ru </a>

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


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

Вот еще пара нужных  атрибутов:

TARGET - указывает где открыть страницу на которую ведет html ссылка. По умолчанию она откроется в том же окне.  Но если надо чтоб открылась в новом, необходимо прописать target ="_blank"

TITLE - показывает заголовок ссылки, он появится если навести на нее курсор.

Вот вам пример:

<a href="http://semnic.ru" target="_blank">
 Это ссылка на сайт semnic.ru, открывается в новом окне
</a> <br> <br>
<a href="
http://semnic.ru" title="Как сделать сайт ">
 Эта - тоже на semnic.ru. При наведении появится заголовок.
</a>

Смотрите на результат:



В принципе это всё. Можете сильно не загружать себя этим, в программе Adobe Dreamweaver любая ссылка создаётся одним кликом мышки. Для Вас  главное понять что к чему, а зубрить это не стоит...

А можно ли изменить цвет ссылок?

Можно конечно. Для изменения цвета ссылок во всем документе, есть специальные атрибуты элемента BODY .

LINK- цвет просто ссылок.

ALINK(Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее)

VLINK(Visited Link) - цвет уже посещенных ссылок

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

Например, открыв тело документа, элементу body прописать:

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

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

Если вам необходимо чтобы в каком-то месте ссылка была другого цвета, например все ссылки  в документе зеленые, а именно в этом месте нужна красная? Тогда нужно внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета:

<a href="http://semnic.ru"><font color="red">Красная ссылка</font></a>

Красная ссылка

Если сделать так, то эта ссылка будет красной.

                                                                                                                                                                                                                                                                      ↑ Вверх ↑

См. также

Следующий   -Урок 7: Разбираемся с изображениями
Предыдущий-Урок 5: Завершаем работу с текстом