Html rel link: Атрибут rel | htmlbook.ru

Leave a Comment / Html / By /

Тег атрибут rel — Учебник HTML

❮ HTML тег <link>

Пример

Внешняя таблица стилей:

<link rel=»stylesheet» href=»styles.css»>

Попробуйте сами »

Определение и использование

Обязательный атрибут rel определяет связь между текущим документом и связанным документом/ресурсом.

Поддержка браузеров

Атрибут
relДаДаДаДаДа

Синтаксис

<link rel=»value«>

Значение атрибутов

ЗначениеОписание
alternateПредоставляет ссылку на альтернативную версию документа (например, печатную страницу, переведенную или зеркальную).
Пример: <link rel=»alternate» type=»application/atom+xml» title=»Schoolsw3 Новости» href=»/blog/news/atom»>
authorПредоставляет ссылку на автора документа
dns-prefetchУказывает, что браузер должен предварительно выполнить разрешение DNS для источника целевого ресурса
helpПредоставляет ссылку на справочный документ. Пример: <link rel=»help» href=»/help/»>
icon
Импортирует значок для представления документа.
Пример: <link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>
licenseСодержит ссылку на информацию об авторских правах для документа.
nextПредоставляет ссылку на следующий документ в серии.
pingbackПредоставляет адрес сервера pingback, который обрабатывает pingback к текущему документу.
preconnectУказывает, что браузер должен предварительно подключиться к источнику целевого ресурса.
prefetchУказывает, что браузер должен предварительно извлекать и кэшировать целевой ресурс, поскольку он, вероятно, потребуется для последующей навигации.
preloadУказывает, что агент браузера должен предварительно извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с назначением, заданным атрибутом «as» (и приоритетом, связанным с этим назначением).
prerenderУказывает, что браузер должен предварительно визуализировать (загружать) указанную веб страницу в фоновом режиме. Внимание! Это пустая трата пропускной способности пользователя! Используйте prerender только в том случае, если он абсолютно уверен, что веб страница необходима в какой-то момент путешествия пользователя.
prevУказывает, что документ является частью серии и что предыдущий документ в серии является ссылочным документом.
searchПредоставляет ссылку на ресурс, который можно использовать для поиска по текущему документу и связанным с ним страницам.
stylesheetИмпорт таблицы стилей.

❮ HTML тег <link>

rel атрибут HTML теґа link

  • Головна
  • html
  • теґи
  • <link>
  • rel

Атрибут rel визначає відносини між поточним документом і зв’язаним документом/ресурсом.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

<link rel="value">

Атрибут rel може отримувати 14 значень :

help

Надає посилання на документ довідки.

Приклад : <link rel="help" href="/help/">

icon

Імпортування значка, щоб представити цей документ.

Приклад: <link rel="icon" href="/favicon.ico" type="image/x-icon">.

license

Надає посилання на інформацію про авторські права для документа.

next

Надає посилання на наступний документ в серії.

pingback

Надає адресу сервера pingback, який обробляє pingback до поточного документа.

prefetch

Вказує, що браузер повинен превентивно завантажити і кешувати цільової ресурс, як це, ймовірно, буде потрібно для подальшої навігації.

preload

Вказує, що браузер повинен превентивно завантажити і кешувати цільової ресурс для подальшої навігації відповідно до призначення заданої як “as” атрибут (і пріоритету, пов’язаного з цим призначенням).

prev

Вказує, що даний документ є частиною серії, і що попередній документ в серії посилального документа.

search

Надає посилання на ресурс, який може використовуватися для пошуку за поточним документом і його сторінок.

stylesheet

Визначає, файл, що підключається є таблицею зі стилями (CSS).

dns-prefetch

Вказує, що браузер повинен виконувати превентивно дозвіл DNS для появи цільових ресурсів.

alternate

Надає посилання на альтернативний вигляд документа (тобто друк сторінки, переклад або дзеркала).

Приклад: <link rel="alternate" type="application/atom+xml" title="W3Schools News" href="/blog/news/atom">.

author

Надає посилання на автора документа.

preconnect

Вказує, що браузер повинен превентивно підключитися до появи цільових ресурсів.

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач

Так

Так

Так

Так

Так

Мобільних переглядачів ще не додано.

Приклади

  • Приклад 1

Найпростіший приклад використання HTML атрибута rel теґа <link>

<link rel="stylesheet" type="text/css" href="theme.css">

Різниця між HTML 4.01 та HTML5

Деякі значення видалені, а деякі нові значення добавлені.

Різниця між XHTML та HTML

Немає жодної різниці.

Введение в HTML-ссылку

HTML-ссылки также известны как гиперссылки. Когда мы нажимаем на определенные ссылки на веб-страницах, они открывают другие веб-страницы. Ссылка не обязательно должна быть текстом — это может быть изображение или любой другой элемент HTML. Это неотъемлемая часть HTML, и она используется повсеместно.

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

Текстовая ссылка

Атрибут href используется для указания места назначения ссылки.

Тестовая ссылка — это видимая часть ссылки.

Это приведет к следующему результату: когда вы нажмете на ссылку, вы попадете на домашнюю страницу Simplilearn.

Атрибут target ссылок HTML указывает, где открыть связанный документ. Возможны следующие варианты:

_пусто

Открывает связанный документ в новом окне или вкладке

_себя

Открывает связанный документ в том же окне или вкладке

_родительский

Открывает документ в родительском фрейме

_наверх

Открывает связанный документ в полном теле окна

Это приведет к следующему результату. Нажмите на ссылки, чтобы увидеть разницу.

Вы также можете связать изображение с другой веб-страницей. Для этого поместите тег внутрь тега .

Это даст следующий результат:

При нажатии на изображение вы будете перенаправлены на веб-сайт Simplilearn.

По умолчанию ссылки выглядят следующим образом:

С помощью CSS веб-разработчики могут настраивать эти цвета ссылок.

Вы можете создать ссылку на своей веб-странице, которая направит пользователя к программе электронной почты по умолчанию в их системе, используя mailto: внутри атрибута href.

Отправить письмо

Когда вы нажмете ссылку «отправить электронное письмо», вы будете перенаправлены на свою учетную запись электронной почты.

Получите навыки работы с HTML5 и CSS3 с помощью магистерской программы Full Stack Java Developer. Нажмите, чтобы узнать подробности программы!

Хотели бы вы стать полноценным разработчиком?

В нашем кратком введении в HTML-ссылки были рассмотрены основы создания и настройки гиперссылок веб-сайтов. Мы обсудили несколько способов, которыми мы можем манипулировать свойствами гиперссылок с помощью CSS и кодирования. Однако когда дело доходит до изучения HTML, это лишь верхушка айсберга. Если вы серьезно относитесь к следующему шагу к продвижению своей карьеры, сертификация настоятельно рекомендуется на сегодняшнем конкурентном рынке труда. Курс Full Stack Java Developer от Simplilearn — это комплексная программа, которая научит вас всему, что вам нужно знать, чтобы освоить веб-разработку. По завершении студенты также получают свои сертификаты, которые могут помочь им получить преимущество над конкурентами.

Если вы начинающий веб- и мобильный разработчик, обучение HTML расширит ваши навыки и возможности карьерного роста.

У вас есть к нам вопросы? Пожалуйста, оставьте их в разделе комментариев, и наши специалисты ответят на них за вас.

Как использовать HTML-ссылку как профессионал: научитесь создавать гиперссылки

TL;DR — HTML-ссылка — это интерактивный элемент, который переводит пользователя на другую страницу.

Содержание
  • 1. HTML-ссылка: определение и синтаксис
  • 2. Абсолютные, относительные и корневые ссылки HTML
  • 3. Использование изображений в качестве ссылок HTML
  • 4. Настройка цветов ссылок HTML
  • 5. Ссылки закладок HTML
  • 6. Наиболее часто используемые атрибуты ссылок HTML
    • 90 055 7. HTML-ссылка: полезные советы

HTML-ссылки или гиперссылки позволяют пользователям легко взаимодействовать с веб-сайтом. Чтобы вставить его на свою веб-страницу, используйте пару тегов :

Пример 

 Это ссылка на уроки кодирования.< /а>

Попробуйте в прямом эфире Учитесь на Udacity

Примечание. HTML-ссылка не может быть пустым элементом, так как она должна иметь интерактивный контент.

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

Пример 

  org">Это ссылка на уроки программирования.

Попробуйте вживую. Учитесь на Udacity

Абсолютный URL-адрес определяет полный путь к связанному веб-адресу. Это полный URL-адрес, который включает http://www… или https://www… . В большинстве случаев он используется для ссылки на внешние ресурсы.

Относительный URL-адрес описывает местоположение связанной веб-страницы относительно текущей страницы. Относительные URL-адреса обычно используются для направления пользователя в другое место на текущем веб-сайте:

Пример 

 Учебники HTML

Если вы хотите сослаться на файл в папке, расположенной на один уровень выше текущей папки, вам нужно добавить две точки и косая черта :

Пример 

 Руководства по HTML

Попробуй вживую Учись на Udacity

900 02 Относительный корневой URL-адрес обычно используется для ссылки на адрес, относящийся к корню домена текущего веб-сайта. Он всегда начинается с косой черты, указывающей корень:

Пример 

 Примеры HTML

Попробуйте вживую Учитесь на Udacity

Давайте посмотрим на простое сравнение, чтобы понять разницу между абсолютной, относительной и относительной корневой ссылкой HTML лучше. Представьте, что вы хотите добавить ссылку на страницу https://www.bitgrade.org/learn/html-tags на странице https://www.bitgrade.org/learn. Вот как вы бы определили ссылку в каждом типе:

Тип Ссылка
Абсолют https://www.bitgrade.org/learn/html-теги
Родственник HTML-теги
Корневой родственник /learn/html-теги

Вы также можете сделать изображение функцией ссылки. Техника такая же, как и со словами: кликабельный элемент должен быть помещен в теги привязки. В этом случае вы должны вложить теги внутрь тегов ссылок:

Пример 

 
  Учебники HTML

Попробуйте вживую. Учитесь на Udacity

Профи

  • Упрощенный дизайн (без лишней информации)
  • Высококачественные курсы (даже бесплатные)
  • Разнообразие функций
Основные характеристики

  • Программы наностепени
  • Подходит для предприятий
  • Платные сертификаты об окончании

ЭКСКЛЮЗИВ: СКИДКА 75%

Pros

  • Простота навигации
  • Нет технических характеристик выпуски
  • Кажется, заботятся о своих пользователях
Основные характеристики

  • Большое разнообразие курсов
  • 30-дневная политика возврата средств
  • Бесплатные сертификаты об окончании

ОТ 12,99$

Плюсы

  • Отличный пользовательский интерфейс
  • Предлагает качественный контент
  • Очень прозрачные цены
Основные характеристики

  • Бесплатные сертификаты об окончании 9005 6
  • Ориентирован на навыки работы с данными
  • Гибкий график обучения

75 % СКИДКА

По умолчанию все браузеры подчеркивают HTML-ссылки и окрашивают их в следующие цвета:

Цвет Значение
Синий Непосещенная HTML-ссылка
Фиолетовый Посещенная HTML-ссылка
Красный Активная HTML-ссылка

Чтобы изменить цвета по умолчанию, вы можете использовать внутренние стили CSS:

Пример