СсылкиДумаю, Вам уже понятно о чём пойдет речь в этой главе.. и Вы знаете, что из себя представляет ссылка, если нет, то нажмите сюда..Существует несколько видов ссылок, а так же "механизмов" перехода по ним. В этой главе постараюсь подробно рассказать о том как прописать ссылки, а так же посвятить в тонкости дела по работе с ними. Лирическое отступление: Так вот, к чему я это, чтобы браузер, как я тогда, не впал в ступор, ему необходимо знать: точное название документа, путь к документу, и место куда его принести, точнее где его открыть. На данный момент с помощью блокнота мы создали только один HTML документ у меня он с именем index.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> - А это значит, что файл primer.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>. |
