Содержание

Руководство HTML Hyperlink

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

1- HTML Hyperlink

Гиперссылки (Hyperlink) в основном встречаются на web страницах, которые позволяют пользователям нажимать и переходить на другую страницу.

В HTML, используйте тег <a> чтобы создать гиперссылку (hyperlink). «a» это аббревиатура Anchor (Якорь).

Самый простой синтаксис для создания гиперссылки:

<a href="url">link text</a>
<!-- Examples: -->
<a href="https://google.com">Go to Google</a>
<a href="my-page.html">Go to My Page</a>

Локальная ссылка (Local link)

Локальная ссылка это ссылка для подключения к странице на том же ​​​​​​​ website, для которой не требуются префиксы http://, https://.

<a href="products.html">Products</a>
<a href="admin/products.html">Product Management</a>

Атрибут (attribute) href является самым важным у тега <a>, он определяет адрес назначения (destination) ссылки. HREF это аббревиатура hypertext reference.

Нажмите на текст ссылки (link text), который доставит вас на указанный адрес.

Например:

  • Try It!

hyperlink-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Hyperlink</h3>
    <a href="https://google.com">Go to Google</a>
</body>
</html>

Пример создания гиперссылки на изображении:

image-hyperlink-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Image Hyperlink</h3>
    <a href="https://o7planning. org">
       <img src="../../_testdatas_/triceratops.png"/>
    </a>
</body>
</html>

2- HTML Email Link

  • HTML Email Link

3- target

Атрибут 

target определяет место где ссылка будет открытна. Например, target=»_blank» значит ссылка будет открыта в новом окне (Или новом Tab).

Возможные значения атрибута target:

targetОписание
_blankОткрывет связанный документ в новом окне или Tab (вкладке​​​​​​​).
_selfОткрывает связанный документ в том же окне/tab, в котором он был нажат (Это по умолчанию).
_parentОткрывает связанный документ в родительском Frame
. Или действуйте как​​​​​​​ «_self», если родительский Frame не существует.
_topОткрывает связанный документ в​​​​​​​ Viewport браузера.
framenameОткрывает связанный документ в​​​​​​​​​​​​ названном Frame.

target=»_blank»

Пример открытия связанного документа в новом окне (Или новом Tab):

<a href="https://o7planning.org" target="_blank">Visit o7planning!</a>

target=»_self» (Default)

taget=»_self»

, связанный документ откроется в том же окне/Tab, где была нажата ссылка (Обычно щелчок левой кнопкой мыши).  Однако, если пользователи хотят открыть документ в новом окне (Или в новом Tab) они могут нажать на кнопку колесика мыши (Mouse Wheel button), чтобы щелкнуть на ссылку.

<a href="https://google.com">Go to Google</a>
<!-- Same as: -->
<a href="https://google.com" target="_self">Go to Google</a>

target=»_parent»

  • HTML IFrames

taget=»_parent»: Связанный документ откроется в родительском​​​​​​​ Frame.

Или он будет работать так же, как «_self» если родительский Frame не существует.

parent-page.html

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>
<body>
   <h4>parent-page.html</h4>
   <p>IFrame:</p> 
   <iframe src="child-page.html"
          ></iframe>
</body>
</html>

child-page.html

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>
<body>
  <h4>child-page.html</h4>
  <p>a href="other-page.html" target="_parent"</p>
  <a href="other-page.html" target="_parent">Go to other-page.html</a>
</body>
</html>

other-page.html

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>
<body>
  <h4>other-page. html</h4>
  <button>back</button>
</body>
</html>

4- download

Атрибут download говорит браузеру скачать URL вместо навигации(navigate) к нему. Значение атрибута 

download используется как названия файла, сохраняется на жестком диске пользователя.

<a href="/images/picture.png" download>picture.png</a>
<a href="/images/picture.png" download="new-file-name.png">picture.png</a>

Примечение:

Атрибут (attribute) download работает только с URL одного происхождения (same-orgin URLs)

HTTP Header Content-Disposition

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

Если HTTP Header Content-Disposition предоставляет название файлу, данное название отличается от значения атрибута 

download, название атрибута предоставляемый HTTP Header будет приоритетом при использовании.

Если Content-Disposition был настроен как значение inline.

  • Firefox ​​​​​​​расставляет приоритеты в отношении файлов предоставленных Content-Disposition.
  • Chrome расставляет приоритеты в отношении файлов предоставленных атрибутом download.

Example:

Например тег <a> с атрибутом download. Примечание: Вам нужно запустить данный пример на протоколе (protocol) http:// (Или https://). Если вы запускаете данный пример напрямую на браузере по протоколу file:///, он может не работать (Чтобы проврить с браузерами Firefox, Chrome).

download-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink download attribute</title>
  <meta charset="UTF-8">
</head>
<body>
  <h4>Hyperlink download attribute</h4> 
  <a href=".
 
 ./../_testdatas_/flower.png" download="My-Flower.png">flower.png</a>
</body>
</html>

5- hreflang

Атрибут hreflang это подсказка, он дает знать человеческий язык (human language) источника связанных данных (linked resource).

<a href="/vi" hreflang="vi">Vietnamese</a>
<a href="/ru" hreflang="ru">Rusian</a> 
<a href="/" hreflang="en-us">English</a>

Атрибут hreflang полезен для инструментов поиска, таких как Google, Yandex,.. помогает им знать ресурс предоставленный тегом <a> пренадлежит какому языку.

Когда пользователь ищет документы в таких инструментах как в​​​​​​​ Google, Yandex,..  Эти инструменты будут знать ​​​​​​​ IP адрес пользователя, таким образом, знает откуда пользователь и какой язык он использует. Основываясь на этих данных, инструменты дадут подходящий результат, включая языковой приоритет документа. Следовательно, это снижает показатель отказов (bounce rate) (Процент пользователей, получающих доступ к странице и сразу выходящих из нее по причине неуместности страницы).

6- type

Атрибут type это только подсказка, он дает знаить MIME Type

у URL. Атрибут​​​​​​​ type имеется в некоторых тегах как в <a>, <object>, <source>,…

<a href="https://o7lanning.org" type="text/html">o7lanning</a>
<object
        data="helloworld.swf"
        type="application/vnd.adobe.flash-movie">
</object>
<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
</audio>
<embed src="helloworld.swf" type="application/vnd.adobe.flash-movie">

7- ping

Атрибут ​​​​​​​ping является самым интересным у тега <a>, потому что не каждый знает о нем, даже программисты работающие с  HTML много лет. Рассмотрим пример:

<a href="https://o7planning.org/10259/html" ping="https://example.com/trackpings">HTML</a>

Когда пользователь нажимает на гиперссылку выше, создается POST Request браузером и отправляется к https://example.com/trackpings. он совершенно невидим для пользователся и на самом деле силен, не может быть заблокирван даже когда пользователь отключает Javascript, так как Anchor ping не использует Javascript. Anchor ping является асинхронным (asynchronous) и не отменяется, даже если ссылка, которую пользователь только что щелкнул, не может загрузиться (load).

Вы можете предоставить много URL для атрибута ping, эти URL отделены пробелом.

<a href="https://o7planning.org/en/10259/html"
       ping="https://example.com/trackpings  https://abc.com/pings">HTML</a>

Anchor ping ​​​​​​​безусловно, отличная функция для рекламодателей. Много дискуссий происходят в эти дни, оппоненты утверждают, что это нарушает конфиденциальность пользователей. Поэтому браузеры, которые когда-то поддерживали эту функцию в конце концов перестали поддерживать ее..

На самом деле, как и вы, я не знаю, каким будет будущее атрибута ​​​​​​​ping. Если он больше не будет поддерживаться то очень жаль. Вы можете прочитать некоторые из следующих статей:

  • https://lapcatsoftware.com/articles/Safari-link-tracking3.html
  • https://www.ghacks.net/2019/04/20/mozilla-plans-to-enable-hyperlink-ping-tracking-by-default-in-firefox/
  • https://stackoverflow.com/questions/22428764/how-cross-browser-is-the-ping-attribute-of-anchor-elements

8- CSS Hyperlink

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <link> определяет отношение между текущим html-документом и внешним ресурсом, на который он ссылается. Он является пустым элементом (не имеет содержимого и закрывающего тега) и всегда должен располагаться внутри элемента <head>. Чаще всего тег <link> используется для подключения внешних таблиц стилей:


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

Первый атрибут href определяет адрес документа, который может быть как абсолютным так и относительным. Второй атрибут rel указывает связь между HTML файлом и тем, на что вы ссылаетесь, в данном случае мы ссылаемся на таблицу стилей, поэтому используется значение stylesheet. Атрибут type сообщает браузеру MIME тип документа, для таблиц стилей значением всегда будет "text/css".

Примечание: по стандарту HTML5, при подключении к документу внешнего файла CSS, атрибут type указывать не требуется: 


<link href="style.css" rel="stylesheet">

Предварительная загрузка страниц

Обычно, когда вы кликаете по ссылке на другую страницу приходится ждать несколько секунд пока она загрузится. Однако, вы можете настроить вашу веб-страницу таким образом, чтобы определённые страницы загружались заранее в кэш браузера в то время пока вы находитесь на текущей странице. Это означает, что когда вы кликнете по ссылке для перехода на другую веб-страницу, то она откроется сразу и не надо будет ждать, пока она загрузится. Это называется «предварительное получение страницы». Чтобы сделать это, используется тег <link> с атрибутом rel="prefetch", а также указывается целевая страница, которая будет заранее загружена на компьютер.

<link rel="prefetch" href="httр://www.puzzleweb/html/tag_p.php">

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

Примечание: вместо адреса на HTML-документ можно указать путь к файлу другого типа (картинку, видео и тд. ).

Атрибуты

href:
Указывает месторасположение (URL) внешнего файла (путь к файлу может быть указан с помощью абсолютного или относительного адреса).
hreflang:
Указывает двухбуквенный код языка, определяющий язык документа, на который ведет ссылка. Атрибут hreflang используется только совместно с атрибутом href.
media:
Определяет под какие устройства оптимизирован файл. Главным образом он используется с файлами таблиц стилей, для определения различных стилей под разные типы носителей. Атрибут media может принимать сразу несколько значений, разделяемых между собой пробелами.
rel:
Указывает связь между текущим документом и документом, на который ведет ссылка.
  • alternate — ссылка на альтернативную версию документа (то есть страницы для печати, перевод или зеркало).
  • author — определяет ссылку страницу об авторе документа или на страницу с контактными данными автора.
  • canonical — позволяет пометить страницы с дублирующимся контентом, это значит что все страницы, имеющие одинаковое содержимое должны содержать тег <link> с атрибутом rel="canonical".

    Атрибут href, в этом случае, должен содержать ссылку на страницу с идентичным содержимым, которую поисковые системы должны считать основной: 

    <link rel="canonical" href="httр://www.puzzleweb/html/tag_p.php">
  • first — указывает ссылку, ведущую на первый документ из последовательности документов.
  • help — ссылка на документ со справкой.
  • icon — определяет путь к иконке, которая будет использована для текущего документа.
  • last — указывает ссылку, ведущую на последний документ в последовательности документов.
  • licence — ссылка на сведения об авторских правах для документа.
  • next — указывает, что этот документ является частью серии, и что ссылка будет вести на следующий документ в этой серии.
  • prefetch — указывает, что следует заранее кэшировать файл, на который ведет ссылка.
  • prev — указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
  • search — ссылка на поиск для документа.
  • stylesheet — определяет внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
sizes:
Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", может принимать следующий значения:
type:
Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка, используется только совместно с атрибутом href.

Тег <link> так же поддерживает Глобальные атрибуты

Стиль по умолчанию


link {
    display: none;
}

Пример


<head>
  <link rel="stylesheet" href="style.css">
</head>

Результат данного примера в окне браузера:

URL коды символов ACSII

Главная / Таблица URL кодов ASCII /

Кодирование URL конвертирует символы в формат, который можно безопасно передать в качестве URL-адреса ресурса через интернет.

URL — это Единый указатель ресурсов (англ. Uniform Resource Locator). Веб-браузеры запрашивают HTML-документы с сервера, используя URL-адрес.

URL — это адрес веб-страницы, например: http://www.wm-school.ru

Кодирование URL

URL-адрес ресурса отправляется в интернет в ASCII-кодировке.
Если в URL содержатся символы, не входящие в ASCII-кодировку, URL конвертируется. Перекодироваться должны буквы кириллицы, буквы с диакритическими знаками, лигатуры, иероглифы. Кодирование URL конвертирует этот адрес в ASCII формат.
Кодировщик URL заменяет небезопасные символы ASCII знаком (%), за которым следуют два шестнадцатиричных числа, которые соответствуют значениям символов из кодировки ISO-8859-1. URL не должен содержать пробелы. Кодировщик URL обычно заменяет пробелы знаком (%20).

URL-коды специальных (управляющих) символов

Первоначально управляющие символы таблицы ASCII (диапазон 00-31, плюс 127) были разработаны для того, чтобы управлять устройствами аппаратных средств, таких как телетайп, ввод данных на перфоленту и др.
Управляющие символы (кроме горизонтальной табуляции, перевода строки и возврата каретки) не используются в HTML-документах.

Таблица URL-кодов специальных (управляющих) символов

DecHexСимволURL-код
000 %00
101 %01
202 %02
303 %03
404 %04
505 %05
606 %06
707 %07
808backspace%08
909tab%09
100alinefeed%0a
110b %0b
120c %0c
130dcarriage return%0d
140e %0e
150f %0f
1610 %10
1711 %11
1812 %12
1913 %13
2014 %14
2115 %15
2216 %16
2317 %17
2418 %18
2519 %19
261a %1a
271b %1b
281c %1c
291d %1d
301e %1e
311f %1f
1277f %7f

URL-коды символов ISO-Latin (диапазон 128-255)

Символы в диапазоне с 128 по 255 отводятся для специфических символов букв алфавитов западно-европейских языков, символов псевдографики, некоторых букв греческого алфавита, а также ряда математических и финансовых символов.

URL-коды символов ISO-Latin (диапазон 128-255)

DecHexСимволURL-код
12880€%80
12981%81
13082‚%82
13183ƒ%83
13284„%84
13385…%85
13486†%86
13587‡%87
13688ˆ%88
13789‰%89
1388aŠ%8a
1398b‹%8b
1408cŒ%8c
1418d%8d
1428eŽ%8e
1438f%8f
14490%90
14591‘%91
14692’%92
14793“%93
14894”%94
14995•%95
15096–%96
15197—%97
15298˜%98
15399™%99
1549aš%9a
1559b›%9b
1569cœ%9c
1579d%9d
1589ež%9e
1599fŸ%9f
160a0 %a0
161a1¡%a1
162a2¢%a2
163a3£%a3
164a4¤%a4
165a5¥%a5
166a6¦%a6
167a7§%a7
168a8¨%a8
169a9©%a9
170aaª%aa
171ab«%ab
172ac¬%ac
173ad­%ad
174ae®%ae
175af¯%af
176b0°%b0
177b1±%b1
178b2²%b2
179b3³%b3
180b4´%b4
181b5µ%b5
182b6%b6
183b7·%b7
184b8¸%b8
185b9¹%b9
186baº%ba
187bb»%bb
188bc¼%bc
189bd½%bd
190be¾%be
191bf¿%bf
192c0À%c0
193c1Á%c1
194c2Â%c2
195c3Ã%c3
196c4Ä%c4
197c5Å%c5
198c6Æ%v6
199c7Ç%c7
200c8È%c8
201c9É%c9
202caÊ%ca
203cbË%cb
204ccÌ%cc
205cdÍ%cd
206ceÎ%ce
207cfÏ%cf
208d0Ð%d0
209d1Ñ%d1
210d2Ò%d2
211d3Ó%d3
212d4Ô%d4
213d5Õ%d5
214d6Ö%d6
215d7×%d7
216d8Ø%d8
217d9Ù%d9
218daÚ%da
219dbÛ%db
220dcÜ%dc
221ddÝ%dd
222deÞ%de
223dfß%df
224e0à%e0
225e1á%e1
226e2â%e2
227e3ã%e3
228e4ä%e4
229e5å%e5
230e6æ%e6
231e7ç%e7
232e8è%e8
233e9é%e9
234eaê%ea
235ebë%eb
236ecì%ec
237edí%ed
238eeî%ee
239efï%ef
240f0ð%f0
241f1ñ%f1
242f2ò%f2
243f3ó%f3
244f4ô%f4
245f5õ%f5
246f6ö%f6
247f7÷%f7
248f8ø%f8
249f9ù%f9
250faú%fa
251fbû%fb
252fcü%fc
253fdý%fd
254feþ%fe
255ffÿ%ff

Зарезервированные символы

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

Таблица URL-кодов зарезервированных символов

DecHexСимволURL-код
3624$%24
3826&%26
432b+%2b
442c,%2c
472f/%2f
583a:%3a
593b;%3b
613d=%3d
633f?%3f
6440@%40

Небезопасные символы

Небезопасные символы — это пробел, кавычки, знак меньше, знак больше, знак диез, знак проценты, фигурные скобки, прямой слэш, обратный слэш, тильда, квдратные скобки, гравис. Эти символы также должны всегда быть закодированы.%5e1267e~%7e915b[%5b935d]%5d9660`%60

Смотрите также:

URL коды символов UTF-8 диапазон от U+0400 до U+04FF

HTML Кодирование URL

Таблица кодов символов кирилицы UTF-8

Таблица кодов символов Windows-1251


HTML Links Tag — Как давать ссылки в HTML — TutorialBrain

Что такое HTML-ссылки?

Ссылки обеспечивают связь между двумя веб-страницами.

Тег HTML (anchor) используется для установки ссылок. Внутри тега .. используется атрибут href , определяющий гиперссылку.


Гиперссылка определяет назначение ссылки. При нажатии на эту ссылку выполняется перенаправление на другую веб-страницу.

В HTML гиперссылка может быть внешней ссылкой, внутренней ссылкой, телефонной ссылкой, ссылкой на электронные письма и изображениями.

Синтаксис:
Ссылка на сайт tutorialbrain

Пример 

 Открыть указанную ссылку

HTML-ссылки — цвета ссылок

Пример 

 a:ссылка {
   цвет синий;
}
  
а: посетил {
   оранжевый цвет;
}
  
а: наведите {
  цвет: помидор;
}
  
а: активный {
  цвет: зеленый;
}

Подписаться на @tutorial_brain

HTML-ссылки — ссылка на изображение

Ссылки на изображения предоставляются с использованием атрибута « href », а источник изображения должен быть указан с использованием атрибута « src ».

Например –

  • Если имя изображения ‘image1.jpg’ и оно находится в той же папке, что и файл HTML, то вы должны указать путь к файлу вида –
  • Аналогично, если файл находится в папке ‘ img ‘, который находится на 1 уровень выше местоположения, в котором находится файл HTML, тогда ваш синтаксис будет выглядеть так:
      jpg">
  • Вы также можете указать внешнее местоположение вашего изображения. путь как –

Пример 

  
Изображение

Ссылки HTML — Ссылки электронной почты

Ссылки электронной почты даны, чтобы помочь пользователям решить или задать любые сомнения или передать какие-либо сообщения на веб-сайт.
В HTML атрибут mailto используется для предоставления прямой ссылки на идентификатор электронной почты.

Пример ссылок электронной почты 

 [электронная почта защищена]

HTML-ссылки — целевые ссылки

Атрибут target указывает место назначения для открытия связанного документа.

Атрибут target откроет ссылки, как показано ниже:

Targets Описание
_пусто Если мы используем пустой атрибут, данная ссылка откроется в новой вкладке.
_self Указанные ссылки под собственными атрибутами будут открываться в той же вкладке. В большинстве случаев по умолчанию ссылки открываются на той же вкладке или странице.
&нижний;родительский Связанные страницы, указанные в родительском атрибуте, будут открываться в родительском фрейме.
Нижняя планка;верх Добавляет новую страницу в текущее окно, закрывая все остальные фреймы.

Подписаться на @tutorial_brain

Пример целевых ссылок в HTML 

пустой атрибут


собственный атрибут


родительский атрибут


верхний атрибут

HTML Ссылки на другой веб-документ в той же папке

Предположим, у вас есть файл с именем link1. html , который содержит ссылку на другую веб-страницу ( link2.html ), и обе эти ссылки присутствуют. в той же папке.

Тогда как мы можем сослаться на ссылку link2.html из link1.html ?

 Ссылка на другой файл в той же папке (того же уровня)

HTML Ссылки на подпапку

Предположим, у вас есть файл с именем link11.html , который содержит ссылку на другую веб-страницу ( link22.html ). Здесь link22.html находится внутри подпапки folder22.

По сути, folder22 находится на том же уровне, что и link11.html , что означает, что файл link222.html находится на одном уровне после link11.html .

Итак, как нам сослаться на ссылку link22.html из link11.html ?

  Ссылка на другой файл, находящийся в подпапке

HTML-ссылки на родительскую папку (бэк-папка)

Предположим, у вас есть файл с именем link111. html , который содержит ссылку на другую веб-страницу ( link222.html ). Здесь link222.html присутствует внутри родительской папки folder222.

Таким образом, папка 22 находится на 1 уровень раньше по сравнению с ссылка111.html .

Итак, как нам сослаться на ссылку link222.html из link111.html ?

  Ссылка на другой файл, находящийся в родительской папке

Итак, 2 точки (..) необходимы, чтобы перейти на 1 уровень назад. Аналогично, чтобы перейти на 2 уровня назад, нужно —

 ../../

Ссылки HTML — Ссылка для загрузки файлов

Вы можете дать ссылки для загрузки файлов, таких как файлы PDF, PPT, DOC и ZIP. Вам необходимо предоставить ссылку вместе с местоположением документа с типом документа.

Нажмите, чтобы загрузить файл

Пример 

 

  <тело>
     
 Пример ссылки на скачивание файла
 
     txt" download>Загрузить файл

Интервью Вопросы и ответы

  1. Как создать гиперссылку в HTML?

HTML предоставляет тег привязки для создания гиперссылки, связывающей одну страницу с другой. Цвет этих ссылок по умолчанию: —

Активная ссылка — Подчеркнута красным.

Непосещенная ссылка — Подчеркнутый и синий.

Посещенная ссылка — Подчеркнуто и фиолетово.

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

Для создания гиперссылок или ссылок, ведущих на другую веб-страницу, используйте тег href.
Синтаксис:

 Открыть указанную ссылку
  1. Чем активные ссылки отличаются от обычных?

Обычные ссылки — это ссылки, которые есть на странице и по которым еще не нажимали.
Активные ссылки — это те ссылки, по которым только что щелкнули в данный момент.

Цвет активной и обычной связи по умолчанию — красный.

  1. Что такое тег привязки и как открыть URL-адрес в новой вкладке при нажатии?

Тег HTML (якорь) используется для предоставления ссылок. А внутри тега .. используется атрибут href, где атрибут href определяет гиперссылку..

Если мы используем атрибут «_blank», данная ссылка откроется в новой вкладке.

Пример,

 пустой атрибут

5. Что означает «href» в HTML-ссылке?

«href» происходит от «ссылки на гиперссылку». Это атрибут тега , и он идентифицирует место (называемое гиперссылкой или обычно ссылкой) в гипертексте, которое связывает пользователя с другим местом. Доступ к ссылке можно получить, щелкнув или наведя на нее курсор.

Например,

  tutorialbrain.com/">Нажмите здесь, чтобы посетить Tutorialbrain

 

Будет создана гиперссылка, по которой пользователь будет перенаправлен на веб-сайт Tutorialbrain.

  1. Как создавать ссылки на разделы на одной странице?

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

  Название темы

 

Здесь ссылка перейдет к разделу на странице с именем «имя_раздела», но теперь нам нужно создать фактический раздел с именем имя_раздела, чтобы он работал.
Синтаксис для этого: —

 Текст

 

Пример,

 

<тело>

Махатма Ганди

Ранние годы и предыстория

Английский адвокат


Ранние годы и предыстория

Мохандас Карамчанд Ганди [17] родился 2 октября 1869 г. [1] в гуджаратскую индуистскую семью модх Бания [18] в Порбандаре (также известном как Судамапури), прибрежном городе на полуострове Катхиавар, а затем являвшемся частью небольшого княжеского государства Порбандар в агентстве Катхиавар Индийской империи. Его отец, Карамчанд Уттамчанд Ганди (1822–1885), служил диваном (главным министром) штата Порбандар.

Английский барристер

Ганди происходил из бедной семьи, и он бросил самый дешевый колледж, который мог себе позволить. Мавджи Дэйв Джошиджи, священник-брамин и друг семьи, посоветовал Ганди и его семье рассмотреть возможность изучения права в Лондоне.] В июле 1888 года его жена Кастурба родила их первого выжившего сына Харилала. Его матери не нравилось, что Ганди оставил жену и семью и уехал так далеко от дома. Дядя Ганди Тулсидас также пытался отговорить своего племянника. Ганди хотел уйти.

Фейсбук Твиттер Гугл плюс

Руководство по гиперссылкам HTML с примерами

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

1- HTML-гиперссылка

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

В HTML используйте тег для создания гиперссылки. «a» — это сокращение от Anchor .

Самый простой синтаксис для создания гиперссылки:

текст ссылки

Перейти в Google
Перейти на мою страницу

Локальная ссылка

Локальная ссылка — это ссылка для подключения к странице на том же веб-сайте , которая не требует префиксов, таких как http:// или https://. 

Товары
Управление продуктами

Атрибут href является наиболее важным из тегов , который определяет адрес назначения ссылки. HREF — сокращение от гипертекстовой ссылки .

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

Например:

гиперссылка-example.html



<голова>
    Гиперссылка
    <мета-кодировка="UTF-8">

<тело>
     
Гиперссылка
 
    Перейти в Google

Это пример создания гиперссылок на изображении:

image-hyperlink-example.html



<голова>
    Гиперссылка
    <мета-кодировка="UTF-8">

<тело>
     
Гиперссылка на изображение

2- Ссылка электронной почты в формате HTML

  • Ссылки электронной почты в формате HTML

3- цель

Атрибут target указывает, где открыть ссылку. Например, target=»_blank» означает, что ссылка откроется в новом окне или новой вкладке.

Возможные значения атрибута target :

target Описание
_пусто Открывает связанный документ в новом окне или вкладке
_себя Открывает связанный документ в том же окне/вкладке, где он был выбран (значение по умолчанию)
_родительский Открывает связанный документ в родительском фрейме. Или действуйте как «_self» , если родительский фрейм не существует.
_верх Открывает связанный документ в окне просмотра браузера.
имя кадра Открывает связанный документ в именованном фрейме

target=»_blank»

Ниже приведен пример открытия связанного документа в новом окне или на новой вкладке:

 org" target="_blank">Посетите o7planning!

target=»_self» (по умолчанию)

taget = «_ self» , связанный документ откроется в том же окне/вкладке, где была нажата ссылка (обычно щелчок левой кнопкой мыши). Однако, если пользователи хотят открыть документ в новом окне (или новой вкладке), они могут нажать на ссылку с помощью колесика мыши.

Перейти в Google

Перейти в Google

цель = «_родитель»

  • HTML-фреймы

target = «_ parent»: Связанный документ откроется в родительском фрейме . В противном случае он будет работать так же, как «_self» , если родительский кадр не существует.

родительская-страница.html



<голова>
  Гиперссылка
  <мета-кодировка="UTF-8">

<тело>
    
родительская-страница.
 html 
   
Интерфейс: