HTML первые шаги - урок 4 - Ссылки (гиперссылки)
Мы подошли к самым основам HTML, то ради чего HTML и затевался, а именно к гиперссылкам (или просто ссылки). Ссылки - это способ организации связи между различными материалами. Допустим у вас есть 100000 текстовых файлов, если для них делать рубрикатор, то даже есть в каждом рубрикаторе будет по 200 описаний текстовых документов, то вам потребуется 500 рубрик. Чтобы просмотреть все эти 500 рубрик и найти нужную вам информацию, вам потребуется много времени. Как же ссылки сделают нашу жизнь проще?
Ссылки связывают между собой два HTML-документа произвольным образом так что у каждого HTML-документа есть имя, причем имя уникальное. Таким образом из одного документа мы можем перейти в десять других похожих, популярных документов, что увеличивает наши шансы на успешное нахождение нужной информации.
Такой же принцип и на веб-сайтах. У страниц сайта есть уникальные имена URL (Uniform Resource Locator -единообразный локатор (определитель местонахождения ресурса). Писать уникальные имена страницы, на которую мы будем ссылаться, нужно в теге <a></a>. В общем виде это выглядит так:
<a href="уникальный_путь">текст ссылки</a>
В этом коде href - это атрибут тега A. Что такое атрибуты мы уже рассмотрели в прошлом уроке. Давайте теперь создадим еще один файл в той же папке где у вас лежит index.html. Назовем его file.html и поместим в него следующий код:
<html>
<head>
<title>Мой второй HTML-документ</title>
</head>
<body>
<h1>Мой второй HTML-документ</h1>
</body>
</html>
А в index.html напишем такой код:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<p>
<a href="file.html">Ссылка на второй документ</a>
</p>
</body>
</html>
Теперь когда мы заходим в index.html через браузер мы имеем ссылку, по которой можно перейти на file.html. Давайте теперь потренируемся в написание путей к файлам. Когда оба файла лежат в одной папке, то мы пишем имя файла в атрибуте href и браузер понимает, что раз указано просто имя файла, то файл лежит в одной папке с исходным. А что если мы не хотим хранить файлы в одной папке, как тогда сделать ссылку? Тогда к нам на помощь приходят относительные пути ссылок.
Относительные пути
Относительные пути называют так потому что путь к файлу мы находим относительно исходного файла. Давайте создадим папку files в папке с файлом index.html. В эту папку мы переместим файл file.html. Теперь если вы пройдете в браузере по ссылке в файле index.html, то браузер уже не сможет найти файл file.html, потому что мы поменяли его положение относительно файла index.html.
Теперь мы будем использовать путь относительно index.html. Для указания папки используется косая черта, слэш. Например так
/Program Files/MSOffice/
Чтобы указать начало отсчета пути мы пишем ./ (точка слэш). Таким образом путь к папке files от файла index.html будет выглядеть вот так:
./files/
Осталось только дописать имя файла в конце пути, чтобы указать что путь ведет к файлу file.html
./files/file.html
Давайте теперь подправим путь к файлу в index.html:
<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>
<p>
<a href="./files/file.html">Ссылка на второй документ</a>
</p>
</body>
</html>
Cохраните теперь документ index.html и обновите страницу браузера (должна быть открыта страница index.html). Теперь ссылка на file.html снова работает. Также обратите внимание, что вы можете написать так:
<a href="files/file.html">Ссылка на второй документ</a>
Браузер все равно поймет эту ссылку без ./ . Однако если вы напишите:
<a href="/files/file.html">Ссылка на второй документ</a>
То это уже будет не правильный путь, потому что такой путь указан абсолютно, не относительно файла index.html. То есть если вы хотите написать относительный путь, то используйте точку-слэш или просто начинайте писать путь.
Осталось сделать обратную ссылку, от файла file.html к файлу index.html. Начнем с указания того что этот путь относительный:
./
Теперь нужно указать, что файл находится на уровень выше, то есть нужно выйти из каталога files, тогда мы найдем файл index.html. Для этого мы используем ../ (две точки слэш).
./../
Если бы в папке files была еще одна папка и в этой папке лежал .html файл, то из этого файла ссылка начиналась так ./../../ , то есть на каждую папку мы писали бы по ../ .
И теперь давайте еще добавить имя файла index.html к пути:
./../index.html
Наш путь готов, давайте вставим его в файл file.html:
<html>
<head>
<title>Мой второй HTML-документ</title>
</head>
<body>
<h1>Мой второй HTML-документ</h1>
<p>
<a href="./../index.html">Ссылка на первый документ</a>
</p>
</body>
</html>
Теперь вы можете переходить с одной страницы на другую и обратно. Посмотрите как меняются URL в браузере с одного на другой.
Давайте теперь вернемся к тому моменту, когда я говорил о путях, которые начинаются со слэша без точки, это абсолютные пути.
Абсолютные пути
Абсолютные пути используются на сайтах в Интернете. Например в друпале все страницы сайта загружаются из одного файла index.php, поэтому когда мы пишем / то мы указываем путь от файла index.php. Если мы указываем абсолютный путь на своем компьютере в index.html, то путь начинается с корневого каталога вашего диска. Мы можем также указывать на сайте относительные ссылки, но абсолютные ссылки гораздо удобнее. Дело в том что при переносе папки, файла ваши пути поломаются если они указаны относительно, например вы переместили файл в каталог, то все пути должны стать на ../ длиннее. В этом отношении абсолютные пути удобнее.
Абсолютные пути начинаются с / или с имени сайта например https://drupalbook.org/ru/ . И так и так браузер поймет что мы имеем в виду. Абсолютные пути имееют следующий вид:
/index.html
/files/file.html
/files2/file2.html
И если мы хотим из файлов index.html и file.html сделать ссылку на file2.html, то они будут выглядеть одинаково, несмотря на то что находятся в разных папка:
<a href="/files2/file2.html">ссылка</a>
Как я писал выше этот код будет работать как в index.html, так и в file.html и даже в file2.html можно написать эту ссылку которая ссылается на свой же документ.
Атрибут target
Атрибут target очень важный, он часто нужен когда ссылка ведет на другой сайт с вашего сайта. Этот атрибут позволяет задать как будет открываться сайт по вашей ссылке:
_blank - в новом окне или вкладке;
_self - в том же окне где и ссылка;
_parent - в родительском фрейме (использование фреймов считается устаревшим, на их смену пришел AJAX);
_top - отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
Пожалуй нам нужен будет только значение _blank, так как _self используется по умолчанию и его можно не писать.
<a href="/files2/file2.html" target="_blank">ссылка</a>
Атрибут rel
Атрибут rel показывает отношение (relation - отношение) между текущим документом и тем документом на который указывает ссылка. Наиболее часто используется rel="nofollow", который закрывает от индексации Google, Yandex эти ссылки. Например если вы ставите ссылку на сторонний сайт, то лучше ее закрыть через rel="nofollow" и поставить target="_blank".
<a href="/files2/file2.html" target="_blank" rel="nofollow">ссылка</a>