Что такое линк, и как он используется?

Creating Links in HTML

A link or hyperlink is a connection from one web resource to another. Links allow users to move seamlessly from one page to another, on any server anywhere in the world.

A link has two ends, called anchors. The link starts at the source anchor and points to the destination anchor, which may be any web resource, for example, an image, an audio or video clip, a PDF file, an HTML document or an element within the document itself, and so on.

By default, links will appear as follow in most of the browsers:

• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.

However, you can overwrite this using CSS. Learn more about styling links.

Что такое nofollow

Nofollow-ссылки называются так по названию тега, который проставляется для таких ссылок. В HTML существует тег <a>, который используется в коде страниц для создания ссылок. Один из атрибутов этого тега – rel; он определяет отношения между ссылаемой и текущей страницами. Этот атрибут имеет много значений, одно из которых – nofollow. Выглядит это вот так:

<a href="http://primer.ru" rel="nofollow">Интересная статья</a>

Атрибут “Nofollow” как раз и отвечает за то, чтобы страница, на которую вы ссылаетесь, не увеличила свой ссылочный вес благодаря этой ссылке. Иными словами, по этой ссылке не передается индекс цитирования (который использует Яндекс) и PageRank (который использует Google).

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Как удалить ссылку rel=’shortlink’?

Решается проблема просто, как 2 пальца об асфальт. Так как shortlink формирует WordPress, то источник нужно искать в коде самого движка. Первое, что вам необходимо сделать, это открыть файл link-template.php, который прячется в папке wp-includes. В нем ищите следующий массив символов:

Удаляете его целиком, чтобы ссылка rel=’shortlink’ в будущем не испортила не только вашу жизнь, но и жизнь блога. Перед внесением изменений в файл link-template.php настоятельно рекомендую сделать его резервную копию. Как показывает опыт, руки у всех растут из разных мест.

Я проверил, последние обновления движка WordPress этот файл не меняли, но допускаю, что иногда, данный файл может быть заменен на новую версию, в таком случае надо будет повторить процедуру заново.

(adsbygoogle = window.adsbygoogle || []).push({});

Еще один шаг к чистому и функциональному сайту сделан – желаю удачи вам и вашим проектам.

(adsbygoogle = window.adsbygoogle || []).push({});

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Использование атрибута rel=alternate hreflang=x

Допустим, что у вас есть русскоязычная страница http://www.example.com/ и её испанская версия http://es.example.com Одним из двух способов вы можете сообщить Google, что под другим URL находится испаноязычный аналог русской версии сайта:

• Элемент HTML link – в разделе HTML <head> по адресу http://www.example.com/ поместите элемент ссылку на испанскую версию этого сайта (http://es.example.com/): <link rel=»alternate» hreflang=»es» href=»http://es.example.com/» />
• HTTP заголовок – при публикации файлов в формате, отличном от HTML (например, PDF), вы можете указать другую языковую версию URL с помощью HTTP-заголовка: Ссылка: <http://es.example.com/>; rel=»alternate»; hreflang=»es»

Если у вас есть несколько языковых версий URL, в каждой вы должны использовать атрибут rel=»alternate» hreflang=»x» для указания других.

Например, если веб-сайт содержит материалы на французском, английском и русском языках, сайт на русском языке должен содержать ссылки с атрибутами rel=»alternate» hreflang=»x» на английскую и французскую версию, а они, в свою очередь, должны содержать аналогичные ссылки, указывающие на две другие версии.

Внедряем CSS-код, с помощью тега

Урок №8Внедряем CSS-код, с помощью тега <link>

Рассмотрим третий способ внедрения CSS-кода в HTML-документ: Внедрение с помощью тега <link>

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

Но что делать, если нужно изменить внешний вид тегов на всех страницах сайта одновременно? Для этого, нам понадобится тег , его нужно поместить в голову каждого HTML-документа. Тег должен ссылаться на CSS-файл, для этого у него имеется атрибут .

Создайте на рабочем столе папку Мой сайт, в папке создайте три HTML-файла:
и один CSS-файл:

В HTML-файлах, разместите следующий HTML-код:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>

  <a href="index.html">Снежный барс</a>
  <a href="polyarnyi-volk.html">Полярный волк</a>
  <a href="polyarnaya-sova.html">Полярная сова</a>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о полярном волке</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Полярный волк</h1>
  <p>
   Полярный арктический волк - подвид волка. Обитает в Арктике и тундре, на
   обширных пространствах северных регионов, которые пять месяцев в году,
   погружены в темноту. Чтобы выжить, волк приспособился есть практически
   любой корм, который только попадается ему на пути.</p>
  <p>
   Полярные волки хорошо усвоились к жизни в Арктике: они могут годами
   жить при минусовой температуре, месяцами не видеть солнечного света и
   неделями оставаться без пищи. Длина волка составляет 100-150 см, высота
   в холке может достигать 100 см, а масса у самцов переваливает за 100 кг.
   Продолжительность жизни полярного волка около 7 лет. В его рацион входят:
   леминги, зайцы, овцебыки, олени и птицы.</p>
      
  <a href="index.html">Снежный барс</a>
  <a href="polyarnyi-volk.html">Полярный волк</a>
  <a href="polyarnaya-sova.html">Полярная сова</a> 
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о полярной сове</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Полярная сова</h1>
  <p>
   Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, 
   из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, 
   длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал 
   распространения - территория тундры: Евразия, Северная Америка, 
   Гренландия.</p>
  <p>
   Полярная сова обитает обычно в открытой местности, в лесах встречается 
   редко. Питается в основном, мелкими грызунами: леммингами, в год может 
   съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие 
   хищники, птицы, рыба и даже падаль.</p>

  <a href="index.html">Снежный барс</a>
  <a href="polyarnyi-volk.html">Полярный волк</a>
  <a href="polyarnaya-sova.html">Полярная сова</a>       
 </body>
</html>

CSS-документ файла , должен содержать следующий код:

h1 {
 color: red;
 }
p {
 color: blue;
}

Ваш сайт, состоящий из трёх страниц, должен выглядеть следующим образом.

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

Давайте сделаем текст в абзацах всех страниц, зелёным. Для этого в , вместо значения , впишем значение

p {
 color: green;
}

Теперь цвет текста в абзацах, всех страниц сайта, между тегами стал зелёным.

Задание: сделайте цвет ссылок , оранжевым

Отношения документов в HTML

У HTML-тега есть атрибут – сокращение от relationship. Он определяет, в каком отношении находится открытый документ и страница, на которую указывает ссылка.

W3C определяет множество возможных значений для этого атрибута. Например, вы точно знакомы с , который используется для подключения CSS-файлов.

Нас же интересуют сейчас 4 значения:

• ,
• ,
• ,
• .

Все вместе они называются . Посмотрим, зачем они нужны и как с ними работать.

DNS Prefetch

Это значение атрибута позволяет заранее позаботиться о разрешении доменных имен документов, то есть получить нужный IP-адрес с DNS-сервера.

Предположим, что на сайте есть справочная страница с множеством ссылок на дочерний сайт. Таким образом, имеется высокая вероятность того, что пользователь на этот дочерний сайт перейдет. Ранний поиск DNS может сократить время, необходимое для открытия сайта (тем самым улучшая пользовательский опыт).

<link rel=»dns-prefetch» href=»//othersite.org»>

1 2 3

<link rel=»dns-prefetch»href=»//othersite.org»>

Когда браузер видит этот код на справочной странице, он добавляет DNS-поиск дочернего сайта в очередь задач. Когда закончатся все высокоприоритетные задачи, он займется этим делом и найдет нужный IP-адрес.

Теперь, если юзер нажмет на ссылку, браузер сразу же приступает к установке TCP-соединения, минуя обращение к DNS-серверу.

Preconnect

Значение заставляет браузер идти еще дальше и устанавливать соединение с сервером, на который в будущем может быть отправлен запрос.

Идеальный вариант использования для – редиректы, которые используются в вебе очень часто. Если следующий запрос браузера однозначно предсказуем (вы собираетесь сделать перенаправление), стоит сразу же загрузить нужный сайт, чтобы уменьшить задержку при его загрузке.

<link rel= «preconnect» href= «//othersite.com»>

1 2 3

<link rel=»preconnect»href=»//othersite.com»>

Prefetch

Если для ресурса указано отношение , браузер обращается к DNS-серверу за его доменным именем, выполняет TCP-соединение, делает HTTP-запрос и, наконец, извлекает и сохраняет ресурс в кэше. И все это в фоне, без явных действий пользователя.

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

Иногда правильно предсказать действия пользователя очень сложно, поэтому как следует подумайте, следует ли использовать .

Один из кейсов использования этого значения – онлайн-книги/галереи/портфолио с постраничной пагинацией. Вероятность того, что юзер перейдет на следующую страницу высока, так что можно заранее загрузить ресурсы с нее, например, изображения.

<link rel=»prefetch» href=»//site.com/nextimage.jpg»>

1 2 3

<link rel=»prefetch»href=»//site.com/nextimage.jpg»>

Prerender

Значение можно использовать только для HTML-страниц. Они будут полностью отрендерены в offline-режиме, а как только пользователь захочет перейти на них – сразу же показаны.

Это требует большой вычислительной работы и много памяти. Также для рендеринга страницы браузеру могут потребоваться дополнительные ресурсы (например, изображения, добавленные на страницу), что приведет к увеличению количества запросов.

Не злоупотребляйте этой мощной возможностью.

<link rel=»prerender» href=»//site.com/about.html»>

1 2 3

<link rel=»prerender»href=»//site.com/about.html»>

Пример использования

<link>

HTML 5 - <link rel = "stylesheet" href = "css/styles.css">
HTML 4.01 - <link rel = "stylesheet" type = "text/css" href = "css/styles.css">
XHTML - <link rel = "stylesheet" type = "text/css" href = "css/styles.css">

Для всех типов документов необходимы два атрибута:

• rel = «stylesheet» — указывает тип ссылки (в нашем случае таблица стилей).
• href — задает URL-адрес местонахождения внешнего CSS-файла (принцип действия аналогичен атрибуту src тега <img> ).

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

Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера — цвет всех элементов черный, а цвет заднего фона белый).

Для просмотра страниц пользователями мы установим следующие CSS стили (файл tag_link.css), которые свяжем с документом, используя элемент <link>:

h2 {color: brown;} /* устанавливаем цвет элемента - коричневый */
p {color: red;} /* устанавливаем цвет элемента - красный */
body {background-color: khaki;} /* устанавливаем цвет заднего фона - хаки */

Следующие CSS стили мы будем использовать при печати и предварительном просмотре страницы, вынесем их тоже в отдельный файл CSS (файл tag_link_print.css) и свяжем с документом, используя элемент <link>, а именно:

h2, p {color: #000;} /* групповой селектор устанавливает цвет элементов - черный */
body {background-color: #FFF; } /* устанавливаем цвет заднего фона - белый */

Теперь полный пример:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута media HTML тега <style></title>
<link rel = "stylesheet" href = "../tag_link.css">
<link media = "print" rel = "stylesheet" href = "../tag_link_print.css">
</head>
<body>
	<h2>Утконос</h2>
	<p><b>Утконос (лат. Ornithorhynchus anatinus)</b> — водоплавающее млекопитающее отряда однопроходных, обитающее в Австралии. Это единственный современный представитель семейства утконосовых (Ornithorhynchidae); вместе с ехиднами образует отряд однопроходных (Monotremata) — млекопитающих, по ряду признаков близких к рептилиям. Это уникальное животное является одним из символов Австралии; оно изображено на реверсе австралийской монеты в 20 центов.</p>
</body>
</html>

Ниже показано как этот пример отображается в браузере, а на изображении как пример отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати):

Пример использования атрибута media HTML тега link (таблицы стилей для конкретных типов устройств).

Гиперссылка в Excel — создание, изменение и удаление

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

Существует четыре способа добавить гиперссылку в рабочую книгу Excel:

1) Напрямую в ячейку

2) C помощью объектов рабочего листа (фигур, диаграмм, WordArt…)

3) C помощью функции ГИПЕРССЫЛКА

4) Используя макросы

Добавление гиперссылки напрямую в ячейку

Чтобы добавить гиперссылку напрямую в ячейку, щелкните правой кнопкой мыши по ячейке, в которую вы хотите поместить гиперссылку, из раскрывающегося меню выберите Гиперссылка

Либо, аналогичную команду можно найти на ленте рабочей книги Вставка -> Ссылки -> Гиперссылка.

Привязка гиперссылок к объектам рабочего листа

Вы также можете добавить гиперссылку к некоторым объектам рабочей книги: картинкам, фигурам, надписям, объектам WordArt и диаграммам. Чтобы создать гиперссылку, щелкните правой кнопкой мыши по объекту, из выпадающего меню выберите Гиперссылка.

Либо, аналогичным способом, как добавлялась гиперссылка в ячейку, выделить объект и выбрать команду на ленте. Другой способ создания – сочетание клавиш Ctrl + K – открывает то же диалоговое окно.

Обратите внимание, щелчок правой кнопкой мыши на диаграмме не даст возможность выбора команды гиперссылки, поэтому выделите диаграмму и нажмите Ctrl + K

Добавление гиперссылок с помощью формулы ГИПЕРССЫЛКА

Гуперссылка может быть добавлена с помощью функции ГИПЕРССЫЛКА, которая имеет следующий синтаксис:

Адрес указывает на местоположение в документе, к примеру, на конкретную ячейку или именованный диапазон. Адрес может указывать на файл, находящийся на жестком диске, или на страницу в интернете.

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

Например, если я введу в ячейку формулу =ГИПЕРССЫЛКА(Лист2!A1; «Продажи»). На листе выглядеть она будет следующим образом и отправит меня на ячейку A1 листа 2.

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

=ГИПЕРССЫЛКА(«http://exceltip.ru/»;»Перейти на Exceltip»)

Чтобы отправить письмо на указанный адрес, в функцию необходимо добавить ключевое слово mailto:

HTML Links — The target Attribute

By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.

The attribute specifies where to open the linked document.

The attribute can have one of the following values:

• — Default. Opens the document in
  the same window/tab as it was clicked
• — Opens the document in a new window or tab
• — Opens the document in the parent frame
• — Opens the document in the full body of the window

Example

Use target=»_blank» to open the linked document in a new browser window or tab:

<a href=»https://www.w3schools.com/»
target=»_blank»>Visit W3Schools!</a>

Параметр MEDIA

HTML:

3.2

4

XHTML:

1.0

1.1

Описание

Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько аргументов через запятую.

Аргументы

all

Все устройства .

screen

Экран монитора.

print

Печатающее устройство вроде принтера.

projection

Проектор.

braille

Устройства, основанные на системе Брайля, которые предназначены для слепых людей.

speech

Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Способы асинхронной загрузки CSS

Существует несколько способов заставить браузер загружать CSS асинхронно.

Первый способ (работает в современных браузерах) заключается в использовании JavaScript для создания и вставки ссылки на файл CSS в DOM:

// Создаем ссылку на таблицу стилей
var myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// вставляем ее в конце блока head
document.head.insertBefore( myCSS, document.head.childNodes.nextSibling );

Второй способ заключается в том, чтобы задать  атрибуту media в теге link значение, которое не соответствует устройству пользователя. Например, media=»print».

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

Но чтобы задействовать асинхронно загруженные стили, нужно использовать JavaScript-обработчик события onload. Это позволит изменить значение media на соответствующее браузеру и устройству пользователя. Например, screen или all:

<link rel="stylesheet" href="mystyles.css" media="nope!" onload="this.media='all'">

Примечание: мы используем комбинацию перечисленных выше приемов в библиотеке loadCSS.js, предназначенной для обработки асинхронной загрузки CSS. А также обходные пути для устаревших версий браузеров, которые не поддерживают события onload в элементах link.

Также можно загружать CSS асинхронно, используя значение rel=»alternate stylesheet». Оно используется для того, чтобы предложить пользователю альтернативное представление сайта:

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

Методы, описанные выше, работают. Но у них есть один общий недостаток: они используют JavaScript.

Setting Link Colors

You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.

Example

Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

This will produce the following result. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.

name

L’attributo name serve per creare una specie di etichetta, questa viene collocata nel punto esatto in cui è stata creata, sarà poi possibile richiamarla con l’elemento <a> seguito dall’attributo href. In questo modo anziché richiamare una pagina richiameremo quel punto preciso dove si trova l’etichetta. Complicato? 
Con name si crea un punto nel documento e con href=»#nome assegnato al name» si raggiunge quel punto, praticamente un collegamento ipertestuale normalissimo con la sola differenza che anziché richiamare una nuova pagina se ne richiama un punto preciso della stessa pagina.
Vediamo un esempio:

<a name=»weblink»></a>

Così facendo ho creato un’etichetta col nome weblink

L’etichetta risulterà essere completamente trasparente nella pagina web, cioè non si vedrà nulla a video. Fatto questo non resta che richiamarla da qualsiasi altra parte del documento o da qualsiasi altra pagina web. Il link cliccato sposterà la visualizzazione nel punto preciso in cui è stata creata o collocata l’etichetta. Poco più avanti, spiegando le varie possibilità di href, sarà possibile avere una dimostrazione pratica di come funziona l’etichetta WebLink appena creata.

Когда нужно использовать канонические ссылки

1. Для предупреждения появления различных дублей. Например:
   • страниц сортировок: /*sort, asc, desc, list=*;
   • дублей из-за UTM-меток: *utm_source=, /*utm_campaign=, /*utm_content=, /*utm_term=, /*utm_medium=;
   • других страниц c GET-параметрами в URL;
   • дублей в результате особенностей работы CMS (движка).

   В этом случае нужно добавить атрибут rel=“canonical” на все статические страницы сайта. Например, для страницы https://site.ru/category-1/page-2, rel=“canonical” будет выглядеть следующим образом:<link rel=“canonical” href=“https://site.ru/category-1/page-2” />

2. Для доступных по разным URL страниц с очень похожим контентом.Например, это могут быть страницы одной серии товара, который отличается только расцветкой или страницы товара, который расположен сразу в нескольких категориях.В этом случае нужно указать со всех страниц rel=“canonical” на основную, приоритетную страницу.
3. На страницах пагинации, если в категориях сайта есть страницы «Показать всё».В таком случае на каждой из страниц пагинации нужно указать канонической страницу «Показать всё».Например, для страницы https://site.ru/category-1/page-2 нужно прописать канонический URL:<link rel=“canonical” href=“https://site.ru/category-1/show-all” />

301 редирект или rel=canonical

Если нет факторов, мешающих внедрить 301 редирект, то используйте этот вариант. Помните, что указание канонической ссылки является рекомендательным для поисковых систем. Нередко в выдаче Google можно встретить ранжирующиеся неканонические страницы, при этом в коде страницы будет указана ссылка на первоисточник. Алгоритм поисковика строится не только на поиске канонической ссылки в коде страницы, но и на массе других факторов — наличии внешних и внутренних ссылок, релевантности для пользователя и т.д. Поэтому у Google может быть другое мнение на счет того, какую же из страниц-дублей необходимо считать оригинальной. Если же необходимо оставить страницы доступными для пользователей либо существуют технические сложности в реализации 301 редиректа на сайте — используйте rel=canonical.

Атрибуты

Атрибут	Значение	Описание
charset	char_encoding	Не поддерживается в HTML5.Определяет кодировку, связанного документа.
crossorigin	anonymoususe-credentials	Атрибут определяет, используется ли CORS при загрузке. У этого атрибута есть 2 допустимых значения:anonymous В этом случае перед загрузкой выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header.use-credentials Перед загрузкой выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде — cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header. Если данный атрибут не задан, то CORS при загрузке не используется (отcутствует заголовок Origin: HTTP header). При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
href	URL	Определяет местоположение связанного документа.
hreflang	language_code	Определяет язык текста связанного документа.
media	media_query	Указывает, что файл адаптирован (оптимизирован) под определённые виды устройств. Атрибут может принимать несколько значений и используется, чтобы указать стиль для речевых или печатных устройств, для определенных моделей смартфонов и так далее.
rel	alternatearchivesauthorbookmarkexternalfirsthelpiconlastlicensenextnofollownoreferrerpingbackprefetchprevsearchsidebarstylesheettagup	Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).Обязательный атрибут.
rev	reversed relationship	Не поддерживается в HTML5.Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
sizes	Height x Widthany	Определяет размер связанной иконки. Только для rel = «icon»).
target	_blank_parent_self_topframename	Не поддерживается в HTML5.Указывает, где будет загружен документ (окно/фрейм).
type	media_type	Указывает MIME-тип документа на который осуществляется переход.

HTTP-запросы

Прежде чем приступать к оптимизации, освежим в памяти, как происходит типичный HTTP-запрос.

Джо хочет посетить какой-то веб-сайт.

1. Он вспоминает его человекопонятный адрес, вводит в адресную строку браузера и нажимает .
2. Браузер обращается к DNS-серверу, чтобы получить соответствующий адресу IP.
3. Получив IP, браузер отправляет TCP-сообщение на сервер веб-сайта, запрашивая соединение.
4. Если сервер нормально работает, он подтверждает запрос и отправляет браузеру сообщение, которое он в свою очередь подтверждает (вот такая light-версия TCP-рукопожатия).
5. Когда все рукопожатия завершены, устанавливается соединение между клиентом (браузером) и сервером.
6. Браузер переходит с TCP на HTTP и запрашивает веб-страницу, которую Джо терпеливо ждет перед монитором.
7. Сервер передает браузеру запрошенную страницу.

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