- •11. Таблицы на html странице
- •12. Ссылки в html. Навигация по страницам
- •13. Адреса ссылок. Указание базового адреса
- •14. Организация навигации по книгам и сайтам
- •15. Формы на html странице
- •17. Стилевое оформление страницы средствами html
- •18. Контекстно-зависимые дескрипторы
- •19. Дескрипторы физического (декоративного) форматирования
12. Ссылки в html. Навигация по страницам
Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом - и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:
<a href="http://www.html.net/">Это ссылка на HTML.net</a>
будет выглядеть в браузере:
Это ссылка на HTML.net
Элемент 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), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке.
Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:
<a href="subfolder/page2.htm">Щёлкните здесь для перехода на page 2</a>
Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо, - использовать атрибут id и символ "#".
Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например: <h1 id="heading1">heading 1</h1>
Теперь можно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должен следовать id тэга, на который выполняется переход. Например: <a href="#heading1">Ссылка на heading 1</a>
Кроме того, в ссылку можно поместить title. Атрибут title используется для краткого описания ссылки. Если вы - не щёлкая мышью - поместите её указатель над ссылкой, вы увидите, как появится текст.
<a href="http://www.html.net/" title="Посещайте HTML.net и изучайте HTML">HTML.net</a>
13. Адреса ссылок. Указание базового адреса
Часто HTML-документы связаны между собой, то есть имеют ссылки друг на друга. Ссылки могут быть как абсолютные, так и относительные. И те и другие имеют недостатки. Абсолютные ссылки могут быть слишком громоздкими и переставать работать, если перемещен младший по иерархии документ. Относительные ссылки легче вводить и обновлять, но и эта связь обрывается, если перемещен старший по иерархии документ. Оба вида связей могут нарушиться при переносе документа с одного компьютера на другой.
К счастью, разработчики HTML предусмотрели эту проблему и добавили два тега, <BASE> и <LINK>, которые включаются в заголовок для того, чтобы связь между документами не нарушалась.
Тег <BASE> служит для указания полного базового URL-адреса документа. С его помощью относительная ссылка продолжает работать, если документ переносится в другой каталог или даже на другой компьютер. Тег <BASE> работает аналогично команде path MS-DOS, что позволяет программе просмотра определить ссылку на искомый документ, даже если она находится в старшем по иерархии документе, расположенном на другом компьютере.
Тег <BASE> имеет один обязательный параметр HREF, после которого указывается полный URL-адрес документа. Ниже показан пример использования тега <BASE>.
<HTML>
<HEAD>
<TITLE>Указание базового адреса</TITLE>
<BASE HREF="//www.my_host.ru/~sergeev">
</HEAD>
<BODY>
<IMG SRC=/gifs/news.gif" ALT="News">
</BODY>
</HTML>
Тег <BASE> указывает браузеру, где искать файл. В случае, если пользователь работает с локальной копией файла и его машина не отключена от сети, изображение пиктограммы News будет найдено и показано в окне браузера.
Тег <LINK>
Даже если тег <BASE> позволяет найти файл, остается открытым вопрос о взаимоотношениях документов. Важность этих отношений возрастает пропорционально росту сложности ваших документов. Для того чтобы поддерживать логическую связь между ними, в HTML введен тег <LINK>. Тег <LINK> указывает на связь документа, содержащего данный тег и другого документа или объекта. Он состоит из URL-адреса и параметров, конкретизирующих отношения документов. Заголовок документа может содержать любое количество тегов <LINK>.
HREF Указывает на URL-адрес другого документа
REL Определяет отношение между текущим и другим документом
REV Определяет отношение между другим документом и текущим (отношение, обратное REL)
TYPE Указывает тип и параметры присоединенной таблицы стилей