piątek,
HTML: Hiperłącza
Hiperłącza, powszechnie znane jako linki, są typowym elementem stron internetowych, służącym do nawigacji między różnymi stronami i zasobami w Internecie. W języku HTML hiperłącza tworzy się za pomocą znacznika <a>, który jest skrótem od angielskiego słowa "anchor" (kotwica). Odpowiednie używanie hiperłączy jest ważne dla nawigacji i ogólnej użyteczności strony internetowej. Linki powinny być łatwe do znalezienia i powinny jednoznacznie wskazywać, dokąd prowadzą.
Hiperłącza w języku HTML
Podstawowa składnia
<a href="url">tekst linku<a>
- href: Atrybut
href(hypertext reference) określa docelowy adres URL, do którego link prowadzi. Może to być ścieżka do innej strony na Twojej witrynie lub do zewnętrznego zasobu. - Tekst linku: Tekst pomiędzy otwierającym a zamykającym tagiem
<a>jest widoczny dla użytkowników i na niego klikają, aby przejść do docelowego adresu URL. Tekst linku powienen dobrze opisywać lokalizację, do której prowadzi.
Przykłady hiperłączy
Link z pełnym adresem strony
<a href="https://ckziumragowo.pl">Strona CKZiU Mrągowo<a>
Link do wewnętrznej Strony
<a href="galeria.html">Galeria zdjęć<a>
Link Prowadzący do sekcji na tej samej stronie
<!-- Link do sekcji -->
<a href="#foto">Przejdź do zdjęć<a>
<!-- Miejsce docelowe -->
<h2 id="foto">Zdjęcia</h2>
Otwieranie linku w nowej zakładce
<a href="https://www.przyklad.com" target="_blank">Odwiedź przykład.com w nowej zakładce<a>
Ta opcja powinna być używana z rozwagą, otwieranie każdej strony w nowej zakładce nigdy nie jest mile widziane przez odwiedzającego. Świadomy użytkownik w razie takiej potrzeby bez trudu otworzy link w nowej zakładce.
Link e-mail
<a href="mailto:przyklad@przyklad.com">Wyślij e-mail<a>
Taki link otworzy klienta poczty elektronicznej zainstalowanego na komputerze odwiedzającego. Z uwagi na to, że obecnie większość użytkowników korzysta z poczty za pomocą przeglądarki internetowej, takie rozwiązanie jest przydatne tylko w niektórych sytuacjach,
Link telefoniczny (dla urządzeń mobilnych)
<a href="tel:+123456789">Zadzwoń do nas<a>
Dodatkowe atrybuty hiperłączy
- title: Można dodać opcjonalny atrybut
titledo linku, co spowoduje wyświetlenie podpowiedzi po najechaniu na link kursorem myszy. - style: Można dostosować styl linku można za pomocą CSS, np. zmieniając kolor, rozmiar czcionki itp.
Style CSS hiperłączy
Arkusze stylów CSS umożliwiają dostosowanie wyglądu linków, w tym koloru, rozmiaru czcionki, dekoracji tekstu itp. Można także zdefiniować różne style dla różnych stanów linku (np. hover, active).
Adresy względne i bezwzględne
W HTML hiperłącza mogą wykorzystywać zarówno adresy względne, jak i bezwzględne, aby wskazać docelowe lokalizacje. Różnica między nimi leży w sposobie, w jaki określają ścieżkę do zasobu.
Adres bezwzględny (Absolute URL)
- Adres bezwzględny wskazuje pełną ścieżkę do zasobu i zawiera pełną informację o lokalizacji, włączając w to protokół (np. http, https), nazwę hosta i pełną ścieżkę do zasobu.
- Jest niezależny od lokalizacji strony, na której się znajduje i zawsze prowadzi do tego samego miejsca.
Przykład
<a href="https://www.przyklad.com/galeria.html">Odwiedź naszą galerię<a>
Adres względny (Relative URL)
- Adres względny określa ścieżkę do zasobu względem bieżącej lokalizacji. Nie zawiera nazwy domeny.
- Jest zależny od lokalizacji strony, na której się znajduje. Ścieżka jest rozwiązana przez przeglądarkę względem bieżącej ścieżki URL.
Przykład (zakładając, że znajdujesz się na https://www.przyklad.com/podstrona/)
<a href="galeria.html">Odwiedź inną naszą galerię<a>
Powyższy link prowadziłby do https://www.przyklad.com/podstrona/galeria.html.
Jakiego adresu używać?
Adresy bezwzględne
- Gdy odnoszą się do zasobów zewnętrznych (na innych domenach).
- Gdy struktura folderów witryny może ulec zmianie, co mogłoby wpłynąć na rozwiązanie adresów względnych.
Adresy względne
- Gdy odnoszą się do zasobów w obrębie tej samej domeny.
- Ułatwiają przenoszenie witryny między różnymi domenami lub środowiskami (np. z testowego na produkcyjne) bez konieczności zmiany wszystkich linków.
