Рассмотрим как работают ссылки в HTML. Если вы уже успели изучить основы HTML, то вы знаете что HTML расшифровывается как язык гипертекстовой разметки. Важную роль в языке играют гиперссылки (гипертекстовые ссылки), или просто ссылки.
Ссылки создаются с помощью тега <a>. Ссылки бывают четырех видов:
- Ссылки на подключаемые ресурсы, (это ссылки, в которых не используется тег <a>) например тег <link>.
- Ссылки на web-страницы (абсолютные и относительные).
- Внутренние ссылки (якоря).
- Ссылки для скачивания.
Так же рассмотрим текстовые ссылки и ссылки-изображения. Ссылки на электронную почту и телефон. Как сделать кнопку-ссылку и как убрать подчеркивание ссылки.
Как сделать ссылку в HTML
Ссылка состоит из трех основных и четвертой (необязательной) частей.
- Тега ссылки
<a>. - Адреса ссылки
href. - Анкора.
- Дополнительных атрибутов.
<a href="адрес_ссылки" атрибуты>Анкор</a>
Стиль ссылки по умолчанию:
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
Атрибуты элемента <a>
| Атрибут | Описание | Возможные значения |
|---|---|---|
href |
Целевой адрес ссылки. | URL. |
target |
Окно в котором должна открыться ссылка. |
|
download |
Указывает, что цель должна быть загружена, то есть скачана. | Нет. |
rel |
Связь между страницей ссылки и целевым назначением ссылки. |
|
hreflang |
Язык цели ссылки. Его следует использовать только тогда, когда также используется href |
Код языка, например ru (Русский) или en (Английский). |
type |
Тип MIME связанного ресурса. | Текст. |
HTML ссылки по видам
Ссылки на подключаемые ресурсы уже рассматривались ранее в материале «Основы HTML«. Эти ссылки создаются с помощью тегов <link> и <style>. Их задача — подключение внешних файлов.
Ссылки на web-страницы
Абсолютные
Абсолютные ссылки это такие ссылки в которых прописывается полный путь на ссылаемый документ. Например, сошлемся на Яндекс.
<a href="https://yandex.ru/" target="_blank">Яндекс</a>
Результат.
Не забываем, что атрибут target="_blank" говорит нам о том. что ссылка откроется в новом окне.
Относительные
Относительные ссылки это ссылки в которых прописывается относительный адрес на ссылаемый документ (относительно текущего домена). Например, в моем случае внутренней будет считаться ссылка вида:
<a href="/html-tekst/">Текст в HTML</a>
То есть, все что после / относиться к текущему домену abuzov.com. Если перевести эту ссылку в абсолютную, то она примет следующий вид.
<a href="https://abuzov.com/html-tekst/">Текст в HTML</a>
При этом результат на моем сайте будет одинаков — вы попадете на страницу «Текст в HTML».
Внутренние ссылки
Внутренние ссылки это ссылки внутри текущей веб-страницы. Они используются быстрого доступа к фрагменту текста на странице. Еще их называют якорями. Обычно содержание web-страницы оформляется в виде якорей.
Для создания якоря используется идентификатор id. Адрес ссылки на идентификатор начинается со знака #.
Пример.
<ul> <li><a href="#chast1">Часть 1</a></li> <li><a href="#chast2">Часть 2</a></li> <li><a href="#chast3">Часть 3</a></li> </ul> <h2 id="chast1">Часть 1</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <h2 id="chast2">Часть 2</h2> uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <h2 id="chast3">Часть 3</h2> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
После клика по такой ссылке пользователь будет попадать в соответствующую часть HTML-документа.
Ссылки для скачивания
Что бы скачать какой-либо файл к ссылке добавляется атрибут download. Если этот атрибут отсутствует файл будет открываться (или пытаться открываться) в браузере. Например.
<a href="/file/html/html-1.html" target="_blank">Файл с примером откроется в браузере</a><br> <a href="/file/html/html-1.html" download>Файл с примером будет скачан</a>
Результат.
Ссылки-изображения
Ссылки-изображения отличаются от текстовых ссылок тем, что вместо текстового анкора (о нем я писал в начале) используется изображение.
Изображение вставляется с помощью тега <img> о котором я расскажу в следующем материале из серии самоучитель HTML.
Пример.
<a href="https://ru.wikipedia.org/wiki/HTML" target="_blank"><img src="/img/html-logo-wiki.png"></a>
Результат.
Об относительных путях
Вы уже второй раз сталкиваетесь с относительным путем. Давайте проясним ситуацию.
На рисунке я привожу простую структуру папок и файлов. таких папок и файлов может быть очень много, десятки, сотни, тысячи. Относительные пути позволяют сократить указание пути к файлу.
Обычно / — обозначает все, что идет после домена, то есть в моем случае abuzov.com = /.
Что бы задать путь текущей папки, то есть папки в которой находится документ, перед / ставиться ..
Для того, что бы подняться на одну папку вверх по дереву, например из папки html к папке file добавляют одну точку.
Итак:
/— корневая папка, домен сайта../— текущая папка, в которой находится файл.../— папка на уровень выше в дереве.
Ссылка на электронную почту, телефон и скайп
Ссылка на электронную почту — это такая ссылка при клике на которую у вас откроется почтовый клиент (установленный по умолчанию) и будет создано пустое письмо на указанный адрес электронной почты.
Пример.
<a href="mailto:name@mail.ru">name@mail.ru</a>
Результат.
- Позвонить пользователю — call.
- Начать чат с пользователем- chat.
- Добавить пользователя в контакты — add.
- Отправить пользователю файл — sendfile.
Пример (name это логин пользователя в скайпе).
<a href="skype:name?call">Skype</a> <a href="skype:name?chat">Skype</a> <a href="skype:name?add">Skype</a> <a href="skype:name?sendfile">Skype</a>
Результат.
Кнопка-ссылка
Давайте разберемся, как сделать кнопку-ссылку. Тут нужно задействовать элементы формы. Как создаются и работают формы вы можете узнать на этом сайте. Итак, следующий код создает кнопку которая является ссылкой.
<form action="https://yandex.ru/">
<input type="submit" value="Перейти на Яндекс" />
</form>
Результат.
В атрибуте action нужно ввести адрес ссылке. В атрибуте value нужно ввести текст кнопки.
Как убрать подчеркивание ссылки в HTML
Одним HTML тут не обойтись. Необходимо использовать CSS.
В начале статьи я приводил стиль элемента <a> по умолчанию, напомню:
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
Так вот, свойствоtext-decoration: underline; (в переводе с англ.: оформление текста: подчеркивание) подчеркивает ссылку. С помощью CSS нужно убрать его.
Пример.
<style>
a {text-decoration:none;}
</style>
<a href="https://abuzov.com/">Ссылка без подчеркивания</a>
Результат.
Итак, в этом материале мы научились создавать ссылки в HTML.
