Podstawy•LEKCJA 06 / 22

Odnośniki wewnętrzne

Kurs HTML · Wyjaśnienie, przykłady, oczekiwany wynik i ćwiczenie.

Link może prowadzić do elementu na tej samej stronie przez identyfikator id i fragment #.

Cel lekcji

Poznać zagadnienie „Odnośniki wewnętrzne”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Dzięki temu zbudujesz proste menu spisu treści.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Widok w przeglądarce

<a href="#kontakt">Przejdź do kontaktu</a>
<section id="kontakt"><h2>Kontakt</h2></section>

Przeczytaj kod linijka po linijce

  1. <a href="#kontakt">Przejdź do kontaktu</a>Tworzymy odnośnik; jego adres znajduje się w atrybucie href.
  2. <section id="kontakt"><h2>Kontakt</h2></section>Ten znacznik określa element lub strukturę dokumentu.
Oczekiwany wynik / efektpo uruchomieniu przykładu
Kliknięcie linku przewija stronę do sekcji Kontakt.
◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Utwórz link do sekcji „O mnie”.

To już koniec tej lekcji.

Jeśli rozumiesz przykład, oznacz lekcję jako ukończoną i przejdź dalej.