Урок 8: Ссылки

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

Что необходимо для создания ссылки?

Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом - и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на главную страницу нашего сайта:

Пример 1:

           <---a href="http://romasaikin.narod2.ru/">На главную<---/a>

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

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

В примере атрибут href имеет значение "http://romasaikin.narod2.ru", которое является полным адресом romasaikin.narod2.ru и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что"http://" всегда должно входить в состав URLов. Слова "Это ссылка на romasaikin.narod2.ru" это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг <---/a>.

Как насчёт ссылок между моими собственными страницами?

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их страница 1.htm и страница 2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с страница 1.htm на страница 2.htm будет выглядеть так:

Пример 2:

           <---a href="страница 2.htm">Щёлкните здесь для перехода на страницу 2<---/a>

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

Пример 3:

           <---a href="папка/страница 2.htm">Щёлкните здесь для перехода на page 2<---/a>

В обратную сторону ссылка со страницы "страница 2" (в подпапке "папка") на странице 1 будет такой:

Пример 4:

           <---a href="../страница 1.htm">Ссылка на страница 1<---/a>

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

Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).

А ссылки внутри страницы?

Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо, - использовать атрибут id и символ "#".

Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:

           <---h1 id="глава 1">глава 1<---/h1>

Теперь можно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должен следовать id тэга, на который выполняется переход. Например:

           <---a href="#глава 1">Ссылка на главу 1<---/a>

Всё станет понятнее на примере:

Пример 5:

           <---html>
  
             <---head>

             <---/head>

             <---body>

               <---p><---a href="#глава 1">Ссылка на главу 1<---/a><---/p>
               <---p><---a href="#глава 2">Ссылка на главу 2<---/a><---/p>

               <---h1 id="глава 1">глава 1<---/h1>
               <---p>Некий текст<---/p>

               <---h1 id="глава 2">глава 2<---/h1>

               <---p>Некий другой текст<---/p>
  
             <---/body>

           <---/html>

выглядит в браузере (щёлкните по ссылкам):

(Примечание: атрибут id должен начинаться с буквы)

Могу я перейти ещё куда-нибудь?

Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:

Пример 6:

           Ссылка на <---a href="mailto:Чей нибудь адрес">Отправить e-mail на "Куда нибудь".com<---/a>

будет в браузере:

Единственное отличие в ссылках на e-mail и на файл состоит в том, что, вместо адреса документа, вы записываете mailto: с последующим адресом электронной почты/e-mail. При щелчке по ссылке открывается программа по умолчанию для работы с электронной почтой с адресом, уже записанным в строке адреса. Обратите внимание, что эта функция будет работать только в том случае, если e-mail программа установлена на вашем компьютере. Попробуйте!

Есть ещё какие-нибудь другие атрибуты, которые мне нужно знать?

Для создания ссылки вы обязательно должны использовать атрибут href. Кроме того, в ссылку можно поместить title:

Пример 7:

           <---a href="http://romasaikin.narod2.ru" title="Посещайте romasaikin.narod2.ru и изучайте html язык">Посещайте romasaikin.narod2.ru и изучайте html язык (2)<---/a>

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

Атрибут title используется для краткого описания ссылки. Если вы - не щёлкая мышью - поместите её указатель над ссылкой, вы увидите, как появится текст "Посещайте HTML.net и изучайте HTML".