Урок 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>
<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>
<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>
В браузере увидим следующее :
Содержание
Раздел 1: цель: богатствоРаздел 2: цель: счастье
Раздел 3: цель: здоровье
Раздел 1: цель: богатство
Для того, чтобы разбогатеть нужно много работать....
Раздел 2:цель: счастье
Чтобы быть счастливым, нужны здоровье и деньги....
Раздел 3: цель: здоровье
Для здоровья нужно заниматься зарядкой....
<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>
Это ссылка на сайт 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 базовых цветов.
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: Завершаем работу с текстом