Uvod u XHTML, HTML i CSS - ( 134 str. ).pdf
March 2, 2017 | Author: Proba0001 | Category: N/A
Short Description
Download Uvod u XHTML, HTML i CSS - ( 134 str. ).pdf...
Description
Osnove HTML, XHTML i CSS
Izradio: Alen Simec, dipl ing.
Osnove HTML, ХНТМL i CSS
Sadrzaj 5
1
(X)HTML
1.1
Uvod u (X)HTML
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
1.6
Prekidi linija ................................................................................................................................................ 9
1.7
Horizontalna linija..................................................................................................................................... 10
1.8
Tagovi i atributi ......................................................................................................................................... 11
1.9
Entiteti ........................................................................................................................................................ 12
..........................................................................................................................
........................................................................................................................................
........................................................................................................................................................
5
7
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
Definicij ske 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 . . . . . . ...... . . ...... . . ........... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . . . 3 3
1.14.3
Postavljanje okvira slike . . . . . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ... ........ . . ...... . . ...... . . ...... .. ... ...... . . . . 34
.
Str. 2od 102
.
.
.
.
.
.
.
.
.
.
.
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМLi CSS 1.14.4
Poravnavanje slike u odnosu na tekst . . . . . ...... . . . . . . . . . . ...... . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . 35
1.14.5
Razmak slike u odnsou na tekst . . . . . . . . . . . . . ...... . . . . . . . . . .... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . .... . . . . . . . 36
1.15
Tablice
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
....................................................................................................................................................
37
1.19 .1
Pomocni editori . . . . . . . . . . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ... ........ . . ...... . . ......... . . . . 50
1.19.2
WYSIWYG editori . . . . . . . . . ...... . . ... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . . . 51
1.20
HTML validator.................................................................................................................................... 51
2
css
2.1
Uvod u CSS ................................................................................................................................................ 54
2.2
Struktura i sintaksa CSS-a
2.3
Selektori i deklaracije
2.4
Rad sa stilskim klasama
2.5
N asljedivanje stilova
...................................................................................................................................
54
.......................................................................................................................
55
................................................................................................................................
56
............................................................................................................................
57
..................................................................................................................................
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
2. 7
Primjena CSS-a
....................................................................................................
67
.........................................................................................................................................
68
2.7.1
Воје . . . . . . . . . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . . . 68
2.7.2
Linkovi . . . . . . . . ... . . ...... . . ...... . . ...... . . .. . . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... . . ...... ... . . ...... . . ...... . . . . 68
2.7.3
Pozadina . . . . . . . .. . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . 71
2.7.4
Fontovi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . 72
2.7.5
Visina linij e odlomaka . . . . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ..... . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . . . . ...... . . . . 83
2.7.6
Prostor izmedu znakova . . . . . . . . . . . . . . . . . . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . 85
2.7.7
Pozicioniranje, poravnavanje teksta . . . . . . . . . . . . ... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ..... . . . . . . . . ......... . . . . 86
2.7.8
Odredivanje mbnih linij a taЫica . . . . . . . . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . ...... . . . . . . . . . . ...... . . . . . . . . . . ... . . . . . . . 88
Str. 3od 102
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS 2.8
Korisni alati za CSS
2.9
Korisni linkovi za CSS .............................................................................................................................. 97
3
LITERA TURA ............................................................................................................. 100
4
PRILOG ........................................................................................................................ 102
...................................................................................................................................
Str. 4od 102
97
Izradio: Alen Simec, dipl. ing.
Osnove НТМL,ХНТМL i CSS
(X)HTML
1
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 okruzenj u
Internet stranice se sastoje od razliCitih tipova sadrzaja, poput teksta, grafike, forтi, audio i video zapisa. Svaka internet stranica јеrazliCita, te njezin 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етато
Str. 5 od 102
иdatoteke.
Теdatoteke su tekst dokuтenti koje tvore internet stranicu.
Izradio: Alen Simec, dipl. ing.
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.
Sto је HTML?
1 .3
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
8 0-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. 6od 102
Izradio: Alen Simec, dipl. ing.
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 2glavna 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: ... 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 Takvi tagovi koriste se npr. kod ubacivanja slika i prekida linija ( , ). 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 . Da bi ovakav zapis bio Citljiv
иstarijim
intemet preglednicima, potrebno јеubaciti prazno
mjesto (Ыank) prije kose crte. Element referencira sliku. Kad intemet preglednik prikazuje stranicu, zamjeni element s datotekom na koju pokazuje. Ро praviluХНТМL-а, опо sto se Str. 7od 102
и
HTМL-u
Izradio: Alen Simec, dipl. ing.
и
Osnove HTML,ХНТМL i CSS zapisuje kao , иХНТМL-u је . НТМ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.
Elementi Ovo је moja prva stranica
f.ii
Elementi
-
=
Windows Jrrternet Explorer
... 1*t1 l'l�'J
@]
Googte
Select 5u g g ested 5ites ,..
Web 51ice Gallery ,.. ,.. E.age,..
;!afety,..
»
TQols,..
Ovo је mojat prva stranica
Done
Prvi tag
•
и
Com puter 1 Р юtected М od е: Off
,fi"
...
.... 100%
...
...
НТМL dokumentu је . tag govori internet pregledniku da slijedi
pocetak НТМL dokumenta. Zadnji tag
иnasem
dokumentu je i оп ukazuje internet
pregledniku da je to kraj НТМL dokumenta.
Str. 8 od 102
Izradio: Alen Simec, dipl. ing.
Osnove НТМL,ХНТМL i CSS Tekst izmedu pocetnog taga i zavrsnog taga јеinformacija оzaglavlju dokumenta. Informacija о zaglavlju se nece prikazati
иprozoru
internet preglednika.
Tekst izmedu pocetnog taga i zavrsnog taga je naslov dokumenta. Tekst izmedu ova dva taga сеse prikazati
иzaglavlju
preglednika.
SadгZaj koji upisujem izmedu pocetnog taga i zavrsnog taga 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 . 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
Prekid linij a Ovo је prva linija Ovo је druga linija
Str. 9 od 102
Izradio: Alen Simec, dipl. ing.
Osпove HTML,ХНТМL i CSS
f.ii
=
Pr·ekid 1 i n ija, - Wi ndo\�'S Inteшet Expl оrет
@]
р ... Se!ect 5u g g ested 5ites ...
Web 51 i ce Ga l l ery ... .
.
...
... E_age...
�afety ...
TQo · l s ...
Ovo је prva !Шiја Ovo је drnga Ii:nij.a
Done
1.7
�
Com puter 1 Р rotected М od е: Off
,ff" ...
" 100%
...
Horizontalna linija
Horizoпtalпa liпija ozпaceva se tagom . Ovaj tag ukljucuje prikaz horizoпtalпih liпija па straпici. Iпtemet pregledпik stvara liпiju па osпovu 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 јепе
Horizontalna linija Str. 10 od 102
Izradio: Alen Simec, dipl. ing.
Osnove НТМL,ХНТМL i CSS Tekst iznad horizontalne linije
Tekst ispod horizontalne linije
r.
Но rizontalna
=
1 i n�a - Windo\.,.s Intemet txplor·er ...
§]
".,.
р ...
Select 5u g g ested 5ites ...
Web 51ice Gallery ... ... E_age...
Safety ...
»
TQol s ...
Tekst iznad horizontalne Бmје Тekst ispod Ђoriюntalne fullj:e
1.8
* 100%
. Com puter 1 Р rotected М od е: Off
Done
...
Tagovi i atriЬuti
Atributi omogucuju raznovrsnost
иnaCinima
na koji element opisuje sadгZaj. Atributi
omogucuju da se elementi koriste drukCije ovisno оokolnostima. Npr. element koristi src atriЬut da odredi lokaciju slike koju zelimo na svojoj stranici.
Ovo је odlomak poravnat s lijeve i desne strane.
f.ii
Naslovi
-
Windows Internet
Explorer
C�\Us;ers.\Alen\D eskto ....
, +"1
Seled: Sugg ested Sites .,..
Web Sl i ce G a l l ery .,.. .,.. E.a g e.,..
5afety.,..
TQols.,..
....
))
Ovo је centtri:rani od!omak_ Ovo је od1omak poыvnat п desno Ovo је odlomak poravш1.t s J!ijeve i
desne strane_
Com puter 1 Prot· ected Mode: Off
Dопе
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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S •
daju nam naznaku na koj i su naCin grupirani dj elovi sadrzaj a
U htmlu j e moguce postaviti 6 posebnih razina dokumenta koj i se odreduj u naslovima : •
ј е najvise istaknut naslov
•
ј е najmanj e istaknut naslov
naslov ima font najvece veliCine koj i se smanjunj e na svakom slj edecem (h2, hЗ . . . ), dok hб ima naj manj i font.
Naslovi Prvi nivo naslova Drugi nivo naslova TreCi nivo naslova Cetvrti nivo naslova Peti nivo naslova Sesti nivo naslova
Str. 1 7 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
�
N.aslovi
-
=
Windows ln!ernet Explorer
@)
р ... Select 5u ggested 5ites ...
Web 51 i ce Gallery ... .
.
...
... E_age...
;!afety ...
»
TQols ...
Prvi nivo naslova Drugi nivo naslova
t enтrti ПЛ.то na.slova. Peti ni�o nas1a\Т,a
Don e
•
100%
Computer 1 Pюtected' Mode: Off
...
1.12 Liste (Lists) Li ste 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 informacij u. Za kreiranj e liste koristimo dvij e vrste elemenata: Kreiranj e liste zapoCinj emo tagom koj i specificira da se radi о listi s brojevima. Informacij e pisemo unutar pocetnog i zavrsnog taga. Na kraju sve zatvaramo zavrsnim tagom .
Str. 1 8 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
Liste Stvari koj e danas moram napravit Nahraniti рsа Kupiti cipele Oprati auto
с., Liste
-
СЈ
Wind,ows mternet bp�orer
@)
р ... Select 51Ј g g ested
Sites ,,.
Web Sl i ce Gallery ,,. »
Liste
Stvari koje dan.as moram napravit l _ Kaluaniti psa
l_ Knpiti cipcle 3 _ Oprati anto
Don e
•
Сот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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS А: velika slova i : rimska numeracij a malim slovima 1:
rimska numeracij a velikim slovima
Liste Stvari koj e danas moram napravit
f.
Defi nicijske 1iste
-
=
\Nindo•,•15 lnterл et Ехр lo rer
@)
. Googie
,
р ...
Select 5u g g ested 5ites ..,.
Web 51ice Gallery ..,.
.. ... Ш1 ...
Q
..,. E_age..,.
;!afety..,.
T.Q:o·ls..,. 1
..,.
»
Definicijske liste НТМL
Hypertex Mcnhp Language хнn..п.
ExtensЉ1e Hypertex Mcnkup Language
css
Cascading Sty1e Sheets
Done
Com puter 1 Р rotected Мо d е: Off
1.13 Veze ili linkovi (Links) World Wide Web ј е mreza straпica koj e 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 koj u 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.
Osnove НТМL, ХНТМL i C S S Kada uklj uCite link n a stranici, omogucavate posj etitelj u da prelazi s a j edne n a drugu stranicu unutar vase internet stranice, na vanj ske internet stranice (izvan vase Internet stranice) ili otvaranj e multimedij skog sadгZaj a (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 ekstenzij u (ako URL vaseg linka koristi bios.htm, а pravo ime datoteke ј е bios.html, link nece raditi).
•
Provj erite ime datoteke.
•
Kori stite 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 koj u
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 koj oj 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.
Osnove HTML, ХНТМL i CSS 1. 13.1 Apsolutna veza
Apsolutna veza koristi kompletan URL koj i povezuj e unutarnj u 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
Apsolutna veza Stranica Tehnickog veleuCilista и Zagrebu Ova veza vodi na www.tvz.hr stranicu
f.i
СЈ
Apsolutna veza WincJlows linternet bplorer -
@]
1 [ l l•'t Google
C�\Users\Alen\Desktop\in .... l-t Sel,ect 5u g g ested 5ites .,..
Web 51 i ce Gallery .,.. »
Stranica Tehnickog veleucilista u Zagrebu Ova ve:za vod:i na \V\VW_tvz_hr
Done
Str. 26 od 102
stranicu
•
Сот puter 1 Р rotected
М od е: Off
100%
....
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S 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.
Relativna veza Stranica Tehnickog veleuCilista и Zagrebu Ovo је relativna veza relativna veza. _
f.i
Relati1ma
veza1
-
=
Wi ndo\"1S Internet Expl oref
@]
itt Google
р ....
Select 5u ggested 5ites .,..
Web 51ice Gallery .,.. .,.. E.age.,..
�afety.,..
TQo·ls.,..
. ....
»
Stranica Tehnickog veleucilista u Zagrebu Ovo је re]ativna veza reJativna veza..
Done
Str. 27 od 102
•
Com puter 1 Р rotected Мо d е: Off
100%
....
Izradio: Alen Simec, dipl. ing.
Osпove HTML, ХНТМL i CSS 1. 13.3 Resursi koj i nisu HTML Veze 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 eduj u 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 resursi HTML resursi < а href="arhiva. zip" >Arhiva podataka РDF dokument DOC dokument
Str. 28 od 102
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
�
HTML
resursi
-
Windш•1S
=
lntemet Explorer
@)
р ... Select 5u ggested 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 posalj u e-mail s komentarima i zelj ama. E-mail element koristi standardni sidrisni element i href atriЬut:
HTML resursi HTML resursi Posalj ite mi poruku na ovaj e-mail .
Str. 29 od 102
Izradio: Alen Simec, dipl. ing.
Osпove HTML, ХНТМL i CSS
�
HTML
resursi
-
Windш•1S
=
lntemet Explorer
@)
р .... Select 5u ggested 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 j edп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 j peg-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 . Str. 30 od 102
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S Slij ede6i primj er opisuj e kako сето ubaciti sliku unutar stranice:
Postavljanj e slika Logo ТVZ-a Na ovoj stranici zelimo predstaviti logo ТVZ-a
СЈ
C�\Users\AI en\D·eskto p\in .,.
•t
l•'t
@)
Googie
Sel!ect 5u ggested 5ites ...
Web 51ice Gallery ... ...
а
E_age...
�afety...
TQo·ls ...
....
»
ovoj sЬ-anici Љelimo predstaviti logo ТVZ-a
IC
С3
о VtL
с LIST u ZAGRE
POL VTECH N ICUM ZAG RAB 1 EN SE
Done
•
Com puter 1 Р rotected М od.e:
Off
100%
...
Internet preglednik се zamj eniti 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.
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.
Dodavanje altemativnog teksta Logo ТVZ-a Na ovoj stranici zelimo predstaviti logo ТVZ-a
СЈ
..., Postav�anje slika - Windows Jnt er net Explorer
@)
l 1
C�\Users\Alen\Deslctop\in .... Select 5u g g ested 5ites .,..
•t-
Web 51ice Gallery .,..
.... Е:а g е .... �afety ....
Т.Q:O·l.s
»
....
Logo TVZ-a а
ovoj strallici l;efuno preds.taviti 1ogo Т\'Z-а
Ј POL УТЕСН N ICUM ZAG ААВ 1 EN SE
Done
Str. 32 od 102
Com puter 1 Pюtected Mode: Off
+ 100%
....
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S 1. 14.2 Odredivanj e velicine slike
Mozemo koristiti atriЬute height i width s elementom kako bi internet preglednik znao koliko ј е slika visoka i siroka (u pikselima) :
Odredivanje veliCine slike Logo ТVZ-a Logo ТVZ-a sada ima dimenziju slike 1 50х70рх
rJ." Odredi-..,anje vel icine s l i ke - Wrn d ows lrrternet Explorer . "
, Google
р ...
Seled: Sugg ested Sites ..,.
Web Sl i c.e G a l lery ..,. ..,. E_age ..,.
Od rediva nj e vel i Ci n e sl i ke
�afety ..,.
»
TQol s: ..,.
Logo TVZ-a Logo
ТVZ-a s.ada ima dimenziju slike 1 50х70рх
Done
Str. 33 od 102
Com puter 1 Р rotected М о d е: Off
,r8
...
'+ 100%
...
Izradio: Alen Simec, dipl. ing.
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 Postavlj anj e 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 kori stiti atriЬut border s elemeпtom za bolju koпtrolu паd okvirom koj i iпternet pregledпik prikazuj e oko slike.
Postavlj anj e okvira slike Logo ТVZ-a Logo ТVZ-a sada ima dimenziju slike 1 50х70рх i okvir Зрх.
Str. 34 od 102
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
(.f.
Odredi\ranje vel iCine sl i ke - Win d ows lnternet Explorer
р ...
u х
5u g g ested 5ites ,,.
Web 51 i ce G a l l ery ,,. ,,. E_a g e ,,.
Od rediva nj e vel iCine slike
�afety ,,.
ТQol s:
»
,,.
Logo TVZ-a Logo ТVZ-a s.ada ima dimenz:iju s.Jilie 1 5 Ох7 Орх i okvir Зрх_
.f(
tг
POll."l' . l't.Qf"'ltCU
T� v 'l.A ЗU ·"" ''· NSI:
Сот pute� 1 Р rotected М od е: Off
1. 14.4 Poravnavanje slike u odnosu
па
8 ...
+ 100 %
... " '
tekst
Atribut Align koristi s e s elementom kako bi sliku prikazali ovisno о tekstu oko slike. Vrij ednosti ovog atributa su: и
•
top: tekst poravnat oko 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
ravnini s vrhom slike
Poravnavanj e slike и odnosu na tekst
Str. 3 5 od 102
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS Logo ТVZ-a Pozicija teksta na sredini и odnosu na sliku
ГЈ.
Poravnavanje sJ i ke
u
od nosu na tekst - Windows Inte,rnet Explorer
. "
, Goog le
р ...
Seled: Su g g ested Sites ..,. P ora.vn avaлj e sl i ke u
Web Sl ic.e G a l lery ..,. ..,. E_a g e ..,.
o'd n o " .
�afety ..,.
»
TQol s: ..,.
Logo T VZ-a ozicija teksta na sred:i:n:i u odnosu na sJilm
Done
•
1. 14.5 Razmak slike u odnsou
Com puter 1 Р rotected М о d е: Off
па
,r8 ...
100%
...
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
Razmak slike и odnosu na tekst
Str. 36 od 102
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S Logo ТVZ-a
Razmak slike и odnosu na tekst
f.ii
Razma sl i ke
u
odnosu
11а
tekst
-
Wind ows lnternet Explorer
C�\Users\Alen\Deskto ...
1 +" 1 1 '('"'1 Googie
Seled: 5u g g ested 5ites ...
Web Sl i ce G a l l ery ... ... E.a g e ...
Razm a k s;l i ke u o d n osu na " .
5afety ...
))
TQols ...
Logo TVZ-a
Razmak sblte u odnosu ш1. tekst .Q
Done
°"
Ј
Nllf:
+ 100 %
Com puter 1 P юtected Mode: Off
...
."
1.15 ТаЫiсе ТаЫiсе sluze kako bi podatke rasporedili
и
mrezu i uCinili nj ihovu analizu j ednostavnij om . 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 i z tri osnovna elementa:
Str. 37 od 102
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS •
Granice: svaka osnovna taЫica mora imati 4 granicne linij e (zida) koj e Cine
pravokutnik •
C elij e: prostor unutar 4 granicne linij e
•
Raspon celij a: Unutar 4 linij e koj e okruzuj u celiju, mozemo brisati ili dodavati zidove
celij e ТаЫiса ima 3 osnovne komponente: •
ТаЫiса
•
Red и taЫici : , koj i ј е uvij ek unutar
•
C elij a taЫice: , koj a j e uvij ek unutar
Tag i nj egov kod nalaze se izmedu tagova и dokumentu. No takoder ih mozemo koristiti izmedu veCine Ыоk elemenata, te izmedu i tagova za gnj eZdenj e taЫica. Slj ede6i kod stvara ј ednostavnu taЫicu sa dva retka i dva stupca.
Izrada taЫica Adresar : : Ime i prezime Јте Prezime August Cesarec
Str. 3 8 od 102
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
f.ii
lzrad'a taЫica
-
Wi ndo'l.'.'S Int·eшet Expl orer
р ....
5u g g ested 5ites ..,.
Web 51 i ce G a l l ery ..,. »
Adresar : : Ime i p rezime
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 celiji се se granj anj e dogadati . Broj
и
atriЬutu odgovara broju
redaka ili stupaca koj e zelimo da celij a prikazuj e. То se zove premos6ivanj e. Premos6ivanj e nam omogucuj e d a s e 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).
Izrada taЫice Adresar : : podaci о stanovanju
Str. 3 9 od 102
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS Slika Godiste 1 986
f.i Iz:гad'11 taЫice
-
=
Wi ndows Inteгnet IExplore г
@]
Web 51ice G a l l ery ...
f.i J:zгa d a t a Ы i ce
...
E a g e ...
�afety ...
»
TQol� ...
Adresar : : slika i napomena IGodiste
1 98 6
Doin e
Str. 43 od 102
Comp,uteг 1 P rotected M o d e: Off
i ...
� 100%
...
Izradio: Alen Simec, dipl. ing.
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 dodaj e 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 :
Izrada taЫice Adresar : : slika i napomena Namimica Komada Kruh 1 kom
Str. 46 od 102
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
;.;;
Izra d a taЫice
-
=
Wi ndows Intemet IExplorer
@]
... ..,. Select Su g g e>ted Sites .,.
Web Slice G a l l ery .,. .,.
Ea g e ,,.
Safety ,,.
100%
Comp·uter 1 P rotected· M o d e: Off
Done
»
TQol s ,,.
...
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: •
elementom
•
pomocu "name" i "contents" atributima
< !DOCT YPE 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">
Meta podaci
Moj a stranica Ovdje su moj i meta podaci koj e intemet preglednik ne prikazuj e korisniku na ekranu
Str. 47 od 102
Izradio: Alen Simec, dipl. ing.
Osпove HTML, ХНТМL i CSS
г.
@]
=
Meta padaci - Wi r1do·�,1s Internet Expl areir .... +.,.
р ...
Select S u g g e>ted Sites
....
�
Web Slice G a l l ery ....
r,,, M eta pod a ci
....
E a g e ,,..
Safety ,,..
TQo l s
» ,,..
Мој а stranica Ovdje su moji meta podaci koje iinternet preglednik 11е prik:azuje korisШ!rn ш1 ekranu
Comp·uter 1 P rotected· M o d e: Off
Done
а ....
100%
....
"'
1 . 1 7 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 CS S-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
HTML
Str. 48 od 102
Ime Transitional
Kod HTML
Strict
HTML
Frameset
XHTML
Transitional
XHTML
Strict
XHTML
Frameset
1 . 1 8 Ispravno i pogresno koristenj e (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 znacaj a 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 dizaj nu 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 sadrzaj a.
Str. 49 od 102
Izradio: Alen Simec, dipl. ing.
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 па kraj u 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пj a 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 . 1 9 Korisni alati za pisanj e 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гZaj a
•
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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S 1. 19.2 WYSIWYG editori
WISYWYg editori stvaraj u НТМ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 validato r 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 opisuj u HTML i ХНТМL nalaze se na WЗ С ovom web site-u www.wЗ . org
Str. 5 1 od 1 02
Izradio: Alen Simec, dipl. ing.
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 j os ј е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 и koj u 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S 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 proizvolj no 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 klj ucne rij eCi . Na kraju spremite dokument kao zad7 .htm i provj erite 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 1 02
Izradio: Alen Simec, dipl. ing.
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 C S S ј е izazvao pravu revoluciju па iпternetu i to zahvalj uju6i п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 j edп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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S •
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.
•
Uredivanj e 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 n a nasoj stranici). Properties se od vrij ednosti (value) и deklaracij i odvaj a dvotockom, а svaka deklaracij a zavrsava s tockom-zarez: selector {property: value;}
Str. 5 5 od 1 02
Izradio: Alen Simec, dipl. ing.
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, treb ali 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 postaj e 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 deklaracij u zavrsiti s tocka-zarezom .
3
Pogledajte specifikaciju prema WЗС (http ://www.w3 .org/ТR/CSS2)
Str. 56 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S Mozemo napraviti d a s e 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 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 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 elovanj a. 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
Rad sa stilskim klasama Regulami odlomak Ovo је regulami odlomak.
� Izrada taЫice - Wi ndow� Internet Explore r р
...
\
Select Sugg es.ted Sites ...
� Web Sl ice Gal lery ... •1
Izra d a ta Ыice
...
Њ1
...
�
tt
... Ea g e ...
�afety ...
»
T.Qols ...
Reg,ularni odlom.a k Ovo је regclaлll odlomak_
Done
к
Computer 1 P rotected Mode: Off
./'а
...
.,. НЮ %
...
Class atriЬut s vrij ednosti "copyright"
Rad sa stilskim klasama Regulami odlomak Str. 5 8 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S Ovo је odlomak s a definiranom klasom.
t
Rad
>а
stilskim klaяma
-
Windows Intemet Explorer
� Web '>l ice Gal lery ... Rad sa Яilskim klasa m a
�
...
�
...
�
�
... E_age ...
�afety ...
»
TQo·ls ..-
Regularni odlomak r "!lm
JG or11nmak s .'\ rlofi n1 re1nom k!.'\ son1
Done
Computer 1 P rotected Mode: Off
100%
...
Da bi kreirali stilsko pravilo koj e se odnosi samo na " copyright" odlomak, unutar tagova stavite slj edece:
p. copyright { font-family: Arial; font-size: 1 2рх; color: white; background: teal; }
Ovo stilsko pravilo odreduj e da svi odlomci klase copyright prikazu bijeli tekst na tirkiznoj pozadini arial fontom veliCine 12 рх.
Str. 59 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
2.5
Nasljedivanj e stilova
Jedan od osnovnih stvari
и
HTМL-u ј е ugnj eZdivanj e tagova. Cij eli HTML dokument
ugnj eZden ј е izmedu i tagova. Sve sto Intemet preglednik prikazuj е u prozoru ugnj eZdeno ј е unutar i 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.
Rad sa stilskim klasama body { background: teal; color: white; font-size: 18рх; font-family: Garamond; margin-left: 72рх;
Str. 60 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S margin-right: 72рх; margin-top: 72рх; }
р. copyright { font-family: Arial; font-size: 12рх; color: white; background: Ыuе; } Nasljedivanj e stilova Ovo је odlomak sa definiranom klasom. Definirali smo stil cijelog dokumenta
=
r,; Rad sa s.t ilskim klasama - �\lindo1'1s Intemet Eкplorer
�'
@)
Gщ le
Select
5ug g ested 5rtes .,..
Str. 6 1 od 1 02
Web 51ice Ga l l ery .,..
Izradio: Alen Simec, dipl. ing.
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пj e 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 povezuj e kori steпj em tag-a. Tag ide uпutar dij ela HTML dokumeпta ili uпutar procesпe iпstrukcij е и ХМL dokumeпtu.
Ekstemi stilski obrazac < ! -- Ovdje ide sadrzaj stranice -->
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 и 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S 2.5.2
Interni stilski obrazac
Interni stilski obrazac smj esten ј е unutar HTML stranice. Treba dodati stilska pravila
и
element и zagavlj u dokumenta. Mozete uklj uCiti stilskih pravila koliko god zelite
и
interni obrazac.
Intemi stilski obrazac =
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; }
Str. 63 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS Naslov definiran h l tagom Podnaslov definiran h2 tagom Podnaslov definiran hЗ tagom Odlomak sa atributom copyright Odlomak sa atriЬutom waming
l:i Intemi stilski obrazac Wind ows lлternet EJt i lski ob�azac
.... §)
...
�
�
...
E_a g e ....
�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 P rotected Mode: Off
100%
...
Primj er. Eksterni stilski obrazac ima slij edeca svoj stva za hl selektor:
Str. 65 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
hl { color: red; text-align: left; font-size: 8pt }
interni stilski obrazac ima slij edeca svoj stva za h 1 :
hl { text-align: right; font-size : 20pt }
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.
Ekstemi i intemi stilski obrazac hl { text-align: right; font-size: 20pt }
Str. 66 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S Koja svoj stva ima naslov?
=
Eksterni i interni sbils.ki оЬпшк - WindO\чs Iпtemet Eкplorer
�
... 1-'t1 1 [�1
@)
Google
Select 5ugges:ted 5ites .,.
iJJ
Web 51ic:e G a l l ery ,,.
� Ekrterni i interni, stilski obrazac
.,.
E_a g e .,.
;!afety .,.
»
ТQols .,.
Која svojstva ima naslov?
Done
2.6
•
НЈО%
Computer 1 P rotected Mode: Off
.,.
Upravlj anje obj ektima pomocu CSS-a
CSS mozemo korisiti kako bi pozicionirali podatke na stranici tako da se slike i Ыokovi teksta poj ave 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 1 02
Izradio: Alen Simec, dipl. ing.
Osпove HTML, ХНТМL i CSS
2.7
Primj ena CSS-a
2.7.1
Вој е
Вој е mozemo defiпirati па dva паСiпа: •
preko imeпa,
•
kombiпacij om 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 aj u 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 и CS S-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пtacij u 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 пaj ces6ih pseudo klasa koj e se mogu kori stiti s hyperliпkovima (vezama) : 4
Pogledajte prilog sa paletom Ьоја
Str. 68 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S •
:link (formatiranj e izgleda j os neposj ecenih linkova)
•
:visited (formatiranj e izgleda posj ecenih linkova)
•
:focus (formatiranj e izgleda likova trenutno selektiranih pomocu tipkovnice)
•
:hover (formatiranj e 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 stanj a od j ednom. 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;}
Linkovi =
Str. 69 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;} a:link {color: olive;} a:visited {color: green;}
Slu.ZЬena stranica ТVZ-a
V eza na stranicu ТVZ-a dok nismo kliknuli misem na link. � Li n'kovi
-
Wind o1vs lnternet bplorer
v х
Select Sug ge>ted Sites ...
1,јј Lin kovi
� Web Slice Gal lery ... •1
...
�
... �
�
...
Ea g e ...
�afety ...
TQo·ls ...
S l u zben a stran ica ТVZ - a
Computer 1 P ro.tected Mode: Off
V eza na stranicu ТVZ-a kada smo kliknuli misem na link.
Str. 70 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S li nkovi
-
=
Wind ows Iлternel bplorer
__,__ __,__ •t___,
_ _ _ _ _ ...
Select Su g g ested Sites ..-
@]
,[�t Goog le
р
..-]
Web Sl ice Gal lery т ••
т
�
...
»
�
S l u zb en a stran ica тvz - a
Ј
Done
2. 7 .3
Comp,uter 1 P rotected Mode: Off
100%
т
Pozadina
Da promj enite boju pozadine na na stranici, slij edite 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 deklaracij u stila је: selector (background-color: value;)
body {background-color: Ыuе;} (ime Ьоје) body {background-color: #OOOOFF;} (heksadecimalna vrij ednost)
1
�rnl>
Str. 7 1 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS Boja pozadine =
body {background-color: #OOOOFF;}
r.i
Боја pozadi1ne - Windo1Ys Intemet Explor,er
=
@)
Select
Su g g ested Sites ,,.. »
2.7.4
Fontovi
Kako bi definirali vrstu fonta pomocu CSS font-family svoj stva trebamo slj edece: •
Odrediti selektor za stilsku deklaracij u.
•
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 deklaracij u па slj ede6i naCin:
Str. 72 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
h l {font-family: Verdana, Helvetica, sans-serif; }
Stilovi =
hl {font-family: Verdana, Helvetica, sans-serif;}
Naslov
r.i SЬillovi - Windows [лternel bplorer
р
..-
E_a ge ..-
;!afety ..-
..-] »
Т.QO·ls ..- 1
N as l ov
Done
�
Computer 1 P rotected 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS h l {text-align: center; } а
{font-family: Courier, "Courier New", monospace;}
Stilovi body {color: #808000; /ont-family: Arial, sans-serif ;font-size: 85%;} hl {text-align: center;} а {font-family: Courier, "Courier New ", monospace;}
Naslov Sluzbena stranica ТVZ-a
=
" Stillovi - Windows fnterпel bplo rer
@) јЈ
..-1
Select 5uggeЯed 5ites .,..
Ј
Web 51ic:e G a l l ery .,..
r.:i 5tilovi
... �
... �
�
...
Ea g e ...
;!afety ...
»
TQols ...
N as l ov S l uzbena s t ranica TVZ-a
1 Dопе
Str. 74 od 1 02
•
Computer 1 P rotected Mode: Off
НЈО%
.,..
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S 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; }
Stilovi =
body {color: #808000; font-family: Arial, sans-serif; font-size: 1 Opt;} hl {font-size: 35pt; }
Naslov Ostali tekst (skrenite pozornost па veliCinu teksta unutar odlomka)
Str. 75 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
r.i
=
Sbilovi - Window� [лternel Ь:p lo rer
@)
\11/еЬ �lice G a l lery т "1
т
§!
т
�
,,..
E_age
т
5afety
т
»
T.Qols ,,..
as l ov Ostali tekst (skrenite pozornost
па
Done
velicinu teksta unutar od l o mka)
Computer 1 P rotected Mode: Off
4'8 ...
... 100 %
...
."
Stilska deklaracij a 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,
•
cj elobrojna vrijednosti od 100 - 900 ( 1 00 ј е najtanj i а 900 naj deЫj i).
Stilska deklaracij a koj a odreduj e deЫj inu teksta j e slj edeca: selector {font-weight: value}
1 1
а
{font-wcight: bold;)
�rnl>
Str. 76 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S Stilovi
body {color: Ыасk; font-family: Arial, Verdana, sans-serif; font-size : 85%;} а {font-weight: bold;}
Podebljani link
=
Stilovi Windows [nternel bp l o rer -
@]
v х
Select Sug ge>ted Sites ...
Web Slice Gal lery ...
Sblov i
•1
...
�
...
�
�
...
Ea g e ...
�afety ...
TQo·ls ...
PodeЫjani link
Computer 1 P ro.tected Mode: Off
Done
НЮ%
..-
Stilska deklaracij a 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
р {font-style : italic;} а
{font-weight: bold;}
a:link { color: olive; text-decoration: underline; } a:visited { color: green; text-decoration: none;}
Stilovi 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}
Nakoseпi tekst Sluzbeпa straпica ТVZ-a
Veza na stranicu ТVZ-a dok nismo kliknuli misem na link.
Str. 78 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S Sbillovi - Wind ows Iлternel Explorer
Select Web Sl ice Gal lery т
Su g g ested Sites ,,..
,,..
E_age ,,..
5afety ,,..
T.Qo·ls ,,.. 1 , ,,..
»
Nakoseni tekst SluitJena stranica TVZ-a
100%
Com p•uter 1 P rotected Mode: Off
...
V eza na stranicu ТVZ-a kada smo kliknuli misem na link. "'
=
Stillovi - Windows lлternel bp lorer
@)
Seled: Web Slice G a l lery ...
Su g g ested Sites ,,..
•1
т
§Ј
т �
� ,,..
E_a g e т
5afety т
»
T.Qo·ls ,,..
Nakoseni tekst S l u z b e n a stra n i ca ТVZ-a
Done
�
Computer 1 P rotected Mode: Off
100%
...
Stilska deklaracij a 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
•
lowercase: sva slova teksta nekog elementa su mala slova,
Str. 79 od 1 02
и
nekom dj ela teksta su velika slova,
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS попе:
•
nema formatiranj а.
selector { text-transform : value}
р {text-transform: uppercase; } а
{font-weight: bold;}
a: link { color: olive; text-decoration: underline; text-transform: capitalize } a:visited { color: green; text-decoration: none; text-transform: lowercase }
Stilovi 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 }
Tekst pisaп VELIКIМ i malim slovima Sluzbeпa straпica ТVZ-a
V eza na stranicu ТVZ-a dok nismo kliknuli misem na link.
Str. 80 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S =
, , Stilovi - Wind ows [nternet bplorer
�t
Select Su g g ested Sites .,.
@]
Goog le
Web Sl ice G a l l ery .,.
.,.
E_a g e .,.
5afety .,.
»
Т.QO·l s .,.
TEKST PISAN VELIKIM 1 MALIM SШVIMA
Sluib ena Stranic.a ТVZ-A
Done
_
.... 100%
Com p,uter 1 P rotected Mode: Off
...
Veza na stranicu ТVZ-a kada smo kliknuli misem na link. Stillovi - Windows lлternel bp lo rer
v х
1 t�t Goog ie
Seled: Sugg ested Sites .,.
� Web
Slice G a l l ery .,. •1
.,.
§Ј
.,.
�
�
.,. E_a g e .,.
5afety .,.
»
T.Qo·ls .,.
TEKST PISAN VELIKIM 1 MALIM SLOVIMA
sluzbena stranic.a tvz-a
Done
�
Computer 1 P rotected Mode:
Off
100%
...
Stilska deklaracij a 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS •
Ыiпk (trepere6i tekst)
•
попе (bez formatiranj а)
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; }
Stilovi 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;}
Јеdап оЫсап tekst Sluzbeпa straпica ТVZ-a
V eza na stranicu ТVZ-a dok nismo kliknuli misem na link.
Str. 82 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S Sbillovi
-
Wind ows Iлternel Explorer
... it- Х
�t
G009 le
р ...
Select
ј
Su g g ested Sites ..-
r.
Web Sl ice Gal lery т
'-1
Stilovi
т
§t
...
�
...
E_a g e
т
5afety
т
T.Qo·ls ... \
...
100%
т
»
Jeda11 obita11 tekst
Sluib ena stranica ТVZ-a
Com p•uter 1 P rotected Mode: Off
Done
V eza na stranicu ТVZ-a kada smo kliknuli misem na link. Stillovi
-
=
Windows lлternel bplorer
@)
Web Slice G a l lery т
т
�
т �
�
..-
E_a g e т
5afety т
»
T.Qo·ls ..-
Jeda11 obican tekst Slt1ibena straniea Ћ';Z а
Done
2.7.5
�
Computer 1 P rotected Mode:
Off
100%
...
Visina linije odlomaka
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 1 02
Izradio: Alen Simec, dipl. ing.
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%;}
Stilovi body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;} . quotation {font-style: italic; text-indent: 1 Opt; line-height: 150%;}
Tekst br. 1 sa de.finiranom klasom Tekst br. 2 sa de.finiranom klasom
Str. 84 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
=
r.i" Sbilovi - Window� [лternel Ь:p lo rer
@)
\11/еЬ �lice G a l lery т "1
т
§!
т
�
,,..
E_age
т
5afety
т
»
T.Qols ,,..
Tekst br. 1 sa definiranom klasom Tekst br. 2 sa definiranom klasom
Done
Computer 1 P rotected Mode:
2.7.6
Off
100%
т
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 : брх; }
Stilovi =
body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;} . quotation {font-style: italic; text-indent: J Opt; letter-spacing: брх;}
Str. 85 od 1 02
Izradio: Alen Simec, dipl. ing.
Osпove HTML, ХНТМL i CSS Tekst br. 1 sa definiranom klasom
=
,;; Stillovi - Windows [nterпel E:xplorer
@)
Select r.ii Sugg es:ted Sites ...
�
Web Slice Gal lery ...
...
T e ks t
b r .
1
s a
d e fin ira n o m
Dопе
2.7.7
�
E_a g e ...
;;afety ...
Т.QO·ls ... �
...
100%
...
»
k l a s o m
Computer 1 P rotected M od e :
Off
Pozicioniranje, poravnavanj e 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 klj ucпih rij eCi : •
left: poravпava tekst а lij evo
•
right: poravпava tekst па desпo
•
center: poravпava tekst и srediпu
•
j ustify: 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
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; }
Stilovi 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: J Opt; text-aligп: right;}
Lorem ipsиm 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пtegerfeи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 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 atftlis аиgие, еи cиrsиs risиs. Nиlla асситsап lиctиs molestie.
Str. 87 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
Stillovi - Window� [nternel E:xplorer
,.. -"t
.Х
1�1 Gщ le
Select r.ii 5ugges:ted 51tes ..- '
\IVeb 51ice G a l l ery ,,.
r;o Stil ovi
...
E_a g e ...
;!afety ...
»
ТQols ...
Lorem · psu m L orem ipsиm doJor sit a m et, coпsectetиr a dipisciпg e!it. Cиrabitиr egestas m oJestie /orem sit a m et uJJa m corper. Dопес id пisl а с п иЈЈа fa иcib иs p elleп tesqиe. Fиsce епiт аrси, con va//Js iп bib endиm еи, soШcitиdiп vita e odio. Cras malesиada ante поп п иllа sodaJes id eleifeп d tellиs dapibиs. Etia m ornare lectиs sit amet dиi ferm eпtиm а posиere ipsиm tiпcidип t. Sed поп est пisi. Iпteger feugia t vehicи!a ligula, ferm eпtиm coпseqиat orci molestie id. Cras пес lacиs et lorem soda/es friпgilla . Cиrab itиr at Јео velit, а с ferm eпtиm Јасиs. Nam et turp1s qшs efit mollis иJtricies eget quis nibh. Dопес pharetra te/Jиs a dipisciпg п и/Ја sиscipit пес p orta lectus pharetгa . Class aptent ta citi sociosqu ad !itora torqиen t рег соп иЬiа пostra, рег iп ceptos himeпaeos. Сгаs апtе felis, vuJp uta te поп 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 vestib ulиm ipsиm veJ rh oпcиs. Sиsp eпdisse at felis а иgие, еи сигsиs гisus. Nи/Ја асситsап Јисtиs molestie.
Done
2.7.8
Com p·uter 1 P rotected Mode:
Off
100%
... ."
Odredivanj e rubnih linija taЫica
Za razliku od HTML koda, CSS nam omogucava da definiramo stilove rubnih linij a za svaku liniju poj edinacno. 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S •
DouЫe
•
Groove
•
Ridge
•
Inset
•
Outset
th {border-style: dashed;} td {border-style: groove;}
Stilovi =
body {color: #094cal; font-family: Verdana, sans-serif; font-size: 1 2pt;} th {border-style: dashed; color: green} td {border-style: groove;}
Ime Prezime Godina rodenja Pero Peric 1989
Str. 89 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
r.
=
Stillovi - Winclows [nterпel bplorer
) l�t
u х Sugge>ted Sites ..,.
@)
Google
јЈ
....
ј
Web Slice Ga l l ery ..,.
r..i '>ti l ovi
�
..,.
g
�
..,.
E_a g e ..,.
�afety ..,.
»
TQo·ls ..,.
Ime Prezime Godina rodenja
1 Perol I Peric
9 8_9 1 1_1_
__.
_ _ _
i
Dопе
Computer 1 P rotected Mode:
Off
100%
..,.
S irina 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: l px; border-style: solid; }
Stilovi =
body {color: #094cal; font-family: Verdana, sans-serif; font-size: 1 2pt;}
Str. 90 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S th { border-width: thick; border-style:solid; } td { border-width: Јрх; border-style:solid; }
Ime Prezime Godina rodenja Pero Peric 1989
f.i Stillovi - Winclo1vs [nterпel Explorer
јЈ
..-1
Select Sugge>tecl Sites ..,.
Web Slice G a l l ery ..,.
')ti l GV i
"I
..,.
�
..,. �
�
..,. E_a ge ..,.
�afety ..,.
»
TQols ..,.
Ime Prezime Godina rodenja Pero
Peri c
Dопе
1989
•
Computer 1 P rGtected MGde:
Off
100%
..,.
Вој а linij e odreduj e se sa svoj stvom border-color.
Str. 9 1 od 1 02
Izradio: Alen Simec, dipl. ing.
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; }
Stilovi =
body {color: #094cal; font-family: Verdana, sans-serif; font-size: 1 2pt;} th { border-color: #22al 09; border- width: thick; border-style:solid; } td { border-color: red; border- width: Јрх; border-style:solid; }
Ime Prezime Godina rodenja Pero Peric 1989
Str. 92 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
=
lli,,. Stillovi - Winclows [лternel Explorer
@)
Web '>lice G a l l ery .,.
�
'>tilovi
. . . . . .. . . . . . . . . .. . . . . .
.,.
�
�
..,. E_age ..,.
�afety ..,.
»
TQol s ..,.
. . . . . . . . . . . .
:!��== l?[�.�i��==�.���I"!�. ���.����= IPerollPeric 111 9 8 9 1
Done
•
Computer 1 P rotected 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 s e и celij i koristi, n o postoj i ogranicenj e i za linij e i z a tekst: Slike moraju stati unutar prozora intemet preglednika. Ako celij a sadгZi puno teksta, опа se prosiruj e koliko moze do prvog prekida linij e 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 vrij ednostima
Str. 93 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS
Stilovi body {color: #094cal; font-family: Verdana, sans-serif; font-size: 1 2pt;} tаЫе { width: 500рх; border: Јрх solid Ыасk;}
Ime Prezime Godina rodenja Pero < td>Peric 1989
Str. 94 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
°'
Stilovi
-
Windows [nternel E:xplorer
Select � Sug ges:ted Sites ..,.
� Web Slice G a l l ery ..,. �
'>tilovi
P·rezime 1 Ime IPero IPeric
Dопе
11 9 8 9
..,. �
�
..,. E_age ..,.
�afety ..,.
»
TQol s ..,.
Godina rodenja
•
Computer 1 P rotected 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рх; )
Stilovi =
body {color: #094cal; font-family: Verdana, sans-serif; font-size: 1 2pt;} th {padding: 20рх; border: Јрх solid Ыасk;}
Str. 95 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS Ime Prezime Godina rodenja Pero Peric 1989
СЈ
"' Stillovi - Windows [nterпel E:xplorer
"'�*t -
-
[ ] l�t
@)
Google
Select
� Sug ges:ted Sites "' � Web Slice G a l l ery .,.
�
Sti l ovi
ВЕ
IPero
IPeric
�
..,.
�
�
"'
E_age ..,.
�afety ..,.
»
TQo·IS "'
Godina rodenja
11 9 8 9
Dопе
Computer 1 P rotected Mode:
Sve stil ske vrij ednosti mozete pogledati
6
..,.
и
Off
100%
...
prilogu6 .
Prilog CSS stilske vrijednosti -
-
Str. 96 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S
2.8
Korisni alati za CSS
CSS dokumenti mogu se napi sati koriste6i j ednostavni 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. Umetanj e 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 isklj uCivo pi sanju C SS-a. Jedan od bolj ih j e Top Style. TopStyle ima sve napredne opcij e koj e imaju moderni editori i j os puno vise. StyleWorx j e sasvim zadovolj avaju6i za pocetnike, oznacava sintaksu, ima podrsku za C S S l i C S S2 stilove.
2.9
Korisni linkovi za CSS
Slu.ZЬena C S S l 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 specifikacij u и koj oj su primj eri novih, do sad malo koristenih stilova. Ako zelite biti sigurni и tocno napisani kod CS S-a provj erite ga na stranici 9 . 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 http://www.w3 schools.com/css/ 9 http://jigsaw.w3.org/css-validator/ 8
Str. 97 od 1 02
Izradio: Alen Simec, dipl. ing.
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 (1 2рх), 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 (Зрх), poravnanj e teksta (poravnat s lij evom i desnom stranom). Odredite klasu za naslov (heading) i postavite veliCinu fonta ( 1 3 рх), 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 ( 1 0 рх), razmak izmedu linij a (22рх) . Za horizontalnu liniju odredite boju (plava) i nj enu deЫj inu (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 gdj e 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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S liste. Uredite slike tako d a imaju udalj enost o d 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 1 02
Izradio: Alen Simec, dipl. ing.
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 Jeff NoЫ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 & C S S : 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 C S S : 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 vi sual Ы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 1 02
Izradio: Alen Simec, dipl. ing.
Osnove НТМL, ХНТМL i C S S 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 1 8 . PageResource. com- Ьу The Web Design Resource, CSS Properties List, URL: http ://www.pageresource. com/dhtml/cssprops.htm
Str. 1 0 1 od 1 02
Izradio: Alen Simec, dipl. ing.
Osnove HTML, ХНТМL i CSS 4
Prilog
Str. 1 02 od 1 02
Izradio: Alen Simec, dipl. ing.
Prilog: ТаЫiса ASCII znakova Friendly
Character
Code
Numerical Code
Нех Code
Description
А
А
A
&#х4 1 ;
Capital А
а
а
a
&#х6 1 ;
Lowercase А
А
À
&# 1 92;
&#хСО;
Capital A-grave
а
à
à
&#хЕО;
Lowercase A-grave
А
Á
&# 193;
l ;
Capital A-acute
а
á
á
l ;
Lowercase A-acute
А
Â
&# 1 94;
&#хС2;
Capital A-circumflex
а
â
â
&#хЕ2;
Lowercase A-circumflex
А
Ã
&# 195;
&#хС3;
Capital A-tilde
а
ã
ã
&#хЕЗ;
Lowercase A-tilde
А
Ä
&# 1 96;
&#хС4;
Capital A-umlaut
а
ä
ä
&#хЕ4;
Lowercase A-umlaut
А
Å
&# 1 97;
&#хС5;
Capital A-ring
а
å
å
&#хЕ5;
Lowercase A-umlaut
А
Ā
&#x l OO;
Capital A-macron
а
ā
&#x l O l ;
Lowercase A-macron
А
Ă
&#х102;
Capital A-breve
а
ă
&#х103;
Lowercase A-breve
i\
Ą
&#х1 04;
Capital A-ogonek
q,
1 ;
&#х105;
Lowercase A-ogonek
А
Ǟ
&#xl DE;
Capital A-diaeresis and macron
а
ǟ
&#xl DF;
Lowercase A-diaeresis and macron
А
Ǻ
&#xl FA;
Capital A-acute ring
!
ǻ
&#xl FB;
Lowercase A-acute ring
ЈЕ
Æ
&# 198;
&#хС6;
Capital АЕ Ligature
а:
æ
æ
&#хЕ6;
Lowercase АЕ Ligature
ЈЕ:
Ǽ
&#xl FC;
Capital АЕ Ligature-acute
а:
ǽ
&#xl FD;
Lowercase АЕ Ligature-acute
в
в
B
&#х42;
Capital В
ь
ь
b
&#х62;
Lowercase В
Ḃ
&#х1ЕО2;
Capital B-dot
в
ь
ḃ
&#х 1ЕО3 ;
Lowercase B-dot
с
с
C
&#х43;
Capital С
с
с
c
&#х63;
Lowercase С
с
Ć
&#х1 06;
Capital C-acute
6
ć
&#х107;
Lowercase C-acute
View more...
Comments
