1. Uvod u HTML i CSS Osnovni pojmovi

2. HTML-osnovni pojmovi • HTML-HyperText Markup Language • HTML(jednostavno objasnjenje)-obična textualna datoteka • Verzije HTML jezika – prva verzija 1993, verzije 2.0,3.0, HTML 4, HTML 5 • Struktura HTML dokumenta

3. Kako zapravo izgleda HTML kod?

6. Jednostavni primjeri HTML-a • Primjer jednog HTML elementa- <body></body> • Postoje i samozatvarajuci HTML elementi: • <link rel="stylesheet" type="text/css" href="stil.css" />

7. WEB stranica • <html> • <head> • <title>Ovo je naslov stranice</title> • </head> • <body> • Ovo je najjednostavnija HTML stranica.<br />Obogatite je onime što naučite • </body> • </html>

9. Osnovne operacije i rad sa HTML • Izrada naslova • Primjer:<HTML><HEAD><TITLE>Kreiranje HTML naslova</TITLE></HEAD><BODY><H1 ALIGN=CENTER>1 Naslov</H1><H2 ALIGN=LEFT>2 Naslov</H2><H3 ALIGN=RIGHT>3 Naslov</H3><H4>4 Naslov</H4><H5 ALIGN=RIGHT>5 Naslov</H5><H6 ALIGN=CENTER>6 Naslov</H6></BODY></HTML>

11. Osnovno oblikovanje texta • </nowiki><big> veliki tekst </big><b> podebljani tekst </b><em> nakrivljen tekst </em><u> podcrtan text </u><strong> "jaki" tekst </strong><i> nakrivljen tekst </i>^{podignut tekst}_{spusten tekst}<del> precrtan tekst </del><code> tekst kompjuterskog koda </code><hr> vodoravna crta </hr>-veličina fonta:od 1 do 7<font size="6"> velicina fonta 6</font>-boja fonta:-boju fonta možemo mijenjati na više načina:koristeći hexa zapis boja:<font color="#770000">ovaj tekst je u hexaboji #770000</font>ili koristeći ime boje:<font color="blue">ovaj tekst je plav</font>-također boju fonta možemo zapisati i u rgb zapisu ali taj zapis nije uobičajen- vrsta fonta:<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je promijenjen font</font>- Veliko početno slovo: <font size="5" face="Georgia, Arial" color="blue">P</font>ocetno slovo

13. Dodavanje zvuka,multimedije • U ovom primjeru koristimo EMBED oznaku: • <HTML><HEAD><TITLE>Zvuk i EMBED</TITLE></HEAD><BODY><P>Umetanje zvuka pomoću EMBED elementa: </nowiki><EMBED SRC="moja_pjesma.mp3" HEIGHT="60" WIDTH="144"></BODY></HTML> • Mozemo jos koristiti i oznaku OBJECT vise na wikipediji 

14. CSS stilovi Dodavanje CSS stilova

15. Opčenito • CSS-Cascading Style Sheets • Nastaje 1996 gdje W3C prvi puta spominje ideju stilskih obrazaca • CSS-jezik za formatiranje izgleda sadržaja u HTML,XML-U • Tri vrste stilskih obrazaca ugrađeni,linijski i vezani

16. Opčenito i povezivanje CSS (Cascading Style Sheets) koristi se zauređivanje HTML elemenata, je predstavljenzajedno s HTML 4, da bi poboljšao uređivanje HTMLelemenata. CSS možebitidodan HTML-u naodređenenačine: • Inline – koristećistiloveatributa HTML elemenata • Internal - koristeći <style>element u <head> dijelu • External – koristećivanjski CSSfile Preferira se dodavanje CSS-a HTML-u dadavanjem CSS Sintakseu odvojeni CSS file.

17. Primjeri • UGRAĐENI-  Stil pridružen određenom tagu primjenjuje se na sve tagove te vrste unutar dokumenta. • <style type="text/css"></nowiki>.ime_stila { font-size: 36px;color: #000;background-color: #0F0;font-family: Arial, Helvetica, sans-serif;}.drugi_stil { color: #0F0; }</style>

18. Primjeri • Linijski- Svakom pojedinom HTML tagu možemo pridružiti svoja vlastita stilska obilježja • <p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; color: #F00;">Označeni tekst stylom</p>

19. Primjeri • VEZANI- Ta datoteka se može povezati s bilo kojim HTML dokumentom koristeći tag <link> koji se smješta unutar <head> taga. •  <link href="http//www.pou.com/Unnamed Site 2/style.css" rel="stylesheet" type="text/css">

20. HTML Styles – CSS CSS background svojstva se koristezadefinicijupozadinskogefektaelemenata. CSS svojstvakorištenaza background efekte: • background-color • background-image • background-repeat • background-attachment • background-position

21. HTML Styles- CSS Background-color Služinamzapostavljanjepozadinskebojeelementa. CSS boje- http://www.w3schools.com/cssref/css_colors.asp

22. HTML Styles-CSS Na sličannačinmožemouređivatiinasloveiparagrafe: ->html  <h1 id="n1">Uređivanjepomoću CSS-a</h1> <p id="p1"> Prviparagraf</p> <p class="p2"> Drugiparagraf</p> <p class="p2"> Trećiparagraf</p> ->css body{background-color:blue;} #h1{background-color:red;} #p1{ background-color:green;} .p2{background-color:white;}

23. HTML Tablice Definiraju se tagom <table>. Tablica je podjeljenja u retke ( tag <tr> ),a svakiredak u stupce, tag <td>. Na sljedećoj slici prikazana je tablica u tzv. kontejneru tj. <div>-u.

24. Primjer <table> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td></td> <td>row 2, cell 3</td> </tr> </table>

26. HTML liste Neuređenalista Počinjetagom <ul>, a svaki članlistenalazi se u tagu <li> <ul><li>Coffee</li><li>Milk</li> </ul> Uređenalista Počinjetagom <ol>, a svaki članlistenalazi se također u tagu<li>

27. HTML blokovi HTML elementimogubitizajednogrupiranipomoću<div> i <span>. <div> možekoristitikaokontejnergrupiostalih elemenata. Link za tutorial zapozicioniranje: http://www.barelyfitz.com/screencast/html-training/css/positioning/

28. HTML formeielementizaunos Formama se koristimozaslanje podatakaserveru. Najznačajniji je <input> kojikoristikorisnikpri odabiruinformacija. <input type="text"> definirajednu linijupoljazaunos u kojukorisnik možeunjetinekitekst npr: <form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"> </form>

29. HTML formeielementizaunos <input type="password"> definirapoljezašifru. kod: <form>Password: <input type="password" name="pwd"></form> <input type="radio"> definira radio button. Radio buttons se koriseikako bi se omogućiojedan od mogućihodabira. kod: <form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>

30. HTML formeielementizaunos <input type="checkbox"> definira checkbox. Checkboxes omogućuje korsniku da ne izabereiliizaberekoliko god želi od ponuđenihizbora kod: <form> <input type="checkbox" name="vehicle" value="Bike">imam bicikl<br> <input type="checkbox" name="vehicle" value="Car">imam auto<br> <input type="checkbox" name="vehicle" value="Ship">imam brod <br> <input type="checkbox" name="vehicle" value="Sule">Imam Suleta </form>

31. HTML formeielementizaunos

32. HTML formeielementizaunos HTML Form Tags Tag - Description <form>Defines an HTML form for user input <input>Defines an input control <textarea>Defines a multiline input control (text area) <label>Defines a label for an <input> element <fieldset>Groups related elements in a form <legend>Defines a caption for a <fieldset> element <select>Defines a drop-down list <optgroup>Defines a group of related options in a drop-down list <option>Defines an option in a drop-down list <button>Defines a clickable button <datalist>NewSpecifies a list of pre-defined options for input controls <keygen>NewDefines a key-pair generator field (for forms) <output>NewDefines the result of a calculation *New : New tags in HTML5.

33. ZAKLJUČAK HTML je jednostavanzauporabuilako se uči, što je jedanodrazloganjegove opće prihvaćenostiipopularnosti. Svojuraširenostzahvaljujejednostavnostii tome što je od početka bio zamišljenkaobesplatanitakodostupansvima.

34. HVALA IZRADILI: DRAZEN STJEPIC DEMOKRAT SUFAY