Ну а теперь поработаем с ссылками. Наша страничка может состоять из нескольких документов. Они все могут лежать в одной директории (папке), а могут в разных.
При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на другой сайт, и т.д.
Ссылкой на эти другие документы может быть текст, фраза, слово, даже картинка, а если быть точнее, все выше перечисленное это анкер для ссылки.
Для начала создадим новый документ (в нашем примере: primer.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа не имеет значения, но желательно написать слово «обратно» это слово будет анкером для ссылки на главную страницу.
На главной странице, ссылкой мы сделаем слова «жми сюда» и выглядит это так:
<a href=»/primer.html»>жми сюда</a>
Тэг <a> </a> делает ссылкой заключенную в него картинку, фразу, текст или букву. Принципы прописывания пути вы уже знаете.
код страницы «index.html»
| <html> <head> <title>Моя первая страница</title> </head> <body> <div align=»center»> Получилось!!! <br/> Это моя первая страница.<br/> <font color=»red»> Привет!!! </font><br/> <a href=»/primer.html»>жми сюда</a><br/> <img src=»image/coloboc3.png»> </div> </body> </html> |
код страницы «primer.html»
| <html> <head> <title>Моя первая ссылка</title> </head> <body> <div align=»center»> <a href=»index.html»>обратно</a><br/> </div> </body> </html> |
посмотреть
Для всех ссылок в нашем документе мы можем прописать цвета:
vlink — цвет ссылки,
alink — цвет активной ссылки (нажатой),
link — цвет уже посещенной ссылки.
Как и цвет для всего документа, цвета ссылок мы прописываем в <body>:
<body vlink=»green» link=»gold» alink=»red«>
| <html> <head> <title>Моя первая ссылка</title> </head> <body vlink=»green» link=»gold» alink=»red»> <div align=»center»> <a href=»#»>Знак «#» просто перезагружает страницу</a><br/> </div> </body> </html> |
По умолчанию все страницы, по которым вы переходите, открываются в текущем окне, но при помощи атрибута «TARGET=»_blank»» для тэга </a> вы можете сделать так, чтобы загружаемая страница открывалась в новом окне (вкладке) браузера. Пример:
<a href=»/primer.html» TARGET=»_blank»>жми сюда</a>
Мы можем задать различные цвета для разных блоков текста в нашем документе <font color=»…»> </font>. Для текстовых ссылок вы тоже можете задать разный цвет – это делается при помощи тэга <font> и его атрибута «color»:
<a href=»#»><font color=»red»>Анкер</font></a>
Обратите внимание, <font color=»…»> </font> — прописывается внутри тэга <a> </a>, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
Ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только в тэг <a> </a> вставляется не текст, а картинка:
<a href=»/primer.html»> <img src=»img/coloboc3.png»> </a>
