Uvod u HTML

Poglavlje „Uvod u HTML” upoznaje vas s funkcijama HTML‑a i načinom pisanja HTML-a, te polako uvodi u pisanje prvih stranica.

Prije pisanja morat ćete izabrati editor u kojem ćete raditi, pri čemu vjerujemo da će vam naš pregled funkcija editora koristiti. Pisanje počinje najjednostavnijom mogućom stranicom, a tekst koji ćete napisati vidjet ćete u web pregledniku. Ako želite, na kraju ćete doznati ponešto o povijesti HTML-a i njegovim verzijama. Možda to djeluje nevažno, ali nažalost povijest HTML-a ima posljedice na izgled mnogih web stranica.

Ishodi učenja

Nakon ovog poglavlja ćete moći:

• objasniti odakle potječe slovo „H” u kraticama HTML i HTTP te što odgovarajuća riječ znači
• pogledati HTML kôd bilo koje stranice prikazane u web pregledniku i u njemu prepoznati HTML oznake (tagove)
• napisati osnovni HTML kôd u editoru koji ste izabrali za rad te mu dodati kratak tekst koji će biti prikazan na stranici
• pregledati napisanu stranicu u web pregledniku.

Nakon ovog ćete poglavlja moći i prepoznati oznake koje podebljavaju tekst, te ćete s nestrpljenjem očekivati nove oznake kojima ćete moći urediti svoj tekst.

Aktivnosti u ovom poglavlju

Poglavlje započinje lekcijom koju treba pročitati, a nastavlja se drugom u kojoj gledate HTML kôd tuđe stranice. Slijedi pravi praktični rad:

• izbor editora
• provjera dostupnosti izabranog editora na vašem računalu, te eventualno instalacija nekog editora koji vam još nije na raspolaganju
• upoznavanje s editorom
• pisanje prve web stranice prema primjeru iz lekcije.

Poglavlje završava kratkim pregledom povijesti HTML-a za koji se očekuje samo da ga pročitate.

Osnovni jezik koji upotrebljavamo za izradu web stranica je HTML (engl. HyperText Markup Language). On našim web preglednicima (engl. web browser) daje podatke o sadržaju i strukturi učitane web stranice, a preglednik od tih podataka oblikuje stranicu kakvu mi vidimo. To je jezik kojim stranice „razgovaraju” s našim web preglednicima, ali i jezik koji bi svaki webmaster, odnosno autor web stranica, trebao znati.

Kako mu i samo ime kaže, HTML je jezik za označavanje hipertekstualnih dokumenata.

Definirao ga je 1990. godine sir Timothy Berners-Lee, danas ravnatelj World Wide Web konzorcija (W3C), organizacije koja brine o standardizaciji web tehnologija i razvoju weba. Kao i svaki drugi jezik, i HTML je s vremenom mijenjan i obogaćivan, pa je tako posljednja verzija (4.01) objavljena 24. prosinca 1999.

No, povijesti HTML-a posvetit ćemo se nešto kasnije, u bonus poglavlju. Vratimo se sada na pridjev „hipertekstualni”. Što su to hipertekstualni dokumenti?

Hipertekstualne dokumente danas najčešće susrećemo na Internetu, prvenstveno na webu. Oni se od običnih dokumenata razlikuju po tome što sadrže hiperveze (hiperlinkove) kojima su povezani s drugim (hipertekstualnim) dokumentima. 

Web stranica s uključenom slikom
 i linkovima (zeleno i podvučeno).

Spomenuli smo da je HTML jezik kojim web preglednicima opisujemo strukturu naših web stranica, kako bi ih oni mogli ispravno prikazati. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne možemo izvršiti nikakvu zadaću, pa čak ni najjednostavniju operaciju zbrajanja ili oduzimanja dvaju cijelih brojeva. On služi samo za opis naših hipertekstualnih dokumenata i za ništa više od toga.

Na ovom ćete tečaju upoznati HTML 4.01, koji je posljednja potpuno prihvaćena verzija ovoga jezika. Više o verzijama možete pročitati u bonus lekciji ovog poglavlja.

Nećemo vam predstaviti oznake i atribute koji su u širokoj uporabi, ali nisu dio HTML 4.01 standarda jer neke od njih preglednici ne moraju podržavati.

Iako se u početku može učiniti malo nejasnim, vidjet ćete da je HTML zapravo vrlo jednostavan jezik. Potrebno je samo naučiti razmišljati na tom novom jeziku, kao što su nam uvijek profesori stranih jezika govorili. Isto pravilo vrijedi i ovdje, a nema padeža, članova, nepravilnih glagola i svega ostaloga što najčešće učenje stranog jezika čini kompliciranim.

U sljedećoj lekciji upoznat ćete se s pravilima pisanja HTML‑a, a uskoro ćete i sami napisati svoje prve linije HTML kôda.

Naslovi kartica web preglednika.

Sve ostalo, sav sadržaj koji se prikazuje na stranici, smještamo u tijelo dokumenta.

Dijelove dokumenta mi, a i preglednici, prepoznajemo po odgovarajućim oznakama. Sve ove oznake imaju svoj početni i završni dio, pa osnovni HTML kôd izgleda ovako:

Značenja oznaka su sljedeća:

<html>

Označava početak i kraj HTML dokumenta, pa se tako početna oznaka nalazi na početku, a završna na kraju dokumenta.

<head>

Označava zaglavlje dokumenta. Sadržaj zaglavlja nije vidljiv u prostoru za prikaz stranice web preglednika.

<title>

Nalazi se u zaglavlju dokumenta. Tekst koji omeđuje ova oznaka određuje naslov dokumenta koji je vidljiv u naslovnoj liniji preglednika i, na primjer, pri pregledu aktivnih prozora u traci zadataka operacijskog sustava Windows.

<body>

U tijelu dokumenta smješten je sadržaj koji se prikazuje u pregledniku.

Kao što smo ranije naveli, postoji niz verzija HTML-a. Premda se web preglednik može snaći i bez navođenja verzije s kojom radimo, poželjno ju je navesti. U ovom ćemo tečaju raditi sa strogom verzijom HTML-a 4.01, pa na početak dokumenta, prije oznake <html>, treba staviti oznaku verzije HTML-a:

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">;

Više o verzijama HTML-a, kao i o razlozima za upotrebu upravo te verzije, možete pročitati u bonus poglavlju.

Kao što ste vidjeli u prethodnoj lekciji, HTML kôd je običan tekst, pa izgleda da je za njegovo pisanje i uređivanje dovoljan običan tekstni editor. No, pokazuje se da je dobro imati više od toga.

Isključivo tekstni editori

Tekstni editor koji svi korisnici operacijskog sustava Windows imaju na svom računalu je Notepad (Blok za pisanje).

No, da bi nam bilo ugodno raditi, od običnog tekstnog editora očekujemo malo više nego što nam to može pružiti Notepad, a nekoliko detalja koje sadrži svaki dobar HTML editor su:

• bojanje oznaka, atributa i sadržaja tako da se ističu i  međusobno razlikuju
• jednostavno uvlačenje redaka da bi se naglasile oznake i sadržaji elemenata
• pomoć u pisanju: osnovnu provjeru načina pisanja (sintakse), samodovršetak kod pisanja oznaka i atributa i sl.
• podršku za pisanje raznim pismima, tj. upotrebu znakova iz različitih jezika itd.

Od mnoštva takvih editora ističemo besplatan editor Notepad++, premda je dostupno mnoštvo editora među kojima svaki korisnik treba izabrati onaj koji njemu najviše odgovara.

Uz sve pogodnosti koje dobri HTML editori nude, ručno pisanje koda u tekstnim editorima prilično je neugodno, već zbog činjenice da korisnik ne vidi što zapravo radi. Ono što zapravo radi jest – kodira naslijepo. Nakon dopisivanja nekoliko novih linija kôda korisnik bi trebao prekinuti rad i svoj uradak pregledati u web pregledniku. Taj proces nije samo zamoran, već može biti i prilično frustrirajuć, jer su greške u ručnom pisanju koda gotovo neizbježne. Zato je svaka pomoć editora dobrodošla.

Tekstni editori unutar WYSIWYG editora

Postoje mnogi alati koji nam omogućavaju izradu web stranica i bez najosnovnijeg poznavanja HTML koda. Ti alati automatski generiraju HTML kôd prateći pritom upute koje korisnik zadaje preko relativno jednostavnog korisničkog sučelja („klikajući”). Pritom mu se stranica prikazuje onako kako će se kasnije prikazivati u nekom od preglednika.

Među najpopularnijim alatima za vizualnu izradu web stranica su stari Microsoftov FrontPage i njegovi nasljednici Expression Web, SharePoint Designer 2007 te Adobeov Dreamweaver.

Dilema: koji editor izabrati?

Sad biste trebali odlučiti koji editor upotrebljavati. To je osobna odluka jer HTML kôd možete jednako dobro uređivati u mnogima. Još je važnije da, ako slijedite standarde, bez ikakvih problema možete početi raditi u jednom editoru, a onda kasnije, kad vam se svidi neki drugi, promijeniti alat.

Zato ćemo se u ovom dijelu lekcije koncentrirati samo na prednosti pojedinih načina rada, a ne na konkretne alate.

Vizualno uređivanje ima nekoliko prednosti pred uređivanjem web stranica u tekstnom editoru. Osim što korisnik odmah vidi sadržaj svoje web stranice, program sâm generira potreban kôd, pa je moguća pojava grešaka u pisanju koda svedena na minimum.

S druge pak strane, poznavanje HTML-a neophodno je za svako imalo ozbiljnije izrađivanje web stranica. Čak i programi poput Dreamweavera i Expression Weba imaju svoje nedostatke. Tako ponekad dodaju nepotrebne linije koda koje samo povećavaju vrijeme prijenosa naših stranica, a ponekad ono što želimo dodati jednostavno nije dostupno putem korisničkog sučelja, nego isključivo pisanjem kôda.

Zbog navedenih razloga alati koji nude vizualno uređivanje web stranica najčešće nude i mogućnost ručnog pisanja koda.

Koji alat upotrijebiti za ovaj tečaj?

Ako ste do sada već raditi web stranice i imate iskustva u nekom od programa poput Adobe Dreamweavera ili Microsoft FrontPage, Expression Web, SharePoint Designer, možete nastaviti raditi u njima.  Budući da pohađate ovaj tečaj, tj. želite naučiti pisati ili barem razumjeti HTML kôd, trebat će vam nov način rada u već poznatim editorima. Taj je način rada opisan u u jednoj od sljedećih lekcija.

Unatoč tome što ćete tijekom cijelog ovog tečaja raditi s HTML kôdom, a ne WYSIWYG načinom rada, vjerujemo da nećete moći odoljeti da neke efekte ne napravite u vizualnom editoru, pa onda pogledate kako to izgleda u HTML-u. Zato vam preporučamo da upotrijebite što neki od novijih editora, koji podržavaju noviji HTML standard. Tako, na primjer, gotovo bez ikakve prilagodbe mogu svi korisnici editora FrontPage prijeći na SharePoint Designer 2007. Ako to nećete napraviti, postoji mogućnost da će vam program generirati neke zastarjele oznake i atribute, tj. da ćete se navikavati na elemente HTML-a za koje se preporuča da se polako ukidaju.

Ako nemate iskustva u velikim WYSIWYG programima, predlažemo vam tekstni editor – Notepad++ ili neki drugi u kojem se već dobro snalazite.

Ako ste odlučili ovaj tečaj provesti u editoru Notepad++ ili nekom drugom tekstnom HTML editoru, ovo je lekcija za vas. Primjeri važnih funkcija odnose se na editor Notepad++, ali se oni mogu lako prenijeti na mnoge druge editore.

Ikona programa Notepad++.

Prisjetimo se, glavna je razlika između običnih tekstnih editora i tekstnih HTML editora u prepoznavanju sintakse u potonjima. Tako Notepad++, kad svoj uradak spremite s ekstenzijom .htm, pretpostavlja da je riječ o HTML datoteci te prepoznaje ključne detalje kôda.

Osnovni HTML kôd napisan u editoru Notepad++
s plavo istaknutim elementima jezika HTML.

Osim bojanja, tu su i razne mogućnosti uvlačenja teksta, pri čemu za uvlačenje preporučamo upotrebu tipke [tab] umjesto uzastopnih razmaka. U praćenju početaka i krajeva elemenata može vam pomoći sparivanje početnih i završnih oznaka elemenata prikazano na sljedećoj slici.

Oznaka unosa se nalazi na završnoj oznaci </body>,
a editor nam pomaže ističući i početnu oznaku.

Konačno, kao treću vrlo važnu pomoć koju možete dobiti od editora navodimo niz funkcija izbornika Uređivanje koji izlazi iz okvira uobičajenog skupa funkcija Izreži-Kopiraj-Zalijepi i pruža pomoć u radu s tekstnim dokumentima pisanim u jezicima kao što je, na primjer, HTML. Dodatnu efikasnost možete postići tako da uočite i zapamtite tipkovničke prečace za funkcije koje smatrate najkorisnijima u svom radu.

Ako ste odlučili nastaviti raditi u svom omiljenom WYSIWYG editoru, u redu. Trebat će vam malo discipline zbog izbjegavanja rada na dosad uobičajen način, no sve funkcije koje su vam potrebne u radu s kôdom sigurno ćete naći i u tom editoru.

Za prikaz rada odlučili smo se za program Microsoft SharePoint Designer 2007, besplatan program novijeg datuma.

Ikona programa SharePoint Designer 2007.

Da biste radili s kôdom web stranice, morate prvo izabrati pogled Code.

Izbor pogleda u editoru SharePoint Designer 2007.

Predlažemo da rad uvijek započinjete stvaranjem novog web sjedišta (File > New > Web Site) ili otvaranjem postojećeg (postupkom analognim prethodnom). Tako ćete sve svoje datoteke imati u jednoj mapi, a bit će vam olakšane razne akcije s datotekama, poput stvaranja linkova, preimenovanja i sl.

Kad stvorite novu stranicu na web sjedištu (File > New > Page), na njoj će već biti upisan dio kôda, no on se ne poklapa potpuno s kôdom predloženim u ovom tečaju. Radi lakšeg praćenja tečaja predlažemo izmjenu kôda, a o razlikama između raznih definicija vrsta dokumenata se više govori na naprednim CARNetovim tečajevima.

Sad vam slika izgleda ovako:

Početni HTML kôd u editoru SharePoint Designer 2007.

Pri upisivanju kôda vjerojatno ćete primijetiti prijedloge koje vam program daje. Ako vam takav način rada odgovara, iskoristite te prijedloge pomicanjem do odgovarajućeg prijedloga i izborom klikom miša ili pritiskom tipke [enter].

Prijedlozi za sljedeću HTML oznaku.

Osim opisanih načina praćenja načina pisanja, u traci stanja editora se pojavljuju i oznake upozorenja u slučaju da vaš kôd ne odgovara standardu za koji ste se odlučili u definiciji DOCTYPE.

Kao i prirodni jezici, HTML se vremenom razvijao. Prva verzija ovog jezika (ali ne i službena) objavljena je 1991. godine. Iako je u to vrijeme postojalo nekoliko „standarda” HTML-a, neki prvom pravom verzijom ovog jezika smatraju onu Tima Berners-Leeja. U to je vrijeme jezik još bio poprilično ograničen, pa nije bilo moguće čak ni dodati slike u HTML dokumente. Razvoj HTML-a nastavljen je prvom „imenovanom” verzijom – 2.0, no ni ona nije postala standardom.

U ožujku 1995. novoosnovani W3C objavio je verziju 3.0, koja je donijela mnoge novosti, a među najvećima – definiciju tablica. Daljnji razvoj ove verzije HTML-a označilo je prihvaćanje oznaka koje su osmislili proizvođači tada najvećih i najprihvaćenijih web preglednika. Tako su nastale mnoge duplikacije, pa je postojalo više oznaka koje su imale istu funkciju. Podebljani tekst, primjerice, bilo je moguće definirati oznakom <b> (engl. bold), ali i oznakom <strong>.

I HTML 4, predstavljen u prosincu 1997., nastavio je s prihvaćanjem takvih oznaka nametnutih od strane proizvođača različitih web preglednika, no istovremeno je pokrenuto i „čišćenje” standarda proglašavanjem nekih od njih suvišnima. Manje promjene u specifikaciji ovog standarda predstavljene su u prosincu 1999., kada je predstavljena trenutačno vrijedeća službena verzija ovog jezika – HTML 4.01.

Današnje varijante jezika HTML

Jezik HTML 4.01 danas postoji u tri varijante:

• stroga (strict) – verzija koja podržava samo one oznake koje su dio novog standarda, a glavna joj je značajka da autore potiče da se u HTML-u bave sadržajem, a da izgled stranice definiraju posebno (CSS-om, najčešće u odvojenoj datoteci)

• prijelazna (transitional) – verzija koja podržava i neke zastarjele i suvišne oznake, poput široko rasprostranjene oznake font kojom se može mijenjati izgled znakova za  pojedini dio teksta; premda privlačna, na većim web sjedištima navika rada s prijelaznom verzijom može dovesti do uzaludnog trošenja vremena autora (ali i bitno većih datoteka nego što je potrebno)

• s okvirima (frameset) – verzija koja podržava davno zastarjele okvire, koji su omogućavali neovisno mijenjanje pojedinih dijelova stranice (npr. izbornik je stajao lijevo, a desno su se izmjenjivale stranice).

Osim HTML-a u iste tri varijante postoji i jezik XHTML, koji ima malo drugačiji, precizniji način pisanja (sintaksu).

S druge strane, u razvoju je HTML 5 koji bi autorima trebao omogućiti uključivanje raznih oblika multimedije na način sličan današnjem uključivanju slika, te jednostavniju izgradnju stranica koje komuniciraju s posjetiteljima. Osim toga, nastavlja se čišćenje HTML-a od starih oznaka, te dodavanje novih koje bi trebale istaknuti strukturu dokumenta – upravo kao što je to bilo zamišljeno u početku razvoja HTML-a.