Web programiranje → HTML, CSS i JavaScript → HTML: liste, tabele i delovi stranice

HTML: liste, tabele i delovi stranice

Liste

<h3>Neuređena lista (ul)</h3>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript
    <ul><li>DOM</li><li>događaji</li></ul>
  </li>
</ul>
<h3>Uređena lista (ol)</h3>
<ol>
  <li>Napiši HTML</li>
  <li>Dodaj CSS</li>
  <li>Oživi JavaScript-om</li>
</ol>

Rezultat:

ul (unordered) je spisak sa tačkama, ol (ordered) numerisan spisak, a svaka stavka je li. Lista može biti unutar stavke druge liste. Uređena lista ima atribute start="5" (od kog broja) i type="a" (slova umesto brojeva). Navigacioni meniji sajtova najčešće su neuređene liste linkova.

Tabele

<table border="1" cellpadding="6">
  <caption>Rezultati – opštinsko takmičenje</caption>
  <thead>
    <tr><th>Ime</th><th>Razred</th><th>Bodovi</th></tr>
  </thead>
  <tbody>
    <tr><td>Ana</td><td>7</td><td>300</td></tr>
    <tr><td>Marko</td><td>7</td><td>245</td></tr>
    <tr><td colspan="2">Prosek</td><td>272,5</td></tr>
  </tbody>
</table>

Rezultat:

Atributi border i cellpadding su ovde samo da se tabela vidi bez CSS-a; u pravim projektima izgled tabele se zadaje CSS-om. Tabele služe za podatke, ne za raspoređivanje delova stranice – za raspored se koristi CSS (flexbox i grid).

Semantički delovi stranice

Ranije su se svi delovi stranice pravili od div elemenata. Danas postoje elementi koji kažu šta je koji deo:

┌──────────────── header ─────────────────┐
│  logo, naslov sajta                      │
├──────────────── nav ────────────────────┤
│  Početna | Projekti | Kontakt            │
├──────── main ─────────────┬── aside ────┤
│  section                   │  dodatno:   │
│    article                 │  linkovi,   │
│    article                 │  reklame    │
├──────────────── footer ─────────────────┤
│  © 2026, kontakt                         │
└─────────────────────────────────────────┘

<header>
  <h1>Školski kodeks</h1>
  <nav>
    <a href="#">Početna</a> | <a href="#">Projekti</a> | <a href="#">Kontakt</a>
  </nav>
</header>
<main>
  <article>
    <h2>Naš prvi sajt</h2>
    <p>Članak sa svojim naslovom i tekstom.</p>
  </article>
</main>
<footer>
  <p>&copy; 2026 Informatička sekcija</p>
</footer>

Rezultat:

Izgledaju kao obični blokovi, ali pomažu čitačima ekrana (korisnik može da „skoči“ na glavni sadržaj), pretraživačima i tebi samom/samoj kada čitaš kod. Element div se i dalje koristi – za grupisanje koje nema posebno značenje, najčešće zbog CSS-a. Njegov par za deo teksta u redu je span.

Blok i linijski elementi

Ova razlika je važna za CSS: širina i visina se zadaju blok elementima, a ne linijskim (o tome u lekciji Box model).

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

Proveri znanje