Графические ссылки

В этом разделе мы продолжим наш разговор о ссылках.
Ссылками могут быть не только текстовые документы, но и картинки со ссылкой html. Принцип действия схожий с текстовыми ссылками. Картинка ссылка html также прописываются в тэгах <a>работа на дому</a>. Вы прописываете адрес страницы своего сайта или другого ресурса для картинки и при нажатии на неё попадаете на нужную страницу или сайт. В начале, как и в текстовых ссылках, мы прописываем адрес выбранного файла, на который будем ссылаться, а потом, вместо текста вставляем с помощью атрибута img src электронный адрес нашей картинки.

Вот как это всё выглядит в коде html:

<a href=»адрес страницы или другого сайта«><img src=»электронный адрес картинки «></a>

Сделаем ссылкой картинку, которая у нас уже есть на нашей
странице:

<a href=»http://rabotalegko.com«>
<img src=»
http://rabotalegko.com/fotik/foto-235.gif
» align=»left» hspace=»25″ vspace=»15″ border=»3″ bordercolor =»#CC0000″></a>

Вставим полученный код html на нашу страничку:

<html>
<head>
<title>Животный мир нашего края.</title>
</head>
<body text="#FF0033"  bgcolor="#66CC99" 
link="#FF3366" alink="#6666FF" vlink="#FF3366"
background="http://rabotalegko.com/fotik/foto-236.gif">
<div align="center">
<H1>Животные, обитающие в нашей области.</H1>
<H2><font color="#0000CC">Животные леса.</font></H2>
<br> 
<font color="#633000"> 
 <p align="justify"><font face="Garamond,  Arial, Verdana">
<a href="http://www.rabotalegko.com">
<img src="http://rabotalegko.com/fotik/foto-235.gif" 
align="left" hspace="25" vspace="15" border="3" 
bordercolor="#CC0000"></a>
Животный мир нашего края достаточно разнообразен и 
представлен беспозвоночными и позвоночными животными 
различных классов, отрядов и видов.</font></p>
 <p align="justify"><font face="Garamond,  Arial, Verdana">
На территории области учтено 54 вида млекопитающих. 
На территории области обитает 200-250 видов птиц; 163 вида 
из них гнездятся на территории области, восемь видов 
встречаются только в зимнее время, 60 - во время пролета 
и сезонных миграций; 16 видов птиц области занесены в 
Красные книги бывшего СССР и РСФСР.</font></p>
 <p align="justify"><font face="Garamond,  Arial, Verdana"> 
На территории области обитает 10 видов земноводных, 
шесть видов рептилий и около 3 500 видов насекомых 
(13 видов насекомых занесено в Красную книгу бывшего 
СССР и Красную книгу России).
<a href="http://www.rabotalegko.com"><font color="#000099">работа на дому</font></a>
В водоемах области обитает 38 видов рыб, из которых наиболее 
распространенными являются карп, сазан, лещ, карась, жерех и 
др. Самыми крупными рыбами водоемов области являются сом и щука.
</font></p> 
</font> 
</div> 
</body> 
</html>

посмотреть результат

Для того, чтобы ссылка у Вас открывалась в другом окне браузера, нам в тэге <a></a> необходимо прописать атрибут target=»_blank». <a href=»http://www.rabotalegko.com» target=»_blank»><img src=»http://rabotalegko.com/fotik/foto-235.gif» align=»left» hspace=»25″ vspace=»15″ border=»3″ bordercolor =»#CC0000″></a>

Также ссылки можно прописывать и внутри документа. Это в основном применяется для страниц с большим содержанием контекста. Текст разделяется на разделы, а верху размещаются ссылки на каждый раздел. Это очень удобно для посетителя данной страницы. Ему не придётся рыскать по всей странице в поисках нужной информации. Ему достаточно будет нажать на ссылку соответствующей тематики, которая ему нужна и сразу попадёт в нужное место на странице. Это сделать можно с помощью атрибута name.

Например у нас на странице три раздела. Для начала нам нужно прописать ссылку для того, чтобы переместиться на саму закладку в документе html: <a href=»#путь к закладке-1«>ссылка на раздел первый</a> <a href=»#путь к закладке-2«>ссылка на раздел второй</a> <a href=»#путь к закладке-3«>ссылка на раздел третий</a> Символ решетки # перед именем закладки html, на которую мы ссылаемся, обязателен. Теперь нужно к этим ссылкам создать закладки html: <a name=»путь к закладке-1«>раздел первый </a> <a name=»путь к закладке-2«>раздел второй</a> <a name=»путь к закладке-3«>раздел третий</a>

Пример кода html:

<html>
<head>
<title>Стихи о любви.</title>
</head>
<body text="#FF0033"  bgcolor="#66CC99" 
link="#FF3366" alink="#6666FF" vlink="#FF3366"
background="http://rabotalegko.com/fotik/foto-236.gif"> 
<a href="#stih1"><H3>раздел первый</H3></a>
<a href="#stih2"><H3>раздел второй</H3></a>
<a href="#stih3"><H3>раздел третий</H3></a>
<a name="stih1"><H3>Стих-1</H3></a>
<font color="#000033">
Бывают мгновенья,
когда не требуешь последних ласк,
а радостно сидеть,
обнявшись крепко,
крепко прижавшись друг к другу...
</font>
<a name="stih2"><H3>Стих-2</H3></a>
<font color="#000033">
Пора любви, пора стихов
Не одновременно приходят...
Зажжется стих — молчит любовь,
Придет любовь — стихи уходят...
</font>
<a name="stih3"><H3>Стих-3</H3></a>
<font color="#000033">
Быть нелюбимым! Боже мой!
Какое счастье быть несчастным!
Идти под дождиком домой
С лицом потерянным и красным...
</font>
</body>
</html>

посмотреть результат

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

Поделиться в соц. сетях

Графические ссылки
Графические ссылки
Графические ссылки
Графические ссылки
Графические ссылки
Графические ссылки

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика