Što je HTML?

Kao što smo spomenuli u prijašnjem poglavlju, HTML je programski (markup) jezik koji se koristi za definiranje strukture web stranice koju će onda renderirati web preglednik (npr., Firefox, Chrome, itd.). HTML je u osnovi jednostavan, ali može biti složen koliko je god potrebno za potrebe projekta. Glavna jedinica HTML-a je element. Elementi pretstavljaju svaku strukturu unutar HTML-a. Njih koristimo da označimo različite dijelove stranice, kao što su naslovi, odlomci, slike, itd. i odredimo kako da se ponašaju i što rade.

Elementi se pišu u obliku tagova. Tagovi se sastoje od naziva elementa, koji se piše između < i > znakova. Pogledajte primjer ispod:

Moja mačka je vrlo mrzovoljna

Ako bi žejeli da taj komad teksta bude neovisan, mogli bi ga staviti unutar <p> taga i na taj način od njega napraviti element:

<h1>Moja mačka je vrlo mrzovoljna</h1>

Sada kada smo to učinili, web preglednik će taj komad teksta prikazati kao odlomak s nekim preddefiniram stilom (npr., veličina fonta, boja, itd.) i omogućiti nama da ga mjenjamo. O tome ćemo detaljnije uskoro.

Anatomija HTML elementa

Kao što smo već spomenuli, HTML tagovi se sastoje od naziva elementa, koji se piše između < i > znakova.

HTML element se sastoji od sljedećeg:

• Otvarajući tag - početak elementa. Od otvarajućeg taga element kreće vrijediti. Sastoji se od naziva elementa između < i > znakova. U ovom slučaju se radi o odlomku (tj. paragrafu) pa je naziv taga p koji je zatvoren s < i > znakovima, tako da je otvarajući tag <p>.
• Tijelo elementa - tijelo elementa nalazi se između otvarajućeg i zatvarajućeg taga. U ovom slučaju je to tekst " Moja mačka je vrlo mrzovoljna". Tijelo elementa može biti prazno, ako element ne sadrži nikakav tekst ili druge elemente.
• Zatvarajući tag - kraj elementa. Od zatvarajućeg taga element prestaje vrijediti. Sastoji se od naziva elementa između </ i > znakova. U ovom slučaju je to </p>.

Dakle, element je otvarajući tag i zatvarajući tag te sadržaj između njih.

Napravite svoj prvi HTML element

Kao što smo spomenuli u uvodnom poglavlju, primjere HTML koda možete mjenjati i vidjeti promjene u stvarnom vremenu u udžbeniku. Sada ćete napraviti vaš prvi element. U primjeru ispod je napisan komad teksta. Vaš zadatak je da od njega napraviti * boldani* tekst tako da tekst napisan dolje zatvorite <strong> tagovima. Na kraju svakako pritisnite tipku ispod, Prikaži rješenje, kako bi vidjeli postupak i detalje.

<strong>
    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit
</strong>

<p>Astrofizika je najstarija grana fizike.</p>

<p>
  Astrofizika je najstarija grana fizike.
</p>

Elementi unutar drugih elemenata

Element može staviti unutar tijela drugog elementa. Ovo je vrlo moćna funkcijonalnost kao što ćete uskoro vidjeti. Prije nekoliko trenutaka ste vidjeli da koristeći <strong> tag možete napraviti da tekst bude boldan. Ako ste koristili Word ili sličan alat, vjerojatno znate da tekst možete biti i italic, odnosno zakrivljen. To činimo pomoću <em> taga.

<p>
    <em>Astrofizika je najstarija grana fizike.</em>
    Njezini začeci će se možda pronaći u drevnim kulturama koje su se bavile promatranjem neba.
</p>

Ovo nam omogućuje da, primjerice, učinimo da je element kojeg smo već označili kao odlomak također djelomično i italic. Druge mogućnosti ćete uskoro vidjeti.

Elementi bez tijela

Nemaju svi elementi otvarajući tag, tijelo i zatvarajući tag. Postoje elementi koji nikada nemaju tijelo pa zato imaju samo otvarajući tag. Ti elementi nemaju tijelo jer generalno nemaju sadržaj već se koriste za ubacivanje sadržaja na stranicu ili definiranja informacija o stranici. Najjednostavniji primjer je <br> tag koji ubacuje novi redak u tekst. U HTML-u, ako jednostavno dodate novi redak u sam kod, to neće promjeniti sadržaj na stranici, kao što možete vidjeti u gornjem primjeru.

Ako želite dodati novi redak, morate koristiti <br> tag.

Taj tag nema tijelo jer nije potrebno, sve što on radi je ubacuje novi redak.

Atributi

Elementi mogu imati atribute. Atributi su dodatne informacije o elementu koje se nalaze unutar otvarajućeg taga. Informacije koje se nalaze unutar atributa se ne odražavaju direktno na stranici, najčešće su potpuno nevidljive korisniku.

Atribut se sastoji od:

• Naziva atributa i razmaka - uvijek dolazi razmak nakon naziva otvarajućeg taga pa zatim naziv atributa.
• Jednakosti - nakon naziva atributa dolazi jednakost, bez razmaka.
• Vrijednost atributa - vrijednost atributa dolazi nakon znaka jednakosti i uvijek je zatvorena s dvostrukim navodnicima.

U gornjem primjeru se nalazi atribut class na odlomku. Taj se atribut koristi kako bi olakšao upravljanje izgledom više elemenata iste vrste (klase) pomoću CSS-a. O njemu ćemo naučiti kasnije

Napravite vaš atribut

Ako bi web stranice sadržavale samo tekst, bile bi dosadne. Danas u pravilu svaka web stranica sadržava slike. Pitanje je kako ćemo ih ubaciti u našu stranicu?

Za to koristimo <img> tag. <img> tag je element bez tijela, tako da nema zatvarajući tag. Ako tag nema tijela, onda kako ćemo odrediti njegovo ponašanje, u ovom slučaju koju sliku će prikazati? Atributi!

<img> tag ima jedan obavezan atribut: src i jedan atribut koji nije obavezan, ali se toplo preporučuje: alt. src atribut određuje putanju do slike, a alt atribut određuje tekst koji će se prikazati ako slika nije učitana. Slika će se prikazati na stranici na mjestu gdje se nalazi <img> tag. Iako je alt atribut neobavezan, preporučuje se da se koristi jer pomaže s pretraživanjem web stranice na tražilicima i pristupačnošću stranice.

Pokušajte sada dodati sliku (logo V. gimnazije) na ovu web stranicu tako da se nalazi ispod teksta. Putanja do slike je https://www.petagimnazija.hr/wp-content/uploads/2016/05/5_gimnazija_Logo_small-1.png. Putanja slike može biti poveznica ili putanja do slike na vašem računalu.

<h1>
  V. gimnazija
</h1>
        
<p>
  V. gimnazija ubraja se među najbolje škole u Republici Hrvatskoj. Smještena je u najužem centru grada Zagreba, u Klaićevoj ulici broj 1.
</p>

<img src="https://www.petagimnazija.hr/wp-content/uploads/2016/05/5_gimnazija_Logo_small-1.png" alt="Logo V. gimnazije">

Anatomija HTML dokumenta

U pravilu, HTML elementi ne postoje u izolaciji, nalaze se unutar HTML dokumenta odnosno stranice.

<!doctype html>
<html lang="hr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Svaki HTML dokument se sastoji od sljedećih djelova, svaki predstavljen svojim tagom:

1. <!DOCTYPE html> - označava da se radi o HTML dokumentu.
2. <html></html> - označava početak HTML dokumenta, sav HTML kod se nalazi unutar njega. U jednom HTML dokumentu mora postojati samo jedan <html> tag, isto vrijedi za <!DOCTYPE html> tag.
3. <head></head> - sadrži metapodatke o dokumentu, kao što je naslov stranice koji se prikazuje u tabu preglednika. Metapodaci se odnose na informacije o stranici, a ne na sadržaj koji se nalazi na njoj. Uključuje, uz naslov, opis stranice, CSS kod vezan uz taj HTML dokument, i slično.
   1. <title></title> - naslov stranice koji se prikazuje u kartici (tabu) preglednika, a ne na samoj stranici.
   2. <meta charset="UTF-8"> - definira shemu za prikaz znakova koje stranica koristi. U ovom slučaju, to je UTF-8, što je najčešće korišteno kodiranje znakova na webu. Uz UTF-8, postoje i druge sheme kodiranja, najpoznatiji je ASCII, ali on ne podržava sve znakove koje koristimo u svakodnevnom životu, samo osnovne engleske znakove. <meta> tag također nema zatvarajući tag i može se koristiti za dodavanje opisa stranica i ostalih metapodataka, o tome ćemo detaljnije kasnije.
4. <body></body> - sadrži sve vidljivo na stranici, kao što su naslovi, paragrafi, slike, linkovi, i slično.