# Terrarium Project Časť 1: Úvod do HTML ```mermaid journey title Vaša cesta učenia sa HTML section Základy Vytvoriť HTML súbor: 3: Student Pridať DOCTYPE: 4: Student Štruktúrovať dokument: 5: Student section Obsah Pridať metadata: 4: Student Zahrnúť obrázky: 5: Student Usporiadať rozloženie: 5: Student section Sémantika Použiť správne značky: 4: Student Zlepšiť prístupnosť: 5: Student Vytvoriť terárium: 5: Student ``` ![Úvod do HTML](../../../../translated_images/sk/webdev101-html.4389c2067af68e98.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) HTML, alebo HyperText Markup Language, je základom každej webovej stránky, ktorú ste kedy navštívili. Predstavte si HTML ako kostru, ktorá dáva štruktúru webovým stránkam – určuje, kam obsah patrí, ako je usporiadaný a čo každý prvok predstavuje. Zatiaľ čo CSS neskôr „oblečie“ vašu HTML stránku farbami a rozloženiami, a JavaScript ju oživí interaktivitou, HTML poskytuje základnú štruktúru, ktorá robí všetko ostatné možným. V tejto lekcii vytvoríte HTML štruktúru pre virtuálne rozhranie terária. Tento praktický projekt vás naučí základné koncepty HTML, pričom vytvoríte niečo vizuálne zaujímavé. Naučíte sa, ako organizovať obsah pomocou sémantických prvkov, pracovať s obrázkami a vytvoriť základ pre interaktívnu webovú aplikáciu. Na konci tejto lekcie budete mať funkčnú HTML stránku zobrazujúcu obrázky rastlín v usporiadaných stĺpcoch, pripravenú na štýlovanie v ďalšej lekcii. Nezáleží na tom, aký jednoduchý to na začiatku vyzerá – to je presne to, čo má HTML robiť predtým, než CSS pridá vizuálny lesk. ```mermaid mindmap root((Základy HTML)) Structure DOCTYPE Deklarácia HTML Element Hlavička Sekcia Obsah Tela Elements Tagy & Atribúty Samozatváracie Tagy Vnorene Elementy Blok vs Inline Content Textové Elementy Obrázky Kontajnery (div) Zoznamy Semantics Významné Tagy Prístupnosť Čítačky Obrazovky SEO Výhody Best Practices Správne Vnorovanie Platný Markup Popisný Alt Text Organizovaná Štruktúra ``` ## Prednáškový kvíz [Prednáškový kvíz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Pozerajte a učte sa**: Pozrite si tento užitočný video prehľad > > [![Video základov HTML](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Nastavenie projektu Pred tým, než sa pustíme do HTML kódu, nastavme si vhodné pracovné prostredie pre váš projekt terária. Vytvorenie usporiadaného systému súborov už od začiatku je dôležitý zvyk, ktorý sa vám bude hodiť počas celej vašej cesty vývojára webu. ### Úloha: Vytvorte štruktúru projektu Vytvoríte si vyhradenú zložku pre váš projekt terária a pridáte prvý HTML súbor. Tu sú dve možnosti, ktoré môžete použiť: **Možnosť 1: Použitie Visual Studio Code** 1. Otvorte Visual Studio Code 2. Kliknite na „Súbor“ → „Otvoriť zložku“ alebo použite `Ctrl+K, Ctrl+O` (Windows/Linux) alebo `Cmd+K, Cmd+O` (Mac) 3. Vytvorte novú zložku s názvom `terrarium` a vyberte ju 4. V paneli Explorer kliknite na ikonu „Nový súbor“ 5. Pomenujte svoj súbor `index.html` ![VS Code Explorer ukazujúci vytvorenie nového súboru](../../../../translated_images/sk/vs-code-index.e2986cf919471eb9.webp) **Možnosť 2: Použitie terminálových príkazov** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Čo tieto príkazy robia:** - **Vytvorí** novú adresár s názvom `terrarium` pre váš projekt - **Presunie sa** do adresára terrarium - **Vytvorí** prázdny súbor `index.html` - **Otvára** súbor vo Visual Studio Code na úpravu > 💡 **Užitočný tip**: Názov súboru `index.html` je vo webovom vývoji špeciálny. Keď niekto navštívi web, prehliadače automaticky hľadajú `index.html` ako predvolenú stránku na zobrazenie. To znamená, že URL ako `https://mysite.com/projects/` automaticky zobrazí súbor `index.html` zo zložky `projects` bez potreby zadávať názov súboru v URL. ## Pochopenie štruktúry HTML dokumentu Každý HTML dokument nasleduje konkrétnu štruktúru, ktorú prehliadače potrebujú pochopiť a správne zobraziť. Predstavte si túto štruktúru ako formálny list – má povinné prvky v určitom poradí, ktoré pomáhajú príjemcovi (v tomto prípade prehliadaču) správne spracovať obsah. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Nadpis"] G --> I["<div> Kontajnery"] G --> J["<img> Obrázky"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Začnime pridaním nevyhnutného základu, ktorý každý HTML dokument potrebuje. ### Deklarácia DOCTYPE a koreňový prvok Prvé dve riadky akéhokoľvek HTML súboru slúžia ako „úvod“ dokumentu pre prehliadač: ```html <!DOCTYPE html> <html></html> ``` **Čo tento kód robí:** - **Deklaruje** typ dokumentu ako HTML5 použitím `<!DOCTYPE html>` - **Vytvára** koreňový element `<html>`, ktorý bude obsahovať celý obsah stránky - **Zavádza** moderné webové štandardy pre správne renderovanie v prehliadači - **Zabezpečuje** konzistentné zobrazenie vo všetkých prehliadačoch a zariadeniach > 💡 **Tip pre VS Code**: Prejdite kurzorom nad ľubovoľný HTML tag vo VS Code a uvidíte užitočné informácie z MDN Web Docs, vrátane príkladov použitia a kompatibility s prehliadačmi. > 📚 **Zistite viac**: Deklarácia DOCTYPE zabraňuje prehliadačom vstúpiť do „quirks módu“, ktorý sa používal pre podporu veľmi starých webov. Moderný webový vývoj používa jednoduchú deklaráciu `<!DOCTYPE html>` na zabezpečenie [dodržiavania štandardov pri renderovaní](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagogická kontrola** **Zastavte sa a zamyslite**: Pred pokračovaním si uistite, že rozumiete: - ✅ Prečo každý HTML dokument potrebuje deklaráciu DOCTYPE - ✅ Čo obsahuje koreňový element `<html>` - ✅ Ako táto štruktúra pomáha prehliadačom správne zobrazovať stránky **Rýchly seba-test**: Dokážete vlastnými slovami vysvetliť, čo znamená „dodržiavanie štandardov pri renderovaní“? ## Pridanie nevyhnutných metaúdajov dokumentu Sekcia `<head>` HTML dokumentu obsahuje dôležité informácie, ktoré prehliadače a vyhľadávače potrebujú, ale ktoré návštevníci priamo na stránke nevidia. Predstavte si ju ako „zákulisné“ informácie, ktoré pomáhajú vašej webovej stránke fungovať správne a správne vyzerať na rôznych zariadeniach a platformách. Tieto metaúdaje hovoria prehliadačom, ako majú stránku zobraziť, aké kódovanie znakov použiť a ako sa majú správať pri rôznych veľkostiach obrazoviek – všetko nevyhnutné pre vytváranie profesionálnych a prístupných webových stránok. ### Úloha: Pridajte hlavičku dokumentu Vložte túto sekciu `<head>` medzi otváracie a zatváracie značky `<html>`: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Čo jednotlivé prvky zabezpečujú:** - **Nastavuje** názov stránky, ktorý sa zobrazuje na záložkách prehliadača a vo výsledkoch vyhľadávania - **Špecifikuje** kódovanie znakov UTF-8 pre správne zobrazenie textu po celom svete - **Zabezpečuje** kompatibilitu s modernými verziami Internet Explorera - **Konfiguruje** responzívny dizajn nastavením viewportu tak, aby zodpovedal šírke zariadenia - **Ovláda** počiatočné zväčšenie na zobrazenie obsahu v prirodzenej veľkosti > 🤔 **Zamyslite sa**: Čo by sa stalo, keby ste nastavili viewport meta tag takto: ``? Toto by nútilo stránku byť vždy širokú 600 pixelov, čím by sa pokazil responzívny dizajn! Viac o [správnej konfigurácii viewportu](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Vytvorenie tela dokumentu Element `` obsahuje všetok viditeľný obsah vašej webovej stránky – všetko, čo používatelia uvidia a s čím budú interagovať. Kým sekcia `` poskytovala browseru inštrukcie, sekcia `` obsahuje skutočný obsah: texty, obrázky, tlačidlá a iné prvky tvoriace používateľské rozhranie. Poďme pridať štruktúru tela a pochopiť, ako spolu HTML tagy vytvárajú zmysluplný obsah. ### Pochopenie štruktúry HTML tagu HTML používa párované tagy na definovanie prvkov. Väčšina tagov má otvárací tag ako `

` a zatvárací tag ako `

`, pričom medzi nimi je obsah: `

Ahoj, svet!

`. Tým sa vytvorí odsek obsahujúci text „Ahoj, svet!“. ### Úloha: Pridajte element `` Aktualizujte svoj HTML súbor tak, aby obsahoval `` element: ```html Welcome to my Virtual Terrarium ``` **Čo táto kompletná štruktúra poskytuje:** - **Zavádza** základný rámec HTML5 dokumentu - **Zahŕňa** dôležité metaúdaje pre správne renderovanie v prehliadači - **Vytvára** prázdne telo pripravené na váš viditeľný obsah - **Nasleduje** najlepšie postupy moderného webového vývoja Teraz ste pripravení pridať viditeľné prvky vášho terária. Použijeme `
` elementy ako kontajnery na organizovanie rôznych sekcií obsahu a `` prvky na zobrazenie obrázkov rastlín. ### Práca s obrázkami a rozloženiami kontajnerov Obrázky sú v HTML špeciálne, pretože používajú „samozatváracie“ tagy. Na rozdiel od prvkov ako `

`, ktoré obklopujú obsah, `` tag obsahuje všetky potrebné informácie priamo v tagu pomocou atribútov ako `src` pre cestu k obrázku a `alt` pre prístupnosť. Pred pridaním obrázkov do vášho HTML budete potrebovať správne usporiadať svoje projektové súbory vytvorením priečinka images a pridaním grafík rastlín. **Najprv pripravte obrázky:** 1. Vytvorte v priečinku terária zložku s názvom `images` 2. Stiahnite si obrázky rastlín z [riešiteľskej zložky](../../../../3-terrarium/solution/images) (14 obrázkov rastlín) 3. Skopírujte všetky obrázky rastlín do novej zložky `images` ### Úloha: Vytvorte rozloženie zobrazenia rastlín Teraz pridajte obrázky rastlín usporiadané do dvoch stĺpcov medzi značky ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Krok za krokom, čo tento kód robí:** - **Vytvára** hlavný kontajner stránky s `id="page"` na držanie všetkého obsahu - **Zavádza** dva stĺpcové kontajnery: `left-container` a `right-container` - **Usporiadava** 7 rastlín v ľavom stĺpci a 7 rastlín v pravom stĺpci - **Obklopuje** každý obrázok rastliny do `plant-holder` divu pre individuálne umiestnenie - **Používa** jednotné názvy tried pre CSS štýlovanie v ďalšej lekcii - **Priraďuje** jedinečné ID ku každému obrázku rastliny pre neskoršiu interakciu s JavaScriptom - **Zahŕňa** správne cesty k súborom smerujúcim do priečinka s obrázkami > 🤔 **Zvážte toto**: Všimnite si, že všetky obrázky majú momentálne rovnaký alt text „plant“. To nie je ideálne pre prístupnosť. Používatelia čítačiek obrazovky by počuli „plant“ opakované 14-krát bez vedomia, o akú rastlinu ide na každom obrázku. Môžete vymyslieť lepší, opisnejší alt text pre každý obrázok? > 📝 **Typy HTML prvkov**: `
` elementy sú „block-level“ a zaberajú celú šírku, zatiaľ čo `` elementy sú „inline“ a zaberajú len potrebnú šírku. Čo myslíte, čo by sa stalo, keby ste všetky tieto `
` tagy nahradili za `` tagy? ### 🔄 **Pedagogická kontrola** **Pochopenie štruktúry**: Venujte chvíľu kontrole vašej HTML štruktúry: - ✅ Dokážete identifikovať hlavné kontajnery vo vašom rozložení? - ✅ Rozumiete, prečo má každý obrázok jedinečné ID? - ✅ Ako by ste opísali účel divov `plant-holder`? **Vizuálna kontrola**: Otvorte váš HTML súbor v prehliadači. Mali by ste vidieť: - Základný zoznam obrázkov rastlín - Obrázky usporiadané do dvoch stĺpcov - Jednoduché, nestajlované rozloženie **Pamätajte**: Tento jednoduchý vzhľad je presne to, ako má HTML vyzerať pred štýlovaním CSS! S týmto markupom sa rastliny zobrazia na obrazovke, hoci ešte nebudú vyzerať upravene – na to je v ďalšej lekcii CSS! Zatiaľ máte pevný HTML základ, ktorý správne organizuje váš obsah a nasleduje najlepšie prístupy k prístupnosti. ## Použitie sémantického HTML pre prístupnosť Sémantické HTML znamená vyberať HTML prvky na základe ich významu a účelu, nie len vzhľadu. Keď používate sémantické značenie, komunikujete štruktúru a význam vášho obsahu pre prehliadače, vyhľadávače a asistenčné technológie ako čítačky obrazovky. ```mermaid flowchart TD A[Potrebujete pridať obsah?] --> B{Aký typ?} B -->|Hlavný nadpis| C["

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

,

, atď."] B -->|Odstavec| E["

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

    ,
      "] B -->|Navigácia| G["