Základní škola
Slunovrat

Kód ke kopírování

stackblitz.com postimages.org
1

Tvůj první řádek

<h1>Ahoj</h1>
2

Nadpisy

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

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>
4

Seznam

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

Odkaz

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

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

<h1>Minecraft</h1>

<p>Tohle je moje stránka o Minecraftu. Hraju ho tři roky.</p>

<h2>Co je na něm nejlepší</h2>

<ul>
  <li>Můžu stavět, co chci</li>
  <li>Redstone</li>
  <li>Hraju to s kámošema</li>
</ul>

<p>Text může být <b>tučný</b> nebo <i>nakloněný</i>.</p>

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

Obrázek

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

Nahraj si vlastní obrázek

<img src="SEM_VLOZ_DIRECT_LINK" width="400">
9

Barvy

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

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

<p style="background: rebeccapurple; color: white">Zvýrazněný odstavec</p>
10

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

11

Rozbalovací tajnost

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

A ještě tři hračky

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

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

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

Písmo z Google Fonts

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bangers&display=swap">

<style>
  h1 { font-family: "Bangers", cursive; }
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap">

<style>
  h1 { font-family: "Press Start 2P", monospace; }
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat&display=swap">

<style>
  h1 { font-family: "Caveat", cursive; }
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Creepster&display=swap">

<style>
  h1 { font-family: "Creepster", cursive; }
</style>
← zpátky na rozcestník