HTML - текстовые ссылки

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

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

Note- Я рекомендую вам пройти короткое руководство по пониманию URL

Связывание документов

Ссылка указывается с помощью HTML-тега <a>. Этот тег называетсяanchor tagи все, что находится между открывающим тегом <a> и закрывающим тегом </a>, становится частью ссылки, и пользователь может щелкнуть эту часть, чтобы перейти к связанному документу. Ниже приводится простой синтаксис использования тега <a>.

<a href = "Document URL" ... attributes-list>Link Text</a>

пример

Давайте попробуем следующий пример, который ссылается на http://www.tutorialspoint.com на вашей странице -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

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

Целевой атрибут

Мы использовали targetатрибут в нашем предыдущем примере. Этот атрибут используется для указания места, где открывается связанный документ. Ниже приведены возможные варианты -

Старший Нет Вариант и описание
1

_blank

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

2

_self

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

3

_parent

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

4

_top

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

5

targetframe

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

пример

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

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

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

Использование базового пути

Когда вы связываете HTML-документы, относящиеся к одному и тому же веб-сайту, не требуется указывать полный URL-адрес для каждой ссылки. Вы можете избавиться от него, если воспользуетесь<base>в заголовке HTML-документа. Этот тег используется для определения базового пути для всех ссылок. Таким образом, ваш браузер объединит данный относительный путь с этим базовым путем и сделает полный URL-адрес.

пример

В следующем примере используется тег <base> для указания базового URL-адреса, а позже мы можем использовать относительный путь ко всем ссылкам вместо предоставления полного URL-адреса для каждой ссылки.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

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

Теперь данный URL <a href = "/html/index.htm" рассматривается как <ahref = "http://www.tutorialspoint.com/html/index.htm"

Ссылка на раздел страницы

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

Note- Атрибут name устарел в HTML5. Не используйте этот атрибут. Используйте идентификатор и название атрибута вместо этого.

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

<h1>HTML Text Links <a name = "top"></a></h1>

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

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

Это создаст следующую ссылку, где вы можете щелкнуть по созданной ссылке. Go to the Top чтобы перейти к началу руководства по HTML-текстовой ссылке.

Go to the Top

Настройка цветов ссылок

Вы можете установить цвета своих ссылок, активных ссылок и посещенных ссылок, используя link, alink и vlink атрибуты тега <body>.

пример

Сохраните следующее в test.htm и откройте его в любом веб-браузере, чтобы узнать, как link, alink и vlink атрибуты работают.

<!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>

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

Ссылки для скачивания

Вы можете создать текстовую ссылку для загрузки файлов PDF, DOC или ZIP. Это очень просто; вам просто нужно указать полный URL-адрес загружаемого файла следующим образом:

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

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

Диалоговое окно загрузки файла

Иногда желательно предоставить вариант, при котором пользователь щелкает ссылку, и для пользователя появляется всплывающее окно «Загрузка файла» вместо отображения фактического содержимого. Это очень просто и может быть достигнуто с помощью HTTP-заголовка в вашем HTTP-ответе.

Например, если вы хотите сделать Filename файл, загружаемый по указанной ссылке, его синтаксис будет следующим.

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

Note- Дополнительные сведения о программах PERL CGI см . В руководстве PERL и CGI .