Одна из особенностей World Wide Web заключается в возможности перехода с одной веб-страницы на другую с помощью так называемой гипертекстовой связи (hyperlink). Путешествуя по Web, вы постоянно встречаете на веб-страницах гипертекстовые ссылки фрагменты текста, подчеркнутые и выделенные другим цветом. Это делается с помощью HTML команд <а> и </а>; заключенный между этими командами текст называется текстом ссылки. Если на нем щелкнуть мышью, автоматически осуществляется переход на другую веб-страницу.
На предыдущих лабораторных вы научились интегрировать в веб-страницу графические изображения и фоновую графику. Теперь настало время сделать следующий шаг и научиться ссылаться на другие страницы в WWW.
Гиперссылки на веб-страницы одно из основных свойств WWW. Любой html-документ может содержать ссылку на некоторый раздел внутри этого же документа или на другой html-документ.
Если html-документ является достаточно длинным, то для удобства быстрого перехода
«внутрь» документа, а затем возврата «одним щелчком» в начало,
при создании html-документа можно воспользоваться механизмом создания меток (еще такие гиперссылки называют якорями).
В том месте html-документа, куда необходимо попасть при щелчке по гиперссылке,
ставится команда вида:
<a name="info"></а>Важная информация
Здесь в атрибуте name= указывается условное имя метки (может быть буквенно-цифровое).
Обратите внимание , что закрывающую команду </а> лучше поставить сразу после открывающей.
Имена меток (якорей) должны быть уникальны в пределах документа. Имена меток в одном документе
не могут отличаться только регистром.
Затем, там, где формируется «оглавление», создаем гиперссылку на метку:
Посмотрите в разделе <a href="#info">Информация</a>.
Обратите внимание, что в атрибуте href= указывается имя метки, перед которым ставится
знак # (он является обязательным!).
Для создания гиперссылки используются команды <а> и </а>, причем
в команде <а>, в атрибуте href= указывается адрес html-документа.
Этот адрес называется универсальным указателем ресурсов (Uniform Resource Locator) URL.
В каждом URL-адресе есть три части: протокол, имя сервера и имя файла (включая путь к нему, если необходимо).
Протокол это правила, в соответствии с которыми два компьютера общаются друг с другом.
Мы будем говорить в основном о http стандартном протоколе WWW.
Например, гиперссылка на веб-сайт газеты «Наука в Сибири» формируется так:
<a href="http://www.sbras.ru/HBC/index.html"> «Наука в Сибири» </a>
здесь А на экране вы увидите:
Гиперссылки-метки
Гиперссылки на другие html-документы
http:// протокол,
www.sbras.ru имя сервера, где находится веб-сайт,
/HBC/index.html путь и имя файла главной страницы веб-сайта.
«Наука в Сибири» |
Причем, имейте ввиду: если на веб-сервере в папке с файлами сайта есть файл с именем index.html, то
именно он откроется в браузере автоматически, даже если его имя и не будет указано в
<a href="http://www.sbras.ru/HBC/"> «Наука в Сибири» </a>
http://www.sbras.ru/HBC/ |
Абсолютный 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>
Обратите внимание на то, что значение атрибута href=
обязательно должно быть в кавычках.
По умолчанию гиперссылка открывается в том окне (вкладке) браузера, где находится веб-страница с этой гиперссылкой.
А если хотелось бы, чтобы новая страница и открывалась в новом окне браузера?
Для этого следует воспользоваться атрибутом target= в команде <a>.
У этого атрибута есть стандартное имя _blank, когда каждая новая веб-страница
будет открываться именно в новом окне браузера (или в новой вкладке в зависимости от браузера).
Если же в качестве значения атрибута target= указать произвольное имя и использовать его потом в нескольких
гиперссылках, то все эти гиперссылки будут открываться в одном и том же окне браузера:
Еще один полезный атрибут команды <a> это атрибут title=, позволяющий в момент наведения на
гиперссылку указателя мышки отобразить рядом с курсором короткий текст (как правило, пояснительного характера):
<a href="http://www.sbras.ru" title="СО РАН - это Сибирское отделение Российской академии наук">Портал СО РАН</a>
Атрибут target
<p><a href="page1.htm" target="_blank">Первая гиперссылка</a>.
<p><a href="page2.htm" target="_blank">Вторая гиперссылка</a>.
<p><a href="page1.htm" target="my-new">Первая гиперссылка</a>.
<p><a href="page2.htm" target="my-new">Вторая гиперссылка</a>.
Атрибут title
Портал СО РАН |
Для удобства работы с гиперссылками в языке 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>
(например, и в пунктах списка тоже)
будут полужирными и красного цвета.
Проблему решает использование контекстного селектора, который позволяет указать, что стиль необходимо применить
для элементов <b>, находящихся исключительно внутри элемента <p>:
P B {color: red}
Названия элементов при этом отделяются пробелом.
Посмотрите, что теперь получилось: демонстрация примера.
Вернемся к сайту «Сермяжная правда». На этом сайте пункты меню были оформлены просто как текст:
Теперь сделаем пункты меню гиперссылками.
Веб-страницу Толкователь будем считать главной («домашней»), поэтому
дадим ей имя index.html (чтобы именно она открывалась по умолчанию).
А остальные страницы сайта будут называться, например,
p2.html, ... p5.html
В файл со стилями sp-style.css добавим CSS-правила, описывающие цвет непосещенной, посещенной и активной гиперссылок,
а также вид гиперссылки в момент наведения на неё мышки. Однако, учитывая, что помимо гиперссылок в пунктах меню, ещё
могут быть и гиперссылки непосредственно в тексте страниц, сделаем два вида оформления гиперссылок. Один вид
гиперссылки в тексте, а второй гиперссылки, находящиеся в блоке menu:
В файле index.html заменим команды <span class="menu"> на гиперссылки вида
<a href="p.html" class="menu">.
В результате получим сайт «Сермяжная правда» уже с гиперссылками.
Поводите мышкой по гиперссылкам и посмотрите, что получается.
А затем зайдите в раздел «Тоска объявлений» и посмотрите на гиперссылки в тексте.
Наверняка, на многих сайтах, публикующих большие объёмы текстовой информации, вы встречали ссылку на версию для печати.
Что же собой представляет «версия для печати»?
При распечатке сайтов, если вы пробовали это делать, распечатывается не только интересующая посетителя текстовая и
графическая информация, но и другие посторонние для данного случая элементы, такие как заголовок сайта, навигационное меню, баннеры и т.п.
В тех случаях, когда мы просто хотим распечатать материал с сайта, чтобы потом спокойно его почитать, отключившись от Интернета, навигация и прочие онлайновые вещи нам ни к чему. Поэтому и делают специальную версию для печати, которая представляет собой не что иное, как
исключительно текстовый материал сайта, и ничего лишнего.
Раньше для создания «версий для печати» приходилось буквально создавать отдельный HTML-документ, содержащий лишь основной текст
страницы. Использование таблиц стилей значительно упрощает эту ситуацию: мы можем создать отдельную таблицу стилей для вывода
документа на печать. В обычном экранном режиме будет работать основная таблица стилей, а при пропытке вывода документа на
печать будет подключаться другая.
Как это делается рассмотрим на примере всё того же сайта «Сермяжная правда». Очевидно, что при выводе на печать
нужно оставить только блок основного содержимого, т.е. блок text. Все остальные блоки печатать не нужно.
Как объяснить браузеру, что таблица стилей должна относиться к режиму вывода на печать?
Для этого в элементе <link> есть специальный атрибут media=, который указывает тип устройства вывода,
для которого создана таблица. Таким образом, можно написать отдельную таблицу стилей для печати и подключить её к документу
следующим образом:
<link rel=stylesheet href="sp-print-style.css" type="text/css" media="print">
Структура HTML-документа, который мы хотим распечатать:
Для того, чтобы получить хороший печатный документ, нам необходимы только название сайта
(указанное внутри команды <title>) и содержимое текстового блока.
Что же будет выаодиться на печать сейчас? Это можно узнать, воспользовавшись режимом предварительного просмотра (Print Preview)
в браузере. Как правило, он находится в пункте главного меню Файл. Легко убедиться, что на печать выводится всё, кроме
фонового изображения:
Как же «убрать» ненужные блоки? Для этого используется свойство display: none
блоки с таким свойством изымаются из потока элементов.
Соответственно, для блоков head и punkt в файле
sp-print-style.css необходимо написать правила:
Действительно, ни логотип, ни меню сайта больше на печать не выводятся. Но блок основного содержимого не заполняет всю
ширину листа расположен так же, как был представлен в окне браузера. Для того, чтобы блок main располагался
на всю ширину листа, необходимо это тоже указать:
А для блока text надо задать:
Всё! Больше в файле sp-print-style.css ничего не должно быть.
Теперь самое главное. Куда в HTML-документе поместить ссылку на файл sp-print-style.css,
ведь там уже есть ссылка на основную таблицу стилей sp-style.css.
Поскольку стили применяются по порядку следования, то, чтобы вариант «для печати» переопределил правила из основной
таблицы стилей, ссылку на файл sp-print-style.css нужно поместить после
основной таблицы стилей sp-style.css:
В результате получаем требуемое:
Контекстный селектор
<p>Текст абзаца с <b>очень важной</b> информацией</p>
<ul>
<li>Первый <b>пункт списка</b>.
<li>Второй <b>пункт списка</b>.
</ul>Практический пример применения стилей
<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Тоска объявлений</span></div>
A:link {color: navy} /* Гиперссылки в тексте */
A:active {color: white}
A:visited {color: gray}
A.menu:link {color: black; text-decoration: none} /* Гиперссылки в блоке menu */
A.menu:active {color: white; text-decoration: none}
A.menu:visited {color: #666666; text-decoration: none}
A.menu:hover {color: #CCCCCC}
И, разумеется, закрывающие теги </span>
на </a>.
Альтернативная таблица стилей
для вывода на печать
<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>
#head { display: none }
.punkt { display: none }
#main { width: 100% }
#text { width: 95%; margin-left: 0px }
<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>
Задание