Глава 5
Ссылки
Думаю, Вам уже понятно о чём пойдет речь в этой
главе.. и Вы знаете, что из себя представляет ссылка.
Существует несколько видов ссылок, а так же "механизмов" перехода по
ним. В этой главе постараюсь подробно рассказать о том как прописать ссылки, а
так же посвятить в тонкости дела по работе с ними.
Лирическое отступление:
Как-то в армии подходит ко мне начальник штаба и отдаёт приказ, цитирую:
Принеси мне вот тот документ, правда я не знаю где он и какой!! Что стоишь?
Бегом давай!! Опаздываю я!!!
Так вот, к чему я это, чтобы браузер, как я
тогда, не впал в ступор, ему необходимо знать: точное название документа, путь
к документу, и место куда его принести, точнее где его открыть.
На данный момент с помощью блокнота мы создали
только один HTML документ у меня он с именем index.html (зачем выбрал такое
странное название index.html и зачем оно нужно смотрите в полезных советах) у
Вас не знаю с каким, Вы сами имя придумывали, но думаю, Вы его помните и знаете
где он лежит, если конечно Вы не мой начальник штаба :).. В этом документе мы
попробуем создать ссылку на другой документ, которого у нас еще нет.. Так что
прежде чем на него ссылаться, его нужно создать, благо Вы это уже умеете.
1.
Открываем блокнот.
2.
Пишем код на html языке. к примеру страничку с рядом
фотографий.
3.
Сохраняем его как html страничку в ту же рабочею папку,
где уже есть созданный нами первый документ. Давайте, что б не путаться назовем
его primer.html, да и первый тоже, пожалуй, переименуйте в index.html
Теперь я знаю, что у Вас два html документа
index.html и primer.html и что теперь у Вас есть минимальный набор для
дальнейшего обучения.
Текстовые ссылки.
Знакомимся, тег <a> (от anchor- якорь), в него можно заключить
текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут
тега <a> href
задаёт имя и путь к документу на который указывает ссылка.
Всё вместе пишется так:
<a href="primer.html">Здесь мои фотки!!</a>
Как Вы наверное поняли primer.html это имя нашего
второго html документа, а надпись "Здесь мои фотки!!" это кусочек
текста из файла index.html.
По аналогии с рисунками тег <img>
путь ссылки к открываемому документу прописывается теми же способами:
<a href="
stranica/primer.html">Здесь мои фотки!!</a> -
Такая запись подразумевает, что в директории, где расположен наш первый html
документ есть папка stranica в которой расположен файл primer.html
<a
href="../primer.html">Здесь мои фотки!!</a>
- А это значит, что файл myfoto.html размещен на уровень выше от документа
<a
href="http://www.site.ru/primer.html">Здесь мои фотки!!</a>
- документ расположен на сайте www.site.ru..
Ну что давайте попробуем? Ниже приведен пример
сразу двух документов в которых прописаны ссылки указывающие друг на друга.
Пример:
Файл index.html:
<html>
<head>
<title>Делаем ссылкой кусочек текста</title>
</head>
<body>
<div align="center">
<br><br><br><b>Скажи мне, милый ребёнок: в каком
ухе у меня жужжит?</b>
<br><br><br>
В <a href="primer.html">правом</a> или <a
href="primer.html">левом</a>?
</div>
</body>
</html>
Файл primer.html:
<html>
<head>
<title>Перешли по ссылке сюда</title>
</head>
<body>
<br><br><br><br>
<div align="center"><font size="+2">А
вот и не угадал! У меня жужжит в обоих ухах.</font></div>
<br><br><br>
<div align="center"><a href="
index.html">Ну я так не играю...</a></div>
</body>
</html>
Из примера видно, что ссылки выделяются цветом,
по умолчанию синеньким - ссылка, а красненьким - уже посещенная ссылка, эти
цвета можно изменить с помощью уже хорошо известного нам открывающего тега < body > и его атрибутов.
link
- цвет ссылки.
alink - цвет нажатой,
активной ссылки.
vlink - цвет
посещенной ссылки.
Пишется так:
<body
link="#008000" alink="# ff0000 " vlink="# ffff00">
Продолжая говорить о цвете текстовой ссылки стоит
упомянуть, что при необходимости можно принудительно выделять цветом как всю
ссылку, так и отдельные её части (фразы слова буквы) знакомым тегом <font> </font> и его
атрибутом color.
Впрочем, это касается не только цвета так же отдельно можно задать размер,
стиль и шрифт текста. Но помните, что манипуляции с цветом нужно проводить
внутри тега <a>вот
здесь</a> а не за бортом, иначе цвет ссылки будет либо
по умолчанию, либо так как прописано в теге <body>
Пример:
Файл index.html:
<html>
<head>
<title>Радуга</title>
</head>
<body
link="#008000" alink="# ff0000 " vlink="#
ffff00">
<center>
<h3>Посмотрите на фразу которая поможет Вам запомнить места цветов
в радуге</h3>
<br>
<a href="primer2.html">
<font size="+1" color=#ff0000>Р</font>
<font size="+2" color=#ff8c40>А</font>
<font size="+3" color=#ffff00>Д</font>
<font size="+3"
color=#008000>У</font>
<font size="+2" color=#0000ff>Г</font>
<font size="+1" color=#800080>А</font>
</a>
</center>
</body>
</html>
Файл primer.html:
<html>
<head>
<title>Радуга</title>
</head>
<body
link="#008000" alink="# ff0000 " vlink="#
ffff00">
<center>
<font size="+3">
<font color=#ff0000>Каждый</font>
<font color=#ff8c40>охотник</font>
<font color=#ffff00>желает</font>
<font
color=#008000>знать</font>
<font color=#40caff>где</font>
<font color=#0000ff>сидит</font>
<font color=#800080>фазан</font>
</font>
<br><br><br>
<a href="index.html">вернуться на главную</a>
</center>
</body>
</html>
Такие вот дела…
Рисунок ссылка.
Ссылкой может являться не только текст, но и
рисунок.. Здесь принцип такой же как и в текстовой ссылке, просто вместо текста
мы заключаем рисунок который хотим сделать ссылкой.
Вот так:
<a href="primer3.html"><img
src="knopa.gif"></a>
Перед тем как привести очередной пример расскажу
про то, как при переходе по ссылке открыть документ в новом окне браузера, до
этого если Вы обратили внимание он у нас открывался в текущем, что не всегда
удобно. Решает эту проблему атрибут target
(цель) и его значение _blank.
Пишется так:
<a href="primer3.html"
target="_blank">открыть в новом окне</a>
Пример:
Файл index.html:
<html>
<head>
<title>кнопка</title>
</head>
<body>
<center>
<h1> Не в коем случае не нажимайте
на эту кнопку!!!</h1>
<br>
<a href="primer3.html" title="Не нажимать!!!" target="_blank"><img
src="graphics/knopa.gif" border="0" alt="Не нажимать!!!" ></a>
</center>
</body>
</html>
Файл primer.html:
<html>
<head>
<title>итог..</title>
</head>
<body>
<div
align="center"><font size="+3">Ракеты ушли... Америки больше нет...</font></div>
</body>
</html>
Я надеюсь, Вы не додумались нажать большую
красную кнопку? Ох уж этот русский менталитет.. :)
Что ещё можно почерпнуть из этого примера?
Во-первых. Мы применили уже знакомые атрибуты
описания title="Не
нажимать!!!" для тега <a> и одновременно alt="Не нажимать!!!" для
тега <img> если
Вы помните, эти атрибуты позволяют сделать нам всплывающие подсказки. Но зачем
я их продублировал? Один для ссылки, а другой для рисунка, если сам по себе
рисунок является ссылкой?.. долгая история, когда ни будь напишу статью:
"Спецификации HTML, браузеры и головная боль.." - а сейчас скажу лишь
то, что разные браузеры не всегда воспринимают те или иные теги и их атрибуты.
А описание для ссылки картинки нам просто таки необходимо! Помните, я
рассказывал, что есть люди, умышленно отключающие загрузку рисунков?- это для
них.
Во-вторых. В примере использован атрибут тега <img> border="0" -
рамка рисунка. 0 - это значит выключить рамку, так как она портит весь вид
страницы в данном примере, но бывают случаи когда рамки рисунка вполне
актуальны и так сказать вписываются в страницу. Здесь нужно помнить, что когда
рисунок является ссылкой, его рамка окрашивается в цвета ссылки: link - цвет ссылки, alink - цвет нажатой, активной
ссылки, vlink - цвет
посещенной ссылки тега <body>.
Ссылка на e-mail
Я тут Вас чуть-чуть с толку сбил, вроде бы договаривались
вместе писать полноценный сайт, а я тут какие то мелкие примерчики выкладываю..
Не волнуйтесь! В конце главы покажу готовый сайт про Карлсона целиком. А сейчас
думаю так будет удобнее Вам читать, и мне писать.. : Да и подразумеваю что Вы
уже самостоятельно можете вставлять теги в нужные места.
Напишите мне письмо.. - строчка из того примера..
Для того что бы сделать текст или рисунок ссылкой
на e-mail - почтовый ящик его нужно заключить в тег <a>, но не простой, а с
использованием mailto
Пишем так:
<a href="mailto:karlson@kruha.ru"> Напишите мне
письмо.. </a>
Эта непривычная запись будет говорить что,
кликнув по тексту ссылке "Напишите мне письмо.." посетитель сайта
попадет в свою почтовую программу, которая выдаст ему бланк для отправки
письма, где в строчке Кому: уже будет указан нужный нам почтовый ящик
karlson@kruha.ru
Пример:
<html>
<head>
<title>e-mail</title>
</head>
<body>
<center><h2>
<a
href="mailto:karlson@kruha.ru"> Напишите мне письмо.. </a>
</h2></center>
</body>
</html>
Помимо этого в почтовом бланке можно заранее
прописать следующие вещи:
?subject=
- Тема пиcьма
&Body= - Текст
сообщения
&cc= maluh@kruha.ru,maluh2@kruha.ru - Копии
письма
&bcc= freken_bok@kruha.ru,freken_bok2@kruha.ru
- Скрытые копии письма
Адреса ящиков для копий и скрытых копий письма
пишутся через запятую.
Пример:
<html>
<head>
<title>e-mail</title>
</head>
<body>
<center><h2>
<a
href="mailto:karlson@kruha.ru?subject=А у вас молоко убежало.. &Body=Текст письма &cc=maluh@kruha.ru &bcc=freken_bok@kruha.ru>Напишите мне письмо.. </a>
</h2></center>
</body>
</html>
Закладки.
Закладки или якоря - это особый вид ссылок.
Данные ссылки, как правило, не ведут к какому либо документу, а предназначены
для навигации внутри страницы.
Предположим на странице в удобном месте находится
некое содержание или меню.. по принципу:
Глава1
Глава2
Глава3
А далее идет большой текст с этими главами, так
вот чтобы посетитель страницы нажав на одну из этих глав "перенёсся"
в нужное место текста нам нужно сделать две вещи:
Присвоить индивидуальное имя каждой главе. Ищем,
значит, в большом-большом тексте нужные главы и делаем их адресами ссылок
закладок, присваиваем им имена.
Вот так:
<а
name="glava1">Глава1 </а>
<а name="glava2">Глава2
</а>
<а
name="glava3">Глава3 </а>
Имя можно присвоить любое необязательно glava1
А теперь собственно прописываем на них ссылки в
нашем меню, содержании.
Вот так:
<a href="#glava1"> Глава1</a>
<a href="#glava2"> Глава3</a>
<a href="#glava3"> Глава3</a>
Замете перед каждым именем ставим знак решётки
#.
Ладно, думаю, на примере будет понятнее:
<html>
<head>
<title>Закладки</title>
</head>
<body>
<h2>А. С. ПУШКИН</h2>
<a href="#skazka1">Сказка о попе и работнике его
Балде</a><br>
<a href="#skazka2">Сказка о рыбаке и рыбке</a><br>
<a href="#skazka3">Сказка о царе Cалтане</a>
<h3><a name="skazka1">Сказка о попе и
работнике его Балде</a></h3>
<pre>
Жил-был поп,
Толоконный лоб.
... ... ...
</pre>
<h3><a name="skazka2">Сказка о рыбаке и
рыбке</a></h3>
<pre>
Жил старик со своею старухой
У самого синего моря.
... ... ...
</pre>
<h3><a name="skazka3">Сказка о царе Cалтане</a></h3>
<pre>
Три девицы под окном
Пряли поздно вечерком.
... ... ...
</pre>
</body>
</html>