Hodina 2 · poznámky
→ materiály
— 0:00

Než přijdou

Návrat · 0–7 min
1

Otevřít stránku z minula

0:00
Nezapomenout
  • nejdřív tinyurl.com/slunovrat-h2, pak stackblitz.com
  • přihlášení přes Google → na úvodní stránce je seznam jejich projektů
  • kdo si uložil odkaz, otevře odkaz
  • kdo nemá nic: nový projekt Static + položka 1 z materiálů, a jede se dál
Pozor
  • kdo minule nebyl přihlášený, projekt nemá. Neřešit, dostane položku 1.
  • na konci hodiny si tentokrát odkaz uložit musí všichni

Milník v 0:07: každý má otevřenou svoji stránku.

Obrázek · 7–17 min
2

Obrázek

0:07
Nezapomenout
  • nejdřív picsum.photos, ať to funguje hned
  • obrázek není v projektu, je na cizím serveru
  • src je jen adresa, odkud si ho prohlížeč stáhne
  • <img> nemá co obalit, proto se nezavírá
  • F5 v náhledu → jiná fotka. Zeptat se proč.
3

Nahraj si vlastní obrázek

0:10
Nezapomenout
  • projít postimages na projektoru celé, teprve pak je pustit
  • Choose images → fotka → počkat → Direct link
  • width="400", jinak má fotka z mobilu 4000 px
  • kdo nemá vlastní fotku: najít obrázek na Googlu, pravé tlačítko → Kopírovat adresu obrázku
Pozor
  • postimages nabídne pět odkazů. Funguje jen ten, co končí .jpg / .png.
  • „Hotlink for forums" = obrázek se nezobrazí. Říct to dopředu.

Milník v 0:17: každý má na stránce aspoň jeden obrázek.

Barvy a písmo · 17–35 min
4

Barvy do styles.css

0:17
Nezapomenout
  • začít otázkou: proč je náš <h1> tak malý a proč je nahoře šedá lišta?
  • otevřít styles.css — šablona tam má cizí pravidla, h1 { font-size: 1.5rem }
  • HTML říká, co na stránce je. CSS říká, jak to vypadá.
  • všechno v styles.css smazat, vložit položku 4
  • rozebrat jedno pravidlo: kdo (h1) → složené závorky → co : jak → středník
  • před uložením se zeptat: co myslíte, že se stane?
Pozor
  • CSS chybu nehlásí. Překlep = prostě se nic nestane.
  • chybějící středník rozbije i další řádek
  • česká klávesnice: { AltGr+B, } AltGr+N, # AltGr+X
  • kdo omylem napíše CSS do index.html, uvidí ho na stránce jako text
5

Barvu napíšeš dvěma způsoby

0:21
Nezapomenout
  • jménem: asi 140 jmen, v materiálech jde na barvu kliknout a zkopíruje se
  • kódem: #101820. Google „color picker" ho ukáže rovnou ve výsledcích.
  • zadat: pět minut, ať stránka vypadá jako oni, klidně děsivě
  • kdo je rychlý: background i pro h1 nebo p
6

Velikost a zarovnání

0:27
Nezapomenout
  • rychle, dvě minuty
  • px = bod na obrazovce. Bez px to nefunguje.
  • pravidlo pro h1 už mají z bloku 4 → nové řádky přidat dovnitř
7

Písmo z Google Fonts

0:29
Nezapomenout
  • čtyři hotové fonty jsou v materiálech
  • ukázat i cestu: fonts.google.com → font → Get font → Get embed code → záložka @import
  • font je taky jen soubor na cizím serveru, stejně jako obrázek
Pozor
  • řádek @import musí být úplně první v styles.css. Jinde se ignoruje.
  • Press Start 2P je obrovský → zmenšit přes font-size
  • vlastní font z fonts.google.com nemusí mít češtinu → ř a ů vypadají jinak. Čtyři fonty z materiálů ji mají.

Milník v 0:35: každý má vlastní barvy a vlastní font nadpisu.

Hover · 35–45 min
8

Když na to najedeš myší

0:35
Nezapomenout
  • nejdřív ukázat na projektoru, pak nechat hádat: co udělá h1:hover?
  • :hover = pravidlo platí, jen když je nad tím myš
  • transition = změna proběhne plynule, ne skokem. Zkusit ho smazat a porovnat.
  • čísla se dají měnit: scale(2), rotate(360deg), transition: 3s
  • zadat: ať se na stránce něco změní, když na to najedeš
Pozor
  • mezi a a :hover nesmí být mezera

Milník v 0:45: na každé stránce něco reaguje na myš.

Hračky v HTML · 45–50 min
9

Jezdící text

0:45
Nezapomenout
  • zpátky do index.html, tohle je HTML, ne CSS
  • marquee je starší než jejich rodiče, oficiálně se už nemá používat
  • prohlížeče ho pořád umí, protože by se rozbil kus starého internetu
  • scrollamount = rychlost, behavior="alternate" = odráží se
  • jde do něj dát i obrázek
10

Rozbalovací tajnost

0:48
Nezapomenout
  • funguje samo, žádné programování
  • dovnitř jde cokoli: obrázek, seznam, další details
Rozhodnutí v 0:48
  • nejsi v čase → vyhoď bonus a jdi na výstavu
  • pozicování je pak první bod hodiny 3
Bonus — vyhoď první   Rámeček a vedle sebe · 50–55 min
11

Rámeček a zaoblení

0:50
Nezapomenout
  • každá věc na stránce je obdélník, i když tak nevypadá
  • border = rámeček: tloušťka, druh, barva
  • padding = místo mezi textem a okrajem. Zkusit 0 a 50px.
  • border-radius velký jako polovina obrázku → kolečko
12

Obrázky vedle sebe

0:52
Nezapomenout
  • první kód do index.html, druhý do styles.css
  • div = krabice, která nic neukazuje, jen drží věci pohromadě
  • class="galerie" = krabice dostala jméno. V CSS se na jméno odkazuje s tečkou: .galerie
  • display: flex dát jen jako „tohle dá věci vedle sebe". Nic víc nevysvětlovat.
  • zkusit smazat display: flex → obrázky spadnou pod sebe
Proč jen tohle
  • Code.org učí flex od roku 2024 a učitelé 6. tříd na fóru píšou, že to děti nedávají. Nejvíc je mate přepínání řádek / sloupec.
  • Raspberry Pi dětem flex a position dává hotové ve startovním kódu, psát je nenechá
  • position: absolute a float vůbec neukazovat
  • flex pořádně, pokud vůbec, až v hodině 3–4: jen display: flex, flex-direction, justify-content, gap
Závěr · 55–60 min
13

Výstava a uložení odkazu

0:55
Nezapomenout
  • každý najede myší na svůj hover efekt a řekne jednu větu
  • 7 × 20 s = necelé 3 minuty
Nejdůležitější věc hodiny
  • odkaz na projekt si uloží všichni: mailem sobě nebo do záložek
  • zkontrolovat u každého zvlášť, ne se zeptat celé třídy