SIJWP-LV7 | uurm

LV7: Liste i tablice

PRIPREMA:

1. Što omogućuju liste? Koje dvije osnovne vrste lista razlikujemo?

Liste omogućuju grupiranje povezanih item-a. Razlikujemo uređene I neuređene.

2.Što omogućuju tablice?

Tablice omogućuju raspodjelu podataka u redove i stupce.

VJEŽBA:

A. Istražite koje vrijednosti može imati atribut list-style-type kod neuređenih lista  

osim navedenog “none”. Primijenite te vrijednosti i uočite kako izgledaju te oznake na stranici u pregledniku. 

Atribut list-style-type kod neuređenih lista može poprimiti vrijednosti: square, disc i circle.

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. 

<!DOCTYPE html>

<html>

<body>

<p>Recept za Cheesecake</p>

<ul>

<li>300g mljevenih plazma keksa</li>

<li>187,5g maslaca</li>

<li>3 žlice meda</li>

<li>10-16dkg šećera u prahu</li>

<li>250ml vrhnja za šlag</li>

<li>1 instant želatina</li>

</ul>

<ol>

<li>izmjesiti biskvit i raširiti kalupu</li>

<li>U 2dcl soka od kompota ukuhati 4-5 žlica šećera i dodati šumsko voće</li>

<li>Kuhati 10 minuta i dodati jednu instant želatinu</li>

<li>Preliti preko sira i ostaviti u zamrzivaču preko noći</li>

</ol>

<a href="https://domacica.com.hr/cheesecake-iz-torte-i-to/">Domacica</a>

<a href="https://www.coolinarika.com/recept/the-perfect-cheesecake/">Coolinarika</a>

<a href="https://finirecepti.net.hr/priprema/torta-od-sira-cheesecake/">finirecepti</a>

</body>

</html>

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.  

<html>

<body>

<ol>

<li>APLIKACIJSKI SLOJ</li>

<ul>

</ul>

<li>PREZENTACIJSKI SLOJ</li>

<ul>

</ul>

<li>SLOJ SESIJE</li>

<ul>

<li>SOCKETS</li>

</ul>

<li>TRANSPORTNI SLOJ</li>

<ul>

</ul>

<li>MREŽNI SLOJ</li>

<ul>

<li>IPSec</li>

</ul>

<li>SLOJ PODATKOVNE VEZE</li>

<ul>

<li>Ethernet</li>

<li>SLLIP</li>

</ul>

<li>FIZIČKI SLOJ</li>

<ul>

<li>Fiber</li>

<li>Wireless</li>

</ul>

</ol>

</body>

</html> 

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.

<html>

<body>

<dl>

<dt>Python</dt>

<dd>-jednostavan skriptni jezik koji se može koristiti u razne svrhe npr. Umjetna inteligencija, financije...</dd>

<dt>JavaScript</dt>

<dd>-najpoznatiji skriptni jezik za kreiranje interaktivnih web stranica. Koristi se izradu web stranica i mobilnih aplikacija</dd>

<dd>-programski jezik najčešće korišten za development klijent-server aplikacija. Također koristi se u Android operacijskom sustavu</dd>

<dd>-programski jezik koji je brža i sigurnija varijanta C jezika. Koristi se za izradu Microsoft i Windows aplikacija.</dd>

<dd>-programski jezik koji služi kao dobra podloga za uvod u programiranje. Može se pokrenuti na bilo kojoj vrsti uređaja. Koristi se za programiranje hardware-a npr. uređaji u automobilima, te medicinskim uređajima.</dd>

<dd>-programski jezik koji je kreiran kao nadogradnja na C programski jezik. Odličan je za programiranje sistema koji pokreču aplikacije. Koristi se za sve od programiranje video igara do matematičkih simulacija.</dd>

<dd>-programski jezik proizveden od strane Google-a za programiranje na sistemskom nivou. Koristi se u aplikacijama koje obrađuju veliku količinu podataka.</dd>

<dd>-programski jezik koji se koristi u statističkoj analizi.</dd>

<dt>Swift</dt>

<dd>-prgramski jezik proizvezen od strane Apple-a za proizvodnju aplikacija na Mac računala. Koristi se za razvoj iOS i macOS aplikacija</dd>

<dd>-skriptni jezik koji se koristi za server-side web programiranje. Koriste ga kompanije kao Facebook, WordPress i Wikipedia...</dd>

</dl>

</body>

</html> 

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. 

Način označavanje uređene liste, pomoću atributa type se može promijeniti:

Type=“1“ – LISTA ĆE BITI ODREĐENA BROJEVIMA

Type=“A“ – LISTA ĆE BITI ODREĐENA SA VELIKIM SLOVIMA

Type=“a“ – LISTA ĆE BITI ODREĐENA SA MALIM SLOVIMA

Type=“I“ – LISTA ĆE BITI ODREĐENA VELIKIM RIMSKIM BROJEVIMA

Type=“i“ – LISTA ĆE BITI ODREĐENA MALIM RIMSKIM BROJEVIMA

2. HTML TABLICE

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:

<html>

<head>

<title> RASPORED SATI </title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

</style>

</head>

<body>

<tr>

<th>Ponedeljak</th>

<th>Utorak</th>

<th>Srijeda</th>

<th>Četvrtak</th>

<th>Petak</th>

</tr>

<tr>

<td>DIOIS</td>

</tr>

<tr>

</tr>

<tr>

<td>SJIWP</td>

</tr>

<tr>

<td>SJIWP</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html> 

 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.

<html>

<head>

<title> RASPORED SATI </title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

</style>

</head>

<body>

<tr>

<th>Ponedeljak</th>

<th>Utorak</th>

<th>Srijeda</th>

<th>Četvrtak</th>

<th>Petak</th>

</tr>

<tr>

<td>DIOIS</td>

</tr>

<tr>

</tr>

<tr>

<td rowspan="2">SJIWP</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html> 

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

<html>

<head>

<title> RASPORED SATI </title>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

</style>

</head>

<body>

<tr>

<th style="background-color:#9234eb">Ponedeljak</th>

<th style="background-color:#9234eb">Utorak</th>

<th style="background-color:#9234eb">Srijeda</th>

<th style="background-color:#9234eb">Četvrtak</th>

<th style="background-color:#9234eb">Petak</th>

</tr>

<tr>

<td style="background-color:#eb3446">DIOIS</td>

</tr>

<tr>

</tr>

<tr>

<td style="background-color:#232940" rowspan="2">SJIWP</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>