среда, 21 августа 2013 г.

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

Ссылки на веб-странице очень важная деталь, с помощью них можно указать путь на подробный или похожий материал, ссылаться на какой-либо источник, переносить посетителя на новую страницу или другой сайт и т.д. Ссылки бывают внешними и внутренними (по вашему сайту).
Ссылки в HTML-документе встречаются довольно часто, поэтому стоит с ними познакомится для повышения веб-навыков.
Создание ссылки в HTML-документе
Все ссылки на веб-странице задаются с помощью тега a, который обязательно должен быть закрыт в конце:
Новости - внутренняя ссылка
Из этой записи следует, что при клике на слово Новости, посетитель перейдет на страницу с новостями, которая предварительно должна быть создана.
Последние новости - здесь указана внешняя ссылка на источник новостей.
Также можно ссылаться на электронную почту, добавив mailto:
Написать
Привязка ссылки к изображению
Чтобы картинка стала ссылкой нужно поставить путь к изображению между тегами a:

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

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

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

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

0 коммент.:

Отправить комментарий