2015-06-28
385
Теперь пора поговорить о ссылках. Наша страничка может состоять из
нескольких документов. Один из них главный (index.html или main.html) –
он открывается первым и должен обязательно лежать на вашем сайте в ин-
тернете. Остальные документы вы можете называть как угодно
(photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они
все могут лежать в одной директории (папке), а могут в разных.
Ссылкой на эти другие документы (части нашей странички) может
быть текст (фраза, слово), а может быть и картинка.
Созданиетекстовойссылки
Пусть в одной папке имеется два документа: главный документ
index.html и документ prf.html – документ с вашими фотографиями. В ос-
ом документе напишите фразу «посмотреть мои фотографии» и сде-
новн
лайте ее ссылкой на prf.html:
<a href=«prf.html»>посмотреть мои фотографии</a>.
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу
(текст). Принципы прописывания пути здесь такие же как в случае с кар-
тинками:
(1) – <a href=«prf.html»>мои фотографии</a>
(2) – <a href=«/photos/prf.html»>мои фотографии</a>
(3) – <a href=«http://www.homepage.ru/prf.html»>мои фотографии</a>
В случае (1) документ лежит в той же директории (папке), что и доку-
мент, в котором мы ссылаемся на prf.html,
в случае (2) документ лежит в поддиректории /photos,
в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нуж-
ный нам документ.
Примечание: цвет ссылки нужно прописывать, а иначе по умолчанию
он будет просто безобразным, поэтому вспомним об открывающем тэге
боди:
<body text=«#336699» bgcolor=«#000000» link=«#339999» alink=«#339999»
vlink=«#339999»>
link – цвет ссылки,
alink – цвет активной ссылки (нажатой),
vlink – цвет уже посещенной ссылки.
В нашем примере цвета одинаковые, но они могут быть разными
(ссылка же выделяется чертой). Итак, пропишем цвета для ссылки и саму
ссылку в нашем документе:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text=«#336699» bgcolor=«#000000» link= «#339999» alink= «#339999»
vlink= «#339999»>
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color=«#CC0000»> Добро пожаловать!</font>:) </center>
<p align=«justify»>
<img src=«primtocodephoto.gif» align=«left» HSPACE=30 VSPACE=5
alt=«моя фотография»>
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по
давней традиции тоже захотелось создать свою домашнюю страничку для
моих новых виртуальных друзей и знакомых, чтобы они могли <a
href= «prf.html»> посмотретьмоифотографии </a>, почитать обо мне,
черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто
случайный посетитель вдруг захочет познакомится со мной, и у меня поя-
вится <b> еще один виртуальный друг?:) </b><br><br> На фотографии
изображен(а) я. Качество картинки не очень хорошее, к сожалению, по-
этому она не четкая и разглядеть черты моего лица немного проблематич-
но. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже
думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в ка-
фешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html>
Ссылка на ваш почтовый ящик прописывается так:
<a href=«mailto:pochta@mail.ru»> pochta@mail.ru – пишите письма </a>.
Созданиеграфическойссылки
Принцип ссылки тот же, что и в случае с текстом, только между тэга-
ми вставляется не текст, а картинка:
<a href=«prf.html»> <img src=«primtocodephoto.gif» align=«left»
HSPACE=30 VSPACE=5 alt=«моя фотография»> </a>
Это мы введем в наш пример, сделав ссылкой на документ с фотогра-
фиями (prf.html) картинку pr1.png:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text=«#336699» bgcolor=«#000000» link=«#339999» alink=«#339999»
link=«#339999»>
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color=«#CC0000»> Добро пожаловать!</font>:) </center>
<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> Если ты так тоже думаешь, то
давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто
знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (прим.)
Теперь посмотрите в Explorer, что у нас получилось. Картинка
primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили,
то обратите внимание): вокруг картинки
и
рамочка. Эту рамочку
можно оставить, если вам она нравится, а можно убрать, если вы зададите
картинке параметр border=«0»
<img src=«primtocodephoto.gif» align=«left» HSPACE=30 VSPACE=5
alt=«моя фотография» border=«0»>
Линии
В последнее время я все реже и реже встречаю такой элемент, как ли-
нии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Ли-
ния задается тэгом <Hr> и не требует закрывающего тэга:
Вот такая она, в форме канавочки. У линии есть много разных параметров:
(1) <Hr align=«right»> (center или left)
(2) <Hr width=«30%»> (ширина линии в процентах/пикселях)
(3) <Hr size=«6»> (толщина линии)
(4) <Hr NoShade> (отмена объемности)
(5) <Hr color=«cc0000»> (цвет линии, только в IE)
