Linki — HTML — kod. pyk

Linki pozwalają przejść do innej strony lub zasobu.

Jak to działa?

Element <a> z href tworzy odnośnik. Tekst linku powinien informować o celu. Przy target="_blank" warto dodać rel="noopener noreferrer".

Przykład 1 — poznaj zapis

<a href="https://developer.mozilla.org/pl/"
   target="_blank"
   rel="noopener noreferrer">
  Dokumentacja MDN
</a>

Kliknięcie otworzy dokumentację w nowej karcie.

Przeczytaj kod linijka po linijce

<a href="https://developer.mozilla.org/pl/"Tworzymy odnośnik; jego adres znajduje się w atrybucie href.
</a>Ten znacznik określa element lub strukturę dokumentu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Klikalny odnośnik „Dokumentacja MDN”.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

<a href="#kontakt">Kontakt</a><h2 id="kontakt">Kontakt</h2>

Wynik drugiego przykładupo uruchomieniu przykładu

Link przenosi do sekcji o id kontakt.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj link do drugiego pliku HTML w tym samym katalogu.