Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

HTML: Hiperłącza

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 title do 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.
Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły