В данной статье мы кратко рассмотрим, как создавать ссылки на страницы сайта и ссылки-переходы внутри самих страниц.
Ссылки в html являются основами гипертекстовых документов и позволяют быстро переходить от одной веб-страницы к другой. Основная их особенность заключается в том, что сами ссылки могут вести вас не только на html-файлы, но так же они могут вести вас на файлы любых типов, причем эти файлы могут быть размещены совсем на других сайтах. Главное, чтобы к документам, на которые создаются ссылки, был доступ. Выражаясь другими словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт, то на него можно сделать ссылку.
Для того, чтобы создать ссылку необходимо браузеру сообщить, что является ссылкой, а также указать адрес необходимого документа, на который вы создаете ссылку. Оба этих действия выполняются с помощью тега <a>. Основной синтаксис создания ссылок:
|
1 |
<a href="URL">текст ссылки</a> |
Давайте рассмотрим пример ссылки на главную страницу данного сайта:
|
1 |
<a href="http://itechnologi.ru/">Данная ссылка перенаправит вас на главную страницу сайта iTechnologi.ru</a> |
Данная ссылка перенаправит вас на главную страницу сайта iTechnologi.ru
Давайте разберем данный код. Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), если рассматривать это иными, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается.
Когда вы создаете ссылки между страницами одного и того же сайта, то вам не обязательно нужно указывать полный адрес (URL) документа. К примеру, если вы создадите пару страниц (назовем первую страницу stranitsa1.htm, а вторую stranitsa2.htm), которые будут сохранены в одной папке, то вы можете при создании ссылки с одной страницы из них на другую, просто напечатать имя файла в ссылке. Теперь давайте посмотри как будет выглядеть html ссылки со страницы stranitsa1.htm на страницу stranitsa2.htm:
|
1 |
<a href="stranitsa2.htm">Нажмите сюда, чтобы перейти на страницу stranitsa2</a> |
Предположим, что страница stranitsa2 помещена в подпапку с названием «podpapka», тогда ссылка будет выглядеть следующим образом:
|
1 |
<a href="podpapka/stranitsa2.htm"> Нажмите сюда, чтобы перейти на страницу stranitsa2</a> |
Если же создавать ссылку в обратном направлении со страницы stranitsa2 (в подпапке podpapka) на stranitsa1 то она будет выглядеть следующим образом:
|
1 |
<a href="../stranitsa1.htm"> Нажмите сюда, чтобы перейти на страницу stranitsa1</a> |
Сочетание «../» указывает на то, что файл на который делается ссылка находится в папке, которая расположена на один уровень выше от данной позиции файла. Если вы будете следовать этой логике то наверное догадаетесь, что с помощью данного сочетания «../../» вы сможете создать ссылку на файл расположенный на два уровня больше от данной позиции файла.
Создание ссылок внутри страницы
Так же вы можете создавать ссылки внутри самих страниц. Для этого вам понадобятся такие атрибуты, как id и символ “#”.
Атрибут id используется для создания маркировок элементов, на которые вы хотите совершить переход.
|
1 |
<h1 id="sslka1">Заголовок 1</h1> |
После маркировки, вы можете создать ссылку на данный элемент с помощью символ “#” в атрибуте ссылок. Символ “#” сообщает браузеру, что это переход на этой же странице. После символа “#” должен находится id тег, на который вы совершаете переход.
|
1 |
<a href="#sslka1">Ссылка на Заголовок 1</a> |
Для того, чтобы вам стало понятнее, давайте рассмотрим пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> </head> <body> <p><a href="#sslka1">Ссылка на Заголовок 1</a></p> <p><a href="#sslka2">Ссылка на Заголовок 2</a></p> <h1 id="sslka1">Заголовок 1</h1> <p>Некоторый текст</p> <h1 id="sslka2">Заголовок 2</h1> <p>Некоторый текст</p> </body> </html> |
Заголовок 1
Некоторый текст
Заголовок 2
Некоторый текст
Запомните: атрибут id всегда должен начинаться с буквы.
Атрибут title
При создании ссылок всегда обязательно используется атрибут href. Так же вы можете поместить в ссылку такой атрибут как title:
|
1 |
<a href="http://itechnologi.ru/" title="Следите за выходом новых статей на сайте iTechnologi.ru"> iTechnologi.ru </a> |
Данный атрибут используют для краткого описания ссылки. Если вы — не щёлкая мышью — поместите её указатель над ссылкой, вы увидите, как появится текст «Следите за выходом новых статей на сайте iTechnologi.ru «.