В этом уроке вы научитесь создавать ссылки — переходы с одной страницы на другую.
Что необходимо для создания ссылки?
Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом — и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на Pokompam.by:
Пример 1:
<a href="http://new.pokompam.by/">Это ссылка на new.pokompam.by</a>
будет выглядеть в браузере:
Элемент a обозначаетякорь/anchor». Атрибут href это сокращение отhypertext reference/гипертекстовая ссылка», специфицирующий место, на которое выполняется переход по данной ссылке — обычно это internet-адрес и/или имя файла.
В примере атрибут href имеет значениеhttp://www.html.net», которое является полным адресом HTML.net и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что»http://всегда должно входить в состав URLов.
Слова
Это ссылка на HTML.netэто текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг </a>.
Как насчёт ссылок между моими собственными страницами?
Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:
Пример 2:
<a href="/page2.htm">Щёлкните здесь для перехода на page 2</a>
Если page 2 помещена в подпапкуsubfolder», ссылка выглядит так:
Пример 3:
<a href="/subfolder/page2.htm">Щёлкните здесь для перехода на page 2</a>
В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:
Пример 4:
<a href="/../page1.htm">Ссылка на page 1</a>
Сочетание../указывает на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка. Следуя этой логике, вы можете также указать на два уровня выше../../или более.
Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).
А ссылки внутри страницы?
Вы можете также создавать ссылки-переходы внутри самой страницы — например, оглавление со ссылками на главы. Всё, что вам необходимо, — использовать атрибут id и символ#».
Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:
<h1 id="heading1">heading 1</h1>
Теперь можно создать ссылку на этот элемент с помощью знака#в атрибуте ссылки. Знак#сообщает браузеру, что это переход на той же самой странице. После#должен следовать id тэга, на который выполняется переход. Например:
<a href="#heading1">Ссылка на heading 1</a>
Всё станет понятнее на примере:
Пример 5:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Ссылка на heading 1</a></p>
<p><a href="#heading2">Ссылка на heading 2</a></p>
<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>
<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>
</body>
</html>
выглядит в браузере (щёлкните по ссылкам):
Heading 1
Text text text text
Text text text text
(Примечание: атрибут id должен начинаться с буквы)
Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:
Пример 6:
Ссылка на <a href="mailto:
nobody@pokompam.by
Отправить e-mail nobody на new.Pokompam.by</a>
будет в браузере:
Отправить e-mail nobody на pokompam.by
Единственное отличие в ссылках на e-mail и на файл состоит в том, что, вместо адреса документа, вы записываете mailto: с последующим адресом электронной почты/e-mail. При щелчке по ссылке открывается программа по умолчанию для работы с электронной почтой с адресом, уже записанным в строке адреса. Обратите внимание, что эта функция будет работать только в том случае, если e-mail программа установлена на вашем компьютере. Попробуйте!
Есть ещё какие-нибудь другие атрибуты, которые мне нужно знать?
Для создания ссылки вы обязательно должны использовать атрибут href. Кроме того, в ссылку можно поместить title:
Пример 7:
<a href="http://new.pokompam.by/title="Посещайте new.pokompam.by и изучайте HTML">new.pokompam.by</a>
будет выглядеть в браузере:
Атрибут title используется для краткого описания ссылки. Если вы — не щёлкая мышью — поместите её указатель над ссылкой, вы увидите, как появится текстПосещайте HTML.net и изучайте HTML».