Osnovno o HTM-u

Osnovno o HTML-u
Što je zapravo HTML?
Moja prva stranica!

Š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

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

2012. /2013.

3

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” />


2012. /2013.

4

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>

2012. /2013.

5

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>

2012. /2013.

6

… 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

2012. /2013.

7

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.

2012. /2013.

8

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?

2012. /2013.

9

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

2012. /2013.

10

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.


2012. /2013.

11

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

2012. /2013.

12

Osnovno o HTM-u

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Similar to Osnovno o HTM-u

Similar to Osnovno o HTM-u (17)

Osnovno o HTM-u