21 KiB

Raw Blame History Unescape Escape

Projekt Terárium Časť 1: Úvod do HTML

Sketchnote od Tomomi Imura

HTML, alebo HyperText Markup Language, je základom každého webu, ktorý ste kedy navštívili. Predstavte si HTML ako kostru, ktorá dáva štruktúru webovým stránkam – definuje, kde sa nachádza obsah, ako je organizovaný a čo každý jeho prvok predstavuje. Zatiaľ čo CSS neskôr "oblečie" váš HTML farbami a rozložením a JavaScript ho oživí interaktivitou, HTML poskytuje základnú štruktúru, ktorá umožňuje všetko ostatné.

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 tvorbe niečoho vizuálne pútavého. 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 organizovaných stĺpcoch, pripravenú na štýlovanie v ďalšej lekcii. Nebojte sa, ak to na začiatku vyzerá jednoducho – presne tak by mal HTML vyzerať predtým, než CSS pridá vizuálny lesk.

Kvíz pred prednáškou

📺 Pozrite si a naučte sa: Pozrite si tento užitočný prehľad vo videu

Nastavenie vášho projektu

Predtým, než sa pustíme do kódu HTML, nastavíme si správne pracovné prostredie pre váš projekt terária. Vytvorenie organizovanej štruktúry súborov od začiatku je dôležitý zvyk, ktorý vám bude slúžiť počas celej vašej cesty webového vývoja.

Úloha: Vytvorte štruktúru projektu

Vytvoríte vyhradený priečinok pre váš projekt terária a pridáte svoj prvý HTML súbor. Tu sú dva prístupy, ktoré môžete použiť:

Možnosť 1: Použitie Visual Studio Code

Otvorte Visual Studio Code
Kliknite na "File" → "Open Folder" alebo použite Ctrl+K, Ctrl+O (Windows/Linux) alebo Cmd+K, Cmd+O (Mac)
Vytvorte nový priečinok s názvom terrarium a vyberte ho
V paneli Explorer kliknite na ikonu "New File"
Pomenujte svoj súbor index.html

Možnosť 2: Použitie príkazového riadku

mkdir terrarium
cd terrarium
touch index.html
code index.html

Čo tieto príkazy vykonávajú:

Vytvárajú nový adresár s názvom terrarium pre váš projekt
Presúvajú sa do adresára terária
Vytvárajú prázdny súbor index.html
Otvárajú súbor vo Visual Studio Code na úpravy

💡 Tip: Názov súboru index.html je v webovom vývoji špeciálny. Keď niekto navštívi webovú stránku, 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 z priečinka projects bez potreby špecifikovať názov súboru v URL.

Porozumenie štruktúre HTML dokumentu

Každý HTML dokument nasleduje špecifickú štruktúru, ktorú prehliadače potrebujú na správne zobrazenie. Predstavte si túto štruktúru ako formálny list – má povinné prvky v určitom poradí, ktoré pomáhajú prijímateľovi (v tomto prípade prehliadaču) správne spracovať obsah.

Začnime pridaním základného základu, ktorý potrebuje každý HTML dokument.

Deklarácia DOCTYPE a koreňový prvok

Prvé dva riadky akéhokoľvek HTML súboru slúžia ako "úvod" dokumentu pre prehliadač:

<!DOCTYPE html>
<html></html>

Čo tento kód robí:

Deklaruje typ dokumentu ako HTML5 pomocou <!DOCTYPE html>
Vytvára koreňový prvok <html>, ktorý bude obsahovať všetok obsah stránky
Zavádza moderné webové štandardy pre správne zobrazenie prehliadačom
Zabezpečuje konzistentné zobrazenie naprieč rôznymi prehliadačmi a zariadeniami

💡 Tip pre VS Code: Prejdite kurzorom nad akýkoľvek HTML tag vo VS Code, aby ste videli užitočné informácie z MDN Web Docs, vrátane príkladov použitia a detailov o kompatibilite s prehliadačmi.

📚 Dozviete sa viac: Deklarácia DOCTYPE zabraňuje prehliadačom vstúpiť do "quirks mode", ktorý sa používal na podporu veľmi starých webových stránok. Moderný webový vývoj používa jednoduchú deklaráciu <!DOCTYPE html> na zabezpečenie štandardného zobrazenia.

Pridanie základných metadát dokumentu

Sekcia <head> HTML dokumentu obsahuje kľúčové informácie, ktoré prehliadače a vyhľadávače potrebujú, ale návštevníci ich priamo na stránke nevidia. Predstavte si to ako "zákulisné" informácie, ktoré pomáhajú vašej webovej stránke správne fungovať a zobrazovať sa na rôznych zariadeniach a platformách.

Tieto metadáta hovoria prehliadačom, ako zobraziť vašu stránku, aké kódovanie znakov použiť a ako sa vysporiadať s rôznymi veľkosťami obrazovky – všetko je nevyhnutné pre vytvorenie 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 tagy <html>:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

Rozbor toho, čo každý prvok vykonáva:

Nastavuje názov stránky, ktorý sa zobrazuje na kartách prehliadača a vo výsledkoch vyhľadávania
Špecifikuje kódovanie znakov UTF-8 pre správne zobrazenie textu na celom svete
Zabezpečuje kompatibilitu s modernými verziami Internet Explorera
Konfiguruje responzívny dizajn nastavením viewportu na zhodu so šírkou zariadenia
Riadi počiatočnú úroveň priblíženia na zobrazenie obsahu v prirodzenej veľkosti

🤔 Zamyslite sa nad tým: Čo by sa stalo, keby ste nastavili meta tag viewport takto: <meta name="viewport" content="width=600">? To by prinútilo stránku, aby mala vždy šírku 600 pixelov, čo by narušilo responzívny dizajn! Dozviete sa viac o správnej konfigurácii viewportu.

Vytvorenie tela dokumentu

Prvok <body> obsahuje všetok viditeľný obsah vašej webovej stránky – všetko, čo používatelia uvidia a s čím budú interagovať. Zatiaľ čo sekcia <head> poskytla pokyny prehliadaču, sekcia <body> obsahuje skutočný obsah: text, obrázky, tlačidlá a ďalšie prvky, ktoré tvoria vaše užívateľské rozhranie.

Pridajme štruktúru tela a pochopme, ako HTML tagy spolupracujú na vytvorení zmysluplného obsahu.

Porozumenie štruktúre HTML tagov

HTML používa párové tagy na definovanie prvkov. Väčšina tagov má otvárací tag ako <p> a zatvárací tag ako </p>, s obsahom medzi nimi: <p>Ahoj, svet!</p>. Tým sa vytvorí odsek obsahujúci text "Ahoj, svet!".

Úloha: Pridajte prvok tela

Aktualizujte svoj HTML súbor tak, aby obsahoval prvok <body>:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

Čo poskytuje táto kompletná štruktúra:

Zavádza základný rámec HTML5 dokumentu
Zahŕňa základné metadáta pre správne zobrazenie prehliadačom
Vytvára prázdne telo pripravené na váš viditeľný obsah
Nasleduje moderné najlepšie praktiky webového vývoja

Teraz ste pripravení pridať viditeľné prvky vášho terária. Použijeme prvky <div> ako kontajnery na organizáciu rôznych sekcií obsahu a prvky <img> na zobrazenie obrázkov rastlín.

Práca s obrázkami a kontajnermi rozloženia

Obrázky sú v HTML špeciálne, pretože používajú "samozatváracie" tagy. Na rozdiel od prvkov ako <p></p>, ktoré obklopujú obsah, tag <img> obsahuje všetky potrebné informácie v rámci samotného tagu pomocou atribútov ako src pre cestu k súboru obrázka a alt pre prístupnosť.

Pred pridaním obrázkov do vášho HTML budete musieť správne zorganizovať súbory projektu vytvorením priečinka na obrázky a pridaním grafiky rastlín.

Najskôr nastavte svoje obrázky:

Vytvorte priečinok s názvom images vo vašom priečinku projektu terária
Stiahnite si obrázky rastlín z riešiteľského priečinka (celkom 14 obrázkov rastlín)
Skopírujte všetky obrázky rastlín do vášho nového priečinka images

Úloha: Vytvorte rozloženie zobrazenia rastlín

Teraz pridajte obrázky rastlín organizované v dvoch stĺpcoch medzi vaše tagy <body></body>:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.sk.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.sk.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.sk.png" />
		</div>
	</div>
</div>

Krok za krokom, čo sa deje v tomto kóde:

Vytvára hlavný kontajner stránky s id="page" na držanie všetkého obsahu
Zavádza dva kontajnery stĺpcov: left-container a right-container
Organizuje 7 rastlín v ľavom stĺpci a 7 rastlín v pravom stĺpci
Obklopuje každý obrázok rastliny v div plant-holder pre individuálne umiestnenie
Používa konzistentné názvy tried pre štýlovanie pomocou CSS v ďalšej lekcii
Priraďuje jedinečné ID každému obrázku rastliny pre interakciu s JavaScriptom neskôr
Zahŕňa správne cesty k súborom smerujúce do priečinka s obrázkami

🤔 Zamyslite sa nad tým: Všimnite si, že všetky obrázky majú momentálne rovnaký alt text "rastlina". To nie je ideálne pre prístupnosť. Používatelia čítačiek obrazovky by počuli "rastlina" opakovane 14-krát bez toho, aby vedeli, akú konkrétnu rastlinu každý obrázok zobrazuje. Môžete vymyslieť lepší, opisnejší alt text pre každý obrázok?

📝 Typy HTML prvkov: Prvky <div> sú "blokové" a zaberajú celú šírku, zatiaľ čo prvky <span> sú "riadkové" a zaberajú len potrebnú šírku. Čo si myslíte, že by sa stalo, keby ste všetky tieto tagy <div> zmenili na tagy <span>?

S týmto pridaným označením sa rastliny zobrazia na obrazovke, aj keď zatiaľ nebudú vyzerať upravene – na to je určené CSS v ďalšej lekcii! Zatiaľ máte pevný HTML základ, ktorý správne organizuje váš obsah a dodržiava najlepšie praktiky prístupnosti.

Používanie sémantického HTML pre prístupnosť

Sémantické HTML znamená výber HTML prvkov na základe ich významu a účelu, nielen ich vzhľadu. Keď používate sémantické označenie, komunikujete štruktúru a význam vášho obsahu prehliadačom, vyhľadávačom a asistenčným technológiám, ako sú čítačky obrazovky.

Tento prístup robí vaše webové stránky prístupnejšími pre používateľov s postihnutím a pomáha vyhľadávačom lepšie pochopiť váš obsah. Je to základný princíp moderného webového vývoja, ktorý vytvára lepšie skúsenosti pre všetkých.

Pridanie sémantického názvu stránky

Pridajme správny nadpis na stránku terária. Vložte tento riadok hneď po otváracom tagu <body>:

<h1>My Terrarium</h1>

Prečo záleží na sémantickom označení:

Pomáha čítačkám obrazovky navigovať a pochopiť štruktúru stránky
Zlepšuje optimalizáciu pre vyhľadávače (SEO) tým, že objasňuje hierarchiu obsahu
Zvyšuje prístupnosť pre používateľov so zrakovým postihnutím alebo kognitívnymi rozdielmi
Vytvára lepšie užívateľské skúsenosti na všetkých zariadeniach a platformách
Nasleduje webové štandardy a najlepšie praktiky pre profesionálny vývoj

Príklady sémantických vs. nesémantických volieb:

Účel	✅ Sémantická voľba	❌ Nesémantická voľba
Hlavný nadpis	`<h1>Názov</h1>`	`<div class="big-text">Názov</div>`
Navigácia	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
Tlačidlo	`<button>Klikni na mňa</button>`	`<span onclick="...">Klikni na mňa</span>`
Obsah článku	`<article><p></p></article>`	`<div class="content"><div></div></div>`

🎥 Pozrite si to v akcii: Pozrite si ako čítačky obrazovky interagujú s webovými stránkami, aby ste pochopili, prečo je sémantické označenie kľúčové pre prístupnosť. Všimnite si, ako správna štruktúra HTML pomáha používateľom efektívne navigovať.

Vytvorenie kontajnera terária

Teraz pridajme HTML štruktúru samotného terária – skleneného kontajnera, kde budú nakoniec umiestnené rastliny. Táto sekcia demonštruje dôležitý koncept: HTML poskytuje štruktúru, ale bez štýlovania pomocou CSS tieto prvky zatiaľ nebudú viditeľné.

Označenie terária používa popisné názvy tried, ktoré uľahčia intuitívne a udržateľné štýlovanie pomocou CSS v ďalšej lekcii.

Úloha: Pridajte štruktúru terária

Vložte toto označenie nad posledný tag </div> (pred zatváracím tagom kontajnera stránky):

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

Porozumenie tejto štruktúre terária:

Vytvára hlavný kontajner terária s jedinečným ID na štýlovanie
Definuje samostatné prvky pre každú vizuálnu súčasť (vrch, steny, zem, spodok)
Zahŕňa vnorené prvky pre efekty odrazu skla (lesklé prvky)
**Použí Výzva: Vytvorte semantickú HTML sekciu, ktorá obsahuje hlavný nadpis "Sprievodca starostlivosťou o rastliny", tri podsekcie s nadpismi "Polievanie", "Požiadavky na svetlo" a "Starostlivosť o pôdu", pričom každá obsahuje odsek informácií o starostlivosti o rastliny. Použite správne semantické HTML značky ako <section>, <h2>, <h3> a <p> na správne štruktúrovanie obsahu.

Viac informácií o agent mode nájdete tu.

Preskúmajte výzvu histórie HTML

Učenie sa o vývoji webu

HTML sa výrazne vyvinulo od čias, keď Tim Berners-Lee vytvoril prvý webový prehliadač v CERN v roku 1990. Niektoré staršie značky ako <marquee> sú teraz zastarané, pretože nefungujú dobre s modernými štandardmi prístupnosti a princípmi responzívneho dizajnu.

Vyskúšajte tento experiment:

Dočasne obklopte svoj nadpis <h1> značkou <marquee>: <marquee><h1>Moje terárium</h1></marquee>
Otvorte svoju stránku v prehliadači a pozorujte efekt posúvania
Zamyslite sa nad tým, prečo bola táto značka zastaraná (nápoveda: myslite na používateľskú skúsenosť a prístupnosť)
Odstráňte značku <marquee> a vráťte sa k semantickému označeniu

Otázky na zamyslenie:

Ako by mohol posúvajúci sa nadpis ovplyvniť používateľov s vizuálnym postihnutím alebo citlivosťou na pohyb?
Aké moderné techniky CSS by mohli dosiahnuť podobné vizuálne efekty prístupnejším spôsobom?
Prečo je dôležité používať aktuálne webové štandardy namiesto zastaraných prvkov?

Preskúmajte viac o zastaraných a neaktuálnych HTML prvkoch, aby ste pochopili, ako sa webové štandardy vyvíjajú na zlepšenie používateľskej skúsenosti.

Kvíz po prednáške

Prehľad a samostatné štúdium

Prehĺbte svoje znalosti HTML

HTML je základom webu už viac ako 30 rokov, vyvíjajúc sa z jednoduchého jazyka na označovanie dokumentov na sofistikovanú platformu na tvorbu interaktívnych aplikácií. Pochopenie tohto vývoja vám pomôže oceniť moderné webové štandardy a robiť lepšie rozhodnutia pri vývoji.

Odporúčané študijné cesty:

História a vývoj HTML
- Preskúmajte časovú os od HTML 1.0 po HTML5
- Zistite, prečo boli niektoré značky zastarané (prístupnosť, priateľskosť k mobilným zariadeniam, udržateľnosť)
- Preskúmajte nové funkcie HTML a návrhy
Hlbší pohľad na semantické HTML
- Študujte kompletný zoznam semantických prvkov HTML5
- Precvičte si identifikáciu, kedy použiť <article>, <section>, <aside> a <main>
- Naučte sa o atribútoch ARIA na zlepšenie prístupnosti
Moderný webový vývoj
- Preskúmajte tvorbu responzívnych webových stránok na Microsoft Learn
- Pochopte, ako HTML integruje CSS a JavaScript
- Naučte sa o najlepších praktikách webového výkonu a SEO