HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Осталось связать эти разрозненные Web-страницы воедино — в Web-сайт. Как это осуществить? С помощью средств навигации — гиперссылок.
Гиперссылка обычно выглядит как подчеркнутый фрагмент текста; если навести на него курсор мыши, он примет вид "указующего перста". При щелчке на гиперссылке Web-обозреватель загрузит Web-страницу, интернет-адрес которой указан в параметрах данной гиперссылки (целевую Web-страницу). Гиперссылка может иметь вид графического изображения или его фрагмента, такие гиперссылки сейчас очень
Текстовые гиперссылки
Начнем с самых простых — текстовых гиперссылок, которые представляют собой фрагмент текста.
Создание гиперссылок
Создать текстовую гиперссылку очень просто. Достаточно найти в блочном элементе (например, абзаце) фрагмент текста, который нужно превратить в гиперссылку, и заключить его в парный тег <A>. Интернет-адрес целевой Web-страницы указывают в атрибуте HREF этого тега.
Гиперссылка (т. е. тег <A>) представляет собой встроенный элемент Web-страницы, т. е. это часть блочного элемента, например, абзаца:
Вот гиперссылка, которая указывает на Web-страницу page125.html, хранящуюся в папке pages, вложенной в корневую папку сайта, на сайте http://www.somesite.ru:
<A href="#">Страница № 125</A>
А эта гиперссылка указывает на архивный файл archive.zip, хранящийся в той же папке, что и Web-страница, которая в данный момент открыта в Web-обозревателе (текущая Web-страница):
<A href="#">Архив</A>
При щелчке на гиперссылке Web-обозреватель предложит загрузить этот архивный файл и либо открыть его, либо сохранить на диске клиентского компьютера. Пример:
<A href="#">Предыдущая страница</A>,
<A href="#">следующая страница</A>.
Этот фрагмент HTML-кода создает абзац, содержащий сразу две гиперссылки, которые указывают на разные целевые Web-страницы.
Текст, являющийся гиперссылкой, можно оформлять, используя любые теги, приведенные в главе 3.
Пример:
<A href="#">Страница
<EM>№ 125</EM></A>
Тег <A> поддерживает необязательный атрибут TARGET. Он задает цель гиперссылки, указывающую, где будет открыта целевая Web-страница. Так, если атрибуту TARGET присвоить значение "_blank", целевая страница будет открыта в новом окне Web- обозревателя.
Например, если мы изменим код первого примера гиперссылки таким образом (исправления выделены полужирным шрифтом):
<A href="#" TARGET="_blank">Страница № 125</A>
"Страница № 125" будет открыта в новом окне Web-обозревателя.
Чтобы задать обычное поведение гиперссылки (когда целевая Web-страница открывается в том же окне Web-обозревателя), нужно присвоить атрибуту TARGET значение "_self" (это его значение по умолчанию) или вообще убрать данный атрибут из тега <A>.
Имеется также возможность создать гиперссылку, которая никуда не указывает ("пустая" гиперссылка). Для этого достаточно
задать в качестве значения атрибута HREF значок # ("решетка")<A href="#">А я никуда не веду!</A>
При щелчке на такой гиперссылке ничего не произойдет.
НА ЗАМЕТКУ
"Пустыми" гиперссылками мы будем активно пользоваться в частях III и IV, когда начнем писать Web-сценарии.
Правила отображения гиперссылок Web-обозревателем:
— обычные гиперссылки выделяются синим цветом;
— гиперссылки, по которым посетитель уже "ходил" (посещенные гиперссылки), выводятся темно-красным цветом;
— гиперссылка, по которой посетитель в данный момент щелкает (активная гиперссылка), выводится ярко-красным цветом;
— текст любых гиперссылок подчеркивается;
— при помещении курсора мыши на гиперссылку Web-обозреватель меняет его форму на "указующий перст".
Таково поведение по умолчанию, которое мы можем изменить, создав соответствующее представление. О том, как это сделать, будет рассказано в части II.
Интернет-адреса в WWW
Об интернет-адресах файлов мы говорили еще в главе 1. Однако WWW привносит в них кое-что новое, что нам обязательно нужно знать.
Рассмотрим первый пример гиперссылки из предыдущего раздела. Ее интернет-адрес таков: http://www.somesite.ru/pages/page125.html. Он содержит и интернет- адрес Web-сервера, и путь файла, который нужно получить. Поэтому он называется полным. Полные интернет-адреса используют, если нужно создать гиперссылку, указывающую на файл, в составе другого Web-сайта.
Однако если гиперссылка указывает на файл, входящий в состав того же Web- сайта, что и файл текущей Web-страницы, предпочтительнее сокращенный интернет-адрес, содержащий только имя нужного файла (интернет-адрес Web-сервера и так известен Web-обозревателю).
Существуют два типа сокращенных интернет-адресов. Адреса первого типа задают путь к файлу, который нужно получить (целевому файлу), относительно корневой папки Web-сайта. Они содержат в своем начале символ / (слэш), который и говорит Web-серверу, что путь нужно отсчитывать относительно корневой папки.
НА ЗАМЕТКУ
О корневой папке сайта также было рассказано в главе 1. Вкратце: это особая папка, находящаяся на диске компьютера, на котором хранится Web-сайт и работает Web- сервер; в этой папке должны помещаться все файлы Web-сайта.
Например, интернет-адрес
/page3.html
указывает на файл page3.html, хранящийся в корневой папке Web-сайта. А интернет-адрес
/articles/article1.html