"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка сайта
Примеры PHP
Графика
Оптимизация сайта
Полезное
Реклама на сайте:






HTML Ссылки


папка html

Урок №8

Ссылки (или гиперссылки) играют самую важную роль в HTML. В первую очередь именно благодаря им интернет получил столь быстрое развитие и популярность.
С помощью html тега <a> создаются ссылки на любом сайте, причем как внешние, так и внутренние.

Ссылка — это «адрес» документа или сайта в интернете.

Ссылки создаются при помощи тега <a>...</a>, он относится к уже хорошо известному вам типу — это обычный встроенный (уровня строки) элемент, который может содержать тоже только встроенные теги. Но, он не может содержать другие теги <a> , то есть нельзя одну ссылку располагать внутри другой.

Обязательным параметром у ссылки является только href="URL", т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки, который может состоять из слов, символов, картинки и прочих элементов.

Пример. Код Html ссылки:

<a href="http://webps.ru/">Перейти на сайт webps.ru</a>

html cсылки вебмастера на профессиональном языке называют гиперссылками.


Цвет ссылок

По умолчанию все ссылки на странице имеют синий цвет, посещенные ссылки имеют фиолетовый цвет, и активные ссылки (ссылка является активной при нажатии на нее кнопкой мыши) - красный.

Цвет ссылок можно менять, используя атрибуты link, vlink и alink тега <body> при этом изменится цвет всех ссылок на странице:

  • link - задает цвет не посещенных ссылок
  • vlink (visited link) - задает цвет посещенных ссылок
  • alink (active link) - задает цвет активных ссылок

Пример. Цвет ссылки:

<body link="red" alink="green" vlink="yellow">

А также можно менять цвет отдельных ссылок с помощью тега <font>

Пример. Фрагмент кода:

<p style="color: blue;">

Как это будет выглядеть на странице:

Синий цвет текста абзаца задан указанием имени цвета.



Атрибуты и свойства тега <a>

К открывающему тегу <a> можно прописывать различные атрибуты. Они отвечают за корректную работу ссылок.

Атрибут target="здесь параметр", который может принимать следующие значения.

Например:

  • _blank — открывает страницу в новом окне
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера
  • _rel — определяет отношения между текущим документом и документом

Пример с target_blank

Главная страница

Пример кода Html ссылки:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег А, атрибут target</title>
 </head>
 <body>
  <p><a href="new.html" target="_blank">Открыть в новом окне</a></p>
 </body>
</html>

Чаще всего применяется значение _blank, поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке.

Погружаясь в тему с ссылками хочется отметить ещё один важный момент с атрибутом rel где указан параметр nofollow.

Атрибут с параметром rel="nofollow" — определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин и браузерами он никак не трактуется и может принимать следующее значения. Что вес по ссылке не будет передаваться (робот не будет переходить по ссылке!)

Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому закрывайте все внешние ссылки атрибутом rel="nofollow", чтобы сохранить вес на Вашем сайте.


Всплывающая подсказка для ссылки

Еще одним полезным вспомогательным атрибутом для ссылок является title, он позволяет создать всплывающую подсказку для вашей ссылки. Такая подсказка дает пользователю дополнительную информацию о том, что его ждет под ссылкой. Подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время исчезает.

Как это будет выглядеть на странице:

Главная страница

Абсолютные и относительные ссылки

В зависимости от вида адреса, указанного в атрибуте href, ссылки могут быть абсолютными и относительными. Как правило, для связи HTML-документов внутри сайта, используются относительные ссылки, а для ссылок на другие ресурсы — абсолютные. Но в конечном итоге каждый выбирает сам.

Если, используя абсолютную адресацию, вы решите поменять домен, то вам придется переделывать все ссылки на вашем сайте. При относительной адресации этого делать не придется, при условии сохранения структуры папок.

Абсолютные ссылки — это ссылки, которые содержат полный адрес страницы: имя протокола (http), имя домена-сайта (webps.ru, www.webps.ru) и месторасположение самого файла или папки на сайте. Плюсы таких ссылок в том, что они работают везде, где бы их ни указали (любой сайт или компьютер).

Абсолютная ссылка будет выглядеть так:

<a href="http://webps.ru/pages/file.html">Текст ссылки</a>

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

Относительная будет такой:

<a href="/file.html">Текст ссылки</a>



  На этом уроке мы рассмотрели как создаются ссылки на другие страницы, а также на элементы внутри страницы, а также познакомились с абсолютными и относительными ссылкам. Следующий урок посвящён изображениям в HTML.

 



Создано: 29.02.2020.|Обновлено: 15.12.2022.