U današnjem digitalnom dobu, razumijevanje načina na koji web stranice funkcioniraju postaje jedna od najkorisnijih vještina, bez obzira na to želite li se profesionalno baviti programiranjem ili samo želite urediti vlastiti blog. Svaka web stranica koju posjetite, od jednostavnih portala do složenih društvenih mreža, u svojoj srži koristi istu osnovnu tehnologiju: HTML. Kratica HTML označava HyperText Markup Language (hrv. hipertekstualni označni jezik), a riječ je o temelju na kojem počiva cijeli internet.
Ovaj vodič osmišljen je kako bi vas proveo kroz osnovne pojmove, strukturu i praktične korake potrebne za izradu vaše prve funkcionalne web stranice. Naučit ćete kako računala tumače ovaj jezik, kako pravilno strukturirati dokument te koje alate koristiti kako biste odmah vidjeli rezultate svog rada.
Što je zapravo HTML i kako funkcionira?
Suprotno čestom mišljenju, HTML nije programski jezik u klasičnom smislu jer ne sadrži logičke funkcije, petlje ili varijable. Umjesto toga, to je označni (engl. markup) jezik. To znači da se koristi posebnim oznakama, odnosno tagovima, kako bi web pregledniku (poput Google Chromea, Mozilla Firefoxa ili Safarija) objasnio kako treba prikazati određeni sadržaj.
Web preglednik zapravo djeluje kao prevoditelj. On čita HTML kod od vrha prema dolje, interpretira tagove i na ekranu prikazuje oblikovani tekst, slike, videozapise ili obrasce. Za pisanje HTML koda ne trebaju vam skupi programi ni napredna računala. Dovoljan je najjednostavniji tekstualni uređivač, poput programa Notepad koji dolazi s operativnim sustavom Windows ili TextEdit na macOS-u, iako profesionalci najčešće koriste specijalizirane alate poput Visual Studio Codea.
Anatomija jednog HTML taga
HTML se sastoji od elemenata koji su definirani tagovima. Tagovi se pišu unutar znakova “manje od” (<) i “veće od” (>). U pravilu, tagovi dolaze u parovima:
- Početni (otvoreni) tag: Označava početak elementa (npr.
<p>za odlomak). - Završni (zatvoreni) tag: Označava kraj elementa i prepoznaje se po kosoj crti ispred naziva taga (npr.
</p>).
Sadržaj koji se nalazi između ova dva taga bit će oblikovan prema pravilima tog elementa. Primjerice, kod <strong>Važan tekst</strong> prikazat će tekst u podebljanom (bold) formatu.
Osnovna struktura svakog HTML dokumenta
Kako bi web preglednik ispravno prepoznao i prikazao vašu stranicu, svaki HTML dokument mora pratiti strogo definiranu strukturu. Čak i najjednostavnija stranica na internetu sadrži nekoliko ključnih elemenata koji čine njezin kostur. U nastavku je prikazan primjer te osnovne strukture:
<!DOCTYPE html>
<html lang="hr">
<head> <meta charset="UTF-8"> <title>Naslov moje prve stranice</title>
</head>
<body> <h1>Dobrodošli na moju web stranicu!</h1> <p>Ovo je moj prvi korak u svijet web razvoja.</p>
</body>
</html>Pogledajmo što točno radi svaki od ovih obveznih dijelova koda:
- <!DOCTYPE html> – Ova deklaracija na samom početku govori pregledniku da se radi o modernom HTML5 dokumentu.
- <html> – Ovo je početni tag koji obavija sav ostali sadržaj na stranici. Atribut
lang="hr"definira da je jezik stranice hrvatski. - <head> – Ovaj dio sadrži metapodatke o stranici koji se ne prikazuju izravno posjetiteljima, ali su ključni za tražilice i ispravan prikaz (poput kodiranja znakova i naslova kartice).
- <title> – Određuje naslov koji se prikazuje na kartici (tabu) web preglednika.
- <body> – Ovo je tijelo stranice. Sve što se nalazi unutar ovog taga (tekstovi, slike, tablice) bit će vidljivo posjetiteljima na ekranu.
Vodič korak-po-korak: Kako kreirati svoju prvu stranicu
Sada kada teoretski razumijete kako HTML funkcionira, vrijeme je da to primijenite u praksi. Slijedite ove jednostavne korake kako biste stvorili svoju prvu funkcionalnu web stranicu na računalu:
- Otvorite tekstualni uređivač: Na Windows računalu otvorite Notepad (Bilježnica), a na Macu otvorite TextEdit (pripazite da ga postavite na “Plain Text” način rada).
- Kopirajte osnovni kod: Upišite ili kopirajte gore navedeni primjer osnovne strukture HTML dokumenta u svoj uređivač.
- Spremite datoteku: Kliknite na Datoteka > Spremi kao (File > Save As).
- Pravilno imenovanje: Nazovite datoteku
indeks.htmlilimoja_stranica.html. Izuzetno je važno da ručno promijenite ekstenziju iz.txtu.html. - Otvorite datoteku u pregledniku: Pronađite spremljenu datoteku na svom računalu, kliknite desnom tipkom miša i odaberite otvaranje pomoću vašeg omiljenog web preglednika (npr. Chrome ili Firefox). Čestitamo, upravo ste pokrenuli svoju prvu lokalnu web stranicu!
Najčešće korišteni HTML tagovi
Kako biste mogli obogatiti sadržaj svoje stranice, važno je upoznati najčešće elemente koje ćete svakodnevno koristiti prilikom pisanja koda. Tablica u nastavku prikazuje osnovne tagove, njihovu svrhu i primjer primjene.
| Tag | Opis elementa | Primjer primjene |
|---|---|---|
<h1> do <h6> | Naslovi različitih razina važnosti (h1 je najveći, h6 najmanji). | <h2>Podnaslov teme</h2> |
<p> | Označava odlomak običnog teksta. | <p>Ovo je rečenica u odlomku.</p> |
<a> | Kreira poveznicu (link) na drugu stranicu uz pomoć atributa href. | <a href="https://google.com">Posjeti Google</a> |
<img> | Prikazuje sliku (nema zatvoreni tag, koristi atribut src za izvor). | <img src="slika.jpg" alt="Opis slike"> |
<ul> i <li> | Kreira nenabrojani popis s grafičkim točkama. | <ul><li>Stavka</li></ul> |
Česte pogreške početnika i kako ih izbjeći
Pisanje HTML koda zahtijeva preciznost. Iako su moderni preglednici vrlo tolerantni i pokušat će prikazati stranicu čak i ako napravite grešku, nepravilan kod može uzrokovati probleme s dizajnom ili funkcionalnošću. Evo na što trebate obratiti pažnju:
- Zaboravljanje zatvaranja tagova: Svaki otvoreni tag koji zahtijeva zatvaranje (poput
<p>ili<div>) mora imati svoj odgovarajući</p>ili</div>. - Nepravilno ugniježđivanje: Tagove uvijek zatvarajte obrnutim redoslijedom od onog kojim ste ih otvorili. Ispravno je:
<p><strong>Tekst</strong></p>, dok je neispravno:<p><strong>Tekst</p></strong>. - Korištenje pogrešnih navodnika: Prilikom definiranja atributa (npr. kod poveznica ili slika), uvijek koristite standardne ravne navodnike (
"..."), a izbjegavajte dekorativne ili kose navodnike koje automatski generiraju neki tekstualni procesori poput Worda.
Zaključak i sljedeći koraci
HTML je prvi i najvažniji korak na vašem putu učenja web razvoja. Kada savladate strukturu i osnovne tagove, primijetit ćete da vaša stranica izgleda vrlo jednostavno i crno-bijelo. To je sasvim normalno jer HTML služi isključivo za definiranje strukture i sadržaja.
Kako biste svojoj stranici podarili privlačan izgled, boje, moderne fontove i prilagodljiv raspored za mobilne uređaje, sljedeći korak je učenje CSS-a (Cascading Style Sheets). Spoj HTML-a za strukturu i CSS-a za dizajn omogućit će vam izradu modernih i profesionalnih web stranica.
Često postavljana pitanja (FAQ)
Moram li znati programirati da bih naučio HTML?
Ne. HTML je označni jezik, a ne programski jezik. Vrlo je jednostavan za učenje i ne zahtijeva predznanje iz matematike ili logike programiranja. Svatko može naučiti osnove HTML-a u svega nekoliko dana.
Koji je najbolji program za pisanje HTML koda?
Za same početke dovoljan je običan Notepad. Međutim, čim odlučite raditi na malo većim projektima, toplo preporučujemo besplatne i profesionalne alate poput Visual Studio Code, Sublime Text ili Atom. Oni nude automatsko bojanje koda i predlaganje tagova, što znatno olakšava rad.
Koja je razlika između HTML-a i HTML5?
HTML5 je najnovija velika verzija HTML standarda. Ona donosi brojna poboljšanja, uključujući izravnu podršku za video i audio sadržaje bez potrebe za vanjskim dodacima, kao i nove elemente koji olakšavaju strukturiranje modernih web stranica.