A od početka prošla su mnoga ljeta dok nije nastao HTML.
1. Struktura HTML -a
HTML se cijeli sastoji od tagova (npr. <FONT>) i od atributa taga
(npr. <FONT COLOR="#FF0000">).
Tag govori browseru što da radi, a atribut kako da to napravi.
Osnovno pravilo je da tagovi ne smiju biti preklopljeni nego se ugnježđuju kao
što je prikazano. Redoslijed tagova pri tome nije bitan.
Važno je reći da postoje HTML elementi sa open i closing tagovima te HTML elementi sa samo open tagom (tzv. void elementi). Svaki HTML element započinje sa znakom < , iza čega se nalazi naziv taga. Iza naziva taga može se naći atributi sa definiranim vrijednostima, a svaki element završava sa >.
Veličina slova takođe nije važna pa može biti <FONT> ili <font> .
Međutim W3C sugerira upotrebu malih slova pa ćemo i mi nadalje koristiti isključivo
mala slova pri pisanju tagova.
Font odnosno oblik slova takođe nije važan. No valja napomenuti da nije loše da
text editor podržava naše znakove. Moja preporuka je svakako KomodoEdit HTML Editor
jer je besplatan i jer podržava sve character setove.
2. Minimum HTML code-a
Vjerojatno se pitate koliko HTML tag-ova minimalno treba napisati pa da se dobije jedna normalna, funkcionalna web stranica. Samo tri taga a to su :
- <html> govori browseru da se radi o HTML dokumentu
- <head> šalje browseru osnovne postavke dokumenta
- <body> šalje browseru sadržaj HTMl dokumenta
Unutar head taga nije loše unijeti i <title> tag za naslov . Text, slike, tablice, obrasci ..itd, koji će biti prikazani u browseru upisujemo unutar body taga.
Kako je sve to zajedno udrobljeno pogledajte u slijedećem primjeru .
Primjer 'Najmanja stranica na svijetu': vidi code » vidi stranicu
3. Hrvatski znakovi (č,ć,đ,š,ž)
Budući da neki browseri ne mogu automatski prepoznati hrvatske znakove dobro je da
u glavu <head> dokumenta unesemo
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> ili
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> ili
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Primjer 'Hrvatski znakovi': vidi code » vidi stranicu
4. Boje u HTML -u
Za početak dovoljno je reći da su boje određene hexadecimalnim brojem i to između 000000 (crna) i FFFFFF (bijela). Hexadecimalni broj FFFFFF iznosi 16 777 215 decimalno pa može se reći da se za web koristi upravo toliko boja. Inače je 16777215=224 pa se može reći da su to 24-bitne boje, što i nije jako bitno :-). Stari Netscape i tog tipa browseri sve boje prebacuju u svoju paletu od 256 boja ( 256=28 => 8-bitne boje). To su tzv. sigurnosne boje (web safe colors) što jeeee bitno :-)). Da bi vidjeli neke od njih kliknite ovdje . Ukoliko izaberemo boju koja nije web safe, browser će automatski prikazati njoj najbližu boju.
Boja se u HTML -u može izraziti na jedan od slijedećih 5 načina:
1. #rrggbb (npr., #00cc00)
2. #rgb (npr., #0c0)
3. rgb(x,x,x) gdje je x cio broj između 0 i 255 uključivo (npr., rgb(0,204,0))
4. rgb(y%,y%,y%) gdje je y broj od 0.0 do 100.0 posto (npr., rgb(0%,80%,0%))
5. imenom - Prema W3C definirano je 16 boja: aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white i yellow
Važno je napomenuti da ako su komponente r (red), g (green), b (blue) jednake onda
se dobiju nijanse sive boje i to između 000000 (crne) i FFFFFF (bijele).
Ispitajte boju ovdje (za sada radi samo u IE5.5+).
5. Proračun učitavanja stranice
Uvijek kada izrađujete web stranicu imajte na umu da ju ne preopteretite sadržajem
tj. vodite računa koliko će trajati njeno učitavanje.
To najviše ovisi o brzini kojom smo spojeni na internet. Svako predugo učitavanje
poigravanje je sa strpljenjem korisnika te će on vjerojatno ubrzo odustati od vaših stranica.
Zato obratite pažnju na slijedeću tablicu.
Proračun je rađen po formuli t=f/v ,gdje je t -vrijeme učitavanja, f -veličina fajla, a v -brzina veze.
| 56KB/s modem | 220KB/s EDGE mobile | 2MB/s 3G mobile | 4MB/s ADSL | |
| 500kB | 8,9 sekundi | 2,3 sekunde | 0,25 sekundi | 0,12 sekundi |
| 1MB | 18 sekundi | 4,6 sekundi | 0,5 sekundi | 0,25 sekundi |
| 2MB | 36 sekundi | 9,2 sekunde | 1 sekunda | 0,5 sekundi |
Dakle, vaše stranice ne bi se trebale učitavati dulje od 10-tak sekundi, što prema tablici neće biti problem kod brzih ADSL veza. No kod starih modema i mobilnih uređaja predugo učitavanje stranice u browser može biti veliki problem. Zato vam savjetujem da pri izradi web stranica prvo napravite ono osnovno što ste namjeravali, a zatim ako fajl nije prevelik da pristupite ukrašavanju (dodavanje slika, pozadinske slike, zvukova, animacija ...). Ukrasi ne bi trebali uvečati web stranicu za više od 30% njene osnovne veličine. Na taj ćete način ukloniti mnoge neugodnosti za korisnike vaših stranica.
6. Relativni i apsolutni put do fajla
Relativni put do datoteke koristi se samo ako je taj fajl na istom serveru na kom je i HTML
dokument. Apsolutni se pak može koristiti i u slučaju da koristimo fajl sa nekog drugog severa.
Pogledajte primjere i nadam se da ćete odmah ukapirati.
relativni -> ./osnove/primjeri/primjer1.html
apsolutni -> http://www.domena.com/osnove/primjeri/primjer1.html
Nadam se da vam je jasno o čemu se radi. I jedan i drugi put što se tiče HTML-a
jesu ravnopravni. Relativni se uglavnom koristi ako su nam fajlovi na istom serveru,
a ako nisu koristi se apsolutni koji se još naziva i URL
( Universal Resource Locator ). No o tome ćemo nešto kasnije.
Kod relativnog puta koristi se LINUX sintaxa:
/ - označava root
./ - označava trenutni direktorij
../ - označava gornji direktorij
Primjeri:
Ako smo npr. na stranici http://localhost/foo/foo.html/bar/ otvara http://localhost/bar/
./foo2/ otvara http://localhost/foo/foo2/
foo2/ otvara također http://localhost/foo/foo2/
../bar2/ otvara http://localhost/bar2/
7. Slash znak (/) u VOID tagovima
Void elementi su oni tagovi koji nemaju zatvarajući tag. To su slijedeći tagovi:
area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr.
Nazivaju se VOID jer nemaju nikakav content (sadržaj) pa ne daju nikakav izlaz u web browser.
Void tag može ali i ne mora sadržavati slash znak (/).
Primjer:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" >
ili
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
Ukoliko je naš dokument XHTML onda je obavezna upotreba slash znaka (/).