Listy w HTML - nav - li

  • Praktyczne zadania
  • Teoria
  • Pomoce do ćwiczeń 

Jednym z podstawowych elementów są listy, które pozwalają uporządkować treści w logiczny sposób, oraz znacznik <nav>, który definiuje obszar nawigacji strony.

Listy i nawigacja są kluczowe, ponieważ:

  • ułatwiają czytelność treści,

  • wspierają użytkowników w poruszaniu się po stronie,

  • mają duże znaczenie dla dostępności i SEO.

W HTML mamy dwa podstawowe typy list:

Lista uporządkowana (<ol>) – (ordered list)

  • Elementy są numerowane (1, 2, 3…).

  • Używana, gdy kolejność ma znaczenie (np. instrukcje krok po kroku).

Przykład:

<ol>

<li>Krok pierwszy</li>
<li>Krok drugi</li>
<li>Krok trzeci</li>

</ol>

 

Lista nieuporządkowana (<ul>) – (unordered list)

  • Elementy oznaczone są punktami (●, ○, etc.).

  • Używana, gdy kolejność nie ma znaczenia (np. lista zakupów).

Przykład:

<ul>
<li>Mleko</li>
<li>Chleb</li>
<li>Masło</li>
</ul>

Element listy (<li>)

  • Każdy element w liście musi być zapisany w znaczniku <li>.

  • Może zawierać tekst, link, obraz, a nawet kolejną listę.

Nawigacja (<nav>)

  • Służy do grupowania linków nawigacyjnych (menu, spis treści, linki do podstron).

  • Powinien być stosowany tam, gdzie linki mają znaczenie dla struktury strony.

Przykład:

<nav>
     <ul>
                  <li><a href="index.html">Strona główna</a></li>
                  <li><a href="o-nas.html">O nas</a></li>
                  <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>
Przykład:

 

 

 

 

 

Zadanie:

  • Strona powinna mieć tytuł (w h1).

  • Co najmniej dwa podtytuły (h2) i jeden nagłówek niższego poziomu (h3 lub h4).

  • Minimum trzy akapity <p>.

  • Jedną listę nieuporządkowaną <ul> i jedną listę uporządkowaną <ol> (każda z co najmniej 3 elementami).

  • Przynajmniej jeden link zewnętrzny (np. do Wikipedii).

Przykład wykonania strony: 

 
 
 
 
 
 

Kontakt: mgzsp22@gmail.com

© 2024. Wszystkie prawa zastrzeżone.

error: Content is protected !!