Spis treści z kotwicami

Listy, linki i obrazki - HTML i CSS: pierwsze strony (HTML/CSS/JS)

Link tworzy znacznik <a> z atrybutem href, czyli adresem celu. Gdy href zaczyna się od #, link prowadzi do elementu na tej samej stronie, który ma atrybut id o tej nazwie, na przykład href="#owoce" przenosi do <h2 id="owoce">. Takie miejsca nazywamy kotwicami. Kliknij link w spisie treści, a podgląd przewinie się do rozdziału.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Kotwice</title>
</head>
<body>
  <h1 id="gora">Warzywa i owoce</h1>
  <ul>
    <li><a href="#warzywa">Warzywa</a></li>
    <li><a href="#owoce">Owoce</a></li>
  </ul>
  <h2 id="warzywa">Warzywa</h2>
  <p>Marchewka, ogórek, papryka, pomidor.</p>
  <p>Warzywa jemy codziennie, najlepiej na surowo.</p>
  <p>Zupa z warzyw rozgrzewa zimą.</p>
  <h2 id="owoce">Owoce</h2>
  <p>Jabłko, gruszka, śliwka, truskawka.</p>
  <p>Owoce są słodkie dzięki naturalnemu cukrowi.</p>
  <p><a href="#gora">Wróć na górę</a></p>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu HTML i CSS: pierwsze strony · Zaloguj się, aby zapisać postęp na koncie.