2.8 Вставка гипертекстовых ссылок
Гипертекст
Аббревиатура HTML означает язык разметки гипертекста. Что же такое гипертекст? В отличие от простого текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Справочные системы многих программных продуктов построены именно по принципу гипертекста.
При щелчке левой кнопкой мыши на некотором выделенном цветом и подчеркнутом фрагменте текущего документа - гипертекстовой ссылке - происходит переход к другому документу или фрагменту данного документа.
На Web-страницах гипертекстовые ссылки широко используются для перехода к определенному фрагменту текущей страницы, к следующей или любой другой странице сайта или к документу другого сайта.
Для задания перехода по гиперссылке в языке HTML используются тэги <а>…</а> с атрибутом href, значением которого является адрес перехода. В качестве адреса может использоваться имя файла другого документа или URL-адрес.
URL-адрес
Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес, который может быть представлен в числовом виде (например, 204.146.46.133) или определенным сочетанием символов (например, www.microsoft.com). Поскольку каждый компьютер имеет свою уникальную структуру каталогов и файлов, то и каждая страница Web также имеет уникальный адрес, называемый URL (Uniform Resource Locator – Унифицированный указатель ресурсов).
Как видно из названия, URL может указывать не только на страницы Web, но также и на другие ресурсы Интернета – хранилища файлов.
В самом общем виде URL включает в себя:
указатель на протокол, который применяется для доступа к ресурсу – http, ftp и др.,
символьный адрес компьютера,
имя конкретного файла в структуре каталогов этого компьютера.
Например, URL-адрес http://www.chat.ru/user/faq.html состоит из:
указателя на протокол http, который применяется для доступа к Web,
имени компьютера www.chat.ru,
имени файла документа faq.html, который находится в каталоге user.
Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. Однако можно заметить, что во многих URL-адресах отсутствует имя файла. Например, http://www.microsoft.com. Тем не менее, в окне браузера все же появляется конкретная страница. Дело в том, что администраторы Web-серверов могут указать на своих узлах некоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явно не задано. Обычно эти файлы имеют имена index.html или index.htm.
Создание гиперссылки
Для создания гиперссылок используются пара тегов <a>…</a>. Например,
<a href="http://www.web-code.net">Справочник по веб-дизайну</a>
В атрибуте href задается адрес, на который указывает ссылка.
Якорь
Если есть необходимость перейти в какую-либо часть страницы, то в этом месте необходимо разместить якорь, используя следующую конструкцию <a name="название якоря "></a>.
Пример якоря в тексте документа:
<a name="item1"></a>
Пример:
<a href="http://www.web-code.net#item1">Перейти к первому разделу</a>
Атрибуты тега <a>
Атрибут target тега <a> задает вид открываемой страницы. Он может принимать следующие значения:
_self – открытие в текущем окне,
_parent – открытие в фрейме (родителе текущего фрейма),
_top – открытие в главном окне всей фреймовой структуры,
_blank – открытие в новом окне.
Пример:
<a href="/ http://www.web-code.net/contacts.htm" target="_blank">Наши контакты</a>
Пример ссылки на почтовый адрес:
<a
href="mailto:
support@delphicode.ru
Этот
адрес электронной почты защищен от
спам-ботов. У вас должен быть включен
JavaScript для просмотра.
?subject=Поддержка"
title="Написать письмо в техподдержку">
Этот
адрес электронной почты защищен от
спам-ботов. У вас должен быть включен
JavaScript для просмотра.
<';
document.write(''); document.write(addy_text89565);
document.write('<\/a>'); //-->\n
Этот
адрес электронной почты защищен от
спам-ботов. У вас должен быть включен
JavaScript для просмотра.
;/a>
Наш сайт
Пора и в наш сайт вставить гиперссылки. Рассмотрим, как создать переход по ссылке с конца второй страницы lab2.html на первую страницу нашего сайта, т.е. к файлу lab1.html. Для того, чтобы сообщить посетителю сайта о возможности вернуться к первой странице, необходимо предусмотреть между открывающим <а> и закрывающим </а> тэгами соответствующий текст, например:
<а href="lab1.html">Ha первую страницу</а>
Обратите внимание, что адрес ссылки должен быть заключен в кавычки, так как некоторые браузеры могут не понять его без кавычек.
Для того, чтобы ссылка На первую страницу была центрирована, следует ограничить элемент <а>...</а> тэгами <center>…</center>.
Вставим в файле lab2.html пустую строку перед закрывающим тэгом </body> и введем в ней следующий код:
<center><a href="lab1.html">Ha первую страницу</а></сеnter>/
В результате получим следующий HTML-код:
<html>
<head>
<title>Чем мы занимаемся?</title>
</head>
<body bgcolor=aqua text=navy>
<h2 align=center>Чем мы занимаемся?</h2>
<ul>
<li>Разработкой компьютерных распределённых систем управления
<li>Разработкой простых и дешёвых SCADA–систем
<li>Внедрением покупных SCADA–систем
<li>Разработкой управляющих программ для промышленных
контроллеров
</ul>
<form action="mailto: labor_asutp@yandex.ru" method=post>
<center><textarea rows=5 cols=40 name=Comments></textarea><center>
<p><center><input type=submit value="Отправить"></center></р>
</form>
<center><a href="lab1.html">Ha первую страницу</а></сеnter>/
</body>
</html>
Теперь создадим гиперссылку для перехода с первой страницы нашего сайта lab1.html на вторую lab2.html. Для ссылки логичней всего будет использовать текстовый фрагмент о наших достижениях, так как список на второй странице раскрывает содержание именно этого фрагмента текста. Поэтому нам нужно в файле lab1.html поместить открывающий тэг <а> с атрибутом href="lab2.html" перед фрагментом текста о нашей деятельности, а закрывающий тэг </а> - после него.
Для этого откроем в программе Блокнот файл lab1.html и отредактируем этот файл, вставив тэг <а href="lab2.html"> перед текстом о нашей деятельности, а закрывающий тэг </а> – после него. HTML-код в файле lab1.html должен принять следующий вид:
<html>
<head>
<title>Лаборатория АСУТП</title>
</head>
<body bgcolor=blue text=yellow >
<h1 align=center>
Добро пожаловать на страницу нашей лаборатории!
</h1>
<center><img src= labor.jpg border=1 Widht=300 height=400></center>
<p style="font-weight: bold; font-style: italic; font-size: 150%; text-align:
сеnter">
Здесь Вы узнаете <а href="lab2.html">о наших достижениях и планах на будущее</а>
</р>
</body>
</html>
Может оказаться, что ссылка о наших достижениях и планах видна очень плохо или вообще не видна. Это связано с тем, что цвет, которым браузер отображает непросмотренные ссылки, может совпадать с цветом фона документа. В таком случае цвет ссылок следует изменить, воспользовавшись атрибутами link и vlink тэга <body>. Атрибут link определяет цвет непросмотренной ссылки, а vlink – просмотренной. Еще один атрибут alink определяет цвет ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.
Если вы устанавливаете какой-либо из атрибутов bgcolor, text, link, vlink, alink, то устанавливайте их все. Иначе, например, установленный вами фоновый цвет может совпасть с цветом текста, установленным пользователем в браузере.
Установим для непросмотренной ссылки белый цвет white, для просмотренной – светло – зеленый lime, а для ссылки в момент щелчка мышью – красный red:
<body bgcolor=blue text=yellow link=white, vlink=lime, alink=red>
Вставить переход в документе можно не только с помощью текстовой ссылки, но также и с рисунка. Рассмотрим, как вставить переход с рисунка на вторую страницу.
Для создания такой ссылки достаточно в файле lab1.html вставить открывающий тэг <а href="lab2.html"> перед тэгом <img src= labor.jpg border=1 Widht=300 height=400> и закрывающий тэг </а> после него. С учетом всего сказанного выше HTML-код в файле lab1.html примет следующий вид:
<html>
<head>
<title>Лаборатория АСУТП</title>
</head>
<body bgcolor=blue text=yellow link=white, vlink=lime, alink=red>
<h1 align=center>
Добро пожаловать на страницу нашей лаборатории!
</h1>
<center><а href="lab2.html"><img src= labor.jpg border=1 Widht=300 height=400></а> </center>
<p style="font-weight: bold; font-style: italic; font-size: 150%; text-align:
сеnter">
Здесь Вы узнаете <а href="lab2.html">о наших достижениях и планах на будущее</а>
</р>
</body>
</html>
Создавая ссылки на страницы нашего сайта, мы использовали в качестве адреса имя файла. При таком указании адреса браузер всегда ищет файл в текущем каталоге. Если бы нужный файл lab2.html находился в подкаталоге Doc текущего каталога, то в адресе необходимо было бы указать путь к нему от текущего каталога: <а href="Doc\lab2.html">. Такая ссылка, в которой адрес указывается относительно текущего каталога на том же компьютере, называется относительной.
Вы можете также использовать в ссылках полный URL-адрес, указывающий на файл, находящийся в определенном каталоге определенного компьютера в сети. Такая ссылка называется абсолютной. В то время, как относительные ссылки указывают на файлы, расположенные на том же самом компьютере, абсолютные ссылки служат для представления адресов документов на других компьютерах в Интернете.