# Terrarium Project Část 1: Úvod do HTML ```mermaid journey title Vaše cesta za učením HTML section Základy Vytvořit HTML soubor: 3: Student Přidat DOCTYPE: 4: Student Strukturovat dokument: 5: Student section Obsah Přidat metadata: 4: Student Zahrnout obrázky: 5: Student Uspořádat rozložení: 5: Student section Sémantika Použít správné značky: 4: Student Zlepšit přístupnost: 5: Student Postavit terárium: 5: Student ``` ![Úvod do HTML](../../../../translated_images/cs/webdev101-html.4389c2067af68e98.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) HTML, neboli HyperText Markup Language, je základem každé webové stránky, kterou jste kdy navštívili. Představte si HTML jako kostru, která dodává webovým stránkám strukturu – definuje, kam obsah patří, jak je uspořádán a co který prvek představuje. Zatímco CSS později „oblékne“ váš HTML do barev a rozvržení a JavaScript ho oživí interaktivitou, HTML poskytuje základní strukturu, díky níž je vše ostatní možné. V této lekci vytvoříte HTML strukturu pro rozhraní virtuálního terária. Tento praktický projekt vás naučí základní koncepty HTML při tvorbě něčeho vizuálně zajímavého. Naučíte se organizovat obsah pomocí sémantických prvků, pracovat s obrázky a vytvořit základ pro interaktivní webovou aplikaci. Na konci této lekce budete mít funkční HTML stránku zobrazující obrázky rostlin ve sloupcích, připravenou pro stylování v další lekci. Nebojte se, pokud to na začátku vypadá základně – právě tak by měl HTML vypadat před tím, než k němu CSS přidá vizuální úpravy. ```mermaid mindmap root((Základy HTML)) Structure DOCTYPE Deklarace HTML Prvek Sekce Hlavy Obsah Těla Elements Tagy & Atributy Samozavírající se Tagy Vnořené Prvky Blokové vs Řádkové Content Textové Prvky Obrázky Kontajnery (div) Seznamy Semantics Významné Tagy Přístupnost Čtečky Obrazovky Výhody SEO Best Practices Správné Vnoření Platný Kód Popisný Alt Text Organizovaná Struktura ``` ## Přednáškový kvíz [Přednáškový kvíz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Sledujte a učte se**: Podívejte se na tento užitečný video přehled > > [![HTML Základy Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Nastavení vašeho projektu Než se pustíme do HTML kódu, nastavme si správné pracovní prostředí pro váš projekt terária. Vytvoření uspořádané struktury souborů hned od začátku je klíčový návyk, který vám bude po celou dobu vývoje webu velmi užitečný. ### Úkol: Vytvořte strukturu projektu Vytvoříte dedikovanou složku pro váš teráriový projekt a přidáte první HTML soubor. Zde jsou dva přístupy, které můžete použít: **Možnost 1: Použití Visual Studio Code** 1. Otevřete Visual Studio Code 2. Klikněte na "Soubor" → "Otevřít složku" nebo použijte `Ctrl+K, Ctrl+O` (Windows/Linux) nebo `Cmd+K, Cmd+O` (Mac) 3. Vytvořte novou složku s názvem `terrarium` a vyberte ji 4. V panelu Průzkumník klikněte na ikonu „Nový soubor“ 5. Pojmenujte svůj soubor `index.html` ![Průzkumník VS Code ukazující vytvoření nového souboru](../../../../translated_images/cs/vs-code-index.e2986cf919471eb9.webp) **Možnost 2: Použití příkazového řádku** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Toto tyto příkazy provedou:** - **Vytvoří** novou složku s názvem `terrarium` pro váš projekt - **Přejde** do složky terrarium - **Vytvoří** prázdný soubor `index.html` - **Otevře** soubor ve Visual Studio Code k úpravám > 💡 **Profesionální tip**: Název souboru `index.html` je ve webovém vývoji speciální. Když někdo navštíví web, prohlížeče automaticky hledají `index.html` jako výchozí stránku k zobrazení. To znamená, že URL jako `https://mysite.com/projects/` automaticky zobrazí soubor `index.html` ze složky `projects`, aniž by bylo třeba specifikovat název souboru v URL. ## Pochopení struktury HTML dokumentu Každý HTML dokument má specifickou strukturu, kterou prohlížeče potřebují porozumět a správně zobrazit. Strukturu si představte jako formální dopis – má povinné prvky v určitém pořadí, které pomáhají příjemci (v tomto případě prohlížeči) zpracovat obsah správně. ```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> Kontejnery"] G --> J["<img> Obrázky"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Začneme přidáním základních prvků, které každý HTML dokument potřebuje. ### Deklarace DOCTYPE a kořenový prvek První dva řádky jakéhokoli HTML souboru slouží jako „úvod“ dokumentu pro prohlížeč: ```html <!DOCTYPE html> <html></html> ``` **Co tento kód znamená:** - **Deklaruje** typ dokumentu jako HTML5 pomocí `<!DOCTYPE html>` - **Vytváří** kořenový element `<html>`, který bude obsahovat celý obsah stránky - **Nastavuje** moderní webové standardy pro správné vykreslení v prohlížečích - **Zajišťuje** konzistentní zobrazení napříč různými prohlížeči a zařízeními > 💡 **Tip pro VS Code**: Přejeďte myší nad jakýmkoliv HTML tagem ve VS Code, abyste viděli užitečné informace z MDN Web Docs, včetně příkladů použití a kompatibility s prohlížeči. > 📚 **Více informací**: Deklarace DOCTYPE zabraňuje prohlížečům vstoupit do „quirks módu“, který se používal pro podporu velmi starých webů. Moderní webový vývoj používá jednoduchou deklaraci `<!DOCTYPE html>`, aby zajistil [standardy vyhovující vykreslení](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagogická kontrola** **Zastavte se a zamyslete se**: Než budete pokračovat, ujistěte se, že rozumíte: - ✅ Proč každý HTML dokument potřebuje deklaraci DOCTYPE - ✅ Co obsahuje kořenový element `<html>` - ✅ Jak tato struktura pomáhá prohlížečům správně vykreslit stránky **Rychlý test**: Dokážete vlastními slovy vysvětlit, co znamená „standardy vyhovující vykreslení“? ## Přidání základních metadat dokumentu Sekce `<head>` HTML dokumentu obsahuje důležité informace, které prohlížeče a vyhledávače potřebují, ale návštěvníci je přímo nevidí na stránce. Dá se to přirovnat k „zákulisním“ informacím, které pomáhají vaší webové stránce správně fungovat a zobrazovat se správně na různých zařízeních a platformách. Tato metadata říkají prohlížečům, jak stránku zobrazit, jaké znakovou sadu použít a jak se vypořádat s různými velikostmi obrazovky – vše nezbytné pro vytváření profesionálních, přístupných webových stránek. ### Úkol: Přidejte hlavičku dokumentu Vložte tuto sekci `<head>` mezi otevírací a zavírací tag `<html>`: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Co každý prvek zajišťuje:** - **Nastavuje** název stránky, který se zobrazuje v záložkách prohlížeče a ve výsledcích vyhledávání - **Specifikuje** kódování UTF-8 pro správné zobrazení textu po celém světě - **Zajišťuje** kompatibilitu s moderními verzemi Internet Exploreru - **Nakonfiguruje** responzivní design nastavením viewportu na šířku zařízení - **Řídí** počáteční úroveň přiblížení pro zobrazení obsahu v přirozené velikosti > 🤔 **Zamyslete se**: Co by se stalo, kdybyste nastavili viewport meta tag takto: ``? Stránka by byla vždy široká 600 pixelů, čímž by se rozbitý responzivní design! Více o [správném nastavení viewportu](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Vytvoření těla dokumentu Element `` obsahuje veškerý viditelný obsah vaší webové stránky – vše, co uživatelé uvidí a s čím budou interagovat. Zatímco sekce `` poskytuje prohlížeči instrukce, sekce `` obsahuje skutečný obsah: text, obrázky, tlačítka a další prvky, které tvoří uživatelské rozhraní. Přidejme strukturu těla a pochopme, jak HTML tagy spolupracují při tvorbě smysluplného obsahu. ### Porozumění struktuře HTML tagů HTML používá párové tagy pro definici prvků. Většina tagů má otevírací tag jako `

` a uzavírací tag jako `

`, mezi nimiž je obsah: `

Ahoj, světe!

`. Tím vznikne odstavec obsahující text „Ahoj, světe!“. ### Úkol: Přidejte prvek body Aktualizujte svůj HTML soubor tak, aby zahrnoval element ``: ```html Welcome to my Virtual Terrarium ``` **Co tato kompletní struktura zajišťuje:** - **Zajišťuje** základní rámec HTML5 dokumentu - **Obsahuje** důležitá metadata pro správné vykreslení v prohlížečích - **Vytváří** prázdné tělo připravené na váš viditelný obsah - **Následuje** nejlepší moderní postupy webového vývoje Nyní jste připraveni přidat viditelné prvky vašeho terária. Použijeme prvky `
` jako kontejnery k organizaci různých částí obsahu a prvky `` k zobrazení obrázků rostlin. ### Práce s obrázky a kontejnery rozvržení Obrázky jsou v HTML speciální tím, že používají „samo-uzavírací“ tagy. Na rozdíl od prvků jako `

`, které obklopují obsah, tag `` obsahuje veškeré potřebné informace přímo v tagu pomocí atributů jako `src` pro cestu k obrázku a `alt` pro přístupnost. Než přidáte obrázky do vašeho HTML, musíte správně zorganizovat své projektové soubory vytvořením složky images a přidáním rastrových obrázků rostlin. **Nejprve připravte obrázky:** 1. Vytvořte složku `images` ve vaší složce projektu terrarium 2. Stáhněte obrázky rostlin z [adresáře řešení](../../../../3-terrarium/solution/images) (celkem 14 obrázků) 3. Zkopírujte všechny obrázky rostlin do nové složky `images` ### Úkol: Vytvořte rozvržení pro zobrazení rostlin Nyní přidejte obrázky rostlin uspořádané ve dvou sloupcích mezi vaše značky ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Krok za krokem, co se v tomto kódu děje:** - **Vytváří** hlavní kontejner stránky s `id="page"` pro uchovávání veškerého obsahu - **Vytváří** dva sloupcové kontejnery: `left-container` a `right-container` - **Uspořádává** 7 rostlin v levém a 7 rostlin v pravém sloupci - **Obaluje** každý obrázek rostliny do divu s třídou `plant-holder` pro individuální umístění - **Používá** konzistentní názvy tříd pro stylování v CSS v další lekci - **Přiřazuje** jedinečná ID ke každému obrázku rostliny pro pozdější interakci pomocí JavaScriptu - **Obsahuje** správné cesty k souborům ukazující do složky images > 🤔 **Zvažte toto**: Všimněte si, že všechny obrázky aktuálně mají stejný alternativní text „plant“. To není ideální pro přístupnost. Uživatelé se čtečkami obrazovky slyší „plant“ opakovaně 14krát, aniž by věděli, o kterou konkrétní rostlinu jde. Dokážete vymyslet lepší, výstižnější alt text pro každý obrázek? > 📝 **Typy HTML prvků**: `
` jsou blokové prvky a zabírají celou šířku, zatímco `` jsou řádkové a zabírají jen nezbytnou šířku. Co myslíte, co by se stalo, kdybyste všechny tyto tagy `
` nahradili tagy ``? ### 🔄 **Pedagogická kontrola** **Porozumění struktuře**: Věnujte chvíli kontrole vaší HTML struktury: - ✅ Dokážete identifikovat hlavní kontejnery vašeho rozvržení? - ✅ Rozumíte, proč má každý obrázek jedinečné ID? - ✅ Jak byste popsali účel divů s třídou `plant-holder`? **Vizuální kontrola**: Otevřete svůj HTML soubor v prohlížeči. Měli byste vidět: - Základní seznam obrázků rostlin - Obrázky uspořádané ve dvou sloupcích - Jednoduché, nestylované rozvržení **Pamatujte**: Tento jednoduchý vzhled je přesně to, jak by měl HTML vypadat před stylováním CSS! S tímto markupem se rostliny zobrazí na obrazovce, i když zatím nebudou působit upraveně – to je úkol CSS v další lekci! Prozatím máte pevný HTML základ, který správně organizuje váš obsah a dodržuje nejlepší praktiky přístupnosti. ## Použití sémantického HTML pro přístupnost Sémantické HTML znamená vybírat HTML prvky na základě jejich významu a účelu, nejen vzhledu. Když používáte sémantické značkování, komunikujete strukturu a význam obsahu prohlížečům, vyhledávačům a asistenčním technologiím, jako jsou čtečky obrazovky. ```mermaid flowchart TD A[Potřebujete přidat obsah?] --> B{Jaký typ?} B -->|Hlavní nadpis| C["

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

,

, atd."] B -->|Odstavec| E["

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

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