Vježba 7 - Liste i tablice - josip-cvitkovic.from.hr

Nastavni predmet SKRIPTNI JEZICI I WEB PROGRAMIRANJE

Naslov cjeline HTML

Naslov jedinice Vježba 7: Liste i tablice

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

Odgovorite na pitanja pisano u bilježnicu

 1. Što omogućuju liste? Koje dvije osnovne vrste lista razlikujemo? (pomoć:

https://www.w3schools.com/html/html_lists.asp )
Liste omogućuju web programerima u grupiranju skupa povezanih stavki u popise. Razlikujemo unordered (neuređene) i orderd (uređene) liste.

 2. Što omogućuju tablice? (pomoć: https://www.w3schools.com/html/html_tables.asp )
Tablice omogućuju web programerima da rasporede podatke u retke i stupce.

IZVOĐENJE VJEŽBE

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>

<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.
Postoje: – list-style-type:disc;“
– list-style-type:circle;“
– list-style-type:square;“
– list-style-type:none;“

Primjer:
<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Disc Bullets</h2>

<li>Coffee</li>

</ul>

</body>

</html>

 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.
Primjer:

<!DOCTYPE html>

<html>

<body>

<h1>Recept za ukusan i zdrav gulaš</h1>

<p>Sastojci: </p>

<li>800 g juneće plećke</li>

<li>800 graam luka</li>

<li>50-100 g slanine</li>

<li>6 češnja češnjaka</li>

<li>2 srednje mkrve</li>

<li>250 g pasirane rajčice</li>

<li>mesni temeljac</li>

<li>svježi peršin</li>

<li>maslinovo ulje</li>

<li>3 žličice slatke crvene paprike</li>

<li>papar</li>

<li>čili papričice</li>

<li>lovorov list</li>

</ul>

<li>Na zagrijano maslinovo ulje dodajte nasjeckani luk. odmah dodajte i na kockice narezano meso. Poklopite i pustite da se dinsta 15 minuta.</li>

<li>Promiješajte meso i luk da se sjedine pa dodajte malo temeljca. Poklopite i pustite 15-20 min da krčka na laganoj vatri.</li>

<li>Peršin, češnjak i slaninu sameljite u blenderu tako da dobijete paštetu. Odvojite otprilike jednu žličicu koja će vam kasnije biti potrebna za gulaš, a ostatak čuvajte u zamrzivaču i iskoristite za druga jela.</li>

<li>Poslije otprilike 35 minuta dinstanja u gulaš dodajte sitno nasjeckanu mrkvu. Gulaš bi sada već trebao dobiti na gustoći. Poklopite ga i pustite da se dinsta još otprilike sat i pol.</li>

<li>Meso je sada kuhano te je gulaš potrebno još samo začiniti. Dodajte sol, papar, crvenu papriku, po želji malo čilija i pasiranu rajčicu. Dodajte i žličicu paštete koju ste prethodno napravili pa sve dobro promiješajte.</li>

<li>U gulaš dodajte lovorov list i pustite da se krčka desetak minuta.</li>

</ol>

<a href=”https://www.tportal.hr/lifestyle/clanak/ukusan-i-zdrav-donosimo-recept-za-najukusniji-gulas-koji-cete-ikad-probati-20200825″>Link za 1. gulaš</a>

<a href=”https://www.lidlovakuhinja.hr/recepti/gulas”>Link za 2. gulaš</a>

<a href=”https://www.24sata.hr/lifestyle/skuhajte-savrsen-gulas-tajna-se-krije-i-u-nacinu-rezanja-luka-676107″>Link za 3. gulaš</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>

<h2>OSI model i njegovi slojevi</h2>

<ol>

<li>Aplikacijski sloj</li>

<ul>

</ul>

<li>Prezentacijski sloj</li>

<ul>

</ul>

<li>Sloj sesije</li>

<ul>

</ul>

<li>Transporni sloj</li>

<ul>

</ul>

<li>Mrežni sloj</li>

<ul>

</ul>

<ul>

<li>Frame Relay</li>

</ul>

<li>Fizički sloj</li>

<ul>

<li>Token Ring</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>

<title>Programski jezici</title>

<head>

<style>

.center{

text-align: center;

font-family: Times;

font-size: 20px;

}

.body{

text-align: justify;

font-family: Times;

font-size: 20px;

width:80%;

}

.blank{

width:10%;

}

.column {

float: left;

}

</style>

</head>

<h1>Najpopularniji programski jezici</h1>

</div>

</div>

<ol>

<dt>Python</dt><br>

<dd> Programski jezik opće namjene.</dd>

<dd> Upotreba: umjetna inteligencija, znanost o podacima, financijske usluge, društvene mreže (Instagram, Pinterest)</dd>

<br>

</dl></li>

<dt>JavaScript</dt><br>

<dd> Skriptni programski jezik </dd>

<dd> Upotreba: za izradu web stranica i mobilnih aplikacija. Node.js omogućuje korištenje aplikcija preko preglednika, bez da se prije upotrebe preuzme na računalo.</dd>

</dl></li><br>

<dd> Programski jezik opće namjene</dd>

<dd> Upotreba: poslovni sustavi, izrada Android operacijskih sustava.</dd>

</dl></li><br>

<dd> Programski jezik opće namjene</dd>

<dd> Upotreba: razvoj Micorsoft i Windows aplikacija, koristi se za programiranje mobilnih uređaja i konzola za video igre pomoću proširenja .NET Framework naziva Mono.</dd>

</dl></li><br>

<dd> Programski jezik opće namjene</dd>

<dd> Upotreba: može se pokrenuti na bilo kojoj vrsti uređaja pa se koristi za programiranje hardvera, poput urađaja u automobilima i uređajima koji se koristi u zdravstvu.</dd>

</dl></li><br>

<dd> Programski jezik opće namjene</dd>

<dd> Upotreba: mnoge namjene, stoji iza mnogih računalnih igara i matematičkih simulacija i još mnogo toga.</dd>

</dl></li><br>

<dt>GO (Golang)</dt><br>

<dd> Statički upisljiv kompilirani programski jezik</dd>

<dd> Upotreba: za aplikacije koje moraju procesirati puno podataka, koriste ga Google, Twitch, Netflix, Uber</dd>

</dl></li><br>

<dd> Programski za statističko računanje i grafiku</dd>

<dd> Upotreba: koristi se u statističkim softverskim proizvodima. </dd>

</dl></li><br>

<dt>Swift</dt><br>

<dd> Kompilirani programski jezik opće namjene</dd>

<dd> Upotreba: koristi se za iOS i macOS aplikacije.</dd>

</dl></li><br>

<dd> Programski jezik opće namjene</dd>

<dd> Upotreba: koristi se za pokretanje web stranica orijentirane na sadržaj kao što su Facebook, WordPress i Wikipedia.</dd>

</dl></li><br>

</ol>

<h3>Izvor: <a href=”https://www.northeastern.edu/graduate/blog/most-popular-programming-languages/”>https://www.northeastern.edu/graduate/blog/most-popular-programming-languages/</a></h3>

</div>

</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.
Za elemente <button>, atribut type specificira vrstu gumba.

Za elemente <input>, atribut type navodi vrstu elementa <input> za prikaz.

Za elemente <embed>, <link>, <object>, <script>, <source> i <style>, atribut type navodi vrstu internetskog medija (ranije poznata kao MIME vrsta).

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.

Ponedjeljak Utorak Srijeda Četvrtak Petak

SJWP
Dizajn BP SJWP
Dizajn BP

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

Ponedjeljak Utorak Srijeda Četvrtak Petak

SJWP
Dizajn BP
Matematika

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

Vježba 7 – Liste i tablice

josip-cvitkovic

Komentari

Odgovori Otkaži odgovor