Портал для веб-мастера

Инструменты для Бизнеса

Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » HTML

Ссылка - дело не хитрое

Вообще что такое ссылка - это, без чего не обходится не один сайт. В этой статье будет рассказано о многих возможностях ссылок. Естественно во многих учебниках уже было всё растолковано по частям, но следует всё разобрать воедино и кратко рассказать о каждом эффекте. Ну начнём....

Вообще ссылка представляет собой вид <a href="ваш_путь"> Имя сайта </a>, но сколько можно с этим сотворить ? Ответ: Много!
Многие видели, что при наведении на ссылку иногда может вылезти подсказка к этой ссылке, всё делается по средствам тега title

Пример: <a href="http://www.wmaster.ru" title="классный сайт"> Сайт для веб мастеров</a>.

Так получается вот такая ссылка : Сайт для веб мастеров

Ну а если вы поставили ссылку на графический объект, то тут поможет тег "alt". Всё нужно проделывать также, но за место "title" вводить "alt".

<a href="http://www.woweb.ru"><img border="0" src="http://www.woweb.ru/img.gif" alt="Ваш текст"></a>

Обратите внимание на то, что описание "title" мы писали в теге <a>, в то время как описание "alt" необходимо писать в теге <img>

Для того, чтобы ссылка меняла свой цвет при наведении на неё мышкой, нам удобно применить CSS (Cascading Style Sheets), или по нашему "Каскадные таблицы Стилей". Статьи про CSS вы можете прочитать здесь. Чтобы образовался такой эффект мы должны на страничке прописать так :

<style> A:hover {COLOR: #Ваш цвет}</style>

Иногда дизайн не позволяет "держать на сайте" подчёркнутые сслыки. Для того, чтобы ссылки были не подчёркнуты, нужно на страничке прописать:

<style>a {text-decoration : none} </style>

Но можно сделать и так, чтобы ссылка была не подчёркнута, но при наведении курсора она подчёркивалась. Для этого пропишите так :

<style>a{text-decoration: none} a:hover {text-decoration: underline}</style>

Более полный вариант управления ссылками на странице:

<style>
A:link { text-decoration: underline; color:black; }
A:active { text-decoration: underline; color:black; }
A:visited { text-decoration: underline; color:black; }
A:hover { text-decoration: none; color:black; }
</style>

Описанные стили рекомендуется вставлять между тегами <HEAD></HEAD>

Вроде самые главные эффекты с использованием CSS я описал. Теперь можно разобрать ещё один вид ссылок - это якорь, внутренняя ссылка на какую-либо часть страницы. Якорь ставится так:

<a href="#link">Текст</a>

а на то место, куда должна привести ссылка ставится :

<a name="link">Text</a>

Также ссылка может вести просто наверх. Это нужно для тех, кто строит большие страницы. Чтобы ссылка вела на самое начало страницы, нужно прописать так : 

<a href='javascript:scroll(0,0);'>Top/Вверх</a>

Ну вот. Самое главное про ссылки я рассказал.

Автор: Бочкарёв Антон · Добавлена: 2003-01-19
Источник статьи · Просмотров: 11054 · Рейтинг: 4.7

Всего комментариев: 3
[3] razmik kalendjan(razmik96) 2011-03-08, 6:10 PM
я тоже

[2] Viktor(kolobok111) 2010-07-19, 8:15 PM
Отличная информация. Очень вовремя подкатила.

[1] мунир тагарифуллин(munir) 2010-06-18, 2:41 PM
клёво а я это не знал)))

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Есть ли у вас свой сайт?
Всего ответов: 141619
Наша кнопка
WoWeb.ru - портал для веб-мастера