# Terrarium Projekt Dio 1: Uvod u HTML ```mermaid journey title Vaše putovanje učenja HTML-a section Osnove Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section Sadržaj Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section Semantika Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![Uvod u HTML](../../../../translated_images/hr/webdev101-html.4389c2067af68e98.webp) > Sketchnote autora [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 – on definira gdje sadržaj ide, kako je organiziran i što svaki dio predstavlja. Dok će CSS kasnije "ofarbati" vaš HTML bojama i rasporedima, a JavaScript će 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 pojmovima dok izrađujete nešto vizualno zanimljivo. Naučit ćete kako organizirati sadržaj pomoću semantičkih elemenata, raditi sa slikama i stvoriti osnovu 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 na početku izgleda jednostavno – upravo tako HTML treba izgledati prije nego što CSS doda vizualne detalje. ```mermaid mindmap root((Osnove HTML-a)) Structure DOCTYPE deklaracija HTML element Sekcija Head Sadržaj Body Elements Oznake i atributi Samozatvarajuće oznake Ugniježđeni elementi Blok vs Inline Content Tekstualni elementi Slike Kontejneri (div) Liste Semantics Značajne oznake Pristupačnost Čitači zaslona Prednosti SEO-a Best Practices Ispravno ugniježđivanje Valjani markup Opisni alt tekst Organizirana struktura ``` ## Predpredavanje kviz [Predpredavanje kviz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Gledajte i učite**: Pogledajte ovaj korisni video pregled > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Postavljanje Vašeg Projekta Prije nego što zaronimo u HTML kod, postavimo ispravno radno okruženje za vaš terarij projekt. Izrada organizirane strukture datoteka od početka ključna je navika koja će vam dobro služiti tijekom cijelog vašeg web razvoja. ### Zadatak: Kreirajte Strukturu Vašeg Projekta Napravit ćete posebnu mapu za vaš terarij projekt i dodati prvu HTML datoteku. Evo dva pristupa koja možete koristiti: **Opcija 1: Korištenje Visual Studio Code** 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 nazvanu `terrarium` i odaberite je 4. U Explorer panelu kliknite na ikonu "New File" 5. Nazovite svoju datoteku `index.html` ![VS Code Explorer prikazuje stvaranje nove datoteke](../../../../translated_images/hr/vs-code-index.e2986cf919471eb9.webp) **Opcija 2: Korištenje naredbi u Terminalu** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Ovo su funkcije ovih naredbi:** - **Kreira** novu mapu nazvanu `terrarium` za vaš projekt - **Ulazi** u mapu terrarium - **Stvara** praznu datoteku `index.html` - **Otvara** datoteku u Visual Studio Code za uređivanje > 💡 **Savjet stručnjaka**: 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 URL poput `https://mysite.com/projects/` automatski prikazuje `index.html` datoteku iz mape `projects` bez potrebe da se ime datoteke navodi u URL-u. ## Razumijevanje Strukture HTML Dokumenta Svaki HTML dokument slijedi specifičnu strukturu koju preglednici trebaju razumjeti kako bi ispravno prikazali stranicu. Zamislite ovu strukturu kao formalno pismo – ima obavezne elemente redoslijedom koji pomažu primatelju (u ovom slučaju pregledniku) da pravilno obradi sadržaj. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Naslov"] G --> I["<div> Kontejneri"] G --> J["<img> Slike"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Započnimo dodavanjem osnovnog temelja koji svaki HTML dokument treba. ### DOCTYPE Izjava i Korijenski Element Prve dvije linije bilo kojeg HTML fajla služe kao "uvod" dokumenta prema pregledniku: ```html <!DOCTYPE html> <html></html> ``` **Što ovaj kod radi:** - **Deklarira** tip dokumenta kao HTML5 koristeći `<!DOCTYPE html>` - **Kreira** korijenski `<html>` element koji će sadržavati sav sadržaj stranice - **Uspostavlja** moderne web standarde za ispravan prikaz u preglednicima - **Osigurava** dosljedan prikaz na različitim preglednicima i uređajima > 💡 **VS Code Savjet**: Zadržite pokazivač iznad bilo kojeg HTML taga u VS Code da vidite korisne informacije iz MDN Web Docs, uključujući primjere upotrebe i detalje o kompatibilnosti preglednika. > 📚 **Saznajte Više**: DOCTYPE izjava sprječava da preglednici ulaze u "quirks mode," što se koristilo za podršku vrlo starim web stranicama. Moderni web razvoj koristi jednostavnu `<!DOCTYPE html>` deklaraciju za osiguranje [standardski usklađenog prikaza](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagoški Pregled** **Pauzirajte i Razmislite**: Prije nego što nastavite, provjerite razumijete li: - ✅ Zašto svaki HTML dokument treba DOCTYPE deklaraciju - ✅ Što sadrži korijenski `<html>` element - ✅ Kako ova struktura pomaže preglednicima da pravilno prikazuju stranice **Brzi samoprovjera**: Možete li vlastitim riječima objasniti što znači "standardski usklađeni prikaz"? ## Dodavanje Bitnih Metapodataka Dokumenta Sekcija `<head>` HTML dokumenta sadrži ključne informacije koje preglednici i tražilice trebaju, ali koje posjetitelji ne vide direktno na stranici. Zamislite je kao "iza kulisa" informacije koje pomažu vašoj stranici da ispravno radi i da se pravilno prikazuje na raznim uređajima i platformama. Ovi metapodaci kažu preglednicima kako prikazati stranicu, koju kodnu stranicu koristiti i kako se nositi s različitim veličinama ekrana – sve što je ključno za izradu profesionalnih i pristupačnih web stranica. ### Zadatak: Dodajte Dokument Glavu Umetnite ovaj `<head>` odjeljak između vaših otvarajućih i zatvarajućih `<html>` tagova: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Razlaganje što svaki element radi:** - **Postavlja** naslov stranice koji se prikazuje u karticama preglednika i rezultatima pretraživanja - **Specifikira** UTF-8 kodiranje znakova za ispravan prikaz teksta širom svijeta - **Osigurava** kompatibilnost s modernim verzijama Internet Explorera - **Konfigurira** responzivni dizajn postavljanjem viewporta da prati širinu uređaja - **Kontrolira** početni nivo zumiranja kako bi se sadržaj prikazao u prirodnoj veličini > 🤔 **Razmislite o ovome**: Što bi se dogodilo ako postavite viewport meta tag ovako: ``? Ovo bi prisililo stranicu da uvijek bude široka 600 piksela, čime se primjenjuje lom dizajna prilagođenog zaslonu! Više saznajte o [ispravnoj viewport konfiguraciji](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 čim mogu komunicirati. Dok je `` dijelu davao upute pregledniku, sekcija `` sadrži stvarni sadržaj: tekst, slike, gumbe i druge elemente koji stvaraju vaše korisničko sučelje. Dodajmo tijelo stranice i razumijemo kako HTML tagovi rade zajedno da bi stvorili smisleni sadržaj. ### Razumijevanje Strukture HTML Tagova HTML koristi uparene tagove za definiranje elemenata. Većina tagova ima otvarajući tag poput `

` i zatvarajući tag kao `

`, s sadržajem između: `

Zdravo, svijete!

`. Time se stvara paragraf koji sadrži tekst „Zdravo, svijete!“. ### Zadatak: Dodajte Element Body Ažurirajte vašu HTML datoteku da uključite `` element: ```html Welcome to my Virtual Terrarium ``` **Evo što ova potpuna struktura pruža:** - **Uspostavlja** osnovni HTML5 okvir dokumenta - **Uključuje** bitne metapodatke za ispravan prikaz u preglednicima - **Kreira** prazno tijelo spremno za vaš vidljivi sadržaj - **Prati** najbolje prakse modernog web razvoja Sada ste spremni dodati vidljive elemente svog terarija. Koristit ćemo `
` elemente kao kontejnere za organiziranje različitih dijelova sadržaja i `` elemente za prikaz slika biljaka. ### Rad sa Slikama i Kontejnerima za Raspored Slike su posebne u HTML-u jer koriste "samozatvarajuće" tagove. Za razliku od elemenata poput `

` koji obavijaju sadržaj, `` tag sadrži sve potrebne informacije unutar tag-a pomoću atributa kao što su `src` za putanju slike i `alt` za pristupačnost. Prije nego što dodate slike u HTML, trebate organizirati vaše projektne datoteke pravilno stvaranjem mape za slike i dodavanjem grafika biljaka. **Prvo, postavite slike:** 1. Kreirajte mapu nazvanu `images` unutar vaše terarij projektne mape 2. Preuzmite slike biljaka iz [solution folder](../../../../3-terrarium/solution/images) (ukupno 14 slika biljaka) 3. Kopirajte sve slike biljaka u vašu novu `images` mapu ### Zadatak: Kreirajte Raspored Prikaza Biljaka Sada dodajte slikovne prikaze biljaka organiziranih u dva stupca između vaših `` tagova: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Korak po korak, evo što se događa u ovom kodu:** - **Kreira** glavni spremnik stranice s `id="page"` koji drži sav sadržaj - **Uspostavlja** dva stupčasta spremnika: `left-container` i `right-container` - **Organizira** 7 biljaka u lijevom stupcu i 7 biljaka u desnom stupcu - **Obavija** svaku sliku biljke u `plant-holder`
za individualno pozicioniranje - **Primjenjuje** dosljedne nazive klasa za CSS stiliziranje u sljedećoj lekciji - **Dodjeljuje** jedinstvene ID-e svakoj slici biljke za JavaScript interakciju kasnije - **Uključuje** ispravne putanje do mape sa slikama > 🤔 **Razmislite o ovome**: Primijetite da sve slike trenutno imaju isti alt tekst "plant". Ovo nije idealno za pristupačnost. Korisnici sa čitačima zaslona bi čuli "plant" ponovljeno 14 puta bez znanja o kojoj biljci se radi. Možete li smisliti bolje, opisnije alt tekstove za svaku sliku? > 📝 **Tipovi HTML Elemenata**: `
` elementi su "blok nivo" i zauzimaju punu širinu, dok su `` elementi "inline" i zauzimaju samo potrebnu širinu. Što mislite što bi se dogodilo da sve ove `
` tagove promijenite u `` tagove? ### 🔄 **Pedagoški Pregled** **Razumijevanje Strukture**: Odvojite trenutak za pregled vaše HTML strukture: - ✅ Možete li identificirati glavne kontejnere u vašem rasporedu? - ✅ Razumijete li zašto svaka slika ima jedinstveni ID? - ✅ Kako biste opisali svrhu `plant-holder` divova? **Vizualna Inspekcija**: Otvorite vašu HTML datoteku u pregledniku. Trebali biste vidjeti: - Osnovnu listu slika biljaka - Slike organizirane u dva stupca - Jednostavan, nestiliziran raspored **Zapamtite**: Ovaj jednostavan izgled je upravo ono što HTML treba izgledati prije CSS stiliziranja! S ovim dodanim markupom, biljke će se pojaviti na ekranu, iako još ne izgledaju dotjerano – za to služi CSS u sljedećoj lekciji! Za sada imate čvrst HTML temelj koji ispravno organizira vaš sadržaj i prati 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, ne samo na temelju njihovog izgleda. Kada koristite semantički markup, komunicirate strukturu i značenje vašeg sadržaja preglednicima, tražilicama i asistivnim tehnologijama poput čitača zaslona. ```mermaid flowchart TD A[Trebate li dodati sadržaj?] --> B{Koja vrsta?} B -->|Glavni naslov| C["

"] B -->|Podnaslov| D["

,

, itd."] B -->|Odlomak| E["

"] B -->|Lista| F["

    ,
      "] B -->|Navigacija| G["