Linki HTML
Linki znajdują się na prawie wszystkich stronach internetowych. Łącza umożliwiają użytkownikom przechodzenie od strony do strony.
Łącza HTML — Hiperłącza
Łącza HTML to hiperłącza.
Możesz kliknąć łącze i przejść do innego dokumentu.
Kiedy najedziesz myszą na link, strzałka myszy zmieni się w małą rączkę.
Uwaga: link nie musi być tekstem. Link może być obrazem lub dowolnym innym elementem HTML!
Łącza HTML — składnia
Znacznik HTML <a>definiuje hiperłącze. Ma następującą składnię:
<a href="url">link text</a>
Najważniejszym atrybutem <a> elementu jest
hrefatrybut, który wskazuje miejsce docelowe linku.
Tekst linku to część, która będzie widoczna dla czytelnika.
Kliknięcie w tekst linku przeniesie czytelnika na podany adres URL.
Przykład
Ten przykład pokazuje, jak utworzyć łącze do W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Domyślnie linki będą wyświetlane we wszystkich przeglądarkach w następujący sposób:
- Nieodwiedzony link jest podkreślony i niebieski
- Odwiedzony link jest podkreślony i fioletowy
- Aktywny link jest podkreślony i czerwony
Wskazówka: Linki można oczywiście stylizować za pomocą CSS, aby uzyskać inny wygląd!
Łącza HTML — atrybut docelowy
Domyślnie połączona strona będzie wyświetlana w bieżącym oknie przeglądarki. Aby to zmienić, musisz określić inny cel łącza.
Atrybut określa , targetgdzie otworzyć połączony dokument.
Atrybut może mieć jedną z targetnastępujących wartości:
_self- Domyślna. Otwiera dokument w tym samym oknie/karcie, w którym został kliknięty_blank- Otwiera dokument w nowym oknie lub karcie_parent- Otwiera dokument w ramce nadrzędnej_top- Otwiera dokument w całym oknie
Przykład
Użyj target="_blank", aby otworzyć połączony dokument w nowym oknie przeglądarki lub na nowej karcie:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Bezwzględne adresy URL a względne adresy URL
W obu powyższych przykładach w atrybucie zastosowano bezwzględny adres URL (pełny adres internetowy) .href
Link lokalny (link do strony w tej samej witrynie) jest określany za pomocą względnego adresu URL (bez części „https://www”):
Przykład
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Linki HTML — użyj obrazu jako linku
Aby użyć obrazu jako linku, po prostu umieść <img>
tag wewnątrz <a>tagu:
Przykład
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link do adresu e-mail
Użyj
mailto:wewnątrz
hrefatrybutu, aby utworzyć łącze otwierające program pocztowy użytkownika (aby umożliwić im wysłanie nowej wiadomości e-mail):
Przykład
<a href="mailto:[email protected]">Send email</a>
Przycisk jako link
Aby użyć przycisku HTML jako łącza, musisz dodać trochę kodu JavaScript.
JavaScript pozwala określić, co dzieje się podczas określonych wydarzeń, takich jak kliknięcie przycisku:
Przykład
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Wskazówka: dowiedz się więcej o JavaScript w naszym samouczku JavaScript .
Tytuły linków
Atrybut określa dodatkowe informacje o titleelemencie. Informacje są najczęściej wyświetlane jako tekst podpowiedzi, gdy mysz przesuwa się nad elementem.
Przykład
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Więcej o bezwzględnych i względnych adresach URL
Przykład
Użyj pełnego adresu URL, aby utworzyć łącze do strony internetowej:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Przykład
Link do strony znajdującej się w folderze html w bieżącej witrynie internetowej:
<a href="/html/default.asp">HTML tutorial</a>
Przykład
Link do strony znajdującej się w tym samym folderze co bieżąca strona:
<a href="default.asp">HTML tutorial</a>
Możesz przeczytać więcej o ścieżkach plików w rozdziale Ścieżki plików HTML .
Podsumowanie rozdziału
- Użyj
<a>elementu, aby zdefiniować łącze - Użyj
hrefatrybutu, aby zdefiniować adres linku - Użyj
targetatrybutu, aby określić, gdzie otworzyć połączony dokument - Użyj
<img>elementu (wewnątrz<a>), aby użyć obrazu jako łącza - Użyj
mailto:schematu wewnątrzhrefatrybutu, aby utworzyć link otwierający program pocztowy użytkownika
Tagi linków HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .