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%20o%20piramidy">
5  Wyślij pytanie o piramidy
6</a>

Spacje w adresie zapisujemy jako %20.

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

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Linki w HTML</title>
6</head>
7<body>
8    <h1 id="top">Linki i nawigacja</h1>
9
10    <nav>
11        <a href="#section1">O Egipcie</a> |
12        <a href="#section2">Zabytki</a> |
13        <a href="#contact">Kontakt</a>
14    </nav>
15
16    <hr>
17
18    <h2 id="section1">O Starożytnym Egipcie</h2>
19    <p>Egipt to fascynująca cywilizacja.
20       <a href="https://pl.wikipedia.org/wiki/Starożytny_Egipt" target="_blank" rel="noopener noreferrer">Czytaj więcej na Wikipedii</a>
21    </p>
22
23    <h2 id="section2">Najważniejsze zabytki</h2>
24    <p>Piramida Cheopsa, Sfinks, Świątynia Karnak.</p>
25
26    <h2 id="contact">Kontakt</h2>
27    <p>Email: <a href="mailto:mohamed@piramidy.eg">mohamed@piramidy.eg</a></p>
28    <p>Telefon: <a href="tel:+20123456789">+20 123 456 789</a></p>
29
30    <p><a href="#top">↑ Wróć na górę</a></p>
31</body>
32</html>