PRIRUČNICI TEHNIČKOG VELEUČILIŠTA U ZAGREBU MANUALIA POLYTECHNICI STUDIORUM ZAGRABIENSIS TOMISLAV STOJANOV UVOD U (X)HTML I CSS Nakladnik Tehničko veleučilište u Zagrebu Informatičko-računarski odjel Autor Tomislav Stojanov, predavač Recenzenti prof. dr. sc. Zdravko Dovedan Han prof. dr. sc. Hrvoje Stančić Objavljivanje je odobrilo Stručno vijeće Tehničkog veleučilišta u Zagrebu, odlukom broj: 1407-6/13 od 26. ožujka 2013. godine. Skripta CIP zapis dostupan u računalnom katalogu Nacionalne i sveučilišne knjižnice u Zagrebu pod brojem 839764 ISBN 978-953-7048-27-3 2013 © T. Stojanov: Skripta – UHC stranica 2 Uvod u (X)HTML i CSS skripta Tomislav Stojanov 16. 12. 2012. Cilj kolegija: „Upoznati studente s teoretskim i praktičnim radom u HTML-u, XHTML-u i CSS-u, osnovnim jezicima za obilježavanje (markup jezicima) sadržaja i izgleda na webu. Za uspješno praćenje kolegija nije potrebno prethodno znanje o webu kao ni poznavanje rada u suvremenim programima za grafičku izradbu internetskih stranica.” (Iz sinopsisa kolegija) 2013 © T. Stojanov: Skripta – UHC stranica 3 Sadržaj HTML 4 i XHTML ...................................................................................................................................... 7 Jezici za obilježavanje .......................................................................................................................... 8 Kodiranje, skriptiranje i programiranje ............................................................................................... 9 Razlika sadržaja i prikaza ..................................................................................................................... 9 Nastavak ............................................................................................................................................ 11 O HTML-u........................................................................................................................................... 11 Struktura HTML-a .............................................................................................................................. 12 Doctype ............................................................................................................................................. 12 HTML i XHTML ................................................................................................................................... 14 Minimalna stranica ............................................................................................................................ 14 Zaglavlje ............................................................................................................................................. 15 Blokni i redčani elementi ................................................................................................................... 15 Okviri (frameovi) ................................................................................................................................ 15 Komentari .......................................................................................................................................... 17 Poveznice ........................................................................................................................................... 17 Ikona u adresnoj traci (favicon) ......................................................................................................... 19 Rad sa slikama ................................................................................................................................... 19 Atributi alt i title ........................................................................................................................ 20 Liste ................................................................................................................................................... 21 Odlomci ............................................................................................................................................. 22 Prikaz hrvatskih grafema ................................................................................................................... 24 Tablice ............................................................................................................................................... 26 Obrasci (forme) u HTML-u ................................................................................................................. 29 CSS 2.1 ................................................................................................................................................... 32 O CSS-u .............................................................................................................................................. 33 CSS i (X)HTML .................................................................................................................................... 34 CSS prioriteti ...................................................................................................................................... 35 CSS media types ................................................................................................................................ 36 Sintaksa.............................................................................................................................................. 37 Klase i identifikatori ........................................................................................................................... 38 Elementi div i span ........................................................................................................................ 39 Poveznice u CSS-u .............................................................................................................................. 40 2013 © T. Stojanov: Skripta – UHC stranica 4 Dizajniran HTML obrazac u CSS-u ...................................................................................................... 40 Pokazivači .......................................................................................................................................... 42 Jedinice .............................................................................................................................................. 42 Model kutije ...................................................................................................................................... 43 Obrubi (borders) ................................................................................................................................ 44 Model sata ......................................................................................................................................... 45 Rubovi (margins) ............................................................................................................................... 47 Popuna (paddings) ............................................................................................................................ 48 Model kutije Internet Explorera ........................................................................................................ 48 Uređivanje lista .................................................................................................................................. 49 Skraćivanje zapisa sintakse fonta ...................................................................................................... 50 Uređivanje tablica ............................................................................................................................. 51 Dimenzioniranje ................................................................................................................................ 52 Klasificiranje ...................................................................................................................................... 52 Plutanje.............................................................................................................................................. 54 Pozicioniranje .................................................................................................................................... 65 Kombiniranje obilježivača.................................................................................................................. 71 Sveopći obilježivač ............................................................................................................................. 73 Pseudoklase i pseudoelementi .......................................................................................................... 74 Uvjetovani komentari za IE ................................................................................................................ 75 Naglašavanje autorstva u CSS-u ........................................................................................................ 76 HTML5 ................................................................................................................................................... 77 O HTML5 ............................................................................................................................................ 78 HTML5 video ...................................................................................................................................... 79 HTML5 audio ....................................................................................................................................