Vježba 7: Liste i tablice
Leon Kolarić
1. Što omogućuju liste? Koje dvije osnovne vrste lista razlikujemo?
Liste nam omogućuju grupiranje povezanih podataka zajedno. Postoje uređene i neuređene liste.
2. Što omogućuju tablice?
Tablice omogućuju programerima da rasporede podatke u retke i stupce.
1. Liste
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.
Lista može imati slijedeće atribute:
list-style: disc inside;
list-style: circle inside;
list-style: circle outside;
list-style: square inside;
list-style: upper-roman inside;
list-style: lower-alpha inside;
list-style: disc inside url(“smiley.gif”);
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>
<head>
<title>ZADATAK</title>
</head>
<body>
<h1>Palačinke</h1>
<img src=”https://www.dnevno.hr/wp-content/uploads/2020/04/pala%C4%8Dinke.jpg” <alt=”Palačinke”>
<ul>
<li>2 cijela jaja</li>
<li>200 g glatkoga brašna</li>
<li>200 ml mlakog mlijeka</li>
<li>200 ml gazirane mineralne vode</li>
<li>1 žlica ulja</li>
<li>1 žlica otopljenog maslaca</li>
<li>prstohvat soli</li>
</ul>
<hr>
<ol>
<li>Umutiti jaja, dodati polovicu mlijeka i brašna te sve lijepo sjediniti. Zatim dodati drugu polovicu mlijeka, mineralnu vodu, ulje, maslac, sol i lagano dodavajući brašno umutiti u jednoličnu smijesu bez grudica. Ostaviti da odstoji 20-ak minuta da se, ako je slučajno ostala koja, može istopiti i zadnja mrvica brašna.</li>
<hr>
<li>
Tavu za palačinke podmazati sa par kapi ulja (ja koristim silikonsku četkicu za kolače) i dobro je zagrijati. To ponavljeti svaki put prije nego što sipate smijesu u tavicu.
</li>
<hr>
<li>
Istresti jednu kutlaču smijese i ravnomijerno je razliti po tavi. Peći kratko, minutu, dvije, pa je preokrenuti na drugu stranu i ispeći da porumeni.
</li>
<hr>
<li>Pečene palačinke slagati na tanjur, jednu na drugu, te nakon što ste ispekli zadnju poklopiti prevrnutim tanjurom.
</li>
</ol>
<hr>
<a href=”https://www.coolinarika.com/recept/palacinke-osnovni-recept-b0192850-6386-11eb-8d23-0242ac120039” target=”_blank”>Coolinarka</a>
<br>
<a href=”https://zadovoljna.dnevnik.hr/clanak/zdravlje-prehrana/recept-za-najfinije-mekane-palacinke—303775.html” target=”_blank”>Zadovoljna.hr</a>
<br>
<a href=”https://www.jutarnji.hr/dobrahrana/recepti/napokon-smo-pronasli-onaj-jedan-recept-za-palacinke-uz-koji-uspijevaju-cak-i-totalnim-amaterima-15384137” target=”_blank”>Jutarnji list</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
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ol>
<li>Fizički sloj</li>
<ul>
<li>Token Ring</li>
<li>IEEE 802.11</li>
<li>RS-232C</li>
</ul>
<li>Podatkovni sloj</li>
<ul>
<li>PPP</li>
<li>HDLC</li>
<li>Frame Relay</li>
</ul>
<li>Mrežni sloj</li>
<ul>
<li>IP</li>
<li> ICMP</li>
<li> ARP</li>
</ul>
<li>Transportni sloj</li>
<ul>
<li>UDP</li>
<li>TCP</li>
<li>SCTP</li>
</ul>
<li>Sloj sesije</li>
<ul>
<li>NetBIOS</li>
<li>CHAP</li>
<li>PAP</li>
</ul>
<li>Prezentacijski sloj</li>
<ul>
<li>AFP</li>
<li>ICA</li>
<li>LPP</li>
</ul>
<li> Aplikacijski sloj</li>
<ul>
<li>HTTP</li>
<li>Telnet</li>
<li>DNS</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.
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>JavaSkript</dt>
<dd>-JavaScript je najpopularniji programski jezik na svijetu te time i najpopularniji skriptni jezik na svijetu koji se korisit pri izradi weba. </dd>
<dt>Python</dt>
<dd>-Python je skriptni jezik koji se obično koristi za razvoj web stranica i softvera, automatizaciju zadataka, analizu podataka i vizualizaciju podataka.</dd>
<dt>Java</dt>
<dd>-Java je popularni objektno orijentirani programski jezik koji se koristi za izradu mobilnih aplikacija, web aplikacijam, desktop apliacija te video igara.</dd>
<dt>C++</dt>
<dd>-C++ je višeplatformski jezik koji se može koristiti za izradu aplikacija visokih performansi.</dd>
<dt>Rust</dt>
<dd>Rust je programski jezik opće namjene čiji je naglasak na performanse, a korsti se za izradu operacijskih susatava, igara i web aplikacija</dd>
</dl>
</body>
</html>
<a href=”https://www.w3schools.com/js/default.asp”_blank”>JavaSkript</a>
<br>
<a href=”https://www.w3schools.com/python/default.asp”_blank”>Python</a>
<br>
<a href=”https://www.w3schools.com/java/default.asp” target=”_blank”>Java</a>
<br>
<a href=”https://www.w3schools.com/cpp/” target=”_blank”>C++</a>
<br>
<a href=”https://en.wikipedia.org/wiki/Rust_(programming_language)”_blank”>Rust </a>
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.
Pomoću atributa type služi za označavanje oznake element.
- type=“1”: Numeracija sa brojevima (zadana vrijednost)
- type=“A”: Numeracija s velikim slovima
- type=“a”: Numeracija s malim slovima
- type=“I”: Numeracija s velikim rimskim brojevima
- type=“i”: Numeracija s malim rimskim brojevima
2. HTML tablice
A. Napravite web stranicu sa dvije tablice (možete odabrati AB ili BA tjedan):
Napravite i ostala oblikovanja prema želji i stečenim vještinama.
