br 8eb34


search

Ссылки в HTML-документе

linksСсылки на веб-странице очень важная деталь, с помощью них можно указать путь на подробный или похожий материал, ссылаться на какой-либо источник, переносить посетителя на новую страницу или другой сайт и т.д. Ссылки бывают внешними и внутренними (по вашему сайту).

Ссылки в HTML-документе встречаются довольно часто, поэтому стоит с ними познакомится для повышения веб-навыков.

Создание ссылки в HTML-документе

Все ссылки на веб-странице задаются с помощью тега a, который обязательно должен быть закрыт в конце:

<a href="/news.html">Новости</a> - внутренняя ссылка

Из этой записи следует, что при клике на слово Новости, посетитель перейдет на страницу с новостями, которая предварительно должна быть создана.

<a href="http://site.ru/last_news">Последние новости</a> - здесь указана внешняя ссылка на источник новостей.

Также можно ссылаться на электронную почту, добавив mailto:

<a href="mailto:name@ mail.ru">Написать</a>

Привязка ссылки к изображению

Чтобы картинка стала ссылкой нужно поставить путь к изображению между тегами a:

<a href="/news.html"><img src="/images/pict.jpg"></a>

Можно назначить, чтобы уменьшенная картинка при нажатии открывалась в увеличенном виде, для этого нужно указать путь к увеличенной картинке:

<a href="/images/pictbig.jpg"><img src="/images/pict.jpg"></a>

В этом случае картинка откроется в этом же окне, для открытия в новом нужно указать в теге a атрибут со значением - target="_blank".

Изменение внешнего вида ссылок

Стандартные цвета ссылок можно изменить на любые другие цвета, для этого потребуются атрибуты - link (цвет ссылки), alink (цвет ссылки при наведении), vlink (цвет посещенной ссылки). Эти атрибуты могут быть перечислены в контейнере body:

<body link="#993300" alink="#000000" vlink="#CCCCCC">

При наведении на ссылку можно указать подсказку:

<a href="/news.html" title="новости дня">Новости</a>

Также изменить цвет ссылки при наведении и активировании можно с помощью псевдоклассов, описанных в файле CSS.

Создание якоря

Якорь не является ссылкой в чистом виде. Он обычно устанавливается в начале текста и служит закладкой для быстрого перехода к заданному месту на странице. Чтобы создать якорь нужно к искомому слову или предложению присвоить уникальный id, а в начале текста создать ссылку, указывав id и знак # перед ним:

<a href="#якорь">новость</a>
... какой-то текст...
<div id="якорь">содержание новости</div>

В результате в начале текста, пользователь при клике на "новость" попадет сразу к нужному содержанию в глубине статьи. Применение якорей удобно для навигации по длинному тексту.

В следующей статье будут описаны дополнительные элементы HTML, предназначенные для украшения и регулирования контента.

Комментарии  

#2 Administrator 20.05.2012 12:54
укаЦитирую нкитос можно хуанито:
:-* это а как сделать ссылку на картинку которая находится в другой папке

указать путь на эту папки и на картинку (например, pictures/image. jpg)
#1 нкитос можно хуанито 18.05.2012 21:37
:-* это а как сделать ссылку на картинку которая находится в другой папке

Добавить комментарий

Защитный код
Обновить

Комментарии