Главная / Html / Учебник по Html. Ступенька 15-ая. 

Учебник по Html для чайников. Простейшие.

Ступенька 15-ая.

Как я уже упоминала, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только в тэг <a></a> вставляется не текст, а картинка:

<a href="prf.html"><img src="primtocodephoto.gif"></a>

Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:

<a href="mailto:pochta@mail.ru"><img src="primtocodephoto.gif"></a>

Итак, сделаем ссылкой картинку primtocodephoto.gif на документ с фотографиями (prf.html):


     
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>Рейтинг@Mail.ruRambler's Top100
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
<a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href="prf.html">посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (посмотреть)


Теперь посмотрите в броузере, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке атрибут border="0" (о нем мы уже говорили с вами).

<img src="primtocodephoto.gif" align="left" hspace="30" vspace="5" alt="моя фотография" border="0">


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

Итак, вопрос первый: "Как задавать цвет рамки вокруг картинки?”

Цвет рамки вокруг картинки задается атрибутом bordercolor, например:

<img src="picture.gif" border="3" bordercolor="#CC0000">

В нашем примере я задала цвет рамки красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки.

Но, если ваша картинка будет ссылкой, то рамка вокруг нее будет того цвета, который мы задали для ссылок в тэге body с помощью link, vlink, alink, т.е. атрибут bordercolor в этом случае уже не влияет на цвет рамки вокруг картинки.


Вопрос второй: “Используют ли профессионалы рамки?”

Когда как, все зависит от ситуации. Может быть картинка, обрамленная рамкой, придаст аккуратности вашему сайту, и его оформление только выиграет от этого. А может быть наоборот - вам эти рамки совсем не нужны, т.к. портят внешний вид вашего сайта, тогда их можно убрать. "Думайте сами, решайте сами”, использовать рамки вокруг картинок или нет :)

Если вы думаете, что на этом ваше мучение с изучением ссылок закончилось, то напрасно:) - у нас впереди еще несколько замечательных ступенек.