HTML-ссылки

HTML-ссылки — наиболее распространённые HTML-теги, с которыми мы взаимодействуем на веб-странице. В HTML ссылки определяются с помощью тега-якоря <a> . Атрибут href используется для указания местоположения новой веб-страницы.

Пример

Ниже приведен простой пример, в котором ссылка ведет на новую веб-страницу.

индекс .html 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <a href="https://htmlformatter.github.io">htmlformatter.github.io</a>
  
</body>
</html>

В приведенном выше примере значение href , то есть https://htmlformatter.github.io — это местоположение веб-страницы, на которую мы перейдём(URL), если нажмём на ссылку. htmlformatter.github.io — это якорный текст, который отображается как ссылка на веб-странице.

Открыть HTML-ссылку в новой вкладке

При нажатии на ссылку новый URL загружается на ту же страницу. Если вы хотите открыть ссылку на новой веб-странице, используйте атрибут target, как показано ниже.

пример.html 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
  <a href="https://htmlformatter.github.io" target="_blank">htmlformatter.github.io</a>
  
</body>
</html>

target="_blank" сообщает браузеру о необходимости загрузить URL-адрес в новой вкладке.

CSS по умолчанию для HTML-ссылки – тег привязки

Ниже приведен CSS по умолчанию для элемента HTML <a>. 

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

color: -webkit-link Обычно цвет HTML <a> — синий.

cursor:pointer отображает указатель при наведении мыши на ссылку.

text-decoration:underline рисует подчеркивание для текста ссылки.

Оформите HTML-ссылку <a> так, чтобы она выглядела как кнопка

Вы можете оформить HTML-ссылку так, чтобы она выглядела как кнопка или, скажем, поле.

пример.html 

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      background: green;
      color: white;
      text-decoration:none;
      padding:10px;
    }
  </style>
</head>
<body>
 
  <a href="https://htmlformatter.github.io">htmlformatter.github.io</a>
  
</body>
</html>

Заключение

В этом уроке по HTML мы изучили тег в HTML.