Nakon pažljivog čitanja škole i vježbanja na računalu poznavat ćete osnove HTML-a koje su vam dovoljne za izradu statičke web stranice. Iako znanje o HTML-u nije dovoljno za izradu dinamičke web stranice (koja, za razliku od statičke, podržava interakciju korisnika sa serverom, npr. ostavljanje komentara), bit ćete u mogućnosti napraviti funkcionalnu web stranicu, koja naravno može biti i estetski ugodna.
O čemu zapravo govorimo?
HTML (HyperText Markup Language) je jezik za opis web stranica. Dakle, to nije programski jezik, kao npr. C++ ili Java, nego isključivo opisni jezik, koji web pregledniku opisuje kako prikazati sadržaj web stranice. Ovaj jezik nema nikakvu mogućnost aritmetičkih operacija, tako da, ukoliko želite da vam web stranica vrši nekakve izračune, HTML vam neće biti dovoljan.
Dokument napisan u HTML-u sastoji se isključivo od HTML oznaka (tagova) i teksta koji čini sadržaj web stranice. Tagovi su ključne riječi u HTML-u i oni zapravo opisuju sadržaj, npr. <h1>Ovo je naslov.</h1> će opisati web pregledniku da rečenicu “Ovo je naslov.” prikaže kao naslov (engl. Heading) najviše razine (h1 je najviša razina naslova, h2 je niža, h3 još niža itd.). Postoji standard o pisanju tagova i iako mnogi preglednici imaju toleranciju prema kršenju standarda kod određenih tagova, najbolje je steći naviku pisanja po standardu. Tada je scenarij kao što je drukčiji izgled iste web stranice u različitim web preglednicima gotovo nemoguć.
Za izradu statičke web stranice u HTML-u vam je dovoljan – vjerovali ili ne – Notepad. Potrebno je samo napisani kôd u bilo kojem tekst editoru spremiti sa ekstenzijom.html ili.htm i vaša prva web stranica je spremna za otvaranje u web pregledniku. Iako, u tom slučaju, ona neće biti dostupna na internetu; za to ipak trebate ili kućni server ili, što je bolja i jeftinija opcija, “dići” web stranicu na neki od mnogobrojnih hosting servisa, od kojih su mnogi i besplatni.
Elementi i atributi
Dakle, uključite računalo, pokrenite Notepad i upišite sljedeći kôd:
<html>
<body>
<h1 style=”color:red;”>Ja sam naslov.</h1>
<p>A ja sam
odlomak.</p>
</body>
</html>
Spremite datoteku pod bilo kojim imenom, samo je bitno dodati ekstenziju.html, npr. index.html. Napravili ste web stranicu! Kasnije ćete ju naravno moći poboljšati. Web stranicu možete otvoriti u bilo kojem web pregledniku i vidjeti kako izgleda.
Svaki element se sastoji od početne i završne oznake (engl. start tag, end tag), pa tako ovdje imamo pet elemenata. Element <html> sadrži svaki HTML dokument (web stranica) i on je nužan. Svi ostali elementi se definiraju unutar njega, pa tako njegov jedini element je <body>, koji definira tijelo web stranice i sav sadržaj unutar tijela će biti prikazan, čiji će način prikaza opisati drugi tagovi. Element <h1>, kao što je već spomenuto, definira naslov najviše razine, dok <p> definira odlomak. Ukoliko ste napravili, spremili i otvorili ovu web stranicu u nekom od web preglednika, uočit ćete da je naslov drukčije prikazan (veći je) od odlomka. To je tako jer svaki web preglednik ima svoje unaprijed definirane postavke za različiti prikaz različitih dijelova sadržaja (drukčije prikazuje sadržaj <h1> elementa i <p> elementa) i ukoliko se ne definira nikakva izmjena prikaza sadržaja elementa u kôdu, web preglednik će prikazati sadržaj prema svojim postavkama (prema defaultu).
U ovom slučaju, izmjenu prikaza smo učinili nad elementom <h1>: dio kôda style=”color:red;” je promijenio boju naslova u crvenu. Taj dio kôda se naziva atributom. Atribut se uvijek pojavljuje u obliku ime_atributa=”vrijednost”, gdje svaki HTML tag ima unaprijed definirane atribute koji se mogu primjeniti na njemu.
Primjetili ste možda da nam je ostao još jedan element neobjašnjen. To je jedan od elemenata iz HTML-a koji je samozatvarajući, odnosno, nema početni i završni tag, nego samo jedan tag unutar kojeg se i otvara i zatvara. Ako ste isprobali kôd, vidjeli ste da
ima ulogu prelaska u novi red. Inače, HTML ignorira prelaske u novi red, tako da je isti nužno izvesti pomoću tagova: ili recimo zatvaranje odlomka i otvaranje novog. U tu svrhu,
je svakako bolji odabir.
Najčešće korišteni elementi
Dakle, izrada HTML web stranice se zapravo svodi na slaganje tagova. Što više tagova znate, više različtih elemenata možete unijeti u HTML dokument i time napraviti sadržajniju web stranicu. Ipak, postoji skupina tagova koji čine osnovu i bez kojih ćete teško dizajnirati web stranicu pa ćete ih imati priliku naučiti na sljedećem primjeru:
<html>
<body>
<h1>Elementi</h1>
<p>Svaki element se sastoji od: </p>
<ul>
<li>2 taga:
<ol>
<li>pocetni tag</li>
<li>zavrsni tag</li>
</ol>
</li>
<li>sadrzaj</li>
</ul>
<p>Za detalje procitajte Skolu
ili se obratite <a href=”http://www.google.hr”>
Googleu.</a></p></body>
</html>
Prvo slijedi par napomena: Kao što je već navedeno u Školi, HTML ignorira višestruke razmake (svede ih na jedan razmak) i nove redove. Zbog navedenog, dobra je praksa, radi preglednosti, pisati tagove tako da se vidi hijerarhijska struktura, kao što je učinjeno u gornjem primjeru. U tom slučaju, teško će se dogoditi da recimo niste sigurni jeste li stavili numeriranu listu unutar nenumerirane ili obrnuto. Uredno pisanje kôda je posebno važno kod tablica, o kojima ćemo govoriti kasnije. Nadalje, u ovom primjeru imate priliku vidjeti elemente bez ikakvih atributa (izuzev elementa <a>) te “defaultnu” interpretaciju elemenata prilikom prikaza.
Elemente <html>, <body>, <h1> i <p> smo već obradili. Element <ul> je nenumerirana lista (engl. unordered list). Između početnog i završnog taga se navode elementi <li>, koji predstavljaju natuknice liste. Kao što možete primjetiti, <li> elementi su ugnježđeni unutar <ul> elementa. Sljedeći element je <ol>, koji funkcionira jednako kao i <ul>, samo je razlika što je ovo numerirana lista pa će svaka natuknica imati redni broj ispred sebe. U primjeru se fino vidi kako funkcionira hijerarhijska struktura: imamo glavnu, nenumeriranu listu unutar koje su dvije natuknice. U prvoj natuknici je ugnježđena nova, numerirana lista s dvije natuknice.
Element <a> prestavlja sidro (engl. anchor), koji se koristi u dvije svrhe: postavljanje reference unutar web stranice i postavljanje reference na neki drugi dokument (najčešće vanjska web stranica ili slično). Referenciranje na drugu web stranicu (odnosno stvaranje linka) ili na sidro unutar web stranice postiže se zadavanjem atributa href, koji kao vrijednost ima adresu web stranice (ili sidra) koju web preglednik otvara kada korisnik klikne na sadržaj elementa. U ovom slučaju, klikom na “Googleu” web preglednik otvara web stranicu “www.google.hr”.
Elementi , i su redom za masna, podcrtana i kosa slova (engl. bold, underline, italic). Kao i kod svih drugih elemenata, tako se i ovi mogu ugnijezditi pa upotrijebiti više efekata na istom tekstu. Samo vodite računa o pravilnom rasporedu tagova, npr. Neki tekst je nepravilno, jer nije jasno koji je element unutar kojeg.
Ukoliko ste isprobali kôd, mogli ste primijetiti da je link (“Googleu”) podcrtan, iako nije unutar elementa. To se događa zato što su u web pregledniku predefinirane postavke za linkove da ih oboji i podcrta. Za izbjegavanje ove pojave potrebno je dodati određeni atribut, no o tome će biti više riječi kasnije.
Samozatvarajućim tagom <!– –> se stavlja komentar u kôd. Komentar je vidljiv samo u dokumentu, on se ne prikazuje u web pregledniku. Komentari služe za dizajnerove zabilješke, lakše snalaženje u kôdu itd.
Najčešće korišteni atributi
Prije se oblikovanje teksta vršilo tako da je za svaku karakteristiku teksta postojao određeni atribut. Ako ste primjerice željeli obojati odlomak i postaviti mu željeni font, to ste činili tako što elementu <p> postavite dva atributa: jedan za font i jedan za boju. Međutim, dolaženjem novih standarda (prvo XHTML pa zatim i HTML 5, koji još nije služben) se ovakav način oblikovanja polagano izbacuje iz upotrebe, sve se oblikuje preko CSS-a. CSS koristi svoju sintaksu i najčešće se definira u posebnoj datoteci, no oblikovanje se može izvesti i na takozvani “inline” način.
Tekst, a kasnije i slike i druge elemente ćemo oblikovati atributom style. Kao vrijednost ovom atributu se dodaju parovi ime_atributa: vrijednost; kako je to određeno CSS sintaksom. Postoji čitav niz atributa koji se mogu na ovakav način postavljati, no ovdje ćemo upoznati samo one najbitnije i najčešće korištene. Slijedi primjer korištenja atributa style:
<html>
<body style=”background-color: #AAAAFF; color: red”>
<h1 style=”color: blue; font-size: 50px;”>Ja sam naslov.</h1>
<p style=”font-family: Comic Sans MS; text-align: center;”>A ja sam odlomak.</p>
</body>
</html>
Dakle, u ovom primjeru možete vidjeti 4 style atributa u akciji. background-color određuje boju pozadine elementa na kojem se primjenjuje, dok color određuje boju teksta unutar elementa. Svi style atributi koji kao vrijednost imaju boju podržavaju tri načina zadavanja boje, od kojih su dva gore prikazana najčešći. Kôd u obliku #xxxxxx je tzv. heksadekadski kôd boje, a njega je lako dobiti pomoću bilo kojeg boljeg grafičkog alata. Drugi način je jednostavno engleska riječ za boju koju želimo postaviti.
Atribut font-size određuje veličinu fonta, a font-family vrstu fonta. text-align određuje poravnanje teksta. Može imati standardne vrijednosti: left, right, center i justify.
Veličina fonta u ovom primjeru je zadana u pikselima. Međutim, možete ju zadati i postocima pa ukoliko npr. postavite veličinu na 125%, tekst će biti 25% veći od prethodno zadane veličine (ili defaultne veličine, ukoliko veličina nije prethodno zadana).
Primjetite da je tekst “A ja sam odlomak” u crvenoj boji, iako elementu <p> nije zadana boja. Razlog tome je što je <p> naslijedio boju teksta od elementa u kojem se nalazi. Tu se jasno opet može vidjeti hijerarhijska struktura HTML-a: sav tekst koji je u elementu <body> ili u njegovim podelementima (tzv. djeci) je crvene boje. Jedno dijete, <p>, nema zadanu boju teksta pa ju nasljeđuje od elementa <body> (tzv. roditelja). Drugo dijete, <h1>, ima zadanu plavu boju teksta; <h1> prvo nasljeđuje od roditelja crvenu boju pa ju zatim promijeni u plavu, jer ju ima posebno zadanu za svoj element. Ovakav način ponašanja se susreće u svim objektno orijentiranim programskim jezicima (Java, Python, C++ itd.) te ga je bitno shvatiti i u HTML-u jer ćete često koristiti svojstvo nasljeđivanja pri izradi web stranica.
Slike i tablice
Zasad smo prošli kroz osnovne stvari po pitanju teksta. No, kako bi web stranica bila estetski privlačna, nužno je da su na njoj i slike te da je sve skupa na neki način posloženo. Za slike naravno postoje elementi, a za slaganje sadržaja se koriste ili tablice ili blokovi elemenata. Ovdje ćemo spomenuti, zasada, samo tablice, dok ćete o elementu naučiti u sljedećem dijelu Škole.
Slike
Slika je definirana elementom <img />, koji se gotovo uvijek koristi sa atributom src, jer upravo taj atribut određuje koja slika će se prikazati. Ovaj element je samozatvarajući, tako da se ne stavlja nikakav sadržaj u njega. Dakle, slika se definira na sljedeći način: <img src=”lokacija_slike” alt=”opis_slike”/>, gdje je lokacija_slike putanja do slike koju želite prikazati, a opis_slike je kratak tekst koji se prikazuje umjesto slike ukoliko se iz bilo kojeg razloga ista ne može prikazati. Slijedi primjer slike:
<html>
<body>
<p>
<a href=”http://www.google.com”>
<img src=”http://www.google.hr/images/srpr/logo3w.png” align=”right” alt=”Slika se ne moze ucitati.” />
</a>
Ovdje imamo primjer slike koja je poravnata desno i ujedno je link na web stranicu.
</p>
</body>
</html>
U primjeru vidite kako funkcionira element slike. Tekst atributa alt se prikazuje ukoliko se slika ne učita što možete isprobati tako da “pokvarite” lokaciju slike pa da slika bude nepostojeća. Atribut align radi isto što i atribut text-align unutar atributa style u prošlom primjeru, samo što je ovaj atribut općenit, primjenjiv je na bilo kakav element, a ne samo na sliku. Pozicioniranje slike pomoću atributa style je nešto kompliciraniji nego što je to slučaj s tekstom pa je ovo brži i jednostavniji način kada je u pitanju slika. Primjetite i to da nije bitno što je u kôdu element <img> postavljen ispred sadržaja elementa <p>, svejedno se prikazuje na desnoj strani zbog atributa. Ne mora nužno tekst biti link na neku web stranicu, može biti i slika: umjesto teksta ili elementa <p> i sl. stavimo element slike unutar elementa <a> kao što je to ovdje i učinjeno.
Tablice
Iako je tablicama primarna svrha prikazivanje tabličnog sadržaja, one se jako dobro mogu iskoristiti za manipulaciju nad elementima u vidu njihove pozicije pri prikazu. Tablice se grade primarno pomoću tri elementa: <table>, koji definira tablicu, <tr>, koji predstavlja redak tablice i <td>, koji predstavlja jednu ćeliju tablice. Može se koristiti i element <th>, koji je naslovni element tablice, pa će web preglednik obično prema defaultu masno otisnuti tekst unutar ovakve ćelije. U svaku ćeliju se može staviti bilo koji element: tekst, slika, tablica, itd.
<html>
<body>
<p>Primjer tablice: </p>
<table style=”background-color: #AAAAAA”>
<tr style=”background-color: #AAAAFF” height=”80px”>
<th>Web stranica</th>
<th>Logo i link</th>
</tr>
<tr>
<td>PCchip</td>
<td>
<a href=”http://www.pcchip.hr”>
<img src=”http://tehnofobija.com/wp-content/uploads/2010/09/chip-26645.jpg”
width=”100px”/>
</a>
</td>
</tr>
<tr>
<td>Google</td>
<td>
<a href=”http://www.google.hr”>
<img src=”http://www.google.hr/images/srpr/logo3w.png” width=”100px”>
</a>
</td>
</tr>
</table>
</body>
</html>
U primjeru postoje novi, nespomenuti atributi, a to su width koji određuje širinu elementa i height za visinu elementa. Atribut width je izuzetno važno koristiti u tablicama, jer svaka slika, koja je šira od stupca odnosno viša od retka, raširit će stupac odnosno redak, što može dovesti do neželjenog izgleda cijele web stranice. Atribute za širinu i visinu također možete primjeniti na element <body>, čime ćete postići definiranje veličine cijele web stranice. Ukoliko u tom slučaju postavite boju pozadine, vaša web stranica će vizualno biti omeđena.
Nasljeđivanje atributa se lijepo vidi i u ovom primjeru, pa je prvi red plave boje, iako je cijela tablica siva. Možete primjetiti i to da svaka ćelija ima okvir (vidi se u prvom redu). Taj okvir je postavljen od strane web preglednika i često nam je neželjen, pa ga lako isključimo dodavanjem atributa border elementu table. Vrijednost mu se dodaje kao i svakom atributu koji opisuje veličinu pa okvir jednostavno isključimo postavljanjem vrijednosti atributa border na 0px.
U primjeru je namjerno stavljena pozadina koja nije bijele boje tako da lako možete uočiti koji se problem javlja pri stavljanju slika u tablicu. Estetski je prilično neprivlačna pojava bijele boje u postavljenim slikama, jer iako su slike pravokutne, sadržaj slike nije pravokutan (logo PCchipa ima odrezan gornji desni vrh, a logo Googlea čine slova, bez ikakve pozadine). Zbog ovakvih stvari je potrebno prilagoditi tablicu slikama i slike tablici: ili pozadinu tablice prilagoditi slikama, ili slike obraditi u alatu za grafičku obradu, ili dizajnirati ćelije kao nekakve blokove koji su recimo uokvireni.
U sljedećem nastavku: naprednije tehnike pri web dizajnu u HTML-u.
Piše: Josip Užarević
