Ссылки на веб-странице очень важная деталь, с помощью них можно указать путь на подробный или похожий материал, ссылаться на какой-либо источник, переносить посетителя на новую страницу или другой сайт и т.д. Ссылки бывают внешними и внутренними (по вашему сайту).
Ссылки в 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 и знак # перед ним:
В результате в начале текста, пользователь при клике на "новость" попадет сразу к нужному содержанию в глубине статьи. Применение якорей удобно для навигации по длинному тексту.
В следующей статье будут описаны дополнительные элементы HTML, предназначенные для украшения и регулирования контента.
Комментарии
указать путь на эту папки и на картинку (например, pictures/image. jpg)