Izrada web stranice - liste (popisi)

Popisi (liste)

Postoje tri tipa lista:

• Neporedane (unordered)
• Poredane liste (ordered)
• Definicijske liste

Svaka lista mora imati svoj početak i kraj, a unutar tog dijela postavljaju se elementi liste

Primjer neporedane liste:

• Prva
• Druga
• Treća

Primjer poredane liste:

1. Prva
2. Druga
3. Treća

Neporedane liste

Svi članovi neporedane liste označeni su točkom.

Oznaka (tag) za neporedanu listu je <ul>, a element liste označava se oznakom: <li> (list item).

Primjer:

Rezultat HTML koda:

<ul>
  <li>Uvod u HTML</li>
  <li>Slika na web stranici</li>
  <li>Tablice</li>
  <li>Liste</li>
  <li>Poveznice</li>
</ul>

je:

• Uvod u HTML
• Slika na web stranici
• Tablice
• Liste
• Poveznice

Postoje tri vrste točke u neporedanoj listi:

• Disc

• Circle

• Square

Navode se u parametru TYPE, a ako se tip ne navede koristi se DISC Npr: <ul type = “circle”>

Zadatak 1

Tekst u donjoj lijevoj ćeliji u tablici u datoteci odgovori.htm postavite u neporedanu listu. Tip liste neka bude circle.

Izgled:

	Web dizajn – osnove HTML-a
Uvod u HTML Slika na web stranici Tablice Liste Poveznice	Odgovori na pitanja...

Poredane liste

Svaki element poredane liste označen je brojem ili slovom koje se povećava.
Elementi liste mogu se označavati:

• Običnim brojevima
• Velikim i malim slovima
• Velikim i malim rimskim brojevima

Također je moguće označiti od kojeg broja počinje lista.

Oznaka za poredanu listu je <ol>. Elementi liste počinju, kao i kod neporedane liste, oznakom <li>, a završavaju oznakom </li>

Označavanje elemanata liste

Za određivanje vrste elemenata u listi koristi se parametar Type. Ukoliko se ne navede, lista će se označavati običnim (arapskim brojevima).

Primjer:

Kod:

<ol>
<li>Prvi</li>
<li>Drugi</li>
<li>Treći</li>
</ol>

kao rezultat daje:

1. Prvi
2. Drugi
3. Treći

Zadatak 2

• Proučite na koji način se mogu elementi numerirane liste označavati slovima (malim i velikim), a na koji rimskim brojevima, te
• kako popis može krenuti od zadanog broja (ili slova), a ne od broja 1.
• Pokažite to na primjeru:
• Napravite dokument popisi.htm u kojem ćete objasniti definiranje poredanih i neporedanih lista, te objašnjeno pokazati na primjeru
• Izgled stranice popisi.htm uredite identično izgledu stranice odgovori.htm (tablica, slika i ostalo)

Izgled stranice popisi.htm:

	Web dizajn –popisi (liste)
Uvod u HTML Slika na web stranici Tablice Liste Poveznice	Objašnjenja i primjeri...