Ivica Kartelo - Web Kreator, HTML i CSS

IIIvvviiicccaaa KKKaaarrrttteeelllooo

WWeebb kkrr eeaattoorr11

ŠŠŠKKKOOOLLLAAA EEE---999222 SSSPPPLLLIIITTTSSSppplll iii ttt 222000000222...

WEB KREATOR / ŠKOLA E-92II

5XåLFL��,YDQL��0DUWLQL�

III

Autor: Ivica Kartelo, dipl. ing.

Naslov: Web kreator

Urednik: Ivica Kartelo

Nakladnik: Škola E-92 Split

0RVHüND��6SOLW

Fax/Tel.: 021 365-099, 021 525-689, E-mail: [email protected]: http://www.e92.hr

=D�QDNODGQLND��5XåLFD�.DUWHOR�0DUXãLü��GLSO��LXU�

Tisak: Kartular d.o.o. Split

3ULSUHPD�VORJD�]D�WLVDN�L�JUDILþNR�XUHÿHQMH��,YLFD�.DUWHOR

/HNWRU��,YDQ�-RVLS�%RãNRYLü��SURI�

8�RYRM�NQML]L�SRMDYOMXMH�VH�QHNROLNR�]DãWLüHQLK�]QDNRYD�L�QD]LYD�þLMD�MH�XSRUDEDRJUDQLþHQD�]DNRQRP��3RSLV�WLK�]QDNRYD�L�QD]LYD�NDR�L�QMLKRYLK�YODVQLND�QDOD]L�VH

kod nakladnika.

© Ivica Kartelo

Split, studeni 2002.

Sva imena firmi, osoba, proizvoda i usluga koja se pojavljuju u knjizi i uprimjerima su izmišljena.

Autor i Nakladnik ne snose odgovornost za posljedice korištenja ove knjige, niti]D�PRåHELWQH�SRJUHãNH�QDVWDOH�X�SURFHVX�VWYDUDQMD�NQMLJH�

WEB KREATOR / ŠKOLA E-92IV

V

ISBN 953 - 6245 - 12-0

WEB KREATOR / ŠKOLA E-92VI

SSSkkkrrraaaüüüeeennniii sssaaadddrrråååaaajjjKako biti autor na Internetu ................................................................................1

HTML...................................................................................................................2

HTML tag-ovi ....................................................................................................11

Tablice ...............................................................................................................21

Specijalni znakovi ..............................................................................................27

Heksadecimalni kôd za boje HTML dokumenta ................................................35

CSS.....................................................................................................................36

Literatura .............................................................................................................57

Kazalo 58

VII

SSSaaadddrrråååaaajjjKako biti autor na Internetu.................................................................................1

HTML...................................................................................................................2Kreiranje HTML dokumenta u Notepad-u.......................................................2Pohranjivanje HTML dokumenta ....................................................................3Objavite HTML dokument ..............................................................................4âWR�üH�VYLMHW�YLGMHWL".....................................................................................5

Osnovna struktura HTML dokumenta .............................................................6Napravite home page .......................................................................................7Napravite hiperlink ........................................................................................10

HTML tag-ovi ....................................................................................................11

Tablice ...............................................................................................................21Usporedba tablica i CSS ................................................................................26

Specijalni znakovi ..............................................................................................27

Heksadecimalni kôd za boje HTML dokumenta ................................................35

CSS.....................................................................................................................36Ugradite CSS u HTML dokument .................................................................36Posebni CSS list.............................................................................................37Pisanje stila in-line.........................................................................................39Uvezeni stilovi ...............................................................................................39Classes ...........................................................................................................40Kontekstualni selektor ...................................................................................40Komentari ......................................................................................................41Boja................................................................................................................41

Boja pisma .................................................................................................41Boja i slika pozadine..................................................................................413R]DGLQD�QHSRPLþQD ..................................................................................422GUHÿLYDQMH�SR]LFLMH�VOLNH�X�SR]DGLQL........................................................422GUHÿLYDQMH�GXåLQH�VOLNH�X�SR]DGLQL..........................................................43

6ORMHYL�L�SR]LFLRQLUDQMH�SRPRüX�&66 ............................................................45

WEB KREATOR / ŠKOLA E-92VIII

Position ......................................................................................................46Apsolutna pozicija .................................................................................46Relativna pozicija ..................................................................................46

Širina, visina i odnos sa susjedima ............................................................46Širina......................................................................................................46Visina.....................................................................................................472QR�ãWR�SUHWLþH .......................................................................................47

Vidljivost .......................................................................................................48&OLS��LVMHþFL�...............................................................................................48z-index .......................................................................................................49

Pismo .............................................................................................................49Font-family ................................................................................................50Font-size ....................................................................................................51

Point.......................................................................................................51Em..........................................................................................................51Pixel .......................................................................................................51Ostale jedinice .......................................................................................51Keywords ...............................................................................................529HOLþLQD�X�SRVWRFLPD .............................................................................52

Font-style ...................................................................................................52Font-weight................................................................................................52Font-variant................................................................................................53Text-transform ...........................................................................................53

5D]PDFL�L]PHÿX�VORYD��ULMHþL�UHGDND�� .........................................................53Na kraju .........................................................................................................56

Literatura .............................................................................................................57

Kazalo 58

IX

PPPrrreeedddgggooovvvooorrr8�NXüH�MH�XãDR�WLVDN��SD�UDGLR�L�79��D�VDGD�XOD]L�L�,QWHUQHW��6YDNL�RG�QDYHGHQLKmedija donio je nešto novo - radio je donio glas, pa smo mogli istovremeno raditisvoj posao i slušati vijesti, glazbu, obrazovne emisije i sl. TV nas je ponovoYH]DOD�VYRMRP�VOLNRP��âWR�MH�WR�QRYR�GRQLR�,QWHUQHW"�,QWHUQHW�MH�GRQLR�PRJXüQRVWGD�VYDWNR�RG�QDV�EXGH�L]YRU�LQIRUPDFLMH��DXWRU��,�WR�QH�VDPR�]D�VYRMH�XNXüDQH�VYRM�NYDUW�LOL�PMHVWR�åLYOMHQMD��QHJR�]D�FLMHOL�VYLMHW��1H�PRUDWH�YLãH�XUH]LYDWL�VYRMHPLVOL�QD�NOXSH�X�SDUNX�LOL�SURþHOMD�]JUDGD��PRåHWH�LK�REMDYLWL�QD�:HE�X�L�XþLQLWLSULVWXSDþQLPD�NDNR�NROHJDPD�L]�ILUPH�WDNR�L�ELOR�NRPH�V�GUXJH�VWUDQH�=HPOMH�2VLP�WHNVWD�PRåHWH�REMDYLWL�L�VYRMH�IRWRJUDILMH��OLNRYQH�UDGRYH��JOD]EX��YLGHR�0RåHWH�RWYRULWL��YL�LOL�YDãD�ILUPD��L�VYRMX�RQ�OLQH�79�L�UDGLR�SRVWDMX�L�ELWL�MHGDQPHÿX�PLOLMXQLPD�NRML�VX�WR�YHü�SRNUHQXOL��VWUHDPLQJ�YLGHR�L�VWUHDPLQJ�DXGLR��

Kad pogledate što vam se sve kao autoru nudi besplatno, s jedne strane, a kaoNRULVQLNX�QDSODüXMH��V�GUXJH�VWUDQH��XSDGD�X�RþL�YHOLND�QH�UDYQRWHåD��0QRJL�NRML�ELWR�PRJOL�LVWRJ�WUHQXWND��QH�SRNUHüX�VYRMH�RQ�OLQH�UDGLR�LOL�79�SRVWDMX�L]�SURVWRJrazloga što nema slušateljstva na njihovom govornom jeziku. A slušateljstva imaVDPR�WDPR�JGMH�VH�SUHãOR�QD�QDþLQ�QDSODWH�,QWHUQHWD�NDR�ãWR�VH�QDSODüXMX�NODVLþQLPHGLML��PMHVHþQRP�SUHWSODWRP��LOL�UHNODPRP��'RN�VH�JRG�,QWHUQHW�EXGH�SODüDRSR�YUHPHQX�VSRMHQRVWL�QD�QM�D�QH�PMHVHþQRP�SUHWSODWRP��PQRJH�QMHJRYHPRJXüQRVWL�üH�þHNDWL�QHLVNRULãWHQH��DOL�WR�]QDþL�GD�üH�þHNDWL�L�QRYD�UDGQD�PMHVWD�

8ãWHGH��SRYHüDQMH�NRQNXUHQWQRVWL�L�RVWDOH�SRVORYQH�PRJXüQRVWL�NRMH�,QWHUQHW�QXGLILUPDPD��RG�RQLK�V�MHGQLP�GR�RQLK�V�WLVXüH�]DSRVOHQLK��RJURPQH�VX�L�SRVORYQLsvijet je to itekako prepoznao.

=ERJ�JRUH�QDYHGHQRJD�QDSLVDR�VDP�RYX�NQMLJX��,DNR�SRVODWL�H�PDLO�PRåHWH�D�GD�QH]QDWH�LãWD�R�,QWHUQHWX��SULPLWL�JD�QH�PRåHWH�D�GD�QH�]QDWH�EDUHP�QDMNUDüX�YHU]LMXSULþH�R�VLJXUQRVWL�QD�,QWHUQHWX�

U ovoj sam knjizi konkretizirao nešto najnevjerojatnije na Internetu. Svatko tko jeLNDGD�XSDOLR�UDþXQDOR�L�QDSLVDR�ELOR�ãWR�X�:RUGX�L�WR�SRKUDQLR��ELW�üH�X�VWDQMX��]Dsvega nekoliko minuta, napraviti i objaviti svoju prvu web stranicu. DrugaQHYMHURMDWQRVW�MH�WR�GD�YDV�WR�QHüH�QLãWD�NRãWDWL��QLWL�MHGQRVWDYQL�MH]LN�+70/��QLWLeditor teksta Notepad, niti pak prostor na Internetu, a sam proces objavljivanjaZHE�VWUDQLFD�QD�,QWHUQHW�SRWUDMDW�üH�QHNROLNR�VHNXQGL�

WEB KREATOR / ŠKOLA E-92X

Nakon opisa svih HTML tag-ova, posebnih znakova i boja, slijedi detaljan opisCSS tehnologije (Cascading Style Sheets). CSS je nadogradnja HTML koda kojani jednog autora web site-a nije ostavila ravnodušnim. Što ta tehnologijaRPRJXüDYD�NDNR�QDSUHGQRP�WDNR�L�DXWRUX�SRþHWQLNX��PRåHWH�SRJOHGDWL�QD�85/www.inet.hr/~ikartelo/cssgalerija/��8NROLNR�YDV�MH�]DVPHWDOD�RJUDQLþHQRVW�+70/MH]LND�X�RGQRVX�QD�PRJXüQRVWL�NRMH�VWH�LPDOL�X�:RUGX��WROLNR�üH�YDV�]DþXGLWLQHRJUDQLþHQH�PRJXüQRVWL�&66�WHKQRORJLMH��NRMD�XYHOLNH�QDGLOD]L�PRJXüQRVWLWorda. I sve to besplatno i na istom mediju koji nazivamo Web.

Studeni 2002. Autor

KKKaaakkkooo bbbiiittt iii aaauuutttooorrrnnnaaa IIInnnttteeerrrnnneeetttuuu1DSUDYLW�üHPR�L�REMDYLWL�MHGDQ�ZHE�VLWH�SRPRüX�EHVSODWQRJ�+70/�D��WHNVW�HGLWRUDNotepad (koji dobijete s Windows operacijskim sustavom) i besplatnog hostingafirme Iskon Internet��1HGRVWDWNH�+70/�QDGRNQDÿXMHPR�WDEOLFDPD�SRPRüX�NRMLKQD�QDMEUåL�PRJXüL�QDþLQ�SR]LFLRQLUDPR�HOHPHQWH�QD�ZHE�VWUDQLFL��3RPRüX�WDEOLFDPRåHPR�QDSUDYLWL�L�VORMHYH��3RGORJD�ZHE�VWUDQLFH�MH�QDMQLåL�VORM��SRGORJD�WDEOLFHMH�VOMHGHüL�YLãL�VORM��D�SRGORJD�VWDQLFH�X�WDEOLFL�MH�QDMYLãL�VORM��3RãWR�PRåHWH�SUDYLWLWDEOLFH�X�WDEOLFL��RQGD�PRåHWH�LPDWL�SR�åHOML�VORMHYD�

$OL�ãWR�üHPR�XþLQLWL�DNR�åHOLPR�GD�QDP�VH�]QDN�QDãH�ILUPH�SRMDYL�QHSRPLþDQ�Xdonjem desnom kutu prozora Web browser-a (ili na sredini, ili bilo gdje na HTMLGRNXPHQWX��L�GD�FLMHOL�VDGUåDM�klizi�SUHNR�QMHJD"�âWR�üHPR�XþLQLWL�NDG�SRåHOLPRNRULVWLWL�YLãH�RG�VHGDP�PRJXüLK�+70/�RYVNLK�YHOLþLQD�SLVPD"�âWR�üHPR�SDNXþLQLWL�NDG�SRåHOLPR�GL]DMQLUDWL�YUOR�DWUDNWLYQX�ZHE�VWUDQLFX�EH]�LMHGQH�JUDILNH�DGD�LSDN�L]JOHGD�JUDILþNL�L�EU]R�VH�XþLWDYD"�2GJRYRU�QD�RYD�SLWDQMD�MH�XYLMHN�LVWL�SRVHJQXW�üHWH�]D�EHVSODWQRP�&66�WHKQRORJLMRP�

CSS tehnologiju, kao i HTML tehnologiju razvija World Wide Web Consortium�KWWS��ZZZ�Z��RUJ��.DG�SULMHÿHWH�VOMHGHüH�SRJODYOMH��NRMH�QRVL�QD]LY�+70/�SRPLVOLW�üHWH�NDNR�QLNDG�QHãWR�MHGQRVWDYQLMH�RG�WRJD�QLVWH�XþLOL�X�åLYRWX��.DG�SDNSULMHÿHWH�SRJODYOMH�&66��]DNOMXþLW�üHWH�NDNR�QH�SRVWRMH�JUDQLFH�MHGQRVWDYQRVWL�Osim toga i ovdje vrijedi izreka - što jednostavnije to bolje (ljepše). Ako se naNUDMX�SRJODYOMD�R�+70/�X�UD]RþDUDWH�ãWR�QH�PRåHWH�XþLQLWL�VYH�ãWR�PRåHWH�XMicrosoft Word-u, na kraju poglavlja o Cascading stylesheets�UD]RþDUDW�üHWH�VH�XMicrosoft Word.

WEB KREATOR / ŠKOLA E-922

HTML

Kreiranje HTML dokumenta u Notepad-u

2WYRULWH�1RWHSDG�SRPRüX�QDUHGEH�6WDUW�3URJUDPV�$FFHVVRULHV�1RWHSDG�L�WLSNDMWHVOMHGHüL�+70/�N{G�

<html>

<head>

<title>Multimedija na Internetu</title>

</head>

<body>

<h1>Streaming audio</h1>

�S!5HDO3OD\HU�MH�SUYR�LPH�X�VWUHDPLQJ�DXGLR�WHKQRORJLML��SD�üHPR�QD�QMHJRYRPprimjeru vidjeti kako ta tehnologija distribucije zvuka na Internetu radi.

�S!6SRMHQL�VWH�QD�,QWHUQHW��SRNUHQXOL�VWH�:HE�EURZVHU�L�SR]YDOL�åHOMHQL�85/��1DZHE�VWUDQLFL�VWH�SULWLVQXOL�WLSNX�PLãD�QD�KLSHUOLQN�SUHPD�5HDO3OD\HU�]YXþQRP]DSLVX��7DM�KLSHUOLQN�QH�YRGL�L]UDYQR�GR�]YXþQH�GDWRWHNH��YHü�SRWLþH�GD�:HESRVOXåLWHOM�SRãDOMH�:HE�EURZVHUX�5HDO3OD\HU�PHWD�GDWRWHNX��2YD�PHWD�GDWRWHND�MHPDOD�WHNVWXDOQD�GDWRWHND�NRMD�VDGUåL�SRGDWNH�R�VWYDUQRM�ORNDFLML��85/��5HDO3OD\HU�]YXþQH�GDWRWHNH��3RUHG�WRJD�VDGUåL�L�XSXWH�YDãHP�:HE�EURZVHUX�GDSRNUHQH�SURJUDP�5HDO3OD\HU�DXGLR�SOD\HU�QD�YDãHP�UDþXQDOX�SRWUHEDQ�]D�VOXãDQMH5HDO3OD\HU�]YXþQH�GDWRWHNH��NRML�YHü�LPDWH�RG�SULMH�LQVWDOLUDQ�QD�VYRP�UDþXQDOX��

</body>

</html>

Napomena��.DG�:HE�EURZVHU�XþLWD�JRUQML�+70/�GRNXPHQW��RQ�üH�JD�RYDNRWXPDþLWL�

• 7HNVW�XQXWDU�WDJ�RYD��WLWOH!��L��WLWOH!�VWDYLWL�üX�X�OLQLMX�QDVORYD�SUR]RUD�

3

• Tekst unutar tag-ova <h1> i </h1> je glavni naslov web stranice. AutorQLMH�NRULVWLR�DWULEXWH�]D�YHOLþLQX�SLVPD��ERMX�SLVPD�LWG��SD�WR�]QDþL�GD�üXatribute za H1 odrediti ja prema mojim predzadanim opcijama(Tools/Internet Options/General/Fonts):

(Tools/Internet Options/General/Colors):

,WG��]D�RVWDOH�WDJ�RYH��8�GDOMQMHP�WHNVWX�XSR]QDW�üHWH�VH�V�DWULEXWLPD�WDJ�RYD�Atribute treba svakako koristiti, a ne prepuštati to predzadanim (default)vrijednostima u Web browserima.

Pohranjivanje HTML dokumenta

3RKUDQLWH�GRNXPHQW�SRPRüX�QDUHGEH�)LOH�6DYH�$V��8�GLMDORJX�6DYH�$V��X�SROMXFile name tipkajte ime datoteke streaming.htm.


Odaberite gumb Save.

Objavite HTML dokument

Spojite se na Internet. Otvorite Internet Explorer Browser. U polje AddressWLSNDMWH�DGUHVX�)73�SRVOXåLWHOMD�NRMX�VWH�GRELOL�RG�,VNRQ�,QWHUQHWD��8�PRP�VOXþDMXje to:

ftp://ikartelo:[email protected]

8�JRUQMRM�DGUHVL��LNDUWHOR��MH�PRMH�NRULVQLþNR�LPH�LOL�XVHUQDPH��D�POS��JU�PRMDlozinka ili password.

5

0RM�SRVOXåLWHOM�QLMH�SUD]DQ�MHU�VDP�JD�YHü�NRULVWLR��2WYRULW�üX�QRYX�PDSX�L�X�QMXpohraniti (objaviti) sve HTML dokumente iz ovoga dijela knjige.

1RYX�PDSX�QDSUDYLWH�SRPRüX�QDUHGEH�)LOH�1HZ�)ROGHU��7LSNDMWH�LPH�PDSHinternet i pritisnite Enter.

Otvorite mapu internet s dva pritiska tipke miša na nju. U tu mapu pohranite(objavite) HTML dokument streaming.htm.

.RSLUDMWH�GDWRWHNX�VWUHDPLQJ�KWP�V�ORNDOQRJ�GLVND�YDãHJ�UDþXQDOD�X�PDSX�LQWHUQHWQD�)73�SRVOXåLWHOMX�SRPRüX�QDUHGEL�&RS\�3DVWH��NDR�ãWR�VWH�QDXþLOL�UDGLWL�XWindows Exploreru.

1DNRQ�NRSLUDQMD�QD�)73�SRVOXåLWHOMX�X�PDSL�LQWHUQHW�LPDW�üHWH�+70/�GRNXPHQWstreaming.htm:

âWR�üH�VYLMHW�YLGMHWL"

Objavili ste svoj prvi HTML dokument. URL mog web site-a, koji mi je dao IskonInternet, je:


www.inet.hr/~ikartelo

8�SROMH�$GGUHVV��,QWHUQHW�([SORUHU�%URZVHU�D��WLSNDW�üX�VOMHGHüL�85/www.inet.hr/~ikartelo/internet/streaming.htm i pritisnuti Enter.

Ovako izgleda vaš prvi HTML dokument.

Osnovna struktura HTML dokumenta

Osnovna struktura svakog HTML dokumenta, pa tako i našega, izgleda ovako:

<html>

<head>

<title>Multimedija na Internetu</title>

</head>

<body>

<h1>Streaming audio</h1>

7

<p>tekst odlomka

<p>tekst odlomka

</body>

</html>

,]PHÿX�WDJRYD��KWPO!�L��KWPO!�QDOD]L�VH�FLMHOL�+70/�GRNXPHQW��,]PHÿX�WDJRYD<head> i </head> stavljaju se elementi HTML dokumenta koji se ne vide izravnoX�:HE�EURZVHUX��7HNVW�RNUXåHQ�WDJ�RYLPD��WLWOH> i </title> vidi se u liniji naslovaprozora Web browsera.

6YH�ãWR�åHOLWH�GD�YDãL�SRVMHWLWHOML�YLGH�X�:HE�EURZVHUX��VWDYLW�üHWH�X�VHNFLMXRNUXåHQX�WDJ�RYLPD��ERG\!�L��ERG\!�

1DSUDYLOL�VWH�L�REMDYLOL�VYRM�SUYL�+70/�GRNXPHQW��8]�SRPRü�WDEOLFH�+70/WDJRYD�PRåHWH�QDVWDYLWL�SUDYLWL�VYRMH�+70/�GRNXPHQWH��'D�ELVWH�QDSUDYLOL�ZHEsite, morate napraviti home page - HTML datoteka koja nosi ime index.htm.

Napravite home page

8�1RWHSDG�X�QDSLãLWH�VOMHGHüL�+70/�GRNXPHQW�

<html>


<head>

<title>Nova knjiga Internet</title>

</head>

<body>

<h1>Multimedija na Internetu</h1>

<img src="home.gif">

�S!3RVWRMH�GYD�QDþLQD�NDNR�VH�GROD]L�GR�]YXþQLK�L�YLGHR�]DSLVD�SUHNR�,QWHUQHWD�To su streaming audio (video) i download - prijenos datoteke na lokalni diskQDãHJ�UDþXQDOD�L�SRNUHWDQMH�GDWRWHNH�RII�OLQH��'RZQORDG�MH�SRSXODUQLML�MHU�VWH�QDInternet spojeni samo dok skidate datoteku s Interneta.

�S!6WUHDPLQJ�WHKQRORJLMD�RPRJXüDYD�VOXãDQMH�]YXND�X�NRQWLQXLWHWX�NDNR�SULVWLåHGR�NOLMHQW�SURJUDPD�QD�QDãHP�UDþXQDOX��=DKYDOMXMXüL�VWUHDPLQJ�WHKQRORJLML�GDQDVLPD�QD�WLVXüH�RQ�OLQH�UDGLR�VWDQLFD�L�VYH�YLãH�RQ�OLQH�79�SRVWDMD��,PDWL�GDQDV�VYRMXon-line radio stanicu tehnološki je vrlo jednostavno.

</body>

</html>

Dokument pohranite pod imenom index.htm. U ovom HTML dokumentu imamo iVOLNX�KRPH�JLI�NRMD�MH�XJUDÿHQD�QD�VOMHGHüL�QDþLQ�

<img src="home.gif">

gdje src�R]QDþDYD�ORNDFLMX�VOLNH��$GUHVD�VOLNH�PRåH�ELWL�DSVROXWQD�L�UHODWLYQD��8JRUQMHP�SULPMHUX�MH�UHODWLYQD��D�SR�DGUHVL�MH�YLGOMLYR�GD�üH�VOLND�ELWL�REMDYOMHQD�XLVWRM�PDSL�X�NRMRM�L�+70/�GRNXPHQW�LQGH[�KWP��'DNOH��NUHLUDMWH�JUDILNX�SR�åHOML�Lpohranite pod imenom home.gif, ili skenirajte, ili kopirajte s Interneta i sl.

6SRMLWH�VH�QD�,QWHUQHW�L�REMDYLWH��NRSLUDMWH��QD�JRUH�RSLVDQL�QDþLQ��+70/GRNXPHQW�LQGH[�KWP�L�JUDILþNX�GDWRWHNX�KRPH�JLI��1DNRQ�REMDYH��QD�DGUHVL

ftp://ikartelo:[email protected]/internet/ su tri datoteke:

9

6YRM�QRYL�ZHE�VLWH�PRJX�VDGD�SRJOHGDWL�X�,QWHUQHW�([SORUHU�X�DNR�WLSNDP�VOMHGHüXURL adresu:

www.inet.hr/~ikartelo/internet


.DG�QH�QDSLãHPR�QD]LY�+70/�GRNXPHQWD��YHü�VDPR�LPH�PDSH��RQGD�:HESRVOXåLWHOM�SRãDOMH�QDãHP�:HE�EURZVHUX�+70/�GRNXPHQW�X�WRM�PDSL�NRML�LPDGDWRWHþQR�LPH�LQGH[�KWP�

Napravite hiperlink

8�1RWHSDG�X�RWYRULWH�+70/�GRNXPHQW�LQGH[�KWP�L�GRGDMWH�VOMHGHüH�WDJ�RYH�]Dhiperlinkove preko teksta i preko slike:

<h1 align="center"><a href="streaming.htm">Multimedija na Internetu</a></h1>

<p align="center"><a href="streaming.htm"><img src="home.gif"></a></p>

Pohranite dokument pod imenom index.htm i objavite. Isprobajte kakofunkcioniraju hiperlinkovi.

6DGD�NDGD�]QDWH�RVQRYQX�VWUXNWXUX�+70/�GRNXPHQWD��SRPRüX�WDEOLFD�NRMHVOLMHGH�PRüL�üHWH�QDSUDYLWL�GL]DMQ�ZHE�VWUDQLFD�NDNDY�åHOLWH�

11

HTML tag-ovi

Osnovni tag-ovi

<html></html>Kreiraju HTML dokument.

<head></head>Kreiraju sekciju zaglavlja u koju se pišu elementi HTML dokumenta koji se nepojavljuju izravno na web stranici.

<body></body>Definiraju vidljivi dio HTML dokumenta.

Header Tag-ovi

<title></title>'HILQLUDMX�WHNVW�NRML�üH�VH�SRMDYLWL�X�OLQLML�QDVORYD�SUR]RUD�:HE�EURZVHUD�

Body atributi

<body bgcolor="#FFFFFF"> ili <body bgcolor="yellow">Boja pozadine ispisana heksadecimalnim kôdom ili engl. nazivom.

<body text="#FF0000"> ili <body text="red">Zadaje boju teksta. Koristite eng. naziv za boju ili heksadecimalni kôd.

<body link="#003399">Zadaje boju hiperlinka. Koristite eng. naziv za boju ili heksadecimalni kôd.

<body vlink="#00FFFF">=DGDMH�ERMX�SRVMHüHQRJ�KLSHUOLQND��.RULVWLWH�HQJ��QD]LY�]D�ERMX�LOLheksadecimalni kôd.

<body alink="#999966">Zadaje boju hiperlinka kad na njega pritisnete tipku miša. Koristite eng. naziv zaboju ili heksadecimalni kôd.

<body background="podloga.gif">2YDM�WDJ�VWDYOMD�JUDILþNX�GDWRWHNX�X�SRGORJX��:HE�SRVOXåLWHOM�ãDOMH�MHGQX


GDWRWHNX��D�:HE�EURZVHU�MH�XPQRåL�NROLNR�MH�SRWUHEQR�SXWD�GD�EL�V�QMRP�SRNULRcijelu web stranicu. Na engleskom se taj proces naziva tiling��.DG�ELVPR�åHOMHOLVDPR�MHGQX�JUDILþNX�GDWRWHNX�X�SRGOR]L��PRUDOL�ELVPR�MH�GLPHQ]LRQLUDWL�WDNR�GDSRNULMH�L�QDMYHüH�UH]ROXFLMH��QSU��ãLURNX��SLNVHOD�D�YLVRNX��SLNVHOD��7DNRYHOLND�JUDILþND�GDWRWHND�GXJR�EL�VH�XþLWDYDOD��SD�MH�ULMHWNR�X�XSRUDEL�

=DWR�VH�NRULVWH�JUDILþNH�GDWRWHNH�NRMH�VH�EU]R�XþLWDYDMX��D�LSDN�QDSUDYH�SRGORJXNDNYX�VWH�åHOMHOL��1SU��DNR�åHOLWH�GD�SRGORJD�EXGH�X�GYD�UD]QRERMQD�RNRPLWDWUDJD��QDFUWDW�üHWH�VOMHGHüX�JUDILNX�

âLULQD�QHND�MRM�EXGH��SLNVHOD��D�YLVLQD��SLNVHO��8PQRåDYDQMH�RYH�JUDILNH�X:HE�EURZVHUX�VWYRULW�üH�GYRERMQX�SRGORJX��OLMHYL�XåL�WUDJ�ERMH�L�GHVQL�ãLUL�WUDJELMHOH�ERMH��X�QDãHP�SULPMHUX��$NR�åHOLWH�SRGORJX�V�SRQDYOMDMXüRP��WHPRP��PRåGD�üH�YDP�ELWL�GRYROMQD�JUDILND�YHOLþLQH��[��SLNVHO�

<body bgcolor="yellow" text="#FF0000" link="#003399" vlink="#00FFFF"alink="#999966" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0style="font-family: Verdana, Arial, Helvetica, sans-serif">

%RG\�DWULEXWH�PRåHWH�SLVDWL�VYH�XQXWDU�MHGQH�]DJUDGH��ERG\�DWULEXWL!��.DG�åHOLWHRGUHGLWL�WLS�SLVPD��PRUDWH�NRULVWLWL�VWLORYH��R�&66�þLWDMWH�GDOMH�X�RYRM�NQML]L��

U primjeru:

<body style="font-family: Verdana, Arial, Helvetica, sans-serif">

VH�QDYRGL�YLãH�WLSRYD�MHU�VYL�:HE�EURZVHUL�L�VYD�UDþXQDOD�QH�SRGUåDYDMX�LVWH�WLSRYHSLVDPD��3&�SRGUåDYDMX�$ULDO��D�0DF�RYL�+HOYHWLFX�LWG�

Tekst tag-ovi

<pre></pre>Kreira preformatted�WHNVW��7HNVW�NRML�RNUXåLWH�RYLP�WDJ�RYLPD�SRMDYLW�üH�VH�XSLVPX�V�ILNVQLP�SRPDNRP��VYDNR�VORYR�LPD�LVWL�SURVWRU��L��L��Z��QSU��L�ELW�üHSULND]DQ�WRþQR�RQDNR�NDNR�VWH�åHOMHOL�V�RE]LURP�QD�QRYL�UHGDN��2YDM�WDJ�MHposebno pogodan za pjesme.

<h1></h1>Kreira naslov najviše razine.

13

<h6></h6>.UHLUD�QDVORY�QDMQLåH�UD]LQH�

<b></b>Kreira bold-irani tekst (masni tekst).

<i></i>Kreira italic tekst (kurziv).

<tt></tt>Kreira teletype��LOL�WHNVW�X�VWLOX�SLVDüHJ�VWURMD��7R�MH�LVWL�VWLO�NDR�preformatted tekst(<pre></pre>) samo se lomi kao normalni tekst a ne tamo gdje ste vi pritisnuli(QWHU��8NROLNR�åHOLWH�GD�WHNVW�SULMHÿH�X�QRYL�RGORPDN�NRULVWLW�üHWH�WDJ��S!��X�QRYLredak tag <br> itd.

<cite></cite>.UHLUD�FLWDW�QDMþHãüH�X�italic-u (kurzivu).

<em></em>Kreira italic ili bold tekst.

<strong></strong>Kreira italic ili bold tekst.

<font size=7></font>2GUHÿXMH�YHOLþLQX�SLVPD�RG��GR��

<font face=arial>Tekst</font><font face="times new roman">Tekst</font>7LS�SLVPD��.DG�SLVPR�X�LPHQX�LPD�GYLMH�LOL�YLãH�ULMHþL�LPH�SLVDWL�SRG�QDYRGQLFLPD�

<font color="#99FF66"></font>2GUHÿXMH�ERMX�SLVPD�

Hiperlinkovi

<a href="URL">Tekst</a>

Primjer 1:

<a href="streaming.htm">Multimedija na Internetu</a>


Primjer 2:

<a href="streaming.htm"><img src="home.gif"></a>Kreira hiperlink od teksta ili slike.

<a href="mailto:E-MAIL">Tekst ili slika</a>.UHLUD�KLSHUOLQN�PDLOWR��RWYRULW�üH�VH�SURJUDP�]D�VODQMH�H�PDLOD�V�XSLVDQRP�H�mail adresom u polju TO).

<a name="NAME">Tekst ili slika</a>Kreira bookmark (cilj) u jednom HTML dokumentu.

<a href="#NAME">Tekst ili slika</a>Hiperlink prema bookmark-u, cilju u istom HTML dokumentu.

Formatiranje

<p>Kreira novi odlomak.

<p align="center">Poravnava odlomak left, right, ili center.

<br>Ubacuje prijelom retka.

<blockquote>odlomak</blockquote>8YODþL�RGORPDN�V�REMH�VWUDQH�

<dl></dl>Kreira definition list��UMHþQLN��GLMDOR]L�

Primjer:

�GO!�GW!,YDQD�GG!1DMYLãH�VDWL�SURYRGLP�QD�,QWHUQHWX�UDGL�03�JOD]EH��3RþHOD�VDP�þDN�VQLPDWL�L�VWUHDPLQJ�DXGLR�

�GW!/LGLMD�GG!0HQL�MH�03��QD�GUXJRP�PMHVWX��1DMYLãH�PH�]DRNXSLEUEOMDQMH�SUHNR�,5&�D��$�NDNR�VQLPDã�VWUHDPLQJ�DXGLR"

15

��GO!

8�:HE�EURZVHUX�üH�WR�L]JOHGDWL�RYDNR�

<dt>3UHWKRGL�VYDNRP�WHUPLQX�X�UMHþQLNX�LOL�LPHQX�X�GLMDORJX��9LGL�JRUQML�SULPMHU�

<dd>3UHWKRGL�VYDNRM�GHILQLFLML�X�UMHþQLNX�LOL�FLWDWX�X�GLMDORJX��9LGL�JRUQML�SULPMHU�

<ol></ol>.UHLUD�QXPHULþNX�OLVWX�

Primjer:

�S!8�&66�WHKQRORJLML�VWLORYH�PRåHWHNRULVWLWL�QD��QDþLQD��RO!�OL!�,Q�OLQH��OL!�8JQMHåÿHQL�VWLORYL�QD�SRþHWNX�+70/GRNXPHQWD��OL!�/LQN�SUHPD�&66�OLVWX�XQXWDU�ZHE�VLWH�D��OL!�/LQN�SUHPD�&66�OLVWX�XQXWDU�GUXJRJ�ZHEVLWH�D��RO!

8�:HE�EURZVHUX�JRUQML�üH�+70/�N{G�L]JOHGDWL�RYDNR�

<li>


Prethodi svakoj stavki u numeriranoj listi. Vidi gornji primjer.

<ul></ul>Kreira bulleted listu.

<li>Prethodi svakoj stavki u bulleted listi.

<div align="center">)RUPDWLUD�VYH�RGORPNH�NRML�VOLMHGH��.RULVWL�VH�]D�IRUPDWLUDQMH�YHüHJ�GLMHOD�+70/dokumenta, pa je radi toga posebno korišten u primjeni stilova (stylesheets -CSS).

Grafika

<img src="URL">'RGDMH�VOLNX�+70/�GRNXPHQWX��85/�PRåH�ELWL�relativna i apsolutna adresa.

<img src="URL" align="center">Poravnava sliku: left, right, center, bottom, top, middle.

<img src="URL" border=0>2GUHÿXMH�GHEOMLQX�RNYLUD�RNR�VOLNH�

<hr>Ubacuje vodoravnu crtu.

<hr size=50>Definira debljinu crte.

<hr width=100%>Definira širinu crte u postocima ili apsolutnim vrijednostima.

<hr noshade>Kreira crtu bez sjene.

Tablice

<table></table>Kreira tablicu.

<tr></tr>

17

Kreira svaki redak u tablici.

<td></td>Kreira svaku stanicu u retku tablice.

<th></th>Kreira naslovni redak tablice (normalna stanica s bold-iranim i centriranimtekstom).

7DEOLþQL�DWULEXWL

<table border=1>2GUHÿXMH�GHEOMLQX�RNYLUD�VYDNH�VWDQLFH�X�WDEOLFL�

<table cellspacing=5>2GUHÿXMH�ãLULQX�SURVWRUD�L]PHÿX�VWDQLFD�X�WDEOLFL�

<table cellpadding=4>2GUHÿXMH�ãLULQX�UXEQLND�XQXWDU�VYDNH�VWDQLFH�X�WDEOLFL�

<table width=350 ili 80%>2GUHÿXMH�ãLULQX�WDEOLFH�X�SLNVHOLPD�LOL�SRVWRFLPD�ãLULQH�GRNXPHQWD�

<td width="30%" background="plava.gif" height="60"><IMGSRC="zalazgornji.gif"></td>

âLULQD�VWDQLFH��RG�ãLULQH�WDEOLFH��X�SRGOR]L�üH�VH��UD]PQRåLWL��VOLND�SODYD�JLI�YLVLQD�VWDQLFH��UHWND��SLNVHOD��VDGUåDM�VWDQLFH�MH�VOLND�]DOD]JRUQML�JLI�

<tr align="left"> ili <td align="left">2GUHÿXMH�SRUDYQDQMH�VWDQLFH��VWDQLFD��OHIW��FHQWHU��RU�ULJKW��

<tr valign="top"> ili <td valign="top">2GUHÿXMH�RNRPLWR�SRUDYQDQMH�VWDQLFH��VWDQLFD��WRS��PLGGOH��RU�ERWWRP��

<td colspan=1>2GUHÿXMH�EURM�VWXSDFD�NRML�REXKYDüD�MHGQD�VWDQLFD��VSDMDQMH�YLãH�VWDQLFD�X�MHGQX(default=1).

<td rowspan=1>2GUHÿXMH�EURM�UHGDND�NRMH�REXKYDüD�MHGQD�VWDQLFD��VSDMDQMH�YLãH�VWDQLFD�X�MHGQX(default=1).


<td nowrap>6SUHþDYD�SULMHORP�UHGDND�WHNVWD�X�VWDQLFL�

Frames (Okviri)

<frameset></frameset>Precedes the <body> tag in a frames document; can also be nested in otherframesets

Primjer:

äHOLWH�þHWLUL�RNYLUD�QD�HNUDQX��NDR�QD�VOMHGHüRM�VOLFL�

HTML kôd se piše iznad sekcije <body> i izgleda ovako:

</head>

<frameset rows="64,*,64"> <frame name="top" scrolling="no" noresizetarget="contents"> <frameset cols="150,*"> <frame name="contents" target="main"> <frame name="main"> </frameset> <frame name="bottom" scrolling="no" noresizetarget="contents"> <noframes>

<body>

<frameset rows="64,*,64">2GUHÿXMH�YLVLQX�UHGDND�XQXWDU�frameset-a u brojevima piksela ili postocima odXNXSQH�YLVLQH�GRNXPHQWD�� ]QDþL�QHRGUHÿHQR��L�X�WRP�VOXþDMX�üH�WDM�VWXSDFzauzeti cijeli preostali dio prozora Web browsera.

19

<frameset cols="150,*">2GUHÿXMH�ãLULQX�VWXSDFD�XQXWDU�frameset-a u brojevima piksela ili postocima odukupne širine dokumenta.

<frame>Definira jedan okvir unutar frameset-a.

<noframes></noframes>'HILQLUD�ãWR�üH�VH�GRJRGLWL�X�:HE�EURZVHUX�NRML�QH�SRGUåDYD�RNYLUH�

Frames - atributi

<frame src="URL">2GUHÿXMH�NRML�üH�+70/�GRNXPHQW�ELWL�YLGOMLY�X�RNYLUX�

<frame name="ime">Imenuje okvir kako bi se mogli pozvati na taj okvir u HTML kôdu.

<frame marginwidth=1>2GUHÿXMH�OLMHYL�L�GHVQL�UXEQLN�RNYLUD��PRUD�ELWL��LOL�YHüL�

<frame marginheight=1>2GUHÿXMH�JRUQML�L�GRQML�UXEQLN�RNYLUD��PRUD�ELWL��LOL�YHüL�

<frame scrolling="no">2GUHÿXMH�SRVWRMDQMH�LOL�QHSRVWRMDQMH�OLQLMH�]D�SRPLFDQMH��scroll bar��PRJXüHvrijednosti su "yes," "no," ili "auto" (predzadano je "auto").

<frame noresize>6SUHþDYD�NRULVQLND�GD�SURPMHQL�YHOLþLQX�RNYLUD�

Forms (Obrasci)

'D�EL�REUDVFL��)RUPV��ELOL�X�IXQNFLML�PRUDWH�QDSLVDWL�&*,�VFULSW��3RPRüX�+70/kôda kreirate samo izgled obrasca na web stranici.

<form></form>Kreira obrazac.

<select multiple name="NAME" size=broj stavki vidljivih bezpomicanja></select>


.UHLUD�SRPLþQL�L]ERUQLN��&UHDWHV�D�VFUROOLQJ�PHQX�

<option>2GUHÿXMH�VYDNX�VWDYNX�

<select name="NAME"></select>Kreira pulldown menu��SDGDMXüL�L]ERUQLN�LOL�NRPELQDFLMVNL��NRPER��

<option>2GUHÿXMH�VYDNX�VWDYNX�L]ERUQLND�

<textarea name="NAME" cols=40 rows=8></textarea>Kreira text box (okvir za unos teksta) - cols�RGUHÿXMH�ãLULQX��URZV�RGUHÿXMH�YLVLQX�

<input type="checkbox" name="NAME">.UHLUD�ELUDþNL�NYDGUDW��checkbox).

<input type="radio" name="NAME" value="x">Kreira radio gumb (radio button).

<input type=text name="foo" size=20>.UHLUD�MHGQRUHGQL�RNYLU�]D�WHNVW��6L]H� �GXåLQD�X�]QDNRYLPD�

<input type="submit" value="NAME">Kreira gumb Submit.

<input type="image" border=0 name="NAME" src="name.gif">.UHLUD�JXPE�6XEPLW�NRULVWHüL�JUDILþNX�GDWRWHNX�

<input type="reset">Kreira gumb Reset.

21

Tablice

Tablice su vrlo pogodne za razmještaj slika i teksta u HTML dokumentu. OneLPDMX�UHWNH�L�VWXSFH��QD�NULåDQMX�NRMLK�LPDMX�VWDQLFH��0RåHWH�RGUHGLWL�SRGORJXWDEOLFH�L�SRGORJX�VWDQLFH��ERMD��VOLND��SUR]LUQR��3RGORJD�VWUDQLFH�MH�QDMQLåL�VORM�slijedi podloga tablice pa podloga stanice. U osnovi gotovo svakog dizajna webVWUDQLFH�MH�WDEOLFD��3RPRüX�WDEOLFH�natjerat üHWH�VYDNX�ZHE�VWUDQLFX�GD�L]JOHGD�EDãNDNR�YL�åHOLWH��6DPR�&66�PRåH�YLãH�RG�WDEOLFD��&66�SUXåD�QHRJUDQLþHQHPRJXüQRVWL�SR]LFLRQLUDQMD�SR�VYLP�RVLPD��[��\��]��D�JODYQL�PX�MH�QHGRVWDWDN�ãWRJD�QH�SRGUåDYDMX�VYL�:HE�EURZVHU�L��YHU]LMH�SULMH�,(��

Tri su tag-a u definiciji tablice:

Tag Definirana je

<table> </table> Tablica

<tr> </tr> Redak

<td> </td> Stanica

7DJ�RYL�VWDQLFD�VX�XYLMHN�RNUXåHQL�WDJ�RYLPD�UHGDND�

Primjer tablice 1:

8�+70/�GRNXPHQW�üHWH�MX�XJUDGLWL�DNR�WLSNDWH�VOMHGHüH�

<table border="1" width="100%">

<tr>

<td width="50%"></td>


</tr>


<tr>



</tr>

</table>

U gornjem primjeru sam naveo i atribute "border" i "width" - debljinu crta tablicei širinu tablice i svake pojedine stanice.

1SU��ERUGHU ��EL�]QDþLOR�GD�VX�FUWH�QHYLGOMLYH��D�ZLGWK ��EL�]QDþLOR�ãLULQXL]UDåHQX�X�SLNVHOLPD�

Primjer tablice 2:colspan ili spajanje stupaca


<tr>

<td width="100%" colspan="2"></td>

</tr>

<tr>



</tr>

</table>

Primjer tablice 3:rowspan ili spajanje redaka

23


<tr>



</tr>

<tr>

<td width="32%" rowspan="2"></td>


</tr>

<tr>


</tr>

</table>

Tablice primjer 4:FHOOSDGGLQJ ��FHOOVSDFLQJ ��5XEQLFL�VWDQLFD�L�UD]PDFL�L]PHÿX�VWDQLFD�Podloga lista: crnaPodloga stanica: bijelaCrte tablice: 1


<html>

<head>

<title></title>

</head>

<body bgcolor="#000000">

<table border="1" width="54%" cellpadding="0" cellspacing="0">

<tr>

<td width="46%" bgcolor="#FFFFFF">Stanica 1</td>


</tr>

<tr>



</tr>

</table>

</body>

</html>

Tablice primjer 5:

cellpadding="20" cellspacing="0"

25


<tr>



</tr>

<tr>



</tr>

</table>

Tablice primjer 6:

cellpadding="0" cellspacing="20"



<tr>



</tr>

<tr>



</tr>

</table>

Usporedba tablica i CSS

URL: www.inet.hr/~ikartelo/cssgalerija/cssgalerija6.htm

URL: www.inet.hr/~ikartelo/cssgalerija/tablice1.htm

1D�SUYRM�85/�DGUHVL�QDSUDYLR�VDP�GL]DMQ�+70/�GRNXPHQWD�SRPRüX�&66��D�QDGUXJRM�85/�DGUHVL�VDP�QDSUDYLR�LVWL�GL]DMQ�SRPRüX�WDEOLFH��3RNXãDMWH��]D�YMHåEX�napraviti iste web stranice a da ne gledate kod. Slike kopirajte.

Neke prednosti CSS u ovom primjeru:

o precizno pozicioniranje elemenata,

o PRJXüQRVW�SR]LFLRQLUDQMD�L�X�PLQXV��QSU��L]YDQ�+70/�GRNXPHQWD��

o PRJXüQRVW�L]ERUD�QHRJUDQLþHQH�YHOLþLQH�SLVPD�

27

Specijalni znakovi

3RãWR�+70/�QLMH�WHNVW�SURFHVRU��QH�PRåHWH�MHGQRVWDYQR�WLSNDWL�EDã�VYH�]QDNRYHkoji vam zatrebaju i da se oni pojave u Web browseru. Za takve znakove morate]QDWL�MH]LN�:HE�EURZVHUD��1SU��]QDN��üHWH�GRELWL�DNR�WLSNDWH�+70/�N{G�FRS\�Evo kompletne tablice posebnih znakova i njihovog HTML kôda.

Naziv kôda Broj kôda Znak Opis kôda na engleskom

- Ne koristi se

horizontal tab

line feed

unused

space

! ! exclamation mark

" " " double quotation mark

# # number sign

$ $ dollar sign

% % percent sign

& & & ampersand

' ' apostrophe

( ( left parenthesis

) ) right parenthesis

* * asterisk


+ + plus sign

, , comma

- - hyphen

. . period

/ / slash

0-9 digits 0-9

: : colon

; ; semicolon

< < < less-than sign

= = equals sign

> > > greater-than sign

? ? question mark

@ @ at sign

A-Z uppercase letters A-Z

[ [ left square bracket

\ \ backslash

] ] right square bracket

^ ^ caret

_ _ horizontal bar (underscore)

` ` acute accent

29

a-z lowercase letters a-z

{ { left curly brace

| | vertical bar

} } right curly brace

~ ~ tilde

- unused

– en dash

— em dash

- unused

nonbreaking space

¡ ¡ inverted exclamation

¢ ¢ cent sign

£ £ pound sterling

¤ ¤ general currency sign

¥ ¥ yen sign

¦ ¦ broken vertical bar

§ § section sign

¨ ¨ umlaut

© © © copyright

ª ª feminine ordinal


« « left angle quote

¬ ¬ not sign

soft hyphen

® ® registered trademark

¯ ¯ macron accent

° ° degree sign

± ± plus or minus

² ² superscript two

³ ³ superscript three

´ ´ acute accent

µ µ micro sign

¶ ¶ paragraph sign

· · middle dot

¸ ̧ cedilla

¹ ¹ superscript one

º º masculine ordinal

» » right angle quote

¼ ¼ one-fourth

½ ½ one-half

¾ ¾ three-fourths

¿ ¿ inverted question mark

À À À uppercase A, grave accent

31

Á Á Á uppercase A, acute accent

Â Â Â uppercase A, circumflex accent

Ã Ã Ã uppercase A, tilde

Ä Ä Ä uppercase A, umlaut

Å Å Å uppercase A, ring

Æ Æ Æ uppercase AE

Ç Ç Ç uppercase C, cedilla

È È È uppercase E, grave accent

É É É uppercase E, acute accent

Ê Ê Ê uppercase E, circumflex accent

Ë Ë Ë uppercase E, umlaut

Ì Ì Ì uppercase I, grave accent

Í Í Í uppercase I, acute accent

Î Î Î uppercase I, circumflex accent

Ï Ï Ï uppercase I, umlaut

Ð Ð Ð uppercase Eth, Icelandic

Ñ Ñ Ñ uppercase N, tilde

Ò Ò Ò uppercase O, grave accent

Ó Ó Ó uppercase O, acute accent

Ô Ô Ô uppercase O, circumflex accent

Õ Õ Õ uppercase O, tilde

Ö Ö Ö uppercase O, umlaut


× × multiplication sign

Ø Ø Ø uppercase O, slash

Ù Ù Ù uppercase U, grave accent

Ú Ú Ú uppercase U, acute accent

Û Û Û uppercase U, circumflex accent

Ü Ü Ü uppercase U, umlaut

Ý Ý Ý uppercase Y, acute accent

Þ Þ Þ uppercase THORN, Icelandic

ß ß ß lowercase sharps, German

à à à lowercase a, grave accent

á á á lowercase a, acute accent

â â â lowercase a, circumflex accent

ã ã ã lowercase a, tilde

ä ä ä lowercase a, umlaut

å å å lowercase a, ring

æ æ æ lowercase ae

ç ç ç lowercase c, cedilla

è è è lowercase e, grave accent

é é é lowercase e, acute accent

ê ê ê lowercase e, circumflex accent

ë ë ë lowercase e, umlaut

ì ì ì lowercase i, grave accent

33

í í í lowercase i, acute accent

î î î lowercase i, circumflex accent

ï ï ï lowercase i, umlaut

ð ð ð lowercase eth, Icelandic

ñ ñ ñ lowercase n, tilde

ò ò ò lowercase o, grave accent

ó ó ó lowercase o, acute accent

ô ô ô lowercase o, circumflex accent

õ õ õ lowercase o, tilde

ö ö ö lowercase o, umlaut

÷ ÷ division sign

ø ø ø lowercase o, slash

ù ù ù lowercase u, grave accent

ú ú ú lowercase u, acute accent

û û û lowercase u, circumflex accent

ü ü ü lowercase u, umlaut

ý ý ý lowercase y, acute accent

þ þ þ lowercase thorn, Icelandic

ÿ ÿ ÿ lowercase y, umlaut


Heksadecimalni kôd za boje HTML dokumenta

.DG�GDMHWH�ERMX�SLVPX��SRGOR]L��WDEOLFL�LWG��SRPRüX�+70/�N{GD��SRQHNDG�PRåHWHpisati ime te boje na engleskom. Evo imena 16 boja koje razumiju i NetscapeNavigator i Internet Explorer:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,silver, teal, white, i yellow.

ýHãüL�MH�PHÿXWLP�VOXþDM�NDG�PRUDWH�SLVDWL�KHNVDGHFLPDOQL�N{G�ERMH��NRML�üH�:HEEURZVHU�UD]XPMHWL��6YLK��:HE�VLJXUQLK��ERMD�NRMH�üH�MHGQDNR�LQWHUSUHWLUDWLYHüLQD�:HE�EURZVHUD��PRåHWH�YLGMHWL�QD�85/�

http://www.inet.hr/~ikartelo/216webboja.htm

$NR�åHOLWH�ELMHOX�SRGORJX�ZHE�VWUDQLFH��PRåHWH�SLVDWL�white iliEJFRORU ��))))))��9MHåEDMWH��(YR�VDPR�QHNLK�RG��ERMD�L�QMLKRYLKheksadecimalnih oznaka.

Heksadecimalni kôd boje Engleski naziv boje Hrvatski naziv boje

#FFFFFF white bijela

#FFFFCC QDMVYMHWOLMD åXWD

#FFFF00 QDMWDPQLMD åXWD

#FFCCFF roza

#FFCC00 ]ODWQR åXWD

#99CC99 nijansa zelene

#FF0066 nijansa crvene

#0066FF nijansa plave

#990000 WDPQR VPHÿD

#000000 black crna

35

CSS

CSS (Cascading stylesheets��MH�WHKQRORJLMD�NRMD�SRPDåH�+70/�N{GX�IRUPDWLUDWLZHE�VWUDQLFH��1H�VDPR�ãWR�YDP�&66�RPRJXüDYD�IRUPDWLUDQMH�NRMH�+70/�QHSUXåD��QHJR�YDP�&66�RPRJXüDYD�IRUPDWLUDQMH�FLMHORJ�ZHE�VLWH�D�V�MHGQRJ�PMHVWD�1D�WDM�QDþLQ�YDP�&66�XYHOLNR�RODNãDYD�XSUDYOMDQMH�L�RGUåDYDQMH�ZHE�VLWH�D��D�ZHEVWUDQLFH�SRVWDMX�ODNãH�L�EUåH�VH�XþLWDYDMX��,SDN��LPDMPR�QD�XPX�L�WR�GD�VYL�:HEEURZVHUL�QH�SRGUåDYDMX�QD�MHGQDN�QDþLQ�&66�LOL�JD�QH�SRGUåDYDMX�XRSüH��=DWRSRJOHGDMWH�VYRM�ZHE�VLWH�QD�QHNROLNR�SRVOMHGQMLK�LQDþLFD�EURZVHUD�,QWHUQHWExplorer i Netscape Navigator, kao najzastupljenijih browsera danas, prije negoga objavite.

:RUOG�:LGH�:HE�&RQVRUWLXP�SURL]YRGL�&66�VSHFLILNDFLMX��2YGMH�MH�ULMHþ�R�&66verziji 1, upravo je izišla verzija CSS 2, a radi se na verziji CSS 3.

1D�EHVSODWQRP�SRVOXåLWHOMX�ILUPH�,VNRQ�,QWHUQHW�REMDYLR�VDP�QHNROLNR�+70/GRNXPHQDWD�GL]DMQLUDQLK�SRPRüX�&66�D��8NROLNR�VH�NROHEDWH�GD�OL�þLWDWL�LOL�QHþLWDWL�GDOMH��SRJOHGDMWH�&66�JDOHULMX�QD�85/�www.inet.hr/~ikartelo/.

Ugradite CSS u HTML dokument

8�1RWHSDG�X�RWYRULWH�+70/�GRNXPHQW�VWUHDPLQJ�KWP��,]PHÿX�WDJ�RYD��KHDG!�L��KHDG!�WLSNDMWH�VOMHGHüL�N{G�

�67</(�7<3( �WH[W�FVV�!��+��^�FRORU��EOXH��IRQW�VL]H��S[��IRQW�IDPLO\��DULDO�`3�^�WH[W�LQGHQW��FP��EDFNJURXQG��\HOORZ��IRQW�IDPLO\�FRXULHU�`��!��67</(!

3RKUDQLWH�GDWRWHNX�L�RWYRULWH�MH�X�:HE�EURZVHUX��7HNVW�RNUXåHQ�WDJ�RYLPD��K�!�L��K�!�ELW�üH�YHOLN��SLNVHOD��$ULDO��SODYH�ERMH��7HNVW�LVSUHG�NRMHJD�MH�WDJ��S!LPDW�üH�SUYL�UHGDN�XYXþHQ��FP��SRGORJD�üH�ELWL�åXWH�ERMH��SLVPR�üH�ELWL�Courier.

1D�RYDM�QDþLQ�PRåHPR�X�]DJODYOMX�GHILQLUDWL�VWLO�]D�VYDNL�+70/�WDJ�


7<3( �WH[W�FVV��je dobro navesti radi starijih verzija Web browsera -YHU]LMH�NRMH�QH�SRGUåDYDMX�&66�QHND�VH�RGQRVH�SUHPD�RYRP�GLMHOX�N{GD�NDR�GD�JDi nema. Dodatno se osiguravamo i s tag-ovima komentara.

��!�2YR�VX�WDJ�RYL�]D�NRPHQWDU�L�RYGMH�VOXåH�NDR�MDPVWYR�GD��PD�NROLNRELOL�VWDUL�L�PD�R�NRMHP�VH�UDþXQDOX�UDGLOR��:HE�EURZVHUL�QHüH�SULND]DWL�RYDM�WHNVW�

Posebni CSS list

'UXJL�QDþLQ�QD�NRML�PRåHPR�SULPLMHQLWL�&66�MH�VOMHGHüL��8�QRYRP�GRNXPHQWX�XSURJUDPX�1RWHSDG�WLSNDMWH�VOMHGHüL�N{G�

+��^�FRORU��EOXH��IRQW�VL]H��S[��IRQW�IDPLO\��DULDO�`3�^�WH[W�LQGHQW��FP��EDFNJURXQG��\HOORZ��IRQW�IDPLO\�FRXULHU�`

Pohranite dokument pod nazivom mojistilovi.css.

Otvorite dokument streaming.htm, obrišite kôd u zaglavlju koji se odnosi na stil iWDNRÿHU�X�]DJODYOMX�WLSNDMWH�VOMHGHüL�N{G�

�/,1.�5(/ VW\OHVKHHW�+5() �PRMLVWLORYL�FVV�7<3( �WH[W�FVV�!

Pohranite dokument streaming.htm. Otvorite HTML dokument index.htm iWLSNDMWH�VOMHGHüL�N{G�XQXWDU�WDJ�RYD��KHDG!�L��KHDG!�

�/,1.�5(/ VW\OHVKHHW�+5() �PRMLVWLORYL�FVV�7<3( �WH[W�FVV�!

Pohranite dokument index.htm. Otvorite HTML dokumente u Web browseru i oniüH�ELWL�IRUPDWLUDQL�VWLORYLPD�V�SRVHEQRJ�OLVWD�PRMLVWLORYL�FVV��2EMDYLWH�SRQRYR�QD:HE�SRVOXåLWHOM�GRNXPHQWH�LQGH[�KWP��VWUHDPLQJ�KWP�L�PRMLVWLORYL�FVV�

U gornjem primjeru, stilove za pojedine tagove napisali ste u posebnomdokumentu mojistilovi.css, a HTML dokumente ste povezali hiperlinkom sGRNXPHQWRP�PRMLVWLORYL�FVV��1D�WDM�QDþLQ�VYDNL�+70/�GRNXPHQW�NRML�QDSUDYLWH�XVYRP�ZHE�VLWH�X�PRåHWH�OLQNRP�VSRMLWL�QD�GRNXPHQW�VD�VWLORYLPD��6YH�SURPMHQHNRMH�XþLQLWH�QD�VWLORYLPD�X�GRNXPHQWX�PRMLVWLORYL�FVV�RGPDK�üH�VH�RGUD]LWL�QD�VYHZHE�VWUDQLFH�X�ZHE�VLWH�X��1D�WDM�QDþLQ�VWH�UDVWHUHWLOL�ZHE�VWUDQLFH�VXYLãQRJ�N{GD��DVHEL�RPRJXüLOL�GD�V�MHGQRJ�PMHVWD��PRMLVWLORYL�FVV��XSUDYOMDWH�L]JOHGRP�VYLK�ZHEstranica u web site-u.

37

=D�YMHåEX�PRåHWH�X�GRNXPHQW�PRMLVWLORYL�FVV�QDSLVDWL�VOMHGHüH�VWLORYH�

3�^�WH[W�LQGHQW��FP��EDFNJURXQG��\HOORZ��IRQW�IDPLO\�FRXULHU�`D�OLQN�^�FRORU��UJE��`D�YLVLWHG�^�FRORU��UJE��`D�DFWLYH�^�FRORU��UJE��`WDEOH�^WDEOH�ERUGHU�FRORU�OLJKW��UJE��

WDEOH�ERUGHU�FRORU�GDUN��UJE��`ERG\�^ IRQW�IDPLO\��9HUGDQD��$ULDO��+HOYHWLFD�

EDFNJURXQG�FRORU��UJE��FRORU��UJE��`

K��^��IRQW�IDPLO\��7LPHV�1HZ�5RPDQ��7LPHV�FRORU��UJE��`

K��^��IRQW�IDPLO\��7LPHV�1HZ�5RPDQ��7LPHV�FRORU��UJE��`

K��^ IRQW�IDPLO\��7LPHV�1HZ�5RPDQ��7LPHV�FRORU��UJE��`




3RKUDQLWH�GRNXPHQW��REMDYLWH�JD�QD�:HE�SRVOXåLWHOM�L�SRJOHGDMWH�NDNR�L]JOHGDMXweb stranice u Web browseru.

Napomena: U gornjem primjeru odredili ste boje s rgb (255,153,0). RGB jeVNUDüHQLFD�RG�WUL�RVQRYQH�ERMH�UHG��JUHHQ��EOXH��FUYHQD��]HOHQD��SODYD��D�GHFLPDOQLEURMHYL�X�]DJUDGL��RGUHÿXMX��NROLþLQX��VYDNH�RG�WH�WUL�ERMH��VPMHVD��WH�WULRVQRYQH�ERMH�GDMH�NRQDþQX�ERMX��1D�LVWL�QDþLQ�IXQNFLRQLUD�L�KHNVDGHFLPDOQRR]QDþDYDQMH�ERMD��1SU��KHNVDGHFLPDOQD�R]QDND�ERMH��))��LPD�WULheksadecimalna broja. Svaki heksadecimalni broj ima dvije znamenke iSUHGVWDYOMD�SR�MHGDQ�GHFLPDOQL�EURM�L]PHÿX��L��7DNR�MH�KHNVDGHFLPDOQL�EURMFF jednak decimalnom broju 255 itd.

Pisanje stila in-line

6WLO�PRåHWH�SLVDWL�L�LQ�OLQH�QD�VOMHGHüL�QDþLQ�

�%2'<!

�+��67</( �FRORU��UHG��IRQW�IDPLO\��DULDO�!Streaming


audio��+�!�3�67</( �EDFNJURXQG��\HOORZ��IRQW�IDPLO\�

WLPHV�!RealPlayer je prvo ime u streaming audio tehnologiji, pa üemo nanjegovom primjeru vidjeti kako ta tehnologija distribucije zvuka na Interneturadi.��3!��%2'<!

Nedostatak ovakvog pisanja stila je taj što za svaki tag morate uvijek iznova pisatiVWLO��.RULVW�RG�RYDNYRJ�SLVDQMD�VWLOD�MH�WD�ãWR�RYDNR�QDSLVDQ�VWLO�SREMHÿXMH�VYHRVWDOH��âWR�WR�]QDþL"�$NR�VWH�IRUPDWLUDOL�VYRM�ZHE�VLWH�SUHNR�OLQND�SUHPDGRNXPHQWX��&66��D�åHOLWH�QHNH�RGORPNH�QSU��GUXJDþLMH�IRUPDWLUDWL�QHJR�MH�WRXþLQMHQR�X�GRNXPHQWX��&66��SULPLMHQLW�üHWH�in-line kodiranje za taj odlomak.

$NR�QD�QHNX�ZHE�VWUDQLFX�SULPLMHQLWH�YDQMVNL��&66�GRNXPHQW��XJQLMHåGHQL�VWLO�X]DJODYOMX�L�LQ�OLQH�VWLO��NRML�üH�VWLO�LPDWL�SUHGQRVW"�6WLORYL�LPDMX�SUHGQRVW�V�RE]LURPQD�QDþLQ�NRGLUDQMD�RYLP�UHGRP�

1. In-line.

2. Stilovi u zaglavlju dokumenta.

3. Stilovi preko hiperlinka i posebnog .CSS dokumenta.

4. Uvezeni stilovi.

5. Predzadane vrijednosti u Web browseru.

Uvezeni stilovi

Uvezeni stilovi su isto što i link-stilovi samo što se .CSS dokument nalazi uQHNRP�GUXJRP�ZHE�VLWH�X��2YDM�QDþLQ�SULPMHQH�VWLORYD�MH�SRVOMHGQML�NRML�VHSUHSRUXþXMH�MHU�JD�QDMPDQMH�:HE�EURZVHUD�SRGUåDYD�

Classes

U sintaksi:

3�^�WH[W�LQGHQW��FP��EDFNJURXQG��\HOORZ��IRQW�IDPLO\�FRXULHU�`

YULMHGH�VOMHGHüH�GHILQLFLMH��3 je selektor, a ̂�WH[W�LQGHQW��FP�EDFNJURXQG��\HOORZ��IRQW�IDPLO\��FRXULHU�`�je�CSS

39

GHNODUDFLMD��âWR�DNR�åHOLPR�SUYRP�RGORPNX�GDWL�åXWR�SLVPR��GUXJRP�VLYR��DWUHüHPX�]HOHQR"�3UYR�UMHãHQMH�NRMH�QDP�VH�QDPHüH�MHVW�SLVDQMH�N{GD�LQ�OLQH��$postoji li rješenje za to ako pišemo CSS u zaglavlju ili na posebnom listu. Postoji,i zove se classes.

0RåHWH�SLVDWL�WUL�IRUPDWD�]D�RGORPDN�RYDNR�

3�MHGDQ�^�FRORU��\HOORZ�`3�GYD�^�FRORU��JUD\�`3�WUL�^�FRORU��JUHHQ�`

8�+70/�GRNXPHQW�üHWH�SLVDWL�

�3�&/$66 �MHGDQ�!3UYL�RGORPDN��3!�3�&/$66 �GYD�!'UXJL�RGORPDN��3!�3�&/$66 �WUL�!7UHüL�RGORPDN��3!

,PH�NODVH�PRåH�ELWL�ELOR�NRMH��VDPR�QH�VPLMHWH�]DERUDYLWL�WRþNX�LVSUHG��0RåHWHklasu i samo imenovati bez pridodavanja nekom HTML tag-u, npr.,

�MHGDQ�^�FRORU��\HOORZ�`

2YDNR�GHNODULUDQX�NODVX�PRåHWH�SULGRGDWL�ELOR�NRMHP�HOHPHQWX�X�VHNFLML��%RG\!�

Kontekstualni selektor

3�%�^�FRORU��UHG�`

2YDNR�QDSLVDQ�VHOHNWRU�]QDþL�VOMHGHüH��7HNVW�NRML�RNUXåLWH�WDJ�RYLPD��%!�L��%!ELW�üH�FUYHQH�ERMH�VDPR�DNR�MH�XQXWDU�RGORPND��WHNVW�RNUXåHQ�WDJ�RYLPD��S!�L</p>).

<H1><B>Tekst 1</B>, Tekst 2</H1><P>Tekst 3<B>Tekst 4</B> Tekst 5</P>

�7HNVW��QHüH�ELWL�FUYHQH�ERMH��D��7HNVW��üH�ELWL�

Komentari

.RPHQWDUH�MH�XYLMHN�GREUR�NRULVWLWL�NDNR�ELVWH�ODNãH�RGUåDYDOL�VYRM�+70/�L�&66kôd. Komentari se ubacuju u CSS kôd ovako:


3�MHGDQ�^�FRORU��JUHHQ�`�� åXWD�ERMD�SLVPD�]D�SUYHRGORPNH�QD�VYDNRP�+70/�GRNXPHQWX� �

,0*�^�PDUJLQ�WRS��S[�`�� *RUQML�UXEQLN�]D�VYDNXVOLNX� �

Boja

8�RYRP�SRJODYOMX�R�ERMDPD�ULMHþ�MH�R�VOMHGHüLP�VYRMVWYLPD�

• color

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

• background

Boja pisma

Ako napišete u zaglavlju, in-line, ili .CSS dokumentu:

,�^�FRORU��UHG��`

WR�]QDþL�GD�üH�WHNVW�NRML�QDYHGHWH�L]PHÿX�WDJ�RYD��L!�L��L!�ELWL�FUYHQ�

Boja i slika pozadine

$NR�QDSLãHWH�VOMHGHüL�N{G�

3�^�EDFNJURXQG�FRORU��))))��`

%�^�EDFNJURXQG�FRORU��EOXH�`

SR]DGLQD�RGORPDND�üH�GRELWL�ERMX��))))��D�WHNVW�RNUXåHQ�WDJ�RYLPD��%!�L��%!�üH�LPDWL�SODYX�SR]DGLQX�

41

$NR�åHOLWH�VOLNX�X�SR]DGLQL��QDSLVDW�üHWH�VOMHGHüL�N{G�

%�^�EDFNJURXQG�LPDJH��XUO�KRPH�JLI��`

ERG\�^ EDFNJURXQG�LPDJH��XUO�KRPH�JLI��`

7HNVW�NRML�RNUXåLWH�WDJ�RYLPD��%!�L��%!�LPDW�üH�X�SR]DGLQX�VOLNX�KRPH�JLI��.DGåHOLWH�VOLNX�X�SRGOR]L�FLMHORJ�+70/�GRNXPHQWD��NRULVWLW�üHWH�N{G�

ERG\�^ EDFNJURXQG�LPDJH��XUO�KRPH�JLI��`

.DG�åHOLWH�GD�VH�VOLND�X�SR]DGLQL�QH�XPQRåL��SLVDW�üHWH�VOMHGHüL�N{G�]D�RGORPDN�LOLcijeli dokument:

3�^�EDFNJURXQG�UHSHDW��QR�UHSHDW��EDFNJURXQG�LPDJH�XUO�KRPH�JLI�`

%RG\�^�EDFNJURXQG�UHSHDW��QR�UHSHDW��EDFNJURXQG�LPDJH�XUO�KRPH�JLI�`

3R]DGLQD�QHSRPLþQD

.DG�åHOLWH�GD�VOLND�X�SR]DGLQL�EXGH�QHSRPLþQD�GRN�SRPLþHWH�WHNVW�SUHNR�QMH��SLVDWüHWH�VOMHGHüL�N{G�

%2'<�^�EDFNJURXQG�DWWDFKPHQW��IL[HG��EDFNJURXQG�LPDJH�XUO�KRPH�JLI��`

2YR�VYRMVWYR�SR]DGLQH�PRåH�VH�SULPLMHQLWL�VDPR�QD�FLMHOL�GRNXPHQW��7R�]QDþL�GDJD�QH�PRåHWH�NRULVWLWL�X]�WDJ��3��QHJR�VDPR�X]�WDJ��%RG\��

2GUHÿLYDQMH�SR]LFLMH�VOLNH�X�SR]DGLQL

3�^�EDFNJURXQG�SRVLWLRQ��FHQWHU�FHQWHU��EDFNJURXQG�LPDJH��XUO�KRPH��JLI��`

%RG\�^�EDFNJURXQG�SRVLWLRQ��FHQWHU�FHQWHU��EDFNJURXQG�LPDJH��XUO�KRPH��JLI��`

6OLND�üH�VH�UD]PQRåLWL�X�SR]DGLQL�RGORPND��3��LOL�GRNXPHQWD��%RG\��3UYD�VOLND�üHSRþHWL�RG�VUHGLQH�YRGRUDYQR�L�VUHGLQH�RNRPLWR��SUHPD�JRUQMHP�N{GX��7R�]QDþL�GDPRåHWH�VUHGLQX�VOLNH�SRVWDYLWL�WRþQR�LVSRG�SUYRJ�VORYD�X�RGORPNX��LOL�X�JRUQMLlijevi kut dokumenta. Prva oznaka pozicije odnosi se na vodoravni dio slike (left,


center, right), a druga oznaka pozicije se odnosi na okomiti dio slike (top, center,bottom).

2GUHÿLYDQMH�GXåLQH�VOLNH�X�SR]DGLQL

3�^�EDFNJURXQG�SRVLWLRQ��S[��S[��EDFNJURXQG�UHSHDW�UHSHDW�\��EDFNJURXQG�LPDJH��XUO�KRPH��JLI��`

3UHPD�JRUQMHP�N{GX�VOLND�KRPH��JLI�SRþHW�üH�VH�UD]PQRåDYDWL��SLNVHODGHVQR�RG�OLMHYRJ�UXED�RGORPND��3��5D]PQRåDYDW�üH�VH�VDPR�SR�RVL�<��UHSHDW�\��D�SUYD�VOLND�RGR]JR�ELW�üH�EH]��SLNVHOD�RG�VYRJD�JRUQMHJ�UXED�

=DGDWDN��äHOLWH�GD�VH�ORJRWLS�YDãH�ILUPH�SRMDYL�QD�VUHGLQL�SR]DGLQH�GRNXPHQWD�GD�VH�QH�SRQDYOMD�L�GD�VH�QH�SRPLþH�V�WHNVWRP�

Rješenje:

%2'<�^�EDFNJURXQG�DWWDFKPHQW��IL[HG��EDFNJURXQG�UHSHDW�QR�UHSHDW��EDFNJURXQG�SRVLWLRQ��FHQWHU�FHQWHU�EDFNJURXQG�LPDJH��XUO�KRPH��JLI��`

43

=DGDWDN��äHOLWH�GD�VH�ORJRWLS�YDãH�ILUPH�SRMDYL�X�GRQMHP�GHVQRP�NXWX�:HEEURZVHUD�X�SR]DGLQL�GRNXPHQWD��GD�VH�QH�SRQDYOMD�L�GD�VH�QH�SRPLþH�V�WHNVWRP�

Rješenje:

%2'<�^�EDFNJURXQG�DWWDFKPHQW��IL[HG��EDFNJURXQG�UHSHDW�QR�UHSHDW��EDFNJURXQG�SRVLWLRQ��ULJKW�ERWWRP�EDFNJURXQG�LPDJH��XUO�KRPH��JLI��`


6ORMHYL�L�SR]LFLRQLUDQMH�SRPRüX�&66

8�RYRP�SRJODYOMX�ULMHþ�MH�R�VOMHGHüLP�VYRMVWYLPD�

• position

• left

• top

• width

• height

45

• overflow

• visibility

• clip

• z-index

Position

Kada se govori o poziciji nekog elementa na HTML dokumentu, misli se nanjegov gornji lijevi kut.

Apsolutna pozicija

+��^�SRVLWLRQ��DEVROXWH��OHIW��S[��WRS��S[�`

1DVORY�XQXWDU�WDJD��+��SRþHW�üH��SLNVHOD�GHVQR�RG�OLMHYRJD�UXED�SUR]RUD�:HEEURZVHUD��L��SLNVHOD�RG�JRUQMHJ�UXED��$EVROXWH��]QDþL�GD�üH�]DGDQD�SR]LFLMD�ELWLSRãWLYDQD�EH]�RE]LUD�KRüH�OL�WR�GRYHVWL�WHNVW�LVSRG�QHNRJ�RGORPND�L�VO�

Relativna pozicija

%�^�SRVLWLRQ��UHODWLYH��OHIW��S[��WRS��S[�`

7HNVW�NRML�VH�QDOD]L�L]PHÿX�WDJ�RYD��%!�L��%!�ELW�üH�SRPDNQXW��SLNVHOD�Xdesno i 20 piksela prema dolje od svoje originalne pozicije. Dakle, UHODWLYH

se odnosi na RULJLQDOQX�SR]LFLMX.

Širina, visina i odnos sa susjedima

*RUH�MH�ELOR�ULMHþL�R�SR]LFLML�JRUQMHJ�OLMHYRJ�NXWD�QHNRJ�HOHPHQWD�QD�+70/GRNXPHQWX��8�RYRP�RGORPNX�MH�ULMHþ�R�GHILQLUDQMX�ãLULQH��YLVLQH�L�RGQRVD�SUHPDokolini tog istog elementa.

Širina

',9�^�SRVLWLRQ��DEVROXWH��OHIW��S[��WRS��S[�ZLGWK��S[�`

%�^�SRVLWLRQ��DEVROXWH��OHIW��S[��WRS��S[��ZLGWK��S[�`


',9�VH�RGQRVL�QD�GLR�+70/�GRNXPHQWD�NRML�VOLMHGL��D�%�VDPR�QD�WHNVW�RJUDÿHQtag-ovima "B".

Svojstvo ZLGWK�RGUHÿXMH�ãLULQX��RNYLUD��X�NRML�üH�VH�VPMHVWLWL�+70/�HOHPHQW�Ovo svojstvo ide samo uz apsolutnu poziciju. U IE4 i IE5 ovo svojstvo djeluje ina sliku - suzi je (stretch).

Visina

',9�^�SRVLWLRQ��DEVROXWH��OHIW��S[��WRS��S[�KHLJKW��S[�`

Svojstvo KHLJKW�RGUHÿXMH�YLVLQX��RNYLUD��X�NRML�üH�VH�VPMHVWLWL�+70/�HOHPHQW�

2QR ãWR SUHWLþH

âWR�üH�VH�GRJRGLWL�V�RQLP�GLMHORP�HOHPHQWD�NRML��SUHWLþH�"�1DSLãLWH�VOMHGHüL�N{G�

',9�^�ZLGWK��S[��KHLJKW��S[��RYHUIORZ��VFUROO�`

%H]�RE]LUD�QD�SR]LFLMX��RYGMH�MH�RGUHÿHQD�ãLULQD�L�YLVLQD��RNYLUD��D�VYRMVWYR�]QDþLGD�üH�VH�PRüL�YLGMHWL�L�RVWDOL�GLR�SRPRüX�OLQLMD�]D�SRPLFDQMH��scroll bar).

,PDWH�VOMHGHüH�PRJXüQRVWL�

• visible — Sve je vidljivo, tekst unutar okvira i tekst izvan okvira.

• hidden�²�:HE�EURZVHU��RGUHåH��VYH�ãWR�MH�L]YDQ�RNYLUD�

• auto�²�6DGUåDM�NRML�MH�L]YDQ�RNYLUD�MH�RGUH]DQ��DOL�DNR�MH�SRWUHEQR�SRMDYLWüH�VH�OLQLMH�]D�SRPLFDQMH�

• scroll�²�6DGUåDM�NRML�MH�L]YDQ�RNYLUD�MH�RGUH]DQ��DOL�VX�OLQLMH�]D�SRPLFDQMHprisutne bez obzira bile potrebne ili ne.

2YX�RSFLMX�SRGUåDYDMX�VDPR�EURZVHUL�,(��L�,(��

47

Vidljivost

3�^�YLVLELOLW\��KLGGHQ�`

Što smo dobili time da je neki element nevidljiv? Iako je nevidljiv, ipak jeSULVXWDQ�L�]DX]LPD�VYRM�GLR�QD�+70/�GRNXPHQWX��$NR�QSU��XþLQLPR�QHNX�VOLNXQHYLGOMLYRP�D�WHNVW�MH�RNUXåXMH��PRåHPR�GRELWL�]DQLPOMLY�GL]DMQ�

1D�UDVSRODJDQMX�VX�YDP�VOMHGHüH�RSFLMH�

• visible��þLQL�HOHPHQW�YLGOMLYLP�

• hidden��þLQL�HOHPHQW�QHYLGOMLYLP�

• inherit��QDVOMHÿXMH�YLGOMLYRVW�RG�HOHPHQWD��URGLWHOMD�

&OLS��LVMHþFL�

3�^�FOLS��UHFW��S[��S[��S[��S[�`

*RUQML�N{G�]QDþL��ELW�üH�YLGOMLY�SUDYRNXWQL�LVMHþDN�RGORPND�þLML�VX�EULGRYLudaljeni:

• Gornji brid je udaljen 10 piksela od gornjeg ruba odlomka.

• Desni brid je udaljen 200 piksela od lijevog ruba odlomka.

• Donji brid je udaljen 100 piksela od gornjeg ruba odlomka.

• Lijevi brid je udaljen 40 piksela od lijevog ruba odlomka.

Gornji kôd vrijedi samo za apsolutno pozicionirane elemente HTML dokumenta.

�S�67</( �SRVLWLRQ��DEVROXWH��OHIW��S[��WRS��S[�FOLS��UHFW��S[��S[��S[��S[��!


z-index

6ORMHYH�SUDYLWH�SRPRüX�]�LQGH[D��.DG�QSU��åHOLWH�GD�+��EXGH�L]QDG�+��QDSLVDWüHWH�VOMHGHüL�N{G�

+��^�SRVLWLRQ��UHODWLYH��OHIW��S[��WRS��S[��]�LQGH[��`

+��^�SRVLWLRQ��UHODWLYH��OHIW��S[��WRS��S[�]�LQGH[��`

3RãWR�+��LPD�YHüL�]�LQGH[�RG�+��]DWR�MH�+��L]QDG�+��=�LQGH[�PRåHWHprimijeniti samo na elemente s relativnom ili apsolutnom pozicijom. Z-indexPRåHWH�SULPLMHQLWL�L�QD�VOLNH�

Pismo

CSS svojstva (properties) koja se odnose na pismo su:

• font-family

• font-size

• font-weight

49

• font-style

• font-variant

• text-transform

• text-decoration

• font

Font-family

+��^�IRQW�IDPLO\��KHOYHWLFD��LPSDFW��VDQV�VHULI�`

:HE�EURZVHU�üH�RYDNR�þLWDWL�JRUQMX�VLQWDNVX��1DMSULMH�üH�SRWUDåLWL�WLS�SLVPDKHOYHWLFD�X�UDþXQDOX��DNR�JD�QH�QDÿH�WUDåLW�üH�WLS�SLVPD�LPSDFW, ako i taj tipQH�QDÿH�SRWUDåLW�üH�SUYL�WLS�NRML�MH�VDQV�VHULI��YMHURMDWQR�üH�WR�ELWL�$ULDO��

8�SRSLV�PRåHWH�VWDYLWL�NROLNR�JRG�åHOLWH�WLSRYD�SLVPD��1D�]DGQMH�PMHVWR�XYLMHNVWDYLWH�RSüL�QD]LY�]D�JUXSX�WLSRYD�SLVPD��2G�JUXSQLK�LPHQD�PRåHWH�NRULVWLWLVOMHGHüD�

• serif (vjerojatno Times),

• sans-serif (vjerojatno Arial ili Helvetica),

• cursive (vjerojatno Comic Sans),

• fantasy (vjerojatno Ransom),

• monospace (vjerojatno Courier ili Courier New).

.DGD�VH�LPH�SLVPD�VDVWRML�RG�YLãH�ULMHþL��WDNRYR�LPH�X�&66�N{GX�VWDYLWH�Xnavodnike:

%2'<�^�IRQW�IDPLO\��JLOO�VDQV��QHZ�EDVNHUYLOOH��VHULI�`

Za in-line stil koristite apostrof ':

�3�67</( �IRQW�IDPLO\��DULDO�KHOYHWLFD��VHULI�!7HNVW��3!

Kad grupirate deklaraciju i u grupi je svojstvo font-family, stavite ga na kraj:


+��^�FRORU��UHG��PDUJLQ��S[��IRQW�IDPLO\��WLPHV��VHULI�`

Font-size

3RPRüX�WDJ�D��)217�6,=( [! PRåHWH�SLVPX�GDWL�VDPR�VHGDP�YHOLþLQD�3RPRüX�&66�VYRMVWYD�IRQW�VL]H�PRåHWH�SLVPX�GDWL�QHRJUDQLþHQR�PQRJRYHOLþLQD�

7UL�RVQRYQD�QDþLQD�SLVDQMD�YHOLþLQH�SLVPD�VX�

• points, ems, pixels, i druge jedinice;

• keywords;

• YHOLþLQD�X�SRVWRFLPD�

Point

3�^�IRQW�VL]H��SW�`

3RLQW�MH�LVWD�YHOLþLQD�NRMX�NRULVWLWH�X�:RUGX�L�'73�SURJUDPLPD��3&�PRQLWRULSULND]XMX�WDNYH�YHOLþLQH�SLVPD�YHüLPD�RG�0DF�PRQLWRUD�

Em

3�^�IRQW�VL]H��SW�`%�^�IRQW�VL]H��HP�`

(P�MH�MHGLQLFD�X�SRLQWLPD��DOL�QD�RYDM�QDþLQ��SUHPD�JRUQMHP�SULPMHUX��7HNVWXQXWDU�WDJ�D�%ROG�ELWL�üH�YHOLN�� YHOLþLQD�SLVPD�URGLWHOMD��RGORPDN�3�þLMH�MHpismo 20 pt) = 30 pt.

Pixel

3�^�IRQW�VL]H��S[�`

9HOLþLQD�X�SL[HO�LPD�LPD�SUHGQRVWL�SUHG�RVWDOLPD�MHU�üH�WHNVW�ELWL�MHGQDNR�YHOLN�QDPRQLWRULPD�VYLK�SODWIRUPL��9HOLNL�QHGRVWDWDN�RGUHÿLYDQMD�YHOLþLQH�SLVPD�X�SL[HO�LPD�MHVW�WDM�ãWR�MH�WLVDN�WDNYLK�ZHE�VWUDQLFD�QDMþHãüH�QHGRVOMHGDQ��SURPMHQOMLY�XGHEOMLQL��D�þHVWR�L�QHPRJXü�

Ostale jedinice

51

• in

• cm

• mm

Keywords

3�^�IRQW�VL]H��ODUJH�`

• [[�VPDOO

• [�VPDOO

• VPDOO

• PHGLXP

• ODUJH

• [�ODUJH

• [[�ODUJH

.OMXþQH�ULMHþL�RSLVXMX�VHGDP�PRJXüLK�YHOLþLQD�SLVPD�+70/�WDJ�D��)217SIZE>.

9HOLþLQD X SRVWRFLPD

3�^�IRQW�VL]H��SW�`%�^�IRQW�VL]H��`

*RUQML�&66�N{G�]QDþL��WHNVW�RUXåHQ�WDJ�RYLPD��%��üH�ELWL�YHOLN��SW�MHU�MH�WR��YHüH�RG�WHNVWD�URGLWHOMD�

Font-style

+��^�IRQW�VW\OH��LWDOLF�`

+��^�IRQW�VW\OH��QRUPDO�`

Font-weight

3�^�IRQW�ZHLJKW��EROG�`


3�^�IRQW�ZHLJKW��QRUPDO�`

3�^�IRQW�ZHLJKW��`

0RåHWH�NRULVWLWL�L�EURMHYH�RG��GR��%URM��]QDþL�QH�EROG�SLVPR�

Font-variant

)RQW�YDULDQW�MH�&66�VYRMVWYR�SRPRüX�NRMHJD�QRUPDOQL�WHNVW�SUHWYDUDWH�X�smallcaps.

+��^�IRQW�YDULDQW��VPDOO�FDSV�`

Text-transform

%�^�WH[W�WUDQVIRUP��XSSHUFDVH�`

Ovo CSS svojstvo transformira tekst ovako:

• uppercase - u velika slova,

• lowercase - u mala slova,

• capitalize��SUYR�VORYR�VYDNH�ULMHþL�YHOLNR�

• none��WHNVW�üH�ELWL�QRUPDODQ�L�QD�QMHJD�QHüH�GMHORYDWL�&66�VYRMVWYR�GDWRtekstu roditelja.

5D]PDFL�L]PHÿX�VORYD��ULMHþL�UHGDND��

• ZRUG�VSDFLQJ��UD]PDN�L]PHÿX�ULMHþL�

o +��^�ZRUG�VSDFLQJ��HP�`

o +��^�ZRUG�VSDFLQJ��SW�`

• OHWWHU�VSDFLQJ��UD]PDN�L]PHÿX�VORYD�

o +��^�OHWWHU�VSDFLQJ��S[�`

• OLQH�KHLJKW��UD]PDN�L]PHÿX�UHGDND�

o %�^�OLQH�KHLJKW��SW�`

53

• text-align (vodoravno poravnanje odlomka, slike)

o +��^�WH[W�DOLJQ��FHQWHU�`

• vertical-align (okomito poravnanje

o +��^�YHUWLFDO�DOLJQ��WRS�`

o WRS

o ERWWRP

o WH[W�WRS

o WH[W�ERWWRP

o EDVHOLQH

o PLGGOH

o VXE

o VXSHU

• WH[W�LQGHQW��XYODþHQMH�RGORPND�

o 3�^�WH[W�LQGHQW��HP�`

• margin-top, margin-left, itd. (rubnici)

• padding-top, padding-left, itd.

• border-width, border-color, border-style, itd.

o +��^�PDUJLQ�WRS��S[��PDUJLQ�ERWWRP��S[�PDUJLQ�OHIW��S[��PDUJLQ�ULJKW��S[�`

o +��^�SDGGLQJ�WRS��S[��SDGGLQJ�ERWWRP��S[�SDGGLQJ�OHIW��S[��SDGGLQJ�ULJKW��S[�`


o +��^�ERUGHU�WRS�ZLGWK��S[��ERUGHU�ERWWRP�ZLGWK��S[��ERUGHU�OHIW�ZLGWK��S[��ERUGHU�ULJKW�ZLGWK��S[�`

o ,0*�^�ERUGHU�ZLGWK��LQ�`

o 3�^�ERUGHU�FRORU��JUHHQ��ERUGHU�ZLGWK��S[�`

o 3�^�ERUGHU�FRORU��))��))))��ERUGHU�ZLGWK��S[�`

o 3�^�ERUGHU�VW\OH��GRXEOH��ERUGHU�ZLGWK��S[�`

• float

o +��^�IORDW��OHIW�`

o +��^�IORDW��ULJKW�`

o Primjer:��S!6SRMHQL�VWH�QD��E!,QWHUQHW�SRNUHQXOL�VWH�:HE�EURZVHU�L�SR]YDOL�åHOMHQL85/��LPJ�VW\OH �IORDW��OHIW��VUF �KRPH��JLI�!1D�ZHE�VWUDQLFL�VWHSULWLVQXOL�WLSNX�PLãD�QD�KLSHUOLQN�SUHPD

55

5HDO3OD\HU�]YXþQRP�]DSLVX��7DM�KLSHUOLQN�QHYRGL�GLUHNWQR�GR�]YXþQH�GDWRWHNH��YHü�LQLFLUDGD�:HE�SRVOXåLWHOM�SRãDOMH�:HE�EURZVHUX5HDO3OD\HU�PHWD�GDWRWHNX��E!�2YD�PHWDGDWRWHND�MH�PDOD�WHNVWXDOQD�GDWRWHND�NRMDVDGUåL�SRGDWNH�R

o

• clear (kad bi ovo svojstvo dali odlomku na gornjoj slici, odlomak ne biRNUXåLR�VOLNX�

o 3�^�FOHDU��OHIW�`

o 3�^�FOHDU��ULJKW�`

o 3�^�FOHDU��ERWK�`

Na kraju

Napravili ste svoje prve web stranice u HTML kodu i objavili ih na nekom odEHVSODWQLK�ZHE�SRVOXåLWHOMD��3RWRP�VWH�RWNULOL�JRWRYR�QHRJUDQLþHQH�PRJXüQRVWLGL]DMQLUDQMD�ZHE�VWUDQLFD�SRPRüX�&66��âWR�VOLMHGL"�6OLMHGL�REMDYOMLYDQMH�VYRJ�ZHEVLWH�D��VWMHFDQMH�LVNXVWYD��XSR]QDYDQMH�SURJUDPD�RSVNUEOMHQLK�JUDILþNLP�HGLWRURP+70/�GRNXPHQDWD�L�VXVWDYRP�XSUDYOMDQMD��RGUåDYDQMD�L�REMDYOMLYDQMD�ZHE�VLWH�D(FrontPage, Dreamweaver). Isto tako, znanjima HTML-a i CSS-a otvoren vam jeSXW�SUHPD�XþHQMX�XJUDGQMH�GLQDPLþNLK�HOHPHQDWD�QD�VYRMH�ZHE�VWUDQLFH�-DYD6FULSW��'+70/��NDR�L�SUHPD�;0/��$OL�SULMH�QHJR�ãWR�NUHQHWH�GDOMH��VWMHþLWHiskustva na ovome što nudi ova knjiga.


LLLiiittteeerrraaatttuuurrraaa1. http://hotwired.lycos.com/webmonkey/

2. How the Internet works, Preston Gralla, Que 1999.

3. Beginning E-commerce with Visual Basic, ASP, SQLServer 7.0 and MTS, Matthew Reynolds, Wrox Press Ltd.2000.

4. http://www.zdnet.com/

5. http://www.pcworld.com

6. Internet, Ivica Kartelo, Škola E-92, 2001.

57

KKKaaazzzaaallloooCascading stylesheets, 36cellpadding, 25cellspacing, 25CSS, 36head, 7HTML tag-ovi, 11Iskon Internet, 1Kreiranje HTML dokumenta, 2Notepad, 1Objavite HTML dokument, 4

Osnovna struktura HTMLdokumenta, 6

Pohranjivanje HTML dokumenta, 3rowspan, 23Specijalni znakovi, 27src, 8Tablice, 21tekst editora, 1title, 7

Ivica Kartelo - Web Kreator, HTML i CSS

Documents

Transcript of Ivica Kartelo - Web Kreator, HTML i CSS