Uvod
Odlučio sam početi pisati ovu malu školu iz nekoliko razloga:
1. Zato što sam skužio da nisam objasnio dobro neke stvari u prva dva tutorijala.
2. Zato što želim napraviti jedan sveobuhvatni tečaj na ovim stranicama počevši od samih osnova pisanja koda pa do grafičkog oblikovanja web stranica u Photoshopu.
Lekcije će izlaziti barem jednom tjedno i bit će napravljene kao obični tekstualni ili kao video tutoriali, zavisi o temi lekcije. Naprimjer za ovu lekciju nije potreban video tutorial zato što se ovdje radi većinom o teoriji i mislim da je lakše pratiti ovako napisano nego kao video tutorial.
Nadalje, pokušat ću ovu školu napraviti tako da je poprilično jednostavna za pratit i bez prevelikog ulaska u tehničke detalje, pošto i inače u stvarnom životu predajem neke informatčke tečajeve shvatio sam da ljudi puno bolje nauče ako nešto rade nego ako samo čitaju ili slušaju o nekoj temi. Naravno ohrabrujem svako detaljiziranje na svoju ruku. Probajte prateći ovaj tutorial, raditi vježbe – ako ih tako mogu nazvati – koje i ja radim.
Struktura HTML dokumenta
Za početak ćemo uzeti jedan html dokument i njega ćemo malo rasčlaniti da vidimo očemu se tu radi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Naslov stranice</title> </head> <body> <h1>Pozdrav. Ovo je moja prva html stranica.</h1> </body> </html>
Što je ovo iznad? Kako dolazimo do toga? Znači, neki dokument nazivamo html dokumentom kada ima nastavak .html ili .htm. Znači da bi napravili ovu vježbu, napravite dokument u vašem omiljenom text editoru (može i obični notepad) prekopirajte gornji kod i nazovite dokument prva.html. Nakon toga ga pokrenite (dvoklik) i trebali bi dobiti nešto ovako.
Na donjoj slici možete vidjeti glavne dijelove html dokumenta:
Gornja slika prikazuje glavnu podjelu html dokumenta. Sada ću malo opisati te dijelove:
1. Pod brojem jedan imamo doctype – doctype služi da bi browser bolje generirao stranicu. Bilo bi najbolje da si uvijek kopirate ovakav doctype u zaglavlje svih html dokumenata. Browser će generirati stranicu i bez doctypa ali velika je vjerovatnost da ju neće generirati na način na koji mi to očekujemo. Zasad toliko o doctypu rko želi znati više neka posjeti ovaj link.
2. Broj 2 počinje sa < html xmlns=.... a zavrsava sa < / html >. Ova formacija u kodu se naziva TAG. Tag je najjednostavnije rečeno označivač koji govori gdje neki dio html-a počinje a gdje završava. Kao što vidite većina tagova počinje sa < unutar zagrade se nalazi ime taga nakon kojeg mogu slijediti neka svojstva i onda početak taga zatvorimo sa >. Kraj taga opet počinje sa < nakon toga stavljamo kosu crtu / koja označava kraj taga i nakon toga upisujemo ime taga, ovdje ne idu nikakva dodatna svojstva i naravno opet zatvaramo sa >. < html > tag označava početak html koda i bilo bi jako dobro da se nalazi u svakom vašem html dokumentu.
3. Primjetite da se broj 3 i 4 nalaze unutar html taga, što znači da su to njegovi elementi. Sljedeći tag na koji nailazimo je head tag. Head tag predstavlja zaglavlje vaše stranice, primjetite da se unutar head taga nalazi još nekoliko dodatnih tagova (iako ih inače ima puno više – ali o tome kasnije). Znači imamo:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Ovaj tzv. meta tag opisuje koji charset (set slova) će se koristiti na stranici, u ovom primjeru to će biti zapadnoeuropski, ako hoćemo dobro prikazivati naša slova trebali bi upisati caharset=iso-8859-2. Primjetite da meta tag nema zatvarajućeg elemnta, zanči ne postoji nešto kao < / meta > nego se zatvara sa “/>”. Nakon meta taga imamo title tag:
<title>Naslov stranice</title>
Title tag određuje naslov stranice. Što god da upišete između < title > i < / title > će biti naslov stranice koji će se prikazivati na vrhu vašeg omiljenog browsera. Ispod title taga imamo < / head > koji označava završetak head taga odnosno zaglavlja stranice.
Vrlo je bitno da shvatite da head tag ne predstavlja zaglavlje stranice u nekom grafičkom smislu. Zanči da se head tag praktički neće vidjeti na stranici, osim naslova na vrhu browsera. On samo sadrži podatke koji su potrebni za ispravno funkcioniranje stranice. Ali o tome više kasnije.
4. I na kraju dolazimo do body taga. Body je jako bitan zato što označava gdje počinje i završava ono što korisnik web stranice vidi. Uglavnom sve što budete željeli da vam se prikaže na web stranici morate staviti u body tag. Što znači između < body > i < / body >. Unutar body taga imamo tag koji se naziva h1 – h1 sa h1 označavamo da je sve što se nalazi između početka i završetka taga naslov.
h tagovi
Zašto je podnaslov h tagovi? Zato što naravno imamo više h tagova. Oni se razlikuju u broju koji dolazi poslije slova h. Znači imamo ih nekoliko: h1, h2, h3 itd. Ali da nebi previše pričali o tome, proširite sada vaš prvi html dokument da izgleda ovako:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Naslov stranice</title> </head> <body> <h1>Pozdrav. Ovo je moja prva html stranica.</h1> <h2>Pozdrav. Ovo je moja prva html stranica.</h2> <h3>Pozdrav. Ovo je moja prva html stranica.</h3> <h4>Pozdrav. Ovo je moja prva html stranica.</h4> <h5>Pozdrav. Ovo je moja prva html stranica.</h5> <h6>Pozdrav. Ovo je moja prva html stranica.</h6> </body> </html>
i trebali bi dobiti ovako nešto.
Znači što je broj iza slova h veći to će slova na prikazu biti manja. To je super, ali je isto tako i netočno i nepotrebno, zato što ćemo kasnije naučiti da mi možemo odrediti veličinu slova h tagova pomoću css-a. Za sada je bitno shvatiti da h tagovi određuju konstrukciju stranice, odnosno, određuju koliko je ono što je izmedju h taga upisano važno ili koliko bi se trebalo isticati. Možemo na to gledati i ovako, h1 je glavni naslov nekog teksta, h2 je neki podnaslov u tom tekstu, h3 je podnaslov u podnaslovu itd. Možemo mi napraviti stranicu ne koristeći ni jedan h tag, ali to je loša praksa. Pošto ako je stranica dobro konstruirana web tražilice će ju bolje prepoznavati i prije će ju unijeti u svoju bazu.
Još jedna bitna stvar je to da bi stranica trebala dobro izgledati i bez stilizacije (css dokumenta), a u tome h tagovi pomažu da se zna što je najvažnije na stranici, što je manje važno itd.
p tag
P tag nam služi za određivanje gdje počinje i završava pojedini paragraf odnosno odlomak teksta. Za primjer možete izmjeniti vaš .html dokument da izgleda ovako:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Naslov stranice</title> </head> <body> <h1>Tekst ispod ovoga je paragraf.</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque id diam et massa mattis nonummy. Aenean tincidunt. Praesent et mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis gravida. Curabitur a enim. Aliquam magna neque, euismod in, convallis et, tincidunt vitae, tellus. Nunc tristique nibh. Donec nec massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus vestibulum.</p> <p>Praesent purus tortor, scelerisque tristique, ullamcorper ut, imperdiet et, felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sed orci. Pellentesque auctor arcu sit amet nisi egestas dapibus. Maecenas sed quam a dui convallis convallis. Donec nec quam. Pellentesque justo eros, condimentum vitae, nonummy in, ornare et, mi. Donec sit amet magna at libero volutpat consequat. Cras auctor. Phasellus orci leo, malesuada non, rhoncus at, varius a, lacus. Praesent ornare. Praesent aliquam libero nec mauris. Morbi porttitor hendrerit enim. Nam sapien diam, convallis id, placerat a, rhoncus a, lorem. In id eros. Morbi mollis, felis a egestas ullamcorper, tortor sem egestas urna, a hendrerit leo sem ac justo.</p> </body> </html>
i trebali bi dobiti ovo.
Znači napravili smo 2 odlomka. Možemo vidjeti da su 2 pošto su i fizički odvojena. P tagove koristimo kada želimo da nam neki tekst predstavlja odlomak. P tagovi se isto kao i h tagovi kasnije mogu oblikovati pomoću css-a da bi izgledali onako kako mi to želimo i isto su bitni za samo konstrukciju stranice.
ul i li tagovi
ul i li su tagovi koji se koriste u kombinaciji. li tagovi se uvijek moraju nalaziti unutar ul tagova. Za primjer ćemo dopisati ispod drugog odlomka sljedeće:
<ul>
<li>Prvi navod</li>
<li>Drugi navod</li>
<li>Treći navod</li>
</ul>
Rezultat možete pogledati ovdje.
Dakle ul i li tagovi nam služe za prikaz ne uređene liste. ul je unorder-list (neuređena lista) ali li je list-item (član liste). Moramo paziti da li tagovi uvijek budu između < ul > i < / ul >. < ul > tag kaže da započinjemo listu, zatim < li > tag kaže da započinjemo upis člana liste, zatim < / li > tag govori da smo završili sa upisom člana i onda nam na kraju < / ul > tag govori da smo završili sa upisom liste.
img tag
Img tag je jedan od rijetkih tagova koji se ne zatvara sa npr. < /img > nego se zatvara sa />. Ovaj nam tag služi za prikazivanje slika. Da bi pokazali kako radi ovaj tag, trebamo napraviti male promjene u mapi u kojoj ste spremili vaš .html dokument. Najprije napravite mapu koju ćete nazvati “slike” ili “images” ili kako već želite, ta mapa će nam služiti da u njoj držimo slike koje ćemo stavljati na našu stranicu. U tu mapu spremite neku sliku po vašem izboru i promjenite joj ime u slika.jpg ili slika.gif ako koristite .gif sliku, tako da lakše možete pratiti ovaj primjer. Kada ste to sve obavli upišite sljedeće ispod neuređene liste:
<img src="images/slika.gif" title=" naslov slike" alt="alternativni naslov slike" />
Ovako izgleda taj primjer sa slikom koju sam ja stavio.
Ajmo sad malo objasniti tu liniju koda:
< img označava početak taga, nakon toga imamo src=”images/slika.gif”, pomoću ovoga govorimo browseru gdje nam se nalazi slika koju želimo prikazati, znači slika se nalazi u mapi images a zove se slika.gif. Kada bi nam se slika nalazila npr. u podmapi mape images koja se zove druge-slike onda bi napisali src=”images/druge-slike/slika.gif”. Na ovo treba jako dobro obratiti pažnju, jer ako putanja do slike nije dobro upisana browser nam neće prikazati tu sliku. To je jedna od najčešćih grešaka kod prikaza slika. Nakon toga imamo title=”naslov slike”, sa ovom komandom kažemo kako se slika zove ili unutra možemo upisati opis slike. Title komanda i nije toliko važna i možete je kompletno izostaviti iz taga ako vam se neda pisati. Nakon title komande imamo alt=”alternativni naslov slike”, u alt upisujemo alternativni naslov ili opis slike. Ovau isto kao i title ne morate stavljati u img tag, ali je poželjno da ju stavite, zato što će se taj naslov prikazati ako netko isključi prikaz slika u svome browseru ili ako koristi čitač ekrana (slabovidne i slijepe osobe najčešće koriste takve programe). Isto tako, stranica vam neće proći W3C validaciju ako nemate alt komandu unutar img taga, ali će slika ipak biti prikazana. I na kraju tag zatvaramo sa / >.
div tag
Div tag je zadnji tag kojeg ćemo obraditi u ovoj lekciji. Njegova primjena vam najvjerovatnije neće biti baš najjasnija dok ne pređemo na drugu lekciju i počnemo učiti CSS pomoću kojega ćemo oblikovati ove tagove koje smo naučili. Dodajte ovo ispod slike:
<div>Ovo je moj prvi div tag</div>
Probajte pokrenuti dokumnet prva.html i vidjet ćete da nam se pojavio samo tekst “Ovo je moj prvi div tag”, i ništa se drugo posebno nije dogodilo. To je zato što div tag opisuje blok, odnosno neku određenu cijelinu na stranici. Da bi se shvatila puna moć div tagova, moramo se upoznati sa CSS-om i u njemu oblikovati div tag. Zato ovdje više neću opisivati div tagove jer neće imati smisla ako ga ne vidite u punoj snazi, a to nam slijedi u idućoj lekciji.
Zaključak
Ovih nekoliko tagova koje sam naveo gore su vam sasvim dovoljni da napravite svoju prvu web stranicu, što ćemo nastaviti raditi u lekciji 2, kada se počinjemo baviti CSS-om i oblikovanjem tagova koje smo danas naučili. Od sljedeće lekcije počinjemo praviti naš web site. Korak po korak, tako da ćemo do kraja ovog tečaja imati potpuno funkcionalan web site. Pišite ako vam što nije jasno.
