Osnove HTML-a: Prvi koraci u izradi web stranica

Internet kakav danas poznajemo ne bi postojao bez jednog ključnog elementa koji stoji u temelju gotovo svake web stranice. Riječ je o HTML-u, skraćenici za HyperText Markup Language. Iako ga početnici često pogrešno nazivaju programskim jezikom, HTML je zapravo jezik za označavanje (markup language). Njegova primarna uloga nije izvršavanje složenih logičkih operacija, već definiranje strukture i sadržaja dokumenta koji web preglednik može interpretirati i prikazati korisniku.

Bilo da želite postati profesionalni web developer, započeti vlastiti blog ili jednostavno razumjeti kako funkcionira digitalni svijet, poznavanje HTML-a je neophodno. Sreća je što je ovaj jezik dizajniran tako da bude intuitivan i pristupačan, što znači da svatko s osnovnim računalo znanjem može kreirati svoju prvu web stranicu u samo nekoliko minuta. U ovom vodiču detaljno ćemo proći kroz koncepte koji čine osnovu HTML-a, od definicije tagova do stvaranja prvog funkcionalnog dokumenta.

Sadržaj...

Što je zapravo HTML i kako on radi?

HTML funkcionira kao svojevrsni “kostur” web stranice. Zamislite da gradite kuću: HTML bi bili temelji i zidovi koji određuju gdje se nalazi dnevni boravak, gdje je kuhinja i gdje su vrata. Kasnije, pomoću jezika kao što je CSS, toj kući dodajete boju zidova i namještaj, a pomoću JavaScripta dodajete funkcionalnosti poput automatskih vrata ili pametnog osvjetljenja. Bez HTML-a, preglednik ne bi znao što je naslov, što je odlomak teksta, a što je slika.

HTML je interpretacijski jezik. To znači da ne zahtijeva kompilaciju u strojni kod kako bi radio. Umjesto toga, web preglednik (poput Google Chromea, Mozilla Firefoxa ili Microsoft Edgea) čita HTML kod ispočetka do kraja i “prevodi” ga u vizualni prikaz koji mi vidimo na ekranu. Zanimljivo je da HTML razumije svako računalo u svijetu, bez obzira na operativni sustav koji koristi, što ga čini univerzalnim standardom komunikacije na internetu.

Konzepcija tagova: Gradni blokovi HTML-a

Osnovna jedinica svakog HTML dokumenta je tag. Tagovi su posebne naredbe koje govore pregledniku kako da tretira određeni dio sadržaja. Prepoznajemo ih po tome što su uvijek zatvoreni unutar uglatih zagrada: <tag>.

Većina HTML tagova dolazi u parovima, što znači da imaju početni i završni dio. Ova struktura omogućuje pregledniku da točno zna gdje određeni element počinje i gdje završava:

Početni tag: Definira početak elementa (npr.  za početak odlomka).
Završni tag: Definira kraj elementa i prepoznaje se po kosoj crti prije naziva taga (npr.  za kraj odlomka).
Sadržaj: Sve što se nalazi između početnog i završnog taga je ono što će biti prikazano na stranici.

Postoje i takozvane “samozatvorene” oznake koje ne zahtijevaju završni tag jer ne sadrže tekstualni sadržaj, već samo umetnu neki element, kao što je npr. slika ili prijelom reda.

Struktura standardnog HTML dokumenta

Svaka ispravno napisana web stranica mora slijediti određenu hijerarhiju kako bi bila prepoznata kao validan HTML dokument. Bez ove osnovne strukture, preglednik bi mogao pogrešno interpretirati sadržaj, što bi dovelo do problema s prikazom na različitim uređajima.

Osnovni elementi koji moraju biti prisutni su:

<html> – Glavni kontejner koji obuhvaća cijeli sadržaj stranice. Sve ostale tagovi nalaze se unutar njega.
<head> – Zaglavlje dokumenta. Ovdje se nalaze informacije koje nisu vidljive posjetitelju stranice, ali su ključne za preglednik i pretraživače (meta podaci, poveznice na CSS datoteke itd.).
<title> – Nalazi se unutar zaglavlja i definira naslov stranice koji se prikazuje u kartici preglednika.
<body> – Tijelo stranice. Ovdje se nalazi sav vidljivi sadržaj: tekstovi, slike, tablice i poveznice.

Praktični vodič: Kreiranje vaše prve web stranice

Jedna od najvećih prednosti HTML-a je to što za početak ne trebate kupovati skupo softversko rješenje. Dovoljan vam je bilo koji jednostavan uređivač teksta koji već imate na računalu. Za korisnike Windowsa to je Notepad, za korisnike macOS-a TextEdit, dok napredniji korisnici često koriste besplatne alate poput Visual Studio Codea ili Sublime Texta.

Pratite ove korake kako biste napravili svoju prvu stranicu:

Korak 1: Pisanje koda
Otvorite svoj uređivač teksta i prepišite sljedeći jednostavni kod:

<html>
<head> <title>Moja prva web stranica</title>
</head>
<body> <h1>Dobrodošli na moju stranicu!</h1> <p>Ovo je moj prvi pokušaj izrade web stranice koristeći HTML. Učim kako strukturirati sadržaj na internetu.</p>
</body>
</html>

Korak 2: Spremanje datoteke
Ovo je najvažniji korak. Kada spremate dokument, ne smijete ga spremiti kao obični tekst (.txt). Morate promijeniti ekstenziju datoteke u .html. Na primjer, nazovite datoteku index.html ili moja_stranica.html.

Korak 3: Otvaranje u pregledniku
Pronađite spremljenu datoteku u svom folderu i dvaput kliknite na nju. Vaš zadani web preglednik će se otvoriti i prikazati vaš tekst točno onako kako ste ga definirali u kodu.

Česte pogreške početnika i savjeti za uspjeh

Kada tek počinjete s HTML-om, prirodno je napraviti nekoliko grešaka. Većina problema s prikazom stranice proizlazi iz malih nepažnji u pisanju koda. Evo na što trebate pripaziti:

Zaboravljanje zatvaranja tagova: Ako otvorite tag , a zaboravite staviti , preglednik može pomiješati ostatak stranice s tim odlomkom, što će poremetiti dizajn.
Pogrešna ekstenzija datoteke: Ako datoteka ostane kao .txt, preglednik će prikazati sam kod umjesto renderirane stranice.
Korištenje specijalnih znakova: Budite oprezni s znakovima veći i manje () unutar samog teksta, jer ih preglednik interpretira kao početak taga. Za njih koristite posebne entitete (npr. <).