# Terrarium Project Part 1: Uvod v HTML ```mermaid journey title Vaša pot učenja HTML section Osnove Ustvari HTML datoteko: 3: Študent Dodaj DOCTYPE: 4: Študent Strukturiraj dokument: 5: Študent section Vsebina Dodaj metapodatke: 4: Študent Vključi slike: 5: Študent Organiziraj postavitev: 5: Študent section Semantika Uporabi pravilne oznake: 4: Študent Izboljšaj dostopnost: 5: Študent Zgradi terarij: 5: Študent ``` ![Uvod v HTML](../../../../translated_images/sl/webdev101-html.4389c2067af68e98.webp) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) HTML oziroma HyperText Markup Language je temelj vsake spletne strani, ki ste jo kdaj obiskali. HTML si predstavljajte kot ogrodje, ki daje strukturo spletnim stranem – določa, kam gre vsebina, kako je organizirana in kaj vsak del predstavlja. Medtem ko bo CSS kasneje "oblekel" vaš HTML z barvami in postavitvami, bo JavaScript prinesel interaktivnost, HTML pa zagotavlja osnovno strukturo, ki omogoča vse ostalo. V tej lekciji boste ustvarili HTML strukturo za vmesnik virtualnega terarija. Ta praktični projekt vas bo naučil osnovnih pojmov HTML, hkrati pa boste zgradili nekaj vizualno zanimivega. Naučili se boste organizirati vsebino z uporabo semantičnih elementov, delati s slikami in ustvariti osnovo za interaktivno spletno aplikacijo. Na koncu te lekcije boste imeli delujočo HTML stran, ki prikazuje slike rastlin v urejenih stolpcih, pripravljeno za oblikovanje v naslednji lekciji. Ne skrbite, če bo videti osnovno – tako mora HTML izgledati, preden mu CSS doda vizualno dovršenost. ```mermaid mindmap root((Osnove HTML)) Structure DOCTYPE Deklaracija HTML Element Glava Sekcija Telo Vsebina Elements Oznake in Atributi Samozapiralne Oznake Gnezdeni Elementi Blokovni proti Vrstičnim Content Besedilni Elementi Slike Zabojniki (div) Seznami Semantics Pomenljive Oznake Dostopnost Zaslonski Bralniki SEO Koristi Best Practices Pravilno Gnezdenje Veljavna Označba Opisni Alt Tekst Organizirana Struktura ``` ## Predpredavalni kviz [Predpredavalni kviz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Glejte in se učite**: Oglejte si ta koristni video pregled > > [![Osnove HTML videoposnetek](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Nastavitev vašega projekta Preden se poglobimo v HTML kodo, si uredimo primerno delovno okolje za vaš terarijski projekt. Ustvarjanje organizirane strukture datotek že od začetka je ključna navada, ki vam bo koristila skozi celotno pot spletnega razvoja. ### Naloga: Ustvarite strukturo projekta Ustvarili boste namensko mapo za vaš terarijski projekt in dodali prvo HTML datoteko. Tukaj sta dva načina, ki ju lahko uporabite: **Možnost 1: Uporaba Visual Studio Code** 1. Odprite Visual Studio Code 2. Kliknite "File" → "Open Folder" ali uporabite `Ctrl+K, Ctrl+O` (Windows/Linux) ali `Cmd+K, Cmd+O` (Mac) 3. Ustvarite novo mapo z imenom `terrarium` in jo izberite 4. V Explorer oknu kliknite na ikono "New File" 5. Vaši datoteki dajte ime `index.html` ![Explorer Visual Studio Code prikazuje ustvarjanje nove datoteke](../../../../translated_images/sl/vs-code-index.e2986cf919471eb9.webp) **Možnost 2: Uporaba terminalskih ukazov** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Tukaj je, kaj ti ukazi naredijo:** - **Ustvari** nov imenik z imenom `terrarium` za vaš projekt - **Pojde** v mapo terrarium - **Ustvari** prazno datoteko `index.html` - **Odpre** datoteko za urejanje v Visual Studio Code > 💡 **Koristen nasvet**: Ime datoteke `index.html` je v spletnem razvoju posebno. Ko nekdo obišče spletno stran, brskalniki samodejno iščejo `index.html` kot privzeto stran za prikaz. To pomeni, da bo URL, kot je `https://mysite.com/projects/`, samodejno prikazal datoteko `index.html` iz mape projects, brez potrebe po navedbi imena datoteke v URL-ju. ## Razumevanje strukture HTML dokumenta Vsak HTML dokument sledi določeni strukturi, ki jo brskalniki potrebujejo, da jo pravilno razumejo in prikažejo. Ta struktura je kot uradno pismo – ima obvezne elemente v določenem vrstnem redu, ki pomagajo prejemniku (v tem primeru brskalniku) pravilno obdelati vsebino. ```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> Kontejnerji"] G --> J["<img> Slike"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Začnimo z dodajanjem bistvene osnove, ki jo potrebuje vsak HTML dokument. ### Deklaracija DOCTYPE in korenski element Prvi dve vrstici katere koli HTML datoteke služita kot "uvod" dokumenta brskalniku: ```html <!DOCTYPE html> <html></html> ``` **Razumevanje, kaj ta koda počne:** - **Deklarira** tip dokumenta kot HTML5 z `<!DOCTYPE html>` - **Ustvari** korenski element `<html>`, ki bo vseboval vso vsebino strani - **Vzpostavi** moderne spletne standarde za pravilno upodabljanje v brskalniku - **Zagotovi** dosleden prikaz v različnih brskalnikih in na napravah > 💡 **Nasvet za VS Code**: Postavite kurzor nad katerikoli HTML oznako v VS Code, da dobite koristne informacije iz MDN Web Docs, vključno z uporabo in združljivostjo z brskalniki. > 📚 **Več o tem**: Deklaracija DOCTYPE preprečuje brskalnikom, da bi vstopili v "quirks mode", ki je bil uporabljen za podporo zelo starim spletnim stranem. Sodobni spletni razvoj uporablja preprosto deklaracijo `<!DOCTYPE html>`, da zagotovi [uporabo standardov](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagoški pregled** **Pavza in premislek**: Pred nadaljevanjem se prepričajte, da razumete: - ✅ Zakaj vsak HTML dokument potrebuje DOCTYPE deklaracijo - ✅ Kaj vsebuje korenski element `<html>` - ✅ Kako ta struktura pomaga brskalnikom pravilno upodabljati strani **Hitri samopreizkus**: Ali lahko z lastnimi besedami razložite, kaj pomeni "uporabljanje standardom skladnega upodabljanja"? ## Dodajanje bistvenih metapodatkov dokumenta Odsek `<head>` v HTML dokumentu vsebuje ključne informacije, ki jih brskalniki in iskalniki potrebujejo, vendar jih obiskovalci neposredno ne vidijo na strani. Predstavljajte si ga kot "zakulisne informacije", ki pomagajo, da vaša spletna stran deluje pravilno in se pravilno prikazuje na različnih napravah in platformah. Ti metapodatki brskalnikom povedo, kako prikazati vašo stran, katero kodiranje znakov uporabiti in kako ravnati z različnimi velikostmi zaslona – vse pomembno za ustvarjanje profesionalnih in dostopnih spletnih strani. ### Naloga: Dodajte glavo dokumenta Vstavite ta odsek `<head>` med uvodne in zaključne oznake `<html>`: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Podrobnejša razlaga, kaj vsak element naredi:** - **Nastavi** naslov strani, ki se pojavi na zavihkih brskalnika in v iskalnikih - **Specifikira** kodiranje znakov UTF-8 za pravilen prikaz besedila po vsem svetu - **Zagotovlja** združljivost z modernimi različicami Internet Explorerja - **Nastavi** odzivno zasnovo z usklajevanjem viewporta z širino naprave - **Nadzoruje** začetno stopnjo povečave za naraven prikaz vsebine > 🤔 **Premislite**: Kaj bi se zgodilo, če bi nastavili meta oznako viewport tako: ``? To bi prisililo stran, da je vedno 600 slikovnih pik široka, kar bi pokvarilo odzivno oblikovanje! Več o [ustrezni nastavitvi viewporta](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Gradnja telesa dokumenta Element `` vsebuje vso vidno vsebino vaše spletne strani – vse, kar bodo uporabniki videli in s čimer bodo interagirali. Medtem ko je odsek `` dal brskalniku navodila, vsebuje `` dejansko vsebino: besedilo, slike, gumbe in druge elemente, ki oblikujejo vaš uporabniški vmesnik. Dodajmo strukturo telesa in razumimo, kako HTML oznake skupaj delujejo za ustvarjanje smiselne vsebine. ### Razumevanje strukture HTML oznak HTML uporablja pari oznak za definiranje elementov. Večina oznak ima začetno oznako, npr. `

`, in končno oznako, npr. `

`, z vsebino med njima: `

Hello, world!

`. Tako ustvarijo odsek s tekstom "Hello, world!". ### Naloga: Dodajte element body Posodobite svojo HTML datoteko, da vključuje element ``: ```html Welcome to my Virtual Terrarium ``` **Kaj ta popolna struktura zagotavlja:** - **Vzpostavi** osnovno ogrodje HTML5 dokumenta - **Vključuje** bistvene metapodatke za pravilno upodabljanje v brskalniku - **Ustvari** prazno telo, pripravljeno za vašo vidno vsebino - **Sledi** najboljšim praksam sodobnega spletnega razvoja Zdaj ste pripravljeni dodati vidne elemente vašega terarija. Uporabili bomo elemente `
` kot posode za organizacijo različnih sekcij vsebine in elemente `` za prikaz slik rastlin. ### Delo s slikami in posodami za postavitev Slike so v HTML posebne, saj uporabljajo samozapiralne oznake. V nasprotju z elementi, kot so `

`, ki obkrožajo vsebino, oznaka `` vsebuje vse informacije znotraj same oznake preko atributov, kot sta `src` (pot do slikovne datoteke) in `alt` (za dostopnost). Preden dodate slike v svoj HTML, morate ustrezno organizirati datoteke projekta z ustvarjanjem mape za slike in dodajanjem grafike rastlin. **Najprej uredite svoje slike:** 1. V mapi terarij ustvarite mapo z imenom `images` 2. Prenesite slike rastlin iz [mapo z rešitvijo](../../../../3-terrarium/solution/images) (skupaj 14 slik rastlin) 3. Kopirajte vse slike rastlin v novo mapo `images` ### Naloga: Ustvarite postavitev prikaza rastlin Sedaj dodajte slike rastlin organizirane v dva stolpca med oznakama ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Korak za korakom, kaj se dogaja v tej kodi:** - **Ustvari** glavni vsebnik strani z `id="page"` za vsebino - **Vzpostavi** dva stolpca: `left-container` in `right-container` - **Organizira** 7 rastlin v levem stolpcu in 7 rastlin v desnem stolpcu - **Vsako** sliko rastline obdaja div z razredom `plant-holder` za posamezno pozicioniranje - **Uporablja** enotna imena razredov za CSS oblikovanje v naslednji lekciji - **Dodeli** edinstvene ID-je za vsako sliko za kasnejšo interakcijo z JavaScriptom - **Vsebuje** pravilne poti do slikovne mape > 🤔 **Premislite**: Opazite, da imajo vse slike trenutno enak alt tekst "plant". To ni idealno za dostopnost. Uporabniki bralnikov zaslona bi slišali "plant" ponovljeno 14-krat, ne da bi vedeli, katera rastlina je prikazana. Ali lahko zamislite boljše, natančnejše alt besedilo za vsako sliko? > 📝 **Vrste HTML elementov**: Elemente `
` imenujemo "blokovni" elementi, zavzamejo polno širino, medtem ko so elementi `` "vločeni" in zavzamejo samo potrebno širino. Kaj mislite, kaj bi se zgodilo, če bi vse te oznake `
` zamenjali z oznakami ``? ### 🔄 **Pedagoški pregled** **Razumevanje strukture**: Vzemite trenutek in pregledajte svojo HTML strukturo: - ✅ Ali lahko identificirate glavne posode v vaši postavitvi? - ✅ Ali razumete, zakaj ima vsaka slika edinstven ID? - ✅ Kako bi opisali namen divov z razredom `plant-holder`? **Vizualni pregled**: Odprite HTML datoteko v brskalniku. Morali bi videti: - Osnovni seznam slik rastlin - Slike organizirane v dveh stolpcih - Preprosto, brez oblikovanja **Zapomnite si**: Ta osnovni videz je točno tisto, kar naj bi HTML izgledal pred CSS oblikovanjem! S tem označevanjem bodo rastline prikazane na zaslonu, čeprav še ne bodo izgledale urejeno – za to bo poskrbel CSS v naslednji lekciji! Za zdaj imate trdno HTML osnovo, ki ustrezno organizira vaše vsebine in sledi najboljšim praksam za dostopnost. ## Uporaba semantičnega HTML za dostopnost Semantični HTML pomeni izbiro elementov glede na njihov pomen in namen, ne samo na videz. Ko uporabljate semantično označevanje, sporočate strukturo in pomen vaše vsebine brskalnikom, iskalnikom in pripomočkom za pomoč, kot so bralniki zaslona. ```mermaid flowchart TD A[Potrebno dodati vsebino?] --> B{Kakšen tip?} B -->|Glavni naslov| C["

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

,

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

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

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