Понятие гипертекстовой ссылки

Если html-документ является достаточно длинным, то для удобства быстрого перехода «внутрь» документа, а затем возврата «одним щелчком» в начало, при создании html-документа можно воспользоваться механизмом создания меток (еще такие гиперссылки называют якорями).

В том месте html-документа, куда необходимо попасть при щелчке по гиперссылке, ставится команда вида:

<a name="info"></а>Важная информация

Здесь в атрибуте name= указывается условное имя метки (может быть буквенно-цифровое).

Обратите внимание , что закрывающую команду </а> лучше поставить сразу после открывающей.

Имена меток (якорей) должны быть уникальны в пределах документа. Имена меток в одном документе не могут отличаться только регистром.

Затем, там, где формируется «оглавление», создаем гиперссылку на метку:

Посмотрите в разделе <a href="#info">Информация</a>.

Для создания гиперссылки используются команды <а> и </а>, причем в команде <а>, в атрибуте href= указывается адрес html-документа. Этот адрес называется универсальным указателем ресурсов (Uniform Resource Locator) — URL. В каждом URL-адресе есть три части: протокол, имя сервера и имя файла (включая путь к нему, если необходимо). Протокол — это правила, в соответствии с которыми два компьютера общаются друг с другом. Мы будем говорить в основном о http — стандартном протоколе WWW.

Например, гиперссылка на веб-сайт газеты «Наука в Сибири» формируется так:

<a href="http://www.sbras.ru/HBC/index.html"> &laquo;Наука в Сибири&raquo; </a>

здесь
http:// — протокол,
www.sbras.ru — имя сервера, где находится веб-сайт,
/HBC/index.html — путь и имя файла главной страницы веб-сайта.

А на экране вы увидите:

«Наука в Сибири»

Причем, имейте ввиду: если на веб-сервере в папке с файлами сайта есть файл с именем index.html, то именно он откроется в браузере автоматически, даже если его имя и не будет указано в URL-адресе:

<a href="http://www.sbras.ru/HBC/"> &laquo;Наука в Сибири&raquo; </a>

Абсолютный URL-адрес содержит полный адрес документа и используется для ссылки на html-документы, находящиеся в Интернете (на других серверах):

<a href="http://www.sbras.ru/HBC/2004/n09/f08.html"> ЧТО НИ ДЕЛАЕТСЯ — ВСЕ К ЛУЧШЕМУ…</a>

Это гиперссылка на конкретную статью в «НВС»:

ЧТО НИ ДЕЛАЕТСЯ — ВСЕ К ЛУЧШЕМУ…

Относительный URL-адрес связан с адресом текущего документа, т.е. определяется относительно той директории (папки), где расположен документ, открытый в браузере. Этот вид URL-адреса используется не только для создания гиперссылок, но и для того, чтобы правильно указывать путь к графическим файлам, используемым в html-документах. Например, если в html-документе lab3-t.htm необходимо сделать гиперссылку на файл lab3-z.htm, находящийся в той же самой папке, то достаточно указать:

<a href="lab3-z.htm">Задание</a>

Если же требуется, например, вставить в html-документ картинку logo.gif, находящуюся в папке ris, то следует делать так:

<img src="ris/logo.gif">

Адрес ../lab1/lab1-t.htm означает переход на одну папку вверх (..) и выбор файла из папки lab1.

Адрес /lab1/lab1-t.htm означает переход в корневую папку и соответствует абсолютному URL-адресу вида:
http://www.lab.ru/lab1/lab1-t.htm.

Как правило, относительные URL-адреса используются в html-документах, расположенных на одном сервере. Это делается для того, чтобы при модифицировании или переносе сайта на другой сервер в гиперссылках ничего не нужно было менять.

Но, категорически неверно указывать в URL-адресах имя диска (K:, L:), т.к. при переносе файлов на сервер никаких дисков уже нет! Да и при переносе файлов с компьютера на компьютер имена дисков могут различаться, и что, сидеть и все исправлять???

Картинки-гиперссылки

В качестве гиперссылки может выступать не только текст, но и картинка. При этом на экране вокруг картинки будет изображена цветная рамка. Если же эта рамка не нужна, ее можно убрать, используя атрибут border=0 в команде <img>:

<a href="#home"><img src="ris/up.gif" border=0> В начало </a>

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

<a href="mailto:my_name@mail.ru">my_name@mail.ru</a>

По умолчанию гиперссылка открывается в том окне (вкладке) браузера, где находится веб-страница с этой гиперссылкой. А если хотелось бы, чтобы новая страница и открывалась в новом окне браузера?

Для этого следует воспользоваться атрибутом target= в команде <a>.

У этого атрибута есть стандартное имя _blank, когда каждая новая веб-страница будет открываться именно в новом окне браузера (или в новой вкладке — в зависимости от браузера).

<p><a href="page1.htm" target="_blank">Первая гиперссылка</a>.
<p><a href="page2.htm" target="_blank">Вторая гиперссылка</a>.

Если же в качестве значения атрибута target= указать произвольное имя и использовать его потом в нескольких гиперссылках, то все эти гиперссылки будут открываться в одном и том же окне браузера:

Еще один полезный атрибут команды <a> — это атрибут title=, позволяющий в момент наведения на гиперссылку указателя мышки отобразить рядом с курсором короткий текст (как правило, пояснительного характера):

<a href="http://www.sbras.ru" title="СО РАН - это Сибирское отделение Российской академии наук">Портал СО РАН</a>

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

И, наконец, гиперссылка может изменить свой внешний вид в момент наведения на неё указателя мышки.

Всё это задается с помощью псевдоклассов CSS:

A:link — непосещенная гиперссылка;
A:visited — посещенная гиперссылка;
A:active — активная гиперссылка;
A:hover — гиперссылка в момент наведения на неё указателя мышки.

Тогда при описании стиля можно указать:

<style>
A:link  {color: red;   text-decoration: none}
A:hover {color: green; text-decoration: overline}
</style>

Допустим, мы хотим выделить красным цветом все слова, помещенные внутри элемента <b>, но размещенные только в тексте абзацев.

Если записать стиль:

B {color: red}

То тогда все слова, выделенные как <b></b> (например, и в пунктах списка тоже) будут полужирными и красного цвета.

<p>Текст абзаца с <b>очень важной</b> информацией</p>

<ul>

<li>Первый <b>пункт списка</b>.

<li>Второй <b>пункт списка</b>.

</ul>

Наверняка, на многих сайтах, публикующих большие объёмы текстовой информации, вы встречали ссылку на версию для печати. Что же собой представляет «версия для печати»?

При распечатке сайтов, если вы пробовали это делать, распечатывается не только интересующая посетителя текстовая и графическая информация, но и другие посторонние для данного случая элементы, такие как заголовок сайта, навигационное меню, баннеры и т.п. В тех случаях, когда мы просто хотим распечатать материал с сайта, чтобы потом спокойно его почитать, отключившись от Интернета, навигация и прочие онлайновые вещи нам ни к чему. Поэтому и делают специальную версию для печати, которая представляет собой не что иное, как исключительно текстовый материал сайта, и ничего лишнего.

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

Как это делается рассмотрим на примере всё того же сайта «Сермяжная правда». Очевидно, что при выводе на печать нужно оставить только блок основного содержимого, т.е. блок text. Все остальные блоки печатать не нужно.

Как объяснить браузеру, что таблица стилей должна относиться к режиму вывода на печать?

Для этого в элементе <link> есть специальный атрибут media=, который указывает тип устройства вывода, для которого создана таблица. Таким образом, можно написать отдельную таблицу стилей для печати и подключить её к документу следующим образом:

<link rel=stylesheet href="sp-print-style.css" type="text/css" media="print">

Структура HTML-документа, который мы хотим распечатать:

<html>
<head>
<link rel=stylesheet href="sp-style.css" type="text/css"> 
<title>Газета "Сермяжная правда"</title>
</head> 
<body>
<div id="main">
<div id="head">
... Головная часть сайта ... 
</div> <!--  end head -->

<div class="punkt">
... Пункт меню ...
</div>

<div id="text">
... Текст страницы ...
</div> 

<div class="punkt">
... Пункт меню ...
</div>

</div> <!--  end main -->
</body>
</html>

Для того, чтобы получить хороший печатный документ, нам необходимы только название сайта (указанное внутри команды <title>) и содержимое текстового блока. Что же будет выаодиться на печать сейчас? Это можно узнать, воспользовавшись режимом предварительного просмотра (Print Preview) в браузере. Как правило, он находится в пункте главного меню Файл. Легко убедиться, что на печать выводится всё, кроме фонового изображения:

Как же «убрать» ненужные блоки? Для этого используется свойство display: none — блоки с таким свойством изымаются из потока элементов.

Соответственно, для блоков head и punkt в файле sp-print-style.css необходимо написать правила:

#head  { display: none }
.punkt { display: none }

Действительно, ни логотип, ни меню сайта больше на печать не выводятся. Но блок основного содержимого не заполняет всю ширину листа расположен так же, как был представлен в окне браузера. Для того, чтобы блок main располагался на всю ширину листа, необходимо это тоже указать:

#main  { width: 100% }

А для блока text надо задать:

#text  { width: 95%; margin-left: 0px }

Всё! Больше в файле sp-print-style.css ничего не должно быть.

Теперь самое главное. Куда в HTML-документе поместить ссылку на файл sp-print-style.css, ведь там уже есть ссылка на основную таблицу стилей sp-style.css.

Поскольку стили применяются по порядку следования, то, чтобы вариант «для печати» переопределил правила из основной таблицы стилей, ссылку на файл sp-print-style.css нужно поместить после основной таблицы стилей sp-style.css:

<head>
<link rel=stylesheet href="sp-style.css" type="text/css"> 
<link rel=stylesheet href="sp-print-style.css" type="text/css" media="print"> 
<title>Газета "Сермяжная правда"</title>
</head> 

В результате получаем требуемое: