HTML i CSS - Amazon Web Services

Tehničko veleučilište u Zagrebu
Modul 1
PHP i MySQL tečaj
HTML i CSS
(HyperText Markup Language i Cascading Style Sheets)
SADRŢAJ
1.
HTML
4
1.1. OSNOVE HTML-A
1.2. OSNOVNI POJMOVI HTML-A
1.3. OSNOVNA SINTAKSA
1.4. PRAVILA OZNAĈAVANJA 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 ĈEŠĆE KORIŠTENI TAGOVI HTML-A
1.9. ATRIBUTI HTML-A
1.10. HTML ENTITETI
1.11. ZADACI
1.11.1. ZADATAK
1.11.2. ZADATAK
4
5
5
6
6
7
7
8
9
9
10
10
10
2.
11
CSS
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.
SINTAKSA CSS-A
NAĈINI DODJELE CSS-A DOKUMENTIMA
INLINE STYLE
INTERNAL STYLE SHEET
EXTERNAL STYLE SHEET
PREDNOSTI I MANE TRIJU NAČINA DODJELE CSS-A DOKUMENTU
PRAVILA DODJELE CSS-A DOKUMENTIMA I NJIHOVIM ELEMENTIMA
TEŽINE DODJELE CSS PARAMETARA ELEMENTIMA HTML-A
PRAVILA PARAMETARA CSS-A
PROŠIRENA SINTAKSA CSS-A
SELEKTOR KLASE CSS-A
SELEKTOR PSEUDO KLASE
SELEKTOR IDENTIFIKATORA CSS-A
POZICIJONIRANJE NA TRAŽENI 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
11
11
11
11
12
12
13
13
14
15
15
15
16
16
17
17
17
18
18
18
3.
TABELE
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
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.
OSNOVE
PRIMJENA TABELA
IMENOVANI STUPCI TABELE
IMENOVANI REDCI TABELE
ŠTO JE JOŠ VAŽNO ZNATI O TABELAMA
PRAZNE ĆELIJE
SPAJANJE ĆELIJA (ENGL. MERGING)
GRUPIRANJE KOLONA I REDAKA U TABELAMA
ZADACI
ZADATAK
ZADATAK
ZADATAK
ŠTO SU FORME I ĈEMU SLUŽE?
ELEMENTI FORME
INTERAKTIVNI ELEMENTI FORME
NEINTERAKTIVNI ELEMENTI FORME
KAKO STVORITI UREĐENU FORMU?
PRIMJERI ELEMENATA FORME
INPUT ELEMENT
BUTTON ELEMENT
TEXTAREA ELEMENT
SELECT ELEMENT
ZADACI
ZADATAK
LISTE I MENIJI
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.
UREĐENE I NEUREĐENE LISTE
UREĐENE LISTE <OL>
NEUREĐENE LISTE <UL>
KASKADNE LISTE
JEDNOSTAVNI MENIJI
MENIJI IZGRAĐENI IZ LISTE
VERTIKALNI MENI
HORIZONTALNI MENI
ZADACI
ZADATAK
ZADATAK
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
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:   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 padajućeg izbornika
Slika 14: Izgled obiĉnog izbornika
Slika 15: Izgled izbornika sa grupama opcija
Slika 16: UreĊena lista
Slika 17: NeureĊena lista
Slika 18: Kaskadne liste
Slika 19: Jednostavni meni
Slika 20: Meni izgraĊen 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 ugnježĊen 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:   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: Padajući izbornik
Primjer 26: Obiĉan izbornik (single select)
Primjer 27: Izbornik sa grupiranim opcijama
Primjer 28: UreĊena lista
Primjer 29: NeureĊena lista
Primjer 30: Kaskadne liste
Primjer 31: Jednostavni meni
Primjer 32: Meni izgraĊen 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 označavanja različitih sadrţaja
korištenjem tekstualnih struktura za opis HTML dokumenta, kako bi se takvi sadrţaji na strukturiran i
uređen način prikazivali i dohvaćali putem Interneta (ili intraneta ili lokalno). Engl. Hypertext markup ili
grubo prevedeno, hipertekst označavanje zapravo govori da se uz uobičajen prikaz HTML
dokumenata (tekst, slika, videa, zvuka...), dokumenti mogu međusobno povezivati tzv. hiperpoveznicama (engl. hyperlink).
Jezik je stvoren i standardiziran kao vlasništvo w3c (World Wide Web Consorcium).
Na stranicama www.w3schools.com moţete pronaći sve vezano uz HTML standard, jezik, dijelove i
tipove html-a.
1.1. Osnove HTML-a
HTML je strukturiran jezik u kojemu se za označavanje određenih sadrţaja 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 moţe sadrţavati atribute, druge elemente ili
običan tekst. Kada element sadrţi druge elemente, kaţe se da su oni ugnjeţđeni u roditeljskom
elementu (čvoru dokumenta). Ugnjeţđivanje se još naziva i nesting.
Na svaki HTML dokument moţe 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
Grana
čvor
title
čvor
head
html
meta
body
p
Neki tekst
Sadrţaj čvorova moţe se smatrati listovima stabla, a atributi opisuju oblik grana i listova.
4
1.2. Osnovni pojmovi HTML-a
Tag - osnovni pojam HTML-a, označava pojedine elemente
Element - čvor dokumenta ili engl. node (hijerarhijski gledano kao stablo), koji moţe imati razne
atribute, vrijednosti atributa, sadrţaj ili druge čvorove tj. elemente.
Atribut - naziv svojstva elemenata
Vrijednost atributa - opis svojstva elemenata
Sadrţaj elemenata - tekstualni sadrţaj čvora (ono što će biti ispisano u web pregledniku)
Parent - roditeljski čvor, koji obavezno sadrţi druge čvorove (nije nuţno da posjeduje sadrţaj)
Child - dijete roditeljskog čvora, moţe ali i ne mora sadrţavati druge čvorove.
Root - korijenski roditeljski čvor dokumenta (prema w3c standardu to mora biti html tag)
Ugnjeţđivanje - engl. nesting, postupak pravilnog raspoređivanja 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 sljedeće upute:
- Tag određuje element,
- Atribut određuje koje svojstvo se primjenjuje (ako element ima svojstva),
- Vrijednost atributa određuje način primjene svojstva,
- Sadrţaj je tekst što će se ispisati u web pregledniku ili korisnička skripta (javascript, vbstript,
CSS...) koja će biti pokrenuta i obrađena na određeni način.
Od ovog principa odstupa samo oznaka (tag) komentara u html-u.
Vaţno: ni atribut, ni vrijednost atributa ni sadrţaj nisu potrebni da bi definirali element, oni ga samo
dodatno opisuju. Štoviše, kod nekih se elemenata atributi, pa ni sadrţaj se ne smiju pojaviti da bi
elementi bili ispravno definirani.
Primjer 3: Sintaksa html elemenata
<tag></tag>
<tag />
<tag ime_atributa="vrijednost-atributa">sadržaj</tag>
<tag ime-atributa='vrijednost-atributa'>sadržaj</tag>
<tag ime-atributa="vrijednost-atributa" />

Svaki element mora imati svoj početak i svoj kraj. Početak je definiran <tag> gdje umjesto tag dolazi
naziv elemenata, a kraj je definiran kao </tag> gdje / označava da se radi o završetku elemenata
odnosno o završnom 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 atributa (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 sadrţaj koji stoji unutar početnog i završnog taga.
Komentari u html-u se pišu 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 započne jednim tipom navodnika, tim tipom se mora i završiti ili je dokument
nevalidan (neispravan).
5
1.4. Pravila označavanja elemenata HTML-a
Tri su načina 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 početni i završni tag, kod nekih samo
početni, a kod nekih se početni tag zatvara u sebe. Također kod nekih verzija HTML-a određeni
elementi umjesto samo početnog taga obavezno zahtijevaju samo-zatvoreni tag.
Primjer 4: Tipovi tagova u HTML-u
Početni i završni tag opisuju element p (paragraf).
<p></p>
Samo početni tag opisuje hr element (engl. horizontal rule - horizontalna linija)
<hr>
Premda nije nuţno u HTML-u, element moţe 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 nuţno da dokument bude validan (ispravan) da bi ga neki web preglednik mogao
prikazati, w3c je odredio standardom da svaki html validan dokument mora imati sljedeće:
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 određenog 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 sadrţava sve ostale.
3. unutar html elemenata treba pravilno ugnjezditi:
a) head element - ili zaglavlje dokumenta koje sadrţi čvorove (elemente) koji upravljaju
zaglavljem dokumenta (naslov dokumenta, ključne riječi, autori
dokumenta, uključivanje određene kodne stranice, uključivanje raznih
vanjskih skripti...)
b) i body element - ili tijelo dokumenta koje sadrţi čvorove sa raznim sadrţajima.
<html>
<head></head>
<body></body>
</html>
1
engl. parser - program koji čita tekstualne oznake (engl. markups) i interpretira ih kao stablo čvorova, grana i
listova. Pojam potječe od SGML-a, a rezultat parsiranja je DTD (engl. Document Type Definition) ili definicija
strukture dokumenta (stablasta struktura).
6
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 ugnjeţđen 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 sadrţaja niti drugih elemenata - dokument je prazan!
1.6. Tipovi i verzije HTML dokumenata (!DOCTYPE)
HTML je nastao početkom 90ih prošloga stoljeća, i od tada štošta se je promjenilo u samom jeziku.
Dodani su novi tagovi, atributi, primjena CSS-a, ali i mnogi tagovi i atributi su izbačeni.
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.
Više o svemu moţete pronaći na stranicama www.w3schools.com
1.7. Podjela elemenata HTML-a
Mnogo je podjela elemenata u html-u, ali vaţnije podjele su prema sintaksi, prema namjeni, prema
baratanju sadrţajem.
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 sadrţaj (<h1>, <p>, <b>, <em> ...)
- one koji označavaju sadrţaj (<div>, <span>, <label>, <q> ...)
- one koji pruţaju interakciju sa korisnikom (<a>, <form>, <button>, <input>, ....)
Prema načinu baratanja sadrţajem:
- inline: sadrţaj ostaje nepromjenjen unutar jednog bloka (<span>, <a>, <font> ...)
- block: sadrţaj se stavlja u zaseban blok (<div>, <ul>, <ol>, <li>, <h1> ....)
Moţe se vidjeti da neki tagovi (elementi) poput <a> imaju više svojstva: radi se o elementu koji
zahtjeva početni i završni tag, ne baca sadrţaj u novi blok, a pruţa interakciju s korisnikom
(referenciranje na druge dokumente - ne nuţno html!).
7
1.8. Neki češće korišteni tagovi HTML-a
Naziv tag-a
a
h1 - h6
p
br
Značenje
anchor (sidro)
heading (naslov)
paragraph (paragraf)
break (prijelom)
hr
form
input
horizontal rule (hor.
linija)
tabela sadrţaja
table row (redak
tabele)
table data (ćelija
tabele)
podebljan tekst
italic (kurziv ili
ukošeni tekst)
prekriţen tekst
underline (podcrtan
tekst)
formular
interaktivni element
button
interaktivni gumb
textarea
tabletić za unos
teksta (više linijski)
oznaka
ordered llist (uređena
lista)
unordered list
(neuređena lista)
list item (član liste)
table
tr
td
b ili strong
i ili em
s ili strike
u
label
ol
ul
li
Opis
referenciranje na druge dokumente preko Interneta ili lokalno
formatiranje naslova obično paragrafa
formatiranje paragrafa u dokumentu
prijelom linije teksta (slično kao paragraf, samo što ne lomi
paragrafe)
iscrtava horizontalnu liniju
fromira tabelu podataka ili sadrţaja
formira redak tabele (obavezno mora biti ugnjeţđen unutar
<table>)
formira ćeliju u retku tabele (morabiti ugnjeţđen unutar <tr>
taga) - ovaj element sadrţi podatke tabele
formatira tekst kao podebljani (masno ispisani): tekst
formatira tekst kao ukošen: tekst
formatira tekst kao prekriţeni (po sredini): tekst
formatira tekst kao podcrtan: tekst
formira formular za interakciju sa korisnikom
formira interaktivni element formulara (da bi formular bio
prenešen input mora biti ugnjeţđen unutar <form>, prmda ne
nuţno kao njegov child)
formita interaktivni gumb, kojim se uz pomoć nekog skriptnog
jezika moţe upravljati nekim interaktivnim sadrţajem
formira tabletić za unos teksta (više linijski) koji je dio
formulara (pogledati input)
formatira neki sadrţaj kao specifičnu oznaku (u formularima)
formira stvaranje uređene liste (numerirane rimskim, arapskim
brojkama ili abecedno)
formira stvaranje neuređene liste (natuknice)
slično kao <td> za <table>, <li> je sastavni dio <ol> ili <ul>
elemenata koji sadrţi tekst ili članove uređenih ili neuređenih
lista
Potpunu listu elemenata html-a, kao i njihov opis, primjenu i primjere zajedno sa napomenama koji od
njih su zastarjeli sa određenim verzijama HTML-a i koji su zabranjeni u XHTML-u, moţete pogledati
na www.w3schools.com.
8
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), jezični, tipkovnični, događajni 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 nuţno jedinstveni identifikator)
style - specificira inline CSS stil elementa
title - specificira tool tip text odnosno tekst koji se pojavljuje iznad bloka elementa kada
kosnik drţi neko vrijeme kursor miša iznad njega.
Jezični atributi - definiraju jezične 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 prečice sa tipkovnice
tabindex - specificira redosljed dolaska na element kada se pritišće gumb tabulatora na
tipkovnici
Događajni atributi opisuju akciju koju treba pozvati kada se desi neki događaj (engl. event), a postoji
ih više vrsta, koje nećemo detaljnije obrađivati (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 običan sadrţaj
(da se ne interpretiraju kao HTML kod!), moramo koristiti zamjenske izraze. Zamjenski izrazi se
definiraju prema w3c standardu da započinju & znakom (& je isto entitet!) a završavaju sa ;
Neki češći HTML entiteti i njihove zamjene:
<
- <
- manje (ili otvorena kosa zagrada)
>
- >
- više (ili zatvorena kosa zagrada)
&
- & - ampersand ili and znak
'
- ' - apostrof (jednostruki navodnik)
"
- " - kvotacija (dvostruki navodnik)
Uz ove znakove entiteti mogu biti i bilokoji znakovi iz UNICODE kodne stranice znakova, uljučujući i
hrvatska slova č, ć, đ, š, ţ i njihove kapitalizacije.
UNICODE izrazi se pišu &#xxxx; gdje xxx moţe biti od 0-65535 (npr: Š = Š, ş = š).
9
1.11. Zadaci
1.11.1. Zadatak
Napišite w3c validan html dokument sa definicijom dokumanta i ispravno ugnjeţđenim osnovnim
elementima html dokumenta.
1.11.2. Zadatak
Korištenjem nekih opisanih html elemenata formirati uređeni i validan html dokument čiji se sadrţaj
(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 nuţno
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 sadrţaj dokumenta pritome ne mijenja.
Uz stiliranje jednog dokumenta, isti CSS se moţe primjeniti na više dokumenata i otuda naziv
kaskadno stiliranje. Ideja je imati više dokumenata različitog sadrţaja ali koji su stilirani (izgled) na
jednaki način - nešto kao kad više osoba popunjava isti tip formulara. Ako se ţeli promjeniti izgled
više dokumenta, nije potrebno mijenjati izgled svakog dokumenta posebno, nego se promjeni
datoteka koja sadrţi CSS.
2.1. Sintaksa CSS-a
CSS je stilski jezik, koji koristi sličnu sintaksu kao programski jezik C.
/* CSS comentary */
selector { property: value; }
selector - označava (html) element, klasu, identifikator ili kombinaciju prema kojoj se
pozicijoniramo na specifičan element na koji ćemo primjenjivati svojstvo unutar vitičastih
zagrada { }.
property - označava naziv svojstva koje mijenjamo.
value - označava 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. Načini dodjele CSS-a dokumentima
Postoje tri načina kako formatirati CSS-om html dokumente:
2.2.1. Inline style
Unutar elemenata HTML-a ako podrţavaju 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
Korištenjem vanjske datoteke .css koja sadrţi 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 sadrţaj 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 način iz prethodnog primjera.
2.2.4. Prednosti i mane triju načina dodjele CSS-a dokumentu
Ako imamo mnoštvo html dokumenata ili čak mnoštvo web stranica, koje trebaju biti uređene na neki
specifičan način, tada je external dodjela najbolje riješenje našeg problema. Jednom datotekom
upravljamo izgledom svih dokumenata web stranice.
Ako poneki dokument u skupini dokumenata zahtjeva različitu stilizaciju, onda taj dokument moţemo
stilizirati internal načinom.
Ako pojedini html element trebamo drugačije stilizirati onda to radimo inline načinom.
Ujedno, mogu se kombinirati sva tri načina 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 sadrţi 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. Težine dodjele CSS parametara elementima html-a
Najveću teţinu ima inline. To znaći da iako isti element (čitaj selector iz sintakse CSS-a) ima isti
property (osobinu) već dodjeljenu bilo kao default postavku web preglednika, bilo 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 sljedeći:
Sljedeći 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 određenu zonu djelovanja nad blokom (elementom html-a) poput, offset,
margin, border, padding parametara (property-a).
Slika 2: Blok i zone djelovanja CSS parametara
Offset označava 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 određenu vrijednost, odmičemo blok od
ostalih susjednih blokova.
Bordure (border) mogu biti unutarnje (border) ili vanjske (outline ), što znači povečavanjem 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, označava prostor bloka za koji je sadrţaj (tekst ili slika) odmaknut od
bordura.
14
2.5. Proširena sintaksa CSS-a
U sintaksi CSS-a pričali 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 proširivana, pa se tako osim pristupu pojedinim html
elementima prema nazivu taga, moglo doći i preko klasa, identifikatora i pozicijoniranja (selekcija),
ali i nizanja više selektora sa istim svojstvima:
U CSS 2.1 čak se moţe i pristupiti elementu sa određenom vrijednosti određenog atributa (ne
nuţno "class" ili "id" atributa).
2.5.1. Selektor klase CSS-a
Klasama CSS-a pozicijoniramo se na element html-a koji ima određenu vrijednost "class" atributa.
Sintaksa klase je . (točka)
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 neće</p>
</body>
</html>
Izgled u web pregledniku:
2.5.2. Selektor pseudo klase
Uz korisnički definirane klase, postoje i pseudo klase, koje nije potrebno nazivati u class atributu
elementa, nego se one stvaraju kao posljedica određene akcije mišem ili tipkovnicom nad
elementom.
Te klase su:
- link - označava ne posječenu hiper-poveznicu (defaultno to je tag <a>)
- active - označava kada korisnik pritisne na hiper-poveznicu
- hover - označava kada korisnik prođe mišem preko hiper-poveznice
- visited - označava hiper-poveznicu koju je korisnik več pritisnuo i posjetio
Napomena, Internet Explorer do uključujući verzije 6.0, ne podrţava dodjeljivanje pseudo klasa
drugim elementima osim <a>!
Sintaksa pseudo klase je : (dvotočka).
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 određenu 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 neće</p>
</body>
</html>
2.5.4. Pozicijoniranje na traženi html element
Neki puta moţda ne ţelimo se pozicijonirati na svaki element istog naziva, nego samo na onaj koji
je ugnjeţđen unutar nekog specifičnog. To se radi na način da se izradi putanja dolaska na traţeni
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 veličine 13px, onaj <p>
koji je ugnjeţđen unutar <span> će biti veličine 15px i crvene boje. Putanja nam izgleda span p {...}
16
2.5.5. Nizanje selektora u CSS-u
Neki puta se pojavi potreba da više elementata različitog imena, putanje, klase ili identifikatora
imaju jedan ili više zajedničkih property-ja. Tada da bismo uštedjeli na pisanju CSS-a naredbi,
moţemo 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 određena svojstva na sve elemente koji sadrţe atribut class="klasa".
Ovo se još zove i relativno pozicioniranje, jer se negleda od kojeg elementa krećemo u traţenje.
body table tr td { ... }
Ovaj selektor će primjeniti određena 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
započinje 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 našem 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 načinom,
- 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 korištenjem 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 ugnjeţđen u
<body> elementu, a drugi u <div>
18
3. Tabele
Zapravo, tko god je ikada nešto radio sa uredskim alatima poput Word, Excel ili drugih, susreo se
je sa tabelama. Tabele su dvodimenzionalne strukture koje na (neki) uređen način prikazuju
sadrţaje u redcima (engl. row) i stupcima odnosno kolonama (engl. cols, columns).
Imaju široku primjenu u HTML-u. Sadrţaj u tabelama ne mora nuţno biti samo običan formatirani
tekst, nego mogu biti i druge tabele i elementi html-a. Štoviše, kod web stranica (dokumenata),
dizajneri tih stranica koriste tabele da segmentiraju (dijele) cjeline na stranici tako da korisnik moţe
brţe shvatiti informaciju. Tabele se koriste i kod ispisa podataka iz baze.
3.1. Osnove
HTML element s kojim stvaramo tabelu je <table></table>. Međutim, sam tag table nam neće
stvoriti retke i stupce, odnosno ćelije u tabeli.
Tag <tr></tr> stvara redak tabele (tr - skraćenica od engl. table row).
Tag <td></td> stvara ćeliju u retku (td - skraćenica od engl. table data).
Sa ova tri taga ispravno ugnjeţđena 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>

<table border="1">

<tr>

<tr>

retku -->
retku -->
retku -->
Slika 3: Izgled tabele iz primjera 16 u pregledniku
19
3.2. Primjena tabela
Vaţno je napomenuti da tabele u html dokumentima stvorene table tagom nisu ni slične onima koje
se koriste za proračune, u primjerice tabličnim kalkulatorima poput Lotusa ili MS Excela.
U html-u kao što je već spomenuto u uvodu, tabele sluţe za statički prikaz sadrţaja koji su dobiveni
na razne načine (dakle sama tabela ne vrši nikakve proračune) ili da dijele stranicu na neke cijeline
(zaglavlje, meniji, glavni sadrţaj, banneri i reklame, forme...), što pospješuje interakciju sa
korisnikom stranice.
Kada se radi o statičkim sadrţajima koji prikazuju neke strukturirane podatke, liste, izvještaje...
tada se moţda ţ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 sljedećih nekoliko primjera moţete vidjeti primjenu th taga i njegov efekt na tabelu.
3.2.1. Imenovani stupci tabele
Primjer 17: Tabela sa imenovanim stupcima
imenovani_stupci.html:

<table border="1">

<tr>

<th>Ime</th>

<th>Prezime</th>
</tr>

<tr>

<td>Ivica</td>

<td>Ivić</td>
</tr>

<tr>

<td>Marko</td>

<td>Marković</td>
</tr>
</table>
Slika 4: Izgled primjera 17 u pregledniku
Kao što moţete vidjeti, po default postavkama preglednika sadrţaj th elementa se prikazuje
masno, stoga korisnik moţe lakše i brţe razabrati naziv pojedinog stupca od vrijednosti u stupcu.
20
3.2.2. Imenovani redci tabele
Primjer 18: Tabela sa imenovanim redcima
imenovani_redci.html

<table border="1">

<tr>

<th>Ime</th>
<td>Ivica</td>
<td>Marko</td>
</tr>

<tr>

<th>Prezime</th>
<td>Ivić</td>
<td>Marković</td>
</tr>
</table>
Slika 5: Izgled primjera 18 u pregledniku
3.3. Što je još važno znati o tabelama
3.3.1. Prazne ćelije
Ako u td element ne stavimo nikakav sadrţaj, ni tekst ni drugi html element, tada ako primjenimo
CSS borduru na taj td element bordura se neće prikazati - jer je element prazan.
Ponekad to nam nije ni vaţno, ali u primjeru 4. ovaj problem će doći do izraţaja.
Da bismo riješili taj problem, nije loše koristiti jedan html entitet   (skraćeno od engl. not
blank space), koji ne puni td element nikakvim ispisivim praznim sadrţajem poput razmaka i
tabulatora, nego označi sadrţaj kao neispisivi znak tako da se okvir naše ćelije moţe stvoriti.
Pogledajte primjer 19.
Primjer 19:   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;"> </td>
<td>Marković</td>
</tr>
</table>
Primjetite kako smo ćelije u kojima je prazni sadrţaj (ili ga nema) inline CSS-om označili crvenim
bordurama. To će vam biti jasnije na slici 6.
Slika 6:   entitet
Dakle, premda smo implicitno odredili da naš td
element ima crvenu borduru, ukoliko u njemu ne
postoji entitet   bordura se neće pojaviti,
premda će se sve ćelije nakon te ćelije pravilno
ispisati.
Ako pokušate 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 ponašanja html parsera. On naime kada
čita tekst sadrţaj interpretira ga kao riječi, pa tako
oduzima višak razmaka, tabulatore i nove retke
pretvara u jedan razmak između riječi.
3.3.2. Spajanje ćelija (engl. merging)
Ponekad se javi potreba da spojimo dvije ili više ćelija vartikalno ili horizontalno (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>Količina</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>Proizvođač</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 početne. Štoviše, ako svaki redak
sadrţi isti broj ćelija a primjenili ste vertikalno
spajanje, vaša tabela će dobiti po još jedan
stupac, koji će narušavati 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
proteţete čelije u susjedne!
23
3.3.3. Grupiranje kolona i redaka u tabelama
Uz obavezne tr i td ili th elemente, tabela moţe imati i još neke elemente koji ili grupiraju retke ili
kolone (stupce) u neke cjeline ili sluţe 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 sadrţe podatke tabele
- grupira retke u podnoţje tabele (nešto 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 korištenje 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>Podnožje 1</th>
<th>Podnožje 2</th>
<th>Podnožje 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.
Slika 9: Primjer 22 u pregledniku
Obratite paţnju na negatvnu vrijednost u atributu span
elementa colgroup. Isto tako obratite paţnju na table atribut
rules, koji specificira na koje će se podelemente
primjenjivati bordure tabele. U ovom slučaju na grupe.
Atribut rules u tabeli i span u colgroup elementu zapravo
specificiraju sljedeće: sortiraj mi stupce po dva s desna na
ljevo (span) i ogradi ih bordurom tabele (rules).
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 (običan!) sa ispravno načinjenom tabelom.
Tabela mora biti nazvana "Ispit iz PHP tečaja", a kao ćelije zaglavlja (th) sadrţavati nazive stupaca:
"Ime", "Prezime", "Ocjena ispita".
Također, najniţi redak mora imati samo dvije ćelije, od kojih jedna će sadrţavati naziv retka
"Prosjek" kao th element, a druga vrijednost prosjeka kao td element.
Između prvog i posljednjeg retka tabele trebate staviti barem 5 redaka sadrţaja.
3.4.2. Zadatak
Napisati html dokument koji će sadrţavati tabelu kao što je na slici 10.
Stil koji ćete primjeniti je sljedeći:
table - bordura: veličine 1 pixel, crne boje i puna crta
th
- pozadina: tamno plava
- boja slova: bijela
- familija fonta: arial
- velična ćelije: 30x30 pixela (potraţiti koji su to CSS property)
td
- bordura: veličine 1 pixel, tamno plava boja, točkasta crta
- familija fonta: arial
- velična ćelije: 30x30 pixela (potraţiti 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 različitim š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 služe?
Forme, tj. online formulari imaju široku primjenu, ali najčešće se koriste kod upisa nekih podataka u
online bazu (nešto suprotno od tabela). Za razliku od tabela koje su statične i zahtjevaju dobro
ugnjeţđivanje raznih sastavnih dijelova tabela (table->(tbody)->tr->td ili th), a da primejrice između
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">

</form>
Unutar <from></form> tagova ugnjeţđuje se sadrţaj forme, koji moţe biti aktivan i statički. Statički
sadrţaj su tekst, paragrafi i drugi elementi poput tabela kojima strukturiramo izgled forme. Aktivni
sadrţaj forme su elementi forme koje korisnik moţe ispunjavati ili mijenjati tj. s kojima se vrši
interakcija s korisnikom.
Primjer 23: Jednostavna forma
<form>
Ime <input type="text" />
<br />
Prezime <input type="text" />
</form>
Kao što moţete vidjeti, input element forme stvara tekstualnu kućicu, ali ova forma nije formatirana
pa izgleda sva zbrda-zdola premda je jednostavna.
4.2. Elementi forme
Vaţno je napomenuti da unutar form elementa moţe stajati bilo koji drugi html element (osim
naravno html, body, head, title...), ali za samu formu i njen aktivni sadrţaj vaţni su nam specijalni
elementi koji formi daju veći smisao.
4.2.1. Interaktivni elementi forme
Elementi koji pruţaju različitu interakciju sa korisnikom su sljedeći:
input
- stvara interaktivni element sa specifičnom namjenom koju definiramo preko atributa type
button - interaktivni gumb
select - uz korištenje pravilno ugnjeţđenih option i optgroup elemenata, stvara padajuće
ili pak obične izbornike sa mogućnosti odabira jedne ili više opcija
option - definira jednu opciju izbornika, mora biti obavezno ugnjeţđen unutar select elementa
optgroup - grupira opcije pod isti naziv, mora biti ugnjeţđen unutar select, ali iznad (mora biti
roditelj) option elementima
textarea - stvara tabletić za upis višelinijskog teksta
26
4.2.2. Neinteraktivni elementi forme
Postoje i elementi koji samo uređuju 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 (označuje) dio forme
4.3. Kako stvoriti uređenu formu?
Najjednostavnije je to učiniti sa tabelom. Jednostavno odredimo stupce i retke tabele, a
interaktivne i ostale sadrţaje forme ubacimo u ćelije tabele.
Treba napomenuti kako zbog specifičnosti izrade tabele, ako ţelimo da naša 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 moţemo 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 sadrţaja forme na zadanu lokaciju (action atribut!)
reset
- interaktivni gumb koji briše sve unešene ili postavljene vrijednosti u formi
text
- stvara tekstnu kućicu (samo jedna linija)
password - stvara tekstnu kućicu ali prilikom upisa u nju ne prikazuje sadrţaj koji se unosi
(skriva ga znakovima *)
radio
- stvara radio gumbić kojm ako je grupirano više takvih gumbića, onda samo jedan
moţe biti označen.
checkbox - stvara kućicu za označavanje, ako je grupirano više takvih kućica, 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 moţe sadrţavati neku predefiniranu
vrijednost
image - stvara sliku
file
- stvara upload dio forme sa tekstnom kućicom i gumbom "Browse...", nakon čijeg se
pritiska pojavljuje dijalog za odabir datoteke za upload.
Uz atribut type koji određuje tip elementa, da bi se dobila određena funkcijonalnost elementa
moraju se koristiti i neki drugi atributi:
name - specificira naziv elementa što se koristi kod obrade forme
checked - isključivo za type="checkbox" ili type="radio", specificira da je gumb ili kućica
označena
disabled - ne moţe se primjeniti na "hidden", označava element da se ne moţe mijenjati njegov
sadrţaj ili se ne moţe pritiskati mišem
maxlength - specificira maksimalnu duţinu znakova, samo za "text" ili "password"
readonly - specificira da se tekst u kućici nemoţe mijenjati (slično kao i disabled), samo za "text"
size
- specificira veličinu elementa, ne moţe 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 sadrţaj input elementa, za "text", "password" i "hidden" odraţava se na
vrijednost sadrţaja, 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 kućica bila pritisnuta. "File" ne
moţe 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
Pruţa 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 sličnu ulogu kao i type atribut kod input elementa. Razlika je u tome što type kod button
elementa moţe 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 neće biti ispisano u
gumbu. Tekst koji se ispisuje kao tekst gumba mora stajati unutar početnog i završnog taga!
4.4.3. Textarea element
Element koji sluţi za unos veće količine 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 predodređenu vrijednost ona isto kao i kod button, dolazi
unutar početnih i završnih tagova.
4.4.4. Select element
Select element sluţi za stvaranje padajućih ili višeselektivnih izbornika. Select obavezno traţi
option elemente ugnjeţđene 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 označava
koliko će se članova (option elemenata) prikazati u izborniku, tj. u višeselektivnom izborniku.
multiple="multiple" označava da se radi o višeselektivnom izborniku.
29
Primjer 25: Padajući 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 padajućeg izbornika
Primjer 26: Običan 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 običnog izbornika
Multiselect ili višeselektivni izbornik izgleda identično kao i običan, samo što se drţanjem ctrl tipke
na tipkovnici i pritiskom miša moţe odabrati više od jedne opcije izbornika.
30
U primjerima 25 i 26 smo prikazali samo select + option elemente. Postoji još jedan element koji se
moţe koristiti za grupiranje opcija unutar izbornika pod zajednički 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 označuje 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 smješteni u tabeli
(raspored nije bitan).
Forma osobnih podataka mora imati sljedeća polja:
Ime (tekst, veličina tekst okvira 20 znakova)
Prezime (tekst, veličina tekst okvira 24 znakova)
JMBG (tekst, veličina tekst okvira 13 znakova, max 13 znakova)
E-mail (tekst, veličina tekst okvira 32 znakova)
Spol (radio gumbi, opcije "muški" i "ţenski")
Završena stručna sprema (padajući izbornik, opcije za odabrati: SSS, VŠS i VSS)
Strani jezici (dvije kućice opcija, "engleski" i "njemački")
31
5. Liste i meniji
Uz forme i tabele, meniji su sastavni dio svake web stranice. Njima dokumenti poprimaju oblik
sučelja preko kojeg korisnik moţe iz bilo kojeg mjesta na web stranici dohvatiti ţeljeni sadrţaj.
Menijima obično tvorimo mape dokumenata na našoj web stranici ili popis poglavlja tj. sadrţaj
dokumenta.
Osnovni gradivi element menija je <a> (anchor), koji pokazuje na lokaciju drugog html dokumenta
ili drugog sadrţaja (slika, pdf, zip fajlovi...). Međutim postoje i nešto konkretnije strukture menija
koji koriste uređene i neuređene liste. Pa prvo da objasnimo liste.
5.1. Uređene i neuređene liste
U html-u elementi <ol> i <ul> imaju dvostruku ulogu, sluţe numeraciji ili pravljenju natuknica, ali
isto tako se mogu primjeniti kod stvaranja menija.
5.1.1. Uređene liste <ol>
Element <ol> specficira stvaranje uređene (engl. ordered) ili numerirane liste. Kako bi stvorili člana
liste moramo u ol ugnjezditi elemente <li> (engl. list item), a u njih dolazi sadrţaj kao dijelovi liste.
Primjer 28: Uređena 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 moţe stajati i u <li>) specificira
kako će se vršiti numeriranje članova liste.
Moguće vrijednosti type su 1 - brojčano, I rimski veliko, i - rimski malo, A - slovčano veliko,
i a - slovčano malo.
Ukoliko se ne koristi atribut type, moţe se
koristiti CSS property list-style-type koji tada
omogućava znatno više različitih numeracija (na
jezicima i pismima poput hebrejskog, armenskog
ili japanskog...).
Slika 16: Uređena lista
32
5.1.2. Neuređene liste <ul>
Neuređene liste (engl. unordered list) ili prosto hrvatski natuknice se stvaraju <ul> elementom.
Kao i kod ol elementa, da bi neuređenoj listi dodali stavku liste koristimo <li> element. Isto kao i ol,
ul posjeduje type atribut:
Primjer 29: Neuređena 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: Neuređena lista
33
5.1.3. Kaskadne liste
Kaskadne liste ili liste unutar listi, produbljuju pojam korištenja lista (pogotovo kada se radi sa
menijima). Ovakvo korištenje listi uvelike olakšava korisniku pozicioniranje na informaciju kada se
radi o raznim strukturnim prikazima (kada jedna opcija ima više 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 sadrţaja poglavlja
dokumenata ili slijedovi toka stranica u web riješenju.
34
5.2. Jednostavni meniji
Kao što je već rečeno, jednostavni meniji su meniji sastavljeni od jednostavnih <a> elementata i
eventualno paragrafa, prijeloma linija ili tabela:
Primjer 31: Jednostavni meni
dokument1.html:

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

<p>Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj ...</p>
Slika 19: Jednostavni meni
Kao što vidimo, ovakvi meniji ne daju našem dokumentu dojam profinjenosti, ali sluţe svrsi.
5.3. Meniji izgrađeni iz liste
Da bi se meni stvorio iz liste potrebno je pribjeći korištenju CSS-a da se spriječe neke default
postavke preglednika (numeracija ili natuknice). To se radi CSS property-jem list-style-type i
dodavanjem mu vrijednosti "none".
Primjer 32: Meni izgrađen 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>

<p>Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj Sadrzaj ...</p>
35
Slika 20: Meni izgrađen sa listom
Primjetite kako ne postoji prevelika razlika između ovog menija i onog jednostavnog.
To je tako dok ne počnete primjenjivati CSS property-je ili javascript za interakciju sa korisnikom.
Ovako definirani meni veoma brzo moţemo pretvoriti u sljedeće:
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 našim <li> elementom moţemo primjeniti i property width i specificirati koliko će
svaki elelemt li biti širok (koliko mjesta za tekst u meniju).
Kada bismo isto ovo ţeljeli postići jednostavnim menijima potrebno bi bilo mijenjati strukturu
dokumenta. Ako bismo ovakve menije napravili sa tabelama, također ako bismo iz vertikalnog
(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š veća 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 sadrţaj u tabelu, tako da lijevo bude meni, a desno bude
sadrţaj.
5.4.2. Zadatak
Napisati jednostavan horizontalni meni sa 4 stavke, korištenjem tabela.
5.4.3. Zadatak
Pokušati prepraviti meni iz zadatka 5.4.2. da postane vertikalni.
5.4.4. Zadatak
Napraviti vertikalni meni sa 4 stavke, korištenjem <ol> i <li> elemenata.
5.4.5. Zadatak
Meni iz zadatka 5.4.4. pretvoriti u horizontalni.
37

Download Report