# Terrarium Project Deo 1: Uvod u HTML ```mermaid journey title Ваш пут учења HTML-а section Основа Креирајте HTML фајл: 3: Student Додајте DOCTYPE: 4: Student Структурирајте документ: 5: Student section Садржај Додајте метаподатке: 4: Student Укључите слике: 5: Student Организујте изглед: 5: Student section Семантика Користите исправне тагове: 4: Student Побољшајте приступачност: 5: Student Направите тераријум: 5: Student ``` ![Introduction to HTML](../../../../translated_images/sr/webdev101-html.4389c2067af68e98.webp) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) HTML, ili HyperText Markup Language, je osnova svake web stranice koju ste ikada posetili. Zamislite HTML kao kostur koji daje strukturu veb stranicama – on definiše gde sadržaj ide, kako je organizovan i šta svaki deo predstavlja. Dok će CSS kasnije "ukrasiti" vaš HTML bojama i rasporedima, a JavaScript oživeti interaktivnošću, HTML pruža osnovnu strukturu koja sve ostalo omogućava. U ovoj lekciji napravićete HTML strukturu za virtuelni interfejs terarijuma. Ovaj projekat iz prve ruke naučiće vas osnovnim HTML pojmovima dok gradite nešto vizuelno zanimljivo. Naučićete kako da organizujete sadržaj koristeći semantičke elemente, radite sa slikama i napravite osnovu za interaktivnu veb aplikaciju. Na kraju lekcije imaćete radnu HTML stranicu koja prikazuje slike biljaka u organizovanim kolonama, spremnu za stilizaciju u sledećoj lekciji. Ne brinite ako na početku izgleda jednostavno – to je upravo ono što HTML treba da bude pre nego što CSS doda vizuelni sjaj. ```mermaid mindmap root((Основе HTML-а)) Structure DOCTYPE декларација HTML елемент Head одељак Body садржај Elements Тагови и атрибути Самозатварајући тагови Угнеждени елементи Блок против Inline Content Текстуални елементи Слике Контејнери (div) Листе Semantics Садржајни тагови Приступачност Читачи екрана SEO предности Best Practices Правилно угнежђивање Вaжећи markup Описни Alt текст Организована структура ``` ## Pre-večerna provera znanja [Pre-večerni kviz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Gledajte i učite**: Pogledajte ovaj koristan video pregled > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Postavljanje vašeg projekta Pre nego što zaronimo u HTML kod, hajde da postavimo odgovarajući radni prostor za vaš projekat terarijuma. Kreiranje organizovane strukture fajlova od samog početka je važna navika koja će vam koristiti tokom celog puta razvoja veba. ### Zadatak: Napravite strukturu vašeg projekta Napravite poseban folder za projekat terarijuma i dodajte svoj prvi HTML fajl. Evo dva pristupa koja možete koristiti: **Opcija 1: Korišćenje Visual Studio Code** 1. Otvorite Visual Studio Code 2. Kliknite na "File" → "Open Folder" ili koristite `Ctrl+K, Ctrl+O` (Windows/Linux) ili `Cmd+K, Cmd+O` (Mac) 3. Kreirajte novi folder pod imenom `terrarium` i izaberite ga 4. U Explorer panelu kliknite na ikonu "New File" 5. Imenovajte fajl `index.html` ![VS Code Explorer showing new file creation](../../../../translated_images/sr/vs-code-index.e2986cf919471eb9.webp) **Opcija 2: Korišćenje komandne linije** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Ovo je šta ove komande rade:** - **Prave** novi direktorijum nazvan `terrarium` za vaš projekat - **Ulaze** u direktorijum terrarium - **Prave** prazan fajl `index.html` - **Otvaraju** fajl u Visual Studio Code za uređivanje > 💡 **Pro savet**: Ime fajla `index.html` je specijalno u razvoju veba. Kada neko poseti web sajt, pregledači automatski traže `index.html` kao podrazumevanu stranicu za prikazivanje. To znači da URL kao `https://mysite.com/projects/` automatski prikazuje `index.html` fajl iz `projects` foldera bez potrebe da se ime fajla eksplicitno navodi u URL-u. ## Razumevanje strukture HTML dokumenta Svaki HTML dokument prati određenu strukturu koju pregledači moraju razumeti i pravilno prikazati. Zamislite ovu strukturu kao formalno pismo – ima obavezne elemente u određenom redosledu koji pomažu primaocu (u ovom slučaju pregledaču) da obradi sadržaj ispravno. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Наслов"] G --> I["<div> Контејнери"] G --> J["<img> Слике"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Počnimo dodavanjem osnovne osnove koja je potrebna svakom HTML dokumentu. ### DOCTYPE deklaracija i korenski element Prve dve linije bilo kog HTML fajla služe kao "uvod" dokumenta za pregledač: ```html <!DOCTYPE html> <html></html> ``` **Razumevanje šta ovaj kod radi:** - **Deklariše** tip dokumenta kao HTML5 korišćenjem `<!DOCTYPE html>` - **Pravi** korenski `<html>` element koji sadrži sav sadržaj stranice - **Uspostavlja** moderne veb standarde za pravilno prikazivanje u pregledačima - **Osigurava** dosledan prikaz na različitim pregledačima i uređajima > 💡 **VS Code savet**: Zadržite pokazivač miša iznad bilo kog HTML taga u VS Code-u da vidite korisne informacije iz MDN Web Docs, uključujući primere korišćenja i detalje o kompatibilnosti sa pregledačima. > 📚 **Saznajte više**: DOCTYPE deklaracija sprečava da pregledači uđu u "quirks mode", koji se koristio za podršku veoma starim sajtovima. Moderni razvoj veba koristi jednostavnu `<!DOCTYPE html>` deklaraciju da bi obezbedio [prikaz po standardima](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagoška provera** **Pauzirajte i razmislite**: Pre nego što nastavite, uverite se da razumete: - ✅ Zašto svaki HTML dokument treba DOCTYPE deklaraciju - ✅ Šta sadrži `<html>` korenski element - ✅ Kako ova struktura pomaže pregledačima da pravilno prikazuju stranice **Brzi auto-test**: Možete li svojim rečima objasniti šta znači "prikaz po standardima"? ## Dodavanje ključnih meta podataka dokumenta Sekcija `<head>` HTML dokumenta sadrži ključne informacije koje pregledači i pretraživači trebaju, ali koje posetioci ne vide direktno na stranici. Zamislite je kao "iza kulisa" informacije koje pomažu vašoj stranici da pravilno funkcioniše i da se pravilno prikazuje na različitim uređajima i platformama. Ovi meta podaci govore pregledačima kako da prikažu stranicu, koji karakter encoding da koriste i kako da se nose sa različitim veličinama ekrana – sve je to esencijalno za pravljenje profesionalnih, pristupačnih veb stranica. ### Zadatak: Dodajte deo zaglavlja dokumenta Ubacićete ovu `<head>` sekciju između vaših početnih i završnih `<html>` tagova: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Razlaganje šta svaki element postiže:** - **Postavlja** naslov stranice koji se pojavljuje u tabovima pregledača i rezultatima pretrage - **Specifikuje** UTF-8 kodiranje karaktera radi pravilnog prikaza teksta širom sveta - **Obezbeđuje** kompatibilnost sa modernim verzijama Internet Explorera - **Konfiguriše** responzivni dizajn tako što podešava viewport da odgovara širini uređaja - **Kontroliše** početni nivo zumiranja da prikaže sadržaj u prirodnoj veličini > 🤔 **Razmislite o ovome**: Šta bi se desilo ako biste postavili viewport meta tag ovako: ``? Ovo bi forsiralo da stranica uvek bude široka 600 piksela, čime bi bio narušen responzivni dizajn! Saznajte više o [ispravnoj konfiguraciji viewporta](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Izgradnja tela dokumenta Element `` sadrži sav vidljivi sadržaj vaše veb stranice – sve što će korisnici videti i sa čim će komunicirati. Dok je sekcija `` davala uputstva pregledaču, sekcija `` sadrži pravi sadržaj: tekst, slike, dugmad i druge elemente koji stvaraju vaš korisnički interfejs. Dodajmo strukturu tela i razumimo kako HTML tagovi rade zajedno da kreiraju smisleni sadržaj. ### Razumevanje strukture HTML tagova HTML koristi uparene tagove da definiše elemente. Većina tagova ima početni tag kao `

` i završni tag kao `

`, sa sadržajem između: `

Zdravo, svete!

`. To pravi paragraf koji sadrži tekst "Zdravo, svete!". ### Zadatak: Dodajte body element Ažurirajte svoj HTML fajl tako da uključi `` element: ```html Welcome to my Virtual Terrarium ``` **Evo šta ova kompletna struktura omogućava:** - **Uspostavlja** osnovni HTML5 okvir dokumenta - **Uključuje** ključne meta podatke za pravilno prikazivanje u pregledaču - **Pravi** prazno telo spremno za vaš vidljivi sadržaj - **Prati** najbolje prakse modernog razvoja veba Sada ste spremni da dodate vidljive elemente vašeg terarijuma. Koristićemo `
` elemente kao kontejnere za organizovanje različitih sekcija sadržaja i `` elemente za prikaz slika biljaka. ### Rad sa slikama i kontejnerima za raspored Slike su posebne u HTML-u jer koriste "self-closing" tagove. Za razliku od elemenata kao što su `

` koji obuhvataju sadržaj, `` tag sadrži sve potrebne informacije unutar samog taga pomoću atributa kao što su `src` za putanju do slike i `alt` za pristupačnost. Pre nego što dodate slike u svoj HTML, moraćete da pravilno organizujete fajlove projekta tako što ćete napraviti folder za slike i dodati grafike biljaka. **Prvo, pripremite svoje slike:** 1. Napravite folder pod imenom `images` unutar foldera terarijuma 2. Preuzmite slike biljaka iz [solution foldera](../../../../3-terrarium/solution/images) (ukupno 14 slika biljaka) 3. Kopirajte sve slike biljaka u novi `images` folder ### Zadatak: Napravite raspored za prikaz biljaka Sada dodajte slike biljaka organizovane u dve kolone između vaših `` tagova: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Korak po korak, evo šta se dešava u ovom kodu:** - **Pravi** glavni kontejner stranice sa `id="page"` za držanje celog sadržaja - **Usvaja** dva kontejnera za kolone: `left-container` i `right-container` - **Organizuje** 7 biljaka u levoj koloni i 7 biljaka u desnoj koloni - **Obavija** svaku sliku biljke u `plant-holder` div radi pojedinačnog pozicioniranja - **Primjenjuje** dosledne nazive klasa za CSS stilizaciju u sledećoj lekciji - **Dodeljuje** jedinstvene ID-e svakom slici biljke za JavaScript interakciju kasnije - **Uključuje** ispravne putanje do foldera sa slikama > 🤔 **Razmislite o ovome**: Primetite da sve slike trenutno imaju isti alt tekst "plant". Ovo nije idealno za pristupačnost. Korisnici sa čitačima ekrana bi čuli "plant" 14 puta zaredom bez saznanja koja konkretna biljka je prikazana. Možete li smisliti bolje, opisnije alt tekstove za svaku sliku? > 📝 **Tipovi HTML elemenata**: `
` elementi su "blok nivoa" i zauzimaju punu širinu, dok su `` elementi "inline" i zauzimaju samo potrebnu širinu. Šta mislite šta bi se dogodilo ako biste promenili sve ove `
` tagove u `` tagove? ### 🔄 **Pedagoška provera** **Razumevanje strukture**: Uzmite trenutak da pregledate svoju HTML strukturu: - ✅ Možete li identifikovati glavne kontejnere u vašem rasporedu? - ✅ Razumete li zašto svaka slika ima jedinstveni ID? - ✅ Kako biste opisali svrhu `plant-holder` divova? **Vizuelna inspekcija**: Otvorite svoj HTML fajl u pregledaču. Trebalo bi da vidite: - Osnovnu listu slika biljaka - Slike organizovane u dve kolone - Jednostavan, nestilizovani raspored **Zapamtite**: Ovaj jednostavan izgled je upravo ono što HTML treba da izgleda pre stilizacije CSS-om! Sa ovim dodatkom oznake, biljke će se pojaviti na ekranu, mada još neće izgledati dotjerano – za to služi CSS u sledećoj lekciji! Za sada imate čvrstu HTML osnovu koja pravilno organizuje vaš sadržaj i prati najbolje prakse za pristupačnost. ## Korišćenje semantičkog HTML-a za pristupačnost Semantički HTML znači biranje HTML elemenata na osnovu njihovog značenja i svrhe, a ne samo izgleda. Kada koristite semantički markup, komunicirate strukturu i značenje svog sadržaja pregledačima, pretraživačima i asistivnim tehnologijama poput čitača ekrana. ```mermaid flowchart TD A[Потребно додати садржај?] --> B{Која врста?} B -->|Главни наслов| C["

"] B -->|Поднаслов| D["

,

, итд."] B -->|Параграф| E["

"] B -->|Листа| F["

    ,
      "] B -->|Навигација| G["