Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:
URL (унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).
TARGET
Oпределяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения: _top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет). _blank - загружает гиперссылку в новом окне браузера. _self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать). _parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
TITLE
Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.
Графический файл в роли ссылки
Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем (традиционно - *.gif, *.jpg.). Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):
Чтобы создать ссылку на e-mail, нужно в качестве URL’a прописать следующее: mailto:адрес электронной почты Например: <a href="mailto:lenin@zeos.net">Мое мыло</a>
Почтовая гиперссылка имеет несколько параметров (не обязательных): ?subject - Тема пиcьма &Body - Текст вашего сообщения &cc - Копии письма через запятую &bcc - Скрытые копии письма через запятую
title="Выпадающая подсказка" Ставиться по желанию и распологаеться отдельно от параметров почтовой ссылки (смотрите расположение кавычек на примере ниже).
<a href="mailto:lenin@zeos.net ?subject=Поздравление &Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net" title="Пример почтовой гиперссылки">Мое мыло</a>
Щелкнув на такую ссылку, откроется окно почтовой программы пользователя с уже заполненными полями. Останется только написать письмо и отправить.
Закладки
Как сделать ссылку на определенное место в том же, или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Для этого используют закладки.
Ссылка на закладку в том же документе имеет следующий вид: <a href="#Имя закладки">Название раздела</a>
А так выглядит ссылка на закладку в другом документе: <a href="Имя документа#Имя закладки">Название раздела</a>
Сама закладка будет такой: <A NAME="Имя закладки"></a>
Щелкнув на Название раздела, пользователь будет попадать на определенную Вами закладку.
Ссылки и цвет
Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в тег <BODY> нужно добавить еще несколько параметров.
text - цвет текста. link - цвет ссылки. vlink - цвет пройденной ссылки. alink - цвет активной ссылки, когда подводиться к ней курсор.
Данные атрибуты определяют свойства для всего документа. Поместив такой код в HTML страницу, уже не надо будет назначать каждый раз цвет шрифту, т.к. везде он будет таким, каким определен в теге <BODY>.
CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Также можно сохранить описание стиля не в тексте странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.
Описания стилей находятся в тегах <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>. Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом:
Описываем стили под именем Example : <STYLE><!-- .Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;} --></STYLE>
Здесь вызываем описания стилей : <div class="Example"> Пример </div>
Если Вы располагаете стили в отдельном файле, тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:
Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указывается теги <STYLE></STYLE>. Например:
У нас есть файл Example.css, содержащий такие параметры (подчеркиваем ссылки только при наведении на них курсором): <!-- A { text-decoration: none; } A:hover { color: #FF0000; text-decoration: underline; } -->
Ссылка на него в HTML документе будет выглядеть так: <LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Вы можете определить стиль для любого тега отдельно. Для этого нужно в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.
<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Пример </H3>
В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.
Свойства шрифта:
font-family
Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. Пример: P {font-family: Verdana, sans-serif;}
font-weight
Определяет степень жирности шрифта с помощью трех параметров: lighter (обычный), bold (жирный), bolder (очень жирный) Пример: B {font-weight: bolder;}
font-size
Устанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах. Примеры использования для тегов H1, H2, H3: H1 {font-size: 200%;} H2 {font-size: 150px;} H3 {font-size: 400pt;}
Свойства текста:
text-decoration
Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста Пример использования для тега Н4: H4 {text-decoration: underline;} (подчеркивание) H4 {text-decoration: line-through;} (зачеркивание)
text-align
Определяет выравнивание элемента. Пример: P {text-align: left} (выравнивание по левому краю) P {text-align: right} (выравнивание по правому краю) P {text-align: justify} (выравнивание по ширине) P {text-align: center} (выравнивание по центру)
text-indent
Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. Пример использования для тега H1: H1 {text-indent: 60pt;}
line-height
Управляет интервалами между строками текста. Пример: P {line-height: 50 %}
Цвет элемента и фона:
color
Определяет цвет элемента I {color: yellow;} Пример использования для тега H3: H3 {color: #0000FF;}
background-color
Устанавливает цвет фона для элемента. Пример использования для тега H3:
<H3 style=”background-color:gold; color:brown;”> Пример </H3>
Пример
Устанавливают значения отступов вокруг элемента. Пример использования для рисунка: IMG { margin-left: 20pt} IMG { margin-right: 20pt} IMG { margin-top: 20pt} IMG { margin-bottom: 20pt}
