HTML - linki tekstowe
Strona internetowa może zawierać różne linki, które prowadzą bezpośrednio do innych stron, a nawet do określonych części danej strony. Te linki są znane jako hiperłącza.
Hiperłącza umożliwiają odwiedzającym nawigację między witrynami sieci Web poprzez klikanie słów, fraz i obrazów. W ten sposób możesz tworzyć hiperłącza za pomocą tekstu lub obrazów dostępnych na stronie internetowej.
Note- Zalecam przeczytanie krótkiego samouczka o zrozumieniu adresu URL
Łączenie dokumentów
Link jest określany za pomocą znacznika HTML <a>. Ten tag nazywa sięanchor taga wszystko pomiędzy tagiem otwierającym <a> a tagiem zamykającym </a> staje się częścią odsyłacza, a użytkownik może kliknąć tę część, aby dotrzeć do połączonego dokumentu. Poniżej znajduje się prosta składnia użycia znacznika <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>Przykład
Wypróbujmy następujący przykład, który łączy http://www.tutorialspoint.com na Twojej stronie -
<!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>Daje to następujący wynik, w którym możesz kliknąć wygenerowany link, aby przejść do strony głównej Tutorials Point (w tym przykładzie).
Atrybut docelowy
Użyliśmy targetatrybut w naszym poprzednim przykładzie. Ten atrybut służy do określenia lokalizacji, w której zostanie otwarty połączony dokument. Poniżej przedstawiono możliwe opcje -
| Sr.No | Opcja i opis |
|---|---|
| 1 | _blank Otwiera połączony dokument w nowym oknie lub karcie. |
| 2 | _self Otwiera połączony dokument w tej samej ramce. |
| 3 | _parent Otwiera połączony dokument w ramce nadrzędnej. |
| 4 | _top Otwiera połączony dokument w całej treści okna. |
| 5 | targetframe Otwiera połączony dokument w nazwanej ramce docelowej . |
Przykład
Spróbuj poniższego przykładu, aby zrozumieć podstawową różnicę w kilku opcjach podanych dla atrybutu docelowego.
<!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>Daje to następujący wynik, w którym możesz kliknąć różne linki, aby zrozumieć różnicę między różnymi opcjami podanymi dla atrybutu docelowego.
Korzystanie ze ścieżki podstawowej
W przypadku łączenia dokumentów HTML związanych z tą samą witryną nie jest wymagane podawanie pełnego adresu URL dla każdego łącza. Możesz się go pozbyć, jeśli używasz<base>tag w nagłówku dokumentu HTML. Ten znacznik służy do podania ścieżki podstawowej dla wszystkich łączy. Twoja przeglądarka połączy podaną ścieżkę względną z tą ścieżką podstawową i utworzy pełny adres URL.
Przykład
Poniższy przykład wykorzystuje tag <base> do określenia podstawowego adresu URL, a później możemy użyć względnej ścieżki do wszystkich linków zamiast podawania pełnego adresu URL dla każdego łącza.
<!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>Daje to następujący wynik, w którym można kliknąć wygenerowany link HTML Tutorial aby przejść do samouczka HTML.
Teraz podany adres URL <a href = "/html/index.htm" jest uważany za <ahref = "http://www.tutorialspoint.com/html/index.htm"
Łączenie do sekcji strony
Możesz utworzyć łącze do określonej sekcji danej strony internetowej za pomocą nameatrybut. To jest proces dwuetapowy.
Note- atrybut nazwy jest przestarzały w HTML5. Nie używaj tego atrybutu. Zamiast tego użyj atrybutu id i title .
Najpierw utwórz łącze do miejsca, do którego chcesz przejść na stronie internetowej i nazwij je za pomocą tagu <a ...> w następujący sposób -
<h1>HTML Text Links <a name = "top"></a></h1>Drugim krokiem jest utworzenie hiperłącza do linku do dokumentu i miejsca, do którego chcesz dotrzeć -
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Spowoduje to wygenerowanie następującego łącza, w którym można kliknąć wygenerowany link Go to the Top aby dotrzeć do początku samouczka HTML Text Link.
Go to the TopUstawianie kolorów łączy
Możesz ustawić kolory swoich linków, linków aktywnych i odwiedzonych linków za pomocą link, alink i vlink atrybuty tagu <body>.
Przykład
Zapisz poniższy plik w pliku test.htm i otwórz go w dowolnej przeglądarce internetowej, aby zobaczyć, jak to zrobić link, alink i vlink atrybuty działają.
<!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>Spowoduje to następujący wynik. Po prostu sprawdź kolor linku przed kliknięciem, a następnie sprawdź jego kolor podczas aktywacji i kiedy link został odwiedzony.
Pobierz linki
Możesz utworzyć łącze tekstowe, aby pobrać pliki PDF, DOC lub ZIP. To jest bardzo proste; wystarczy podać pełny adres URL pliku do pobrania w następujący sposób -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>Spowoduje to wygenerowanie następującego łącza i zostanie użyte do pobrania pliku.
Okno dialogowe pobierania pliku
Czasami pożądane jest udostępnienie opcji, w której użytkownik kliknie łącze i zamiast wyświetlać rzeczywistą zawartość, wyświetli się okno „Pobieranie pliku”. Jest to bardzo łatwe i można to osiągnąć za pomocą nagłówka HTTP w odpowiedzi HTTP.
Na przykład, jeśli chcesz utworzyć plik Filename plik do pobrania z podanego linku, jego składnia będzie następująca.
#!/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- Aby uzyskać więcej informacji na temat programów PERL CGI, przejdź do samouczka PERL i CGI .