Rambler's Top100
Воскресенье, 19.11.2017, 20:42

КАК СОЗДАТЬ СВОЙ САЙТ

Урок "6"

Покоряем html ссылки

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

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

<a href="http://www.dr-websait.ucoz.ru">Это ссылка на сайт dr-websait.ucoz.ru </a>

будет выглядеть в браузере:

Это ссылка на сайт dr-websait.ucoz.ru

Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <a> и закрывающим </a> тегом , будет текстом ссылки.
Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

 

Если нужно сделать ссылку между собственными страницами?

 

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

<a href="page2.htm"> Для перехода на page2 щелкни здесь! </a>

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

Eсли страница page 2 находится в подпапке "subfolder", код ссылки выглядит так:

<a href="subfolder/page2.htm"> Для перехода на page2 щелкни здесь! </a>

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

<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>

Вот результат в браузере:

 

Оглавление

Раздел 1: как стать богатым
Раздел 2: как стать счастливым
Раздел 3: как быть здоровым

Раздел 1: как стать богатым

Для того чтобы стать богатым необходимо очень много трудится .....

Раздел 2: как стать счастливым

Для того чтобы стать счастливым, нужно использовать каждую минуту...

Раздел3: как быть здоровым

Для того чтобы быть здоровым нужно много заниматься физкультурой...

 

А можно сделать ссылку на почту?

Конечно можно. Вот пример ссылки на е-mail сайта dr-websait.ucoz.ru.

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

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

Написать письмо админу dr-websait.ucoz.ru

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

Парочка дополнительных атрибутов:

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

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

Смотрите пример:

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

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

Это ссылка на сайт dr-websait.ucoz.ru, откроется в новом окне

Эта - тоже на dr-websait.ucoz.ru. При наведении появится заголовок.

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

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

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

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

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

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

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

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

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

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

А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте зеленая?

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

<a href="http://dr-websait.ucoz.ru"><font color="black">Черная ссылка</font></a>

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

 

См. также

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

Google +1
Форма входа
Наш опрос
Оцените мой сайт
Всего ответов: 80
Поиск
Календарь
«  Ноябрь 2017  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
27282930
Архив записей
Друзья сайта
  • Обновление навигаторов
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0