Веб-страница может содержать различные ссылки, которые ведут вас непосредственно на другие страницы и даже определенные части данной страницы. Эти ссылки известны как гиперссылки.
Гиперссылки позволяют посетителям перемещаться между веб-сайтами, нажимая на слова, фразы и изображения. Таким образом, вы можете создавать гиперссылки, используя текст или изображения, доступные на веб-странице.
Примечание — я рекомендую вам пройти краткое руководство по пониманию URL
Связывание документов
Ссылка указывается с использованием HTML-тега <a>. Этот тег называется тегом привязки, и все, что находится между открывающим тегом <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 (в этом примере).
Атрибут цели
Мы использовали целевой атрибут в нашем предыдущем примере. Этот атрибут используется для указания места, где открывается связанный документ. Ниже приведены возможные варианты —
| Sr.No | Вариант и описание |
|---|---|
| 1 |
_blank Открывает связанный документ в новом окне или вкладке. |
| 2 |
_self Открывает связанный документ в том же фрейме. |
| 3 |
_parent Открывает связанный документ в родительском фрейме. |
| 4 |
_Топ Открывает связанный документ в полном теле окна. |
| 5 |
targetframe Открывает связанный документ в именованном целевом кадре . |
_blank
Открывает связанный документ в новом окне или вкладке.
_self
Открывает связанный документ в том же фрейме.
_parent
Открывает связанный документ в родительском фрейме.
_Топ
Открывает связанный документ в полном теле окна.
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 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 .
<!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-ответе.
Например, если вы хотите, чтобы файл имени файла загружался по заданной ссылке, его синтаксис будет следующим.
#!/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 .