Vše začíná kostrou

Každý web má stejný začátek. Bez těchto tří věcí by prohlížeč nevěděl, co má dělat.

<html> // Celý svět
  <head> // Mozek (není vidět)
  </head>
  <body> // Tělo (vše viditelné)
    <h1>Ahoj!</h1>
  </body>
</html>

Prohlížeč vidí:

Ahoj!

Lekce 1

Nadpis (H1 až H6) je jako titulek v novinách. Odstavec (P) je pro dlouhé čtení.

<h1>Nadpis</h1>
<p>Tohle je dlouhý text...</p>

Tohle je dlouhý text, který se dobře čte.

Lekce 2

Tohle je největší tajemství webu. Padding je polštář uvnitř krabice. Margin je volný prostor venku.

.box {
  background: #ff007a;
  padding: 20px;
  margin: 0px;
}

KRABICE

Lekce 3

Moderní web se musí umět smrsknout. Říkáme tomu Responzivní design. Zkus si změnit velikost "displeje".

@media (max-width: 600px) {
body { font-size: 14px; }
}

Jsem web!

Finále

Tady už jsi pánem ty. Přidej obrázek psa, změň barvy nebo smaž všechno a napiš tam svůj vzkaz!