1 Kreiranje HTML strana ......... ...................... .. 1 Deklarisanje i identifikadJa dokumenta ................... .. ........... 2 Ubacivanje html elementa . .... . ..... ...... . . .... ... .. . ... .... . ...... 4 Elementi head i title . . . . . ..... . ........ ...... . ........... .... .... .. . 5 Element meta .. . . .... . .. . . ... .. . . . ..... .... .... . . .................. 7 Element body ... . ........ . . .. ..... ... . . . . . . .. . . .. .. . .... . . .. .... . .. 9 Komentari u HTML-u ... . . . .... ... ... . ... .. . .. . ....... . ............. 10 Pregled sablona .. . .. . .. .... . ... . .. .... . ..... ... .. ...... ... ..... . .. 11 Sledi tekst ...... ..... .... . .... .... . .. ................... . ... ... ... 12

2 Ubacivanje teksta i linkova .... ............... ..... .... 13 Pravilna upotreba zaglavlja . ..... . .. . .. ... .. .. . .. ...... . . .. .. .. ... .. 14 Ubacivanje pasusa ....... . ..... . . . . ........ . ...... .... . . ... . .. ..... 15 Prelomi strana . . ...... .... ..... .. . . ...... . . . .. ... .. . . .. ..... .... . . 16 Uredene liste . ...... .. ......... . . . . ..... . . ............ . ........... 17 Neuredene liste .. .. ... . .. .. ..... . .. .... . .. ... .... ............ ..... 18 Ugnjezdivanje listi . .... . ....... . . ... . . . ... ... ......... ... ........ .. 19 Liste za definiciju ....... . ....... . .... .. ......... . .... .... .......... 21 Dobri stari link .... . ..... .... .. ... . .... ..... . .... ............. .... . 22 Linkovi sa adresom elektronske poste ...... ... .. . . . . . .......... . ..... . 24 Iinkovi uDutar strane . .. . ... .... .... .... .. . .. . .... .... .. ....... . ... 26 Ubadvanje sadrzaja u sablon ..... .... ......... . . . .... . ...... . .. ..... 28 Zakljucak .. .... . ...... .... .. ... ... . . . ....... . .... . . . ... . . .. . . ... .. 30

3

viii

L i C5S

Ubacivanje slika, medijalnog sadriaja i skriptovo .. .. . . .... . 31 Element img ...... . ............ . ............ ... . . ........ . ........ 32 Definisanje visine i smne ............ .......... .. .. ........ ..... .... 34 Alternativni tekst ...... .... ......... . .... .... ..... ........ . .. .. .... 35 Povezivanje slike .. . .... . ... ... . ...... .. . . ... ... . ....... . . .. . . .. . .. 36 Linkovi na audio i video datoteke ..... . ............ .. .. . . .......... .. 38 Ugradivanje datotek.a pomotu elementa object ... .... . . .... . ..... . _... . 40 Ali vasa visasti, ja sam objekat! . __ ...... _. . ........ . . .. _........ .. ... 42 Ubacivanje skriptova ...... _. .. . _ ........ . .. _. ..... .... ........ ..... 43 Ugradivanje skripta .... _... .. _.. ........ . _ . . . ..... . ... .... .... ..... 43 Skriptovi i pretraZivao ..... _. ...... ..... .. _. . ........ . . _ . _ .. _..... . 45 Zamislite ... _____ . . _... . ... . __. . . ..... . ........ . .... . _... ........ . 47

4 Kreiranje tabe1a .............. . ........ . ............ . ............. 49 Element table ........ _............ . ........ .. ... .... _... .. ... ..... 50 Sirina tabele ....... .... ... .... .. .. . ........ . . .. . ..... .... ... _... . . 50 Dodavanje vrsti u tabelu .... . . . .. .... _. _. . ..... . __............ ..... . 52 Dodavanje celija tabele ..... . . . . __ .. ... . ...... . . . ............. .... . . 53 Zaglavlja tabele . . .... . ... . ... .. . .. . ... . .... ... _. . .. . ........ . . . . . . 54 Naslov tabele ... . . .. .... . . . . .. ........ . _.. _..... .. .. ............ .. 56 Rezime tabele . _.. ........ .............. .... ........ . ............ .. 57 Obuhvatanje vrsta ........ . __ . _........•... . .. _..... . . .. . ........ . . 58 Obuhvatanje kolona .. . .... ..... ... .. . _. . . . . . ........ _. . . .. . _. .... _. 60 Kombinadja atributa colspan i rowspan ... .... ..... .... . ... . ........ . _62 Grupisanje kolona tabele: Element col .. .... . .. .. _.. . . .... . .. . . . .... . . 63 Grupisanje kalona tabele pomotu elementa colgroup ..... _... .. __ ..... . . 65 Grupisanje VTsta u tabeli .. . .... . . . .. ........ .... . .... . . . . . .. _. ...... 66 Skupovi tabela ... . ... . . _ . .... . .. .... .. ........ . ........ .. . .. ...... 67

S Kreiranje formi ..... . . . . . .. . .... . . . . . .... ........... 69 Element form . . . ....... .. . . .. .... . ....... . .... . . ' .. . ........ . ...... 70 Ubacivanje polja za unos teksta . ..... ... . ... .... ..... . ............... 71 Ubacivanje polja za potvrdu i radio dugmadi . .. ... . _ .... .. ... ...... .. . . 73 Stavke koje su unapred izabrane ........ . ... . ..... _. __. . ...... ... . ... 75 Meniji na formarna ................... . ... . . . .. .... _. . . _ ........ . .. 76 Oblasti za unos teksta ........ . . .. . .... ... _.. . . ..... . . . .. ........ . .. 78 Dugmad Reset i Submit ....... . ... . ........ .... . ........ . ........ . .. 80 Upoteba grafiCkog dugmeta submit . ........ . ... _........ . ... . .... _.. 81 Kako da pomocu elementa label forme uCinite razumljivijim . ............ 82 Grupisanje polja na formi . . . . ... . ...... .... . . __ . ........ .... . ....... 83 Grupisanje stavki u meuiju _... .. . . . . .. . __. ................ .. .. _..... 85 Prilagodavanje i napredne stvari kod formi .. . .... . .. . . .... ... .. ....... 86 Sada kada ste dobra oblikovani ... .. .. .. . . .......... _. . ........ ... .. . .. 87

6 Frejmovi .... .......... ... ...................... . ... . .... . ... ..... 89 Moe stabla . . ... . . ... . ................ .. . .. . ... .... . . ... .. ...... . . 90 Kreirallje skupa frejmova ... . .... . ............. . ......... .... .. . ... . 91 Dodavanje kolona . .. . . .. . ... . ... .. . .. .. ..... ... .. ... . ..... ........ 92 Vrste ... . ...... .... .... . .... .... . . .. .... .... " ... ..... .... .... 94 Kombinovanje vrsta i kolona . ... .. .. ...... .. . .. .. .. .. ....... . .. . . ... 95 Margine. veIicina i khzaci .. .. .. .. . ... . ..... . ... ..... .. . ..... . ... .. . . 96 Zadavanje imena i usmeravanje akcije na odredeni frejm ... .. ........ ... 97 Frejmovi bez granica .... .. . . . ... . .... . .. . .. ... . . . . .. ... ...... ..... . 99 Dostupnost frejmova pomoeu elementa noframes ... . .. ...... . . . ... . . . 101 5jajni inlajn frejmovi ...... ... . ... . . .. . . ... .. . .. . . .... .. ... .... . . . . 103 5ada mate da radite sa frejmovima . . .. ....... ... ......... . . . ... .. . .. 105

7 CSS . .. . .... ...... .. .... ......................... 107 Pojednostavljena C55 teorija .... .... ............. . .... ... .. ......... 108 Ubacivanje inlajn stila .... . .. . . ......... . . .... . . ... ... .. ..... . . .. .. 110 Ugradeni stilovi . . .................. . . .... .. ...... .. .... .... . . .. .. 111 Vezane Iiste stilova . ... . ... . ... . . . . .. ... ... ... ..... ............. .. 112 Uvoz lista stilova ......... .. . .... ... .... .... .. . ............. . . .. . . 114 Komentari i formatiranje u C55-u . ... .... ........... . .... . . . . .... .. . 116 Vreme je one sto ste zamisliIi pustite da radi ... . .. . .... .. . . . ........ . 118

8 Boje i slike u CSS-u ......................... .. .... . . 119 Boje i C55 .. . .. . .. . .... .. . ........ . . .. ... ...... .... .... .... ... . . . 120 Heksadecimalne boje ... ... ..... .... . . . .... . ...... .... .... . .... .... 120 Heksadecimalne skraeenice ............ .. ... .. . .. . .. ...... ..... .... 120 Dodavanje boje pozadine . ....... ... . .... .... . .... . ... ... . . .. .. .. ... 122 Ukrasavanje tabela pomo(u boje pozadine ... . . .. .. ... .... . . . . ........ 124 Ubacivanje grafike u pozadinu . .. . .... . ... . ... . ... . .... . . ... .. .. ... . 126 Kontrola nacina na koji se postavljaju slike u pozadini . ..... .. ....... . .. 128 Postavljanje grafike za pozadinu . . .... ....... ...... . . .. . .. . .. . . . . ... 130 Fiksiranje sIika u pozadini iIi njihovo pomeranje klizacima .. .... .. ... . . . 132 Transparentna (providna) boja pozadine ... . ..... .. . . . . .. .... ... . .. .. 134 5kraeenice u CSS-u za pozadinu . .. . . . . .... .. . . ...... ... .. .... .... . . . 136 Zelite Ii da se jos malo zabavite? .. . ..... .. .. . . .. .. . ... . . . ........... 138

Tekst . .... ... ............................... .... . 139 Izbor fonta ... . .... . ..... ... .... .... .. . .. ..... . .. .. .. . .. .... . . .. . 140 Primena familije fontova na tekst ... . . . .......... . . ....... . ... ... .. . 142 VeliCina slova . .. .. .. .... .... . .... . . . ..... . ................ . . . ... . 144 TeZ.ina i sti! fonta ... ...... . .. . . . .. .. . ........... . . ..... .. .. .. ... .. 146 Bojen.je teksta . . ...... . ........ . .. . .. .. .. . ... . .. . . . ......... .. .. . . 148 Ravnanje teksta . .. . ...... .... ...... .. . . ....... .... .. . .. . . . . .. .. . . 149 Dekoracij a teksta . .... .. .. ... . ....... ..... . . . . . . .. . ... .. . .. . ... . .. 150 Uvlacenje teksta . ........ ......... . ..... . . ..... . .. .... . . .. .. . .. ... 151

ix

Transformacija i promena teksta ... . ... . . .... .. .. . .. . . . ....... . .... . 153 Podesavanje visine redova .. . ...... .... ...... . .. . .... . .... . .... . ... 155 Rastojanja izmedu slova i reci . . .... . . .. . . .... . .. . . . .... . . . .. . .. .. .. 156 Promena prvog slova i prvog reda teksta ... . ... . .. .. ....... . ... .. .... 157 Skracenice za stilove fontova . . .... . .... . .... ... .. . .... . ............ 158 Sada postajete majstor .. . . ............. .. ............ . ... . .. . . .. .. 159

10 Efekli so linkovima, liste i navigacija .............. ...... 161 Stanja linkova . . .. .. ... ... . .. . . . .... .. . . ..... .... ......... .. . . ... . 162 Modifikacija stiIova linkova . ... .. .... . ... . ... .. ... . .. . . ........... . 164 ViSestruki stilovi linkova pomocu selektora klasa ...................... 166 Stilovi za linkove pomocu nasledivanja . ....... . .. . .......... .... . . ... 167 Stilovi za uredene liste ...... .. .. . ......... .. ... . .. . . ... . ........ .. 169 Stilovi za neuredene liste . . ........ . ... ..... . ............ .. . . . . .. . . 171 CSS skracenice za stilove listi . . ....... . .... . . . .. . ........... . . . ..... 173 Vertikalna navigacija sa listama i bojama . . .. . ..................... . . . 174 Vertikalna navigacija pomocu listi sa slikama . . .... . . . .......... . . . .. . 176 Horizontalna lista za navigaciju sa bojama .. . ... . . . . . .. . ............ . 177 Horizontalna lista za navigaciju sa slikama .. .... . ... . .. . . ..... ... .. .. 178 Bogati linkovi. liste i navigacija ....... . ... ... . ........ .. .......... . . 179

11 Margine, okviri i rastojanja ........... . .. ............. 181 Upoznavanje sa pravougaonim modelom . .... . .. . ...... . .. . .... .. .. . . 182 Upotreba margina . . .. . . ... .. .. . ... . .... .............. .. .. . ....... 183 Upotreba negativnih margin a . . . . . . .. . ....... .. ... . . . .. ... ....... . . 185 Skracenice za margine . . .. ... . ....... . .. . ......... ...... . ..... . . .. . 186 Okviri ... ... .. . . . .. . . .... . .. . . .. . ...... . . ... . . ....... ........ . 187 Debljina okvira . . . . ..... .. . . .... . ...... ..... .. . . . .. . ........ .. ... . 187 Stilokvira .. .. . . . ......... . . . ... . .. ... ... . . ..... . . . . . ...... .... . . 187 Boja okvira .. . .. .... . ........... . .. . ....... . . . .... .. . . . . ......... 188 Skracenice za okvire ... . . .... .... . .. . .. ... . .......... .. ........... 189 Podesavanje rastojanja saddaja u odnosu na okvir . .... .. ..... . .. ... .. 190 Skracenice za definisanje rastojanja ......... . . . . . ... ........... . .... 191 Dobijamo sve vise kontrole .. .......... .... . . . . .... ... ... .. .. . . ..... 192

12 Pozicioniranje, tecenje i Z indeks ....................... 193 Postavljanje na pravo mesto . . . .. . .. . .... . ........ ..... . .. . .. . .. . . . . 194 Normalni tok .. ....... . .... ... ............. . .. . ..... . ...... . ... . . 195 Blokovi sa elementima ..... ..... . ......... . .. . ........ . ..... ... . .. 197 Prikaz pretrazivaca .. . ...... . . ... . .. . .. .... ........ . .. .... . . .... . . 199 Apsolutno pozicioniranje: Koreni element . ... ............... . .. . .. . .. 200 Apsolutno pozicioniranje: Drugi blok .... . ........ .. . . . ....... . .... . . 202 Relativno pozicioniranje . ........ . ... .. ...... .. .. ... .... . .. .. .. ... . 204 Fiksno pozicioniranje .... . ... .. . ... . .. .. . . . ... .... . .... . . . .. .... . . 206 Pokretni elementi ..... .. . . . ... .. .. .... . . .. ... . .. . . .. .. . .. . ...... .. 208

x

CiScenje tecenja .. ...... . .. ... .... ..... ... . ....................... 210 Z-indeks ................ .... . ... . . .. . . . . . ... .. .............. . ... 212 Bas kao Pro .... ............................... .... ........... ... . . 214

13 Rosporedi u CSS-u . ...... .. ....... . .......... ....... 215 Tri kolone sa fiksnim bocnim menijima ...... .. . . .. . .. ..... ... .. . .. .. 21 6 Tri kolone sa zaglavljem i podnozjem ...... . ... .... ............. . .... 218 Ugnjezdeno tecenje . .... ......... .. ......... .... . . ...... .. ....... . 220 Centrirani dizajn ... . .. . . . .. . . ... ........... . . ..... .. . . ... . ....... 222 Slozeni rasporedi .... .. ... ....... . ..... . ..... . .. .... .. . .. . ..... ... 224 Ponovite sve ovo... . ............................... ........ ... ..... 226

A Prirucnik so objosnjenjimo zo XHTMl 1.0 . ........ ....... 227

B Prirucnik zo CSS 2.1 sa objasnjenjima .. ..... ........ . ... 259 Selektori. pseudo klase i pseudo elementi ............... . ........ ... . 260

Indeks ................... _..... ........ . .... .... .. .. _. . . . . . . . .. 299

xi