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

Než přijdou

Jak funguje web · 0–6 min
1

Titulka

0:00
Nezapomenout
  • za hodinu má každý vlastní stránku na internetu
  • doma si ji otevřou a ukážou rodičům
  • jedna věta a jedeš dál — tady se nezdržovat
2

Co se stane, když chceš jít na skolaslunovrat.cz?

0:01
Nezapomenout
  • nechat je půl minuty tipovat, brát i blbosti
  • cíl není správná odpověď, ale aby si uvědomili, že to nevědí
3

Diagram: prohlížeč ↔ server

0:02
Nezapomenout
  • projít prstem po projektoru, po jednom čísle
  • prohlížeč pošle vzkaz „pošli mi tu stránku“
  • server = nějaký počítač, který je pořád zapnutý
  • pošle zpátky text
  • prohlížeč ten text přečte a nakreslí
  • žádná kouzla, tohle je celé
4

Stránka je jenom text

0:03
Nezapomenout
  • vlevo kód, vpravo výsledek — ukázat oboje
  • zeptat se, kdo uhodne, co dělá <ul>
5

Ctrl+U — živá ukázka

0:04
Nezapomenout
  • přepnout na tab se skolaslunovrat.cz, Ctrl+U
  • srolovat dolů — ať vidí, že je toho hodně
  • tenhle text poslal server
  • vypadá to složitě, ale jsou to pořád ty samé tagy
6

F12 — přepiš školní web

0:05
Nezapomenout
  • F12 → Elements → dvojklik na nadpis školy → přepsat na blbost
  • mění se to jen u mě v prohlížeči
  • na serveru se nestalo nic
  • F5 a je to zpátky
  • tímhle nikoho nehacknou
Rozjezd · 6–11 min
7

tinyurl.com/slunovrat-h1

0:06
Nezapomenout
  • nechat slide viset, dokud tam nejsou všichni
  • stránku nezavírat — kopíruje se z ní celou hodinu
8

StackBlitz — založení projektu

0:07
Nezapomenout
  • projít celý proces na projektoru, ne jen říct URL
  • stackblitz.com → Google login → nový projekt → šablona Static
  • šablona má všechno, nic se nemaže
  • ukázat jen tři věci: soubory vlevo, kód uprostřed, náhled vpravo
Pozor
  • potrvá to dýl, než čekáš — někdo zapomene heslo, někomu naskočí špatný účet
  • kdo je hotový, pomůže sousedovi; nečekat na posledního
  • když Google účet nepustí login: StackBlitz jde i bez něj (neuloží se → nezavírat tab), nebo codepen.io/pen
9

První řádek

0:09
Nezapomenout
  • v index.html si udělat místo a napsat <h1>Ahoj</h1>
  • počkat, až to má všech sedm

Milník: každý vidí vpravo svoje „Ahoj“ velkým písmem.

Tagy a první stránka · 11–25 min
10

Nadpisy

0:11
Nezapomenout
  • rychle, h1 až h3
  • ať sami vidí rozdíl ve velikosti
11

Text: p, b, i, u

0:12
Nezapomenout
  • <b> jde dovnitř odstavce
  • vnořování je pro ně nové — ukázat pomalu
12

Seznam

0:13
Nezapomenout
  • nejčastější chyba: zapomenou obalující <ul>
  • vypadá to pak skoro stejně, což je mate — říct dopředu
13

Odkaz

0:14
Pozor
  • zapomínají https://
  • říct to dřív, než se to stane, ne potom
14

ÚKOL: stránka o tom, co tě baví

0:15
Nezapomenout
  • rozhodnout se hned, o čem to bude — hra, zvíře, kapela, sport, kámoš
  • deset minut ticha a práce
  • chodit po třídě, nekoukat do monitoru
  • kdo je hotový dřív: druhý nadpis, delší text, nebo pomoct sousedovi
  • když někomu nic nefunguje, první podezřelý je chybějící zavírací tag

Milník v 0:25: každý má nadpis, odstavec, seznam a odkaz.

Obrázek · 25–33 min
15

img = jenom adresa

0:25
Nezapomenout
  • nejdřív cizí obrázek přes picsum.photos, ať to funguje hned
  • obrázek není v projektu, je na cizím serveru
  • vy jen říkáte prohlížeči, odkud si ho má stáhnout
  • proto musíte svůj obrázek nejdřív někam nahrát
16

postimages.org

0:27
Ukázat na projektoru dřív, než je pustíš
  • postimages nabídne pět různých odkazů
  • potřebují Direct link — končí na .jpg nebo .png
  • „Hotlink for forums“ = obrázek se nezobrazí a nebudou vědět proč
  • nejčastější zdroj frustrace celé hodiny

Milník v 0:33: každý má svůj obrázek v rozumné velikosti (width="400").

Barvy · 33–40 min
17

style="color: ..."

0:33
Nezapomenout
  • neříkat tomu ještě CSS
  • zatím je to prostě „jak obarvit tag“
18

Jména vs. hex

0:35
Nezapomenout
  • jména barev je pobaví — papayawhip, rebeccapurple
  • Google „color picker“ mají rovnou ve výsledcích, nemusí nikam chodit
  • zadat: pět minut, ať stránka vypadá jako oni, klidně děsivě
  • tady se to rozjede — nechat je, sedm různě barevných stránek je cíl
Klikací věci · 40–45 min
19

details / summary

0:40
Nezapomenout
  • odměna za soustředění
  • funguje samo, žádné programování
20

input color, range, marquee

0:43
Nezapomenout
  • marquee je starší než jejich rodiče, oficiálně se nemá používat
  • prohlížeče ho pořád umí, protože by se rozbil kus starého internetu
  • vědí, co dělá — a vědí, že se tím nebudou chlubit
  • JavaScript dneska vůbec nezmiňovat, necháváme ho na příště

Milník v 0:45: každý má na stránce aspoň jednu věc, co reaguje na klik.

Bonus — vyhoď první   CSS a fonty · 45–56 min
21

Od style= k <style>

0:45
Nezapomenout
  • otevřít problémem, ne definicí
  • zeptat se, kdo má na stránce víc odstavců
  • a jestli chce tu barvu psát pětkrát
  • teprve pak říct, že se tomu říká CSS
22

Google Fonts

0:50
Nezapomenout
  • hotové <link> pro čtyři fonty mají v materiálech — nemusí na Google Fonts vůbec
  • cestu Get font → Get embed code ale ukázat, ať vědí, kde si najdou další
Rozhodnutí v 0:45
  • nejsi v čase → celý tenhle blok vyhoď a jdi na výstavu
  • stránka s obrázkem a barvami, kterou si dítě otevře doma, je lepší výsledek než rozjeté CSS
  • CSS je první bod příští hodiny
Závěr · 56–60 min
23

Výstava a uložení odkazu

0:56
Nezapomenout
  • nevynechávat, i kdyby vypadlo CSS
  • každý jednu větu o své stránce — 7 × 20 s = necelé 3 minuty
Nejdůležitější věc hodiny
  • ať si uloží odkaz na projekt — mailem sobě nebo do záložek
  • bez toho o práci přijdou a příště začínáme od nuly
24

Gratulace

0:59
Nezapomenout
  • úkol na doma: dodělat stránku, druhý obrázek, najít si font
  • příště: CSS pořádně a první JavaScript