Seminář webový design · oktáva · úterý 22. 9. 2026 · samostatná práce

Tvoje první stránka na internetu

Dnes pracujete sami. Za dvě hodiny máte na internetu stránku „O mně“, kterou napsala AI výhradně z vašich pravdivých podkladů. Nic se neinstaluje, stačí prohlížeč.

Odevzdání do Učebny do konce 2. hodiny: odkaz na stránku (…github.io/…) a odkaz na repozitář. Hodnotí se: stránka běží, funguje na mobilu, neobsahuje nic vymyšleného a texty doplněné AI jsou označené.

1Účet na GitHubu 10 min

Jdi na github.com/signup a založ si účet. Uživatelské jméno bude součástí adresy tvé stránky – vyber rozumné (třeba jan-novak-sg).
Potvrď e-mail.
Účet už máš? Přeskoč.

2Podklady: pět pravdivých faktů 10 min

Do poznámek si napiš pět pravdivých věcí o sobě, které klidně může vidět kdokoli: sport, zájmy, co tě baví ve škole, čeho chceš dosáhnout, oblíbená kniha nebo hudba.

Nepiš: adresu, telefon, datum narození, rodné číslo, fotky jiných lidí. Stránka bude veřejná.

Tohle jsou tvoje podklady. Na webu pro klienta platí totéž: AI smí použít jen fakta, která dodal klient.

3Zadání pro AI 15 min

Otevři claude.ai, chatgpt.com nebo gemini.google.com a vlož tohle zadání. Místo hranatých závorek doplň svoje fakta.

Vytvoř jednu webovou stránku „O mně“ jako jediný soubor index.html (HTML a CSS v jednom souboru, bez JavaScriptu, bez externích knihoven a fontů).

Pravidla:
- Použij POUZE tato fakta, nic dalšího o mně nevymýšlej:
  1. [fakt]
  2. [fakt]
  3. [fakt]
  4. [fakt]
  5. [fakt]
- Spojovací texty (nadpisy, úvodní věta) smíš napsat, ale každý takový text označ HTML komentářem <!-- GENEROVANÝ TEXT -->.
- Stránka musí dobře vypadat na mobilu i na počítači.
- Česky, jednoduchý moderní vzhled, jedna hlavní barva.
- Nepoužívej žádné obrázky ani fotky.

Vrať jen celý obsah souboru index.html.

AI ti něco doplnila, co není pravda? Napiš jí to a nech opravit. Ty ručíš za obsah, ne AI.

4Uložit a zkontrolovat 10 min

Zkopíruj celý kód. Otevři Poznámkový blok (nebo VS Code, pokud ho máš), vlož a ulož jako index.html – u typu souboru zvol „Všechny soubory“, ať nevznikne index.html.txt.
Soubor otevři dvojklikem v prohlížeči.
Zúž okno prohlížeče na šířku telefonu. Rozpadá se něco?
Kontrola obsahu – odškrtni:

Každý fakt na stránce je z mých pěti podkladů.
Texty doplněné AI mají v kódu komentář GENEROVANÝ TEXT.
Na stránce není nic, co nechci mít veřejně.
Na úzké obrazovce je všechno čitelné.

5Repozitář na GitHubu 10 min

Na GitHubu vpravo nahoře + → New repository.
Název: web-prijmeni. Nastav Public. Vytvoř (Create repository).
Klikni na uploading an existing file, přetáhni svůj index.html.
Dole do popisu změny napiš První verze stránky O mně a potvrď Commit changes.

6Zveřejnit přes GitHub Pages 10 min

V repozitáři Settings → Pages.
U Source nech „Deploy from a branch“, u Branch vyber main a složku / (root). Save.
Počkej 1–2 minuty a obnov stránku. Nahoře se objeví adresa ve tvaru https://tvoje-jmeno.github.io/web-prijmeni/.
Otevři ji i na telefonu.

7Odevzdat 5 min

Do úkolu v Učebně vlož dva odkazy: na stránku a na repozitář.

★Máš hotovo?

Požádej AI o jednu úpravu (barvy, rozložení, sekce „Co mě baví“) – pořád jen z tvých faktů.
Nahraj nový index.html do repozitáře (Add file → Upload files) s popisem, co se změnilo.
V repozitáři otevři Commits: vidíš obě verze. Tohle je git – každý krok jde vrátit.

?Když něco nejde

Stránka ukazuje 404: počkej ještě minutu; zkontroluj, že se soubor jmenuje přesně index.html (malými písmeny) a leží přímo v repozitáři, ne ve složce.
Vidím jen text kódu, ne stránku: soubor se uložil jako .txt. Ulož znovu jako „Všechny soubory“.
GitHub chce ověření e-mailu: potvrď e-mail, bez toho Pages nepůjdou.
Nic z toho nepomohlo: odevzdej aspoň odkaz na repozitář a napiš do Učebny, kde ses zasekl(a). Doladíme příští hodinu.

Příště (29. 9.): jak se s AI mluví o webu – kontext, dobré a špatné zadání. Pokračujeme z vašich stránek.