Josip's RM//SJIWB - LV7: Liste i tablice

LV7: Liste i tablice

1.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.

Disk, circle, square i none.

1.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>

<h1>Lazanje s mljevenim mesom</h1>

<br>

<h2>Lista namirnica</h2>

<ul>

<li>tjestenina za lazanje, 400 grama</li>

<li>miješano mljeveno meso, 1 kg</li>

<li>peršin, 1 žličica (sjeckani)</li>

<li>sir gouda, 150 grama (naribani)</li>

<li>pasirana rajčica, 750 ml</li>

<li>sušeni origano, 1 žličica</li>

<li>maslinovo ulje</li>

<li>mrkva, 1 komad (naribana)</li>

<li>ljubičasti luk, 1 glavica (sjeckani)</li>

<li>sir mozzarella, 100 grama</li>

<li>češnjak, 3-4 režnja</li>

<li>umak bešamel, 1 litra</li>

<li>sušena majčina dušica, 1 žličica</li>

</ul>

<br>

<h2>Priprema</h2>

<ol>

<li>U tavu ulijemo maslinovo ulje i popržimo miješano mljeveno meso.</li>

<li>Posolimo, popaprimo, a zatim dodamo sjeckanu mrkvu i sjeckani ljubičasti luk.</li>

<li>Još malo pržimo, a potom dodamo češnjak, malo pasirane rajčice i sjeckani peršin.</li>

<li>U vatrostalnu posudu ulijemo malo umaka bešamel, zatim složimo tjesteninu za lazanje, ulijemo malo pasirane rajčice, dodamo meso, prelijemo s još malo umaka bešamel i na kraju pospemo naribanim sirom.</li>

<li>Cijeli postupak ponovimo još jednom, te na kraju složimo i posljednji sloj tjestenine za lazanje, umaka bešamel, naribane goude i narezane mozzarelle.</li>

<li>Stavimo u prethodno zagrijanu pećnicu na 200°C i pečemo 30-ak minuta.</li>

</ol>

<a href="url">https://www.coolinarika.com/recept/808473/</a>
<a href="url">https://finirecepti.net.hr/priprema/lazanje-s-mljevenim-mesom/</a>
<a href="url">https://finirecepti.net.hr/ahttps://www.novilist.hr/life/gastro/bas-kao-iz-restorana-ovo-su-lazanje-s-mesom-koje-cete-sigurno-voljeti/priprema/lazanje-s-mljevenim-mesom/</a>

</body>

</html>

1.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>

<h1>Slojevi OSI modela</h1>

<br>

<h2>OSI sloj - modeli</h2>

<ol>

<li>APLIKACIJSKI SLOJ</li>

<ul>

</ul>

<br>

<li>PREZENTACIJSKI SLOJ</li>

<ul>

</ul>

<br>

<li>SLOJ SESIJE</li>

<ul>

<li>VARIOUS</li>

<li>SOCKETS</li>

</ul>

<br>

<li>TRANSPORTNI SLOJ</li>

<ul>

</ul>

<br>

<li>MREŽNI SLOJ</li>

<ul>

<li>IPSec</li>

</ul>

<br>

<li>PODATKOVNI SLOJ</li>

<ul>

<li>Ethernet</li>

<li>SLLIP</li>

</ul>

<br>

<li>FIZIČKI SLOJ</li>

<ul>

<li>Fiber</li>

<li>Wireless</li>

</ul>

</ol>

<br>

</body>

</html>

1.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>

<h1>Najpopularniji programerski jezici</h1>

<br>

<dl>

<dt>Python</dt>

<dd>- Python se široko smatra intuitivnom programskim jezikom, zbog svoje jednostavne sintakse, velike biblioteke standarda i alata te integracije s drugim popularnim programskim jezicima kao što su C i C ++.</dd>

<br>

<dt>JavaScript</dt>

<dd>- JavaScript je najpopularniji programski jezik za izradu interaktivnih web stranica. U kombinaciji s Node.js, programeri mogu koristiti JavaScript za stvaranje web sadržaja na poslužitelju prije nego što se stranica pošalje u preglednik, koji se može koristiti za izgradnju igara i komunikacijskih aplikacija koje se izravno pokreću u pregledniku.</dd>

<br>

<dd>- Java je programski jezik koji je najčešće povezan s razvojem aplikacija klijent-poslužitelj, a koje koriste velike tvrtke širom svijeta. Java je osmišljen kao labavo povezan programski jezik, što znači da se program napisan na Javi može izvoditi na bilo kojoj platformi koja podržava Javu.</dd>

<br>

<dd>- Microsoft je razvio C # kao bržu i sigurniju varijantu C. U potpunosti je integriran s Microsoftovim .NET softverskim okvirom, koji podržava razvoj aplikacija za Windows, dodataka za preglednike i mobilnih uređaja. C # nudi zajedničke baze kodova, veliku biblioteku koda i razne tipove podataka.</dd>

<br>

<dd>- Zajedno s Pythonom i Javom, C čini "dobar temelj" za učenje programiranja, kaže Gorton. Kao jedan od prvih programskih jezika ikad razvijenih, C je poslužio kao temelj za pisanje modernijih jezika kao što su Python, Ruby i PHP. To je također jednostavan jezik za otklanjanje pogrešaka, testiranje i održavanje.</dd>

<br>

<dd>- C ++ je proširenje C-a koje dobro funkcionira za programiranje sustava koji pokreću aplikacije, za razliku od samih aplikacija. C ++ također dobro funkcionira za sustave s više uređaja i više platformi. Vremenom su programeri napisali veliki skup knjižnica i kompajlera za C ++. Mogućnost učinkovite upotrebe ovih uslužnih programa jednako je važna za razumijevanje programskog jezika kao i pisanje koda, kaže Gorton.</dd>

<br>

<dd>- Google se naziva i Golang, a Google je razvio kao učinkovit, čitljiv i siguran jezik za programiranje na razini sustava. Dobro funkcionira za distribuirane sustave u kojima su sustavi smješteni u različitim mrežama i trebaju komunicirati međusobnim slanjem poruka. Iako je to relativno novi jezik, Go ima veliku biblioteku standarda i opsežnu dokumentaciju.</dd>

<br>

<dd>- R se jako koristi u statističkoj analitici i aplikacijama strojnog učenja. Jezik je proširiv i radi na mnogim operativnim sustavima. Mnoge velike tvrtke usvojile su R kako bi analizirale svoje masovne skupove podataka, tako da su programeri koji znaju R vrlo traženi.</dd>

<br>

<dt>Swift</dt>

<dd>- Swift je Appleov jezik za razvoj aplikacija za Mac računala i Appleove mobilne uređaje, uključujući iPhone, iPad i Apple Watch. Kao i mnogi moderni programski jezici, Swift ima vrlo čitljivu sintaksu, brzo pokreće kôd i može se koristiti za razvoj na strani klijenta i na poslužitelju.</dd>

<br>

<dd>- PHP se široko koristi za web razvoj na strani poslužitelja, kada web mjesto često traži informacije od poslužitelja. Kao stariji jezik, PHP ima koristi od velikog ekosustava korisnika koji su stvorili okvire, knjižnice i alate za automatizaciju kako bi programski jezik učinio lakšim za upotrebu. PHP kod je također jednostavan za otklanjanje pogrešaka.</dd>

</dl>

<br>

</body>

</html>

1.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 oznake <ol> definira vrstu oznake stavke popisa:
Type = "1"
Type = "A"
Type = "a"
Type = "I"
Type = "i"

Element HTML <ol> za definiranje poredanog popisa

Pomoću atributa vrste HTML definirajte vrstu numeriranja

Upotrijebite element HTML <li> za definiranje stavke popisa

Popisi se mogu ugnijezditi

Stavke popisa mogu sadržavati druge HTML elemente

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

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

</style>

</head>

<body>

<h2>RASPORED AB</h2>

<tr>

<th>Ponedjeljak</th>

<th>Utorak</th>

<th>Srijeda</th>

<th>Četvrtak</th>

<th>Petak</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>SJIWP</td>

</tr>

<tr>

<td>SJIWP</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

<!DOCTYPE html>

<html>

<title>Raspored sati</title>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

#t1 {

width: 100%;

background-color: #B0E0E6;

}

#t2 {

width:100%;

background-color: #B22222;

}

#t2 {

width: 100%;

color:#ffffff;

}

</style>

</head>

<b>

<h1>Raspored sati (AB)</h1>

<tr>

<td>Ponedjeljak</td>

<td>Utorak</td>

<td>Srijeda</td>

<td>Četvrtak</td>

<td>Petak</td>

</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>

<tr>

<td>Ponedjeljak</td>

<td>Utorak</td>

<td>Srijeda</td>

<td>Četvrtak</td>

<td>Petak</td>

</tr>

<tr>

<td>DIOIS</td>

</tr>

<tr>

</tr>

<tr>

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

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>