Linki i nawigacja w HTML

W Starożytnym Egipcie piramidy kryły w sobie setki korytarzy, tajnych przejść i ukrytych komnat. Każde drzwi prowadziły gdzieś — do komnaty grobowej, skarbca lub kolejnego korytarza. Linki w HTML działają dokładnie tak samo! Są drzwiami, które prowadzą użytkownika z jednej strony na drugą, z jednej sekcji do innej, a nawet do e-maila czy telefonu. Mohamed mówi: "Bez linków internet byłby jak piramida bez drzwi — piękna, ale zamknięta na głucho!"

Znacznik

<a>

— drzwi piramidy

Linki w HTML tworzymy za pomocą znacznika

<a>

(od angielskiego "anchor" — kotwica). Najważniejszym atrybutem jest

href

(hypertext reference), który wskazuje dokąd prowadzi link:

1<a href="https://pl.wikipedia.org/wiki/Piramidy_w_Gizie">Piramidy w Gizie</a>

Tekst między

<a>

a

</a>

to treść linku — to, co użytkownik widzi i klika. Przeglądarka domyślnie wyświetla go jako niebieski, podkreślony tekst.

Struktura linku:

1<a href="ADRES_DOCELOWY">Tekst widoczny dla użytkownika</a>

• href

  — atrybut z adresem, dokąd prowadzi link (URL strony, plik, email...)
• Treść między znacznikami — to, co klikamy

Adresy URL — absolutne i relatywne

Tak jak w Egipcie możesz podać adres na dwa sposoby ("Kair, ulica Piramidowa 15" albo "dwa domy dalej"), w HTML mamy dwa rodzaje adresów:

Adres absolutny (pełna ścieżka)

Zawiera kompletny adres strony, łącznie z protokołem (

https://

) i domeną. Używaj go do linkowania zewnętrznych stron:

1<!-- Link do zewnętrznej strony -->
2<a href="https://www.britannica.com/place/ancient-Egypt">Encyklopedia o Egipcie</a>
3
4<!-- Link do konkretnej podstrony -->
5<a href="https://pl.wikipedia.org/wiki/Tutanchamon">Tutanchamon na Wikipedii</a>

Adres relatywny (ścieżka względna)

Wskazuje stronę w obrębie tego samego serwisu. Nie zawiera domeny — przeglądarka wie, że szuka pliku na tym samym serwerze:

1<!-- Link do pliku w tym samym folderze -->
2<a href="about.html">O mnie</a>
3
4<!-- Link do pliku w podfolderze -->
5<a href="pages/gallery.html">Galeria zdjęć</a>
6
7<!-- Link do pliku w folderze nadrzędnym -->
8<a href="../index.html">Strona główna</a>

Otwieranie w nowej karcie —

target

i

rel

Domyślnie kliknięcie linku otwiera stronę w tej samej karcie. Ale czasem chcesz, żeby link otworzył się w nowej karcie — np. gdy linkujesz do zewnętrznego źródła i nie chcesz, by użytkownik opuścił Twoją stronę:

1<a href="https://www.metmuseum.org" target="_blank" rel="noopener noreferrer">
2  Metropolitan Museum — Kolekcja Egipska
3</a>

Wyjaśnienie atrybutów:

• target="_blank"

  — otwiera link w nowej karcie przeglądarki

• rel="noopener noreferrer"

  — ważne dla bezpieczeństwa! Zapobiega dostępowi nowej strony do Twojej strony. Zawsze dodawaj ten atrybut razem z

  target="_blank"

Mohamed radzi: "Gdy linkujesz do obcego świata, zawsze używaj

rel="noopener noreferrer"

— to jak zamknięcie drzwi za sobą, żeby nikt nie wślizgnął się do twojej piramidy!"

Linki e-mail i telefon — posłańcy faraona

Link do e-maila (

mailto:

)

Prefiks

mailto:

w atrybucie

href

tworzy link, który otwiera domyślny program pocztowy:

1<a href="mailto:mohamed@piramidy.eg">Napisz do Mohameda</a>
2
3<!-- Z tematem wiadomości -->
4<a href="mailto:mohamed@piramidy.eg?subject=Pytanie o piramidy">
5  Wyślij pytanie o piramidy
6</a>

Link telefoniczny (

tel:

)

Prefiks

tel:

tworzy link, który na telefonach komórkowych uruchamia aplikację do dzwonienia:

1<a href="tel:+48123456789">Zadzwoń: +48 123 456 789</a>

Te linki są szczególnie przydatne na stronach mobilnych — użytkownik jednym kliknięciem dzwoni lub pisze e-mail!

Linki kotwicowe — nawigacja w obrębie strony

Wyobraź sobie długi zwój papirusu z wieloma rozdziałami. Zamiast przewijać cały zwój, chciałbyś wskoczyć od razu do konkretnego rozdziału. Linki kotwicowe (anchor links) pozwalają na nawigację w obrębie tej samej strony.

Krok 1: Nadaj

id

sekcji docelowej

Atrybut

id

to unikalny identyfikator elementu — jak numer komnaty w piramidzie:

1<h2 id="discoveries">Moje odkrycia</h2>
2<p>Treść o odkryciach...</p>
3
4<h2 id="contact">Kontakt</h2>
5<p>Treść o kontakcie...</p>

Krok 2: Stwórz link z

#

i nazwą

id

1<a href="#discoveries">Przejdź do odkryć</a>
2<a href="#contact">Przejdź do kontaktu</a>

Kliknięcie takiego linku przewija stronę do elementu z odpowiednim

id

. Znak

#

mówi przeglądarce: "szukaj elementu o tym id na tej samej stronie".

Powrót na górę

Popularna technika — link na dole strony, który wraca na górę:

1<!-- Na górze strony -->
2<h1 id="top">Moja strona o Egipcie</h1>
3
4<!-- Gdzieś na dole strony -->
5<a href="#top">Powrót na górę</a>

Przykład kompletnej nawigacji

Połączmy wszystkie rodzaje linków w jeden przykład:

1<h1 id="top">Portal Egipski</h1>
2
3<!-- Nawigacja wewnętrzna -->
4<p>
5  <a href="#history">Historia</a> |
6  <a href="#gallery">Galeria</a> |
7  <a href="#contact">Kontakt</a>
8</p>
9
10<h2 id="history">Historia Egiptu</h2>
11<p>Starożytny Egipt to jedna z najstarszych cywilizacji świata...</p>
12
13<h2 id="gallery">Galeria</h2>
14<p>Więcej zdjęć na
15  <a href="https://unsplash.com/s/photos/egypt" target="_blank" rel="noopener noreferrer">
16    Unsplash
17  </a>
18</p>
19
20<h2 id="contact">Kontakt</h2>
21<p>
22  <a href="mailto:info@portal-egipski.pl">Napisz do nas</a><br>
23  <a href="tel:+48111222333">Zadzwoń</a>
24</p>
25
26<a href="#top">Powrót na górę</a>

Podsumowanie

Mohamed podsumowuje: "Linki to kręgosłup internetu — bez nich strony byłyby odizolowanymi wyspami. Zapamiętaj kluczowe zasady:"

• <a href="URL">

  — tworzy link (kotwicę)
• Adresy absolutne (

  https://...

  ) — do zewnętrznych stron
• Adresy relatywne (

  about.html

  ) — do stron w tym samym serwisie

• target="_blank"

  +

  rel="noopener noreferrer"

  — bezpieczne otwieranie w nowej karcie

• mailto:

  — link e-mailowy,

  tel:

  — link telefoniczny

• href="#id"

  — linki kotwicowe do sekcji na tej samej stronie
• Atrybut

  id

  — unikalny identyfikator elementu