Домашняя страница Дениса Минича - HTML - это просто

HTML - это просто

Глава 5. Ссылки

На данный момент мы создали уже две странички, одна - "Главная" - другая -"Мой фотоальбом". Настал момент связать их, сделать возможным посетителю попадать с одной страницы на другую.

Заглавная страничка, на которую посетитель попадает первоначально, набрав адрес сайта, должна называться index.html или main.html, обязательно присутствовать на сайте и лежать в его корне. Если на вашем сайте не будет такого документа, то посетитель, набрав в адресной строке site.ru, ничего не увидит, кроме сообщения браузера о том, что он не может открыть этот адрес. Конечно, он может выйти на страничку glavnaya.html набрав site.ru/glavnaya.html, но зачем заставлять его запоминать кроме названия сайта еще и название главной странички? Словом, главную страницу принято называть index.html или main.html и помещать ее в корень сайта. Остальные страницы вы вольны называть как угодно и размещать их по различным папкам (в конце концов это придется сделать, так как число файлов будет быстро расти, станет трудно разбираться в них, находить нужный и придется как-то сгруппировать их).

Еще одно очень важное замечание: файлы, выкладываемые в сеть можно называть только использую латинские буквы и цифры. И это не единственное ограничение - имя файлов не должно содержать пробелов, если возникла потребность как то разделить имя файла, пользуйтесь символом "_" (например my_photos.html).

Давайте создадим теперь заглавную страничку и назовем ее index.html. После этого составим страничку с фотографиями и назовем ее photoalbum.html. Теперь надо их связать.

Для задания ссылки используется тег <a></a>. Текст, помещенный в него становится ссылкой. Ссылаться можно на что угодно: на страничку, картинку, архив, и т.д. Объект ссылки указывается в параметре тега href="". Например, чтобы сослаться с главной странички на страницу с фотографиями, надо вставить в код главной страницы такой текст:

<a href="photoalbum.html">Мои фотографии</a>

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

<a href="photoalbum.html">Мои фотографии</a> - ссылка на документ, находящийся в той же папке, что и ссылающийся,
<a href="photos/photoalbum.html">Мои фотографии</a> - во вложенной папке photos,
<a href="../photoalbum.html">Мои фотографии</a> - уровнем выше,
<a href="http://www.other.ru/photoalbum.html">Мои фотографии</a> - на другом ресурсе.

Ссылка, указываемая относительно настоящего местоположения, называется относительной (примеры 1-3), указывающая полный адрес - абсолютной (последний пример).

Свяжем теперь наш фотоальбом и главную страницу (фотоальбом - файл example_5_2.html, главная - файл example_5_1.html):

<html> <head> <title>Главная страница</title> </head> <body bgcolor="#CCFFFF"> <h3 align="center">ПРИВЕТ!</h3> <p>Я уже готов к тому, чтобы создавать не только странички по отдельности, но и верстать целый сайт. Отсюда вы можете попасть на страничку, где сможете посмотреть <a href="example_5_2.html">мои фотографии</a>. Пока только туда и обратно, но это ведь только начало...</p> <p>Потом появится больше страничек, все они будут связаны и красивы.</p> </body> </html>

<html> <head> <title>Мой фотоальбом</title> </head> <body bgcolor="#CCFFFF"> <h3 align="center">ПРИВЕТ!</h3> <p align="center">А вот и мои фотографии :)</p> <p align="center"><img border="0" src="images/photo_5.jpg" width="200" height="179" alt="Это Элвис Пресли"><br> <img border="0" src="images/photo_6.jpg" vspace="10" width="200" height="156" alt="Это вкусные веселые конфеты"><br> <img border="0" src="images/photo_1.jpg" alt="Вот это прическа!" width="200" height="161"><br> <img border="0" src="images/photo_3.jpg" width="200" height="133" vspace="10" alt="Мне нравится аниме"><br> <img border="0" src="images/photo_4.jpg" alt="Секретные материалы" width="200" height="143"></p> <p> <a href="example_5_1.html">На главную</a></p> </body> </html>

По умолчанию цвет ссылки синий, а цвет уже посещенной - красноватый. Можно изменить эти цвета прописав в теге body дополнительные параметры link - цвет ссылки, vlink - цвет просмотренной ссылки и alink - цвет активной (нажатой) ссылки:

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

Кроме того, у ссылки есть параметр target, который указывает браузеру, как открывать ссылку:

<a href="page.html" target="_self"></a> - откроет ссылку в том же окне (используется по умолчанию),

<a href="page.html" target="_blank"></a> - откроет ссылку в новом окне (именно так я ссылаюсь на примеры к учебнику).

Ссылка на почтовый ящик оформляется так:

<a href="mailto:pochta@narod.ru">письма пишите сюда</a>, где pocta@narod.ru - адрес вашего почтового ящика. Щелкнув по этой ссылке, пользователь сможет написать вам письмо в открывшемся почтовике. Кроме того, есть еще очень удобные дополнительные параметры ссылки на почтовый ящик:

?subject=Тема пиcьма
&Body=Текст вашего сообщения
&cc=copy@narod.ru,copy2@narod.ru (копии письма через запятую)
&bcc=hidden_copy@narod.ru,hidden_copy2@narod.ru (скрытые копии письма через запятую)

Указывая эти параметры в ссылке, вы облегчаете пользователю жизнь, так как вместе с адресом получателя они позволяют получить уже готовую тему сообщения и даже текст. Щелкните, например, по этой ссылке на почтовый ящик, и вы увидите действие ссылки <a href="mailto:pochta@narod.ru?subject=Привет!&Body=Поздравляю с начинанием!&cc=copy@narod.ru&bcc=hidden_copy@narod.ru">. Удобно, не так ли? Но на практике пользуются в основном параметром ?subject.

Плюс ко всему вышеперечисленному, документ может ссылаться на самого себя. Это часто выручает, когда страница достаточно велика (не влезает в окно браузера), облегчая навигацию по странице. Чтобы этого добиться, надо вставить в нужных местах страницы закладки вида <a name="имя_закладки"></a>. Например, я наверху страницы разместил закладку <a name="top"></a>, а внизу - <a name="bootom"></a>. Теперь, чтобы попасть в верх страницы, не надо долго и утомительно крутить колесико, достаточно лишь щелкнуть по ссылке вверх. Или вниз. Ссылка оформляется схожим образом, только вместо имени файла указывается имя закладки: <a href="#top">вверх</a> или <a href="#bottom">вниз</a>. Ссылаться на закладку можно и с другой страницы, тогда перед именем закладки следует указать имя документа, ее содержащего: <a href="page.html#bottom">вниз</a>.

Наравне с текстом "носителем" ссылки может служить рисунок. Для этого в тег ссылки надо заключить указание на рисунок:

Теперь щелчок по указанной картинке приведет вас на определенную в ссылке страницу:

<html> <head> <title>Главная страница</title> </head> <body bgcolor="#CCFFFF"> <h3 align="center">ПРИВЕТ!</h3> <p><a href="example_5_2.html"><img src="images/photo_5.jpg" hspace="10" width="100" height="89" align="left" alt="Мои фотографии"></a>Я уже готов к тому, чтобы создавать не только странички по отдельности, но и верстать целый сайт. Отсюда вы можете попасть на страничку, где сможете посмотреть <a href="example_5_2.html"> мои фотографии</a>. Пока только туда и обратно, но это ведь только начало...</p> <p>Потом появится больше страничек, все они будут связаны и красивы.</p> </body> </html>

Обратная ссылка не работает, ведь с нового документа мы ссылаемся но страничку, которая главной "считает" предыдущий вариант главной страницы.

Обратите внимание: вокруг картинки появилась рамочка, указывающая на то, что картинка эта является ссылкой. Хотите - оставьте ее, хотите - уберите. Для того, чтобы избавиться от рамочки, надо указать в теге картинки параметр border="0", который задает ширину рамки (в пикселях) вокруг картинки. Здесь он задает ширину равную нулю, то есть отсутствие рамки.

<html> <head> <title>Главная страница</title> </head> <body bgcolor="#CCFFFF" link="#000000" vlink="#000000" alink="#000000"> <h3 align="center">ПРИВЕТ!</h3> <p><a href="example_5_5.html"><img src="images/photo_5.jpg" hspace="10" width="100" height="89" align="left" alt="Мои фотографии" border="0"></a>Я уже готов к тому, чтобы создавать не только странички по отдельности, но и верстать целый сайт. Отсюда вы можете попасть на страничку, где сможете посмотреть <a href="example_5_2.html"> мои фотографии</a>. Пока только туда и обратно, но это ведь только начало...</p> <p>Потом появится больше страничек, все они будут связаны и красивы.</p> </body> </html>

Кроме того, что мы убрали рамку у картинки-ссылки, мы еще и переоформили цветовое оформление ссылок на странице.

На одной картинке можно расположить не одну, о две ссылки. Например, щелкнув по красной части рисунка, вы попадете наверх, по зеленой - вниз. Это делается с использованием карты ссылок. Поверхность картинки размечается на участки и каждому из них указывается определенная ссылка. На этой картинке две прямоугольные области. Разберемся как это делается. Для этого используется тег карты map. Тег этот контейнерный и оформляется так: <map name="имя_карты">..</map>. А уже внутри тега расписываются непосредственно области. Рассмотрим этот тег как раз на примере этой картинки. Карта для нее указана так:

Внутри тега карты содержится один или несколько тегов area, в теле которого указывается ссылка (параметр href), форма области (shape) и координаты области (coords). Если подробно "перевести" содержимое тега на русский язык, то получится: карта с именем Map, содержит две области, первая из них ссылается на закладку top, имеет прямоугольную форму и задана координатами 1,1,50,50, вторая область ссылается на закладку bottom, также имеет прямоугольную форму и координаты 51,1,100,50. Все очень просто. Потом в тег img картинки вставляем ссылку на карту с помощью параметра usemap и получаем две ссылки на одной картинке:

(Другие параметры я не написал, так как речь сейчас не о них). Вот и вся технология. Единственная сложность - координаты. Остановимся на них. Для прямоугольной области координаты задаются так: координата верхнего левого угла и координата правого нижнего угла области. Координаты отсчитываются от верхнего левого угла картинки, размерность составляет один пиксель. Сначала указывается координата X, потом, через запятую, координата Y верхнего левого угла области, потом, опять через запятую, координаты X и Y нижнего левого угла картинки. Если разобрать пример, то получается, что верхний левый угол области находится в левом верхнем углу картинки, а правый нижний отстоит от верхнего левого угла картинки на 50 пикселей вправо и 50 пикселей вниз.

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

<area href="#top" shape="circle" coords="50, 25, 20"> - окружность радиусом 20 пикселей с центром в точке 50,25.

<area href="#top" shape="poly" coords="1, 1, 50, 25, 25,50"> - треугольник, первая вершина находится в левом верхнем углу, вторая - в центре картинки, третья - внизу, посередине красной области. (Вместо poly можно писать polygon)

Давайте оформим на картинке с конфетами ссылки - щелкнув по телу зеленой конфеты, мы попадем на ее фото, по телу красной - на ее.

<html> <head> <title>Конфеты</title> </head> <body bgcolor="#CCFFFF" link="#000000" vlink="#000000" alink="#000000"> <p align="justify"><map name="Map"><area href="images/yellow_m.jpg" shape="polygon" coords="44, 25, 59, 28, 73, 47, 82, 72, 72, 95, 51, 101, 29, 91, 24, 59, 31, 37"><area href="images/red_m.jpg" shape="circle" coords="152, 69, 32"></map><img border="0" src="images/photo_6.jpg" alt="Это вкусные веселые конфеты" align="left" hspace="10" usemap="#Map" width="200" height="156">Вот с этой самой картинкой мы и учимся работать. Ссылку на фотографию желтой конфеты оформим в виде многоугольника, на красную - окружностью. Не надо стараться точно попадать в границы, достаточно примерного совпадения контуров, ведь не экзамен по алгебре мы здесь сдаем ; )</p> </body> </html>

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

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

Еще у тега ссылки есть параметр title, вроде тега названия. Занесенная в него информация высвечивается, если задержать курсор над ссылкой. Если вы заметили, то при наведении курсора на левую часть моего красно-зеленого прямоугольника высвечивается подсказка "вверх", на левую - "вниз". Для этого параметр title вставляется в тег ссылки: <a title="вверх" href="#top">. Такая подсказка может быть как у текстовой ссылки, так и у графической.

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

Начало | Содержание | Словарь

Глава 4. Графика в HTML | Глава 6. Таблицы