Ссылка в виде картинки
Пятница, 13 августа 2010 г.Рубрика: Уроки HTML -> Ссылки
Метки: картинка ссылкой
Просмотров: 940
Подписаться на комментарии по RSS
Как мы уже упоминали, ссылкой может быть и картинка. Принцип ссылки
тот же, что и в случае с текстом, только в тэг <a></a>
вставляется не текст, а картинка:
<a href="prf.html"><img src="primtocodephoto.gif"></a>
Если Вы хотите сделать картинку ссылкой на Ваш почтовый ящик, то принцип
тот же:
<a href="mailto:pochta@mail.ru"><img src="myimg2.jpg"></a>
Итак, сделаем ссылкой картинку myimg.jpg на документ с фотографиями
(prf.html):
<html> <head> <title>Мой первый сайт</title> </head> <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <div align="center"> <H3><b><font color="#336699">Это мой сайт</font></b></H3> <br> <font color="#CC0000"><font color="#cc0000">Добро пожаловать!</font></font></div> <p align="justify"> <a href = "prf.html"><img src="myimg.jpg" align="left" HSPACE=30 VSPACE=5 alt="моя картинка"></a><b><font color="#336699">Я не так давно начал изучать html, но вскором будущем я хочу создать свой личный сайт, на котором каждому было бы хорошо проводить своё свободное время, на моём сайте могли бы размещаться <a href = "prf.html">мои картинки</a>, музыка и видео, я также бы мог бы рассказать своим друзьям о том, что я сам создал свой личный сайт, потом бы я к своему сайту создал бы форум, на котором посетители могли бы оставлять сови мнения и замечания по сайту, да и не только - они бы могли общяться на разные темы на моём форуме.</font></b> </p> </body> </html>
Теперь посмотрите в броузере, что у нас получилось. Картинка myimg.jpg
стала ссылкой. Если Вы заметили (а если не заметили, то обратите
внимание): вокруг картинки появилась рамка. Эту рамку можно оставить,
если Вам она нравится, а можно убрать, если Вы зададите картинке атрибут
border="0" (о нем мы уже говорили с вами).
<img src="myimg.jpg" align="left" hspace="30" vspace="5" alt="моя фотография" border="0">
В заключение к уроку мы решили разместить небольшой faq по этой теме:
Вопрос первый: "Как задавать цвет рамки вокруг картинки?"
Ответ: "Цвет рамки вокруг картинки задается атрибутом bordercolor,
например:
<img src="picture.gif" border="3" bordercolor="#CC0000">"
Вопрос второй: "Используют ли профессионалы рамки?"
Ответ: "Когда как, все зависит от ситуации. Может быть картинка,
обрамленная рамкой, придаст аккуратности вашему сайту, и его оформление
только выиграет от этого. А может быть наоборот - вам эти рамки совсем
не нужны, т.к. портят внешний вид Вашего сайта, тогда их можно убрать.
"Думайте сами, решайте сами", использовать рамки вокруг картинок или
нет!"
Пояснение к уроку: "В нашем примере мы задали цвет рамки красным, ну, и,
естественно, что атрибут border (толщина рамки) не должен равняться
нулю, если Вы хотите видеть рамку вокруг картинки.
Но, если Ваша картинка будет ссылкой, то рамка вокруг нее будет того
цвета, который мы задали для ссылок в тэге body с помощью link, vlink,
alink, т.е. атрибут bordercolor в этом случае уже не влияет на цвет
рамки вокруг картинки."
Отлично! Здесь есть вся информация, необходимая новичку для создания собственного сайта. Все подробно описано на "человеческом" языке. Пояснения просты и понятны даже чайнику вроде меня. Отдельное СПАСИБО админу - профессионал в своем деле, да и просто хороший человек.