| English version | Другие серверы Moneky | Поиск> |
Создание web-страницы
Основы языка HTML
Что такое гиперссылка?
Гиперссылка - это выделенные цветом слова или словосочетания, которые можно найти в любом HTML документе. Стоит щёлкнуть на ней мышкой, и Вы перейдёте на другую страницу, расположенную на локальном сервере, или открываете сайт, который может находится где угодно - в соседнем здании или на другой стороне земного шара.
Как создать гиперссылку?
Гиперрсылки в HTML-документах создаются с помощью тега "А". Подобно другим тегам этот должен начинатся с символа "<" и заканчиваться символом ">". Ниже приведён пример гиперссылки:
<A href="HTML-документ.html">Текст Вашей ссылки</A>
Давайте теперь рассмотрим что означают этот код и как он работает. Атрибут "HREF" обозначает, что эта надпись ссылается на какой-либо документ или файл. А слово "HTML-документ" это уже название самого документа, на который ведёт ссылка. При чём нужно заметить очень важный момент, что после названия файла обязательно пишется его расширение. В данном моменте ссылка ведёт на такой же HTML-документ и поэтому расширение называетя ".html". И документ, на который указывает ссылка должен находится в том же каталоге. А если документ находится в другом каталоге, тогда придётся исать его полный адрес, например, C:\ Windows\ Рабочий стол\ Мои документы\ HTML-документ.html. Слово "Текст Вашей ссылки" показывает, то, что будет видеть пользователь. А "</A>" это ни что иное как закрывающий тег. |
 |
Текст ссылки отделяется от обычного текста (обычно он подчёркнут) и при наведении курсор мыши обычно становится ввиде указательного пальца. Если Вы хотите, чтобы Ваша ссылка выделялась при наведении мыши, нужно добавить следующий код сразу после тега <TITLE>, где a:link это цвет обычной ссылки, a:visited - цвет уже посещённой ссылки, а a:hover - это цвет активной ссылки, то есть ссылка, на которую наведён курсор. Подробнее о том, как изменять цвета написано на странице про тег <FONT>
<STYLE>
<!-- a:link {color:#3366cc;}
a:visited {color:#3366cc;}
a:hover {color:#ff3300;} -->
</STYLE>
В данном примере мозут возникнуть проблемы из-за того, что ссылка ведёт внекуда. Дело в том, что документна который указывает ссылка ещё не создан. На рисунке показано, как будет выглядеть Ваша ссылка в окне броузера. Она может немного отличатся в зависимости от того какой у Вас броузер. В данном случае использовался один из самых известных в мире броузеров - Netscape 6.
А как сделать ссылку, чтобы она не была подчёркнута подобно таким, как на этом сайте? Нужно лишь вписать небольшой HTML-код слазу после названия документа на который она ссылается - style="text-decoration:none"
<A href="HTML-документ.html" style="text-decoration:none">Текст Вашей ссылки</A>
Ссылка на фрагмент документа
Возможно для Вам захочется создавать ссылки на какой-то отдельный фрагмент HTML-документа. Язык HTML позволяет это сделать довольно легко. Нужно лишь создать метку в документе и ссылку на него. Метка создаётся при помощи добавления атрибута NAME="имя метки". А дя создания ссылки на фрагмент доумента используется обычный тег ссылки, только после названия документа ещё стравится имя мектки. Имя метки и название документа разделяются Знаком "#". Приемущество такой ссылки заключается в том, что можно создавать ссылки как на фрагмент в другом документе, так и ссылку на фрагмент того же дкумента.
<a name="фрагмент документа">Это метка фрагмента документа</A>
<a href="название документа#фрагмент документа"> ато ссылка на фрагмент документа</A>
Какие ещё бывают сылки?
Помимо традиционных ссылок, которые начинают работать при нажатии на них мышью, на языке HTML можно создать ссылки, которые начинают работать при наведении мышью, либо сразу после открытия HTML-документа.
<A href="file:///C:/WINDOWS/??????? ????/????? ?????/ Doesn'tmatter" onmouseover = "parent.location='http://www.moneky.nm.ru'" target=_blank> Поппробуйте создать такую ссылку. </A>
В результате получится ссылка, чтобы перейти по которой нужно только навести на неё мышью.
<BODY onload="window.open('http://www.moneky.nm.ru','_blank', 'status=0')">
А добавив этот код вместо тега <BODY>, при открытии страници сразу откроется новое окно броузера, в котором будет отоброжаться первая страница этого сайта.
Ссылки ввиде рисунков
Наверняка Вам захочется создавать ссылки не только ввиде надписей или слов, но и ввиде рисунка, щёлкнув по котрому Вы перейдёте на нужный документ. Код ссылки ввиде рисунка почти ни чем не отличается от екстовой ссылки. Нужно лишь ещё добавить небольшой фрагмент. Ниже приведён пример такой ссылки:
<p><a href="http://www.moneky.nm.ru"><img src="адрес рисунка" border="0" width="177" height="92"></a></p>
Давайте теперь подробнее рассмотрим код. Border это определение граней рисунка. То есть если Border="1" , тогда рисунок будет обводиться синей линиее. Чем больше эта цифра, тем толще линия обводки. И наоборот, если указан 0, тогда этой линии не будет вообще. WIDTH и HEIGHT это ширина и высота, указанная в пикселах.
