1 / 34

Uvod u HTML i CSS

Uvod u HTML i CSS. Osnovni pojmovi. 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. Kako zapravo izgleda HTML kod?.

tahir
Download Presentation

Uvod u HTML i CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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?

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

  5. 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>

  6. 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>

  7. 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><sup> podignut tekst </sup><sub> spusten tekst </sub><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

  8. 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 

  9. CSS stilovi Dodavanje CSS stilova

  10. 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

  11. 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.

  12. 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>

  13. 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>

  14. 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">

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

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

  17. 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;}

  18. 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.

  19. 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>

  20. 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>

  21. 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/

  22. 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>

  23. 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>

  24. 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>

  25. HTML formeielementizaunos

  26. 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.

  27. 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.

  28. HVALA IZRADILI: DRAZEN STJEPIC DEMOKRAT SUFAY

More Related