Ссылки

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию третий выпуск рассылки "Уроки веб-дизайна в примерах".

Содержание выпуска:

Ссылки (продолжение).
Фон.
Шрифт.
Анонс следующего выпуска.

Ссылки (продолжение).

Как определить цвет гипертекстовых ссылок по умолчанию? Это реализуется с помощью свойств тега <BODY>: LINK - цвет гипертекстовых ссылок, VLINK - цвет посещенных гипертекстовых ссылок, ALINK - цвет активных гипертекстовых ссылок. В приведенном ниже примере устанавливается синий цвет ссылок, зеленый цвет посещенных ссылок и красный цвет активных ссылок.

Пример 1.

Код	Отображение
<BODY LINK=blue VLINK=green ALINK=red> <A HREF="http://design.wmplace.net" TARGET="_blank">Ссылка</A> </BODY>	Ссылка

Как сделать подсвечивающиеся ссылки (т.е. чтоб при наведении курсора мыши ссылка меняла свой цвет)? Без каскадных таблиц стилей здесь не обойтись. Приведенный ниже пример задает свойство всем ссылкам на странице: "изменять цвет на малиновый при наведении курсора мыши на ссылку".

Пример 2.

Код	Отображение
<STYLE> a:hover {color: magenta;} </STYLE>	Ссылка

Код этого примера должен быть размещен внутри элемента <HEAD>. Цвет ссылки при наведении курсора мыши определяется значением color.

Ссылка на e-mail адрес имеет вид <A HREF="mailto:design@wmplace.net">. При переходе по этой ссылке открывается форма отправки письма почтовой программы. После e-mail адреса можно указать дополнительную информацию. Как это сделать продемонстрируем на примере:

Пример 3.

Код	Отображение
<A HREF="mailto:design@wmplace.net?subject=Предложение&body=А что если, ..." title="Почтовая ссылка">Написать письмо</A>	Написать письмо

Для указания дополнительной информации ставим знак вопроса (?) после e-mail адреса. Тема письма задается в поле subject, тело письма в поле body. Поля отделяются друг от друга знаком амперсанд (&). Символы   ни что иное, как символ пробела. Также можно использовать дополнительные поля сс - копии письма и bcc - скрытые копии письма (e-mail адреса в этих полях разделяются запятыми).

Последний пример использования ссылок - создание закладки на странице. Закладка создается в виде <A NAME="link_name"></A> (link_name - имя закладки). Переход на эту закладку осуществляется гиперссылкой вида <A HREF="document_name#link_name">Перейти</A> (document_name - название страницы с закладкой link_name). В приведенном ниже примере гиперссылка ссылается на начало текущего документа.

Пример 4.

Код	Отображение
<A HREF="#a_top">наверх</A>	наверх

Так как переход осуществляется на закладку в текущем документе, то имя документа было опущено.

Фон.

Цвет фона по умолчанию можно задать с помощью свойства BGCOLOR тега <BODY> как в символьном виде, так и через значение RBG палитры.

Пример 5.

Код	Как будет выглядеть
<BODY BGCOLOR=yellow> Содержимое страницы </BODY>	Содержимое страницы

Фоновое изображение по умолчанию можно задать с помощью свойства BACKGROUND тега <BODY>.

Пример 6.

Код	Как будет выглядеть
<BODY BACKGROUND="name"> Содержимое страницы </BODY>	Содержимое страницы

Для того, чтобы попробовать этот пример достаточно поместить графический файл в ту же директорию, что и страница и заменить name на имя графического файла. Например, если картинка называется bg.gif, то первая строчка для кода в примере будет <BODY BACKGROUND="bg.gif">.

Шрифт

Использование различных шрифтов реализуется свойством FACE тега <FONT>. Значением этого свойства являются названия шрифта. Рассмотрим пример.

Пример 7.

Код	Как будет выглядеть
<FONT FACE="Times New Roman">Times New Roman</FONT> <FONT FACE="Courier">Courier</FONT> <FONT FACE="Comic Sans MS">Comic Sans MS</FONT>	Times New Roman Courier Comic Sans MS

Анонс следующего выпуска.

Как реализуются таблицы. Позиционирование таблицами.

Благодарю за внимание! сайт: http://design.wmplace.net

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").