Osnovno o HTM-u
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Osnovno o HTM-u

on

  • 229 views

Prezentacija za dodatnu nastavu u Tehničkoj školi, Požega

Prezentacija za dodatnu nastavu u Tehničkoj školi, Požega

Statistics

Views

Total Views
229
Views on SlideShare
229
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Osnovno o HTM-u Presentation Transcript

  • 1. Osnovno o HTML-u Što je zapravo HTML? Moja prva stranica!
  • 2. Što je zapravo HTML?  Nije programski jezik – sad vam je sigurno lakše   To je sustav oznaka, tzv. tagova pomoću kojih zadajemo elemente web stranice  To je osnovna web tehnologija, abeceda weba  Iako mnoge prekrasno izgledaju i nude mnogo interaktivnosti, web stranice su najobičniji tekst dokumenti koji sadrže html kod. Čak i najsloženiju stranicu mogli bismo napraviti i u Notepadu. Dokaz? » U bilo kojem pregledniku moguće je zadati naredbu Prikaži izvorni kod (View source) koja će nam prikazati sadržaj web stranice prije nego što ga interpreter web preglednika pretvori u oblik za krajnjeg korisnika  HTML je jednostavan i lako se uči WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 2
  • 3. HTML oznake  Html oznakama (tagovima) služimo se za zadavanje elemenata web stranice  Pišu se unutar “zagrada” < i >.  Primjer: <p class="istaknuto">Što je to HTML?</p>  Unutar prve zagrade prvo uočavamo slovo p. Svaka html oznaka zapravo je kratica, u ovom slučaju p=paragraph (odlomak)  Prva oznaka “započinje” html element, a druga koja sadrži istu oznaku kojoj prethodi znak / ga završava  U prvoj oznaci imamo i dio class… koji je tzv. atribut  Atributi služe za zadavanje nekog svojstva elementa i uvijek se pišu u obliku: svojstvo=“vrijednost”  Nema svaka html oznaka atribute WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 3
  • 4. Parne i neparne oznake  Većina html oznaka su parne oznake, to znači da dolaze u paru: prva započinje element, a druga ga završava  Završnoj oznaci unutar zagrada prethodi znak /  Primjer: <h1>Ovo je najveći naslov</h1>  Postoje i neparne oznake  Prema web standardima trebale bi sadržavati znak / IZA oznake (i iza svih atributa)  Primjer: <img src=“slika.jpg” /> WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 4
  • 5. Nekoliko pravila za pisanje HTML oznaka  Html oznake se pišu malim slovima – dogovor, nije pravilo  Parne html oznake se moraju zatvoriti. Iako će vam web preglednik “oprostiti” ako ispustite poneki </p>, u većini slučaja takva greška dovodi do nepredvidivih rezultata.  Unutar jedne oznake može se ugnijezditi druga  Oznake se ne smiju unakrsno zatvarati, zadnje započeta oznaka mora prva završiti, npr. slijedeći kod nije ispravan: <p>Ovo je <span class=“red”>važno!</p></span> WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 5
  • 6. Osnovna struktura web stranice  Vrlo jednostavna stranica može imati slijedeći kod: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>moj prvi dokument</title> </head> <body> <h1>Naslov u sadržaju</h1> <p>Ovo je odlomak</p> </body> </html> WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 6
  • 7. … osnovna struktura web stranice  Značenja pojedinih oznaka su: » <!doctype html> deklarira korišteni html standard, više o standardima kasnije » <html> i </html> započinje i završava dokument » <head> i </head> započinje i završava zaglavlje dokumenta. Zaglavlje sadrži elemente koji nisu izravno vidljivi na stranici, ali su bitni za njeno funkcioniranje (kodiranje, css stilovi, javascript funkcije, meta oznake, naslov dokumenta,…) » <body> i </body> započinje i završava tijelo dokumenta – dio dokumenta koji sadrži sve ono vidljivo što će biti prikazano na stranici  Svaki dokument ima zaglavlje i tijelo WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 7
  • 8. Neka zanimljiva svojstva HTML-a  Html ignorira prelaske u novi red: » <p>Ovo je jedan odlomak.</p> » Ovo je jedan odlomak.  Html ignorira više od jednog razmaka: » <p>Prije razmaka poslije razmaka.</p> » Prije razmaka poslije razmaka.  Html ne služi za zadavanje izgleda elemenata web stranice. Iako bi se atributima mogao zadati izgled mnogih elemenata, to treba strogo izbjegavati. Izgled elemenata zadaje se pomoću CSSa. WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 8
  • 9. HTML standardi  Ako pogledamo izvorni kod stranica na webu ponekad bi prvi redak koda mogao izgledati ovako: <!DOCTYPE HTML> a ponekad i ovako: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> a moguće su i još neke druge varijacije. O čemu je zapravo riječ?  Već smo spomenuli da se tim redom deklarira standard korišten pri pisanju html-a, no što su zapravo i čemu služe standardi? WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 9
  • 10. Zašto HTML standardi?  Najvažniji razlog zašto postoje standardi je evolucija weba od nekad pretežno tekstualnog, statičnog medija do današnjeg multimedijalnog dinamičnog medija kojem pristupamo s različitih ureĎaja.  UvoĎenjem novih tehnologija i mogućnosti uvodili su se i novi standardi  Standarde donose različite organizacije, a najvažnije su: » » » » W3C (World Wide Web Consortium), ISO (International Organization for Standardization), IEC (International Electrotechnical Commission), WHATWG (Web Hypertext Application Technology Working Group)  Standardima se koriste proizvoĎači programa (preglednika), ali i autori web stranica WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 10
  • 11. Zašto moramo voditi računa o standardima?  Starija računala ili ona koja koriste starije preglednike često ne mogu ispravno prikazati elemente definirane novijim standardima  Deklaracija korištenog standarda na početku html dokumenta je zapravo uputa pregledniku kako da interpretira dokument – u skladu s kojim standardom, to je vrlo važno jer se načini pisanja koda ponešto razlikuju od standarda do standarda. WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 11
  • 12. Praktična primjena standarda  Većina novijih stranica (2012. godina) koristi neki od slijedećih standarda: » HTML 4.01 » XHTML 1.0 » HTML5  Osim toga u deklaraciji se može naglasiti držimo li se striktno standarda (strict) ili ponegdje koristimo i stariju sintaksu (transitional)  Kako se preglednici relativno brzo razvijaju i kako su standardi dobrim dijelom unazad kompatibilni, trebalo bi koristiti neki od posljednjih standarda.  Mi ćemo u svim slijedećim lekcijama koristiti HTML5 WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević 2012. /2013. 12