Upload
eugen666
View
142
Download
6
Embed Size (px)
Citation preview
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.
WEB KREATOR / ŠKOLA E-924
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:
WEB KREATOR / ŠKOLA E-926
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>
WEB KREATOR / ŠKOLA E-928
<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
WEB KREATOR / ŠKOLA E-9210
.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
WEB KREATOR / ŠKOLA E-9212
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>
WEB KREATOR / ŠKOLA E-9214
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>
WEB KREATOR / ŠKOLA E-9216
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).
WEB KREATOR / ŠKOLA E-9218
<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>
WEB KREATOR / ŠKOLA E-9220
.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>
<td width="50%"></td>
</tr>
WEB KREATOR / ŠKOLA E-9222
<tr>
<td width="50%"></td>
<td width="50%"></td>
</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
<table border="1" width="54%">
<tr>
<td width="100%" colspan="2"></td>
</tr>
<tr>
<td width="43%"></td>
<td width="57%"></td>
</tr>
</table>
Primjer tablice 3:rowspan ili spajanje redaka
23
<table border="1" width="58%">
<tr>
<td width="32%"></td>
<td width="68%"></td>
</tr>
<tr>
<td width="32%" rowspan="2"></td>
<td width="68%"></td>
</tr>
<tr>
<td width="68%"></td>
</tr>
</table>
Tablice primjer 4:FHOOSDGGLQJ ����FHOOVSDFLQJ �����5XEQLFL�VWDQLFD�L�UD]PDFL�L]PHÿX�VWDQLFD�Podloga lista: crnaPodloga stanica: bijelaCrte tablice: 1
WEB KREATOR / ŠKOLA E-9224
<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>
<td width="54%" bgcolor="#FFFFFF">Stanica 2</td>
</tr>
<tr>
<td width="46%" bgcolor="#FFFFFF">Stanica 3</td>
<td width="54%" bgcolor="#FFFFFF">Stanica 4</td>
</tr>
</table>
</body>
</html>
Tablice primjer 5:
cellpadding="20" cellspacing="0"
25
<table border="1" width="54%" cellpadding="20" cellspacing="0">
<tr>
<td width="46%" bgcolor="#FFFFFF">Stanica 1</td>
<td width="54%" bgcolor="#FFFFFF">Stanica 2</td>
</tr>
<tr>
<td width="46%" bgcolor="#FFFFFF">Stanica 3</td>
<td width="54%" bgcolor="#FFFFFF">Stanica 4</td>
</tr>
</table>
Tablice primjer 6:
cellpadding="0" cellspacing="20"
<table border="1" width="54%" cellpadding="0" cellspacing="20">
WEB KREATOR / ŠKOLA E-9226
<tr>
<td width="46%" bgcolor="#FFFFFF">Stanica 1</td>
<td width="54%" bgcolor="#FFFFFF">Stanica 2</td>
</tr>
<tr>
<td width="46%" bgcolor="#FFFFFF">Stanica 3</td>
<td width="54%" bgcolor="#FFFFFF">Stanica 4</td>
</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
WEB KREATOR / ŠKOLA E-9228
+ + 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
WEB KREATOR / ŠKOLA E-9230
« « 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
WEB KREATOR / ŠKOLA E-9232
× × 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
WEB KREATOR / ŠKOLA E-9234
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�
WEB KREATOR / ŠKOLA E-9236
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�������������`
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
WEB KREATOR / ŠKOLA E-9238
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:
WEB KREATOR / ŠKOLA E-9240
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,
WEB KREATOR / ŠKOLA E-9242
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��`
WEB KREATOR / ŠKOLA E-9244
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[�`
WEB KREATOR / ŠKOLA E-9246
',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[��!
WEB KREATOR / ŠKOLA E-9248
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:
WEB KREATOR / ŠKOLA E-9250
+��^�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�`
WEB KREATOR / ŠKOLA E-9252
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[�`
WEB KREATOR / ŠKOLA E-9254
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.
WEB KREATOR / ŠKOLA E-9256
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