Учебник по Html для начинающих. Простейшее.
Делаем картинку ссылкой.
Сейчас мы объединим то, о чем уже говорилось.
Принцип ссылки тот же, что и в случае с текстом, только в контейнер <a></a> вставляется не текст, а картинка тег <img src="Ваша.картинка">:
<a href="prf.html"><img src="primtocodephoto.gif"></a>
Если вы хотите сделать картинку ссылкой на ваш почтовый ящик, то принцип тот же:
<a href="mailto:pochta@mail.ru"><img src="primtocodephoto.gif"></a>
Итак, сделаем ссылкой картинку resaltphoto.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>
<font color="#CC0000"> Добро пожаловать!</font> :) </div>
<p align="justify">
<a href="prf.html"><img src="resaltphoto.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> (посмотретьрезультат)
Теперь посмотрите в браузере, что у нас получилось. Картинка resaltphoto.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 в этом случае уже не влияет на цвет рамки вокруг картинки.
<<< Страница 13 :Назад | Далее: Страница 15 >>>
