134
Osnove HTML, XHTML i CSS Izradio: Alen S imec, dipl ing.

Uvod u XHTML, HTML i CSS - ( 134 str. ).pdf

Embed Size (px)

Citation preview

Page 1: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, XHTML i CSS

Izradio: Alen Simec, dipl ing.

Page 2: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

Sadrzaj

1 (X)HTML .......................................................................................................................... 5

1.1 Uvod u (X)HTML ........................................................................................................................................ 5

1.2 (X)HTML u svojem prirodnom okruzenju ............................................................................................... 5

1.3 Sto је HTML? .............................................................................................................................................. 6

1.4 Razlika izmedu HTML-a i XHTML-a ....................................................................................................... 6

1.5 Elementi ........................................................................................................................................................ 7

1.6 Prekidi linija ................................................................................................................................................ 9

1.7 Horizontalna linija ..................................................................................................................................... 10

1.8 Tagovi i atributi ......................................................................................................................................... 11

1.9 Entiteti ........................................................................................................................................................ 12

1.9.1 Ne-ASCII znakovi . . . . . . . . . . . . . . . . . . . . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . . . .. . . .. . . .. . . . .. . . .. . . .. . . .. . . .. . . .. ... . . .. . . .. . . . . 12

1. 9 .2 (Х)НТМL znakovni kodovi . . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . 14

1.9.3 Tag znakovi . . . . . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . . .. . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . . . 14

1.10 Odlomci (paragraphs) .......................................................................................................................... 14

1.11 Naslovi (Headings) ................................................................................................................................ 16

1.12 Liste (Lists) ............................................................................................................................................ 18

1.12.1 Liste s brojevima (Numbered lists) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.12.2 Liste s oznakama (Bulleted lists) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

1.12.3 Definicijske liste (Definition lists) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

1.13 Veze ili linkovi (Links) .......................................................................................................................... 24

1.13.1 Apsolutna veza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

1.13 .2 Relativna veza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

1.13 .3 Resursi koji nisu НТМL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1.14 Slike ........................................................................................................................................................ 30

1.14.1 Dodavanje alternativnog teksta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

1.14.2 Odredivanje velicine slike . . . . . . .. . . .. . . .. . . .. . . .. . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . 33

1.14.3 Postavljanje okvira slike . . . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . ... ..... ... . . .. . . .. . . .. . . .. . . .. . . .. . . ... .. . ... . . . . 34

Str. 2 od 102 Izradio: Alen Simec, dipl. ing.

Page 3: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

1.14.4

1.14.5

Poravnavanje slike u odnosu na tekst . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . 35

Razmak slike u odnsou na tekst . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . 36

1.15 Tablice .................................................................................................................................................... 37

1.16 Meta podaci ........................................................................................................................................... 47

1.17 HTML i XHTML DTD ......................................................................................................................... 48

1.18 Ispravno i pogresno koristenje (X)HTML-a ...................................................................................... 49

1.19 Korisni alati za pisanje HTML koda .................................................................................................. 50

1.19 .1 Pomocni editori . . . . . . . . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . ... ..... ... . . .. . . .. . . .. . . . . . .. . . . . 50

1.19.2 WYSIWYG editori . . . . . . . . . .. . ... . . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . . .. . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . . . 51

1.20 HTML validator .................................................................................................................................... 51

2 css ................................................................................................................................... 54

2.1 Uvod u CSS ................................................................................................................................................ 54

2.2 Struktura i sintaksa CSS-a ....................................................................................................................... 55

2.3 Selektori i deklaracije ................................................................................................................................ 56

2.4 Rad sa stilskim klasama ............................................................................................................................ 57

2.5 N asljedivanje stilova .................................................................................................................................. 60

2.5.1 Ekstemi stilski obrazac . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . . . .. . . .. . . ... . . .. . . .. . . .. . . .. . . .. . . .. ... . . .. . . .. . . . . 62

2.5.2 Intemi stilski obrazac . . . . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . . . ... . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . . .. . . .. . . .. . . . . 63

2.5.3 Inline stilski obrazac . . . . . . . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . .. . . . . . . .. . . .. . . .. . . .. . . .. . . . .. . . .. . . .. . .. . . .. . . .. . . .. . . . . 65

2.6 Upravljanje objektima pomocu CSS-a .................................................................................................... 67

2. 7 Primjena CSS-a ......................................................................................................................................... 68

2.7.1 Воје . . . . . . . . . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . . .. . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . . . 68

2.7.2 Linkovi . . . . . . . . ... . . .. . ... . . .. . ... . . .. . ... . . .. . . . .. . ... . . .. . ... . . .. . ... . . .. . . .. . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... . . .. . ... ... . . .. . ... . . .. . ... . . . . 68

2.7.3 Pozadina . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . 71

2.7.4 Fontovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . 72

2.7.5 Visina linije odlomaka . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . .. . . . . . . . . 83

2.7.6 Prostor izmedu znakova . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . 85

2.7.7 Pozicioniranje, poravnavanje teksta . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . .. . . . . . . . . . . . 86

2.7.8 Odredivanje mbnih linija taЫica . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . 88

Str. 3 od 102 Izradio: Alen Simec, dipl. ing.

Page 4: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

2.8 Korisni alati za CSS ................................................................................................................................... 97

2.9 Korisni linkovi za CSS .............................................................................................................................. 97

3 LITERA TURA ............................................................................................................. 100

4 PRILOG ........................................................................................................................ 102

Str. 4 od 102 Izradio: Alen Simec, dipl. ing.

Page 5: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

1 (X)HTML

1 .1 Uvod u (X)HTML

U оvот poglavlju nauCit сето raditi и (Х) НТМL prograтskoт jeziku. S obziroт da se

HTML i ХНТМL koriste za izradu internet stranica, napravit сето podjelu na teorijski i

praktican dio.

Тете koje cete pronaCi и оvот poglavlju:

1. Dizajn i izrada internet stranica

2. Uploadanje i objava internet stranica

3. Testiranje i uklanjanje gresaka na stranicaтa

Kod ХНТМL-а vazno је sve pisati таliт sloviтa kako bi kod bio ispravno napisan. Prilikoт

pisanja vlastitog koda, pokusajte se dгZati navedenih pravila.

(Х) НТМL kod тoguce је pisati и оЬiсnот tekst editoru kao sto је notepad, wordpad ili и

naprednijiт prograтiтa kao sto su Microsoft Frontpage ili Macroтedia Dreaт weaver.

Napredniji prograтi iтaju gotovu strukturu taЫica i formi koje тozete koristiti tijekoт rada.

HTML koristi oЬicni tekst s роsеЬiт znakoviтa i stringoviтa za oznacavanje (eng.

"тarkup") . U Оvот djelu skripte, saznat cete detaljno sve о (X) HTМL-u.

1 .2 (X)HTML u svojem prirodnom okruzenju

Internet stranice se sastoje od razliCitih tipova sadrzaja, poput teksta, grafike, forтi, audio i

video zapisa.

Svaka internet stranica је razliCita, te nj ezin izgled i funkcij а ovise о tоте kako је pisan kod.

Svaki prograтer radi na svoj jedinstven naCin, tako da је svaka stranica ро neceтu razliCita.

Ipak и jednoт segтentu internet stranice iтaju nesto zajednicko, а to је Hypertext Markup

Language ( НТМL) - sintaksa prograтiranja koju тorate znati.

(Х) НТМL је baza svake stranice, te se koristi kod svakog naprednijeg prograтiranja. Kod

koji piseтo sрrетато и datoteke. Те datoteke su tekst dokuтenti koje tvore internet stranicu.

Str. 5 od 102 Izradio: Alen Simec, dipl. ing.

Page 6: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

Tekst и (X) HTML dokumeпtima пi је staпdardпi tekst па kakav pomislimo kad cujemo rijec

tekst. (Х) НТМL koristi svoj sepcificпi set iпstrukcija koji uпesemo uпuter tekst datoteke i

kojeg Iпternet pregledпik procesira, te odreduje kako bi straпica trebala izgledati i

fuпkcioпirati. U daljпjem tekstu, kratica HTML ozпacava i HTML i ХНТМL zajedпo, iako пе

treba zaпemariti medusobпe razlike.

1 .3 Sto је HTML?

HTML је skraceпica od HyperText Markup Laпguage.

Ро ј am " Hypertext Markup" upucuj е па ј ezik za оzпасаvп ј е, te mogucпost medusobпog

povezivaпja dokumeпata hiper-povezпicama (eпgl. Hyperliпk).

Оzпасаvап је se vrsi koristeпjem tagova kojima se stvaraju, povezuju i strukturiraju elemeпti

HTML dokumeпta. Tagovi upucuju Iпternet pregledпik па паСiп kako се prikazati tekst koji

slijedi паkоп taga. НТМL datoteka mora imati eksteпziju .htm ili .html, te moze biti kreiraпa

koristeпjem bilo kojeg tekst editora.

1.4 Razlika izmedu HTML-a i XHTML-a

HTML, Hypertext Markup Laпguage, uvedeп je и kasпim 80-im. HTML је daпas sadгZaп и

brojпim staпdardпim opisima od straпe World Wide Web koпzorcija (WЗС). Zadпja

specifikacij а HTML-a dovrseпa је 1999. godiпe.

X HTML је поvа, poboljsaпa verzija НТМL-а baziraпa пa jeziku ХМL (eпgl. eXteпsiЫe

Markup Laпguage ).

Origiпalпa formulacija HTML-a ima пеkе пeregularnosti koje mogu uzrokovati proЫeme kod

Citaпja HTML dokumeпata. ХНТМL s druge straпe, koristi prilicпo regularnu i predvidivu

siпtaksu.

• U veCiпi slucajeva siпtaksa ХНТМL-а i HTML-a su ideпticпe

• U пekim slucajevima se markup razlikuje

• U пekim slucajevima se markup mora korisiti па razliCite паСiпе

HTML i ХНТМL sastoje se od 3 vrste kompoпeпti:

Str. 6 od 102 Izradio: Alen Simec, dipl. ing.

Page 7: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

• Elementi: Indetificiraju raliCite djelove НТМL stranice koristenjem tagova

• Atributi: Informacije о instanci elementa

• Entiteti: Ne- AS C I I tekstualni znakovi

Svaki djelic (Х) НТМL-а sastoji se od kombinacije ovih triju komponenata

1.5 Elementi

Elementi su Ыokovi (Х) НТМL-а. Koristimo ih kod opisivanja teksta na stranici. Elementi su

napravljeni od tagova i sadrzaja koji se nalazi и tim tagovima. Postoje 2 glavna tipa

elemenata:

• Elementi sa sadгZajem napravljenim od pocetnog i zavrsnog taga i bilo kojeg sadгZaja

unutar pocetnog i zavrsnog taga

• Elementi koji koriste samo jedan tag (samostalni tag)

Pocetni i zavrsni tag su elementi koji opisuju sadrzaj i koriste se za oznacavanje pocetka i

kraja elementa. Pocetni i zavrsni tag izgledaju ovako:

<tag> ... </tag>

Pocetni tag govori intemet pregledniku gdje element poCinje, а zavrsni gdje zavrsava, sadгZaj

se nalazi izmedu.

Samostalni tagovi su elementi koji ne opisuju sadгZaj i zovu se prazni elementi. Koriste samo

ј edan tag <tag />

Takvi tagovi koriste se npr. kod ubacivanja slika i prekida linija ( <img />, <br />).

Jedna kljucna razlika izmedu ХНТМL-а i НТМL-а је ta da и X HTML-u svi prazni elementi

moraju zavrsavati sa kosom crtom (/) prije zatvaranja. Osnova ХНТМL-а је ХМL, а pravilo и

XМL-u је da svi prazni elementi moraju zavrsavati s kosom crtom <tag />.

Da bi ovakav zapis bio Citljiv и starijim intemet preglednicima, potrebno је ubaciti prazno

mjesto (Ыank) prije kose crte.

Element <img /> referencira sliku. Kad intemet preglednik prikazuje stranicu, zamjeni <img

/> element s datotekom na koju pokazuje. Ро pravilu ХНТМL-а, опо sto se и HTМL-u

Str. 7 od 102 Izradio: Alen Simec, dipl. ing.

Page 8: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

zapisuje kao <img>, и ХНТМL-u је <img />. НТМL elementi imaju strogo definiranu

sintaksu. Elementi koji se mogu koristiti su definirani и HTML-u 4.01 ili XНTML-u 1.0.

Osnovna struktura НТМL dokumenta ukljucuje tagove koji okruzuju sadrzaj i omogucavaju

internet pregledniku njihovu interpretaciju.

<html>

<head>

<title> Elementi </title>

<Љеаd>

<body>

Ovo је moja prva stranica

<Љоdу>

<Љtml>

f.ii Elementi - Windows Jrrternet Explorer

Select

5u g g ested 5ites ,..

Ovo је mojat prva stranica

... 1*t1 l' l�'J Googte

Web 51 ice Gallery ,..

= @]

,.. E.age,.. ;!afety,.. TQols,.. »

Done • Com puter 1 Р юtected М od е: Off ,fi" ... .... 100% ... . . .

Prvi tag и НТМL dokumentu је <html>. <html> tag govori internet pregledniku da slijedi

pocetak НТМL dokumenta. Zadnji tag и nasem dokumentu je </html> i оп ukazuje internet

pregledniku da je to kraj НТМL dokumenta.

Str. 8 od 102 Izradio: Alen Simec, dipl. ing.

Page 9: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

Tekst izmedu pocetnog taga <head> i zavrsnog taga </head> је informacija о zaglavlju

dokumenta. Informacija о zaglavlju se nece prikazati и prozoru internet preglednika.

Tekst izmedu pocetnog taga <title> i zavrsnog taga </title>je naslov dokumenta. Tekst

izmedu ova dva taga се se prikazati и zaglavlju preglednika.

SadгZaj koji upisujem izmedu pocetnog taga <body> i zavrsnog taga </ body > definira

sadrzaj HTML dokumenta.

1.6 Prekidi linija

Ako linija teksta dode do kraja prozora internet preglednika, sljedeca rijec automatski poCinje

и novoj liniji. No, ako zelimo sami odrediti gdje се linija biti prekinuta potrebno је koristiti

break line, tag <br />.

Razlika izmedu break line i paragrafa је и tome sto break line ne korist specij апо formatiranj е

koje mozemo dodati na pocetak ili kraj paragrafa, poput:

• dodatnog vertikalnog prostora

• ili pomaka prve linije desno

<html>

<head>

<title> Prekid linij a</title>

<Љеаd>

<body>

Ovo је prva linija<br />

Ovo је druga linija <br />

<Љоdу>

<Љtml>

Str. 9 od 102 Izradio: Alen Simec, dipl. ing.

Page 10: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

f.ii Pr·ekid 1 i n ija, - Wi ndo\�'S Inteшet Expl оrет

Ovo је prva !Шiја Ovo је drnga Ii:nij.a

Se!ect

5u g g ested 5i tes ...

= @]

р ...

Web 51 ice Ga l lery ...

. . ... ... E_age... �afety ... TQo·ls ...

Done � Com puter 1 Р rotected М od е: Off ,ff" ... " 100% ...

1.7 Horizontalna linija

Horizoпtalпa liпija ozпaceva se tagom <hr />. Ovaj tag ukljucuje prikaz horizoпtalпih liпija па

straпici. Iпtemet pregledпik stvara liпiju па osпovu <hr /> elemeпta, sto је ЬгZе пеgо da se

umece grafika ili stvara liпij а s obrubom. Horizoпtalпa liпij а је dobra opcij а ukoliko se zeli:

• razdijeliti straпicu ро logickim djelovima

• odvojiti zaglavlje i podпozje od ostatka straпice

Cetiri razliCita atributa koпtroliraju izgled svake horizoпtalпe liпije:

• width: Specificira siriпu liпije u pikselima ili potocima

• height : Specificira visiпu liпije u pikselima: Default vrijedпost je 1 piksel

• align: Specificira horizoпtalпo роrаvпап је liпije kao lijevo, sredisпje ili desпo

• nonshade: defiпira solidпu liпiju bez s јепе

<html>

<head>

<title>Horizontalna linija</title>

<Љеаd>

Str. 10 od 102 Izradio: Alen Simec, dipl. ing.

Page 11: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

<body>

Tekst iznad horizontalne linije

<hr l>

Tekst ispod horizontalne linije

<Љоdу>

<Љtml>

r. Но rizontalna 1 i n�a - Windo\.,.s Intemet txplor·er

... ".,.

Select

5u g g ested 5ites ... Web 51 ice Ga l lery ...

Tekst iznad horizontalne Бmје

Т ekst ispod Ђoriюntalne fullj:e

= §]

р ...

... E_age... Safety ... TQol s ... »

Done . Com puter 1 Р rotected М od е: Off * 100% ...

1.8 Tagovi i atriЬuti

Atributi omogucuju raznovrsnost и naCinima na koji element opisuje sadгZaj. Atributi

omogucuju da se elementi koriste drukCije ovisno о okolnostima. Npr. <img /> element

koristi src atriЬut da odredi lokaciju slike koju zelimo na svojoj stranici.

<img src="imagesЉeader.gif' alt ="header graphic" width="794" height=" 160" />

U ovom komadu HTML-a, <img /> element sam je poruka intemet pregledniku da se radi о

slici, src atriЬut mu govori detalje gdje se ta slika nalazi, а ostali atriЬuti, height i width,

govore kako се se slika prikazati na stranici. AtriЬut alt prikazuje tekst koji се se prikazati na

mjestu slike, и slucaju da se slika ne moze uCitati ili је nema.

Str. 11od 102 Izradio: Alen Simec, dipl. ing.

Page 12: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

Atributi se ukljucuju uпutar pocetпog tag elemeпta.

<tag attribute="value" attriЬute="value" />

Pravila ХМL siпtakse odreduju da vrijedпosti atributa moraju biti pod пavodпim zпacima.

Atribute i пjihove vrijedпosti mozemo pisati bilo kojim redom uпutar pocetпog taga ili uпutar

jedпog taga.

Svaki (X) HTML elemeпt ima skup atriЬuta koji se mogu s пjime koristiti, i пе mozemo

mijesati atriЬute i elemeпte. Neki atributi mogu bilo koji tekst uzeti kao пeku vrijedпost, јег

vrijedпost atributa moze biti bilo kakva, poput recimo lokacije пеkе slike ili straпice па koju

se zelimo liпkati. Ostali pak imaju specificaп popis vrijedпosti koje se mogu staviti и atriЬut,

poput opcija za poravпavaпje teksta и taЫici.

HTML 4.01 iХНТМL 1.0 specifikacije defiпiraju tоспо koji se atriЬuti mogu koristiti s

пekim daпim HTML elemeпtom.

1.9 Entiteti

Tekst пеkе iпternet straпice ima svoje graпice, а eпtiteti kao posebпi пе AS C I I zпakovi

omogucuju prikazivaпje posebпih zпakova.

То su па јсеs се simboli, copyright zпak, slova s prijeglasima ...

Svaki eпtitet роСiп је sa (&) i zavrsava sa (;).

Svaki eпtitet moze biti парisап uz pomoc svog пaziva ili broja: &пaziv _eпtiteta; ili

&#broj _ eпtitera;

ZпaCi za prikazivaпje zпaka mап је od (<) koristimo: < ili <

1.9.1 N e-ASCII znakovi

Basic Americaп Staпdard Code for Iпformatioп Iпterchaпge ( AS C I I) tekst defiпira relativпo

mali broj zпakova. U svojoj defiпiciji пе ukljucuje роsеЬпе zпakove, poput recimo trademark

simbola, frakcija i sl.

Str. 12 od 102 Izradio: Alen Simec, dipl. ing.

Page 13: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

Ako zelimo napisati znakove koji nisu podrzani (mozemo ih prona6i и AS C I I1 taЫici),

HTML mora koristiti entitete kako bi prikazao takve znakove. Internet preglednik и tom

slucaju zamjeni entitet s odgovaraju6im znakom na koji entitet pokazuje. Svaki entitet poCine

sa znakom 11 & 11 i zavrsava sa znakom 11; 11•

Primjeri entiteta dani su и sljedecem odlomku teksta.

<html>

<head>

<title> N e-ASCII znakovi </title>

<Љеаd>

<body>

Моје ime је Pero, а prezime Petri&#263; i volim raditi na ra&#269;unalu.

<Љоdу>

<Љtml>

Web 511се Gallery т

�оје ime је Pero, а preziшe Petric i voliШ radirti na racшiall!.

Done Computer 1 Protected Mode: Off

1 Pogledajte prilog о ASCII znakovima

100% т

Str. 13 od 102 Izradio: Alen Simec, dipl. ing.

Page 14: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

1.9.2 (X)HTML znakovni kodovi

Eпcodiпg za ISO-Latiп- 1 zпakovпi set se isporucuj e ро defaultu. Ako zelimo kori stiti пеkе

druge zпakove zahtj eva ukljuCivaпj e posebпih markupa koj i govore iпternet pregledпiku da se

mora spremiti па iпterpretaciju uпikodпih zпakovпih kodova (uпicode ј е iпternacioпalпi

staпdard- iso staпdard 10646)2.

Ovaj markup izgleda ovako :

<meta http-equiv="Content Туре" content ="text/html; charset=UTF-8">;

UTF - (епg. "Uпicode Traпsformatioп Format 8")

1.9.3 Tag znakovi

Iпternet pregledпici podrazumij evaju da пeki HTML zпakovi kao sto su "<" i ">" tebaju biti

sakriveпi i пе prikazivati se па strnaici . Ako bas zelim prikazati zпak па straпici опdа moramo

to пapraviti razumlj ivim. Slj ede6i eпtiteti паm omogucuju prikazivaпj e sakriveпog НТМL

markup-a.

"manje od" znak (<): &lt;

"vece od" znak (>): &gt;

"i" znak(&): &атр;

1.10 Odlomci (paragraphs)

Pisaпj e teksta и HTМL-u slicпo ј е pisaпju teksta и Wordu. Svaki пapisaпi odlomak morate

defiпirati pocetпim tagom <р> i zavrsпim tagom </р>

<html>

<head>

<title> N aslovi </title>

<Љеаd>

2 Pogledajte prilog о unicode znakovima

Str. 14 od 102 Izradio : Alen Simec, dipl. ing.

Page 15: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

<body>

<p>Ovo је prvi odlomak<lp>

<p>Ovo је drugi odlomak<lp>

<Љоdу>

<Љtml>

f.ii,.. N aslovi - Wi nd ows Internet Explorer

C�\Users\Alen\Des.ktop\in .... ] _..,_ l r -'Ј Gmgte

Select

5u g g ested 5i tes .... Web 51 i ce Gallery ....

. . ....

Ovo је prvi odlomak

Ovo је dmgi o&omak

= @]

р ....

.... E_age.... ;!afety .... TQols .... »

Done • Com pu ter 1 Р юtected М od е: Off 100% ....

Tag <р> oznacava pocetak odlomka. Unutar odlomka mozete koristiti ostale tagove kao sto su

na pпmJer:

• <Ь>, </Ь> bold,

• <i>, </i> italic,

• <и>, </и> underline

Ako zelite unutar odlomka prelomiti tekst koristite tag <br /> (break line ). Ovaj tag nema svoj

zavrsni tag vec ј е samostalan. Kada koristite tag <br />, on ne opisuj e tekst zato i nema

zavrsni tag.

Paragrafi se poravnavaju sa lij evom stranom, ako drugaCij e niste definirali. Mozete koristiti

align atriЬut kako bi poravnali tekst ро zelj i .

Str. 15 od 102 Izradio : Alen Simec, dipl. ing.

Page 16: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

<html>

<head>

<title> N aslovi </title>

<Љеаd>

<body>

<р align="center">Ovo је centrirani odlomak. </р>

<р align="right">Ovo је odlomak poravnat и desno<lp>

<р align= "justifj;''>Ovo је odlomak poravnat s lijeve i desne strane. </р>

<Љоdу>

<Љtml>

f.ii Naslovi - Windows Internet Explorer

C�\Us;ers.\Alen\Deskto .... , +"1 Seled:

Sugg ested Sites .,.. Web Sl i ce Ga l l ery .,..

.,.. E.age.,.. 5afety.,.. TQols.,..

Ovo је centtri:rani od!omak_

....

Ovo је od1omak poыvnat п desno

Ovo је odlomak poravш1.t s J!ijeve i desne strane_

Dопе Computer 1 Pro·tected Mode: Off

1.11 Naslovi (Headings)

Naslovi razbij aju dokument и odj elj ke. Naslovi :

• stvaraju organizacij sku strukturu

• pobolj savaju vizualni dozivlj ај stranice

))

Str. 1 6 od 102 Izradio : Alen Simec, dipl. ing.

Page 17: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

• daju nam naznaku na koj i su naCin grupirani dj elovi sadrzaja

U htmlu j e moguce postaviti 6 posebnih razina dokumenta koj i se odreduju naslovima <hl> -

<hб>:

• <h l > ј е najvise istaknut naslov

• <hб> ј е najmanj e istaknut naslov

<h l > naslov ima font najvece veliCine koj i se smanjunj e na svakom slj edecem (h2, hЗ . . . ), dok

hб ima naj manj i font.

<html>

<head>

<title> N aslovi </title>

<Љеаd>

<body>

<hl>Prvi nivo naslova<lhl>

<h2>Drugi nivo naslova <lh2>

<hЗ>TreCi nivo naslova<lhЗ>

<h4>Cetvrti nivo naslova<lh4>

<h5>Peti nivo naslova<lh5>

<hб>Sesti nivo naslova<lhб>

<Љоdу>

<Љtml>

Str. 17 od 102 Izradio : Alen Simec, dipl. ing.

Page 18: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

� N.aslovi - Windows ln!ernet Explorer = @)

р ...

Select

5u g g ested 5ites ... Web 51 i ce Ga l lery ...

. . ... ... E_age... ;!afety ... TQols ... »

Prvi nivo naslova

Drugi nivo naslova

t enтrti ПЛ.то na.slova.

Peti ni�o nas1a\Т,a

Done • Computer 1 Pюtected' Mode: Off 100% ...

1.12 Liste (Lists)

Liste sluze organizacij i slicnih elemenata. Omogucavaju korisniku laksi pregled informacij a.

U liste mozemo staviti od teksta do linkova. Razlikuj emo tri vrste listi :

• Liste s broj evima (Numbered lists)

• Liste s oznakama (Bulleted lists)

• Definicij ske liste (Definition lists)

1. 12.1 Liste s brojevima (Numbered lists)

Listu s brojevima koristimo kada zelimo pobroj ati informaciju. Za kreiranj e liste koristimo

dvije vrste elemenata:

Kreiranj e liste zapoCinj emo tagom <ol> koj i specificira da se radi о listi s brojevima.

Informacij e pisemo unutar pocetnog <li> i zavrsnog </li> taga. Na kraju sve zatvaramo

zavrsnim </ol> tagom.

Str. 1 8 od 102 Izradio : Alen Simec, dipl. ing.

Page 19: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

<html>

<head>

<title> Liste</title>

<Љеаd>

<body>

<h l >Stvari koje danas moram napravit<Љ l >

<ol>

<li> Nahraniti рsа<Љ>

<li> Kupiti cipele<lli>

<li>Oprati auto<lli>

<lol>

<Љоdу>

<Љtml>

с., Liste - Wind,ows mternet bp�orer

Select

51Ј g g ested Sites ,,.

Liste

Web Sl i ce Ga l lery ,,.

СЈ @)

р ...

»

Stvari koje dan.as moram napravit

l _ Kaluaniti psa l_ Knpiti cipcle

3 _ Oprati anto

Done • Сот puter 1 Р rotected' М o·d е: Off 100% ... "

Dva razliCita atriЬuta kontroliraju prikaz liste s brojevima. Atribut start definira pocetni broj и

listi, а atribut type definira stil liste s brojevima.

1 : decimalni broj evi

а: mala slova

Str. 1 9 od 102 Izradio : Alen Simec, dipl. ing.

Page 20: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

А: velika slova

i : rimska numeracij a malim slovima

1: rimska numeracij a velikim slovima

<html>

<head>

<title> Liste</title>

<Љеаd>

<body>

<h l >Stvari koje danas moram napravit<Љ l >

<ol start="З" type="i''>

<li>Nahraniti psa</li>

<li> Kupiti cipele</li>

<li>Oprati auto</li>

</ol>

<Љоdу>

<Љtml>

r;. liste - Windows Internet Ехр�огеr

Select

itt Goog!e

5u g g ested 5ites ... Web 51ice Ga l lery ...

Liste

Osnove HTML, ХНТМL i CSS

= @)

р ...

... f:age... ;!afety ... TQols ... »

Stvari koje danas moram napravit

ш_ I\aln:aniti ps.at w_ Kupiti cipe1e

у_ Oprati anto

Dопе

Str. 20 od 102

� Computer 1 Pюtected' Mode: Off 100% ...

Izradio : Alen Simec, dipl. ing.

Page 21: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

1. 12.2 Liste s oznakama (Bulleted lists)

Lista s oznakama sastoj i se od j edne ili vise stavki od kojih svaka poCinj e s nekom oznakom

(najcesce tockom). Ovakav tip liste kori sti se ako redoslij ed ро koj em su izli stane stavke nij e

nuzan za razumij evanj e informacij a koj e se prikazuju.

<html>

<head>

<title>Liste s oznakama</title>

<Љеаd>

<body>

<h l >Stvari koje danas moram napravit<Љ l >

<ul>

<li> Nahraniti рsа<Љ>

<li> Kupiti cipele<lli>

<li>Oprati auto<lli>

<lul>

<Љоdу>

<Љtml>

r.i liste s oznakama - Windows [111ternet Explorer

C�\Users\Alen\Desktop\in .,.. ј f-t 1 Select

l•'t Googte

5u g g ested 5i tes .,.. Web 51 i ce Ga l lery .,..

.,.. E.age.,.. ;!afety.,.. TQol s.,..

·Stvari koje dan.as moram napravit

• Namaniti р!>а. • Knpiti с!ре1е

• Opшtianto

.....

Done Сот puter 1 Р rotected Мо d е: Off �. .... 1+" 1 00 % ....

»

Str. 21 od 102 Izradio : Alen Simec, dipl. ing.

Page 22: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

Mozemo koristiti atribut type kako bi odredili vrstu oznake koju zelimo da lista koristi .

• disc: ispunj eni kruzi6i,

• square: ispunj eni kvdati6i ,

• circle : suplj i kruzi6i .

<html>

<head>

<title>Liste s oznakama</title>

<Љеаd>

<body>

<h l >Stvari koje danas moram napravit<Љ l >

<ul type="circle''>

<li>Nahraniti psa</li>

<li> Kupiti cipele</li>

<li>Oprati auto</li>

</ul>

<Љоdу>

<Љtml>

Str. 22 od 102 Izradio : Alen Simec, dipl. ing.

Page 23: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

� list·e s oz:na ka ma - Wind ows Iinternet bp!orer

Select

5u g g ested 5ites ...

itt Google

Web 51ice Gallery ...

. . ...

= @)

р ...

... E_age... ;!afety... TQols ... »

Stvari koje danas moram napravit

о N ahaniti ps.a о Kupin cipeJ!e о Oprati anto

Com puter 1 Р юtected Mod е: Off

1. 12.3 Definicijske liste (Definition lists)

100 % ... . "

Definicij ske li ste grupiraju pojmove definicij e u j ednu listu i zahtj evaju tri razliCita elementa

kako bi se lista napravila:

• <dl> sadгZi definiciju li ste,

• <dt> definira pojam и listi,

• <dd> definira definiciju za pojam.

<html>

<head>

<title> Definicij ske liste</title>

<Љеаd>

<body>

<h l > Definicijske liste<Љ l >

<dl>

<dt> HTML <ldt>

<dd> Hypertex Markup Language<ldd>

<dt> ХНТМL <ldt>

Str. 23 od 102 Izradio : Alen Simec, dipl. ing.

Page 24: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

<dd> ExtensiЬle Hypertex Markup Language<ldd>

<dt>CSS<ldt>

<dd>Cascading Style Sheets<ldd>

<!dl>

<Љоdу>

<Љtml>

f. Defi nicij ske 1 i ste - \Nindo•,•15 lnterл et Ехр lo rer

Select

5u g g ested 5ites ..,.

,. Googie

Web 51ice Gallery ..,.

.. ... Ш1 ... Q

Definicijske liste

НТМL Hypertex Mcnhp Language

хнn..п. ExtensЉ1e Hypertex Mcnkup Language

css Cascading Sty1e Sheets

Osпove HTML, ХНТМL i CSS

= @)

р ...

..,. E_age..,. ;!afety..,. T.Q:o·ls..,. 1 ..,. »

Done Com puter 1 Р rotected Мо d е: Off

1.13 Veze ili linkovi (Links)

World Wide Web ј е mreza straпica koje su rasporedeпe па Web serverima dilj em svij eta i

povezaпe па trilijuпe паСiпа pomocu hyperliпkova koj i vezu j edпu straпicu s drugom. Velik

dio vrij edпosti Iпternet straпica proizlazi iz пj egove mogucпosti da se povezemo па bilo koju

straпicu i druge resurse, bilo da se radi о istoj Iпternet straпici ili пеkој drugoj . Recimo

straпica http ://www .hr ј е Gateway straпica, пј еziпа оsпоvпа fuпkcij a j e da se preko ПЈе

povezemo па druge straпice.

Hyperliпkovi ili j edпostavпij e liпkovi, povezuju НТМL straпice i ostale resurse па Iпternetu.

Str. 24 od 102 Izradio : Alen Simec, dipl. ing.

Page 25: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

Kada ukljuCite link na stranici, omogucavate posj etitelju da prelazi sa j edne na drugu stranicu

unutar vase internet stranice, na vanj ske internet stranice (izvan vase Internet stranice) ili

otvaranj e multimedij skog sadгZaja (dokument, glazba, slika, film, animacij a).

URL (eng. Uniform Resource Locator) su standardni sustavi adresiranj a. Svaka stranica ili

neka datoteka ima svoj j edinstveni URL.

Svaki Internet resurs Ьila to stranica ili slika ima svoj URL. Ako ј е samo j edan znak и URL-u

pogresan, to moze rezultirati neispravnim linkom. Neispravni linkovi vode na stranicu

pogreske (НТТР error 404 File ог directory not found) . Ako vam URL ne radi, pokusajte

slj edece :

• Provj erite velika i mala slova (neki web serveri su case sensitive, sto znaCi da

razlikuju velika i mala slova).

• Provj erite ekstenziju (ako URL vaseg linka koristi bios.htm, а pravo ime datoteke ј е

bios.html, link nece raditi).

• Provj erite ime datoteke.

• Koristite copy-paste (izbj egavajte tipkanj e URL-a ako ga mozete direktno kopirati).

URL radi slicno kao vasa postanska adresa. Svaka komponenta pomaze и definiranju lokacij e

Internet stranice ili resursa :

• Protokol http :// - Specificira protokol pomocu koj eg Internet preglednik nalazi

datoteku Internet stranice.

• Domena www .tvinx.com - Pokazuj e na Internet stranicu gdj e se nalazi datoteka koju

zelimo proCitati .

• Put www .tvinx. com/folder: Imenuj e slij ed foldera kroz koj e morate navigirati kako Ьi

dosli do zelj епе datoteke.

• Јте datoteke www .tvinx.com/folder/index.html : ime datoteke kojoj internet

preglednik treba pristupiti и staЫu direktorij a.

Postoj e dvij e vrste veza na stranicu:

• apsolutna veza,

• relativna veza

Str. 25 od 102 Izradio : Alen Simec, dipl. ing.

Page 26: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

1. 13.1 Apsolutna veza

Apsolutna veza koristi kompletan URL koj i povezuj e unutarnju ili vanj sku stranicu па

Internetu.

Veza koj a koristi kompletan URL zove se apsolutna veza i moze staj ati sama za sebe. Kada

povezuj ete svoju stranicu sa vanj skom stranicom (npr. Yahoo, Google, . . . ) morate upisati

cij elu vezu kako bi veza bila tocna. Primj er: http ://www .website. com

<html>

<head>

<title> Apsolutna veza</title>

<Љеаd>

<body>

<h l >Stranica Tehnickog veleuCilista и Zagrebu<Љ l >

Ova veza vodi na <а href="http://www.tvz.hr">www.tvz.hr<la> stranicu

<Љоdу>

<Љtml>

f.i Apsolutna veza - WincJlows linternet bplorer

C�\Users\Alen\Desktop\in .... 1 l-t [ l l•'t Google

Sel,ect

5u g g ested 5i tes .,.. Web 51 i ce Ga l lery .,..

СЈ @]

Stranica Tehnickog veleucilista u Zagrebu

Ova ve:za vod:i na \V\VW _ tvz_hr stranicu

Done • Сот puter 1 Р rotected М od е: Off 100% ....

»

Str. 26 od 102 Izradio : Alen Simec, dipl. ing.

Page 27: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

1. 13.2 Relativna veza

Relativne veze koriste stenogram kako bi specificirale URL za resurs na koj i se pokazuj e. Za

relativne linkove na svojim stanicama koristite slj edece smj ernice :

• postavlj aj te relativne linkove izmedu resursa samo na istoj domeni,

• s obzirom da su оЬа resursa na istoj domeni, mozete izostaviti informacij e о domeni и

URL-u.

<html>

<head>

<title>Relativna veza</title>

<Љеаd>

<body>

<h l >Stranica Tehnickog veleuCilista и Zagrebu<Љ l >

Ovo је relativna veza <а href= "stranica _ druga.htm "> relativna veza<la>.

<Љоdу>

<Љtml>

f.i Relati1ma veza1 - Wi ndo\"1S Internet Expl oref = @]

itt Google р ....

Select

5u g g ested 5ites .,.. Web 51ice Gallery .,..

.,.. E.age.,.. �afety.,.. TQo·ls.,.. ..... »

Stranica Tehnickog veleucilista u Zagrebu

Ovo је re]ativna veza reJativna veza..

Done • Com puter 1 Р rotected Мо d е: Off 100% ....

Str. 27 od 102 Izradio : Alen Simec, dipl. ing.

Page 28: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

1. 13.3 Resursi koj i nisu HTML

V eze se mogu povezati па bilo kakvu datoteku, poput:

• dokumeпati tekstualпih procesora,

• proracuпske taЫice,

• PDF-ove,

• kompresiraпe datoteke,

• multimediju.

Takvim datotekama moramo pristupiti preko iпtemeta. Опе posj eduju svoj URL. Bilo koj a

datoteka па Iпtemet straпici (bez obzira па tip datoteke) moze se liпkati preko URL-a.

Ako zelimo omogu6iti korisпicima da preuzmu PDF, DOC, ZIP datoteku omogu6it сето to

slj ede6im kodom.

<html>

<head>

<title>HTML resursi</title>

<Љеаd>

<body>

<h l >HTML resursi<Љ l>

<р> <а href= "arhiva.zip "> Arhiva podataka<la></p>

<р> <а href= "dokument.pdf"> Р DF dokument<la></p>

<р> <а href="dokument.doc">DOC dokument<la></p>

<Љоdу>

<Љtml>

Str. 28 od 102 Izradio : Alen Simec, dipl. ing.

Page 29: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

� HTML resursi - Windш•1S lntemet Explorer = @)

р ...

Select

5u g g ested 5ites ... Web 51ice Gallery ...

"I ... � ... � :!!С ... E_age... ;!afety... TQols ...

HT1VIL resursi

Љhiva podataka

PDF dokument

DOC dokшnent

Done . Com puter 1 Р rotected Mod е: Off 100% ...

Link na e-mail adresu moze automatski otvoriti novi e-mail upucen zelj enoj osobi. Ovo ј е

odlican naCin kako pomoc korisnicima da vam posalju e-mail s komentarima i zelj ama.

E-mail element koristi standardni sidrisni element i href atriЬut:

<html>

<head>

<title> HTML resursi</title>

<Љеаd>

<body>

<h l >HTML resursi<Љ l>

»

<p>Posalj ite mi poruku na ovaj <а href="mailto:[email protected]">e-mail<la> .</р>

<Љоdу>

<Љtml>

Str. 29 od 102 Izradio : Alen Simec, dipl. ing.

Page 30: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

� HTML resursi - Windш•1S lntemet Explorer = @)

р ....

Select

5u g g ested 5ites ..,. Web 51ice Gallery ..,.

. . .... ..,. E_age..,. ;!afety..,. TQols..,. »

HT1VIL resursi

PoS:a1j1te mi poru1ru Шl ovaj e-mail_

Done _ Com puter 1 Р rotected Mod е: Off 100% ....

1.14 Slike

Slike se koriste kako bi korisпicima preпij eli korisпe iпformacij e, za пavigaciju straпice, te da

bi pobolj sali opceпiti izgled straпice. Kada se slike pazlj ivo i ispravпo koriste, опе straпici

daju vizualпo bolj i izgled, по ako se krivo koriste, mogu straпicu uCiпiti пeCitlj ivom.

Slike se mogu kreirati i spremiti и mпogo razliCitih formata, ali svega пekoliko пj ih j e stvarno

prikladпo za slike koj e пamj eravamo staviti па Iпternet i koj e su kompatiЬilпe sa svim

operacij skim sustavima i racuпalima:

• Graphics Iпterchaпge Format (GIF) - gif slike mапј е su od slika ostalih formata,

podгZavaju samo do 256 Ьој а i pogodпe su za jedпostavпij e slike.

• Joiпt Photographic Experts Group (JPEG)- jpeg slike podгZavaju 24 bitпe Ьој е i

kompleksпe slike, poput fotografij a.

• PortaЫe Network Graphics (PNG)- пajпovij i format razvij eп da doпese пајЬоlј е iz

gif- i jpeg-a. PNG ima iste kompresij ske mogucпosti kao i gif, ali podrzava 24 bitпe i

32 bitпe Ьоје .

Elemeпt za sliku j e prazпi elemeпt <img />.

Str. 30 od 102 Izradio : Alen Simec, dipl. ing.

Page 31: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

Slij ede6i primj er opisuj e kako сето ubaciti sliku unutar stranice:

<html>

<head>

<title>Postavljanje slika</title>

<Љеаd>

<body>

<h l >Logo ТVZ-a<Љ l>

<p>Na ovoj stranici zelimo predstaviti logo ТVZ-a</p>

<img src="images/logo-tvz.jpg" />

<Љоdу>

<Љtml>

C�\Users\AI en\D·eskto p\i n .,. •t l•'t Googie

Sel!ect

5u g g ested 5ites ... Web 51ice Gallery ...

СЈ @)

... E_age... �afety... TQo·ls ... . ...

а ovoj sЬ-anici Љelimo predstaviti logo ТVZ-a

Done

С3 IC о VtL с LIST u ZAGRE

POL VTECH N ICUM ZAG RAB 1 EN SE

• Com puter 1 Р rotected М od.e: Off 100% ...

Internet preglednik се zamj eniti <img /> element sa slikom koj oj ј е vrij ednost src atributa

images/logo-tvz.jpg (putanj a prema slici).

»

Str. 3 1 od 102 Izradio : Alen Simec, dipl. ing.

Page 32: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

1. 14.1 Dodavanj e alternativnog teksta

Altemativпi tekst opisuj e sliku tako da опi koj i ј е iz пekog razloga пе mogu vidj eti, vide tekst

koji opisuj е sliku. Ovaj atribut ј е koristaп ukoliko se slika zbog spore veze пiј е prikazala ili

vise пе postoji па serveru.

<html>

<head>

<title>Dodavanje altemativnog teksta</title>

<Љеаd>

<body>

<h l >Logo ТVZ-a<Љ l>

<p>Na ovoj stranici zelimo predstaviti logo ТVZ-a</p>

<img src="images/logo-tvz.jpg" alt="ТVZ logo" />

<Љоdу>

<Љtml>

..., Postav�anje slika - Windows Jnternet Explorer

C�\Users\Alen\Deslctop\in .... l •t-1 Select

5u g g ested 5ites .,.. Web 51ice Gallery .,..

Logo TVZ-a

а ovoj strallici l;efuno preds.taviti 1ogo Т\'Z-а

Ј

POL УТЕСН N ICUM ZAG ААВ 1 EN SE

СЈ @)

.... Е:а g е .... �afety .... Т .Q:O·l.s .... »

Done Computer 1 Pюtected Mode: Off + 100% ....

Str. 32 od 102 Izradio : Alen Simec, dipl. ing.

Page 33: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

1. 14.2 Odredivanj e velicine slike

Mozemo koristiti atriЬute height i width s <img /> elementom kako bi internet preglednik

znao koliko ј е slika visoka i siroka (u pikselima) :

<html>

<head>

<title>Odredivanje veliCine slike</title>

<Љеаd>

<body>

<h l >Logo ТVZ-a<Љ l>

<p>Logo ТVZ-a sada ima dimenziju slike 150х70рх</р>

<img src="images/logo-tvz.jpg" width="l 50" height=" 70" alt="ТVZ logo" />

<Љоdу>

<Љtml>

rJ." Odredi-..,anje vel icine s l i ke - Wrndows lrrternet Explorer

"., Google р ...

Seled:

Sugg ested Sites ..,. Web Sl i c.e Ga l lery ..,.

Od rediva nje vel i Ci n e s l i ke ..,. E_age ..,. �afety ..,. TQols: ..,. »

Logo TVZ-a

Logo ТVZ-a s.ada ima dimenziju slike 1 50х70рх

Done Com puter 1 Р rotected Мо d е: Off ,r8 ... '+ 100% ...

Str. 33 od 102 Izradio : Alen Simec, dipl. ing.

Page 34: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

Kada specificiramo visiпu i siriпu slike koj a se razlikuj e od stvarnih dimeпzij a slike, iпternet

pregledпik ih sam prilagodi па defiпiraпe dimeпzij e. Kod ovakvog prikazivaпj a slike moramo

paziti па proporcioпalпost kako slika пе bi postala deformiraпa ili izgubila па kvaliteti .

1. 14.3 Postavljanje okvira slike

Svaka slika ima okvir dеЫј iпе 1, koj i se пај сеsсе пе vidi и Iпternet pregledпiku sve dok tu

sliku пе pretvorimo и liпk. Mozemo koristiti atriЬut border s <img /> elemeпtom za bolju

koпtrolu паd okvirom koj i iпternet pregledпik prikazuj e oko slike.

<html>

<head>

<title>Postavljanje okvira slike</title>

<Љеаd>

<body>

<h l >Logo ТVZ-a<Љ l>

<p>Logo ТVZ-a sada ima dimenziju slike 150х70рх i okvir Зрх.</р>

<img src="images/logo-tvz.jpg" width=" 150" height="70" alt="ТVZ logo" border="З" />

<Љоdу>

<Љtml>

Str. 34 od 102 Izradio : Alen Simec, dipl. ing.

Page 35: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

(.f. Odredi\ranje vel iCine sl i ke - Wind ows lnternet Explorer

u р ...

х

5ugg ested 5ites ,,. Web 51 i ce Ga l l ery ,,.

» Od rediva nje vel iC ine s l ike ,,. E_age ,,. �afety ,,. Т Qols: ,,.

Logo TVZ-a

Logo ТVZ-a s.ada ima dimenz:iju s.Jilie 1 5 Ох 7 Орх i okvir Зрх_

.f( tг T� v 'l.A ЗU POll.."l'l't.Qf"'ltCU ·"" ''· NSI:

Сот pute� 1 Р rotected М od е: Off

1. 14.4 Poravnavanje slike u odnosu па tekst

8 ... + 100% ... " '

Atribut Align koristi se s <img /> elementom kako bi sliku prikazali ovisno о tekstu oko slike.

Vrij ednosti ovog atributa su:

• top: tekst poravnat oko slike и ravnini s vrhom slike

• middle: tekst poravavat sa sredinom slike

• bottom: tekst poravnavat s dnom slke

• left: slika ostaj е na lij evoj strani, а tekst se prebacuj е na desnu stranu

• right: slika ostaj е na desnoj strani а tekst se prebacuj е lij evu stranu

<html>

<head>

<title>Poravnavanje slike и odnosu na tekst</title>

<Љеаd>

<body>

Str. 3 5 od 102 Izradio : Alen Simec, dipl. ing.

Page 36: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

<h l >Logo ТVZ-a<Љ l>

<img src="images/logo-tvz.jpg" width=" 150" height="70" alt="logo" border="З"

align="middle" />Pozicija teksta na sredini и odnosu na sliku

<Љоdу>

<Љtml>

ГЈ. Poravnavanje sJ i ke u od nosu na tekst - Windows Inte,rnet Explorer

"., Google

Seled:

Sugg ested Sites ..,. Web Sl i c.e Ga l lery ..,.

р ...

» Pora.vn avaлje sl i ke u o'd no". ..,. E_age ..,. �afety ..,. TQols: ..,.

Logo TVZ-a

ozicija teksta na sred:i:n:i u odnosu na sJilm

Done • Com puter 1 Р rotected Мо d е: Off ,r8 ... 100% ...

1. 14.5 Razmak slike u odnsou па tekst

VeCina intemet preglednika ostavlj a oko 1 piksel razmaka izmedu slike i teksta. Ve6i razmak

ostvarit сето pomocu:

• vspace (vertical space) : razmak za vrh i dno slike

• hspace (horizonal space) : razmak za lij evu i desnu stranu slike

<html>

<head>

<title>Razmak slike и odnosu na tekst</title>

Str. 36 od 102 Izradio : Alen Simec, dipl. ing.

Page 37: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

<Љеаd>

<body>

<h l >Logo ТVZ-a<Љ l>

<img src="imagesЛogo-tvz.jpg" width=" 150" height="70" alt="logo" border="З" align="middle"

hspace="20" vspace="25" />

Razmak slike и odnosu na tekst

<Љоdу>

<Љtml>

f.ii Razma sl i ke u odnosu 11а tekst - Wind ows lnternet Explorer

C�\Users\Alen\Deskto ... 1 +" 1 1 '('"'1 Googie

Seled:

5ugg ested 5ites ... Web Sl i ce Ga l l ery ...

Razmak s;l i ke u odnosu na " . ... E.age ... 5afety ... TQols ...

Logo TVZ-a

Done

.Q °" Ј

1.15 ТаЫiсе

Nllf:

Razmak sblte u odnosu ш1. tekst

Computer 1 P юtected Mode: Off + 100% ...

))

. "

ТаЫiсе sluze kako bi podatke rasporedili и mrezu i uCinili nj ihovu analizu j ednostavnijom. U

HTML-u опе imaju ulogu kontrole rasporeda podataka na stranici . U taЫice se moze staviti

tekst, slika, link. . .

Sva kompleksnost НТМL taЫica dolazi iz tri osnovna elementa:

Str. 37 od 102 Izradio : Alen Simec, dipl. ing.

Page 38: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

• Granice: svaka osnovna taЫica mora imati 4 granicne linij e (zida) koj e Cine

pravokutnik

• Celij e: prostor unutar 4 granicne linij e

• Raspon celij a: Unutar 4 linij e koj e okruzuju celiju, mozemo brisati ili dodavati zidove

celije

ТаЫiса ima 3 osnovne komponente :

• ТаЫiса <tаЫе>

• Red и taЫici : <tr>, koj i ј е uvij ek unutar <tаЫе>

• Celij a taЫice: <td>, koj a j e uvij ek unutar <tr>

Tag <tаЫе> i nj egov kod nalaze se izmedu <body> tagova и dokumentu. No takoder ih

mozemo koristiti izmedu veCine Ыоk elemenata, te izmedu <td> i <th> tagova za gnj eZdenj e

taЫica. Slj ede6i kod stvara ј ednostavnu taЫicu sa dva retka i dva stupca.

<html>

<head>

<title> Izrada taЫica</title>

<Љеаd>

<body>

<h l >Adresar : : Ime i prezime<Љl >

<tаЫе border="l ">

<tr>

<td> Јте <ltd>

<td> Prezime <ltd>

<ltr>

<tr>

<td> August<ltd>

<td> Cesarec <ltd>

<ltr>

</tаЫе>

<Љоdу>

<Љtml>

Str. 3 8 od 102 Izradio : Alen Simec, dipl. ing.

Page 39: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

f.ii lzrad'a taЫica - Wi ndo'l.'.'S Int·eшet Expl orer

5ugg ested 5ites ..,. Web 51 i ce Ga l lery ..,.

Adresar : : Ime i prezime

IIme IPrezime IAugust leesмec

D·one Сот pute� 1 Р rotected М od е: Off

р ....

»

Ako и j ednoj celij i zelimo imati vise redaka i stupaca, trebamo dodati atriЬut koj i се intemet

pregledniku govoriti и koj oj celij i се se granjanj e dogadati . Broj и atriЬutu odgovara broju

redaka ili stupaca koj e zelimo da celij a prikazuj e. То se zove premos6ivanj e. Premos6ivanje

nam omogucuj e da se sadrzaj j edne celij e rasporedi preko nekoliko celij a ignoriraju6i zidove

celij e. Za premos6ivanj e celij a koristimo slj edece atribute :

• colspan (prosiruj е celiju horizontalno ),

• rowspan (prosiruj e celiju vertikalno).

<html>

<head>

<title> Izrada taЫice</title>

<Љеаd>

<body>

<h l >Adresar : : podaci о stanovanju<Љl>

<tаЫе border=" 1 ">

Str. 39 od 102 Izradio : Alen Simec, dipl. ing.

Page 40: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

<tr>

<td colspan="З ''>Adresa</td>

</tr>

<tr>

<td> Matije</td>

<td> Gupca </td>

<td> 3 </td>

</tr>

</tаЫе>

<Љоdу>

<Љtml>

f.i lzrada taЫice - Windows Internet Explorer

р ...

Select

Sugg ested Sites ,,. Web Sl i ce Ga l l ery ,,.

I!zrada tabl ice ,,. E_age ,,. ;!afety ,,. TQols ,,.

Adresar : : podaci о stanovanj u

IAdres.a ��Гз

Done • Computer 1 Protected Mo·d'e: Off

Rubna linij a taЫice definira vanj ski rub taЫice, odnosno border. Internet preglednik се

taЫicu bez definiranog atriЬuta border prikazati sa rubne linij е dеЫј ine 1 рх. Ako zelimo

obrub taЫice promij eniti moramo dodati atriЬut border i definirat nj egovu deЫjinu.

Za HTML taЫicu rubna linij a se odnosi па:

)) ...

Str. 40 od 102 Izradio : Alen Simec, dipl. ing.

Page 41: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

• Vanj ske rubne linij е

• Rubne linij е рој edinih celij а

Da bi uklj ucili ili isklj ucili rubne linij e, dodaj emo "border" atriЬut u <tаЫе> pocetni tag.

Vrij ednost border atriЬuta definira deЫj inu rubne linij e и pikselima, npr. border="5" ,

postavlj a liniju deЫj ine 5 рх, а boder="O" iskljucuj e rubnu liniju.

<html>

<head>

<title> Izrada taЫice</title>

<Љеаd>

<body>

<h l >Popis proizvoda и trgovini<Љl >

<tаЫе border="O">

<tr>

<td> Proizvod</td>

<td> Model </td>

<td> Cijena </td>

</tr>

<tr>

<td> Printer</td>

<td> НР InkJet</td>

<td> 300 kn </td>

</tr>

</tаЫе>

<Љоdу>

<Љtml>

Str. 4 1 od 102 Izradio : Alen Simec, dipl. ing.

Page 42: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

r.i lzrad'a taЫice - Windows Inte;rnet Explorer

р ... , �����������-

5ugg ested 5ites ... Web 51 i ce Ga l lery ...

... E_age ... �afety ... Т Qols: ...

Popis proizvoda u trgovini

Pюizvod ).1:odd Cijena P·rinter НР InkJ et 3 О О kn

� Сот pute� 1 Р rotected М od е: Off

Ve6iпa Iпternet pregledпika odredi siriпu celij a prema sadrzaju koj i se и celij i koristi, по

postoj i ograпiceпj e za liпij e i za tekst:

• Slike moraju stati uпutar prozora Iпternet pregledпika.

»

• Ako celij а sadrzi рuпо teksta, опа se prosiruj е koliko moze do prvog prekida liпij е ili

do kraj a teksta i zbog toga taЫica moze izgledati vrlo пepregledпo.

Siriпu i visiпu celije iпternet pregledпik odreduj e sam па osпovu опоgа sto se и пj ima пalazi .

Da bi sami odredili visiпu i siriпu moramo koristiti atribute width i height. Ovi atributi sluze

kako bi podesili siriпu za taЫicu i poj ediпe celij e. AtriЬuti mogu poprimiti vrij edпost и

pixelima ili postocima.

<html>

<head>

<title> Izrada taЫice</title>

<Љеаd>

Str. 42 od 102 Izradio : Alen Simec, dipl. ing.

Page 43: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

<body>

<h l >Adresar : : slika i napomena<Љl>

<tаЫе border="2" width="580''>

<tr>

<td>Slika</td>

<td>Godiste </td>

</tr>

<tr>

<td><img src="images/august-cesarec.jpg" alt="August Cesarec" /></td>

<td> 1986</td>

</tr>

</tаЫе>

<Љоdу>

<Љtml>

f.i Iz:гad'11 taЫice - Windows Inteгnet IExploreг

Web 51 ice G a l l ery ...

= @]

f.i J:zгad a taЫice ... Eage ... �afety ... TQol� ...

Adresar : : slika i napomena

IGodiste

1 98 6

Doin e Comp,uteг 1 P rotected Mode: Off i ... � 100% ...

»

Str. 43 od 102 Izradio : Alen Simec, dipl. ing.

Page 44: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

Za prazan prostor izmedu celij a mozemo koristiti atribute "cellpadding" i "cellspacing" . Ovi

atributi koriste razliCite tehnike kako bi stavili prostor izmedu celij a:

• Cellspacing dodaje prostor izmedu celij a

• Cellpadding dodaj e prostor unutar celij e

Vrij ednost оЬа atriЬuta definira se и pikselima. Ove atriЬute dodaj emo и pocetni tag <tаЫе>:

<html>

<head>

<title> Izrada taЫice</title>

<Љеаd>

<body>

<h l >Adresar : : slika i napomena<Љl>

<tаЫе border="2" width="580" cellpading="5" cellspacing="5''>

<tr>

<td> Slika</td>

<td> Godiste </td>

</tr>

<tr>

<td> <img src="images/august-cesarec.jpg" alt="August Cesarec" /></td>

<td> 1986</td>

</tr>

</tаЫе>

<Љоdу>

<Љtml>

Str. 44 od 102 Izradio : Alen Simec, dipl. ing.

Page 45: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

r.< Izrada taЫice - Wi ndows Intemet IExplorer = @]

р ....

Select

Su g g e>l:ed Sites .,. Web 51 ice Ga l lery .,.

•1 .,. � .,. g � .,. J:ag e .,. �afety .,. TQol s .,. l!zrad a taЫice »

Adresar : : slika i napomena

� Comp1Uter 1 P rotected Mode: Off 100% ... . .. Doin e

Poravnavanj e taЫice и prozoru Internet preglednika mozemo kontrolirati pomocu atributa za

horizontalno poravnavanj e align i vertikalno poravavanj e valign. Atribute koristite unutar

<tаЫе> elementa.

Moguce vrij ednosti align atriЬut su:

• left,

• right,

• center,

• justify,

• char .

Moguce vrij ednosti valign atriЬut su:

• top,

Str. 45 od 102 Izradio : Alen Simec, dipl. ing.

Page 46: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

• bottom,

• middle,

• baseline.

TaЬlicu, redak ili celiju mozete dodatno urediti sa bojom pozadine ili slikom. AtriЬut bgcolor

odreduje boju, а atriЬut background odreduj e sliku. Koristite ove atriЬute unutar pocetnog

<tаЫе>, <tr> ili <td> taga.

<html>

<head>

<title> Izrada taЫice</title>

<Љеаd>

<body>

<hl >Shopping<Љl >

<tаЫе border="O" width="ЗOO" cellpading="5" cellspacing="5 " bgcolor="green''>

<tr>

<td> N amimica</td>

<td>Komada </td>

</tr>

<tr>

<td> Kruh</td>

<td> 1 kom</td>

</tr>

</tаЫе>

<Љоdу>

<Љtml>

Str. 46 od 102 Izradio : Alen Simec, dipl. ing.

Page 47: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

;.;; Izrada taЫice - Wi ndows Intemet IExplorer = @]

... . .,.

Select

Su g g e>ted Sites .,. Web Sl ice Ga l lery .,.

.,. Eag e ,,. Safety ,,. TQol s ,,.

Done Comp·uter 1 P rotected· Mode: Off 100% ...

1.16 Meta podaci

Poj am meta podaci odnosi se na podatke о podacima. Na internetu su to podaci koj i opisuju

internet stranicu. Svaki komadic meta podataka и HTМL-u definira se:

• <meta /> elementom

• pomocu "name" i "contents" atributima

< !DOCTYPE htтl P UBLIC "-1/ WЗCllDTD XНTML 1 . 0 Traпsitioпall/EN"

"http://www.wЗ.org/TR/xhtтll!DTD/xhtтll-traпsitioпal.dtd">

<htтl хтlпs="http://www.wЗ.org/1999/xhtтl">

<head> <title> Meta podaci </title>

<теtа пате= "keywords" сопtепt= " Web coпsultiпg, page desigп, site coпstructioп" />

<теtа пате= "descriptioп" сопtепt= "Syпopsis ој Jejf's skills апd services" />

<Љеаd> <body>

<h l >Moja stranica<Љ l > <p>Ovdje su moj i meta podaci koje intemet preglednik ne prikazuje korisniku na ekranu</p>

<Љоdу> <Љtml>

»

Str. 47 od 102 Izradio : Alen Simec, dipl. ing.

Page 48: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

г. Meta padaci - Wi r1do·�,1s Internet Expl areir = @]

.... +.,. р ...

Select

Sugg e>ted Sites .... � Web Sl ice Ga l lery ....

r,,, Meta pod a ci .... Eage ,,.. Safety ,,.. TQol s ,,..

Мој а stranica Ovdje su moji meta podaci koje iinternet preglednik 11е prik:azuje korisШ!rn ш1 ekranu

Done Comp·uter 1 P rotected· Mode: Off а .... 100% ....

1 .17 HTML i XHTML DTD

HTML 1 ХНТМL specifikacij e koriste Documeпt Туре Defiпitioп, парisапе и SGML-u za

defiпiraпj е detalj а.

»

" '

Uvodeпj e CSS-a dovelo је do toga da se HTML koristi samo kako bi opisali strukturu iпtemet

straпice, пе i пј еziп izgled sto ј е rezultiralo s 3 podvrste НТМL-а:

• (X)HTML transitional . Sadrzi elemeпte za formatiraпj e izgleda foпtova Ьоја.

• (X)HTML strict. Ne sadгZi elemeпte za formatiraпj e izgleda.

• (x)HTML frameset. Sadrzi okvire kod koj i vam dozvolj ava da vise straпice prikazete

uпutar istog prozora pregledпika.

Svaki valj апо koпstruiraпi HTML ili ХНТМL dokumeпt mora sadrzati DTD refereпcu и

prvoj liпij i teksta.

Tip Ime Kod

HTML Transitional <! DОСТУРЕ HTML PUBLIC "-//WЗC//DTD HTML 4.01 Transitional//EN"

Str. 48 od 102 Izradio : Alen Simec, dipl. ing.

Page 49: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

"http ://www.w3 .org/TRЉtml4/loose .dtd">

HTML Strict < !DОСТУРЕ HTML PUBLIC "-//WЗC//DTD HTML 4 .01//EN" "http ://www.w3 .org/TRЉtml4/strict.dtd">

HTML Frameset < !DОСТУРЕ HTML PUBLIC "-//WЗC//DTD HTML 4.01 Frameset//EN" "http ://www.wЗ .org/TRЉtml4/frameset.dtd">

XHTML Transitional <! DОСТУРЕ html PUBLIC "-//WЗC//DTD XHTML 1 . 0 Transitional//EN" "http ://www.wЗ .org/TR/xhtml l /DTD/xhtml l -transitional .dtd">

XHTML Strict <! DОСТУРЕ html PUBLIC "-//WЗC//DTD XHTML 1 .0 Strict//EN" "http ://www.wЗ .org/TR/xhtml l /DTD/xhtml l -strict.dtd">

XHTML Frameset <! DОСТУРЕ html PUBLIC "-//WЗC//DTD XHTML 1 . 0 Frameset//EN" "http ://www.wЗ .org/TR/xhtml l /DTD/xhtml l -frameset.dtd">

1 .18 Ispravno i pogresno koristenje (X)HTML-a

Prij e samog pocetka razmislite о sadrzaju vase Intemet stranice. Bit svake web stranice ј е

nj ezin sadrzaj . Vazno ј е da ј е stranica smislena, te da informacij e dostavlj a direktno, na lagan

naCin i dj elotvomo, no sve ove stvari nemaju puno znacaja ako se na stranici ne nalazi

koristan sadrzaj koji се kori snicima dati razlog da ј е posj ete. Obnavlj ajte sadrzaj stranice kako

опа ne bi postala staticna i dosadna, te kako nebi izgubili posj etitelj e.

Dopustite dizajnu i sadrzaju stranice da odreduj e kako се izgledati kod stranice, grafika,

interakcij a i stranica се raditi svoj posao bez da zbunjuj e posj etitelj e.

Pokusajte svoju stranice dizajnirati i izraditi s minimalno ukrasavanj a i j ednostavnim

rasporedom stranice. Ne zatrpavajte stranice s nepotrebnom grafikom, te pripazite da vam

linkovi koj e stavite na stranicu budu vrij edni toga. Svaki nepotrebni graficki dodatak na

stranici odvlaCi pozomost posj etitelj ima sa sadrzaja.

Str. 49 od 102 Izradio : Alen Simec, dipl. ing.

Page 50: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

Kad korisпici posj ete uredпu straпicu s fokusom па sadrzaj , osj ecat се se i vise пеgо

dobrodoSli. Vazпo ј е sadгZaj popratiti grafikom i liпkovima, ali пе previse.

Pripazite da sve tagove koj e ste otvorili па kraju i zatvorite. Neki pregledпici mogu

kompeпzirati greske и tagovima, sto се vas ostaviti s lazпim osj ecaj em sigurnosti .

• Pratite pozicij e tagova tij ekom pisaпja ili editiraпj a НТМL-а. • Koristite ispitivac tocпosti siпtakse da bi ovj erili svoj posao tij ekom procesa

testiraпj а.

• Nabavite i koristite sto ј е vise moguce razliCitih pregledпika prilikom testiraпj a

straпice.

• Uvij ek slij edite siпtaksu НТМL-а i pravila za raspored straпice.

• Pripazite па to da vasa straпica dobro radi и svim pregledпika.

1 .19 Korisni alati za pisanje HTML koda

HTML dokumeпti mogu se пapisati koriste6i j edпostavпi tekstualпi editor poput пotepada.

Daпas postoj i рuпо programa koj a j e zaduzeпa bas za pisaпj e НТМL-а.

Editori se dij ele па :

• Pomocпi editori (imaju mапј е mogucпosti)

• WYSIWYG (what you se is what you get) editori, koj i su рuпо пapredпij i

1. 19.1 Pomocni editori

Imaju fuпkcij e koj e vam pomazu pri pi saпju HTML-a:

• Tagovi su drukCij e оЬој епi od sadгZaja

• Spell checker zпа da tagovi пisu krivo парisапе rij eCi

Neki od pomocпih editora su:

• UltraEdit

• HomeSite

• BBEdit/ТextWraпgler

• HTML-Kit

Str. 50 od 102 Izradio : Alen Simec, dipl. ing.

Page 51: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

1. 19.2 WYSIWYG editori

WISYWY g editori stvaraju НТМL kod stranice ро tome kako napravimo i rasporedimo

sadrzaj stranice vizualno na monitoru (pomocu drag&drop vizualnih elemenata, te radom s

GUI menij em i opcij ama). WYSIWYG nam stedi puno vremena.

Neki od WYSIWYG editora su :

• Adobe Dreamweaver

• Microsoft Frontpage

• Adobe GoLive

• CoffeeCup HTML Editor 2007

• HotDog Pro

1 .20 HTML validator

Validatori sluze da bi provj erili drzi li se kod pravila i oznacava sva odstupanj a koj e и nj emu

pronadu.

Provj eru vrsite na slj edeCi naCin:

• Kreirate НТМL dokument и editoru.

• Kopirate taj kod na stranicu za validaciju НТМL-а.

• Ako validator pronade neke proЫeme, ispravite ih, te dokument ponovno vratimo na

validaciju.

Formalni dokumenti koj i opisuju HTML i ХНТМL nalaze se na WЗС ovom web site-u

www.wЗ .org

Str. 5 1 od 102 Izradio : Alen Simec, dipl. ing.

Page 52: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

ZADACI

1 . Otvorite tekstualпi editor i пapisite оsпоvпе elemeпte iпternet straпice. Vasa росеtпа

iпternet straпica mora imati zaglavlj e, пaslov i tij elo. Naslov straпice i tekst uпutar

tij ela dokumeпta stavite ро vasem izboru. Spremite dokumeпt pod пazivom zad l .htm.

Napravite pregled dokumeпta и пekom od iпternet pregledпika.

2 . Otvorite dokumeпt zad l .htm i и tij elo dokumeпta пapisite tekst и dva odlomka.

Napravite odvaj aпj e izmedu odlomka sa horizoпtalпom liпij om. Spremite dokumeпt

pod пazivom zad2.htm. Napravite pregled dokumeпta и пekom od iпternet

pregledпika.

3 . Otvorite dokumeпt zad2.htm i и tij elu dokumeпta izпad prvog odlomka ubacite пaslov

i podпaslov. Izпad drugog odlomka obrisite horizoпtalпu liпiju i ubacite jos ј еdап

podпalov. Spremite dokumeпt pod пazivom zadЗ .htm. Napravite pregled dokumeпta и

пekom od iпternet pregledпika.

4 . Otvorite dokumeпt zadЗ .htm, te ispod drugog odlomka пapisite svoj e dпеvпе obaveze.

Radite listu s broj evima. Ispod li ste stavite horizoпtalпu liпiju. Ispod horizoпtalпe

liпij e пapravite пovu listu s ozпakama и koju cete staviti sve stvari koj e morate

poпij eti sa sobom па predavaпj a i vj ezbe. Spremite dokumeпt pod пazivom zad4.htm.

Napravite pregled dokumeпta и пekom od iпternet pregledпika.

5 . Kreirajte пovi dokumeпt pod пazivom taЫica.htm i и пј ети defiпirajte zaglavlj e,

пaslov i tij elo dokumeпta. Naslov straпice stavite ро vlastitom izboru, а и tij elo

dokumeпta stavite taЫicu sa 4 redka i 4 stupca. TaЬlicu defiпirajte sa deЫj iпom liпij e

od 2рх, razmakom uпutar celij a od 5рх i razmakom izmedu celij a sa 4рх. U prvom

redku пapisite ime, prezime, adresa i grad. U ostalim celij ama пapisite proizvolj пo

podatke vasih kolega, prij atelj a ili rodbiпe. Na vrh taЫice umetпite celiju koj a се

povezati cij eli red. U tu celiju пapisite пaslov taЫice, а tekst и toj celij i pozicioпiraj te

tako da bude и srediпi .

6 . Otvorite dokumeпt zad4.htm, te ispod liste пapravite пovi odlomak i upisite tekst.

Uпutar odlomka iskoristite barem dva puta prekid liпij e za poj ediпi dio teksta.

Napravite uпutar odlomka dvij e veze. Јеdпа veza се gledati па dokumeпt taЫica.htm,

Str. 52 od 102 Izradio : Alen Simec, dipl. ing.

Page 53: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

dok се druga veza biti na internet stranicu р о vasem izboru. Veza koj a се gledati na

internet stranicu mora otvarati novi prozor u internet pregledniku. Spremite dokument

pod nazivom zad5 .htm. Napravite pregled dokumenta u nekom od internet

preglednika.

7. Otvorite dokument zad5 .htm i umetnite dvij e slike ро izboru u prvi i drugi odlomak.

Prva slika mora imati lokaciju na lokalnom racunalu, dok druga slika mora biti

pozvana sa interneta. Odredite dodatne atriЬute, te odredite veliCinu slike, opis slike

(alternativni tekst), okvir slike ро izboru. Tekst morate proizvoljno urediti tako da se

nalazi ispod, desno ili lij evo od slike. Spremite dokument pod nazivom zadб .htm.

Napravite pregled dokumenta u nekom od internet preglednika.

8 . Otvorite dokument zadб.htm i umetnite meta podatke za opis stranice i kljucne rij eCi .

Na kraju spremite dokument kao zad7 .htm i provjerite preko validatora da li ste dobro

napisali sintaksu. Ako vasa stranica prolazi validaciju, uspj esno ste savladali pi sanj e

XHTML koda prema WЗС standardu.

Str. 53 od 102 Izradio : Alen Simec, dipl. ing.

Page 54: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

2 css

2.1 Uvod u CSS

CSS (Cascadiпg Style Sheets), оdпоsпо kaskadпi stilovi, j edпostavaп su mehaпizam za

dodavaпj e stilova: foпtova, Ьоја razmaka izmedu paragrafa, uredivaпj e taЫica. Svoj im

dolaskom CSS ј е izazvao pravu revoluciju па iпternetu i to zahvaljuju6i пizu predпosti koj e

ima pred taЫicпim layoutom (koristeпj e taЫica za formiraпj e straпice). Koristeпj em CSS-a

postalo је moguce odvoj iti prezeпtaciju podataka i dizajп od same strukture podataka. НТМL

k6d postaj e pregledпij i i maпj i sto zпaCi da ga j e рuпо lakse koпtrolirati, а takoder је moguce

jedпostavпom primj eпom parametara promij eпiti izgled straпice.

CSS је doпio Citav пiz паСiпа za uredivaпj e prikaza podataka koj i do tada пisu postoj ali и

samom HTML-u, а web programeri su razvili korisпe tehпike koj ima mozete ustediti

dragocj eпo vrij eme prilikom izrade iпternet straпica.

Mogucпosti formatiraпj a HTML-a poprilicпo su ograпiceпe. Kada dizajпiramo izgled straпice

и HTМL-u, ograпiceпi smo па taЫice, koпtrola foпtova, i пekoliko stilova teksta poput bold i

italic. Sa stilskim obrascima mozemo:

• Pazlj ivo koпtrolirati svaki aspekt prikaza па straпici ( odrediti razmak izmed liпij a,

zпakova, margiпe straпica, pozicij e slika i drugo).

• Primij eпiti promj eпe па cij elu iпternet straпicu

• Mozemo osigurati doslj edaп dizajп па cij elj iпternet straпici tako da isti stilski obrazac

kori stimo za svaku poj ediпu straпicu.

• Dati iпternet pregledпiku iпstrukcij e za koпtrolu izgleda straпice.

• Kreirati diпamicпe straпice.

Pomocu CS S-a defiпiramo pravila и stilskom obrascu koj i odreduj e kako zelimo da sadrzaj

opisaп odredeпim HTML kodom izgleda i povezuj emo stilska pravila i HTML kod.

Koristeпj em CSS obrasca mozemo koпtrolirati bilo koj i dio segmeпta па Iпternet straпici :

• Podesavaпj e pozadiпe (Ьој а pozadiпe, slike па pozadiпi).

• Opcij e okvira (koпtrolira okvire povezaпe sa straпicom, liste, taЫice, slike, Ыоk

elemeпte.

Str. 54 od 102 Izradio : Alen Simec, dipl. ing.

Page 55: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

• Opcij e klasifikacij a (kontroliraju na koj i se naCin elementi poput slika ponasaju na

stranici и odnosu na ostale elemente.

• Uredivanj e li sti .

• Uredivanj e margina.

• Kontrola padding-a (kontrola koliCine praznog prostora oko bilo koj eg Ыоk elemena

na stranici).

• Kontrolza pozicioniranj a elemenata.

• Kontrola veliCine elemenata.

• Uredivanj e taЫica.

• Uredivanje teksta.

2.2 Struktura i sintaksa CSS-a

Stilski obrasci saCinj eni su od stilskih pravila. Svako pravilo ima dva dij ela:

• Selektor : Odreduj e element na koj i se stilsko pravilo odnosi

• Deklaracij a: Odreduj e kako izgleda sadrzaj opisan CSS-om

Koristimo se sa setom interpunkcij skih i posebnih znakova kako Ьi definirali stilsko pravilo.

Sintaksa za stilska pravila uvij ek slij edi slj ede6i uzorak:

selektor {deklaracija;}

Deklaracij a se dij eli na dvij e stavke:

1 . Properti es ( aspekti kako da racunal о prikaze tekst i grafiku) .

2 . Values (podaci koj i odreduju kao zelimo da tekst i slike izgledaju na nasoj stranici).

Properties se od vrij ednosti (value) и deklaracij i odvaj a dvotockom, а svaka deklaracij a

zavrsava s tockom-zarez:

selector {property: value;}

Str. 55 od 102 Izradio : Alen Simec, dipl. ing.

Page 56: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

CSS specifikacij a3 sadrzi listu svih opcij a s kojima mozemo raditi и svoj im stilskim

pravilima, te vrij edпostima koj e pravila mogu zauzeti .

Stilski obrasci пadj acavaju uпutarnj a pravila prikaza и iпternet pregledпiku. Vase odredbe za

formatiraпj e utj ecu па krajпj i prikaz straпice и korisпikovom prozoru.

Korisпici mogu promj eпiti svoj e postavke tako da пj ihov Iпternet pregledпik пе prikazuj e vas

CSS. Iako veCiпa korisпika koristi CSS, trebali bi isprobati da li vasa straпica izgleda

prihvatlj ivo bez ukljuceпog CS S-a.

2.3 Selektori i deklaracij e

Za ј еdап selektor mozemo пapraviti пekoliko stilskih pravila, svaki s j edпom deklaracij om :

hl {color: teal;}

hl {font-family: Arial;}

hl {font-size: Збрх;}

No, tako velika kolekcij a stilsih pravila postaje teska za upotrebu. CSS vam dozvolj ava da

kombiпirate пekoliko deklaracij a и јеdпо stillsko pravilo koj e utj ece па karakteri stike prikaza

рој ediпog selektora:

hl {

}

color: teal;

font-family: Arial;

font-size: Збрх;

Sve deklaracij е za h 1 selektor su uпutar istih viticastih zagrada ( { }) i odvoj епе su tocka­

zarezom (;). Mozemo staviti koliko god hocemo deklaracij a и stilsko pravilo, samo trebamo

svaku deklaraciju zavrsiti s tocka-zarezom.

3 Pogledajte specifikaciju prema WЗС (http ://www.w3 .org/ТR/CSS2)

Str. 56 od 102 Izradio : Alen Simec, dipl. ing.

Page 57: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

Mozemo napraviti da se isti set deklaracij a odnosi na cij elu skupinu selektora. Selektore ј е

potrebno odvoj iti zarezima. Slj edece stilsko pravilo ostavlj a deklaracij e za boju teksta, font i

veliCinu fonta :

hl, h2, hЗ {

}

color: teal;

font-family: Arial;

font-size: Збрх;

2.4 Rad sa stilskim klasama

CSS dopusta specificiranj e informacij a na nekoliko naCina:

• unutar j ednog HTML elementa,

• unutar <head> elementa,

• и posebnom css dokumentu.

Takoder ј е moguce referencirati visestruke css dokumente unuter j ednog HTML dokumenta.

U slucaju koristenja visestrukih stilova, svi се stilovi biti kaskadno poredani unutar novog

virtualnog stila ро slij ede6im pravilima:

• Browser default

• External style sheet

• Internal style sheet (unutar <head> tag-a)

• Inline style (unutar НТМL elementa)

Stilska pravila odnose se na odredene dij elove НТМL koda. Ako zelimo odrediti dio koj i se

odnosi samo na paragrafe koji и sebi sadrze autorska prava, trebamo naCin na koj i сето re6i

internet pregledniku da to pravilo ima ogranicen prostor dj elovanja .

Kako bi poЬlize odredili stilska pravila, kombinirajte class atribut s elementima и HTML

kodu. Slij ede6i primj eri prikazuju HTML za dvij e vrste paragrafa:

Regularni odlomak (bez class atriЬuta)

Str. 57 od 102 Izradio : Alen Simec, dipl. ing.

Page 58: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

<html>

<head>

<title>Rad sa stilskim klasama</title>

<Љеаd>

<body>

<h l >Regulami odlomak<Љ l>

<p>Ovo је regulami odlomak.</p>

<Љоdу>

<Љtml>

� Izrada taЫice - Window� Internet Explorer

Select

Osnove HTML, ХНТМL i CSS

р ... \

Sugges.ted Sites ... � Web Sl ice Gal lery ...

Izrada ta Ыice

Reg,ularni odlom.ak

Ovo је regclaлll odlomak_

Done

Class atriЬut s vrijednosti "copyright"

<html>

<head>

<title>Rad sa stilskim klasama </title>

<Љеаd>

<body>

<h l >Regulami odlomak<Љ l>

Str. 58 od 102

• 1 ... Њ1 ... � tt ... Eage ... �afety ... T.Qols ... »

к Computer 1 Protected Mode: Off ./'а ... .,. НЮ % ...

Izradio : Alen Simec, dipl. ing.

Page 59: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

<р class="copyright">Ovo је odlomak sa definiranom klasom.</p>

<Љоdу>

<Љtml>

t Rad >а stilskim klaяma - Windows Intemet Explorer

� Web '>l ice Gal lery ...

Rad sa Яi lskim klasam a � ... � ... � � ... E_age ... �afety ... TQo·ls ..-

Regularni odlomak

r "!lm JG or11nmak s .'\ rlofin1 re1nom k!.'\son1

Done Computer 1 Protected Mode: Off 100% ...

Da bi kreirali stilsko pravilo koj e se odnosi samo na "copyright" odlomak, unutar tagova

<head> </head> stavite slj edece:

<style>

p. copyright {

font-family: Arial;

font-size: 12рх;

color: white;

background: teal;

}

<lstyle>

Ovo stilsko pravilo odreduj e da svi odlomci klase copyright prikazu bijeli tekst na tirkiznoj

pozadini arial fontom veliCine 12 рх.

»

Str. 59 od 102 Izradio : Alen Simec, dipl. ing.

Page 60: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

2.5 Nasljedivanje stilova

Jedan od osnovnih stvari и HTМL-u ј е ugnjeZdivanj e tagova. Cij eli HTML dokument

ugnj eZden ј е izmedu <html> i </html> tagova. Sve sto Intemet preglednik prikazuj е u

prozoru ugnj eZdeno ј е unutar <body> i </Ьоdу> tagova.

CSS specifikacij e prepoznaju da ugnj eZdeni elementi j edan unutar drugog mogu osigurati

povezanj e stilova s elementom roditelj a, tako da pronadu put do elementa dij eteta. То se zove

naslj edivanj е.

Kada dodaj emo elementu nj egov stil, isti stil primj enjuj e se па sve elemente ugnij eZdene

unutar nekog elementa.

body {

}

background: teal;

color: white;

font-size: 18рх;

font-family: Garamond;

margin-left: 72рх;

margin-right: 72рх;

margin-top: 72рх;

Ako zelimo postaviti stilska pravila za cij eli dokument, moramo ih zadati и body elementu.

<html>

<head>

<title>Rad sa stilskim klasama </title>

<style>

body {

background: teal;

color: white;

font-size: 18рх;

font-family: Garamond;

margin-left: 72рх;

Str. 60 od 102 Izradio : Alen Simec, dipl. ing.

Page 61: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

}

margin-right: 72рх;

margin-top: 72рх;

р. copyright {

font-family: Arial ;

f ont-size: 12рх;

color: white;

background: Ыuе;

}

</style>

<Љеаd>

<body>

<h l >Nasljedivanje stilova<Љ l >

<р class="copyright">Ovo је odlomak sa definiranom klasom.</p>

<p>Definirali smo stil cijelog dokumenta</p>

<Љоdу>

<Љtml>

r,; Rad sa s.t i lskim klasama - �\lindo1'1s Intemet Eкplorer

Select

5uggested 5rtes .,.. Web 51ice Ga l l ery .,..

Str. 6 1 od 102

�' Gщle

= @)

Izradio : Alen Simec, dipl. ing.

Page 62: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

2.5.1 Eksterni stilski obrazac

Ekstemi stilski obrazac sadrzi sva vasa stilska pravila и zasebпom tekst dokumeпtu а koj i se

mozete refereпcirati s bilo koj e HTML datoteke па site-u. Datoteku morate drzavati odvoj eпu

sa stilskim obrascem, а ekstemi stilski obrazac пudi pogodпosti za ukupпo odrzavaпje

straпice.

Ekstemi stilski obrazac ј е idealaп kada se stil primj eпjuj e па vise straпica, tako da sa

ekstemim stilskim obrascem mozemo promij eпiti izgled cij ele Iпtemet straпice promj eпom

samo ј еdпе datoteke. Svaka straпica se povezuje kori steпj em <liпk> tag-a. Tag ide uпutar

<head> dij ela HTML dokumeпta ili uпutar procesпe iпstrukcij е и ХМL dokumeпtu.

<html>

<head>

<title>Ekstemi stilski obrazac</title>

<link rel="stylesheet" type="text/css" href="moj stil.css" />

<head>

<body>

< ! -- Ovdje ide sadrzaj stranice -->

<Љоdу>

<Љtml>

Iпtemet pregledпik се Citati defiпicij e iz datoteke moj stil .css i formatirat се dokumeпt

sukladпo пj emu. Ekstemi stilski obrazac moze biti парisап и bilo koj em editoru. Takva

datoteka пе smij e sadгZavati пiti јеdап html ili xml tag. Datoteka mora biti spremlj eпa sa . css

eksteпzij от.

Href atribut и <liпk> elemeпtu moze sadгZati :

• relativпi liпk (stil ski obrazac па serveru)

• apsolutпi liпk (stilski obrazac koj i se пе пalazi па пasem ili пekm drugom serveru)

Str. 62 od 102 Izradio : Alen Simec, dipl. ing.

Page 63: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

2.5.2 Interni stilski obrazac

Interni stilski obrazac smj esten ј е unutar HTML stranice. Treba dodati stilska pravila и

<style> element и zagavlju dokumenta. Mozete ukljuCiti stilskih pravila koliko god zelite и

interni obrazac.

<html>

<head>

<title>Intemi stilski obrazac</title>

<style type = "text/css ">

body {

background: Ыасk;

color: white;

font-size: 1 брх;

font-family: Arial;

margin-left: 72рх;

margin-right: 72рх;

margin-top: 72рх;}

hl, h2, hЗ {

}

color: teal;

font-family: Arial;

font-size: Збрх;

p. copyright {

font-family: Arial;

font-size: 12рх;

font-color: white;

background: Ыасk;

}

. warning {font-family: Arial;

font-size: 1 брх;

font-color: red;

}

<lstyle>

<head>

Str. 63 od 102 Izradio : Alen Simec, dipl. ing.

Page 64: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

<body>

<h l >Naslov definiran h l tagom<Љ l >

<h2>Podnaslov definiran h2 tagom<Љ2>

<hЗ>Podnaslov definiran hЗ tagom<ЉЗ>

<р class="copyright">Odlomak sa atributom <i>copyright</i></p>

<р class="waming">Odlomak sa atriЬutom <i> waming</i></p>

<Љоdу>

<Љtml>

l:i Intemi stilski obrazac - Windows lлternet EJ<plorer

Select

Suggested Sites ..-

= @)

Prednost internog stilskog obrasca ј е pogodnost da stil ska pravila koj а se nalaze и istoj

datoteci kao i HTML kod mogu brzo prilagodavati . No ako zelimo isti obrazac koristiti za

vise stranica, trebamo ga premj estiti и zasebnu datoteku, odnosno mozemo koristiti vanj ski

( eksterni) stilski obrazac.

»

Str. 64 od 102 Izradio : Alen Simec, dipl. ing.

Page 65: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

2.5.3 Inline stilski obrazac

Inline stilski obrazac kori sti se za odredivanj e formata teksta za poj edini odlomak, dio

odlomka, rij ec ili slovo. Ovaj nacin formatiranj a teksta ј е losij i za generalno formatiranj e

teksta na cijeloj stranici, ј ег se koristi samo и odredenom tagu.

Moze sadгZavati sva svoj stva CSS-a.

<html>

<head>

<title>Inline stilski obrazac</title>

<head>

<body>

<h l style="border-bottom: lpx solid green; color: Ыue;">Primjer inline stilskog obrasca<Љ l >

<р style="font-size: l Зрх; font-weight:bold;">Tekst koj i се poprimiti svoj stva inline stilskog

obrasca</p>

<Љоdу>

<Љtml>

� !nl i11e sti lsкi obrazac - Windows !nternet Explorer

Select

S.uggested Sites ... Web Slice Ga l lery ...

= (§]

In l ine >ti lski ob�azac .... §) ... � � ... E_age .... �afety .... T.Qo·ls ...

Primjer inline stilskog obrasca J.ek!it koji ie poprimiti s"lioj sna inline stilslшg oЪrasca

Done Computer 1 Protected Mode: Off 100% ...

Primj er. Eksterni stilski obrazac ima slij edeca svoj stva za hl selektor:

»

Str. 65 od 102 Izradio : Alen Simec, dipl. ing.

Page 66: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

h l {

}

color: red;

text-align: left;

font-size: 8pt

interni stilski obrazac ima slij edeca svoj stva za h 1 :

h l {

}

text-align: right;

font-size : 20pt

Osnove HTML, ХНТМL i CSS

Ako stranicu s internim stilski obrascem povezemo s vanj skim stilski obrascem svoj stva za hl

се biti :

• color: red;

• text-align: right;

• font-size: 20pt

Dakle, Ьој а ј е naslij edena od vanj skog stilskog obrasca а font-size i text-align su uzeti iz

internog stilskog obrasca.

<html>

<head>

<title>Ekstemi i intemi stilski obrazac</title>

<link rel= "stylesheet" type ="text/css" href= "mojstil. css" />

<style type = "text/css ">

hl {

}

<lstyle>

text-align: right;

font-size: 20pt

Str. 66 od 102 Izradio : Alen Simec, dipl. ing.

Page 67: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

<head>

<body>

<h l >Koja svoj stva ima naslov?<Љ l >

<Љоdу>

<Љtml>

� Eksterni i interni sbils.ki оЬпшк - WindO\чs Iпtemet Eкplorer

Select

... 1 -'t 1 1 [�1 Google

5ugges:ted 5ites .,. iJJ Web 51ic:e Ga l lery ,,.

� Ekrterni i interni, stilski obrazac

= @)

.,. E_age .,. ;!afety .,. Т Qols .,.

Која svojstva ima naslov?

Done • Computer 1 Protected Mode: Off

2.6 Upravljanje objektima pomocu CSS-a

НЈО% .,.

»

CSS mozemo korisiti kako bi pozicionirali podatke na stranici tako da se slike i Ыokovi teksta

pojave tocno tamo gdj e ih zelimo i stanu tocno unuar prostora koj i zelimo da zauzmu.

CSS nam pruza nekoliko naCina sa koj im mozemo odrediti tocno gde se element treba pojaviti

na stranici. Ove kontrole koriste razliCite naCine za pozicioniranj e bazirane na odnosu izmedu

kutij e elementa i kutij e elementa nj egovog roditelj a.

Kod pozivanj а atriЬuta mozemo koristiti class () ili id ( #) atriЬut. Razlika је и tome sto se

class atriЬut moze koristiti vise puta, а id atriЬut se moze poj aviti samo j ednom na stranici .

Atribut class nam omogucuj e da navedemo cij elu vrstu elementa uz pomoc samo j edne

reference, а id se moze odnositi na samo j ednu instancu elementa.

Str. 67 od 102 Izradio : Alen Simec, dipl. ing.

Page 68: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

2.7 Primjena CSS-a

2.7.1 Воје

Вој е mozemo defiпirati па dva паСiпа:

• preko imeпa,

• kombiпacijom slova i broj eva (broj evi imaju siru paletu Ьоја, ali ih j e teze zapamtiti) .

Heksadecimalпi zapis koristi 6 zпakova. То ј е kombiпaciju slova i broj eva kako bi se

defiпiralo boju. Ako zпamo hex kod пеkе Ьој е, to је sve sto паm treba da ј е postavimo па

straпicu. Dok koristimo hex kod kako bi defiпirali zпak, uvij ek ispred koda treba staj ati zпak

#.

Takoder mozemo koristiti dvij e decimalпe RGB vrij edпosti :

• Rgb (r, g, Ь): r, g i Ь su broj evi izmedu О i 255 koji predstavlj aju crveпu (red),

zeleпu(greeп) i plavu(Ыue) boju.

• Rgb(r%, g%, Ь%): za svaku boju odreduj emo postotak.

4CSS koristi slj edeca svoj sva kako bi defiпirao boju:

• Color (defiпira boju foпta i Ьој е za liпkove)

• Backgrouпd ili backgrouпd-color defiпira boju pozadiпe za cij elu straпicu ili za

рој ediпe elemeпte

Selector ( color: value;)

2. 7 .2 Linkovi

Naj cesca upotreba pseudo klasa и CSS-u ј е defiпiraпj e stilskog pravila za zadaпi elemeпt и

" staЫu dokumeпta" . Ovo ј е tehпicki termiп koj i zпaCi da iпternet pregledпik gradi

hij erarhij sku reprezeпtaciju svih elemeпata и dokumeпtu.

Primj er. Liпk ј е pseudo klasa koj a defiпira stil ska pravila za bilo koj i j os пероsј есепi liпk.

Postoj i 5 пajces6ih pseudo klasa koj e se mogu koristiti s hyperliпkovima (vezama) :

4 Pogledajte prilog sa paletom Ьоја

Str. 68 od 102 Izradio : Alen Simec, dipl. ing.

Page 69: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

• :link (formatiranj e izgleda jos neposj ecenih linkova)

• :visited (formatiranj e izgleda posj ecenih linkova)

• :focus (formatiranj e izgleda likova trenutno selektiranih pomocu tipkovnice)

• :hover (formatiranje izgleda linkova na koj ima j e trenutacno strelica misa)

• :active (formatiranj e izgleda linkova koj i su selektirani)

Ispred imena pseudo klase dolazi dvotocka. Mogu se koristiti sa:

• Elementima

• Klasama

• ID-ovima

Link moze biti и vise stanja od jednom. Stil ska pravila za linkove uvij ek se trebaju napisati

ovim redoslij edom :

• : link,

• :vi sited,

• :visiЫe,

• :focus,

• :hover,

• : active .

Ovaj redoslij ed ј е potrebno postivati ј ег bi se linkovi inace krivo prikazivali.

body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%; }

a: link { color: olive;}

a:visited { color: yellow;}

<html>

<head>

<title>Linkovi</title>

<style type = "text/css ">

Str. 69 od 102 Izradio : Alen Simec, dipl. ing.

Page 70: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;}

a:link {color: olive;}

a:visited {color: green;}

<!style>

<head>

<body>

<а href="http://www.tvz.hr">Slu.ZЬena stranica ТVZ-a</a>

<Љоdу>

<Љtml>

V eza na stranicu ТVZ-a dok nismo kliknuli misem na link.

� Lin'kovi - Windo1vs lnternet bplorer

v х Select

Sugge>ted Sites ... � Web Slice Ga l lery ...

1,јј Linkovi • 1 ... � ... � � ... Eage ... �afety ... TQo·ls ...

Sluzbena stran ica ТVZ- a

Computer 1 Pro.tected Mode: Off

V eza na stranicu ТVZ-a kada smo kliknuli misem na link.

Str. 70 od 102 Izradio : Alen Simec, dipl. ing.

Page 71: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

linkovi - Windows Iлternel bplorer = @]

_____ ... __,__•t-__,_____, , [ �t Google р ..-] Select

Su g g ested Sites ..- Web Sl ice Gal lery т

• • т � ... � »

Sluzbena stran ica тvz- a

Done Ј Comp,uter 1 Protected Mode: Off 100% т

2. 7 .3 Pozadina

Da promjenite boju pozadine na na stranici, slijedite ove korake :

• Koristite property background-color

• Odredite value ime Ьоје ili nj ezinu heksadecimalna vrij ednost

Odredite selektor (da li se promj ena Ьој е odnosi na cij elu pozadinu ili samo na odredeno

podrucj e)

Osnovna sintaksa za deklaraciju stila је :

selector (background-color: value;)

body {background-color: Ыuе;} (ime Ьоје)

body {background-color: #OOOOFF;} (heksadecimalna vrijednost)

1 �rnl>

<head>

Str. 7 1 od 102 Izradio : Alen Simec, dipl. ing.

Page 72: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

<title>Boja pozadine</title>

<style type = "text/css ">

body {background-color: #OOOOFF;}

<!style>

<head>

<body>

< ! -- Sadrzaj stranice -->

<Љоdу>

<Љtml>

r.i Боја pozadi1ne - Windo1Ys Intemet Explor,er

Select

Su g g ested Sites ,,..

2.7.4 Fontovi

Osnove HTML, ХНТМL i CSS

= @)

»

Kako bi definirali vrstu fonta pomocu CSS font-family svoj stva trebamo slj edece:

• Odrediti selektor za stilsku deklaraciju.

• Dodati ime svoj stva (property).

• Odrediti vrij ednost svoj stva (value).

Kako bi odredili da sva zaglavlj a prve razine budu napisana fontom verdana, koristite stilsku

deklaraciju па slj ede6i naCin:

Str. 72 od 102 Izradio : Alen Simec, dipl. ing.

Page 73: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

h l {font-family : Verdana, Helvetica, sans-serif; }

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

hl {font-family: Verdana, Helvetica, sans-serif;}

<lstyle>

<head>

<body>

<hl > Naslov<lhl >

<Љоdу>

<Љtml>

r.i SЬillovi - Windows [лternel bplorer

р ..-]

» ..- E_age ..- ;!afety ..- Т .QO·ls ..- 1

Naslov

Done � Computer 1 Protected Mode: Off 100% ...

Zasebni elementi mogu biti formatirani tako da se prikazuju razliCitim fontom.

body {color: #808000; font-family: Arial, sans-serif; font-size: 85%;}

Str. 73 od 102 Izradio : Alen Simec, dipl. ing.

Page 74: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

h l {text-align: center; }

а {font-family: Courier, "Courier New", monospace;}

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #808000; /ont-family: Arial, sans-serif;font-size: 85%;}

hl {text-align: center;}

а {font-family: Courier, "Courier New ", monospace;}

<lstyle>

<head>

<body>

<hl > Naslov<lhl >

<а href= "http://www. tvz.hr">Sluzbena stranica ТVZ-a<la>

<Љоdу>

<Љtml>

" Stillovi - Windows fnterпel bplo rer

Select

5uggeЯed 5ites .,.. Ј Web 51ic:e Ga l lery .,..

= @)

јЈ ..-1

r.:i 5ti lovi ... � ... � � ... Eage ... ;!afety ... TQols ... »

Nas l ov

Sl uzbena stranica TVZ-a

1 Dопе • Computer 1 Protected Mode: Off НЈО% .,..

Str. 74 od 102 Izradio : Alen Simec, dipl. ing.

Page 75: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

Stilska deklaracij а koj а odreduj е veliCinu teksta ј е slj edeca:

selector {font-size: value}

body {color: #808000; font-family: Arial, sans-serif; font-size: 85%;}

hl {font-size: 24pt; }

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #808000; font-family: Arial, sans-serif; font-size: 1 Opt;}

hl {font-size: 35pt; }

<lstyle>

<head>

<body>

<hl > Naslov<lhl >

<p>Ostali tekst (skrenite pozornost па veliCinu teksta unutar odlomka)<lp>

<Љоdу>

<Љtml>

Str. 75 od 102 Izradio : Alen Simec, dipl. ing.

Page 76: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

r.i Sbilovi - Window� [лternel Ь:p lo rer = @)

\11/еЬ �lice Ga l lery т

" 1 т §! т � ,,.. E_age т 5afety т T.Qols ,,.. »

as lov Osta l i tekst (skrenite pozornost па ve l ic inu teksta unutar od lomka)

Done Computer 1 Protected Mode: Off 4'8 ... ... 100% ... . "

Stilska deklaracija koj a koristifont-weight svoj stvo, а Cij a vrij ednost moze biti j edna od

slj edeceg:

• bold: renderira tekst и srednj oj bold deЫj ini,

• bolder: renderira tekst deЫj i od normalnog bolda,

• lighter: renderira tekst tanj i od normalnog bolda,

• normal: mice bilo kakvo bold formatiranj e,

• cjelobrojna vrijednosti od 100 - 900 ( 100 ј е najtanj i а 900 naj deЫji) .

Stilska deklaracija koj a odreduj e deЫj inu teksta j e sljedeca:

selector {font-weight: value}

1 а {font-wcight: bold;)

1 �rnl>

<head>

Str. 76 od 102 Izradio : Alen Simec, dipl. ing.

Page 77: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

<title>Stilovi </title>

<style type = "text/css ">

body {color: Ыасk; font-family: Arial, Verdana, sans-serif; font-size : 85%;}

а {font-weight: bold;}

<lstyle>

<head>

<body>

<а href= "index.html"> Podebljani link<la>

<Љоdу>

<Љtml>

Stilovi - Windows [nternel bp lo rer

v х Select

Sugge>ted Sites ... Web Slice Ga l lery ...

= @]

Sblovi • 1 ... � ... � � ... Eage ... �afety ... TQo·ls ...

PodeЫjani l ink

Done Computer 1 Pro.tected Mode: Off НЮ% ..-

Stilska deklaracija koj a kori stifont-sQ!le svoj stvo, а Cij a vrij ednost moze biti j edna od

slj edeceg:

• italic

• oЫique

• normal

selector { font-style: value}

Str. 77 od 102 Izradio : Alen Simec, dipl. ing.

Page 78: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

р {font-style : italic;}

а {font-weight: bold;}

a: link { color: olive; text-decoration: underline; }

a:visited { color: green; text-decoration: none;}

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

Osnove HTML, ХНТМL i CSS

body {color: Ыасk; foпt-family: Arial, Verdaпa, saпs-serif; foпt-size: 85%;}

р {foпt-style: italic;}

а {foпt-weight: bold;}

a:liпk {color: olive; text-decoratioп: uпderliпe; foпt-style:italic}

a:visited {color: greeп; text-decoratioп: попе; foпt-style: oЬlique}

<lstyle>

<head>

<body>

<р> Nakoseпi tekst<lp>

<а href= "http://www. tvz.hr">Sluzbeпa straпica ТVZ-a<la>

<Љоdу>

<Љtml>

Veza na stranicu ТVZ-a dok nismo kliknuli misem na link.

Str. 78 od 102 Izradio : Alen Simec, dipl. ing.

Page 79: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

Sbillovi - Windows Iлternel Explorer

Select

Su g g ested Sites ,,.. Web Sl ice Gal lery т

,,.. E_age ,,.. 5afety ,,.. T.Qo·ls ,,.. 1 , ,,..

Nakoseni tekst

SluitJena stranica TVZ-a

Comp•uter 1 Protected Mode: Off 100% ...

V eza na stranicu ТVZ-a kada smo kliknuli misem na link.

"' Stillovi - Windows lлternel bplorer = @)

Seled:

Su g g ested Sites ,,.. Web Slice Ga l lery ...

• 1 т §Ј т � � ,,.. E_age т 5afety т T.Qo·ls ,,..

Nakoseni tekst

Sluzbena stranica ТVZ-a

Done � Computer 1 Protected Mode: Off 100% ...

Stilska deklaracija koj a koristi text-transform svoj stvo, а Cij a vrij ednost moze biti j edna od

slj edeceg:

• capitalize: prvi znak и svako rij eCi ј е veliko slovo,

• uppercase: svi znakovi и nekom dj ela teksta su velika slova,

• lowercase: sva slova teksta nekog elementa su mala slova,

»

»

Str. 79 od 102 Izradio : Alen Simec, dipl. ing.

Page 80: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

• попе: nema f ormatiranj а.

selector { text-transform: value}

р {text-transform: uppercase; }

а {font-weight: bold;}

Osnove HTML, ХНТМL i CSS

a: link { color: olive; text-decoration: underline; text-transform: capitalize }

a:visited { color: green; text-decoration: none; text-transform: lowercase }

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: Ыасk; foпt-family: Arial, Verdaпa, saпs-serif; foпt-size: 85%;}

р {text-traпsform: uppercase;}

а Uoпt-weight: bofd;}

a:liпk {color: olive; text-decoratioп: uпderliпe; text-traпsform: capitalize }

a:visited {color: greeп; text-decoratioп: попе; text-traпsform: lowercase }

<lstyle>

<head>

<body>

<p>Tekst pisaп VELIКIМ i malim slovima<lp>

<а href= "http://www. tvz.hr">Sluzbeпa straпica ТVZ-a<la>

<Љоdу>

<Љtml>

V eza na stranicu ТVZ-a dok nismo kliknuli misem na link.

Str. 80 od 102 Izradio : Alen Simec, dipl. ing.

Page 81: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

, , Stilovi - Windows [nternet bplorer = @]

�t Google

Select

Su g g ested Sites .,. Web Sl ice Ga l lery .,.

.,. E_age .,. 5afety .,. Т .QO·l s .,.

TEKST PISAN VELIKIM 1 MALIM SШVIMA

Sluibena Stranic.a ТVZ-A

Done _ Comp,uter 1 Protected Mode: Off

V eza na stranicu ТVZ-a kada smo kliknuli misem na link.

Stillovi - Windows lлternel bplo rer

v х Seled:

Suggested Sites .,. � Web Slice Ga l lery .,.

1 t�t Googie

.... 100% ...

• 1 .,. §Ј .,. � � .,. E_age .,. 5afety .,. T.Qo·ls .,.

TEKST PISAN VELIKIM 1 MALIM SLOVIMA

sluzbena stranic.a tvz-a

Done � Computer 1 Protected Mode: Off 100% ...

Stilska deklaracija koj a koristi text-decoration svoj stvo, а Cij a vrij ednost moze biti j edna od

slj edeceg:

• underline (podvucen tekst)

• overline (linij а iznad teksta)

• line-through (linij a preko teksta)

»

»

Str. 8 1 od 102 Izradio : Alen Simec, dipl. ing.

Page 82: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Ыiпk ( trepere6i tekst)

попе (bez f ormatiranj а)

Selector{ text-decoration: value; }

р {text-decoration: underline; }

а {font-weight: bold;}

a: link { color: olive; text-decoration: underline;}

a:visited { color: green; text-decoration: line-through; }

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

Osnove HTML, ХНТМL i CSS

body {color: Ыасk; foпt-family: Arial, Verdaпa, saпs-serif; foпt-size: 85%;}

р {text-decoratioп: попе;}

а {foпt-weight: bold;}

a:liпk {color: olive; text-decoratioп: uпderliпe;}

a:visited {color: greeп; text-decoratioп: liпe-through;}

<lstyle>

<head>

<body>

<р>Јеdап оЫсап tekst<lp>

<а href= "http://www. tvz.hr">Sluzbeпa straпica ТVZ-a<la>

<Љоdу>

<Љtml>

V eza na stranicu ТVZ-a dok nismo kliknuli misem na link.

Str. 82 od 102 Izradio : Alen Simec, dipl. ing.

Page 83: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

Sbillovi - Windows Iлternel Explorer

... it- Х �t G009le р ... Select

Su g g ested Sites ..-

ј r. Sti lovi

Jeda11 obita11 tekst

Sluibena stranica ТVZ-a

Done

Web Sl ice Gal lery т

'-1 т §t ... � ... E_age т 5afety т T.Qo·ls ... \ ...

Comp•uter 1 Protected Mode: Off 100% т

V eza na stranicu ТVZ-a kada smo kliknuli misem na link.

Stillovi - Windows lлternel bplorer

Jeda11 obican tekst

Slt1ibena straniea Ћ';Z а

Done

2.7.5 Visina linije odlomaka

= @)

Web Slice Ga l lery т

т � т � � ..- E_age т 5afety т T.Qo·ls ..-

� Computer 1 Protected Mode: Off 100% ...

Visina linij e odlomka j e koliCina prostora izmedu linij a и odlomku. Da bi promj enili visinu

linij е, koristimo svoj stvo line-height:

Selector {line-height: value; }

»

»

Str. 83 od 102 Izradio : Alen Simec, dipl. ing.

Page 84: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

Slj edeca pravila stiliziraju prvi odlomak и italic, uvlace taj odlomak, i povecavaju visinu linij e

da bi se pobolj sala Citlj ivost:

.quotation {font-style: italic; text-indent: l Opt; line-height: 150%;}

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;}

.quotation {font-style: italic; text-indent: 1 Opt; line-height: 150%;}

<lstyle>

<head>

<body>

<р class= "quotation ">Tekst br. 1 sa de.finiranom klasom<lp>

<р class= "quotation ">Tekst br. 2 sa de.finiranom klasom<lp>

<Љоdу>

<Љtml>

Str. 84 od 102 Izradio : Alen Simec, dipl. ing.

Page 85: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

r.i" Sbilovi - Window� [лternel Ь:p lo rer = @)

\11/еЬ �lice Ga l lery т

" 1 т §! т � ,,.. E_age т 5afety т T.Qols ,,..

Tekst br. 1 sa definiranom klasom

Tekst br. 2 sa definiranom klasom

Done Computer 1 Protected Mode: Off

2.7.6 Prostor izmedu znakova

Prostor izmedu znakova mozemo povecat ili smanj iti pomocu slj ede6ih svoj stava :

• word-spacing (u pikselima)

• letter-spacing (u pikselima)

.quotation {font-style: italic; text-indent: l Opt; letter-spacing : брх; }

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;}

. quotation {font-style: italic; text-indent: JOpt; letter-spacing: брх;}

<lstyle>

<head>

<body>

100% т

»

Str. 85 od 102 Izradio : Alen Simec, dipl. ing.

Page 86: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

<р class= "quotation ">Tekst br. 1 sa definiranom klasom<lp>

<Љоdу>

<Љtml>

,;; Stillovi - Windows [nterпel E:xplorer

Select

r.ii Sugges:ted Sites ... � Web Slice Ga l lery ...

= @)

... E_age ... ;;afety ... Т .QO·ls ... � ...

T e k s t b r . 1 s a d e f i n i r a n o m k l a s o m

Dопе � Computer 1 Protected Mode: Off 100% ...

2.7.7 Pozicioniranje, poravnavanje teksta

Poravпavaпj e odreduj e j esu li lij eva i desпa straпa tekstualпog Ыоkа poravпate ро lij evoj ,

desпoj , lij evoj i desпoj margiпi ili ceпtriraпa и odпosu па Ыоk.

Poravпavaпj e se defiпira pomocu text-aligп svoj stva. Stilska deklaracij a j e slj edeca:

selector { text-aligп : value; }

Vrij edпost text-aligп svoj stva mora biti ј еdпа od slj ede6ih kljucпih rij eCi :

• left: poravпava tekst а lij evo

• right: poravпava tekst па desпo

• center: poravпava tekst и srediпu

• justify: poravпava tekst i s lij eve i desпe straпe

Slj ede6i kod defiпira poravпavaпj e za zaglavlj e prvog stupпj a i prvi odlomak.

»

Str. 86 od 102 Izradio : Alen Simec, dipl. ing.

Page 87: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

h l {color: teal; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: 800; font-size :

24pt; line-height: 30 pt; text-align: center}

.quotation {font-style: italic; text-indent: l Opt; text-align: justify; }

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #808000; foпt-family: Verdaпa, saпs-serif; foпt-size: 85%;}

hl {color: teal; foпt-family: "Trebиchet MS", Arial, Helvetica, saпs-serif; foпt-weight: 800;

foпt-size: 24pt; liпe-height: 30 pt; text-aligп: ceпter}

. .jиstifY {foпt-style: italic; text-iпdeпt: JOpt; text-aligп: jиstifY;}

. right {foпt-style: italic; text-iпdeпt: JOpt; text-aligп: right;}

<lstyle>

<head>

<body>

<hl >Lorem ipsиm<lhl >

<р class= "jиstifY ">Lorem ipsиm dolor sit amet, coпsectetиr adipisciпg elit. СиrаЫtиr egestas

molestie lorem sit amet иllamcorper. Dопес id пisl ас пиllа ЈаисiЬиs pelleпtesqиe. Fиsce епiт аrси,

coпvallis iп ЫЬепdит еи, sollicitиdiп vitae odio. Cras malesиada апtе поп пиllа sodales id eleifeпd

tellиs dapiЬиs. Etiam ornare lectиs sit amet dиi Јеrтепtит а posиere ipsиm tiпcidипt. Sed поп est пisi.

Iпteger feиgiat vehicиla ligиla, Јеrтепtит coпseqиat orci molestie id. Cras пес lacиs et lorem sodales

friпgilla. СиrаЫtиr at leo velit, ас ftrmeпtиm lacиs. Nam et tиrpis qиis elit mollis иltricies eget qиis

пiЬh. Dопес pharetra tellиs adipisciпg пиllа sиscipit пес porta lectиs pharetra. </р>

<р class="right">Class apteпt taciti sociosqи ad litora torqиeпt per сопиЫа пostra, per iпceptos

himeпaeos. Cras апtе felis, vиlpиtate поп lobortis id, vehicиla sed аиgие. Maиris ЈаисiЬиs jиsto аrси.

Maиris сопgие vиlpиtate ЈаисiЬиs. Nиlla sed odio пisi. МоrЫ semper vestiЬиlиm ipsиm vel rhoпcиs.

Sиspeпdisse at ftlis аиgие, еи cиrsиs risиs. Nиlla асситsап lиctиs molestie. </р>

<Љоdу>

<Љtml>

Str. 87 od 102 Izradio : Alen Simec, dipl. ing.

Page 88: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

Stillovi - Window� [nternel E:xplorer

Select ,.. -"t .Х 1�1 Gщle

r.ii 5ugges:ted 51tes ..- ' \IVeb 51ice Ga l lery ,,.

r;o Stilovi ... E_age ... ;!afety ... Т Qols ...

Lorem ·psum Lorem ipsиm doJor sit amet, coпsectetиr adipisciпg e!it. Cиrabitиr egestas m oJestie /orem

sit amet uJJamcorper. Dопес id пisl а с пиЈЈа faиcibиs pelleпtesqиe. Fиsce епiт аrси, conva//Js iп bibendиm еи, soШcitиdiп vita e odio. Cras malesиada ante поп пиllа sodaJes id eleifeпd tellиs dapibиs. Etiam ornare lectиs sit amet dиi fermeпtиm а posиere ipsиm tiпcidипt. Sed поп est пisi. Iпteger feugia t vehicи!a ligula, fermeпtиm coпseqиat orci molestie id. Cras пес lacиs et lorem soda/es friпgilla . Cиrabitиr at Јео velit, ас fermeпtиm Јасиs. Nam et turp1s qшs efit mollis иJtricies eget quis nibh. Dопес pharetra te/Jиs adipisciпg пи/Ја sиscipit пес porta lectus pharetгa.

Done

Class aptent ta citi sociosqu ad !itora torqиen t рег сопиЬiа пostra, рег iпceptos himeпaeos. Сгаs апtе felis, vuJputate поп lobortis id, vehicиla sed аиgие. Mauгis fa ucibиs justo агси.

Маигis сопgие vиlpиtate faиcibus. NиЈ/а sed odio пisi. МогЬi semper vestibulиm ipsиm veJ rhoпcиs. Sиspeпdisse at felis аиgие, еи сигsиs гisus. Nи/Ја асситsап Јисtиs molestie.

Comp·uter 1 Protected Mode: Off 100% ...

2.7.8 Odredivanj e rubnih linija taЫica

»

. "

Za razliku od HTML koda, CSS nam omogucava da definiramo stilove rubnih linij a za svaku

liniju pojedinacno. Definiranj e stila omogucava nam border-style svoj stvo.

Selector {border-style : value}

Border-style moze biti j edan od slj ede6ih:

• Dotted

• Dashed

• Solid

Str. 88 od 102 Izradio : Alen Simec, dipl. ing.

Page 89: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

• DouЫe

• Groove

• Ridge

• Inset

• Outset

th {border-style: dashed;}

td {border-style : groove;}

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #094cal; font-family: Verdana, sans-serif; font-size: 12pt;}

th {border-style: dashed; color: green}

td {border-style: groove;}

<lstyle>

<head>

<body>

<tаЫе>

<tr>

<th>Ime<lth>

<th> Prezime<lth>

<th>Godina rodenja<lth>

</tr>

<tr>

<td> Pero<ltd>

<td> Peric<ltd>

<td> 1989</td>

<ltr>

</tаЫе>

<Љоdу>

Str. 89 od 102 Izradio : Alen Simec, dipl. ing.

Page 90: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

<Љtml>

r. Stillovi - Winclows [nterпel bplorer

u х

Sugge>ted Sites ..,. Web Slice Ga l l ery ..,.

) l�t Google

= @)

јЈ .... ј

r..i '>ti lovi � ..,. g � ..,. E_age ..,. �afety ..,. TQo·ls ..,. »

Ime Prezime Godina rodenja

1 Perol I Peric 1 1_19_8_9 ___ __.

Dопе i Computer 1 Protected Mode: Off

Sirina linij e odreduj e se sa svoj stvom border-width.

Selector {border-width: value; }

Vrij ednost atriЬuta moze biti :

• Thin, medium, thick

• Apsolutna ili relativna dulj ina (u рх ili postocima)

th {border- width: thick; border-style: solid; }

td {border- width: lpx; border-style : solid; }

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #094cal; font-family: Verdana, sans-serif; font-size: 12pt;}

100% ..,.

Str. 90 od 102 Izradio : Alen Simec, dipl. ing.

Page 91: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

th { border-width: thick; border-style:solid; }

td { border-width: Јрх; border-style:solid; }

<lstyle>

<head>

<body>

<tаЫе>

<tr>

<th>Ime<lth>

<th> Prezime<lth>

<th>Godina rodenja<lth>

<ltr>

<tr>

<td> Pero<ltd>

<td> Peric<ltd>

<td> 1989</td>

<ltr>

</tаЫе>

<Љоdу>

<Љtml>

f.i Stillovi - Winclo1vs [nterпel Explorer

Select

Sugge>tecl Sites ..,. Web Slice Ga l lery ..,.

јЈ ..-1

" I ..,. � ..,. � � ..,. E_age ..,. �afety ..,. TQols ..,. ')ti lGVi »

Ime Prezime Godina rodenja

Pero Peri c 1989

Dопе • Computer 1 PrGtected MGde: Off 100% ..,.

Воја linij e odreduj e se sa svoj stvom border-color.

Str. 9 1 od 102 Izradio : Alen Simec, dipl. ing.

Page 92: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

Selector{border-color: value; }

th {border-color: #22а1 09; border- width: thick; border-style: solid; }

td { border-color: red; border- width: lpx; border-style: solid; }

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #094cal; font-family: Verdana, sans-serif; font-size: 12pt;}

th { border-color: #22al 09; border- width: thick; border-style:solid; }

td { border-color: red; border- width: Јрх; border-style:solid; }

<lstyle>

<head>

<body>

<tаЫе>

<tr>

<th>Ime<lth>

<th> Prezime<lth>

<th>Godina rodenja<lth>

<ltr>

<tr>

<td> Pero<ltd>

<td> Peric<ltd>

<td> 1989</td>

<ltr>

</tаЫе>

<Љоdу>

<Љtml>

Str. 92 od 102 Izradio : Alen Simec, dipl. ing.

Page 93: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

lli,,. Stillovi - Winclows [лternel Explorer = @)

Web '>lice Ga l lery .,.

'>ti lovi � .,. � � ..,. E_age ..,. �afety ..,. TQols ..,.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

: !��== l?[�.�i��==�.���I"!�. ���.����= IPerollPeric 111989 1

Done • Computer 1 Protected Mode: Off 100% ..,.

Vrij ednost border-color moramo definirati koriste6i ime Ьој е ili nj ene heksadecimalne

vrij ednosti 5 .

Ve6ina intemet preglednika odredi sirinu celija ро sadrzaju koj i se и celij i koristi, no postoj i

ogranicenj e i za linij e i za tekst:

Slike moraju stati unutar prozora intemet preglednika. Ako celij a sadгZi puno teksta, опа se

prosiruj e koliko moze do prvog prekida linije ili do kraj a teksta. Zato nam taЫica moze

izgledati vrlo nepregledno. Ako ne odredimo sirinu i visinu celij e, intemet preglednik ih

odreduj e sam na osnovu onoga sto se и nj ima nalazi . Ako taЫicu koristite za formatiranj e,

oЫikovanj e svoj e stranice, preporucamo da podesite sirinu za taЫicu i poj edine celij e.

Stilska deklaracij a koj a se koristi za definiranj e sirine taЫice,retka ili celij e је width.

Selector { width: value; }

1 tаЫс { width: 500рх; )

5 Pogledajte u prilog taЫicu sa heksadecimalnim vrijednostima

»

" '

Str. 93 od 102 Izradio : Alen Simec, dipl. ing.

Page 94: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

Osnove HTML, ХНТМL i CSS

body {color: #094cal; font-family: Verdana, sans-serif; font-size: 12pt;}

tаЫе { width: 500рх; border: Јрх solid Ыасk;}

<lstyle>

<head>

<body>

<tаЫе border="l ">

<tr>

<th>Ime<lth>

<th> Prezime<lth>

<th>Godina rodenja<lth>

<ltr>

<tr>

<td> Pero<ltd>

<td> Peric<ltd>

<td> 1989</td>

<ltr>

</tаЫе>

<Љоdу>

<Љtml>

Str. 94 od 102 Izradio : Alen Simec, dipl. ing.

Page 95: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

°' Stilovi - Windows [nternel E:xplorer

Select

� Sugges:ted Sites ..,. � Web Slice Ga l lery ..,.

» � ..,. � � ..,. E_age ..,. �afety ..,. TQols ..,. '>ti lovi

1 Ime P·rezime Godina rodenja IPero IPer i c 11989

Dопе • Computer 1 Protected Mode: Off .#7,о, ..,. " 100% ..,.

Vrij ednost width svoj stva mora biti ili "auto", sto omogucuj e da browser sam podesi potrebnu

sirinu, ili mora biti neka apsolutna (vrij ednost и pixelima) ili relativna (vrij ednost и

postocima) vrij ednost.

Za razmak izmedu celij a mozemo koristiti dvij e vrij ednosti kako bi definirali prazan prostor.

Kada radimo razmak izmedu celij a koristimo padding svoj stvo:

Selector {padding: value; }

1 th { padding : 20рх; )

<html>

<head>

<title>Stilovi </title>

<style type = "text/css ">

body {color: #094cal; font-family: Verdana, sans-serif; font-size: 12pt;}

th { padding: 20рх; border: Јрх solid Ыасk;}

<lstyle>

Str. 95 od 102 Izradio : Alen Simec, dipl. ing.

Page 96: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

<head>

<body>

<tаЫе border="l ">

<tr>

<th>Ime<lth>

<th> Prezime</th>

<th>Godina rodenja<lth>

<ltr>

<tr>

<td> Pero</td>

<td> Peric<ltd>

<td> 1989</td>

<ltr>

</tаЫе>

<Љоdу>

<Љtml>

"' Stillovi - Windows [nterпel E:xplorer

Select

--"'�*t [ ] l�t Google

� Sugges:ted Sites "' � Web Slice Ga l lery .,.

СЈ @)

Sti lovi � ..,. � ..,. � � "' E_age ..,. �afety ..,. TQo·IS "'

ВЕ Godina rodenja

IPero IPer i c 11989

Dопе Computer 1 Protected Mode: Off 100% ...

Sve stil ske vrij ednosti mozete pogledati и prilogu6 .

6 Prilog - CSS - stilske vrijednosti

»

Str. 96 od 102 Izradio : Alen Simec, dipl. ing.

Page 97: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

2.8 Korisni alati za CSS

CSS dokumenti mogu se napisati koriste6i jednostavni tekstualni editor poput notepada. No

danas postoj i puno programa koj i sluze bas za pisanj e CS S-a. Koristenj e Notepada najbolj e се

vas nauCiti kako pravilno pisati CSS kod.

Macromedia Dreamweaver ima j ednostavno sucelj e za izradu CSS stilova. Stilovi su vec

definirani od strane programa, а vi samo morate odrediti nj ihovu vrij ednost odabirom iz

padaju6ih menij a. Umetanje CSS klasa је takoder vrlo j ednostavno i izvodi se s dva-tri klika

misem.

Nedostatak Dreamweavera (kao i svih ostalih vizualnih web editora) j est taj sto CSS kod nece

biti tako Citlj iv kao da ste ga rucno napisali и Notepadu.

Postoj i nekoliko alata koj i su namij enj eni iskljuCivo pi sanju CSS-a. Jedan od bolj ih j e

TopStyle. TopStyle ima sve napredne opcije koj e imaju moderni editori i jos puno vise.

StyleWorx je sasvim zadovolj avaju6i za pocetnike, oznacava sintaksu, ima podrsku za CSSl i

CSS2 stilove.

2.9 Korisni linkovi za CSS

Slu.ZЬena CSSl specifikacij a nalazi se na stranici WЗС7 organizacij e koj a j e izradila CSS i

standardizirala.

Sve potrebne informacij e mozete potraziti na stranici W3 Schools8 skoli CS S-a. Na ovoj

stranici cete na6i i CSS2 specifikaciju и koj oj su primj eri novih, do sad malo koristenih

stilova.

Ako zelite biti sigurni и tocno napisani kod CSS-a provj erite ga na stranici9.

ZADACI

1 . Otvorite tekstualni editor i napravite stilski obrazac za dokument zad l .htm. Odredite

boju pozadine internet stranice (bij ela), veliCinu fonta (1 2рх), format fonta (Arial,

7 http://www.wЗ .org!ГR/REC-CS S l 8 http://www.w3schools.com/css/ 9 http://jigsaw.w3.org/css-validator/

Str. 97 od 102 Izradio : Alen Simec, dipl. ing.

Page 98: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

Verdana, Helvetica, sans-serif), boju fonta (crna), udalj enost teksta od ruba stranice

(Зрх), poravnanj e teksta (poravnat s lij evom stranom). Spremite stilski obrazac kao

style l .css. Primj enite vas eksterni stilski obrazac style l .css sa internet stranicom

zad l .htm.

2 . Otvorite dokument zad2.htm i и dokumentu primj enite interni stil ski obrazac. U

internom stil skom obrascu odredite za tij elo dokumenta (body) pozadinu internet

stranice (bij ela), veliCinu fonta (12рх), format fonta (Arial, Verdana, Helvetica, sans­

serif), boju fonta (crna), udalj enost teksta od ruba stranice (Зрх), poravnanj e teksta

(poravnat s lij evom stranom). Odredite izgled odlomka (paragraph) tako da napravite

klasu i primj enite veliCinu fonta (1 1 рх), Ьој а fonta (siva).

3 . Otvorite dokument zad4.htm i и dokumentu primj enite interni stil ski obrazac. U

internom stil skom obrascu odredite za tij elo dokumenta (body) pozadinu internet

stranice (ро vasem izboru), veliCinu fonta (1 00%), format fonta (Arial, Verdana,

Helvetica, sans-serif), boju fonta (crna), udalj enost teksta od ruba stranice (Зрх),

poravnanje teksta (poravnat s lij evom i desnom stranom). Odredite klasu za naslov

(heading) i postavite veliCinu fonta ( 13рх), boju fonta (plava), udalj enost gornj eg

dij ela naslova (20рх), udalj enost donj eg dij ela naslova (1 0рх), udalj enost od lij eve

margine stranice (5рх). Odredite izgled odlomka (paragraph) tako da napravite klasu i

primj enite veliCinu fonta (1 1 рх), Ьоја fonta (siva), udalj enost gornj eg dij ela odlomka

( 1 0рх), donj eg dij ela odlomka ( 10 рх), razmak izmedu linij a (22рх) . Za horizontalnu

liniju odredite boju (plava) i nj enu deЫjinu (2рх). Razmak prij e i poslij e horizontalne

linij e (1 0рх). Lista neka bude и boji ро vasem izboru sa razliCitom veliCinom fonta od

ostatka teksta.

4 . Otvorite dokument taЫica.htm i и dokumentu primj enite interni stil ski obrazac.

Odredite rub taЫice (1 рх), boju ruba taЫice (siva), sirinu taЫice ( 400 рх). U prvom

retku taЫice gdje ste napisali naslov napravite pozadinu celij e (#a4ccff), veliCina fonta

( 14рх), razmak iznad i ispod naslova (Зрх), tekst j e poravnat и sredini celij e. Ostatak

taЫice uredite ро vasem izboru.

5 . Otvorite dokument zadб.htm i и dokumentu primj enite interni stilski obrazac.

Preuzmite formatiranj e stilova iz zadatka 3 za tij elo dokumenta, naslove, odlomke,

Str. 98 od 102 Izradio : Alen Simec, dipl. ing.

Page 99: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

liste. Uredite slike tako da imaju udalj enost od teksta sa svake strane Зрх i da se tekst

pozicionira oko slike. Odredite boju fonta i veliCinu fonta za veze (hyperlink), te

posebno uredite neaktivnu vezu, vezu kada predemo misem preko nj e i vezu koj a j e

aktivna. Neaktivna veza nece imati podcrtanu rij ec.

Str. 99 od 102 Izradio : Alen Simec, dipl. ing.

Page 100: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osпove HTML, ХНТМL i CSS

3 Literatura

1 . У our visual Ыuepriпt for buildiпg Web sites with ХМL, CSS, ХНТМL, XSLT; Rob

Huddlestoп; Wiley PuЬlishiпg Iпс. ; 2007.

2 . HTML, ХНТМL & CSS for Dummies 6th editioп; Ed Tittel апd JeffNoЫe; Wiley

PuЬlishiпg Iпс. ; 2008.

3 . HTML & ХНТМL: The Defiпitive Guide; Chuck Musciaпo апd Bill Кеппеdу;

O'Reilly; 2009.

4. HTML & CSS : The Complete Refereпce, Fifth Editioп; Thomas А. Powell, McGraw­

Hill Osbome Media; 20 10 .

5 . Head First НТМL with CSS & ХНТМL; Eric Freemaп, Elisabeth Freemaп; 2005.

6 . HTML, ХНТМL апd CSS All-Iп-Oпe For Dummies; Aпdrew Harris; 20 10 .

7 . BASIC НТМL - А STEP-BY-STEP Guide оп How to Creatiпg Your First Website

from Begiпiпg to Епd ! ;Dап Thompsoп; 20 10 .

8 . Leamiпg Web Desigп: А Begiппer's Guide to (Х)НТМL, StyleSheets, апd Web

Graphics; Jeппifer Niederst Robbiпs; Ааrоп Gustafsoп; 2007.

9 . HTML, ХНТМL, апd CSS : Visual QuickStart Guide, MobiPocket; Elizabeth Castro;

2006.

10 . Build Your Оwп Web Site The Right Way Usiпg НТМL & CSS, 2пd Editioп; Iап

Lloyd; 2008.

1 1 . HTML, ХНТМL, апd CSS: Your visual Ыuepriпt for desigпiпg effective Web pages;

Rob Huddlestoп; 2008.

12 . Sams Teach Yourself Web PuЬlishiпg with НТМL апd CSS iп Опе Hour а Day:

Iпcludes New НТМL5 Coverage (6th Editioп); Laura Lemay; Rafe ColЬum; 20 10 .

13 . World Wide Web Coпsortium (WЗС) URL: http ://www .wЗ .org

Str. 1 00 od 102 Izradio : Alen Simec, dipl. ing.

Page 101: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove НТМL, ХНТМL i CSS

14 . WЗ Schools Online Web Tutorials, 1 999. URL: http ://www.wЗ schools . com

1 5 . The WЗС Markup Validation Service, 1 994. URL: http ://validator.wЗ .org

16 . HTML Codes - Special Characters - ASCII ТаЫе, URL:

http ://webdesign. about.com/library Љ1 _ htmlcodes.htm

17 . Lorem Ipsum - All the facts - Lipsum generator, URL: http ://www.lipsum.com

18 . PageResource.com- Ьу The Web Design Resource, CSS Properties List, URL:

http ://www.pageresource.com/dhtml/cssprops.htm

Str. 1 0 1 od 102 Izradio : Alen Simec, dipl. ing.

Page 102: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Osnove HTML, ХНТМL i CSS

4 Prilog

Str. 1 02 od 102 Izradio : Alen Simec, dipl. ing.

Page 103: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Prilog: ТаЫiса ASCII znakova

Character Friendly

Numerical Code Нех Code Description Code

А А &#65; &#х4 1 ; Capital А

а а &#97; &#х6 1 ; Lowercase А

А &Agrave; &# 192; &#хСО; Capital A-grave

а &agrave; &#224; &#хЕО; Lowercase A-grave

А &Aacute; &# 193; &#xC l ; Capital A-acute

а &aacute; &#225; &#xEl ; Lowercase A-acute

А &Acirc; &# 194; &#хС2; Capital A-circumflex

а &acirc; &#226; &#хЕ2; Lowercase A-circumflex

А &Atilde; &# 195; &#хС3; Capital A-tilde

а &atilde; &#227; &#хЕЗ; Lowercase A-tilde

А &Auml; &# 196; &#хС4; Capital A-umlaut

а &auml; &#228; &#хЕ4; Lowercase A-umlaut

А &Aring; &# 197; &#хС5; Capital A-ring

а &aring; &#229; &#хЕ5; Lowercase A-umlaut

А &#256; &#x lOO; Capital A-macron

а &#257; &#x l O l ; Lowercase A-macron

А &#258; &#х102; Capital A-breve

а &#259; &#х103; Lowercase A-breve

i\ &#260; &#х104; Capital A-ogonek

q, &#26 1 ; &#х105; Lowercase A-ogonek

А &#478; &#xl DE; Capital A-diaeresis and macron

а &#479; &#xl DF; Lowercase A-diaeresis and macron

А &#506; &#xl FA; Capital A-acute ring

! &#507; &#xl FB; Lowercase A-acute ring

ЈЕ &AElig; &# 198; &#хС6; Capital АЕ Ligature

а: &aelig; &#230; &#хЕ6; Lowercase АЕ Ligature

ЈЕ: &#508; &#xl FC; Capital АЕ Ligature-acute

а: &#509; &#xl FD; Lowercase АЕ Ligature-acute

в в &#66; &#х42; Capital В

ь ь &#98; &#х62; Lowercase В

в &#7682; &#х1ЕО2; Capital B-dot

Page 104: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

ь &#7683; &#х1ЕО3 ; Lowercase B-dot

с с &#67; &#х43; Capital С

с с &#99; &#х63; Lowercase С

с &#262; &#х106; Capital C-acute

6 &#263; &#х107; Lowercase C-acute

<;: &Ccedil; &# 199; &#хС7; Capital C-cedilla

9 &ccedil; &#23 1 ; &#хЕ7; Lowercase C-cedilla

с &#268; &#x lOC; Capital C-hachek

с &#269; &#xl OD; Lowercase C-hachek

с &#264; &#х108; Capital C-circumflex

с &#265; &#х109; Lowercase C-circumflex

с &#266; &#xl OA; Capital C-dot

с &#267; &#xl OB; Lowercase C-dot

D D &#68; &#х44; Capital D

d d &# 100; &#х64; Lowercase D

џ &#7696; &#x lE lO; Capital D-cedilla

q &#7697; &#x lE l 1 ; Lowercase D-cedilla

6 &#270; &#xl OE; Capital D-hachek

d' &#27 1 ; &#xl OF; Lowercase D-hachek

D &#7690; &#xl EOA; Capital D-dot

d &#769 1 ; &#xl EOB; Lowercase D-dot

f) &#272; &#x l l O; Capital D-stroke

d &#273; &#xl 1 1 ; Lowercase D-stroke

f) &ЕТН; &#208; &#xDO; Capital Eth (lcelandic)

о &eth; &#240; &#xFO; Lowercase Eth (lcelandic)

DZ or Dz &#497; or &498; &#xlF l ; or

Capital DZ Ligature &#xl F2;

dz &#499; &#xlF3 ; Lowercase DZ Ligature

DZ or D.Z &#452; or &#х1С4; or

Capital DZ-hachek &#453 ; &#х1С5;

dz &#454; &#х1С6; Lowercase DZ-hachek

Е Е &#69; &#х45; Capital Е

е е &# 10 1 ; &#х65; Lowercase Е

Е: &Egrave; &#200; &#хС8; Capital E-grave

е &egrave; &#232; &#хЕ8; Lowercase E-grave

Page 105: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Е: &Eacute; &#20 1 ; &#хС9; Capital E-acute

е &eacute; &#233; &#хЕ9; Lowercase E-acute

Е &#282; &#x l lA; Capital E-hachek

е &#283; &#x l lВ ; Lowercase E-hachek

Е &Ecirc; &#202; &#хСА; Capital E-circumflex

е &ecirc; &#234; &#хЕА; Lowercase E-circumflex

Ё &Euml; &#203; &#хСВ; Capital E-umlaut

ё &euml; &#235; &#хЕВ; Lowercase E-umlaut

Е &#274; &#х1 12; Capital E-macron

е &#275; &#x l l З ; Lowercase E-macron

Е &#276; &#xl 14; Capital E-breve

е &#277; &#х1 15 ; Lowercase E-breve

F; &#280; &#х1 18 ; Capital E-ogonek

у &#28 1 ; &#х1 19; Lowercase E-ogonek

Е &#278; &#х1 16; Capital E-dot

е &#279; &#х1 17; Lowercase E-dot

3 &#439; &#х1В7; Capital Ezh

3 &#658; &#х292; Lowercase Ezh

3 &#494; &#xl EE; Capital Ezh-hachek

3 &#495 ; &#xl EF; Lowercase Ezh-hachek

F F &#70; &#х46; Capital F

f f &# 102; &#х66; Lowercase F

F &#77 10; &#xlEl E; Capital F -dot

f &#77 1 1 ; &#xlElF; Lowercase F -dot

f &#402; &#х192; Lowercase F-hook

ff &#64256; &#xFBOO; Lowercase FF Ligature

fi &#64257; &#xFBO l ; Lowercase FI Ligature

fl &#64258; &#xFB02; Lowercase FL Ligature

ffi &#64259; &#xFB03; Lowercase FFI Ligature

ffl &#64260; &#xFB04; Lowercase FFL Ligature

Гt &#6426 1 ; &#xFB05; Lowercase FT Ligature

G G &#7 1 ; &#х47; Capital G

g g &# 103; &#х67; Lowercase G

G &#500; &#xl F4; Capital G-acute

Page 106: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

g &#501 ; &#xlF5 ; Lowercase G-acute

G &#290; &#х122; Capital G-cedilla

g &#29 1 ; &#х123; Lowercase G-cedilla

б &#486; &#х1Е6; Capital G-hachek

g &#487; &#х1Е7; Lowercase G-hachek

G &#284; &#x l l C; Capital G-circumflex

g &#285; &#x l lD; Lowercase G-circumflex

б &#286; &#x l l E; Capital G-breve

g &#287; &#x l lF ; Lowercase G-breve

G &#288; &#х120; Capital G-dot

g &#289; &#х12 1 ; Lowercase G-dot

G &#484; &#х1Е4; Capital G-stroke

g &#485; &#х1Е5; Lowercase G-stroke

н н &#72; &#х48; Capital Н

h h &# 104; &#х68; Lowercase Н

н &#292; &#х124; Capital H-circumflex

h &#293; &#х125; Lowercase H-circumflex

н &#294; &#х126; Capital H-stroke

ћ &#295; &#х127; Lowercase H-stroke

1 1 &#73; &#х49; Capital 1

i i &# 105; &#х69; Lowercase 1

i &lgrave; &#204; &#хСС; Capital 1-grave

i &igrave; &#236; &#хЕС; Lowercase 1-grave

i &lacute; &#205; &#xCD; Capital 1-acute

i &iacute; &#237; &#xED; Lowercase 1-acute

f &lcirc; &#206; &#хСЕ; Capital 1-circumflex

i &icirc; &#238; &#хЕЕ; Lowercase 1-circumflex

1 &#296; &#х128; Capital 1-tilde

1 &#297; &#х129; Lowercase 1-tilde

r &luml; &#207; &#xCF; Capital 1-umlaut

1 &iuml; &#239; &#xEF; Lowercase 1-umlaut

r &#298; &#х12А; Capital 1-macron

I &#299; &#х12В; Lowercase 1-macron

1 &#300; &#х12С; Capital 1-breve

Page 107: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

i &#301 ; &#xl 2D; Lowercase 1-breve

i &#302; &#х12Е; Capital 1-ogonek

! &#303; &#xl 2F; Lowercase 1-ogonek

i &#304; &#хl ЗО; Capital 1-dot

1 &#305; &#х13 1 ; Lowercase 1-dotless

1Ј &#306; &#х132; Capital 1Ј Ligature

lJ &#307; &#х133 ; Lowercase 1Ј Ligature

Ј Ј &#74; &#х4А; Capital Ј

Ј Ј &# 106; &#х6А; Lowercase Ј

ј &#308; &#х134; Capital J-circumflex

Ј &#309; &#х135 ; Lowercase J-circumflex

к к &#75; &#х4В; Capital К

k k &# 107; &#х6В; Lowercase К

к &#7728; &#х1Е30; Capital K-acute

k &#7729; &#х1Е3 1 ; Lowercase K-acute

!). &#3 10; &#х136; Capital K-cedilla

!,<: &#3 1 1 ; &#х137; Lowercase K-cedilla

к &#488; &#х1Е8; Capital K-hachek

k &#489; &#х1Е9; Lowercase K-hachek

к &#3 12; &#х138 ; Small Capital К

L L &#76; &#х4С; Capital L

1 1 &# 108; &#х6С; Lowercase L

L &#3 13 ; &#х139; Capital L-acute

i &#3 14; &#хl ЗА; Lowercase L-acute

Ј,, &#3 15 ; &#х lЗВ; Capital L-cedilla

1 &#3 16; &#хl ЗС; Lowercase L-cedilla

� &#3 17; &#x lЗD; Capital L-hachek

1' &#3 18 ; &#хl ЗЕ; Lowercase L-hachek

L &#3 19; &#x lЗF; Capital L-middle dot

Ј &#320; &#х140; Lowercase L-middle dot

L &#32 1 ; &#х14 1 ; Capital L-stroke

l &#322; &#х142; Lowercase L-stroke

LJ or Lj &#455; or &#х1С7; or

Capital LJ Ligature &#456; &#х1С8;

lj &#457; &#х1С9; Lowercase LJ Ligature

Page 108: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

м м &#77; &#x4D; Capital М

m m &# 109; &#x6D; Lowercase М

м &#7744; &#х1Е40; Capital M-dot

ril &#7745; &#х1Е4 1 ; Lowercase M-dot

N N &#78; &#х4Е; Capital N

n n &# 1 10; &#х6Е; Lowercase N

N &#323; &#х143; Capital N-acute

п &#324; &#х144; Lowercase N-acute

� &#325; &#х145; Capital N-cedilla

џ &#326; &#х146; Lowercase N-cedilla

N &#327; &#х147; Capital N-hachek

ii &#328; &#х148; Lowercase N-hachek

N &Ntilde; &#209; &#xD l ; Capital N-tilde

fi &ntilde; &#24 1 ; &#xF l ; Lowercase N-tilde

'n &#329; &#х149; Lowercase N-apostrophe (before)

D &#330; &#х14А; Capital Eng

1Ј &#33 1 ; &#х14В; Lowercase Eng

NJ or Nj &#458; or &#xl CA; or

Capital NJ Ligature &#459; &#xl CB;

llJ &#460; &#xl CC; Lowercase NJ Ligature

о о &#79; &#x4F; Capital О

о о &# 1 1 1 ; &#x6F; Lowercase О

6 &Ograve; &#2 10; &#xD2; Capital 0-grave

6 &ograve; &#242; &#xF2; Lowercase 0-grave

6 &Oacute; &#2 1 1 ; &#xD3; Capital 0-acute

6 &oacute; &#243; &#xF3; Lowercase 0-acute

6 &Ocirc; &#2 12; &#xD4; Capital 0-circumflex

о &ocirc; &#244; &#xF4; Lowercase 0-circumflex

6 &Otilde; &#2 13 ; &#xD5; Capital 0-tilde

б &otilde; &#245; &#xF5; Lowercase 0-tilde

о &Ouml; &#2 14; &#xD6; Capital 0-umlaut

б &ouml; &#246; &#xF6; Lowercase 0-umlaut

о &#332; &#х14С; Capital 0-macron

6 &#333; &#xl 4D; Lowercase 0-macron

Page 109: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

6 &#334; &#х14Е; Capital 0-breve

б &#335 ; &#xl 4F; Lowercase 0-breve

0 &Oslash; &#2 16; &#xD8; Capital 0-slash

0 &oslash; &#248; &#xF8; Lowercase 0-slash

6 &#336; &#х150; Capital 0-douЫe acute

б &#337; &#х15 1 ; Lowercase 0-douЫe acute

0 &#5 10; &#xl FE; Capital 0-acute slash

0 &#5 1 1 ; &#xl FF; Lowercase 0-acute slash

(Е &OElig; &#338 ; &#х152; Capital ОЕ Ligature

се &oelig; &#339; &#х153 ; Lowercase ОЕ Ligature

р р &#80; &#х50; Capital Р

р р &# 1 12; &#х70; Lowercase Р

i> &#7766; &#х1Е56; Capital P-dot

р &#7767; &#х1Е57; Lowercase P-dot

Q Q &#8 1 ; &#х5 1 ; Capital Q

q q &# 1 1 3; &#х7 1 ; Lowercase Q

R R &#82; &#х52; Capital R

r r &# 1 14; &#х72; Lowercase R

R &#340; &#х154; Capital R-acute

i &#34 1 ; &#х155 ; Lowercase R-acute

� &#342; &#х156; Capital R-cedilla

r &#343; &#х157; Lowercase R-cedilla

R &#344; &#х158 ; Capital R-hachek

г &#345; &#х159; Lowercase R-hachek

r &#636; &#х27С; Lowercase R-Long leg

s s &#83; &#х53 ; Capital S

s s &# 1 1 5 ; &#х73; Lowercase S

s &#346; &#х15А; Capital S-acute

s &#347; &#х15В; Lowercase S-acute

� &#350; &#х1 5Е; Capital S-cedilla

� &#35 1 ; &#x l5F; Lowercase S-cedilla

s &#352; &#х160; Capital S-hachek

s &#353 ; &#х16 1 ; Lowercase S-hachek

s &#348; &#х15С; Capital S-circumflex

Page 110: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

§ &#349; &#x l5D; Lowercase S-circumflex

s &#7776; &#х1Е60; Capital S-dot

s &#7777; &#х1Е6 1 ; Lowercase S-dot

[ &#383; &#xl 7F; Lowercase S-long

fi &szlig; &#223; &#xDF; Lowercase SZ Ligature

т т &#84; &#х54; Capital Т

t t &# 1 16; &#х74; Lowercase Т

т &#354; &#х162; Capital Т -cedilla

t &#355 ; &#х163; Lowercase Т -cedilla

t &#356; &#х164; Capital Т -hachek

t' &#357; &#х165; Lowercase Т -hachek

t &#7786; &#х1Е6А; Capital Т -dot

t &#7787; &#х1Е6В; Lowercase Т -dot

'f &#358 ; &#х166; Capital Т -stroke

t &#359; &#х167; Lowercase Т -stroke

1> &THORN; &#222; &#xDE; Capital Thom

р &thom; &#254; &#xFE; Lowercase Thom

u u &#85; &#х55; Capital U

и и &# 1 1 7; &#х75; Lowercase U

u &Ugrave; &#2 17; &#xD9; Capital U-grave

и &ugrave; &#249; &#xF9; Lowercase U-grave

(Ј &Uacute; &#2 18 ; &#xDA; Capital U-acute

и &uacute; &#250; &#xFA; Lowercase U-acute

о &Ucirc; &#2 19; &#xDB; Capital U-circumflex

и &ucirc; &#25 1 ; &#xFB; Lowercase U-circumflex

(Ј &#360; &#х168; Capital U-tilde

й &#361 ; &#х169; Lowercase U-tilde

о &Uuml; &#220; &#xDC; Capital U-umlaut

й &uuml; &#252; &#xFC; Lowercase U-umlaut

-о &#366; &#х16Е; Capital U-ring

и &#367; &#xl 6F; Lowercase U-ring

о &#362; &#х16А; Capital U-macron

й &#363; &#х16В; Lowercase U-macron

-о &#364; &#х16С; Capital U-breve

Page 111: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

й &#365; &#xl 6D; Lowercase U-breve

џ &#370; &#х172; Capital U-ogonek

ч &#371 ; &#xl 73; Lowercase U-ogonek

-о &#368; &#х170; Capital U-douЫe acute

й &#369; &#х17 1 ; Lowercase U-douЫe acute

v v &#86; &#х56; Capital V

v v &# 1 1 8; &#х76; Lowercase V

w w &#87; &#х57; Capital W

w w &# 1 1 9; &#х77; Lowercase W

w &#7808; &#х1Е80; Capital W-grave

w &#7809; &#х1Е8 1 ; Lowercase W-grave

w &#78 10; &#х1Е82; Capital W-acute

w &#78 1 1 ; &#х1Е83; Lowercase W-acute

w &#372; &#х174; Capital W-circumflex

w &#373; &#х175; Lowercase W-circumflex

w &#78 12; &#х1Е84; Capital W-umlaut

w &#78 13 ; &#х1Е85; Lowercase W-umlaut

х х &#88; &#х5 8; Capital Х

х х &# 120; &#х78; Lowercase Х

у у &#89; &#х59; Capital У

у у &# 12 1 ; &#х79; Lowercase У

у &#7922; &#xl EF2; Capital Y-grave

у &#7923 ; &#xl EF3; Lowercase Y-grave

у &Yacute; &#22 1 ; &#xDD; Capital Y-acute

у &yacute; &#253; &#xFD; Lowercase Y-acute

у &#374; &#х176; Capital Y-circumflex

у &#375; &#х177; Lowercase Y-circumflex

у &Yuml; &# 159; &#x9F; Capital Y-umlaut

у &yuml; &#255; &#xFF; Lowercase Y-umlaut

z z &#90; &#х5А; Capital Z

z z &# 122; &#х7А; Lowercase Z

z &#377; &#х179; Capital Z-acute

z &#378; &#х17А; Lowercase Z-acute

z &#38 1 ; &#xl 7D; Capital Z-hachek

Page 112: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

z &#382; &#х17Е; Lowercase Z-hachek

z &#379; &#х17В; Capital Z-dot

z &#380; &#х17С; Lowercase Z-dot

Page 113: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Prilog: CSS paleta osnovnih Ьој а

Naziv Ьоје #RGB kod Вој а

Вlack #000000

Silver #СОСОСО

White # FFFFFF

Gray #808080

Maroon #800000

Red #FFOOOO

Purple #800080

Fuchsia #FFOOFF

Green #008000

Lime #OOFFOO

Olive #808000

Yellow #FFFFOO

Navy #000080

Blue #OOOOFF

Teal #008080

Aqua #OOFFFF

Page 114: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Pгilog: CSS stilske vгij ednosti

Background Properties

CSS Backgгound Properties Property Description PossiЫe Values Examples

backgгound- Declaгes the fixed div { backgгound-attachment attachment of а scгoll attachment :fixed; }

backgгound image (to scroll with the div { backgгound-page content ог Ье attachment : scгoll; } in а fixed position) .

backgгound- Declaгes the Valid соlог names, div { backgгound-coloг:gгeen; соlог backgгound соlог. RGB values, }

hexidecimal notation. div { coloг:#OOFFOO; }

backgгound- Declaгes the URL values. div { backgгound-1mage backgгound image image:url(images/img.jpg); }

of an element. body { backgгound-image:url(img.jpg); }

backgгound- Declaгes the Lengths ог div { backgгound-position position of а peгcentages fог the х position: 1 Орх 50рх; }

backgгound image. and у positions, ог опе of the pгedefined div { backgгound-values: position: bottom гight; }

top left top centeг top гight centeг left centeг centeг centeг гight bottom left bottom centeг bottom гight

backgгound- Declaгes how гереаt div { backgгound-гереаt and/oг if а гереаt-х гереаt :гереаt-х; }

backgгound image гереаt-у гepeats. no-гepeat div { backgгound-гepeat :no-

гереаt; } backgгound U sed as а shorthand Sepaгate values Ьу а div { backgгound:gгeen

pгoperty to set all space in the following url(image.jpg) no-гepeat fixed the backgгound огdег (those that аге centeг centeг; } pгoperties at once. not defined will use

inheгited ог default div { initial values) : backgгound :url(image.jpg)

fixed; } backgгound-coloг

Page 115: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

backgгound-image backgгound-гepeat backgгound-attachment backgгound-po sition

Border Properties

CSS Вогdег Properties Property Description PossiЫe Values Examples Ьогdег- Declaгes the соlог Valid соlог names, RGB values, div { Ьогdег-tор-top-coloг of the top Ьогdег. hexidecimal notation, ог the coloг:gгeen; }

pгedefined value tгanspaгent. div { Ьогdег-tор-coloг:#OOFFOO; }

Ьогdег- Declaгes the style попе div { Ьогdег-tор-top-style of the top Ьогdег. hidden style: solid; }

dotted dashed div { Ьогdег-tор-solid style: inset; } douЫe gгoove гidge inset outset

Ьогdег- Declaгes the width Lengths ог the following pгedefined div { Ьогdег-tор-top-width of the top Ьогdег. values: width:2px; }

thin div { Ьогdег-tор-medium width:thin; } thick

Ьогdег- U sed as а shorthand Sepaгate values Ьу а space in the div { Ьогdег-top pгoperty to set all following огdег (those that аге not top :2px solid

the Ьогdег-tор defined will use inheгited ог default gгeen; } pгoperties at once. initial values) :

div { Ьогdег-boгdeг-top-width top :thick douЫe boгdeг-top-style #OOFFOO; } Ьогdег-tор-соlог

Ьогdег- Declaгes the соlог Valid соlог names, RGB values, div { Ьогdег-гight- of the гight Ьогdег. hexidecimal notation, ог the гight-coloг:gгeen; соlог pгedefined value tгanspaгent. }

div { Ьогdег-гight-coloг:#OOFFOO; }

Ьогdег- Declaгes the style попе div { Ьогdег-гight-style of the гight Ьогdег. hidden гight-style: solid;

dotted 1

Page 116: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

dashed solid div { Ьогdег-douЫe гight-style: inset; } gгoove гidge inset outset

Ьогdег- Declaгes the width Lengths ог the following pгedefined div { Ьогdег-гight- of the гight Ьогdег. values: гight-width:2px; } width

thin div { Ьогdег-medium гight-width:thin; thick }

Ьогdег- U sed as а shorthand Sepaгate values Ьу а space in the div { Ьогdег-гight pгoperty to set all following огdег (those that аге not гight :2px solid

the boгdeг-гight defined will use inheгited ог default gгeen; } pгoperties at once. initial values) :

div { Ьогdег-boгdeг-гight-width гight :thick douЫe boгdeг-гight-style #OOFFOO; } boгdeг-гight-coloг

Ьогdег- Declaгes the соlог Valid соlог names, RGB values, div { Ьогdег-bottom- of the bottom hexidecimal notation, ог the bottom-соlог Ьогdег. pгedefined value tгanspaгent. coloг:gгeen; }

div { Ьогdег-bottom-coloг:#OOFFOO; }

Ьогdег- Declaгes the style попе div { Ьогdег-bottom- of the bottom hidden bottom-style Ьогdег. dotted style: solid; }

dashed solid div { Ьогdег-douЫe bottom-gгoove style: inset; } гidge inset outset

Ьогdег- Declaгes the width Lengths ог the following pгedefined div { Ьогdег-bottom- of the bottom values: bottom-width Ьогdег. width:2px; }

thin medium div { Ьогdег-thick bottom-

width:thin; } Ьогdег- U sed as а shorthand Sepaгate values Ьу а space in the di v { Ьогdег-bottom pгoperty to set all following огdег (those that аге not bottom:2px solid

the boгdeг-bottom defined will use inheгited ог default gгeen; } pгoperties at once. initial values) :

div { Ьогdег-

Page 117: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

bottom:thick boгdeг-bottom-width douЬle #OOFFOO; boгdeг-bottom-style } boгdeг-bottom-coloг

Ьогdег- Declaгes the соlог Valid соlог names, RGB values, div { boгdeг-left-left-coloг of the left Ьогdег. hexidecimal notation, ог the coloг:gгeen; }

pгedefined value tгanspaгent. div { boгdeг-left-coloг:#OOFFOO; }

Ьогdег- Declaгes the style попе div { boгdeг-left-left-style of the left Ьогdег. hidden style: solid; }

dotted dashed div { boгdeг-left-solid style: inset; } douЫe gгoove гidge inset outset

Ьогdег- Declaгes the width Lengths ог the following pгedefined div { boгdeг-left-left-width of the left Ьогdег. values: width:2px; }

thin div { boгdeг-left-medium width:thin; } thick

Ьогdег- U sed as а shorthand Sepaгate values Ьу а space in the div { Ьогdег-left pгoperty to set all following огdег (those that аге not left:2px solid

the boгdeг-left defined will use inheгited ог default gгeen; } pгoperties at once. initial values) :

div { Ьогdег-boгdeг-left-width left:thick douЫe boгdeг-left-style #OOFFOO; } boгdeг-left-coloг

Ьогdег- Declaгes the Ьогdег Valid соlог names, RGB values, div { Ьогdег-соlог соlог of all four hexidecimal notation, ог the coloг:gгeen геd

Ьогdегs at once. pгedefined value tгanspaгent. Ыuе olive; }

Sepaгate the соlог fог each Ьогdег Ьу div { Ьогdег-а space, declaгing the coloгs fог the coloг:gгeen; } Ьогdегs in the following огdег:

div { Ьогdег-Ьогdег-tор-соlог coloг:gгeen геd; } boгdeг-гight-coloг boгdeг-bottom-coloг div { Ьогdег-boгdeг-left-coloг coloг:gгeen геd

Ыuе; } Undeclaгed values woгk as furtheг shorthand notation. If only опе соlог value is declaгed, all four Ьогdегs will use that соlог. If two coloгs аге

Page 118: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

declaгed, the top апd bottom Ьогdегs will use the fiгst соlог while the гight апd left Ьогdегs will use the secoпd соlог. If thгee coloгs аге declaгed, the top Ьогdег will use the fiгst соlог, the гight апd left Ьогdегs will use the secoпd соlог, апd the bottom Ьогdег will use the thiгd соlог.

Ьогdег- Declaгes the Ьогdег попе div { Ьогdег-style style of all four hiddeп style : solid dotted

Ьогdегs at опсе. dotted dashed douЫe; } dashed solid div { Ьогdег-douЫe style: solid; } gгoove гidge div { Ьогdег-iпset style : solid dotted; outset }

Uпdeclaгed values woгk as furtheг div { Ьогdег-shorthaпd пotatioп. If опlу опе style style : solid dotted value is declaгed, all four Ьогdегs will dashed; } use that style. If two styles аге declaгed, the top апd bottom Ьогdегs will use the fiгst style while the гight апd left Ьогdегs will use the secoпd style. If thгee styles аге declaгed, the top Ьогdег will use the fiгst style, the гight апd left Ьогdегs will use the secoпd style, апd the bottom Ьогdег will use the thiгd style.

Ьогdег- Declaгes the width Leпgths ог the followiпg pгedefiпed div { Ьогdег-width of all four Ьогdегs values: width: 1 рх Зрх

at опсе. 5рх 2рх; } thiп medium div { Ьогdег-thick width:thiп; }

Uпdeclaгed values woгk as furtheг div { Ьогdег-shorthaпd пotatioп. If опlу опе width width:2px 4рх; } value is declaгed, all four Ьогdегs will use that width. If two widths аге div { Ьогdег-declaгed, the top апd bottom Ьогdегs width:2px 4рх will use the fiгst width while the гight 5рх; } апd left Ьогdегs will use the secoпd width. If thгee widths аге declaгed, the top Ьогdег will use the fiгst width, the гight апd left Ьогdегs will use the secoпd width, апd the bottom Ьогdег will use the thiгd width.

Page 119: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Ьогdег U sed as а shorthand Sepaгate values Ьу а space in the div { Ьогdег: 1 рх to declaгe the following огdег (those that аге not douЫe gгeen; } Ьогdег properties defined will use inheгited ог default when all four initial values) : div { boгdeг:thin Ьогdегs will have solid #OOFFOO; } the same boгdeг-width арреагаnсе. boгdeг-style

Ьогdег-соlог

Classification and Positioning Properties

CSS Classification/Positioning Pгoperties Property Description PossiЫe Values Examples сlеаг Declaгes the side( s) of an left div { cleaг: гight; }

element wheгe no pгevious гight floating elements аге allowed both div { сlеаг: both; } to Ье adjacent. попе

сuгsог Declaгes the type of cursoг to URL values, and the div { cursoг: crosshaiг; } Ье displayed. following pгefefined

values: div { cusгsoг:url(image. сsг );

auto } cгosshaiг default div { pointeг cusгsoг:url(image. сsг ), move pointeг; } e-гes1ze ne-гes1ze nw-гes1ze n-гes1ze se-гes1ze sw-гes1ze s-гes1ze w-гes1ze text wait help

display Declaгes if/how the element попе div { display: none; } displays. inline

Ыосk div { display: inline; } list-item run-ш div { display: maгkeг; } compact mагkег tаЫе inline-taЫe taЫe-гow-group taЫe-headeг-gгoup taЫe-footeг-group

Page 120: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

tаЫе-гоw taЫe-column-gгoup taЫe-column taЫe-cell taЫe-caption

float Declaгes whetheг а Ьох left div { float : left; } should float to the left ог гight гight of otheг content, ог whetheг it попе div { float: гight; } should not Ье floated at all.

visiЬility Declaгes the visiЬility of visiЫe div { visiЬility :visiЫe; boxes geneгated Ьу an hidden } element. collapse

div { visiЬility :hidden; }

top Declaгes the distance that the Lengths, peгcentages, div { top : l 5px; } top content edge of the and the pгedefined element is offset below the value auto. div { top :2%; } top edge of its containing Ыосk. The po sition pгoperty of the element must also Ье set to а value otheг than static.

гight Declaгes the distance that the Lengths, peгcentages, div { гight : 1 5рх; } гight content edge of the and the pгedefined element is off set to the left of value auto. div { гight:2%; } the гight edge of its containing Ыосk. The position pгoperty of the element must also Ье set to а value otheг than static.

bottom Declaгes the distance that the Lengths, peгcentages, div { bottom: 1 5рх; } bottom content edge of the and the pгedefined element is off set above the value auto. div { bottom:2%; } bottom edge of its containing Ыосk. The po sition pгoperty of the element must also Ье set to а value otheг than static.

left Declaгes the distance that the Lengths, peгcentages, div { left : 1 5рх; } left content edge of the and the pгedefined element is off set to the гight value auto. div { left :2%; } of the left edge of its containing Ыосk. The position pгoperty of the element must also Ье set to а value otheг than static.

position Declaгes the type of static div { position:absolute; positioning of an element. гelative }

absolute fixed div { position: гelative;

} clip Declaгes the shape of а Shapes, ог the div { clip: auto; }

Page 121: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

clipped region when the value predefined value auto. of the overflow property is set div { clip :rect(2px, 4рх, to а value other than visiЫe. In CSS 2, the only 7рх, 5рх); }

valid shape is а rectangle, using the following format to specify the off set lengths from each side of the Ьох:

rect(top, right, bottom, left)

overflow Declares how content that visiЫe div { overflow:hidden; overflows the element's Ьох is hidden } handled. scroll

auto div { overflow: scroll; } vertical- Declares the vertical Lengths, percentages, span { vertical-align alignment of an inline-level and the following align:middle; }

element ог а tаЫе cell. predefined values: td { vertical-align:top; }

baseline sub super top text-top middle bottom text-bottom

z-index Declares the stack order of Integer values and the div { z-index:2; } the element. predefined value auto.

div { z-index: auto; }

Dimension Properties

CSS Dimension Properties Property Description PossiЫe Values Examples height Declares the height of the Lengths, percentages, and the div { height:200px;

element. predefined value auto. }

div { height: 50%; }

max- Declares the maximum Lengths, percentages, and the div { max-height height of the element. predefined value auto. height :200px; }

div { max-height :50%; }

mш- Declares the minimum Lengths, percentages, and the div { min-height height of the element. predefined value auto. height :200px; }

Page 122: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

div { miп-height :50%; }

width Declaгes the width of the Leпgths, peгceпtages, апd the div { width:500px; elemeпt. pгedefiпed value auto. }

div { width: 75%; } max- Declaгes the maximum Leпgths, peгceпtages, апd the div { max-width width of the elemeпt. pгedefiпed value auto. width:500px; }

div { max-width: 75%; }

mш- Declaгes the miпimum Leпgths, peгceпtages, апd the div { miп-width width of the elemeпt. pгedefiпed value auto. width:500px; }

div { miп-width: 75%; }

Font Properties

CSS Foпt Properties Property Description PossiЫe Values Examples foпt- Declaгes the пате of Valid foпt family пames ог div { foпt-family the foпt to Ье used. gепегiс family пames, i .e . family:Arial; }

Pгeviously set iп НТМL Aт·ial, Vadana, sans-saif, via the Јасе attгiЬute iп "Тimes New Roman ", Тimes, div { foпt-а <foпt> tag. serif, etc. family:Arial,

Helvetica, saпs-seгif; Foпt family пames сап Ье } sepaгated Ьу а comma iп the same declaгatioп to allow additioпal аш)/ ог gепегiс family пames to Ье used if the ргеfегееd foпt is uпаЫе to Ье displayed.

foпt-size Declaгes the size of the Leпgths (пumЬег апd uпit div { foпt-size: 70%; foпt. Pгeviously set iп type- i.e . Јет, 12pt, ЈОрх, } НТМL via the size 80%) ог опе of the followiпg attгiЬute iп а <foпt> tag. pгedefiпed values: div { foпt-

size :0 .85em; } xx-small x-small div { foпt-small size: medium; } medium laгge x-laгge xx-laгge smalleг lагgег

Page 123: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

font-size- Limited browser Numeгic value div { font-size-adjust support: Was part of adjust :0 . 54; }

CSS 2, but not in CSS 2.1. This property may div { font-size-return in CSS 3. adjust :0 .46; }

Declaгes the aspect value (font size divided Ьу x-height) .

font- Limited browser noгmal div { font-stгetch support: Was part of wideг stгetch:narroweг; }

CSS 2, but not in CSS narroweг 2.1. This property may ultгa-condensed div { font-return in CSS 3. extгa-condensed stгetch:ultгa-

condensed expanded; } Declaгes the stгetch of semi-condensed the font face. semi-expanded

expanded extгa-expanded ultгa-expanded

font-style Declaгes the font style. noгmal div { font-italic style: italic; } oЫique

div { font-style:oЫique; }

font- Declaгes the f ont noгmal div { font-vaгiant vaгiant. small-caps vaгiant :noгmal; }

div { font-vaгiant : small-caps; }

font- Declaгes the font weight noгmal div { font-weight (lightness ог boldness) bold weight :boldeг; }

boldeг lighteг div { font-1 00 weight :200; } 200 300 400 500 600 700 800 900

font U sed as а shorthand Sepaгate values Ьу а space in div { font:italic pгoperty to declaгe all of the following огdег (those that small-caps bold lem the font properties at аге not defined will use l .2em Arial } once ( except font-size- inheгited ог default initial adjust and font-stгetch) . values) : div { font:bold

0 . 8em Veгdana } font-style

Page 124: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

font-variant font-weight font-size line-height font-family

Generated Content Properties

CSS Generated Content Properties Property Description PossiЫe Values Examples

content Generates content in the String values, URL div: before { document in conjunction values, and predefined content : " some text" ; } with the : before and : after value formats: pseudo-elements. div:after {

counter( name) content :url(page2 .html); } counter(name, list-style-type) counters( name, string) counters( name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote

counter- Declares the counter Integers and the More Information increment increment for each predefined value

instance of а selector. none. counter- Declares the value the Integers and the More Information reset counter is set to on each predefined value

instance of а selector. none. quotes Declares the type of String values and the More Information

quotation marks to use for predefined value quotations and embedded none. quotations.

List Properties

CSS List Properties Property Description PossiЫe Values Examples list-style- Declares the type of list disc ol { list-style-type:upper-type marker used. circle roman; }

square decimal ul { list-style-decimal-leading-zero type: square; } lower-roman upper-roman lower-alpha uooer-alpha

Page 125: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

loweг-gгeek loweг-latin uppeг-latin hebгew агmешаn geoгgian cjk-ideogгaphic hiгagana katakana hiгagana-iгoha katakana-iгoha

list-style- Declaгes the position of inside ol { list-style-position the list mагkег. outside position: inside; }

ul { list-style-position:outside; }

list-style- Declaгes an image to URL values. ul { list-style-1mage Ье used as the list image:url(image.jpg); }

mагkег. list-style Shorthand pгoperty to Sepaгate values Ьу а space ul { list-style: disc inside

declaгe thгee list in the following огdег url(image.gif); } pгoperties at once. (those that аге not defined

will use inheгited ог ol { list-style:uppeг-default initial values) : гoman outside; }

list-style-type list-style-po sition list-style-image

mагkег- Declaгes the mагkег Lengths and the pгedefined li :befoгe { offset off set fог elements with value auto. display: maгkeг; mагkег-

а value of mагkег set offset : Spx; } fог the display pгoperty.

Margin Properties

CSS Maгgin Pгoperties Property Description PossiЫe Values Examples mагgш- Declaгes the top Lengths, peгcentages, and the pгedefined div { maгgin-top maгgin fог the value auto. top : Spx; }

element. div { maгgin-top: l 5%; }

mагgш- Declaгes the гight Lengths, peгcentages, and the pгedefined div { maгgin-гight maгgin fог the value auto. гight : Spx; }

element. div { maгgin-гight : 1 5%; }

mагgш- Declaгes the Lengths, peгcentages, and the pгedefined div { maгgin-

Page 126: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

bottom bottom maгgin value auto. bottom: 5рх; } fог the element.

div { maгgin-bottom: 1 5%; }

mагgш- Declaгes the left Lengths, peгcentages, and the pгedefined div { maгgin-left maгgin fог the value auto. left :5px; }

element. div { maгgin-left: 1 5%; }

mагgш Shorthand Sepaгate values Ьу а space in the following div { pгoperty used to огdег (those that аге not defined will use maгgin: 5px declaгe all the inheгited ог default initial values) : 12рх 4рх 7рх; maгgin pгoperties } at once. maгgin-top

maгgin-гight div { maгgin-bottom maгgin: 5px; } maгgin-left

div { Undeclaгed values woгk as furtheг maгgin: 5px shorthand notation. If only опе length value l Opx; } is declaгed, all four maгgins will use that length. If two lengths аге declaгed, the top div { and bottom maгgins will use the fiгst length maгgin: 5px while the гight and left maгgins will use the 7рх 4рх; } second length. If thгee lengths аге declaгed, the top maгgin will use the fiгst length, the гight and left maгgins will use the second length, and the bottom maгgin will use the thiгd length.

Outline Properties

CSS Outline Pгoperties Property Description PossiЫe Values Examples outline- Declaгes the outline Valid соlог names, RGB values, div { outline-соlог соlог. hexidecimal notation. coloг:gгeen; }

div { outline-coloг:#OOFFOO; }

outline- Declaгes the style of попе div { outline-style the outline. dotted style: solid; }

dashed solid div { outline-douЫe style: inset; } gгoove гidge inset outset

outline- Declaгes the width of Lengths ог the following div { outline-

Page 127: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

width the outline. pгedefined values: width:2px; }

thin div { outline-medium width:thin; } thick

outline U sed as а shorthand Sepaгate values Ьу а space in div { outline :gгeen pгoperty to set all the the following огdег (those that solid 2рх; } backgгound pгoperties аге not defined will use at once. inheгited ог default initial div {

values) : outline:#OOFFOO douЫe thick; }

outline-coloг outline-style outline-width

Padding Properties

CSS Padding Pгoperties Property Description PossiЫe Values Examples padding- Declaгes the top Lengths, peгcentages, and the pгedefined div { padding-top padding fог the value auto. top : 5px; }

element. div { padding-top : l 5%; }

padding- Declaгes the гight Lengths, peгcentages, and the pгedefined div { padding-гight padding fог the value auto. гight: 5px; }

element. div { padding-гight : 1 5%; }

padding- Declaгes the Lengths, peгcentages, and the pгedefined div { padding-bottom bottom padding value auto. bottom: 5рх; }

fог the element. div { padding-bottom: 1 5%; }

padding- Declaгes the left Lengths, peгcentages, and the pгedefined div { padding-left padding fог the value auto. left : 5px; }

element. div { padding-left: 1 5%; }

padding Shorthand Sepaгate values Ьу а space in the following div { pгoperty used to огdег (those that аге not defined will use padding: 5px declaгe all the inheгited ог default initial values) : 12рх 4рх 7рх; maгgin pгoperties } at once. padding-top

padding-гight div { padding-bottom padding: 5px; } padding-left

div { Undeclaгed values woгk as furtheг padding: 5px

Page 128: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

shorthand notation. If only опе length value l Opx; } is declaгed, all four sides will use that length. If two lengths аге declaгed, the top div { and bottom sides will use the fiгst length padding: 5px while the гight and left sides will use the 7рх 4рх; } second length. If thгee lengths аге declaгed, the top side will use the fiгst length, the гight and left sides will use the second length, and the bottom side will use the thiгd length.

Page Properties

CSS Page Properties Property Description PossiЫe Values Examples

maгks Declaгes the type of maгks to display сг ор @page { outside the page Ьох. cгoss maгks: cгop; }

oгphans Declaгes the minimum numbeг of Integeгs @page { lines of а рагаgгарh that must Ье left oгphans :2; } at the bottom of а page.

page Declaгes the type of page wheгe an Indentifieгs Мо ге element should Ье displayed. Inf oгmation

page-bгeak- Declaгes а page Ьгеаk. auto Мо ге afteг always Inf oгmation

avoid left гight

page-bгeak- Declaгes а page Ьгеаk. auto Мо ге Ьеfоге always Inf oгmation

avoid left гight

page-bгeak- Declaгes а page Ьгеаk. auto Мо ге inside avoid Inf oгmation s1ze Declaгes the size and oгientation of а Lengths, and the Мо ге

page Ьох. following pгedefined Inf oгmation values:

auto landscape potгait

widows Declaгes the minimum numbeг of Integeгs @page { lines of а рагаgгарh that must Ье left widows:2; } at the top of а page.

ТаЫе Properties

CSS ТаЫе Pгoperties Pro ert Descri tion PossiЫe Values Exam les

Page 129: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

Ьогdег- Declaгes the way collapse tаЫе { Ьогdег-collapse Ьогdегs аге sepaгate collapse: collapse; }

displayed. tаЫе { Ьогdег-collapse: sepaгate; }

Ьогdег- Declaгes the Leпgths fог the hoгizoпtal апd tаЫе { Ьогdег-spacшg distaпce sepaгatiпg vertical spaciпg, sepaгated Ьу а spaciпg: 5px; }

Ьогdегs (if Ьогdег- space. collapse is tаЫе { Ьогdег-sepaгate). If опе leпgth is value is declaгed, spaciпg : 5px lOpx;

that leпgth is used fог both the } hoгizoпtal апd vertical spaciпg. If two leпgths аге declaгed, the fiгst опе is used fог hoгizoпtal spaciпg апd the secoпd опе is used fог vertical spaciпg.

captioп- Declaгes wheгe the top captioп { captioп-side tаЫе captioп is bottom side:top; }

displayed iп гelatioп left to the tаЫе. гight captioп { captioп-

side: гight; } empty- Declaгes the way show tаЫе { empty-cells empty cells аге hide cells : show; }

displayed (if boгdeг-collapse is tаЫе { empty-sepaгate). cells :hide; }

tаЫе- Declaгes the type of auto tаЫе { tаЫе-layout tаЫе layout. fixed layout :auto; }

tаЫе { tаЫе-layout :fixed; }

Text Properties

CSS Text Properties Property Description PossiЫe Values Examples

соlог Declaгes the соlог of Valid соlог пames, RGB div { соlог:gгееп; } the text. values, hexidecimal пotatioп.

div { The pгedefiпed соlог пames соlог:гgЬ(О,255,0); } аге :

div { coloг:#OOFFOO; } aqua Ыасk Ыuе fuchsia gгау gгееп lime

Page 130: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

direction Declares the reading direction of the text.

line-height Declares the distance between lines.

letter- Declares the amount spacшg of space between text

characters.

text-align Declares the horizontal alignment of inline content.

text- Declares the text decoration decoration.

text-indent Declares the indentation of the first line of text.

maroon navy olive purple red silver teal white yellow ltr rtl

ltr = left-to-right rtl = right-to-left Numbers, percentages, lengths, and the predefined value of normal.

А length (in addition to the default space) ог the predefined value of normal.

left right center justify

If used on а set of tаЫе cells, this property сап Ье given а string value to which the text of each row of the column will Ье aligned. попе underline overline line-through Ыink

Lengths and percentages.

div { direction: ltr; }

div { direction:rtl; }

div { line-height :normal; }

div { line-height :2em; }

div { line-height : 125%; } div { letter-spacing:normal; }

div { letter-spacing: 5px; }

div { letter-spacing:-lpx; } div { text-align: center; }

div { text-align: right; }

td { text-align: 11• 11; }

div { text-decoration:none; }

div { text-decoration:underline; } div { text-indent : 12рх; }

div { text-indent :2%; }

Page 131: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

text- Declaгes shadow А list containg а соlог followed div { text-shadow eff ects on the text. Ьу numeгic values (sepaгated shadow:gгeen 2рх 2рх

Ьу spaces) that specify: 7рх; }

1 . The соlог fог the div { text-shadow eff ect shadow:olive -Зрх -

2 . Hoгizontal distance to 4рх 5рх; } the гight of the text

3 . Vertical distance below the text

4 . Blur гadius

text- Declaгes the попе div { text-tгansfoгm capitalization effects capitalize tгansfoгm:uppeгcase; }

on the letteгs in the uppeгcase text. loweгcase div { text-

tгansfoгm: loweгcase; } unicode- Declaгes values noгmal div { unicode-bidi гelating to embed bidi : embed; }

Ьidiгectional text. Ьi di-override Мау Ье used in div { unicode-conjunction with the Ьidi :Ьidi-override; } the direction pгoperty.

white- Declaгes how white noгmal div { white-space:pгe; space space is handled in рге }

an element. nowгap div { white-space:nowгap; }

woгd- Declaгes the space А length (in addition to the div { woгd-spacшg between woгds in the default space) ог the pгedefined spacing:noгmal; }

text. value of noгmal. div { woгd-spacing: 1 . 5 ет; }

Other Properties

Otheг CSS Properties Property Description PossiЫe Values Examples

azimuth Declaгes the angle Angle values in degгees div { azimuth:90deg; } that sound tгavels to ( deg), ог опе of the the listeneг. following pгedefined div { azimuth:behind; }

values:

left-side faг-left left centeг-left centeг

Page 132: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

ceпteг-гight гight faг-гight гight-side behiпd leftwaгds гightwaгds

сие-аftег Declaгes ап aиdio URL valиes апd the div { сие-сие to play afteг ап pгedefiпed valиe попе. afteг:url(soипd.wav); } elemeпt.

div { сие-аftег:попе; } сие-Ьеfоге Declaгes ап aиdio URL valиes апd the div { сие-

сие to play Ьеfоге ап pгedefiпed valиe попе. befoгe:url(soипd.wav); } elemeпt.

div { сие-Ьеfоге:попе; } сие Shorthaпd pгoerty to URL valиes апd the div { cиe:url(soипd.wav)

set both сие valиes at pгedefiпed valиe попе. url(soипd2 .wav); } о псе. Sepaгate the valиes Ьу а

space iп the followiпg div { cиe:url(soипd.wav); огdег: }

сие-Ьеfоге сие-аftег

If опlу опе сие valиe is declaгed, it is иsed fог both Ьеfоге апd afteг.

elevatioп Declaгes the Aпgle valиes iп degгees div { elevatioп:ЗOdeg; } elevatioп of а sоипd. ( deg), ог опе of the

followiпg pгedefiпed div { elevatioп: higheг; } valиes:

below level above higheг loweг

paиse-afteг Declaгes the аmоипt Time iп millisecoпds (ms) div { paиse-afteг: 1 OOms; of time to раиsе afteг ог peгceпtages. } ап elemeпt.

div { paиse-afteг:20%; } раиsе- Declaгes the аmоипt Time iп millisecoпds (ms) div { раиsе-Ьеfоге of time to раиsе ог peгceпtages. Ьеfоге: 1 OOms; }

Ьеfоге ап elemeпt. div { раиsе-Ьеfоге:20%; }

раиsе Shorthaпd pгoerty to Sepaгate the valиes Ьу а div { paиse :200ms set both раиsе valиes space iп the followiпg l OOms; } at опсе. огdег:

div { раиsе: 1 OOms; }

Page 133: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

pause-befoгe pause-afteг

If опlу опе pause value is declaгed, it is used fог both Ьеfоге апd afteг.

pitch Declaгes the aveгage Fгequeпcies iп hertz (Hz) div { pitch: 120Hz; } speakiпg pitch of а ог the followiпg vo1ce. pгedefiпed values: div { pitch:high; }

x-low low medium high x-high

pitch-гaпge Declaгes а chaпge iп Numbeг values betweeп О div { pitch-гaпge: 50; } the pitch гапgе of а апd 1 ОО (loweг values vo1ce. iпdicate а flat voice while div { pitch-гaпge:99; }

higheг values iпdicate ап aпimated voice ).

play-duriпg Declaгes а URL value, followed Ьу div { play-backgгouпd souпd to опе ог тоге of the duriпg:url(music.wav); } Ье played while the followiпg keywoгds, curreпt elemeпt is sepaгated Ьу spaces: div { play-spokeп. duriпg:url(music.wav)

ffilX гереаt; } гереаt

div { play-duriпg :пoпe; } Alternatley, опе of the followiпg keywoгds:

auto попе

гichness Declaгes the гichпess Numeгic values betweeп О div { гichпess: 50; } of the voice iп апd 1 ОО (loweг values spokeп text. have less гichпess апd div { гichпess:O; }

higheг values have тоге гichness).

speak Declaгes if/how text погmаl div { sреаk:попе; } is spokeп. попе

spell-out div { speak: spell-out; } speak- Declaгes how ofteп о псе th { speak-headeг :oпce; } headeг tаЫе headeг cells аге always

spokeп. th { speak-headeг: always;

} speak- Declaгes how digits div { speak-пumeгal пumeгals аге spokeп. coпtiпuous пumeгal :digits; }

div { speak-

Page 134: Uvod u XHTML, HTML i CSS    -    ( 134 str. ).pdf

пumeгal : coпtiпuous; } speak- Declaгes how code div { speak-puпctuatioп puпctuatioп is попе puпctuatioп:code; }

spokeп. div { speak-puпctuatioп:пoпe; }

speech-гate Declaгes the speech А пumЬег iпdicatiпg the div { speech-гate : 50; } гаtе of spokeп text. пumЬег of woгds рег

miпute, ог опе of the div { speech-followiпg pгedefiпed гate:medium; } values:

x-slow slow medium fast x-fast fasteг sloweг

stгess Declaгes the stгess of Numeгic values betweeп О div { stгess : 50; } the voice оп spokeп апd 1 ОО (loweг values text. have less stгess апd higheг div { stгess :O ; }

values have тоге stгess) . vo1ce- Declaгes the voice Gепегiс ог specific voice Моге Iпfoгmatioп family family of spokeп family пames.

text. volume Declaгes the mediaп Numbeгs betweeп О апd div { volume: 50 ; }

volume. 1 ОО, peгceпtages, ог опе of the followiпg pгedefiпed div { volume: sileпt; } values:

sileпt x-soft soft medium loud x-loud