Текстовые ссылки.

Знакомимся, тег < 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=" https://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>.