HTML za Početnike: Osnove Izrade Web Stranica

Web stranice su neizostavan dio našeg digitalnog života, a u njihovoj srži leži jezik poznat kao HTML. Ako ste ikada razmišljali o stvaranju vlastite web stranice, razumijevanje HTML-a (HyperText Markup Language) je prvi i najvažniji korak. Ovaj vodič pružit će vam temeljno znanje potrebno za ulazak u svijet web razvoja, objašnjavajući što je HTML, kako funkcionira i kako ga možete koristiti za stvaranje svojih prvih digitalnih kreacija. Bez obzira jeste li potpuni početnik ili želite osvježiti svoje znanje, ovdje ćete pronaći sve što vam je potrebno za početak.

Što je HTML i zašto je važan?

HTML, ili HyperText Markup Language, nije programski jezik u klasičnom smislu, već jezik za označavanje. Njegova primarna svrha je strukturiranje sadržaja na web stranici. Zamislite ga kao kostur web stranice – on definira naslove, odlomke, slike, linkove i druge elemente, dajući im smisao i hijerarhiju. Bez HTML-a, web preglednici ne bi znali kako prikazati tekstualne i multimedijalne datoteke, što bi rezultiralo kaotičnim i nečitljivim informacijama.

Svaka web stranica koju posjetite, od najjednostavnijeg bloga do složenih internetskih trgovina, izgrađena je na HTML temeljima. Njegova univerzalnost leži u činjenici da ga razumije svaki web preglednik na svijetu, osiguravajući dosljedan prikaz sadržaja bez obzira na uređaj ili operativni sustav. Poznavanje HTML-a je stoga neophodno za svakoga tko želi razumjeti ili sudjelovati u izradi sadržaja za internet.

Osnovni elementi HTML-a: Tagovi

Srž HTML-a čine takozvani “tagovi” (oznake). Tagovi su posebne naredbe koje web pregledniku govore kako treba interpretirati i prikazati određeni dio sadržaja. Svaki tag je definiran unutar znakova manje od (<) i veće od (>).

Vrste tagova:

Otvoreni i zatvoreni tagovi (parovi): Većina HTML tagova dolazi u parovima. Imamo početni (otvoreni) tag i završni (zatvoreni) tag. Zatvoreni tag se prepoznaje po kosoj crti (/) prije naziva taga. Na primjer, za odlomak teksta koristimo  kao otvoreni tag i  kao zatvoreni tag. Sadržaj koji želimo formatirati smješta se između ta dva taga: Ovo je odlomak teksta..
Samozatvarajući tagovi (prazni tagovi): Postoje i tagovi koji ne zahtijevaju zatvaranje jer ne sadrže nikakav sadržaj između sebe. Primjerice, tag za sliku je <img>, a za prijelom retka  . U modernom HTML5 standardu kosa crta na kraju (npr. <img />) nije obavezna.

Razumijevanje tagova i njihove ispravne upotrebe ključno je za stvaranje valjanog i funkcionalnog HTML dokumenta. Svaki tag ima svoju specifičnu svrhu i utječe na način na koji će preglednik prikazati sadržaj.

Struktura HTML dokumenta

Svaki HTML dokument slijedi određenu osnovnu strukturu koja osigurava da ga web preglednici mogu ispravno prepoznati i prikazati. Poznavanje ovih temeljnih elemenata je ključno za početak.

<!DOCTYPE html>: Ovo nije HTML tag, već deklaracija koja pregledniku govori koju verziju HTML-a koristimo. <!DOCTYPE html> označava HTML5, najnoviju i najčešće korištenu verziju. Uvijek bi trebala biti prva linija koda u vašem HTML dokumentu.
<html></html>: Ovo je korijenski element cijelog HTML dokumenta. Svi ostali elementi nalaze se unutar ovog taga. Često mu se dodaje atribut lang (npr. lang="hr") za označavanje jezika sadržaja.
<head></head>: Sekcija glave sadrži metapodatke o web stranici, kao što su naslov stranice koji se prikazuje u kartici preglednika, linkovi na CSS datoteke, skripte i druge informacije koje nisu direktno vidljive na samoj stranici.
<title></title>: Unutar <head> taga, <title> definira naslov dokumenta koji se prikazuje u naslovnoj traci preglednika ili kartici. Vrlo je važan za SEO (optimizaciju za tražilice) i korisničko iskustvo.
<body></body>: Sekcija tijela sadrži sav vidljivi sadržaj web stranice – tekst, slike, linkove, tablice, videozapise i sve ostalo što korisnik vidi i s čime interagira.

Evo kako izgleda osnovni kostur HTML dokumenta:

<!DOCTYPE html>
<html lang="hr">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Naslov Moje Stranice</title>
</head>
<body> <h1>Dobrodošli na moju web stranicu!</h1> <p>Ovo je prvi odlomak teksta.</p>
</body>
</html>

Kreiranje prve web stranice: Praktični koraci

Sada kada razumijete osnovnu strukturu, vrijeme je da kreirate svoju prvu web stranicu. Proces je iznenađujuće jednostavan i ne zahtijeva nikakav poseban softver.

Potrebno vam je:

Tekstualni uređivač (npr. Notepad na Windowsima, TextEdit na macOS-u, ili napredniji poput Visual Studio Code, Sublime Text, Notepad++).
Web preglednik (npr. Chrome, Firefox, Edge).

Koraci:

Otvorite tekstualni uređivač: Pokrenite svoj preferirani tekstualni uređivač.

Unesite HTML kod: Prepišite ili kopirajte sljedeći osnovni HTML kod u otvoreni dokument:

<!DOCTYPE html>
<html lang="hr">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Moja Prva Web Stranica</title>
</head>
<body> <h1>Pozdrav, svijete!</h1> <p>Ovo je moja prva web stranica koju sam kreirao koristeći HTML.</p> <p>Uživajte u istraživanju!</p>
</body>
</html>

Spremite datoteku: Kliknite na “Datoteka” (File) -> “Spremi kao” (Save As). Odaberite lokaciju na svom računalu i dajte datoteci ime, na primjer moja_prva_stranica.html. Ključno je da datoteka ima ekstenziju .html (ili .htm). Pobrinite se da je kodiranje postavljeno na UTF-8 kako bi se hrvatska slova (č, ć, ž, š, đ) ispravno prikazivala.
Otvorite datoteku u pregledniku: Pronađite spremljenu datoteku na svom računalu i dvostruko kliknite na nju. Automatski bi se trebala otvoriti u vašem zadanom web pregledniku. Trebali biste vidjeti naslov “Pozdrav, svijete!” i tekst ispod njega. Čestitamo, upravo ste stvorili svoju prvu web stranicu!

Često postavljana pitanja (FAQ)

Je li HTML programski jezik?

Ne, HTML nije programski jezik. To je jezik za označavanje (markup language) koji se koristi za strukturiranje sadržaja. Programski jezici, poput JavaScripta, omogućuju izvođenje logike i interakcije, dok HTML definira samo strukturu i smisao elemenata.

Koji mi je program potreban za pisanje HTML koda?

Za početak, dovoljan je bilo koji običan tekstualni uređivač poput Notepada (Windows) ili TextEdita (macOS). Međutim, za ozbiljniji razvoj preporučuju se napredniji uređivači koda poput Visual Studio Code, Sublime Text ili Notepad++, koji nude značajke poput isticanja sintakse, automatskog dovršavanja i drugih alata koji olakšavaju pisanje koda.

Koja je razlika između HTML-a, CSS-a i JavaScripta?

HTML (HyperText Markup Language) definira strukturu i sadržaj web stranice (kostur).
CSS (Cascading Style Sheets) definira izgled i stil web stranice (koža i odjeća) – boje, fontove, raspored elemenata.
JavaScript dodaje interaktivnost i dinamiku web stranici (mišići i živčani sustav) – animacije, obradu korisničkih unosa, dinamičko učitavanje sadržaja.

Sva tri jezika zajedno čine temelj modernog web razvoja.

Zaključak

Razumijevanje HTML-a je temelj na kojem se gradi svaka uspješna web prisutnost. Kroz ovaj vodič, naučili ste što je HTML, zašto je nezaobilazan za web, kako su strukturirani njegovi osnovni elementi – tagovi, te kako izgleda osnovna arhitektura svakog HTML dokumenta. Također ste napravili i svoju prvu web stranicu, što je veliki korak u vašem putovanju web developerom. Ovo je samo početak; svijet web razvoja je ogroman i pun mogućnosti. Nastavite istraživati, učiti CSS za stiliziranje i JavaScript za interaktivnost, i uskoro ćete moći stvarati složene i vizualno privlačne web stranice. Sretno u daljnjem učenju i kodiranju!