Internet kakav danas poznajemo ne bi postojao bez jednog ključnog elementa koji stoji u temelju gotovo svake stranice: HTML-a. Bez obzira na to koliko je neka web-stranica vizualno kompleksna, koristi li napredne animacije ili sofisticirane baze podataka, njezina osnovna struktura uvijek se oslanja na ovaj jezik. Za svakoga tko želi zakoračiti u svijet web-dizajna i programiranja, razumijevanje HTML-a nije samo preporuka, već apsolutna nužnost.
HTML, što je kratica za HyperText Markup Language (jezik za označavanje hiperteksta), nije programski jezik u klasičnom smislu (poput Pythona ili Jave), već je to jezik za označavanje. To znači da on ne izvršava složene logičke operacije, već služi kao set instrukcija koje govore web-pregledniku (browseru) kako treba organizirati i prikazati sadržaj. Bilo da koristite Google Chrome, Mozilla Firefox, Safari ili Microsoft Edge, svi oni razumiju HTML i pretvaraju njegov kod u vizualni oblik koji mi vidimo na ekranu.
Kako HTML funkcionira: Tagovi i njihova uloga
Srce HTML-a čine takozvani tagovi. Tagovi su posebne naredbe koje se pišu unutar zagrada (manje i veće zagrade: < i >). Oni služe kao oznake koje definiraju koji je dio teksta naslov, koji je odlomak, gdje se nalazi slika ili gdje započinje poveznica. Preglednik ne prikazuje same tagove korisniku, već ih koristi kao putokaze za oblikovanje stranice.
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:
- Otvoreni tag: Označava početak elementa i piše se kao
<tag>. - Zatvoreni tag: Označava kraj elementa i prepoznaje se po kosoj crti prije naziva taga, npr.
</tag>.
Primjerice, ako želimo napisati jedan odlomak teksta, koristimo tag <p> (od engleskog paragraph). Tekst koji se nalazi između početnog i završnog taga bit će interpretiran kao standardni tekstualni blok. Važno je napomenuti da postoje i tzv. “samozatvoreni” tagovi koji ne zahtijevaju završni par, kao što su tagovi za umetanje slika (<img>) ili prelome redova (<br>), ali za početnike je najvažnije savladati osnovnu strukturu parnih tagova.
Osnovna struktura svakog HTML dokumenta
Svaka ispravno napisana internetska stranica mora slijediti određenu hijerarhijsku strukturu. Bez ovih osnovnih elemenata, preglednik možda može pokušati prikazati stranicu, ali ona neće biti standardizirana i može se pogrešno prikazivati na različitim uređajima ili preglednicima. Osnovni kostur HTML dokumenta sastoji se od sljedećih ključnih dijelova:
Prvo dolazi tag <html>, koji obuhvaća apsolutno sav sadržaj stranice. Unutar njega nalazimo dva glavna dijela: <head> i <body>.
Sekcija <head> (zaglavlje) sadrži metapodatke o stranici. To su informacije koje korisnik ne vidi izravno na stranici, ali su ključne za preglednik i tražilice. Najvažniji element unutar zaglavlja je tag <title>, koji definira naslov stranice koji se pojavljuje u kartici (tabu) vašeg preglednika.
Sekcija <body> (tijelo) je mjesto gdje se nalazi sav vidljivi sadržaj. Sve što ovdje napišete – od teksta i slika do tablica i videozapisa – bit će prikazano posjetitelju web-stranice.
Praktični vodič: Izrada vaše prve web-stranice
Jedna od najvećih prednosti HTML-a je to što za početak ne trebate nikakav skupi softver. Dovoljan je obični uređivač teksta koji već imate na računalu, poput Notepada (Windows) ili TextEdit-a (macOS). Iako postoje napredniji alati poput Visual Studio Code-a, Notepad je sasvim dovoljan za učenje osnova.
Kako biste kreirali svoju prvu stranicu, pratite ove korake:
- Otvorite Notepad ili neki drugi tekstualni editor.
- Prepišite sljedeći osnovni kod:
<html><head><title>Moja prva web-stranica</title></head><body><p>Dobrodošli na moju prvu web-stranicu! Ovo je moj prvi korak u svijet programiranja.</p></body></html> - Spremite datoteku. Ovdje je ključan detalj: datoteka ne smije imati ekstenziju .txt, već .html (npr.
index.htmlilimoja_stranica.html). - Pronađite spremljenu datoteku u svom folderu i dvaput kliknite na nju. Vaš će je zadani preglednik otvoriti i prikazati vaš tekst.
Česte pogreške početnika i savjeti za napredak
Kada tek počnete pisati HTML, prirodno je napraviti nekoliko grešaka koje mogu uzrokovati da stranica ne izgleda onako kako ste zamislili. Najčešća pogreška je zaboravljanje zatvaranja taga. Ako otvorite tag <p>, a zaboravite staviti