Tehniko veleuilite u Zagrebu

Modul 1

PHP i MySQL teaj

(HyperText Markup Language i Cascading Style Sheets)

HTML i CSS

SADRAJ
1. HTML 4 4 5 5 6 6 7 7 8 9 9 10 10 10 11 11 11 11 11 12 12 13 13 14 15 15 15 16 16 17 17 17 18 18 18

1.1. OSNOVE HTML-A 1.2. OSNOVNI POJMOVI HTML-A 1.3. OSNOVNA SINTAKSA 1.4. PRAVILA OZNAAVANJA ELEMENATA HTML-A 1.5. VALIDINI HTML DOKUMENTI 1.6. TIPOVI I VERZIJE HTML DOKUMENATA (!DOCTYPE) 1.7. PODJELA ELEMENATA HTML-A 1.8. NEKI EE KORITENI TAGOVI HTML-A 1.9. ATRIBUTI HTML-A 1.10. HTML ENTITETI 1.11. ZADACI 1.11.1. ZADATAK 1.11.2. ZADATAK 2. CSS SINTAKSA CSS-A NAINI DODJELE CSS-A DOKUMENTIMA INLINE STYLE INTERNAL STYLE SHEET EXTERNAL STYLE SHEET PREDNOSTI I MANE TRIJU NAINA DODJELE CSS-A DOKUMENTU PRAVILA DODJELE CSS-A DOKUMENTIMA I NJIHOVIM ELEMENTIMA TEINE DODJELE CSS PARAMETARA ELEMENTIMA HTML-A PRAVILA PARAMETARA CSS-A PROIRENA SINTAKSA CSS-A SELEKTOR KLASE CSS-A SELEKTOR PSEUDO KLASE SELEKTOR IDENTIFIKATORA CSS-A POZICIJONIRANJE NA TRAENI HTML ELEMENT NIZANJE SELEKTORA U CSS-U PRIMJER 15: NIZANJE SELEKTORA RELATIVNO I APSOLUTNO POZICIONIRANJE NA HTML ELEMENT PUTEM CSS-A SELEKTORA ZADACI ZADATAK ZADATAK

2.1. 2.2. 2.2.1. 2.2.2. 2.2.3. 2.2.4. 2.3. 2.3.1. 2.4. 2.5. 2.5.1. 2.5.2. 2.5.3. 2.5.4. 2.5.5. 2.5.6. 2.5.7. 2.6. 2.6.1. 2.6.2.

3.

TABELE OSNOVE PRIMJENA TABELA IMENOVANI STUPCI TABELE IMENOVANI REDCI TABELE TO JE JO VANO ZNATI O TABELAMA PRAZNE ELIJE SPAJANJE ELIJA (ENGL. MERGING) GRUPIRANJE KOLONA I REDAKA U TABELAMA ZADACI ZADATAK ZADATAK ZADATAK

19 19 20 20 21 21 21 22 24 25 25 25 25 26 26 26 26 27 27 28 28 29 29 29 31 31 32 32 32 33 34 35 35 36 36 37 37 37 37 37 37

3.1. 3.2. 3.2.1. 3.2.2. 3.3. 3.3.1. 3.3.2. 3.3.3. 3.4. 3.4.1. 3.4.2. 3.4.3. 4.

FORME TO SU FORME I EMU SLUE? ELEMENTI FORME INTERAKTIVNI ELEMENTI FORME NEINTERAKTIVNI ELEMENTI FORME KAKO STVORITI UREENU FORMU? PRIMJERI ELEMENATA FORME INPUT ELEMENT BUTTON ELEMENT TEXTAREA ELEMENT SELECT ELEMENT ZADACI ZADATAK

4.1. 4.2. 4.2.1. 4.2.2. 4.3. 4.4. 4.4.1. 4.4.2. 4.4.3. 4.4.4. 4.5. 4.5.1. 5.

LISTE I MENIJI UREENE I NEUREENE LISTE UREENE LISTE <OL> NEUREENE LISTE <UL> KASKADNE LISTE JEDNOSTAVNI MENIJI MENIJI IZGRAENI IZ LISTE VERTIKALNI MENI HORIZONTALNI MENI ZADACI ZADATAK ZADATAK ZADATAK ZADATAK ZADATAK

5.1. 5.1.1. 5.1.2. 5.1.3. 5.2. 5.3. 5.3.1. 5.3.2. 5.4. 5.4.1. 5.4.2. 5.4.3. 5.4.4. 5.4.5.

Popis slika
Slika 1: Izgled html dokumenta iz zadatka 1.12.2. Slika 2: Blok i zone djelovanja CSS parametara Slika 3: Izgled tabele iz primjera 16 u pregledniku Slika 4: Izgled primjera 17 u pregledniku Slika 5: Izgled primjera 18 u pregledniku Slika 6: &nbsp; entitet Slika 7: Izgled primjera 20 u pregledniku Slika 8: Izgled primjera 21 u pregledniku Slika 9: Primjer 22 u pregledniku Slika 10: Zadatak Slika 11: Izgled forme iz primjera 24 u pregledniku Slika 12: Input tipovi elemenata Slika 13: Izgled padajueg izbornika Slika 14: Izgled obinog izbornika Slika 15: Izgled izbornika sa grupama opcija Slika 16: Ureena lista Slika 17: Neureena lista Slika 18: Kaskadne liste Slika 19: Jednostavni meni Slika 20: Meni izgraen sa listom Slika 21: Meni iz primjera 32 - vertikalni Slika 22: Meni iz primjera 32 - horizontalni 10 14 19 20 21 22 23 23 24 25 27 29 30 30 31 32 33 34 35 36 36 36

Popis primjera
Primjer 1: HTML dokument Primjer 2: Stablasta struktura dokumenta iz primjera 1. Primjer 3: Sintaksa html elemenata Primjer 4: Tipovi tagova u HTML-u Primjer 5: Jedan dobro ugnjeen i validan HTML dokument Primjer 6: Primjer CSS stiliranja Primjer 7: Inline definicija CSS-a Primjer 8: Internal definicija CSS-a Primjer 9: External definicija CSS-a uz pomo vanjske css datoteke Primjer 10: Inline preko internal Primjer 11: Border i outline bordure Primjer 12: Pozicijoniranje klasama CSS-a Primjer 13: Pozicijoniranje identifikatorom CSS-a Primjer 14: Pozicijoniranje na element 2.5.6. Primjer 15: Nizanje selektora Primjer 16: HTML dokument sa jednostavnom Tabelom Primjer 17: Tabela sa imenovanim stupcima Primjer 18: Tabela sa imenovanim redcima Primjer 19: &nbsp; entitet Primjer 20: Horizontalno spajanje elija Primjer 21: Vertikalno spajanje elija Primjer 22: XHTML 1.0 i HTML 4.01 Strict tabele sa nekim dodanim elementima Primjer 23: Jednostavna forma Primjer 24: Jednostavna forma iz primjera 8 u tabeli Primjer 25: Padajui izbornik Primjer 26: Obian izbornik (single select) Primjer 27: Izbornik sa grupiranim opcijama Primjer 28: Ureena lista Primjer 29: Neureena lista Primjer 30: Kaskadne liste Primjer 31: Jednostavni meni Primjer 32: Meni izgraen sa listom 4 4 5 6 7 11 11 12 12 13 14 15 16 16 17 19 20 21 21 22 23 24 26 27 30 30 31 32 33 34 35 35

1. HTML
HTML (engl. HyperText Markup Language) je ne-programski jezik oznaavanja razliitih sadraja koritenjem tekstualnih struktura za opis HTML dokumenta, kako bi se takvi sadraji na strukturiran i ureen nain prikazivali i dohvaali putem Interneta (ili intra neta ili lokalno). Engl. Hypertext markup ili grubo prevedeno, hipertekst oznaavanje zapravo govori da se uz uobiajen prikaz HTML dokumenata (tekst, slika, videa, zvuka...), dokument i mogu meusobno povezivati tzv. hiperpoveznicama (engl. hyperlink). Jezik je stvoren i standardiziran kao vlasnitvo w3c (World Wide Web Consorcium). Na stranicama www.w3schools.com moete pronai sve vezano uz HTML standard, jezik, dijelove i tipove html-a.

1.1. Osnove HTML-a

HTML je strukturiran jezik u kojemu se za oznaavanje odreenih sadraja koristi TAG (engl. tag oznaka) kojim se stvaraju, povezuju i strukturiraju elementi dokumenta koji se jo nazivaju i elementi html-a ili vorovi dokumenta (engl. node). Svaki element moe sadravati atribute, druge elemente ili obian tekst. Kada element sadri druge elemente, kae se da su oni ugnjeeni u roditeljskom elementu (voru dokumenta). Ugnjeivanje se jo naziva i nesting. Na svaki HTML dokument moe se gledati kao na strukturu stabla, koja se grana od lijevo prema desno, odozgo prema dolje koja ima grane i vorove:

Primjer 1: HTML dokument

<html> <head> <title>Naslov dokumenta</title> <meta /> </head> <body> <p>Neki tekst</p> </body> </html>

Primjer 2: Stablasta struktura dokumenta iz primjera 1.

Naslov dokumenta title

Grana

vor
head

vor
html

meta body Neki tekst p

Sadraj vorova moe se smatrati listovima stabla, a atributi opisuju oblik grana i listova.

1.2. Osnovni pojmovi HTML-a

Tag - osnovni pojam HTML-a, oznaava pojedine elemente Element - vor dokumenta ili engl. node (hijerarhijski gledano kao stablo), koji moe imati razne atribute, vrijednosti atributa, sadraj ili druge vorove tj. elemente. Atribut - naziv svojstva elemenata Vrijednost atributa - opis svojstva elemenata Sadraj elemenata - tekstualni sadraj vora (ono to e biti ispisano u web pregledniku) Parent - roditeljski vor, koji obavezno sadri druge vorove (nije nuno da posjeduje sadraj) Child - dijete roditeljskog vora, moe a li i ne mora sadravati druge vorove. Root - korijenski roditeljski vor dokumenta (prema w3c standardu to mora biti html tag) Ugnjeivanje - engl. nesting, postupak pravilnog rasporeivanja elemenata unutar nekog drugog elemenata. HTML entitet - nedozvoljeni znakovi (znakoi kojima se izvodi HTML struktura) koje neki puta trebamo prikazati

1.3. Osnovna sintaksa

Da bismo ispravno stvorili jedan element u HTML dokumentu moramo slijediti sljedee upute: - Tag odreuje element, - Atribut odreuje koje svojstvo se primjenjuje (ako element ima svojstva), - Vrijednost atributa odreuje nain primjene svojstva, - Sadraj je tekst to e se ispisati u web pregledniku ili korisnika skripta (javascript, vbstript, CSS...) koja e biti pokrenuta i obraena na odreeni nain. Od ovog principa odstupa samo oznaka (tag) komentara u html-u. Vano: ni atribut, ni vrijednost atributa ni sadraj nisu potrebni da bi definirali element, oni ga samo dodatno opisuju. tovie, kod nekih se elemenata atributi, pa ni sadraj se ne smiju pojaviti da bi elementi bili ispravno definirani.

Primjer 3: Sintaksa html elemenata

<tag></tag> <tag /> <tag ime_atributa="vrijednost-atributa">sadraj</tag> <tag ime-atributa='vrijednost-atributa'>sadraj</tag> <tag ime-atributa="vrijednost-atributa" /> <!-- HTML komentar -->

Svaki element mora imati svoj poetak i svoj kraj. Poetak je definiran <tag> gdje umjesto tag dolazi naziv elemenata, a kraj je definiran kao </tag> gdje / oznaava da se radi o zavretku elemenata odnosno o zavrnom tag-u. Dakle, tag je naziv elemenata kojeg stvaramo i obavezno mu prethodi lijeva kosa zagrada < . zatim ako element posjeduje atribute, dolaze definicije atributa (ime-atributa sa primjera 3.) pa operator =, nakon ega slijedi vrijednost atribu ta (vrijednost-atributa sa primjera 3.) koja obavezno stoji unutar navodnika, a nakon atributa i vrijednosti (ako ih element ima) dolazi desna kosa zagrada >. Neki elementi mogu imati sadraj koji stoji unutar poetnog i zavrnog taga. Komentari u html-u se piu unutar <!-- --> tagova. Vrijednosti atributa u pravilu trebaju stajati unutar jednostrukih ili dvostrukih navodnika, ali mnogi preglednici e ispravno prikazati element i ako se navodnici izostave. Bitno je napomenuti da ako se vrijednost atributa zapone jednim tipom navodnika, tim tipom se mora i zavriti ili je dokument nevalidan (neispravan).

1.4. Pravila oznaavanja elemenata HTML-a

Tri su naina definiranja html elemenata, koji ovise o elementu ali i o verziji HTML-a. Kao to je ve prije spomenuto, kod nekih elemenata je obavezan poseban poetni i zavrni tag, kod nekih samo poetni, a kod nekih se poetni tag zatvara u sebe. Takoer kod nekih verzija HTML -a odreeni elementi umjesto samo poetnog taga obavezno zahtijevaju samo-zatvoreni tag.

Primjer 4: Tipovi tagova u HTML-u

<p></p>

Poetni i zavrni tag opisuju element p (paragraf). Samo poetni tag opisuje hr element (engl. horizontal rule - horizontalna linija)
<hr>

Premda nije nuno u HTML-u, element moe biti definiran kao samo-zatvoreni
<input />

Za XHTML i HTML 4.01 strict pravilo vrijedi da svaki element mora biti zatvoren, pa tako i hr iz prethodnog primjera
<hr />

1.5. Validini HTML dokumenti

Premda nije nuno da dokument bude validan (ispravan) da bi ga neki web preglednik mogao prikazati, w3c je odredio standardom da svaki html validan dokument mora imati sljedee: 1. definiciju tipa dokumenta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

To je predprocesorska naredba parseru1 web preglednika, koja mu govori da dokument koji e biti opisan u nastavku je odreenog tipa, te se za prikaz dokumenta trebaju koristiti pravila koja je odredio w3c za taj tip html dokumenta. 2. definiciju dokumenta - element html
<html></html>

Ovo je root html dokumenta. html element sadrava sve ostale. 3. unutar html elemenata treba pravilno ugnjezditi: a) head element - ili zaglavlje dokumenta koje sadri vorove (elemente) koji upravljaju zaglavljem dokumenta (naslov doku menta, kljune rijei, autori dokumenta, ukljuivanje odreene kodne stranice, ukljuivanje raznih vanjskih skripti...) b) i body element - ili tijelo dokumenta koje sadri vorove sa raznim sadrajima.
<html> <head></head> <body></body> </html>

engl. parser - program koji ita tekstualne oznake (engl. markups) i interpretira ih kao stablo vorova, grana i listova. Pojam potjee od SGML-a, a rezultat parsiranja je DTD (engl. Document Type Definition) ili definicija strukture dokumenta (stablasta struktura).

4. unutar head elemenata treba pravilno ugnjezditi barem: a) title element - ili naslov dokumenta (to je tekst koji se ispisuje u traci prozora ili stupca raznih web preglednika, poput FireFox-a, Internet Explorera, Opere...) b) i meta element - tj. meta podatke sa atributima http-equiv ="content-type " i content="text/html; charset=kodna-stranica", gdje je kodna-stranica naziv kodne stranice.

Primjer 5: Jedan dobro ugnjeen i validan HTML dokument

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Naziv dokumenta</title> <meta http-equiv="content-type " content="text/html; charset=windows-1250" /> </head> <body> </body> </html>

Primijetite kako u body elementu nema nikakvih sadraja niti drugih elemenata - dokument je prazan!

1.6. Tipovi i verzije HTML dokumenata (!DOCTYPE)

HTML je nastao poetkom 90ih prologa stoljea, i od tada tota se je pro mjenilo u samom jeziku. Dodani su novi tagovi, atributi, primjena CSS-a, ali i mnogi tagovi i atributi su izbaeni. Trenutni standardi HTML dokumata su HTML 4.01 i XHTML 4.01 koji svaki od njih ima 3 vrste DTD-a (Document Type Definition - definicija tipa dokumenta), a to su strict, transitional i frameset. Vie o svemu moete pronai na stranicama www.w3schools.com

1.7. Podjela elemenata HTML-a

Mnogo je podjela elemenata u html-u, ali vanije podjele su prema sintaksi, prema namjeni, prema baratanju sadrajem. Prema sintaksi kao to je ve spomenuto, elementi se dijele na: - komentare (<!-- ... -->) - predprocesorske naredbe (<!DOCYTPE ...) - zatvorene tagove (<html>...</html>) - otvorene tagove (<br>) - i samo-zatvorene tagove (<meta ... />) Prema namjeni elementi se dijele na: - one koji opisuju dokument (<html>, <head>, <body>, <title> ...) - one koji formatiraju sadraj (<h1>, <p>, <b>, <em> ...) - one koji oznaavaju sadraj (<div>, <span>, <label>, <q> ...) - one koji pruaju interakciju sa korisnikom (<a>, <form>, <button>, <input>, ....) Prema nainu baratanja sadrajem: - inline: sadraj ostaje nepromjenjen unutar jednog bloka (<span>, <a>, <font> ...) - block: sadraj se stavlja u zaseban blok (<div>, <ul>, <ol>, <li>, <h1> ....) Moe se vidjeti da neki tagovi (elementi) poput <a> imaju vie svojstva: radi se o elementu koji zahtjeva poetni i zavrni tag, ne baca sadraj u novi blok, a prua interakciju s korisnikom (referenciranje na druge dokumente - ne nuno html!).

1.8. Neki ee koriteni tagovi HTML-a

Naziv tag-a a h1 - h6 p br hr table tr td b ili strong i ili em s ili strike u form input button textarea label ol ul li Znaenje anchor (sidro) heading (naslov) paragraph (paragraf) break (prijelom) horizontal rule (hor. linija) tabela sadraja table row (redak tabele) table data (elija tabele) podebljan tekst italic (kurziv ili ukoeni tekst) prekrien tekst underline (podcrtan tekst) formular interaktivni element interaktivni gumb tableti za unos teksta (vie linijski) oznaka ordered llist (ureena lista) unordered list (neureena lista) list item (lan liste) Opis referenciranje na druge dokumente preko Interneta ili lokalno formatiranje naslova obino paragrafa formatiranje paragrafa u dokumentu prijelom linije teksta (slino kao paragraf, samo to ne lomi paragrafe) iscrtava horizontalnu liniju fromira tabelu podataka ili sadraja formira redak tabele (obavezno mora biti ugnjeen unutar <table>) formira eliju u retku tabele (morabiti ugnjeen unutar <tr> taga) - ovaj element sadri podatke tabele formatira tekst kao podebljani (masno ispisani): tekst formatira tekst kao ukoen: tekst formatira tekst kao prekrieni (po sredini): tekst formatira tekst kao podcrtan: tekst formira formular za interakciju sa korisnikom formira interaktivni element formulara (da bi formular bio preneen input mora biti ugnjeen unutar <form>, prmda ne nuno kao njegov child) formita interaktivni gumb, kojim se uz pomo nekog skriptnog jezika moe upravljati nekim interaktivnim sadrajem formira tableti za unos teksta (vie linijski) koji je dio formulara (pogledati input) formatira neki sadraj kao specifinu oznaku (u formularima) formira stvaranje ureene liste (numerirane rimskim, arapskim brojkama ili abecedno) formira stvaranje neureene liste (natuknice) slino kao <td> za <table>, <li> je sastavni dio <ol> ili <ul> elemenata koji sadri tekst ili lanove ureenih ili neureenih lista

Potpunu listu elemenata html-a, kao i njihov opis, primjenu i primjere zajedno sa napomenama koji od njih su zastarjeli sa odreenim verzijama HTML -a i koji su zabranjeni u XHTML-u, moete pogledati na www.w3schools.com.

1.9. Atributi HTML-a

Atributi opisuju dodatna svojstva elemenata. Ne posjeduju svi elementi atribute. Atributi uvijek dolaze kao parovi ime-atributa="vrijednost-atributa". Kao to je ve prije napomenuto, prema standardima w3c, vrijednost atributa se obavezno stavlja unutar navodnika. Atributi mogu biti jezgreni (engl. core attributes), jezini, tipkovnini, dogaajni i ostali. Svi oni se smiju ili ne smiju pojavljivati u nekim elementima html-a. Jezgreni atributi se nalaze u svim elementima osim unutar base, html, meta, param, script, style i title elementata): class - specificira klasu elementa id - specificira identifikator elementa (ne nuno jedinstveni identifikator) style - specificira inline CSS stil elementa title - specificira tool tip text odnosno tekst koji se pojavljuje iznad bloka elementa kada kosnik dri neko vrijeme kursor mia iznad njega. Jezini atributi - definiraju jezine postavke bloka, pojavljuju se u svim elementima osim base, br, frame, frameset, hr, iframe, param i script elementima: dir - specificira smjer prikazivanja teksta (sljeva-na-desno ili sdesna-na-lijevo) lang - specificira kodnu oznaku jezika Atributi upravljanja sa tipkovnice: accesskey - specificira tipku preice sa tipkovnice tabindex - specificira redosljed dolaska na element kada se pritie gumb tabulatora na tipkovnici Dogaajni atributi opisuju akciju koju treba pozvati kada se desi neki dogaaj (engl. event), a postoji ih vie vrsta, koje neemo detaljnije obraivati (za sada). Ostali atributi se pojavljuju ovisno o namjeni i specifikacijama elemenata kojih su dio. Primjer nekih ostalih atributa: name, href, src, size, checked, border, colspan, rows....

1.10. HTML entiteti

To su znakovi koje koristimo kod pisanja HTML tagova te ako ih elimo ispisati kao obian sadraj (da se ne interpretiraju kao HTML kod!), moramo koristiti zamjenske izraze. Zamjenski izrazi se definiraju prema w3c standardu da zapoinju & znakom (& je isto entitet!) a zavravaju sa ; Neki ei HTML entiteti i njihove zamjene: < - &lt; - manje (ili otvorena kosa zagrada) > - &gt; - vie (ili zatvorena kosa zagrada) & - &amp; - ampersand ili and znak ' - &apos; - apostrof (jednostruki navodnik) " - &quot; - kvotacija (dvostruki navodnik) Uz ove znakove entiteti mogu biti i bilokoji znakovi iz UNICODE kodne stranice znakova, uljuujui i hrvatska slova , , , , i njihove kapitalizacije. UNICODE izrazi se piu &#xxxx; gdje xxx moe biti od 0 -65535 (npr: &#352; = , &#351; = ).

1.11. Zadaci
1.11.1. Zadatak
Napiite w3c validan html dokument sa definicijom dokumanta i ispravno ugnjeenim osnovnim elementima html dokumenta.

1.11.2. Zadatak
Koritenjem nekih opisanih html elemenata formirati ureeni i validan html dokument iji se sadraj (samo tekst) nalazi u datoteci 1.1_neformatirani_tekst.txt, tako da izgleda kao onaj sa primjera na slici. Naslov dokumenta mora biti "Zadatak 2".

Slika 1: Izgled html dokumenta iz zadatka 1.12.2.

10

2. CSS
CSS (engl. Cascading Style Sheets) ili listovi za kaskadno stiliranje web dokumenata (ne nuno samo HTML dokumenata, nego i XML i drugih). Uz pomo CSS-a razni dokumenti se mogu formatirati prema dogovorenim pravilima w3c-a, a da se sam sadraj dokumenta pritome ne mijenja. Uz stiliranje jednog dokumenta, isti CSS se moe primjeniti na vie dokumenata i otuda naziv kaskadno stiliranje. Ideja je imati vie dokumenata razliitog sadraja ali koji su stilirani (izgled) na jednaki nain - neto kao kad vie osoba popunjava isti tip formulara. Ako se eli promjeniti izgled vie dokumenta, nije potrebno mijenjati izgled svakog dokumenta posebno, nego se promjeni datoteka koja sadri CSS.

2.1. Sintaksa CSS-a

CSS je stilski jezik, koji koristi slinu sintaksu kao programski jezik C.
/* CSS comentary */ selector { property: value; }

selector - oznaava (html) element, klasu, identif ikator ili kombinaciju prema kojoj se pozicijoniramo na specifian element na koji emo primjenjivati svojstvo unutar vitiastih zagrada { }. property - oznaava naziv svojstva koje mijenjamo. value - oznaava vrijednost svojstva koje mijenjamo. Komentari u CSS-u stoje unutar sekvence /* ... */

Primjer 6: Primjer CSS stiliranja

/* CSS datoteka */ body { font-family: Verdana, Arial, Helvetica, sans-serif; color: gray; }

2.2. Naini dodjele CSS-a dokumentima

Postoje tri naina kako formatirati CSS-om html dokumente:

2.2.1. Inline style

Unutar elemenata HTML-a ako podravaju atribut style:

Primjer 7: Inline definicija CSS-a

inline_css.html:
<span style="border: 1px solid green; color: red;">Neki crveni tekst u zelenom okviru</span>

Izgled u pregledniku inline_css.html:

2.2.2. Internal style sheet

U zaglavlju html dokumenta unutar tagova <style></style>: 11

Primjer 8: Internal definicija CSS-a

internal_css.html:
<html> <head> <title>Naslov dokumenta</title> <style type="text/css"> body { color: blue; text-decoration: underline; } </style> <head> <body>Neki jednostavan plavi podcrtani tekst </body> </html>

Izgled u pregledniku:

2.2.3. External style sheet

Koritenjem vanjske datoteke .css koja sadri CSS za stiliziranje dokumenta.

Primjer 9: External definicija CSS-a uz pomo vanjske css datoteke

web_stranica.html:
<html> <head> <title>Naslov dokumenta</title> <link type="text/css" rel="stylesheet" href="external.css" /> <head> <body>Neki jednostavan plavi podcrtani tekst </body> </html>

external.css:
/* external.css */ body { color: blue; text-decoration: underline; }

Dakle CSS sadraj se nalazi u datoteci "external.css", a u html dokumentu "web_stranica.html" smo koristili element <link> u zaglavlju dokumenta kako bi se referencirali atributom "href" na css datoteku. Izgled dokumenta e biti jednak kao i za internal nain iz prethodnog primjera.

2.2.4. Prednosti i mane triju naina dodjele CSS-a dokumentu

Ako imamo mnotvo html dokumenata ili ak mnotvo web stranica, koje trebaju biti ureene na neki specifian nain, tada je external dodjela najbolje rijeenje naeg problema. Jednom datotekom upravljamo izgledom svih dokumenata web stranice. Ako poneki dokument u skupini dokumenata zahtjeva razliitu stilizaciju, onda taj dokument moemo stilizirati internal nainom. Ako pojedini html element trebamo drugaije stilizirati onda to radimo inline nainom. Ujedno, mogu se kombinirati sva tri naina odjednom na istom dokumentu ali tada vrijede neka pravila 12

2.3. Pravila dodjele CSS-a dokumentima i njihovim elementima

Prvo se elementima dodjeljuju svojstva pripisana prema postavkama redom, u: - web pregledniku - external - internal - inline Dakle, ako dokument ne sadri ni referencu na css datoteku, ni u zaglavlju nema internal CSS dodjele, ni u samom elementu nema postavljen style atribut, tada e element biti stiliran prema postavkama web preglednika (default postavke web preglednika).

2.3.1. Teine dodjele CSS parametara elementima html-a

Najveu teinu ima inline. To znai da iako isti element (itaj selector iz sintakse CSS -a) ima isti property (osobinu) ve dodjeljenu bilo kao default postavku web preglednika, bil o kao internal ili external, ona vrijednost property-a koja se nalazi inline e se primjeniti, a ostale zanemariti:

Primjer 10: Inline preko internal

inline_over_internal.html:
<html> <head> <title>Naslov dokumenta</title> <style type="text/css"> p { color: blue; text-decoration: underline; } </style> <head> <body><p style="color: red;">Neki jednostavan plavi podcrtani tekst</p> </body> </html>

Dakle za primjer 10. e vrijediti da premda je isti property color definiran i kao internal u <style> elementu zaglavlja i kao inline u style atributu elementa <p> u tijelu html dokumenta, na element <p> e se primjeniti inline vrijednost "color: red;". Drugi property u internal definiciji text-decoration e se normalno primjeniti na <p>, pa e izgled u web browseru biti sljedei:

Sljedei po redu dolazi internal, pa external, pa tek onda defaultne postavke web preglednika za property-je html elementata.

13

2.4. Pravila parametara CSS-a

Neki parametri CSS-a imaju odreenu zonu djelovanja nad blokom (elementom html -a) poput, offset, margin, border, padding parametara (property-a).

Slika 2: Blok i zone djelovanja CSS parametara

Offset oznaava prostor drugih blokova, zatim dolaze margine bloka. Margine (margin ) opisuju sam izgled objekta i svi ostali property-ji (border, color, background...) se primjenjuju unutar marigna bloka. Postavljanem margina na odreenu vrijednost, odmiemo blok od ostalih susjednih blokova. Bordure (border) mogu biti unutarnje (border) ili vanjske (outline ), to znai poveavanjem debljine crte bordura, bordure se ire prema unutra ili prema van.

Primjer 11: Border i outline bordure

border_or_outline.html:
<html> <head> <style type="text/css"> p { color: blue; text-decoration: underline; outline:dashed #00CC66 2px; border: 1px double red; width: 500px; } </style> <head> <body><p>Neki jednostavan plavi podcrtani tekst u vanjskoj zelenoj isprekidanoj borduri <br>i unutarnjoj crvenoj punoj tankoj borduri.</p> </body> </html>

Izgled u web pregledniku:

Padding ili hrvatski ispuna, oznaava prostor bloka za koji je sadraj (tekst ili slika) odmaknut od
bordura.

14

2.5. Proirena sintaksa CSS-a

U sintaksi CSS-a priali smo o osnovnoj sintaksi CSS-a, ali sa novim verzijama CSS-a (od 1.0 preko 1.1 do CSS 2.0) CSS sintaksa je bila proirivana, pa se tako osim pristupu pojedinim html elementima prema nazivu taga, moglo doi i preko klasa, identifikatora i pozicijoniranja (selekcija), ali i nizanja vie selektora sa istim svojstvima: U CSS 2.1 ak se moe i pristupiti elementu sa odreenom vrijednosti odreenog atributa (ne nuno "class" ili "id" atributa).

2.5.1. Selektor klase CSS-a

Klasama CSS-a pozicijoniramo se na element html-a koji ima odreenu vrijednost "class" atributa . Sintaksa klase je . (toka)

Primjer 12: Pozicijoniranje klasama CSS-a

css_klase.html:
<html> <head> <style type="text/css"> p.paragraf { color: blue; text-decoration: underline; outline:dashed #00CC66 2px; border: 1px double red; width: 500px; } </style> <head> <body><p class="paragraf">Na ovaj element p e se primjeniti CSS klasa</p> <p>Na ovaj se nee</p> </body> </html>

Izgled u web pregledniku:

2.5.2. Selektor pseudo klase

Uz korisniki definirane klase, postoje i pseudo klase, koje nije potrebno nazivati u class atributu elementa, nego se one stvaraju kao posljedica odreene akcije miem ili tipkovnicom nad elementom. Te klase su: - link - oznaava ne posjeenu hiper-poveznicu (defaultno to je tag <a>) - active - oznaava kada korisnik pritisne na hiper-poveznicu - hover - oznaava kada korisnik proe miem preko hiper-poveznice - visited - oznaava hiper-poveznicu koju je korisnik ve pritisnuo i posjetio Napomena, Internet Explorer do ukljuujui verzije 6.0, ne podrava dodjeljivanje pseudo klasa drugim elementima osim <a>! Sintaksa pseudo klase je : (dvotoka).
a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

15

2.5.3. Selektor identifikatora CSS-a

Identifikatorima CSS-a pozicijoniramo se na element html-a koji ima odreenu vrijednost "id" atributa. Sintaksa identifikatorea je # (ljestve)

Primjer 13: Pozicijoniranje identifikatorom CSS-a

css_identifikatori.html:
<html> <head> <style type="text/css"> p#paragraf { color: blue; text-decoration: underline; outline:dashed #00CC66 2px; border: 1px double red; width: 500px; } </style> <head> <body><p id="paragraf">Na ovaj element p e se primjeniti CSS identifikator</p> <p>Na ovaj se nee</p> </body> </html>

2.5.4. Pozicijoniranje na traeni html element

Neki puta moda ne elimo se pozicijonirati na svaki element istog naziva, nego samo na onaj koji je ugnjeen unutar nekog specifinog. To se radi na nain da se izradi putanja dolaska na traeni element.

Primjer 14: Pozicijoniranje na element

pozicijoniranje.html:
<html> <head> <style type="text/css"> span p{ color: red; font-size: 15px; } p { color: blue; font-size: 13px; } </style> <head> <body> <p>Paragraf 1</p> <span><p>Paragraf 2</p></span> <p>Paragraf 3</p> </body> </html>

Izgled e biti ovakav:

Dakle, premda smo napomenuli pregledniku da <p> treba biti plave boje i veliine 13px, onaj <p> koji je ugnjeen unutar <span> e biti veliine 15px i crvene boje. Putanja nam izgleda span p {...} 16

2.5.5. Nizanje selektora u CSS-u

Neki puta se pojavi potreba da vie elementata razliitog imena, putanje, klase ili identifikatora imaju jedan ili vie zajednikih property -ja. Tada da bismo utedjeli na pisanju CSS -a naredbi, moemo nizati (grupirati) putanje. Operator nizanja je , (zarez)

2.5.6. Primjer 15: Nizanje selektora

nizanje.html:
<html> <head> <style type="text/css"> p.paragraf, span p{ color: red; font-size: 15px; } p#p1, div p { color: blue; font-size: 13px; } </style> <head> <body> <p class="paragraf">Paragraf 1</p> <span><p>Paragraf 2</p></span> <div><p>Paragraf 3</p></div> <p id="p1">Paragraf 4</p> <p>Paragraf 5</p> </body> </html>

Izgled bi bio ovakav:

2.5.7. Relativno i apsolutno pozicioniranje na HTML element putem CSS-a selektora

.klasa { ... }

Ovaj selektor e primjeniti odreena svojstva na sve elemente koji sadre atribut class="klasa". Ovo se jo zove i relativno pozicioniranje, jer se negleda od kojeg elementa kreemo u traenje.
body table tr td { ... }

Ovaj selektor e primjeniti odreena svojstva na svim td tagovima koji se nalaze u tabeli koja je dijete (child) body elementa, u ispravno definiranom retku te tabele. Ako se pozicioniranje selektora zapoinje od body (parent-a svih vidljivih elemenata html dokumenta) elementa, tada govorimo o apsolutnom pozicioniranju na element/e.
table tr td { .. }

Ovdje se radi o relativnom pozicijoniranju jer i ako imamo tabelu u body i u nekom child-u body elementa ili bilo gdje drugdje u naem dokumentu, svima njihovim td elementima e se primjeniti svojstva.

17

2.6. Zadaci
2.6.1. Zadatak
Formatirati dokument koji ste formirali u Zadatku 1.12.1 prethodnog poglavlja (HTML): a) internal nainom, - da tekst paragrafa budu sive (grey) boje, i font neka je Arial, - naslovi da budu tamno plave (darkblue) boje, podcrtani i font da bude Verdana. b) isto kao i pod a) ali ovaj puta koritenjem external principa sa CSS -om u style.css datoteci.

2.6.2. Zadatak
Napisati internal CSS za primjer 15. takav da se unutar div taga pozicijoniramo na h2 element i promjenimo mu vrijednost boje u zelenu (green). Stvoriti 2 h2 elementa, gdje je jedan ugnjeen u <body> elementu, a drugi u <div>

18

3. Tabele
Zapravo, tko god je ikada neto radio sa uredskim alatima poput Word, Excel ili drugih, susreo se je sa tabelama. Tabele su dvodimenzionalne strukture koje na (neki) ureen nain prikazuju sadraje u redcima (engl. row) i stupcima odnosno kolonama (engl. cols, columns). Imaju iroku primjenu u HTML-u. Sadraj u tabelama ne mora nuno biti samo obian formatirani tekst, nego mogu biti i druge tabele i elementi html-a. tovie, kod web stranica (dokumenata), dizajneri tih stranica koriste tabele da segmentiraju (dijele) cjeline na stranici tako da korisnik moe bre shvatiti informaciju. Tabele se koriste i kod ispisa podataka iz baze.

3.1. Osnove
HTML element s kojim stvaramo tabelu je <table></table>. Meutim, sam tag table nam nee stvoriti retke i stupce, odnosno elije u tabeli. Tag <tr></tr> stvara redak tabele (tr - skraenica od engl. table row). Tag <td></td> stvara eliju u retku (td - skraenica od engl. table data). Sa ova tri taga ispravno ugnjeena kao prema primjeru 1, stvoriti e tabelu i to jednostavnu.

Primjer 16: HTML dokument sa jednostavnom Tabelom

simple_table.html:
<html> <head> <title>Tabele</title> <meta /> </head> <body> <!-- Stvaranje tabele --> <table border="1"> <!-- stvaranje 1. retka --> <tr> <!-- stvaranje 1. elije u 1. <td>Red 1 - elija 1</td> <!-- stvaranje 2. elije u 1. <td>Red 1 - elija 2</td> </tr> <!-- stvaranje 2. retka --> <tr> <!-- stvaranje 1. elije u 2. <td>Red 2 - elija 1</td> <!-- stvaranje 2. elije u 2. <td>Red 2 - elija 2</td> </tr> </table> </body> </html>

retku --> retku -->

retku --> retku -->

Slika 3: Izgled tabele iz primjera 16 u pregledniku

19

3.2. Primjena tabela

Vano je napomenuti da tabele u html dokumentima stvorene table tagom nisu ni sline onima koje se koriste za proraune, u primjerice tablinim kalkulatorima poput Lotusa ili MS Excela. U html-u kao to je ve spomenuto u uvodu, tabele slue za statiki prikaz sadraja koji su dobiveni na razne naine (dakle sama tabela ne vri nikakve prorau ne) ili da dijele stranicu na neke cijeline (zaglavlje, meniji, glavni sadraj, banneri i reklame, forme...), to pospjeuje interakciju sa korisnikom stranice. Kada se radi o statikim sadrajima koji prikazuju neke strukturirane podatke, liste, izvjeta je... tada se moda eli imenovati neke stupce ili retke tabele kako bi korisnik mogao prepoznati koji dijelovi su nazivi, a koji sami podaci u tabeli. To se radi tagom <th></th> (engl. table header data) koji zamijenjuje td element. U sljedeih nekoliko primjera moete vidjeti primjenu th taga i njegov efekt na tabelu.

3.2.1. Imenovani stupci tabele

Primjer 17: Tabela sa imenovanim stupcima
imenovani_stupci.html:
<!-- Stvaranje tabele --> <table border="1"> <!-- stvaranje 1. retka --> <tr> <!-- stvaranje 1. imena stupaca u 1. retku --> <th>Ime</th> <!-- stvaranje 2. imena stupaca u 1. retku --> <th>Prezime</th> </tr> <!-- stvaranje 2. retka --> <tr> <!-- stvaranje 1. elije u 2. retku --> <td>Ivica</td> <!-- stvaranje 2. elije u 2. retku --> <td>Ivi</td> </tr> <!-- stvaranje 3. retka --> <tr> <!-- stvaranje 1. elije u 3. retku --> <td>Marko</td> <!-- stvaranje 2. elije u 3. retku --> <td>Markovi</td> </tr> </table>

Slika 4: Izgled primjera 17 u pregledniku

Kao to moete vidjeti, po default postavkama preglednika sadraj th elementa se prikazuje masno, stoga korisnik moe lake i bre razabrati naziv pojedinog stupca od vrijednosti u stupcu.

20

3.2.2. Imenovani redci tabele

Primjer 18: Tabela sa imenovanim redcima
imenovani_redci.html
<!-- Stvaranje tabele --> <table border="1"> <!-- stvaranje 1. retka --> <tr> <!-- stvaranje 1. imena stupaca u 1. retku i 1. eliji --> <th>Ime</th> <td>Ivica</td> <td>Marko</td> </tr> <!-- stvaranje 2. retka --> <tr> <!-- stvaranje 2. imena stupaca u 2. retku i 1. eliji --> <th>Prezime</th> <td>Ivi</td> <td>Markovi</td> </tr> </table>

Slika 5: Izgled primjera 18 u pregledniku

3.3. to je jo vano znati o tabelama

3.3.1. Prazne elije
Ako u td element ne stavimo nikakav sadraj, ni tekst ni drugi html element, tada ako primjenimo CSS borduru na taj td element bordura se nee prikazati - jer je element prazan. Ponekad to nam nije ni vano, ali u primjeru 4. ovaj problem e doi do izraaja. Da bismo rijeili taj problem, nije loe koristiti jedan html entitet &nbsp; (skraeno od engl. not blank space), koji ne puni td element nikakvim ispisivim praznim sadrajem poput razmaka i tabulatora, nego oznai sadraj kao neispisivi znak tako da se okvir nae elije moe stvoriti. Pogledajte primjer 19.

Primjer 19: &nbsp; entitet

nbsp_entitet.html:
<table border="1"> <tr> <th>Ime</th> <td>Ivica</td> <td>Boris</td> <td>Marko</td> </tr> <tr> <th>Prezime</th> <td>Ivi</td> <td style="border: 1px solid red;"></td> <td>Markovi</td> </tr> </table> <table border="1"> <tr> <th>Ime</th> <td>Ivica</td>

21

<td>Boris</td> <td>Marko</td> </tr> <tr> <th>Prezime</th> <td>Ivi</td> <td style="border: 1px solid red;">&nbsp;</td> <td>Markovi</td> </tr> </table>

Primjetite kako smo elije u kojima je prazni sadraj (ili ga nema) inline CSS-om oznaili crvenim bordurama. To e vam biti jasnije na slici 6. Dakle, premda smo implicitno odredili da na td element ima crvenu borduru, ukoliko u njemu ne postoji entitet &nbsp; bordura se nee pojaviti, premda e se sve elije nakon te elije pravilno ispisati. Ako pokuate u praznu eliju ubaciti bilo razmak ili novi red ili tabulator, rezultat e biti isti kao da ste zatvorili tag <td></td>. To je zbog ponaanja html parsera. On naime kada ita tekst sadraj interpretira ga kao rijei, pa tako oduzima viak razmaka, tabulatore i nove retke pretvara u jedan razmak izmeu rijei.

Slika 6: &nbsp; entitet

3.3.2. Spajanje elija (engl. merging)

Ponekad se javi potreba da spojimo dvije ili vie elija vartikalno ili hor izontalno (ili oboje). To se radi sa atributima td i th elementa rowspan i colspan.

Primjer 20: Horizontalno spajanje elija

hoizontalno.html:
<table border="1"> <tr> <th>Artikl</th> <th>Cijena</th> <th>Koliina</th> <th>Jedinica</th> <th>Iznos</th> </tr> <tr> <td>Gume za vakanje</td> <td>0,99</td> <td>3</td> <td>kom</td> <td>2,97</td> </tr> <tr> <td>Meso</td> <td>25,40</td> <td>1,456</td> <td>kg</td> <td>36,98</td> </tr> <tr> <th colspan="4">Ukupni iznos</th> <td>39,95</td> </tr> </table>

22

Slika 7: Izgled primjera 20 u pregledniku Primjer 21: Vertikalno spajanje elija

vertikalno.html:
<table border="1"> <tr> <th>Proizvoa</th> <th>Model</th> <th>Godina proizvodnje</th> </tr> <tr> <td rowspan="3">Audi</td> <td>A3</td> <td>2003</td> </tr> <tr> <td>A4</td> <td>2004</td> </tr> <tr> <td>A8</td> <td>2007</td> </tr> <tr> <td rowspan="2">Ford</td> <td>Fiesta</td> <td>1999</td> </tr> <tr> <td>Mondeo</td> <td>2002</td> </tr> </table>

Slika 8: Izgled primjera 21 u pregledniku

Primjetite kako 2. i 5. redak imaju po 3 elije dok 3., 4. i 6. samo dvije. Kada specificiramo spajanje, elija tada nije potrebno pisati sve td ili th elemente za elije koje e biti spojene, nego samo one poetne. tovie, ako svaki redak sadri isti broj elija a primjenili ste vertikalno spajanje, vaa tabela e dobiti po jo jedan stupac, koji e naruavati sliku tabele. Zapravo, kada se spajaju elije u html-u to nije spajanje kakvo nalazimo kod Office alata, gdje prvo definirate elije a onda ih spajate. Ovdje to je obratno. Colspan i rowspan atributima proteete elije u susjedne!

23

3.3.3. Grupiranje kolona i redaka u tabelama

Uz obavezne tr i td ili th elemente, tabela moe imati i jo neke elemente koji ili grupiraju retke ili kolone (stupce) u neke cjeline ili slue kao definicije. Ti elementi su thead, tbody, tfoot, caption, colgroup i col. Ako se kao tip dokumenta navede bilo XHTML 1.0 ili HTML 4.01 Strict, tada tabele obavezno moraju imati retke podataka barem unutar tbody bloka. thead tbody tfoot caption - grupira retke tabele u zaglavlje tabele, te se unutar njega gnjezde th elementi (unutar tr) - grupira retke koji sadre podatke tabele - grupira retke u podnoje tabele (neto kao redak sa elijom "Ukupni iznos" u primjeru 20) - definira naziv tabele - tekst koji se ispisuje iznad, ispod ili pored tabele i ovaj element mora stajati kao prvi child table elementa ako se koristi. colgroup - definira po koliko redova e se grupirati . Ovaj element je samostalan, dakle nema child elemenata col - definira atribute td i th tagova koji se nalaze u retcima. Kao i colgroup, ovaj element je samostalan unutar table elementa ali razlika je da za pravilno koritenje potrebno je definirati onoliko col elemenata koliko imamo stupaca (td ili th) u jednom retku.

Primjer 22: XHTML 1.0 i HTML 4.01 Strict tabele sa nekim dodanim elementima
tbody.html:
<table style="border: 1px solid blue;" rules="groups"> <caption style="color: red;">Naziv Tabele</caption> <colgroup span="-2" /> <thead> <tr> <th>Zaglavlje 1</th> <th>Zaglavlje 2</th> <th>Zaglavlje 3</th> </tr> </thead> <tbody> <tr> <td>Podatak 1</td> <td>Podatak 2</td> <td>Podatak 3</td> </tr> </tbody> <tfoot> <tr> <th>Podnoje 1</th> <th>Podnoje 2</th> <th>Podnoje 3</th> </tr> </tfoot> </table>

Na slici 9, vidi se i utjecaj caption i colgroup elemenata na tabelu, dok thead, tbody i tfoot stoje samo zbog w3c specifikacije. Obratite panju na negatvnu vrijednost u atributu span elementa colgroup. Isto tako obratite panju na table atribut rules, koji specificira na koje e se podelemente primjenjivati bordure tabele. U ovom sluaju na grupe. Atribut rules u tabeli i span u colgroup elementu zapravo specificiraju sljedee: sortiraj mi stupce po dva s desna na ljevo (span) i ogradi ih bordurom tabele (rules).

Slika 9: Primjer 22 u pregledniku

Vrijednosti atributa rules jo mogu biti all, none, cols i rows.

24

U primjeru nisu navedeni nikakvi elementi col jer tada element colgroup nebi imao efekta nad tabelom.

3.4. Zadaci
3.4.1. Zadatak
Napisati html dokument (obian!) sa ispravno nainjenom tabelom. Tabela mora biti nazvana "Ispit iz PHP teaja", a kao elije zaglavlja (th) sadravati nazive stupaca: "Ime", "Prezime", "Ocjena ispita". Takoer, najnii redak mora imati samo dvije elije, od kojih jedna e sadravati naziv retka "Prosjek" kao th element, a druga vrijednost prosjeka kao td element. Izmeu prvog i posljednjeg retka tabele trebate staviti barem 5 redaka sadraja.

3.4.2. Zadatak
Napisati html dokument koji e sadravati tabelu kao to je na slici 10. Stil koji ete primjeniti je sljedei: table - bordura: veliine 1 pixel, crne boje i puna crta th - pozadina: tamno plava - boja slova: bijela - familija fonta: arial - velina elije: 30x30 pixela (potraiti koji su to CSS property) td - bordura: veliine 1 pixel, tamno plava boja, tokasta crta - familija fonta: arial - velina elije: 30x30 pixela (potraiti koji su to CSS property) - poravnanje teksta: sredina

Slika 10: Zadatak

3.4.3. Zadatak
Napisati html dokument sa tabelom iz zadatka 3.4.2, prema XHTML standardu (sa elementima koje on zahtjeva) s tim da definirate kolone sa razliitim irinama i to kolona imena mora biti iroka 100px, kolona prezimena 140px, a kolona ocjene 60px.

25

4. Forme
4.1. to su forme i emu slue?
Forme, tj. online formulari imaju iroku primjenu, ali najee se koriste kod upisa nekih podataka u online bazu (neto suprotno od tabela). Za razliku od tabela koje su statine i zahtjevaju dobro ugnjeivanje raznih sastavnih dijelova tabela (table ->(tbody)->tr->td ili th), a da primejrice izmeu table i tr nesmiju stajati tagovi poput <b>, <fieldset>, <label> ili drugi, kod formi to nije tako. Glavni element za kreiranje frome je <form></form> . Da bi se forma ispravno definirala porebno je da ima barem ovih 3 atributa: name, method i action . Name se koristi kod obrade na klijentskoj strani, dok method i action definiraju server-side obradu forme.
<form name="onLineForma" method="get" action="neka_Stranica.php"> <!-- sadraj forme --> </form>

Unutar <from></form> tagova ugnjeuje se sadraj forme, koji moe biti aktivan i statiki. Statiki sadraj su tekst, paragrafi i drugi elementi poput tabela kojima struktur iramo izgled forme. Aktivni sadraj forme su elementi forme koje korisnik moe ispunjavati ili mijenjati tj. s kojima se vri interakcija s korisnikom.

Primjer 23: Jednostavna forma

<form> Ime <input type="text" /> <br /> Prezime <input type="text" /> </form>

Kao to moete vidjeti, input element forme stvara tekstualnu kuicu, ali ova forma nije formatirana pa izgleda sva zbrda-zdola premda je jednostavna.

4.2. Elementi forme

Vano je napomenuti da unutar form elementa moe st ajati bilo koji drugi html element (osim naravno html, body, head, title...), ali za samu formu i njen aktivni sadraj vani su nam specijalni elementi koji formi daju vei smisao.

4.2.1. Interaktivni elementi forme

Elementi koji pruaju razliitu interakciju sa korisnikom su sljedei: input - stvara interaktivni element sa specifinom namjenom koju definiramo preko atributa type button - interaktivni gumb select - uz koritenje pravilno ugnjeenih option i optgroup elemenata, stvara padajue ili pak obine izbornike sa mogunosti odabira jedne ili vie opcija option - definira jednu opciju izbornika, mora biti obavezno ugnjeen unutar select elementa optgroup - grupira opcije pod isti naziv, mora biti ugnjeen unutar select, ali iznad (mora biti roditelj) option elementima textarea - stvara tableti za upis vielinijskog teksta

26

4.2.2. Neinteraktivni elementi forme

Postoje i elementi koji samo ureuju forme i pridonose preglednosti, ali ne sudjeluju u interakciji. To su: fieldset - stvara okvir (oko grupe input ili drugih interaktivnih elemenata) u formi legend - naziva okvir label - imenuje (oznauje) dio forme

4.3. Kako stvoriti ureenu formu?

Najjednostavnije je to uiniti sa tabelom. Jednostavno odredimo stupce i retke tabele, a interaktivne i ostale sadraje forme ubacimo u elije tabele. Treba napomenuti kako zbog specifinosti izrade tabele, ako elimo da naa forma obuhvati sve interaktivne elemente u tabeli, onda moramo tabelu ugnjezditi unutar form elementa:

Primjer 24: Jednostavna forma iz primjera 8 u tabeli

forma_u_tabeli.html:
<form> <table> <tr> <th>Ime</th> <td> <input type="text" /> </td> </tr> <tr> <th>Prezime</th> <td> <input type="text" /> </td> </tr> </table> </form>

Slika 11: Izgled forme iz primjera 24 u pregledniku

Morate priznati da kombinacijom tabele i forme, formulari izgledaju bolje.

27

4.4. Primjeri elemenata forme

4.4.1. Input element
Ovim elementom moemo stvarati interaktivne elemente koji imaju razne uloge i funkcijonalnosti u formi. Glavni atribut ovog elementa je type, kojim specificiramo funkciju elementa. Vrijednosti type atributa mogu biti: submit - interaktivni gumb koji aktivira slanje sadraja forme na zadanu lokaciju (action atribut!) reset - interaktivni gumb koji brie sve uneene ili postavljene vrijednosti u formi text - stvara tekstnu kuicu (samo jedna linija) password - stvara tekstnu kuicu ali prilikom upisa u nju ne prikazuje sadraj koji se unosi (skriva ga znakovima *) radio - stvara radio gumbi kojm ako je grupirano vie takvih gumbia, onda samo jedan moe biti oznaen. checkbox - stvara kuicu za oznaavanje, ako je grupirano vie takvih kuica, sve mogu biti odabrane button - stvara interaktivni gumb, ali se funkcijonalnost gumba mora ostvariti preko skriptnih jezika (javascript, vbscript...) hidden - stvara interaktivno polje koje je skriveno ali moe sadra vati neku predefiniranu vrijednost image - stvara sliku file - stvara upload dio forme sa tekstnom kuicom i gumbom "Browse...", nakon ijeg se pritiska pojavljuje dijalog za odabir datoteke za upload. Uz atribut type koji odreuje tip elementa, da bi se dobila odreena funkcijonalnost elementa moraju se koristiti i neki drugi atributi: name - specificira naziv elementa to se koristi kod obrade forme checked - iskljuivo za type="checkbox" ili type="radio", specificira da je gumb ili kuic a oznaena disabled - ne moe se primjeniti na "hidden", oznaava element da se ne moe mijenjati njegov sadraj ili se ne moe pritiskati miem maxlength - specificira maksimalnu duinu znakova, samo za "text" ili "password" readonly - specificira da se tekst u kuici nemoe mijenjati (slino kao i disabled), samo za "text" size - specificira veliinu elementa, ne moe se koristiti sa "hidden" src - izvor (lokacija) slike, samo za "image" alt - specificira alternativni tekst ako src nije ispravan ili ako lokacija ne postoji, samo za "image" align - specificira kamo da pozicionira sliku, samo za "image" value - specificira sadraj input elementa, za "text", "password" i "hidden" odraava se na vrijednost sadraja, kod "button", "submit" i "reset" na tekst kojim se gumb zove (recimo value="Pritisni me" - to e se i prikazati na slici gumba), za "checkbox" i "radio" to e biti vrijednost koja se alje na server ako je gumb ili kuica bila pritisnuta. "File" ne moe koristiti ovaj atribut, a za "checkbox" i "radio" ovaj atribut je obavezan! accept - lista MIME type podataka koji specificiraju MIME tip transfera datoteke, samo za "file"

28

input.html:

Slika 12: Input tipovi elemenata

4.4.2. Button element

Prua istu interakciju kao i <input type="button" /> samo se direktno stvara <button></button>. Koristi iste atribute kao i input type="button", dakle name, value, disabled, ali ima i type atribut koji ima slinu ulogu kao i type atribut kod input elementa. Razlika je u tome to type kod button elementa moe imati samo tri vrijednosti: button, submit i reset. Tim trima vrijednostima radimo interaktivne gumbe isto kao to i sa type atributom input elementa. Jo jedna razlika je u atributu value koji specificira vrijednost gumba ali to nee biti ispisano u gumbu. Tekst koji se ispisuje kao tekst gumba mora stajati unutar poetnog i zavrnog taga!

4.4.3. Textarea element

Element koji slui za unos vee koliine teksta. Textarea kao i button moraju imati otvoreni i zatvoreni tag, za razliku od input elementa. Obavezni atributi textarea elementa su cols i rows. Sa cols specificiramo irinu (u znakovima) textarea elementa, a sa rows broj vidljiih linija. Kao i kod input elementa, textarea ima i name, disabled i readonly atribute. Nema value atribut, jer ako zadajemo predodreenu vrijednost ona isto kao i kod button, dolazi unutar poetnih i zavrnih tagova.

4.4.4. Select element

Select element slui za stvaranje padajuih ili vieselektivnih izbornika. Select obavezno trai option elemente ugnjeene unutar <select></select>. Atributi select elementa su name, size, multiple i disabled. Name i disabled igraju istu ulogu kao i kod ostalih interaktivnih elemenata, dok size oznaava koliko e se lanova (option elemenata) prikazati u izborniku, tj. u vieselektivnom izborniku. multiple="multiple" oznaava da se radi o vieselektivnom izborniku. 29

Primjer 25: Padajui izbornik

dropdown.html:
<select> <option <option <option <option <option <option </select> value="a">Prvi izbor</option> value="b">Drugi izbor</option> value="c">Treci izbor</option> value="d">Cetvrti izbor</option> value="e">Peti izbor</option> value="f">Sesti izbor</option>

Slika 13: Izgled padajueg izbornika Primjer 26: Obian izbornik (single select)
singleselect.html:
<select size="5"> <option value="a">Prvi izbor</option> <option value="b">Drugi izbor</option> <option value="c">Treci izbor</option> <option value="d">Cetvrti izbor</option> <option value="e">Peti izbor</option> <option value="f">Sesti izbor</option> </select>

Slika 14: Izgled obinog izbornika

Multiselect ili vieselektivni izbornik izgleda identino kao i obian, samo to se dranjem ctrl tipke na tipkovnici i pritiskom mia moe odabrati vie od jedne opcije izbornika.

30

U primjerima 25 i 26 smo prikazali samo select + option elemente. Postoji jo jedan element koji se moe koristiti za grupiranje opcija unutar izbornika pod zajedniki naziv. To se radi optgroup elementom. U njegovom atributu label specificira se naziv grupe.

Primjer 27: Izbornik sa grupiranim opcijama

select_groups.html:
<select size="8"> <optgroup label="Grupa 1"> <option value="a">Prvi izbor</option> <option value="b">Drugi izbor</option> <option value="c">Treci izbor</option> </optgroup> <optgroup label="Grupa 2"> <option value="d">Cetvrti izbor</option> <option value="e">Peti izbor</option> <option value="f">Sesti izbor</option> </optgroup> </select>

Slika 15: Izgled izbornika sa grupama opcija

Treba jo samo napomenuti kako option elementi imaju atribute value, selected, disabled sa istim ulogama kao i u input elementima, te atribut label, s tim da label ne stvara naziv elementa, samo ga oznauje kao dio optgroup elementa. Optgroup element uz label atribut ima jo i disabled.

4.5. Zadaci
4.5.1. Zadatak
Napraviti formu osobnih podataka tako da su interaktivni elementi i tekst forme smjeteni u tabeli (raspored nije bitan). Forma osobnih podataka mora imati sljedea polja: Ime (tekst, veliina tekst okvira 20 znakova) Prezime (tekst, veliina tekst okvira 24 znakova) JMBG (tekst, veliina tekst okvira 13 znakova, max 13 znakova) E-mail (tekst, veliina tekst okvira 32 znakova) Spol (radio gumbi, opcije "muki" i "enski") Zavrena struna sprema (padajui izbornik, opcije za odabrati: SSS, VS i VSS) Strani jezici (dvije kuice opcija, "engleski" i "njemaki")

31

5. Liste i meniji
Uz forme i tabele, meniji su sastavni dio svake web stranice. Njima dokumenti poprimaju oblik suelja preko kojeg korisnik moe iz bilo kojeg mjesta na web stranici dohvatiti eljeni sadraj. Menijima obino tvorimo mape dokumenata na naoj web stranici ili popis poglavlja tj. sadraj dokumenta. Osnovni gradivi element menija je <a> (anchor), koji pokazuje na lokaciju drugog html dokumenta ili drugog sadraja (slika, pdf, zip fajlovi...). Meutim postoje i neto konkretnije strukture menija koji koriste ureene i neureene liste. Pa prvo da objasnimo liste.

5.1. Ureene i neureene liste

U html-u elementi <ol> i <ul> imaju dvostruku ulogu, slue numeraciji ili pravljenju natuknica, ali isto tako se mogu primjeniti kod stvaranja menija.

5.1.1. Ureene liste <ol>

Element <ol> specficira stvaranje ureene (engl. ordered) ili numerirane liste. Kako bi stvorili lana liste moramo u ol ugnjezditi elemente <li> (engl. list item), a u njih dolazi sadraj kao dijelovi liste.

Primjer 28: Ureena lista

<ol type="1"> <li>Prvi clan liste</li> <li>Drugi clan liste</li> <li>Treci clan liste</li> </ol> <ol type="I"> <li>Prvi clan liste</li> <li>Drugi clan liste</li> <li>Treci clan liste</li> </ol> <ol type="a"> <li>Prvi clan liste</li> <li>Drugi clan liste</li> <li>Treci clan liste</li> </ol>

Dakle, kao to vidimo, atribut type u <ol> elementu (ali moe stajati i u <li>) specif icira kako e se vriti numeriranje lanova liste. Mogue vrijednosti type su 1 - brojano, I rimski veliko, i - rimski malo, A - slovano veliko, i a - slovano malo. Ukoliko se ne koristi atribut type, moe se koristiti CSS property list-style-type koji tada omoguava znatno vie razliitih numeracija (na jezicima i pismima poput hebrejskog, armenskog ili japanskog...).

Slika 16: Ureena lista

32

5.1.2. Neureene liste <ul>

Neureene liste (engl. unordered list) ili prosto hrvatski natuknice se stvaraju <ul> elementom. Kao i kod ol elementa, da bi neureenoj listi dodali stavku liste koristimo <li> element. Isto kao i ol, ul posjeduje type atribut:

Primjer 29: Neureena lista

<ul type="circle"> <li>Prvi clan liste</li> <li>Drugi clan liste</li> <li>Treci clan liste</li> </ul> <ul type="disc"> <li>Prvi clan liste</li> <li>Drugi clan liste</li> <li>Treci clan liste</li> </ul> <ul type="square"> <li>Prvi clan liste</li> <li>Drugi clan liste</li> <li>Treci clan liste</li> </ul>

Slika 17: Neureena lista

33

5.1.3. Kaskadne liste

Kaskadne liste ili liste unutar listi, produbljuju pojam koritenja lista (pogotovo kada se radi sa menijima). Ovakvo koritenje listi uvelike olakava korisniku pozicioniranje na informaciju kada se radi o raznim strukturnim prikazima (kada jedna opcija ima vie opcija koje slijede iz nje).

Primjer 30: Kaskadne liste

<ul type="circle"> <li>Prvi clan liste <ul type="disc"> <li>Prvi podclan clana</li> <li>Drugi podclan clana <ul type="I"> <li>Prvi podclan podclana</li> <li>Drugi podclan podclana</li> <li>Treci podclan podclana</li> </ul> </li> <li>Treci podclan clana </li> </ul> </li> <li>Drugi clan liste <ol type="1"> <li>Prvi podclan liste</li> <li>Drugi podclan liste</li> <li>Treci podclan liste</li> </ol> </li> </ul>

Slika 18: Kaskadne liste

Kao to vidite ovakvim strukturama mogu se stvoriti napredni prikazi sadraja poglavlja dokumenata ili slijedovi toka stranica u web rijeenju.

34

5.2. Jednostavni meniji

Kao to je ve reeno, jednostavni meniji su meniji sastavljeni od jednostavnih <a> elementata i eventualno paragrafa, prijeloma linija ili tabela:

Primjer 31: Jednostavni meni

dokument1.html:
<!-- Jednostavni meni --> <p> <a href="dokument1.html">Prvi dokument</a><br /> <a href="dokument2.html">Drugi dokument</a><br /> <a href="dokument3.html">Treci dokument</a><br /> <a href="dokument4.html">Cetvrti dokument</a><br /> <a href="dokument5.html">Peti dokument</a><br /> </p> <!-- ostali sadrzaj dokumenta --> <p>Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj ...</p>

Slika 19: Jednostavni meni

Kao to vidimo, ovakvi meniji ne daju naem dokumentu dojam profinjenosti, ali slue svrsi.

5.3. Meniji izgraeni iz liste

Da bi se meni stvorio iz liste potrebno je pribjei koritenju CSS -a da se sprijee neke default postavke preglednika (numeracija ili natuknice). To se radi CSS property-jem list-style-type i dodavanjem mu vrijednosti "none".

Primjer 32: Meni izgraen sa listom

dokument2.html:
<ul style="list-style-type: none;"> <li><a href="dokument1.html">Prvi dokument</a></li> <li><a href="dokument2.html">Drugi dokument</a></li> <li><a href="dokument3.html">Treci dokument</a></li> <li><a href="dokument4.html">Cetvrti dokument</a></li> <li><a href="dokument5.html">Peti dokument</a></li> </ul> <!-- ostali sadrzaj dokumenta --> <p>Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj ...</p>

35

Slika 20: Meni izgraen sa listom

Primjetite kako ne postoji prevelika razlika izmeu ovog menija i onog jednostavnog. To je tako dok ne ponete primjenjivati CSS property -je ili javascript za interakciju sa korisnikom. Ovako definirani meni veoma brzo moemo pretvoriti u sljedee:

5.3.1. Vertikalni meni

Slika 21: Meni iz primjera 32 - vertikalni

5.3.2. Horizontalni meni

Slika 22: Meni iz primjera 32 - horizontalni

36

Uz promjenu CSS propertija display <li> elementa iz standardnog (default) "block" u "inline", mi se iz vertikalnog menija prebacujemo u horiznontalni. Ako pak za display property postavimo "tablecell", tada nad naim <li> elementom moemo primjeniti i property width i specificirati koliko e svaki elelemt li biti irok (koliko mjesta za tekst u meniju). Kada bismo isto ovo eljeli postii jednostavnim menijima potrebno bi bilo mijenjati strukturu dokumenta. Ako bismo ovakve menije napravili sa tabelama, takoer ako bismo iz vertikalno g (gdje su razl. <a> elementi svaki u svom redu i eliji) eljeli prebaciti u horizontalni (gdje imamo samo jedan red a <a> stoje u svojim elijama) i obratno, tada bi bila potrebna jo vea modifikacija dokumenta. Primjernom lista za stvaranje menija, nakon to je meni strukturiran, jednostavnom uporabom CSS-a, nad menijem pravimo promjerne horizontalnog u vertikalni i obratno, ali i jo mnogo drugih stvari...

5.4. Zadaci
5.4.1. Zadatak
Popraviti primjer 31 i staviti meni i ostali sadraj u tabelu, tako da lijevo bud e meni, a desno bude sadraj.

5.4.2. Zadatak
Napisati jednostavan horizontalni meni sa 4 stavke, koritenjem tabela.

5.4.3. Zadatak
Pokuati prepraviti meni iz zadatka 5.4.2. da postane vertikalni.

5.4.4. Zadatak
Napraviti vertikalni meni sa 4 stavke, koritenjem <ol> i < li> elemenata.

5.4.5. Zadatak
Meni iz zadatka 5.4.4. pretvoriti u horizontalni.

37