Cilj vježbe:
Učenik će moći ugraditi liste i tablice i primijeniti oblikovanje lista (popisa) i tablica prilikom
uređivanja sadržaja mrežnih stranica.

Priprema za vježbu:

Zadatak 1: Što omogućuju liste? Koje dvije osnovne vrste lista razlikujemo? (pomoć:
https://www.w3schools.com/html/html_lists.asp).
Odgovor: Liste koristimo kad želimo oragnizirati stranicu te joj dati bolju preglednost. Postoje dvije vrste listi, one koje su ako natuknice (sa točkama ispred sebe) i brojčane.

Zadatak 2: Što omogućuju tablice? (pomoć: https://www.w3schools.com/html/html_tables.asp)
Odgovor: Omogućuju nam razvrstavanje podataka po retcima i stupcima po određenim svojstvima.

Vježba:

1. Liste:

Neuređena lista počinje elementom <ul> . Svaki stavak liste započinje elementom <li>. Stavci liste podrazumijevano se označuju malim crnim kružićima. Primjer:
<ul>
<li>nogomet</li>
<li>rukomet</li>
<li>košarka</li>
</ul>
Uređena lista počinje elementom <ol>. Svaki stavak liste počinje elementom <li>. Stavci su podrazumijevano označeni brojevima. Primjer:
<ol>
<li>Otvoriti knjigu</li>
<li>Otvoriti bilježnicu</li>
<li>Napisati zadaću</li>
</ol>
Opisna lista je lista pojmova sa njihovim opisima. Takvu listu definiramo elementom <dl>, pri čemu element <dt> definira pojam, a <dd> ga opisuje. Primjer:
<dl>
<dt>Kava</dt>
<dd>- vrući crni napitak</dd>
<dt>Mlijeko</dt>
<dd>- bijeli hladni napitak</dd>
</dl>

A. Istražite koje vrijednosti može imati atribut list-style-type kod neuređenih lista <ul style="liststyle type:none;"> osim navedenog “none”. Primijenite te vrijednosti i uočite kako izgledaju te oznake na stranici u pregledniku.

Može imati sljedeće vrijednosti:

disc - deafult marker, kružič ispred svake natuknice je ispunjen

circle - kružni marker, kružić je bez ispune

square - kvadratičasti marker, crni kvadratići

none - neće imatui marker

    B. Napravite stranicu na kojoj će biti tekst recepta za vama ukusno jelo. Tekst mora sadržavati
   naslov, sliku, neuređenu listu namirnica sa količinama, uređenu listu postupaka izrade jela, te
   najmanje tri poveznice na druge recepte za to isto jelo.

C. Napravite stranicu na kojoj ćete kreirati ugnježđenu listu popisa slojeva OSI modela sa po pet
značajnih protokola za svaki sloj. Nazivi slojeva trebaju biti uređena lista, a nazivi protokola
neuređena.

D. Napravite stranicu na kojoj ćete kreirati opisnu listu deset najpopularnijih programskih jezika. U opisu

programskog jezika treba u rečenici ili dvije biti njegovo područje primjene i kategorizacija (skriptni, za

označavanje i sl.). Dodatno na kraju stranice treba biti navedena poveznica na stranicu koja je poslužila

kao izvor podataka.

E. Istražite kako se pomoću atributa type može promijeniti način označavanja uređene liste, te
kako se može promijeniti i kontrolirati raspon označavanja. Zabilježite naučeno.

Atribut type mijenja tip označavanja liste:

1. type="1" Numeracija sa brojevima (default)

2. type="A" Numeracija s velikim slovima

3. type="a" Numeracija s malim slovima

4. type="I" Numeracija s velikim rimskim brojevima

5. type="i" Numeracija s malim rimskim brojevima

Npr: ako napišemo type="I" start="10" lista će počet s brojanjem od rimskog broja 10, uključujući deset.

2. HTML tablice

Element <table> definira HTML tablicu. Svaki redak tablice definiran je elementom <tr>. Zaglavlja
stupaca tablice definirana su elementima <th>, a svaki podatak (ćelija) sa elementom <td>.
Podrazumijevano, tekst u <th> elementima je podebljan i centriran, a u <td> elementima pisan je
obično i lijevo poravnat.
Neki atributi koji se mogu primijeniti na tablicama: border: 1px solid black; border-collapse:
collapse; padding: 15px; text-align: left; border-spacing: 5px;
Kad je potrebno redovi i stupci tablice mogu se spajati: <th colspan="2">Telefon</th>, odnosno
<th rowspan="2">Telefon:</th>
Tablici se može pridružiti naslov sa: <caption>Mjesečni troškovi</caption>

A. Napravite web stranicu sa dvije tablice (možete odabrati AB ili BA tjedan):

Prva tablica: prikazuje raspored sati tako da svaki sat ima svoje polje u tablici, npr.

Druga tablica: prikazuje raspored sati tako da su tzv. blok satovi (npr. Laboratorijske
vježbe) prikazani objedinjeno (merge). Tekst za naziv predmeta pozicionirajte centrirano
vodoravno,a okomito prema želji.

B. Uredite tablice bojama, tako da npr. svaki predmet bude prikazan drugačijom bojom.
Napravite i ostala oblikovanja prema želji i stečenim vještinama.

Cilj vježbe: Učenik će moći ugraditi liste i tablice i primijeniti oblikovanje lista (popisa) i tablica prilikom uređivanja sadržaja mrežnih stranica.

Priprema za vježbu:

​

​

Zadatak 2: Što omogućuju tablice? (pomoć: https://www.w3schools.com/html/html_tables.asp) Odgovor: Omogućuju nam razvrstavanje podataka po retcima i stupcima po određenim svojstvima.

​

​

Vježba:

​

1. Liste:

​

Neuređena lista počinje elementom <ul> . Svaki stavak liste započinje elementom <li>. Stavci liste podrazumijevano se označuju malim crnim kružićima. Primjer: <ul> <li>nogomet</li> <li>rukomet</li> <li>košarka</li> </ul>

Uređena lista počinje elementom <ol>. Svaki stavak liste počinje elementom <li>. Stavci su podrazumijevano označeni brojevima. Primjer: <ol> <li>Otvoriti knjigu</li> <li>Otvoriti bilježnicu</li> <li>Napisati zadaću</li> </ol>

Opisna lista je lista pojmova sa njihovim opisima. Takvu listu definiramo elementom <dl>, pri čemu element <dt> definira pojam, a <dd> ga opisuje. Primjer: <dl> <dt>Kava</dt> <dd>- vrući crni napitak</dd> <dt>Mlijeko</dt> <dd>- bijeli hladni napitak</dd> </dl>

​

A. Istražite koje vrijednosti može imati atribut list-style-type kod neuređenih lista <ul style="liststyle type:none;"> osim navedenog “none”. Primijenite te vrijednosti i uočite kako izgledaju te oznake na stranici u pregledniku.

​

Može imati sljedeće vrijednosti:

disc - deafult marker, kružič ispred svake natuknice je ispunjen

circle - kružni marker, kružić je bez ispune

square - kvadratičasti marker, crni kvadratići

none - neće imatui marker

​

B. Napravite stranicu na kojoj će biti tekst recepta za vama ukusno jelo. Tekst mora sadržavati naslov, sliku, neuređenu listu namirnica sa količinama, uređenu listu postupaka izrade jela, te najmanje tri poveznice na druge recepte za to isto jelo.

​

C. Napravite stranicu na kojoj ćete kreirati ugnježđenu listu popisa slojeva OSI modela sa po pet značajnih protokola za svaki sloj. Nazivi slojeva trebaju biti uređena lista, a nazivi protokola neuređena.

D. Napravite stranicu na kojoj ćete kreirati opisnu listu deset najpopularnijih programskih jezika. U opisu

programskog jezika treba u rečenici ili dvije biti njegovo područje primjene i kategorizacija (skriptni, za

označavanje i sl.). Dodatno na kraju stranice treba biti navedena poveznica na stranicu koja je poslužila

kao izvor podataka.

E. Istražite kako se pomoću atributa type može promijeniti način označavanja uređene liste, te kako se može promijeniti i kontrolirati raspon označavanja. Zabilježite naučeno.

​

Atribut type mijenja tip označavanja liste:

​

Druga tablica: prikazuje raspored sati tako da su tzv. blok satovi (npr. Laboratorijske vježbe) prikazani objedinjeno (merge). Tekst za naziv predmeta pozicionirajte centrirano vodoravno,a okomito prema želji.

B. Uredite tablice bojama, tako da npr. svaki predmet bude prikazan drugačijom bojom. Napravite i ostala oblikovanja prema želji i stečenim vještinama.

Cilj vježbe:
Učenik će moći ugraditi liste i tablice i primijeniti oblikovanje lista (popisa) i tablica prilikom
uređivanja sadržaja mrežnih stranica.

Zadatak 2: Što omogućuju tablice? (pomoć: https://www.w3schools.com/html/html_tables.asp)
Odgovor: Omogućuju nam razvrstavanje podataka po retcima i stupcima po određenim svojstvima.

Neuređena lista počinje elementom <ul> . Svaki stavak liste započinje elementom <li>. Stavci liste podrazumijevano se označuju malim crnim kružićima. Primjer:
<ul>
<li>nogomet</li>
<li>rukomet</li>
<li>košarka</li>
</ul>

Uređena lista počinje elementom <ol>. Svaki stavak liste počinje elementom <li>. Stavci su podrazumijevano označeni brojevima. Primjer:
<ol>
<li>Otvoriti knjigu</li>
<li>Otvoriti bilježnicu</li>
<li>Napisati zadaću</li>
</ol>

Opisna lista je lista pojmova sa njihovim opisima. Takvu listu definiramo elementom <dl>, pri čemu element <dt> definira pojam, a <dd> ga opisuje. Primjer:
<dl>
<dt>Kava</dt>
<dd>- vrući crni napitak</dd>
<dt>Mlijeko</dt>
<dd>- bijeli hladni napitak</dd>
</dl>

B. Napravite stranicu na kojoj će biti tekst recepta za vama ukusno jelo. Tekst mora sadržavati
naslov, sliku, neuređenu listu namirnica sa količinama, uređenu listu postupaka izrade jela, te
najmanje tri poveznice na druge recepte za to isto jelo.

C. Napravite stranicu na kojoj ćete kreirati ugnježđenu listu popisa slojeva OSI modela sa po pet
značajnih protokola za svaki sloj. Nazivi slojeva trebaju biti uređena lista, a nazivi protokola
neuređena.

E. Istražite kako se pomoću atributa type može promijeniti način označavanja uređene liste, te
kako se može promijeniti i kontrolirati raspon označavanja. Zabilježite naučeno.

Druga tablica: prikazuje raspored sati tako da su tzv. blok satovi (npr. Laboratorijske
vježbe) prikazani objedinjeno (merge). Tekst za naziv predmeta pozicionirajte centrirano
vodoravno,a okomito prema želji.

B. Uredite tablice bojama, tako da npr. svaki predmet bude prikazan drugačijom bojom.
Napravite i ostala oblikovanja prema želji i stečenim vještinama.