U današnjem digitalnom dobu, internet je postao nezaobilazan alat u svakodnevnom životu. Bilo da tražimo informacije, komuniciramo s drugima ili se zabavljamo, web stranice su ključne. Ali što stoji iza svake vizualno privlačne i funkcionalne web stranice? Odgovor leži u HTML-u, jeziku koji omogućuje da web uopće funkcionira i koji je razumljiv svakom računalu na svijetu. Ovaj vodič namijenjen je svima koji žele zakoračiti u svijet izrade web stranica i razumjeti osnovne principe HTML-a.
HTML, akronim za HyperText Markup Language (Jezik za označavanje hiperteksta), nije programski jezik u klasičnom smislu, već interpretacijski jezik. Njegova primarna uloga je definiranje strukture i sadržaja web stranica. Zamislite ga kao kostur koji daje oblik tijelu; bez njega, sadržaj web stranice ne bi imao jasnu organizaciju niti bi bio prepoznatljiv web preglednicima poput Chromea, Firefoxa ili Edgea.
Korištenje HTML-a izuzetno je pristupačno. Za pisanje HTML koda nije vam potreban skup i složen softver. Dovoljan je bilo koji jednostavan uređivač teksta koji dolazi s vašim operativnim sustavom, poput Notepada u Windowsu ili TextEdita na macOS-u. Ovo značajno snižava prag ulaska za početnike, omogućujući im da se fokusiraju na učenje samog jezika, a ne na svladavanje novih alata.
Ključni elementi HTML-a: Tagovi
Srce svakog HTML dokumenta čine takozvani ‘tagovi’ (eng. tags). Tagovi su specifični dijelovi teksta koji su definirani unutar znakova veće i manje od (< i >). Oni služe kao upute za web preglednik, govoreći mu kako treba interpretirati i prikazati određeni dio sadržaja. Na primjer, oznaka <p> signalizira početak odlomka teksta.
Postoje dvije osnovne vrste tagova: otvoreni i zatvoreni. Otvoreni tag označava početak elementa, dok zatvoreni tag označava njegov kraj. Zatvoreni tagovi prepoznaju se po tome što sadrže kosu crtu (/) ispred naziva taga. Tako, ako otvoreni tag izgleda kao <p>, njegov odgovarajući zatvoreni tag bit će </p>.
Najčešće, tagovi se koriste u parovima, gdje otvoreni tag započinje element, a zatvoreni tag ga završava, obavijajući sadržaj koji se nalazi između njih. Primjerice, cijeli tekst nekog odlomka bio bi smješten unutar <p> i </p> taga: <p>Ovo je sadržaj odlomka.</p>. Međutim, postoje i tzv. samozatvarajući ili prazni tagovi koji nemaju poseban sadržaj koji bi obuhvatili i koriste se samo za definiranje određenog atributa ili oznake, poput <br> za prijelom retka.
Temeljna struktura HTML dokumenta
Svaki ispravno strukturiran HTML dokument mora sadržavati određene osnovne tagove koji definiraju njegovu cjelokupnu arhitekturu. Ovi tagovi daju pregledniku neophodne informacije o dokumentu i njegovom sadržaju.
<!DOCTYPE html>: Ovaj deklarativni tag, iako nije strogo dio HTML koda u smislu oznake, ključan je jer informira preglednik o verziji HTML-a koja se koristi (u ovom slučaju, HTML5). To osigurava da se stranica renderira prema modernim standardima.<html>: Ovo je korijenski element svakog HTML dokumenta. Svi ostali HTML elementi nalaze se unutar ovog taga. On doslovno obavija cijeli sadržaj web stranice.<head>: Odjeljak zaglavlja dokumenta sadrži meta-informacije o samoj web stranici, koje nisu izravno vidljive korisniku na stranici. To uključuje naslov stranice (definiran unutar<title>taga), poveznice na stilove (CSS), skripte, i druge tehničke podatke potrebne pregledniku ili tražilicama.<title>: Ovaj tag, smješten unutar<head>odjeljka, definira naslov web stranice. Taj naslov se najčešće prikazuje u kartici preglednika ili u rezultatima pretraživanja.<body>: Odjeljak tijela dokumenta sadrži sav vidljivi sadržaj web stranice – tekst, slike, videozapise, linkove i sve ostalo što korisnik vidi i s čime interagira. Sve što je unutar<body>taga prikazuje se na ekranu.
Izrada prve jednostavne web stranice
Sada kada smo upoznali osnovne koncepte, kreirajmo našu prvu jednostavnu web stranicu. Otvorite vaš omiljeni tekstualni editor (npr. Notepad) i kopirajte sljedeći kod:
<!DOCTYPE html> <html> <head> <title>Moja prva web stranica</title> </head> <body> <h1>Dobrodošli na moju stranicu!</h1> <p>Ovo je moj prvi korak u izradi web stranica. Učim HTML!</p> <p>HTML je fascinantan i koristan.</p> </body> </html>
Nakon što ste pažljivo prepisali kod, dokument morate spremiti s ekstenzijom .html. Na primjer, možete ga nazvati moja_prva_stranica.html. Važno je odabrati ‘Spremi kao vrstu’ (Save as type) kao ‘Sve datoteke’ (All files) kako bi se izbjeglo dodavanje dodatne ekstenzije poput .txt. Kada spremite datoteku, dvoklikom na nju u vašem file exploreru, otvorit će se u vašem zadanim web pregledniku. Vidjet ćete jednostavnu stranicu s naslovom “Dobrodošli na moju stranicu!” i dva odlomka teksta ispod. Naslov “Moja prva web stranica” pojavit će se u kartici preglednika.
Daljnji koraci i napredak
Ovaj jednostavan primjer samo je početak. HTML nudi bogatstvo mogućnosti za oblikovanje i strukturiranje sadržaja. Postoje tagovi za definiranje različitih razina naslova (od <h1> do <h6>), stvaranje lista (uređenih i neuređenih), umetanje slika (<img>), kreiranje linkova (<a>), tablica, formi i još mnogo toga. Svaki od ovih tagova ima svoju specifičnu svrhu i način korištenja.
Važno je napomenuti da je HTML često korišten u kombinaciji s drugim tehnologijama. CSS (Cascading Style Sheets) koristi se za stiliziranje HTML elemenata, dajući im boje, fontove, rasporede i opći vizualni izgled. JavaScript pak dodaje interaktivnost i dinamičnost web stranicama, omogućujući animacije, provjere korisničkog unosa i složenije funkcionalnosti. Zajedno, ove tri tehnologije (HTML, CSS i JavaScript) čine temelj moderne web izrade.
Zaključak
Uvod u HTML otkriva temeljni jezik koji pokreće cijeli web. Razumijevanje njegovih osnovnih principa, poput strukture dokumenta i upotrebe tagova, prvi je i najvažniji korak za svakoga tko želi naučiti kako kreirati vlastite web stranice. I