Title: Uvod u HTML
Course: Osnove HTML-a > Section: Uvod u HTML

Što je HTML, kako izgleda taj jezik i kako izgleda najmanja stranica.

O ovom poglavlju

O ovom poglavlju
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.

Što je HTML?

Što je HTML?
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).

Kada govorimo o webu, bilo bi bolje rabiti pojam hipermedij umjesto pojma hipertekst – web stranice su najčešće multimedijalni, a ne samo tekstni dokumenti. Svejedno, pojam hipertekst već je toliko ukorijenjen da ga se danas rabi za sve vrste povezanih dokumenata, bez obzira na njihov sadržaj.

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.

Osnovni elementi HTML-a

Osnovni elementi HTML-a
Za početak, da se riješimo eventualnog straha, otvorite svoju omiljenu web stranicu i zavirite u njezin kôd. Upotrebljavate li Internet Explorer, kliknite desnom tipkom na pozadinu stranice i odaberite View Source (ili Prikaži izvor za korisnike hrvatske verzije operacijskog sustava). Korisnici Firefoxa odabrat će View Page Source, a i u ostalim preglednicima postupak je sličan.

Desni klik na stranicu u web pregledniku Google Chrome
daje izbornik koji sadrži funkciju za pregledavanje
izvornog kôda stranice.

Nakon izbora funkcije za pregledavanje izvora stranice vidite HTML kôd koji opisuje vašu omiljenu stranicu. Složit ćete se da više nije ni približno privlačna kao onda kada je prikazana u web pregledniku. A sad, kada ste se suočili sa strahom, moramo vas uvjeriti da nije ni približno složeno kako izgleda.

HTML kôd sastoji se od oznaka (engl. tag) i piše se po pravilu:

<xyz>
  Tekst koji se prikazuje na stranici.
</xyz>

Oznake mogu pobliže odrediti atributi, što se piše ovako:

<xyz atribut1="vrijednost1"
      atribut2="vrijednost2">
  Tekst koji se prikazuje na stranici.
</xyz>

Osim oznaka i atributa, trebamo još uvesti pojam elementa:

- element yxz ima početnu oznaku <xyz> i završnu </xyz>
- element xyz obuhvaća i oznake i sadržaj, dakle element xyz je <xyz ...> ... </xyz>
- za atribute možemo reći da pripadaju elementima, a nalaze se unutar početnih oznaka.

Dakle, HTML dokument se sastoji od elemenata, a oni se pišu pomoću oznaka, atributa i tekstnog sadržaja.

Primjer oznake

Elementi i atributi imaju unaprijed zadana imena koja moramo naučiti. Na primjer, element kojim se podebljava tekst nosi ime b, pa se odgovarajuća početka i završna oznaka pišu <b> i </b>. Tako ćemo „Tekst koji se prikazuje na stranici” podebljati na sljedeći način:

<b>
  Tekst koji se prikazuje na stranici
</b>

U web pregledniku vidjet ćemo samo tekst koji se nalazi unutar početne i završne oznake <b> i </b>, dok kôd koji opisuje izgled teksta neće biti prikazan.

Ponovite što su:

- oznake
- atributi
- elementi.

Osnovni HTML kôd

Osnovni HTML kôd
Svaki HTML dokument sastoji se od zaglavlja i tijela. U zaglavlju dokumenta definiramo elemente koji se ne prikazuju na stranici. Između ostalog, ovdje definiramo naslov dokumenta koji se prikazuje na naslovima kartica web preglednika.

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:

<html> |
 | <head> <title>Naslov dokumenta</title> </head> | ZAGLAVLJE STRANICE
 | <body> Ovo je minimalni HTML dokument. </body> | TIJELO STRANICE
</html> |

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.

Prvu vježbu ćete napraviti u najjednostavnijem editoru, što će za većinu korisnika operacijskog sustava Windows biti Blok za pisanje (Notepad). Ne preporučamo rad u programu za uređivanje teksta, poput programa Word, WordPad i sl.

Stvorite novu datoteku, u nju prepišite kôd iz primjera, te na početak dokumenta, ispred oznake <html>, dodajte oznaku standarda.

Budući da je u HTML-u svejedno kako stoje razmaci i prijelomi redaka u tekstu, kôd HTML dokumenta možete napisati kako želite, ali se radi bolje čitljivosti preporuča uvlačenje kao u prethodnom primjeru.

Stvorite novu mapu u koju ćete spremati sve svoje vježbe, te u nju spremite upravo stvorenu datoteku pod imenom osnovni_kod.htm.

Nakon spremanja pronađite spremljenu datoteku u popisu datoteka mape u koju ste je spremili te je dvoklikom otvorite u web pregledniku. Sad vidite svoju prvu web stranicu.

Datoteku osnovni_kod.htm koju ste upravo stvorili moći ćete upotrijebiti kao predložak za stvaranje bilo koje druge stranice.

Editori za HTML

Editori za HTML
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.

Vizualno uređivanje stranica naziva se i WYSIWYG (what you see is what you get) – u slobodnom prijevodu: „ono što vidiš, to ćeš i dobiti”.

U takvom načinu rada korisnik ne vidi oznake koje editoru govore o promjeni izgleda dijela teksta, nego vidi njihov učinak. Sigurno poznajete jedan takav editor, Microsoft Word, koji je prvenstveno namijenjen pisanju dokumenata namijenjenih ispisu, a ne objavljivanju na webu.

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.

Namjena programa SharePoint Designer je stvaranje dinamičkih web sjedišta, no može nam dobro poslužiti i za osnovni rad s HTML-om.

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

Notepad++ – primjer tekstnog editora

Notepad++ – primjer tekstnog editora
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++.

Provjerite imate li program Notepad++ na svojem računalu. Ako ne, preuzmite ga s web sjedišta autora.

Ako vaši kolege hvale neki drugi tekstni editor, možete i njemu dati šansu, te ga tekođer instalirati.

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.

Prilagodite veličinu prikaza dokumenta na isti način na koji to činite u web preglednicima, kombinacijom [ctrl] + okretanje mišjeg kotačića.

Proučite izbornike Pokrenuti i Uređivanje te u svakom nađite barem po jednu funkciju koja bi vam mogla koristiti.

Ovom se zadatku možete vratiti i tijekom tečaja, a dobro je istražiti i druge funkcije editora.

SharePoint Designer 2007 – primjer WYSIWYG editora

SharePoint Designer 2007 –
primjer WYSIWYG editora
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.

Provjerite imate li program SharePoint Designer 2007 na svojem računalu. Ako ne, preuzmite ga.

Ako imate instaliran FrontPage, možete ga deinstalirati – sad ili kad se uvjerite da je „novi” program zaista sličan „starom”.

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

Izbor pogleda u editoru SharePoint Designer 2007.

Znatiželjni korisnici mogu raditi i u pogledu Split, pri kojem je radno područje ekrana podijeljeno na dio s HTML kôdom i WYSIWYG dio, te se nakon rada s kôdom klikom na područje za WYSIWYG način rada može vidjeti prikaz napisanog.

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.

Izbrišite oznaku <body> i pogledajte kako vam se promijenila boja kôda stranice, te koja vam se nova oznaka pojavila na desnoj strani trake stanja. Postavite pokazivač miša na tu ikonu, pa ispravite pogrešku koju ste upravo (namjerno) napravili.

Kliknite desnom tipkom miša na stranicu u pogledu Code i istražite funkcije koje vam se nude. Neke od njih će vam biti vrlo korisne.

Ovom se zadatku možete vratiti i tijekom tečaja, a dobro je istražiti i druge funkcije editora.

Pravila pisanja HTML-a

Pravila pisanja HTML-a
Na kraju poglavlja sabrali smo nekoliko važnih pravila pisanja HTML-a:

- Sve što se nalazi unutar neke oznake poprima svojstva određena tom oznakom.
- Većina oznaka ima svoj početni dio, npr. <i>, i završni dio – </i>. Ova će oznaka, primjerice, ukositi sav tekst koji ona omeđuje (italic). U završnom dijelu oznake ispred naziva oznake stoji znak /.
- Nije bitno pišemo li HTML oznake i atribute velikim ili malim slovima, no preporučljivo je pisati sve malim slovima.
- Vrijednosti atributa poželjno je pisati u navodnicima.
- Kôd cijele stranice možemo pisati i u jednom jedinom retku, nižući oznake jednu iza druge. No, bolje je pisati ih tako da kôd bude što pregledniji, jer ćemo se sigurno kasnije morati na njega vratiti i ponešto izmijeniti.

Razmaci i prijelomi reda napisani u editoru ne vide se na web stranici prikazanoj u web pregledniku. To vrijedi i za tekst koji će biti prikazan na stranici, ali i za oznake – odluka o broju razmaka i prijeloma redaka je prepuštena autoru.
- Oznake omeđuju sve elemente našeg dokumenta, pa tako i jedna drugu. Ako u kodu imamo dvije ili više oznaka, jedna se mora nalaziti unutar druge. Na primjer:
<i>Ovaj tekst je ukošen, a ovaj <b>i ukošen i podebljan.</b></i>
Ispravno: <i>...<u>...</u>...</i>
Neispravno: <i>...<u>...</i>...</u>

- I za kraj nešto nevezano za HTML – imena HTML dokumenata smiju sadržavati isključivo znakove engleske abecede i ne smiju sadržavati sistemske znakove (*, ?, /, : i sl.), a preporučljivo je izbjegavati i razmake u imenima dokumenata. Umjesto razmaka upotrebljavajte znakove – ili _ kao u primjerima moja_stranica.htm, moja-stranica.htm.

Uzrok ovom pravilu je činjenica da se web stranice mogu naći na različitim operacijskim sustavima, od kojih mnogi kodiraju naša slova na drugačije načine od naših.

Ako vam je ovo prvo upoznavanje s HTML-om, predlažemo da se vratite na početak poglavlja i pročitate ga još jednom.

Vjerujemo da će vam drugi pogled na isto gradivo donijeti niz novih informacija.

Inače nastavite sa sljedećom, završnom, lekcijom ovog poglavlja koja govori o povijesti HTML-a.

Bonus: Kratka povijest HTML-a

Bonus: Kratka povijest HTML-a
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.

Put koji prolazi HTML može se ukratko opisati ovako: na početku to je bio jezik namijenjen objavljivanju znanstvenih radova, a označavale su se vrste teksta prema funkciji (naslovi, podnaslovi, odlomci, natuknice i sl.).

Popularizacijom weba pojavila se potreba za uljepšavanjem stranica i HTML je poslužio i toj svrsi.

HTML se sad vraća na svoju početnu funkciju, definiranje strukture dokumenta, dok za definiranje izgleda stranica glavnu ulogu preuzima drugi jezik, CSS. Time se omogućava razdvajanje sadržaja od izgleda stranica, tj. tako dizajneri, koji u mnogim slučajevima nisu autori sadržaja, mogu raditi svoj posao ne dirajući sadržaj stranica.

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.

Ponovimo činjenicu iz ovog poglavlja koja je važna za ovaj tečaj: upotrebljavat ćemo strogu verziju standarda HTML 4.01 da bi znanje koje ćete steći mogli što dulje upotrebljavati, a i zato da se, pišući web stranice, lakše koncentrirate na sadržaj.

Prije stvaranja sadržaja, tijekom stvaranja ili nakon stvaranja, ali u svakom slučaju neovisno o sadržaju, možete se baviti oblikovanjem svojih stranica. Jezik namijenjen tom poslu zove se CSS, nije težak, a možete ga svladati čim svladate HTML.