Учебники

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

Декабрь 15, 2018

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

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

Примечание — я рекомендую вам пройти краткое руководство по пониманию URL

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

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

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

пример

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

Live Demo 

<!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 (в этом примере).

Атрибут цели

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

Sr.No Вариант и описание
1

_blank

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

2

_self

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

3

_parent

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

4

_Топ

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

5

targetframe

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

_blank

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

_self

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

_parent

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

_Топ

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

targetframe

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

пример

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

Live Demo 

<!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 для каждой ссылки.

Live Demo 

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

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

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

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

Примечание . Атрибут name устарел в HTML5. Не используйте этот атрибут. Вместо этого используйте атрибут id и title .

Примечание . Атрибут name устарел в HTML5. Не используйте этот атрибут. Вместо этого используйте атрибут id и title .

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

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

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

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

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

Go to the Top

Установка цветов ссылок

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

пример

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

Live Demo 

<!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-адрес загружаемого файла следующим образом —

Live Demo 

<!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-ответе.

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

#!/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");
}

Примечание. Для получения более подробной информации о программах PERL CGI обратитесь к учебным пособиям PERL и CGI .

51
Share: