1.

laboratorijska vježba
o HTML
o CSS

Branko Mihaljević
Ciljevi vježbe
o Upoznavanje s
o pisanjem i strukturiranjem dokumenata HTML
o pisanjem obrazaca dokumenata HTML
o oblikovanjem teksta i drugih elemenata pomoću CSS-a
o Zajedničko za sve vježbe
o uče se osnovne prakse
o važno je znati pronaći informaciju koja nam treba
o pretraživanje Weba i snalaženje!
o primjeri:
o Kako otvoriti poveznicu u novom prozoru?
o Kako poravnati tekst uz sliku s desna?

Otvoreno računarstvo - 1. laboratorijska vježba

Domaća zadaća
o Proučiti osnovne elemente jezika HTML i CSS
o preporučeni izvor w3schools (http://www.w3schools.com)
o HTML Tutorial
o sva poglavlja pod "HTML Basic"
o odabrana poglavlja pod "HTML Advanced" – HTML Styles, HTML Entities,
HTML Head, HTML Meta, HTML URLs, HTML Attributes
o http://www.w3schools.com/html/
o CSS Tutorial
o sva poglavlja pod "CSS Basic"
o http://www.w3schools.com/css/
o HTML 4.01 specifikacija
o poglavlja o obrascima "Forms" – 17.1 - 17.7
o http://www.w3.org/TR/html401/interact/forms.html
o oznake nužno potrebne za vježbu dane su u zadatku

Otvoreno računarstvo - 1. laboratorijska vježba

Priprema za vježbu
o Proučiti jezik HTML s naglaskom na sljedeće elemente:
o struktura dokumenata HTML (zaglavlje, tijelo)
o definiranje ključnih riječi (element <meta>)
o definiranje kodne stranice korištene u dokumentu
o definiranje tipa dokumenta za provjeru pravila (DOCTYPE)
o povezivanje s vanjskom CSS datotekom (element <link>)
o definiranje odjeljaka (element <div>, atributi id, class)
o naslove i podnaslove (elementi <h1> do <h6>)
o odvajanja teksta u dokumentu (elementi <p>, <br>)
o istaknutost teksta (elementi <b>, <i>)
o umetanje slika u dokument (element <img>)
o poveznice između stranica i na elektroničku poštu (element <a>)
o tablice (elementi <table>, <tr>, <th>, <td>, atributi colspan i rowspan)
o nepobrojane i pobrojane liste (elementi <ul>, <ol>, <li>)
o definiranje obrazaca (element <form>) i elemente obrasca (elementi
<input>)
Otvoreno računarstvo - 1. laboratorijska vježba
Priprema za vježbu
o Proučiti jezik CSS s naglaskom na sljedeće elemente:
o sintaksa CSS-a

o razlika selektora obzirom na elemente, klase i

identifikatore
o razmještaj elemenata na stranici

o definiranje svojstava elemenata (boje, pozadina, vrsta i

veličina slova, rubovi, razmak...) za:

o odjeljke teksta
o liste
o tablice
o poveznice (links)

Otvoreno računarstvo - 1. laboratorijska vježba

Zadatak za vježbu
o Izraditi sjedište Weba s dvije stranice
o tema ovisi o inačici koju radite
o Kôdna stranica UTF-8
o Stranice moraju biti potpuno funkcionalne u više
preglednika Weba, ali ne nužno identičnog izgleda
o ne odnosi se na funkcioniranje obrasca
o Poželjno koristiti odgovarajući uređivač teksta
o podrška za UTF-8
o poželjno bojanje sintakse
o Koristiti tip dokumenta DOCTYPE HTML 4.01 Strict
o Raspored korištenjem vanjske datoteke CSS

Otvoreno računarstvo - 1. laboratorijska vježba

Stranice Weba
o Početna stranica - index.html
o oblikovani tekst i liste
o slika
o tablica
o poveznice na drugu stranicu
o Stranica za pretraživanje - obrazac.html
o obrazac za pretraživanje/filtriranje podataka
o trenutno "ne radi ništa pametno"
o sadržaj obrasca dan u zadatku
o Stranice moraju biti dizajnom i "stilski uređene"
o boje, izgled, raspored
o Stranice je potrebno provjeriti validatorom za HTML
o http://validator.w3.org
Otvoreno računarstvo - 1. laboratorijska vježba
Obavezna područja stranica
o Zaglavlje
o slika i naslov
o Navigacija - lista poveznica
o na početnu stranicu
o na pretraživanje
o na stranicu RASIP-a
o na stranicu FER-a
o u novom prozoru
o na e-mail autora
o Tijelo stranice
o sadržaj
o Podnožje (footer)
o podaci o autoru
Otvoreno računarstvo - 1. laboratorijska vježba
Promjena svojstava i izgleda elemenata
o Potrebno je urediti tekst, slike, tablice, navigaciju i
strukturu stranice
o Datoteka CSS sa stilovima - dizajn.css
o veličine, vrste i boje slova teksta
o položaj elemenata na stranici
o boje pozadine elemenata
o okvir elemenata (border)
o margina i ispuna (margin, padding)
o oblikovanje liste za navigaciju
o korištenje grafičke promjene pri prelasku mišem
o selektor a:hover npr. za uljepšavanje navigacije

Otvoreno računarstvo - 1. laboratorijska vježba

Primjeri - osnovno
o Osnovni primjeri
o naslovi, odlomci, poveznice, slike
o http://w3schools.com/html/html_primary.asp
o Zaglavlje dokumenta HTML
o <!DOCTYPE>, <head>, <title>, <meta>...
o http://w3schools.com/html/html_head.asp
o Oblikovanje teksta kroz HTML
o <b>, <i>, <u>
o http://www.w3schools.com/html/html_formatting.asp
o Liste
o <ul>, <ol>, <li>
o http://w3schools.com/html/html_lists.asp

Otvoreno računarstvo - 1. laboratorijska vježba

Primjeri - poveznice, slike i tablice
o Poveznice
o <a href="..." > Naziv poveznice </a>
o http://w3schools.com/html/html_links.asp
o Slike
o <img src="...">
o http://w3schools.com/html/html_images.asp
o Tablice
o <table>, <tr>, <td>, <th>
o http://w3schools.com/html/html_tables.asp

Otvoreno računarstvo - 1. laboratorijska vježba

Primjeri - obrasci
o Početak obrasca – oznaka <form>
o Polje za unos teksta – <input type="text">
o Kružić za odabir – <input type="radio">
o Kvadratić za odabir – <input type="checkbox">
o Padajući izbornik – <select> ... <option> ...
o višestruki odabir – multiple="multiple"
o Gumb – <input type="button">
o posebni gumbi
type="submit"
type="reset"
o Više o svemu tome "HTML Forms"
o http://w3schools.com/html/html_forms.asp
Otvoreno računarstvo - 1. laboratorijska vježba
Zadatak – obrazac
o Tijelo stranice sadrži naslov i obrazac
o Obrazac izraditi u obliku tablice
o u jednoj koloni nalazi opis polja, a u drugoj upisno polje
ili elementi za unos
o svojstva tablice, redova i ćelija definirati pomoću CSS-a
o Polja obrasca ovise o inačici zadatka koju radite i
samim podacima
o Primjer: podatak IME se prikazuje kao POLJE ZA UNOS, a
podatak SPOL se prikazuje kao dva KVADRATIĆA ZA
IZBOR (checkbox)

Otvoreno računarstvo - 1. laboratorijska vježba

Obrazac – bitni stupci
o INAČICA / REDNI BROJ - slovo inačice ili redni broj podatka u strukturi
o VRIJEDNOSTI - sadrži li element informaciju
o DA – sadržava standardno upisanu tekstualnu vrijednost
o SKUP – sadržava podatak isključivo iz skupa dozvoljenih vrijednosti
o NEMA – ne sadržava podatak
o PRIMJER SLOBODNOG UPISA VRIJEDNOSTI ili SKUP DOZVOLJENIH VRIJEDNOSTI
- primjer tekstualnog podatka ili skupa dozvoljenih vrijednosti podatka
o ako u stupcu VRIJEDNOSTI piše DA – npr. Ivo
o ako u stupcu VRIJEDNOSTI piše SKUP – skup dozvoljenih vrijednosti
o ELEMENT U OBRASCU - kako će se podatak pretraživati, odnosno pomoću koje
elementa za pretraživanje
o POLJE ZA UNOS –polje za unos tekstualnog podatka
o KVADRATIĆ ZA IZBOR (checkbox) – polje za odabir jedne ili više vrijednosti iz
skupa dozvoljenih vrijednosti ili druga oznaka
o KRUŽIĆ ZA ODABIR (radio) – polje za odabir samo jedne vrijednosti iz skupa
dozvoljenih vrijednosti
o IZBORNIK ZA VIŠESTRUKI ODABIR (multiple select) – polje za odabir samo
jedne ili više vrijednosti iz skupa dozvoljenih vrijednosti
Otvoreno računarstvo - 1. laboratorijska vježba
Zahtjevi nad obrascem
o Obrazac mora sadržavati:
o barem 5 polja za unos teksta parametara za
pretraživanje
o barem 2 grupe kvadratića za odabir (checkbox) s
ponuđenim vrijednostima
o barem 1 grupu kružića za odabir (radio) s ponuđenim
vrijednostima
o barem 1 izbornik za višestruki odabir (multiple select)
o gumb za slanje podataka na poslužitelj (submit button)
o gumb za poništavanje podataka u obrascu (reset
button)

Otvoreno računarstvo - 1. laboratorijska vježba

CSS
o Pravila za oblikovanje stranica i elemenata
o selektor {svojstvo: vrijednost;
svojstvo: vrijednost; ...}
o http://w3schools.com/css/css_syntax.asp
o http://w3schools.com/html/html_css.asp
o Cascade - uzimaju se u obzir kasnije navedena
pravila
o Više načina povezivanja s dokumentom HTML
o najvažniji - vanjska CSS datoteka
<link rel="stylesheet" type="text/css" href="style.css">

Otvoreno računarstvo - 1. laboratorijska vježba

Primjeri - tekst
o Boja i poravnanje teksta
o color: blue; text-align: center;
o Vrsta slova
o font-family: Tahoma, Verdana, sans-serif;
o Veličina slova
o font-size: 150% ili font-size: 12px ili font-size: 1em;
o Oblikovanje slova
o font-style: italic; font-weight: bold; text-decoration:
underline;

o http://w3schools.com/css/css_text.asp
o http://w3schools.com/css/css_font.asp
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - box model

o http://www.w3.org/TR/CSS2/box.html
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - rubovi, okviri, punjenja
o Rub - margin, npr. 2cm 4cm 3cm 4cm;
o top, right, bottom, left
o Okvir - border
o border-style
o border-color
o border-width
o top, right, bottom, left
o Punjenje – padding
o top, right, bottom, left

o http://w3schools.com/css/css_margin.asp
o http://w3schools.com/css/css_border.asp
o http://w3schools.com/css/css_padding.asp
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - izrada strukture stranice
o Odjeljak u dokumentu: <div>
o http://w3schools.com/tags/tag_div.asp

o Izrada strukture stranice korištenjem oznake <div>

o http://w3schools.com/css/tryit.asp?filename=trycss_float6

Otvoreno računarstvo - 1. laboratorijska vježba

Primjeri - prikaz elemenata
o Prikaz - display: inline, block, none
o http://w3schools.com/css/css_display_visibility.asp
o Plutanje – float i clear:
o http://w3schools.com/css/css_float.asp
o Pozicioniranje - position: relative, absolute, fixed;
o http://w3schools.com/css/css_positioning.asp

o Primjer – stvaranje horizontalnog izbornika

o http://w3schools.com/css/tryit.asp?filename=trycss_float5

Otvoreno računarstvo - 1. laboratorijska vježba

Predaja vježbe
o Vježba se predaje prikazivanjem obje stranice
Weba u pregledniku na lokalnom računalu
o Stranice Weba moraju biti zapisane u HTML
dokumentima:
o index.html
o obrazac.html
o CSS datoteka dizajna mora biti zapisana u datoteci
o dizajn.css
o Slike i ostale datoteke mogu biti proizvoljnih naziva i
u proizvoljnim mapama
o Datoteka u obliku ZIP koja se predaje na poslužitelj mora u
glavnoj mapi sadržavati sve tri navedene datoteke
Otvoreno računarstvo - 1. laboratorijska vježba
Dodatna pomoć
o HTML 4.01 / XHTML 1.0 Reference
o http://w3schools.com/tags/default.asp
o CSS2 Reference:
o http://w3schools.com/css/css_reference.asp
o The W3C Markup Validation Service
o http://validator.w3.org/
o The W3C CSS Validation Service
o http://jigsaw.w3.org/css-validator/
o stock.xchng (ree stock photography site)
o http://www.sxc.hu/

Otvoreno računarstvo - 1. laboratorijska vježba

 Pitanja?
o Probleme i pitanja možete
postaviti naknadno, u
forumu na stranicama
predmeta

Otvoreno računarstvo - 1. laboratorijska vježba