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 .