# Projekt Terarij, 1. dio: Uvod u HTML
> Sketchnote autorice [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, ili HyperText Markup Language, temelj je svake web stranice koju ste ikada posjetili. Zamislite HTML kao kostur koji daje strukturu web stranicama – definira gdje ide sadržaj, kako je organiziran i što svaki dio predstavlja. Dok će CSS kasnije "ukrasiti" vaš HTML bojama i izgledom, a JavaScript ga oživjeti interaktivnošću, HTML pruža osnovnu strukturu koja omogućuje sve ostalo.
U ovoj lekciji kreirat ćete HTML strukturu za sučelje virtualnog terarija. Ovaj praktični projekt naučit će vas osnovnim HTML konceptima dok gradite nešto vizualno privlačno. Naučit ćete kako organizirati sadržaj koristeći semantičke elemente, raditi s slikama i stvoriti temelj za interaktivnu web aplikaciju.
Na kraju ove lekcije imat ćete funkcionalnu HTML stranicu koja prikazuje slike biljaka u organiziranim stupcima, spremnu za stiliziranje u sljedećoj lekciji. Ne brinite ako u početku izgleda osnovno – upravo to HTML treba raditi prije nego što CSS doda vizualni sjaj.
## Kviz prije predavanja
[Prethodni kviz](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **Gledajte i učite**: Pogledajte ovaj koristan video pregled
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## Postavljanje vašeg projekta
Prije nego što zaronimo u HTML kod, postavimo odgovarajući radni prostor za vaš projekt terarija. Stvaranje organizirane strukture datoteka od početka ključna je navika koja će vam dobro doći tijekom vašeg putovanja u web razvoj.
### Zadatak: Kreirajte strukturu projekta
Kreirat ćete namjensku mapu za svoj projekt terarija i dodati svoju prvu HTML datoteku. Evo dva pristupa koja možete koristiti:
**Opcija 1: Korištenje Visual Studio Code-a**
1. Otvorite Visual Studio Code
2. Kliknite "File" → "Open Folder" ili koristite `Ctrl+K, Ctrl+O` (Windows/Linux) ili `Cmd+K, Cmd+O` (Mac)
3. Kreirajte novu mapu pod nazivom `terrarium` i odaberite je
4. U oknu Explorer kliknite ikonu "New File"
5. Nazovite svoju datoteku `index.html`
**Opcija 2: Korištenje naredbi u terminalu**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**Što ove naredbe postižu:**
- **Kreiraju** novi direktorij pod nazivom `terrarium` za vaš projekt
- **Navigiraju** u direktorij terarija
- **Kreiraju** praznu datoteku `index.html`
- **Otvaraju** datoteku u Visual Studio Code-u za uređivanje
> 💡 **Savjet**: Naziv datoteke `index.html` je poseban u web razvoju. Kada netko posjeti web stranicu, preglednici automatski traže `index.html` kao zadanu stranicu za prikaz. To znači da će URL poput `https://mysite.com/projects/` automatski prikazati datoteku `index.html` iz mape `projects` bez potrebe za navođenjem naziva datoteke u URL-u.
## Razumijevanje strukture HTML dokumenta
Svaki HTML dokument slijedi određenu strukturu koju preglednici trebaju razumjeti i ispravno prikazati. Zamislite ovu strukturu kao formalno pismo – ima potrebne elemente u određenom redoslijedu koji pomažu primatelju (u ovom slučaju pregledniku) da pravilno obradi sadržaj.
Započnimo dodavanjem osnovnog temelja koji svaki HTML dokument treba.
### Deklaracija DOCTYPE-a i korijenski element
Prve dvije linije bilo koje HTML datoteke služe kao "uvod" dokumenta pregledniku:
```html
```
**Razumijevanje što ovaj kod radi:**
- **Deklarira** tip dokumenta kao HTML5 koristeći ``
- **Kreira** korijenski element `` koji će sadržavati sav sadržaj stranice
- **Uspostavlja** moderne web standarde za pravilno prikazivanje u preglednicima
- **Osigurava** dosljedan prikaz na različitim preglednicima i uređajima
> 💡 **Savjet za VS Code**: Pređite mišem preko bilo koje HTML oznake u VS Code-u kako biste vidjeli korisne informacije iz MDN Web Docs, uključujući primjere upotrebe i detalje o kompatibilnosti preglednika.
> 📚 **Saznajte više**: Deklaracija DOCTYPE sprječava preglednike da uđu u "quirks mode", koji se koristio za podršku vrlo starim web stranicama. Moderni web razvoj koristi jednostavnu deklaraciju `` kako bi osigurao [prikaz u skladu sa standardima](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
## Dodavanje osnovnih metapodataka dokumenta
Odjeljak `` HTML dokumenta sadrži ključne informacije koje su potrebne preglednicima i tražilicama, ali koje posjetitelji ne vide izravno na stranici. Zamislite ga kao "iza kulisa" informacije koje pomažu vašoj web stranici da pravilno funkcionira i da se ispravno prikazuje na različitim uređajima i platformama.
Ovi metapodaci govore preglednicima kako prikazati vašu stranicu, koju kodnu stranicu koristiti i kako se nositi s različitim veličinama zaslona – sve bitno za stvaranje profesionalnih, pristupačnih web stranica.
### Zadatak: Dodajte zaglavlje dokumenta
Umetnite ovaj odjeljak `` između vaših otvarajućih i zatvarajućih `` oznaka:
```html
Welcome to my Virtual Terrarium
```
**Razlaganje što svaki element postiže:**
- **Postavlja** naslov stranice koji se pojavljuje na karticama preglednika i rezultatima pretraživanja
- **Određuje** UTF-8 kodnu stranicu za pravilno prikazivanje teksta širom svijeta
- **Osigurava** kompatibilnost s modernim verzijama Internet Explorera
- **Konfigurira** responzivni dizajn postavljanjem viewporta da odgovara širini uređaja
- **Kontrolira** početnu razinu zumiranja za prikaz sadržaja u prirodnoj veličini
> 🤔 **Razmislite o ovome**: Što bi se dogodilo da postavite meta oznaku viewporta ovako: ``? To bi prisililo stranicu da uvijek bude široka 600 piksela, što bi narušilo responzivni dizajn! Saznajte više o [ispravnoj konfiguraciji viewporta](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## Izgradnja tijela dokumenta
Element `` sadrži sav vidljivi sadržaj vaše web stranice – sve što korisnici vide i s čime interagiraju. Dok je odjeljak `` pružio upute pregledniku, odjeljak `` sadrži stvarni sadržaj: tekst, slike, gumbe i druge elemente koji čine vaše korisničko sučelje.
Dodajmo strukturu tijela i razumijmo kako HTML oznake rade zajedno kako bi stvorile smislen sadržaj.
### Razumijevanje strukture HTML oznaka
HTML koristi parove oznaka za definiranje elemenata. Većina oznaka ima otvarajuću oznaku poput `
` i zatvarajuću oznaku poput `
`, s sadržajem između: `
Pozdrav svijete!
`. Ovo stvara element odlomka koji sadrži tekst "Pozdrav svijete!".
### Zadatak: Dodajte element tijela
Ažurirajte svoju HTML datoteku kako biste uključili element ``:
```html
Welcome to my Virtual Terrarium
```
**Evo što ova kompletna struktura pruža:**
- **Uspostavlja** osnovni okvir HTML5 dokumenta
- **Uključuje** osnovne metapodatke za pravilno prikazivanje u preglednicima
- **Kreira** prazno tijelo spremno za vaš vidljivi sadržaj
- **Slijedi** najbolje prakse modernog web razvoja
Sada ste spremni dodati vidljive elemente svog terarija. Koristit ćemo `
` elemente kao spremnike za organizaciju različitih dijelova sadržaja i `` elemente za prikaz slika biljaka.
### Rad s slikama i spremnicima za raspored
Slike su posebne u HTML-u jer koriste "samozatvarajuće" oznake. Za razliku od elemenata poput `` koji obuhvaćaju sadržaj, oznaka `` sadrži sve potrebne informacije unutar same oznake koristeći atribute poput `src` za putanju datoteke slike i `alt` za pristupačnost.
Prije dodavanja slika u vaš HTML, trebate pravilno organizirati datoteke projekta tako da kreirate mapu za slike i dodate grafike biljaka.
**Prvo, postavite svoje slike:**
1. Kreirajte mapu pod nazivom `images` unutar mape projekta terarija
2. Preuzmite slike biljaka iz [mape rješenja](../../../../3-terrarium/solution/images) (ukupno 14 slika biljaka)
3. Kopirajte sve slike biljaka u svoju novu mapu `images`
### Zadatak: Kreirajte raspored prikaza biljaka
Sada dodajte slike biljaka organizirane u dva stupca između vaših oznaka ``:
```html
```
**Korak po korak, evo što se događa u ovom kodu:**
- **Kreira** glavni spremnik stranice s `id="page"` za držanje cijelog sadržaja
- **Uspostavlja** dva spremnika stupaca: `left-container` i `right-container`
- **Organizira** 7 biljaka u lijevom stupcu i 7 biljaka u desnom stupcu
- **Obuhvaća** svaku sliku biljke u `plant-holder` div za pojedinačno pozicioniranje
- **Primjenjuje** dosljedne nazive klasa za stiliziranje u sljedećoj lekciji
- **Dodjeljuje** jedinstvene ID-ove svakoj slici biljke za interakciju putem JavaScripta kasnije
- **Uključuje** ispravne putanje datoteka koje upućuju na mapu slika
> 🤔 **Razmislite o ovome**: Primijetite da sve slike trenutno imaju isti alt tekst "biljka". To nije idealno za pristupačnost. Korisnici čitača zaslona čuli bi "biljka" ponovljeno 14 puta bez da znaju koja specifična biljka je prikazana na svakoj slici. Možete li smisliti bolje, opisnije alt tekstove za svaku sliku?
> 📝 **Vrste HTML elemenata**: `
` elementi su "blok razine" i zauzimaju punu širinu, dok su `` elementi "inline" i zauzimaju samo potrebnu širinu. Što mislite da bi se dogodilo da promijenite sve ove `
` oznake u `` oznake?
S ovim dodanim oznakama, biljke će se pojaviti na ekranu, iako još neće izgledati dotjerano – za to je zadužen CSS u sljedećoj lekciji! Za sada imate čvrst HTML temelj koji pravilno organizira vaš sadržaj i slijedi najbolje prakse pristupačnosti.
## Korištenje semantičkog HTML-a za pristupačnost
Semantički HTML znači odabir HTML elemenata na temelju njihovog značenja i svrhe, a ne samo njihovog izgleda. Kada koristite semantičko označavanje, komunicirate strukturu i značenje svog sadržaja preglednicima, tražilicama i pomoćnim tehnologijama poput čitača zaslona.
Ovaj pristup čini vaše web stranice pristupačnijima korisnicima s invaliditetom i pomaže tražilicama da bolje razumiju vaš sadržaj. To je temeljno načelo modernog web razvoja koje stvara bolje iskustvo za sve.
### Dodavanje semantičkog naslova stranice
Dodajmo odgovarajući naslov vašoj stranici terarija. Umetnite ovu liniju odmah nakon vaše otvarajuće oznake ``:
```html
My Terrarium
```
**Zašto je semantičko označavanje važno:**
- **Pomaže** čitačima zaslona da navigiraju i razumiju strukturu stranice
- **Poboljšava** optimizaciju za tražilice (SEO) razjašnjavanjem hijerarhije sadržaja
- **Povećava** pristupačnost za korisnike s oštećenjem vida ili kognitivnim razlikama
- **Stvara** bolje korisničko iskustvo na svim uređajima i platformama
- **Slijedi** web standarde i najbolje prakse za profesionalni razvoj
**Primjeri semantičkih i nesemantičkih izbora:**
| Svrha | ✅ Semantički izbor | ❌ Nesemantički izbor |
|-------|--------------------|-----------------------|
| Glavni naslov | `
` |
> 🎥 **Pogledajte u akciji**: Pogledajte [kako čitači zaslona interagiraju s web stranicama](https://www.youtube.com/watch?v=OUDV1gqs9GA) kako biste razumjeli zašto je semantičko označavanje ključno za pristupačnost. Primijetite kako pravilna HTML struktura pomaže korisnicima da učinkovito navigiraju.
## Kreiranje spremnika za terarij
Sada dodajmo HTML strukturu za sam terarij – stakleni spremnik u kojem će biljke na kraju biti smještene. Ovaj odjeljak demonstrira važan koncept: HTML pruža strukturu, ali bez CSS stiliziranja, ti elementi još neće biti vidljivi.
Označavanje terarija koristi opisne nazive klasa koji će učiniti CSS stiliziranje intuitivnim i lakim za održavanje u sljedećoj lekciji.
### Zadatak: Dodajte strukturu terarija
Umetnite ovo označavanje iznad posljednje oznake `
```
**Razumijevanje ove strukture terarija:**
- **Kreira** glavni spremnik terarija s jedinstvenim ID-om za stiliziranje
- **Definira** zasebne elemente za svaku vizualnu komponentu (vrh, zidovi, zemlja, dno)
- **Uključuje** ugniježđene elemente za efekte refleksije stakla (sjajni elementi)
- **Koristi** opisne nazive klasa koji jasno označavaju svrhu svakog elementa
- **Priprema** strukturu za CSS stiliziranje koje će stvoriti izgled staklenog terarija
> 🤔 **Primijetite nešto?**: Iako ste dodali ovo označavanje, ne vidite ništa novo na stranici! Ovo savršeno ilustrira kako HTML pruža strukturu dok CSS pruža izgled. Ovi `
` elementi postoje, ali još nemaju vizualno stiliziranje – to dolazi u sljedećoj lekciji!
---
## Izazov za GitHub Copilot agenta
Koristite način rada Agent za dovršavanje sljedećeg izazova:
**Opis:** Kreirajte semantičku HTML strukturu za odjeljak vodiča za njegu biljaka koji bi se mogao dodati projektu terarija.
**Zadatak:** Izradite semantički HTML odjeljak koji uključuje glavni naslov "Vodič za njegu biljaka", tri pododjeljka s naslovima "Zalijevanje", "Zahtjevi za svjetlom" i "Njega tla", od kojih svaki sadrži odlomak informacija o njezi biljaka. Koristite odgovarajuće semantičke HTML oznake poput ``, `
`, `
` i `
` za pravilno strukturiranje sadržaja.
Saznajte više o [agent modu](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ovdje.
## Istražite izazov povijesti HTML-a
**Učenje o evoluciji weba**
HTML se značajno razvio od kada je Tim Berners-Lee stvorio prvi web preglednik u CERN-u 1990. godine. Neki stariji tagovi poput `
