HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

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

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

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

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

<a href="/mailto:Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра."><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>
<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 в этом случае уже не влияет на цвет рамки вокруг картинки. 


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

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

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

HTML шаблоны сайтов

Реклама:

Скачать бесплатно HTML шаблоны сайта с нами легко!

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

Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.

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

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.

HTML шаблоны