Делаем ссылку с помощью HTML
Обязательные атрибуты тега
К обязательным атрибутам стоит отнести href (адрес ссылки). Адрес ссылки может быть как абсолютным (например, “http://nubex.ru”), так и относительным (к, примеру, “/we/”). Относительный путь указывается относительно главной страницы (чтобы сослаться на главную страницу сайта, используйте “/”).
Между открывающим тегом <a> и закрывающим </a> пишется текст, который будет выводиться в виде гиперссылки (такой текст еще называют анкором или якорем). В качестве анкора может выступать не только текст, но и картинка.
Таким образом, самая простая ссылка в тексте HTML Nubex будет выглядеть так:
<a href="http://nubex.ru">Nubex</a>
Необязательные атрибуты тега
К основным необязательным атрибутам гиперссылок относятся:
- title — служит для добавления всплывающей подсказки к ссылке;
- name — используется для определения якоря внутри страницы;
- target — указывает браузеру, куда загружать документ;
- accesskey — дает возможность активации ссылки с помощью определенных горячих клавиш.
Рассмотрим более актуальный способ, как сделать ссылку на страницу в HTML с использованием основных атрибутов:
<a title="Конструктор сайтов Нубекс" accesskey="n" name="nubex" href="http://nubex.ru" target="_blank"> Нубекс</a>
Теперь посмотрим на нашу ссылку: Нубекс
Текст, указанный в атрибуте title будет всплывать при наведении курсора на ссылку. Атрибут target=»_blank» означает, что ссылка будет открываться в новом окне. accesskey=»n» позволяет активировать ссылку комбинацией клавиш (для Google Chrome – это Alt+N), где n — это указанная в теге клавиша. Чтобы определить, как работает тег name, рассмотрим его более подробно.
Атрибут name
Атрибут name используется для определения якоря внутри страницы. Это означает, что можно ссылаться на определенные области внутри одной страницы. Рассмотрим на примере:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Как сделать ссылку на сайт в HTML</title> </head> <body> <p><a name="nubex"></a></p> <p>Большое-большое полотно текста.
Прокрути вниз и нажми «Вверх».</p>
<p><a href="#nubex">Вверх</a></p>
</body>
</html>
В конструкторе сайтов «Нубекс» есть удобный механизм для вставки ссылок при редактировании ссылки. Для более подробной информации читайте статью Как сделать ссылку.
Как создать HTML кнопку, которая действует как ссылка
Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.
Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.
- к HTML <button> тегу внутри элемента HTML <form>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<button>Click Here</button>
</body>
</html>Попробуйте сами!
Этот пример может не работать, если кнопка находится внутри тега <form>.
- к <input> тегу внутри элемента HTML <form>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<form>
<input type="button" value="w3docs"/>
</form>
</body>
</html>Попробуйте сами!
Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.
- атрибут action
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<form action="https://www.w3docs.com/">
<button type="submit">Click me</button>
</form>
</body>
</html>Попробуйте сами!
Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank».
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<form action="https://www.w3docs.com/" method="get" target="_blank">
<button type="submit">Click me</button>
</form>
</body>
</html>Попробуйте сами!
Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.
- б. атрибут HTML5 formaction.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<form>
<button type="submit" formaction="https://www.w3docs.com">Click me</button>
</form>
</body>
</html> Попробуйте сами!
Атрибут formaction используется только для кнопок с type=”submit”.
Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.button {
background-color: #FF4500;
border: none;
color: white;
padding: 20px 34px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<a href="https://www.w3docs.com/">Click Here</a>
</body>
</html>Попробуйте сами!
Так как требуется сложное стилевое оформление, этот метод может не работать в некоторых браузерах.
Цвета ссылок HTML
❮ Предыдущая Далее ❯
HTML-ссылка отображается другим цветом в зависимости от
был ли он посещен, не посещен или активен.
Цвета ссылок HTML
По умолчанию ссылка выглядит следующим образом (во всех браузерах):
- Непосещенная ссылка подчеркнута и окрашена в синий цвет
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
- Активная ссылка подчеркнута и окрашена в красный цвет
Вы можете изменить цвета состояния ссылки с помощью CSS:
Пример
Здесь непросмотренная ссылка будет зеленой без подчеркивания. Посещенная ссылка будет розовым без подчеркивания. Активная ссылка будет выделена желтым цветом и подчеркнута. Кроме того, при наведении мыши на ссылку (a:hover) она станет красной и подчеркнутой: <стиль>
a:link {
цвет: зеленый;
background-color: прозрачный;
украшение текста: нет;
}
a:посетили {
цвет: розовый;
background-color: прозрачный;
текстовое оформление: нет;
}
a:hover {
цвет: красный;
background-color: прозрачный;
text-decoration: подчеркивание;
}
a:active {
цвет: желтый;
background-color: прозрачный;
оформление текста: подчеркивание;
}
Попробуйте сами »
Кнопки ссылок
Ссылку также можно оформить как кнопку с помощью CSS:
Пример