Знакомимся, тег <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 - цвет посещенной ссылки.
Продолжая говорить о цвете текстовой ссылки стоит упомянуть, что при необходимости можно принудительно выделять цветом как всю ссылку, так и отдельные её части (фразы слова буквы) знакомым тегом <font> </font> и его атрибутом color. Впрочем, это касается не только цвета так же отдельно можно задать размер, стиль и шрифт текста. Но помните, что манипуляции с цветом нужно проводить внутри тега <a>вот здесь</a> а не за бортом, иначе цвет ссылки будет либо по умолчанию, либо так как прописано в теге <body>
Ссылкой может являться не только текст, но и рисунок.. Здесь принцип такой же как и в текстовой ссылке, просто вместо текста мы заключаем рисунок который хотим сделать ссылкой.
Вот так:
<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>.
