Hodina 1

Dneska si uděláš
vlastní web

Tomáš Masník · Slunovrat

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

Takhle to funguje

Stránka je jenom text

<h1>Škola Slunovrat</h1>

<p>Vítejte na našem webu.</p>

<ul>
  <li>První stupeň</li>
  <li>Druhý stupeň</li>
</ul>

Škola Slunovrat

Vítejte na našem webu.

První stupeň
Druhý stupeň

Vlevo je to, co poslal server. Vpravo to, co z toho nakreslil prohlížeč.

Zkusíme to naživo

Ctrl + U

Ukáže zdrojový text jakékoli stránky na internetu.

A ještě jedna

F12

Tady jde text přepsat. Ale jen u sebe — na serveru se nezmění nic.

Všechno, co dneska potřebuješ

tinyurl.com/slunovrat-h1

Nech si to otevřené celou hodinu. Všechen kód si odtamtud zkopíruješ — nic nemusíš psát ručně.

StackBlitz — tvoje dílna

Otevři stackblitz.com
Přihlas se přes Google
Nový projekt → šablona Static (HTML, CSS, JS)
Vlevo jsou soubory, uprostřed píšeš kód, vpravo hned vidíš výsledek

Tvůj první řádek

<h1>Ahoj</h1>

Napiš to do index.html. Podívej se vpravo.

Nadpisy

<h1>Největší nadpis</h1>
<h2>Menší nadpis</h2>
<h3>Ještě menší</h3>

Největší nadpis

Menší nadpis

Ještě menší

Jde to až po <h6>. Ale <h1> dávej na stránku jen jednou.

Text

<p>Tohle je odstavec.</p>

<p>Můžu psát <b>tučně</b>,
<i>nakloněně</i>
nebo <u>podtrženě</u>.</p>

Tohle je odstavec.

Můžu psát tučně, nakloněně nebo podtrženě.

Seznam

<ul>
  <li>První věc</li>
  <li>Druhá věc</li>
  <li>Třetí věc</li>
</ul>

První věc
Druhá věc
Třetí věc

ul je celý seznam, li je jedna položka. Chceš čísla? Místo ul napiš ol.

Odkaz

<a href="https://www.minecraft.net">Oficiální stránka</a>

Pozor: adresa musí začínat na https://. Bez toho odkaz nefunguje a nebudeš vědět proč.

Teď ty · 10 minut

Udělej stránku o něčem,
co tě baví

Hra, zvíře, kapela, sport, kámoš — cokoliv
Musí tam být: nadpis, odstavec, seznam a odkaz
Kdo je hotový, pomůže sousedovi

Obrázek

<img src="https://picsum.photos/400/300">

Ten obrázek není u tebe v projektu. Je na cizím serveru — ty jen říkáš, odkud si ho má prohlížeč stáhnout.

<img> nemá co obalit, tak se nezavírá.

Nahraj si vlastní obrázek

Otevři postimages.org
Choose images → vyber fotku → Upload
Zkopíruj odkaz, který se jmenuje Direct link

Tady se spálí každý: postimages ti nabídne pět různých odkazů. Ty potřebuješ ten, který končí na .jpg nebo .png. Když vezmeš „Hotlink for forums", obrázek se nezobrazí.

Barvy

<body style="background: #101820; color: white">

<h1 style="color: tomato">Minecraft</h1>

background je barva pozadí
color je barva písma

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

Jménem — jmen je asi 140 a některá stojí za to:

tomato hotpink gold rebeccapurple papayawhip aquamarine turquoise

Nebo kódem: #101820. Vygoogli „color picker" — Google ti ho ukáže rovnou.

Věci, na které jde kliknout

Rozbalovací tajnost

<details>
  <summary>Klikni sem</summary>
  <p>Tajná zpráva!</p>
</details>

A funguje to samo. Žádné programování.

A ještě tři hračky

<input type="color">
<input type="range">
<marquee>JEDU PO OBRAZOVCE</marquee>

marquee je starý přes třicet let a oficiálně se už nemá používat. Prohlížeče ho pořád umí, protože by se rozbil kus starého internetu.

Bonus

Proč psát barvu ke každému tagu zvlášť?

<style>
  body {
    background: #101820;
    color: #eeeeee;
  }
  h1 { color: gold; }
  p  { font-size: 20px; }
</style>

Napíšeš pravidlo jednou a platí pro všechny odstavce. Tomuhle se říká CSS.