5.2. Osnove HTML-a


Što je HTML?

HTML (HyperText Markup Language) je osnovni jezik koji se koristi za izradu i strukturiranje web stranica. HTML omogućuje stvaranje sadržaja koji se može prikazati u web preglednicima kao što su Google Chrome, Mozilla Firefox, Safari i drugi. Pomoću HTML-a možemo definirati elemente stranice kao što su naslovi, paragrafi, slike, linkovi i drugi sadržaji koji čine osnovu svake web stranice.

Zašto je HTML važan?

HTML je temelj svakog web sadržaja. Bez obzira na to koristimo li jednostavne osobne blogove ili složene poslovne web stranice, sve one koriste HTML za prikazivanje informacija korisnicima. Razumijevanje HTML-a pruža vam osnovu za daljnje učenje drugih tehnologija i jezika za web razvoj kao što su CSS (Cascading Style Sheets) za stiliziranje i JavaScript za dodavanje interaktivnosti.

Gdje će vam HTML trebati?

HTML će vam biti potreban:

  • ako želite izraditi vlastitu web stranicu ili blog
  • ako se bavite web dizajnom ili web razvojem
  • ako želite razumjeti kako funkcioniraju web stranice
  • ako želite dodavati ili uređivati sadržaj na web stranicama
  • ako se želite baviti digitalnim marketingom, SEO optimizacijom ili upravljanjem sadržajem

Kako se koristi HTML?

HTML se sastoji od oznaka (tags) koje obuhvaćaju sadržaj i definiraju njegovu strukturu. Svaka oznaka obično ima početnu oznaku (npr. <p>) i završnu oznaku (npr. </p>). Unutar tih oznaka pišemo sadržaj koji će se prikazati na web stranici.

Primjer jednostavne HTML strukture:

<!DOCTYPE html>
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
<h1>Dobrodošli na moju web stranicu</h1>
<p>Ovo je moj prvi paragraf.</p>
</body>
</html>

Primjeri upotrebe HTML-a:

  1. izrada osobne web stranice – možete stvoriti stranicu koja prikazuje vaše biografske podatke, fotografije i poveznice na društvene mreže
  2. blogovi – HTML vam omogućuje da kreirate i upravljate blogovima, dodajući članke, slike i videozapise
  3. poslovne web stranice – pomoću HTML-a možete izraditi web stranicu za svoju tvrtku, prikazujući proizvode, usluge i kontaktne informacije
  4. online portfelji – dizajnirajte portfelj za prikazivanje svojih radova, bilo da ste umjetnik, dizajner, programer ili pisac

Zašto učiti HTML?

Učenje HTML-a pruža vam temeljne vještine koje su neophodne za rad s web tehnologijama. Ono vam omogućuje da shvatite kako web stranice funkcioniraju i kako ih možete prilagoditi svojim potrebama. HTML je također prvi korak prema učenju složenijih jezika i alata za web razvoj.


POJMOVNIK

HTML ili Hyper Text Markup Language je prezentacijski, opisni jezik namijenjen izradi mrežnih stranica.

HTML dokument je mrežna stranica, započinje oznakom <HTML> i sastoji se od dva dijela: zaglavlja i tijela stranice.

Zaglavlje mrežne stranice označavamo oznakom <HEAD>. Ono sadrži informacije o naslovu stranice te o osnovnim obilježjima stranice kao što su jezik stranice, kodna tablica znakova, ključne riječi, ime autora i sl.

Tijelo mrežne stranice označavamo oznakom <BODY>. To je zapravo sadržaj stranice prikazan u mrežnom pregledniku (tekst, slike, tablice, poveznice i sl.)

HTML oznaka je naredba mrežnom pregledniku koja određuje kako će se prikazati sadržaj mrežne stranice. Oznaku navodimo unutar znakova < i >.

Parametar ili atribut je dio oznake koji dodatno opisuje njezina svojstva.

Vizualni (grafički) uređivač mrežnih stranica je program za izradu mrežnih stranica koji u svakom trenutku prikazuje kako će mrežna stranica izgledati u mrežnom pregledniku (WYSIWYG – What You See Is What You Get). 

Tekstualni uređivač mrežnih stranica je program koji omogućuje izradu mrežnih stranica upisivanjem naredbi HTML jezika (npr. Blok za pisanje).


POPIS OSNOVNIH I STRUKTURALNIH OZNAKA

Osnovne HTML oznake

  1. <!DOCTYPE html>
    definira vrstu dokumenta i verziju HTML-a
  2. <html>…</html>
    omotava cijeli HTML dokument
  3. <head>…</head>
    sadrži meta informacije o dokumentu kao što su naslov, linkovi na stilove i skripte
  4. <title>…</title>
    definira naslov dokumenta koji se prikazuje na kartici preglednika
  5. <body>…</body>
    sadrži vidljivi sadržaj web stranice

Strukturalne oznake

  1. <h1>…</h1> do <h6>…</h6>
    definira naslove, od najvećeg (<h1>) do najmanjeg (<h6>)
  2. <p>…</p>
    definira paragraf
  3. <br>
    umeće prijelom retka
  4. <hr>
    umeće vodoravnu liniju (razdjelnik)

Formatiranje teksta

  1. <strong>…</strong>
    prikazuje podebljani tekst
  2. <b>…</b>
    također prikazuje podebljani tekst, ali nema semantičko značenje
  3. <em>…</em>
    prikazuje ukošeni tekst
  4. <i>…</i>
    također prikazuje ukošeni tekst, ali nema semantičko značenje
  5. <u>…</u>
    prikazuje podvučeni tekst

Linkovi i slike

  1. <a href=”URL”>…</a>
    definira hipervezu
  2. <img src=”URL” alt=”opis”>
    umeće sliku

Popisi

  1. <ul>…</ul>
    definira neuređeni (bulleted) popis
  2. <ol>…</ol>
    definira uređeni (numerirani) popis
  3. <li>…</li>
    definira stavku na popisu (koristi se unutar <ul> ili <ol>)

Tablice

  1. <table>…</table>
    definira tablicu
  2. <tr>…</tr>
    definira redak u tablici
  3. <th>…</th>
    definira zaglavlje ćelije u tablici
  4. <td>…</td>
    definira ćeliju u tablici

Ostale korisne oznake

  1. <div>…</div>
    definira odjeljak (block-level element)
  2. <span>…</span>
    definira inline odjeljak (inline element)
  3. <meta>
    definira metapodatke o HTML dokumentu (koristi se unutar <head>)
  4. <link>
    povezuje vanjske resurse poput CSS datoteka (koristi se unutar <head>)

Forme

  1. <form>…</form>
    definira HTML obrazac
  2. <input>
    definira različite tipove input polja
  3. <label>…</label>
    povezuje oznaku s input poljem
  4. <textarea>…</textarea>
    definira višeredno tekstualno polje
  5. <button>…</button>
    definira gumb

VJEŽBA 1 – osnovna struktura HTML dokumenta

  • Otvori Notepad ili neki drugi tekstualni editor.
  • Prepiši gornji HTML kod točno kako je prikazan.
  • Spremi datoteku pod nazivom vjezba1.html
  • Dvostruko klikni na spremljenu datoteku ili je otvori u web pregledniku (npr. Chrome, Firefox, Edge).

Datotečni nastavak html imaju datoteke koje sadrže HTML (HyperText Markup Language) kod. Ove datoteke se koriste za izradu i strukturiranje web stranica. HTML kod definira elemente stranice kao što su naslovi, paragrafi, linkovi, slike i drugi sadržaji, koji se prikazuju u web preglednicima.

Što trebaš vidjeti:
Nakon što otvoriš datoteku u web pregledniku, trebala bi se prikazati web stranica sa sljedećim sadržajem:

  • Naslov u vrhu prozora preglednika: “Moja prva stranica”
  • Prvi paragraf: “Ovo je moja prva mrežna stranica! :)”
  • Drugi paragraf nakon praznog retka: “Zovem se XY.”
  • Treći paragraf: “Učenik/učenica sam 7. razreda Katoličke osnovne škole.”

Napomena:
Provjeri da si točno prepisao kod i spremio datoteku s ispravnim nastavkom “.html”. Ako stranica ne izgleda ispravno, provjeri je li sve točno prepisano i pokušaj ponovno.

Sretno i uživaj u učenju HTML-a!


VJEŽBA 2 – osnovna struktura HTML dokumenta

Ova datoteka sadrži osnovnu strukturu HTML dokumenta sa naslovom, jednim glavnim naslovom (h1) i jednim paragrafom (p).

  • Prepiši sljedeći kod u Notepadu/Bloku za pisanje i spremi ga u obliku… vjezba2.html
  • Pokreni datoteku dvostrukim klikom na nju ili je otvori u svom web pregledniku (npr. Chrome, Firefox, Edge).

Što trebaš vidjeti
Nakon što otvoriš datoteku u web pregledniku, trebala bi se prikazati web stranica sa sljedećim sadržajem:

  • Naslov u vrhu prozora preglednika: “Naslov stranice”
  • Glavni naslov (h1) na stranici: “Dobrodošli na moju web stranicu”
  • Paragraf (p) ispod glavnog naslova: “Ovo je primjer HTML dokumenta.”

Napomena
Provjeri da si točno prepisao kod i spremio datoteku s ispravnim nastavkom “.html”. Ako stranica ne izgleda ispravno, provjeri je li sve točno prepisano i pokušaj ponovno.

Sretno i zabavi se učeći osnove HTML-a!


VJEŽBA 3a/3b/3c – jednostavni i višestruki prijelomi redaka

Prepiši sljedeće kodove u Notepadu/Bloku za pisanje i spremi ih u obliku vjezba3a.html, vjezba3b.html, vjezba3c.html


VJEŽBA 4 – podebljana i ukošena slova

Prepiši sljedeći kod u Notepadu/Bloku za pisanje i spremi ga u obliku vjezba4.html


VJEŽBA 5 – naslovi, linkovi i popisi

Prepiši sljedeći kod u Notepadu/Bloku za pisanje i spremi ga u obliku vjezba5.html


VJEŽBA 6 – umetanje slika i upotreba tablice

Prepiši sljedeći kod u Notepadu/Bloku za pisanje i spremi ga u obliku vjezba6.html