Html simbolički i brojčani popisi : HTML vježba 2.3 : Bartol plus

Vježba 2.3

Na radnoj površini načinite mapu Vjezba 2.
Preuzmite i raspakirajte .zip datoteku pomoću gornje poveznice.
Slike premjestite u mapu Vjezba 2.
U html editoru kreirajte novu datoteku vukovar.html.
Umetnite osnovnu strukturu html dokumenta.
Dodajte potrebne <meta> i <title> elemente.
Slika 2.3
Radite po predlošku sa slike 2.3.
Pomoću svojstva style obojite pozadinu cijele web stranice u boju slonovače (engl. ivory). Koristite css svojstvo background-color.
U <body> elementu povećajte veličinu teksta (engl. font-size) na 125% radi ljepšeg izgleda.
Element <body> iz prethodnog zadatka izgleda:

<body style="background-color: ivory; font-size: 125%;">

Umetnite tri slike ispod podnaslova: slika1.jpg, slika2.jpg i slika3.jpg.
Slikama dodajte svojstvo alt s vrijednostima: Glavni grad Hrvatske, Grad heroj Vukovar i Napaćeni grad Dubrovnik.
<img />
Slike umećemo na web stranicu pomoću elementa <img>. On obavezno mora imati svojstva src i alt. Svojstvo src sadrži puni naziv slike (i nastavak), a svojstvo alt služi slijepim i slabovidnim osobama. Njima će odgovarajući program izgovoriti vrijednosti ovog svojstva.
Sljedeći redak je primjer, kako umetnuti sliku slika1.jpg na web stranicu.

<img src="slika1.jpg" alt="Glavni grad Hrvatske />

Između susjednih slika umetnite tri simbola razmaka (oznaka simbola razmaka je  ), kako bi slike bile razmaknute.
Umetnite simbolički popis i unutar njega četiri stavke sa zadanim tekstom.
Iza prve tri stavke simboličkog popisa, ugnijezdite odovarajuće brojčane (numeričke) popise prema slici.
Iza četvrte stavke simboličkog popisa, ugnijezdite numerički popis, bez oznake brojki i kao prvu njegovu stavku umetnite tekst Lorem ipsum (nalazi se u .zip datoteci.).
Umetnite vodoravne crte na predviđena mjesta, svaku širine 50%.
Oblikujte sadržaj brojčanih popisa prema slici:

css svojstvo: list-style-type
Pomoću css svojstva list-style-type možemo izabrati simbol ili brojčanu (numeričku) oznaku. Ovom svojstvu možemo dodijeliti mnoštvo vrijednosti, neke od njih su: disc, circle, square ili none za simbole, a decimal, lower-roman, upper-roman, lower-alpha, upper-alpha ili none za brojčane oznake.
Gumb Preslikaj
Pomoću gumba Povećaj koji se nalazi u gornjem desnom kutu slike, možete povećati sliku predloška, kako bi bolje vidjeli što i kako treba napraviti.
Spremite datoteku u mapu Vjezba 2.
Otvorite html dokument vukovar.html u web pregledniku i provjerite radi li dobro, tj. je li prikaz isti kao na slici 2.1.

Usporedite dobiveni kôd s kôdom rješenja Vježbe 2.3

Rješenje vježbe 2.3: Html popisi