Kapitola 12.2**: Tvorba webových stránek a aplikací
Co se naučíš: Pochopíš základy tvorby webových stránek pomocí HTML a CSS. Naučíš se rozdíl mezi frontendem a backendem a vytvoříš jednoduchou webovou stránku.
1. Jak funguje web?
Když navštívíš webovou stránku, tvůj prohlížeč (Chrome, Firefox...) pošle požadavek na server. Server odpoví soubory (HTML, CSS, JavaScript), které prohlížeč zobrazí.
2. Frontend vs Backend
Frontend
Backend
To, co uživatel vidí
To, co běží na serveru
HTML, CSS, JavaScript
Python, PHP, Node.js, databáze
Design, interakce, animace
Logika, data, autentizace
3. HTML – Struktura stránky
HTML (HyperText Markup Language) definuje strukturu webové stránky pomocí značek (tagů):
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Moje první stránka</title>
</head>
<body>
<h1>Vítej na mé stránce!</h1>
<p>Toto je můj první odstavec.</p>
<img src="obrazek.jpg" alt="Popis obrázku">
<a href="https://google.com">Odkaz na Google</a>
</body>
</html>
Nejdůležitější HTML značky
<h1> - <h6> – Nadpisy (h1 největší, h6 nejmenší)
<p> – Odstavec
<a href="..."> – Odkaz
<img src="..."> – Obrázek
<ul>, <ol>, <li> – Seznamy
<div> – Kontejner pro obsah
<table> – Tabulka
4. CSS – Vzhled stránky
CSS (Cascading Style Sheets) definuje, jak stránka vypadá:
/* Styl pro nadpis */
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
/* Styl pro odstavce */
p {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
/* Styl pro třídu */
.zvyrazneny {
background-color: yellow;
padding: 10px;
}
5. Responzivní design
Stránka by měla vypadat dobře na všech zařízeních (mobil, tablet, PC). K tomu slouží:
Media queries: Různé styly pro různé šířky obrazovky.
Flexbox/Grid: Moderní CSS layouty.
Bootstrap: CSS framework s hotovými komponenty.
Datové struktury - organizace dat v paměti
6. Nástroje pro tvorbu webu
VS Code: Editor kódu (zdarma, populární).
CodePen/JSFiddle: Online editory pro zkoušení kódu.
Canva: Tvorba grafiky pro web.
Wix/WordPress: WYSIWYG editory (bez kódu).
Stack a Queue - zásobník a fronta
7. Od návrhu k publikaci
Proces tvorby webu má několik kroků:
Návrh: Wireframe a mockup (můžeš použít Canvu nebo Figmu).
Kódování: HTML pro strukturu, CSS pro vzhled.
Testování: Kontrola na různých zařízeních a prohlížečích.
Publikace: Nahrání na hosting (GitHub Pages je zdarma!).
Stromy a grafy - hierarchické a síťové struktury
** Úkoly pro maturitní obory
HTML – První stránka: Vytvoř jednoduchou HTML stránku o sobě. Musí obsahovat: nadpis, 2 odstavce, obrázek, odkaz, seznam zájmů. Otevři v prohlížeči.
CSS – Stylování: Přidej k předchozí stránce CSS soubor. Změň barvy, fonty, velikosti, přidej pozadí. Použij třídy pro různé styly.
Portfolio: Vytvoř jednoduchou portfolio stránku (3 sekce): O mně, Moje projekty, Kontakt. Použij HTML + CSS.
Canva → Web: Navrhni v Canvě vzhled webové stránky (mockup). Pak zkus tento design implementovat v HTML/CSS.
