Nadpisy, podnadpisy a odstavce

H1 – hlavní nadpis

H2 – podnadpis

Odstavec textu, který slouží jako ukázka.

<h1>H1</h1>
<h2>H2</h2>
<p>Odstavec...</p>

Druhy sazby

Tučný, kurzíva, podtržený, zvýrazněný.

<b>...</b>
<i>...</i>
<u>...</u>
<mark>...</mark>

Odrážky a seznamy

Položka A
Položka B

První
Druhá

<ul>
  <li>...</li>
</ul>
<ol>
  <li>...</li>
</ol>

Fonty

Courier New zarovnaný doleva

Psací font zarovnaný doprava

Bláznivý font zarovnaný na střed

style="text-align: center; font-family: 'Courier New', cursive; font-size: 30px;"

Fonty můžeme najít zde

Barvy textu

Červená

Modrá

Duhový text ......................................................................................

<p style="color:blue;">Modrá;>modrý text</p>
<p style="background: linear-gradient(to right, green, yellow);
-webkit-background-clip: text; color: transparent;">Text</p>

Barvy pozadí a efekty

Růžový

Modrý

Přechod

Animovaný přechod

<p style="background: green;">Zelené pozadí</p>
<p style="background: linear-gradient(to right, lime, gold);">Přechod</p>

Smajlíci

😊 😀 😁 😂 🤣 😍 😎

👍👍🏻👍🏼👍🏽👍🏾👍🏿

😇👼🌈🦄 – nebesa

🧙🏻‍♂️🧝🏿‍♀️🧱⬛⬛🟨🟨⬛
🟩🟩⬜⬜🚪🟨🐉🌀
🌳🟩🧱⬜⬛📦🟨⬛
🟩🪟🧟‍♂️⬜⬛⬛⬛⬛
🧱🧱🗝️🔥⬛⬛⬛⬛

Zarovnání obrázků

Obrázek vlevo.

Obrázek vpravo.

Obrázek uprostřed.

<img src="foo.jpg" style="float:left;">

Formuláře

<form method="GET">...</form>

Tabulky

Hra	Odehráno hodin	Hodnocení
Euro Truck Simulator 2	230h	10
The Sims 4	167h	7
DiRT Rally 2.0	91h	10
BeamNG + Automation	79h	10
Two Point Hospital	70h	8
Spintires	75h	9
Spore	42h	8
Poly Bridge	24h	8


<table>
  <thead>
    <tr>
      <th>Předmět</th>
      <th>Známka</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Matematika</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Čeština</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Dějepic</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

Skrývání elementů

Tento text lze skrýt a znovu zobrazit.

<p style="display: none">Nejsem tu</p>

Efekty s myší

Co umím?

Klikni pro přepínání barev

Najetí zobrazí tip

tento text obsahuje tajný odkaz, najdeš ho?

#hoverText:hover { color: blue; transform: rotate(5deg); scale(1.3); }
onclick → změna barvy
onmouseover → zobraz tip

Vložení jiné stránky

<iframe src="foo.html"></iframe>

Kurzor

Obyčejný ukazatel

Prstík

Zaměřovač

Přemýšlím

Chytni mě

Náhodný kurzor

Umím i emotikony

Nebo se průběžně měnit

Dokážu být cokoliv!

Zvuky

Jednoduchý přehrávač zvuku v prohlížeči:

<audio src="URL" controls></audio>

Současná frekvence zvuku: 0 Hz

Slyšíš od frekvence: - Hz

Zvuk se začal ztrácet v: - Hz

Přestal jsi slyšet v: - Hz

Profilování prohlížeče

Prohlížeč na tebe ví spoustu věcí. Podívej se 👀:

Přibližná poloha (IP adresa):
Přibližná poloha:
Přesná poloha (GPS):
Prohlížeč:
Rozlišení obrazovky:

Chceš zjistit ještě víc? Mrkni na Am I Unique?

Ctrl+C / Ctrl+V a bezpečnost

Kopírování a vkládání (Ctrl+C / Ctrl+V) je velmi užitečné, ale také může být zneužito. Zde jsou některé ukázky, jak může být obsah schránky ovlivněn.

1. Co je aktuálně ve schránce?

(čekám na kliknutí...)

2. Vkládání do políčka

Zkus stisknout Ctrl+V do tohoto pole – text se může změnit:

3. Pole, které odesílá něco jiného

4. Upravené Ctrl+C

Označ tento text a zkus Ctrl+C. Do schránky se vloží něco jiného:

Tento text vypadá normálně, ale do schránky se dostane jiný obsah.