HTML Prvky - Kompletní reference

Tato stránka obsahuje ukázky všech HTML prvků, které jsou automaticky stylovány v kontejneru .user-content. Žádné třídy nebo inline styly nejsou potřeba - styly jsou aplikovány přímo na elementy.

Typografie

Nadpisy H1-H6

Nadpis první úrovně (H1)

Nadpis H1 by měl být na stránce pouze jeden a měl by obsahovat hlavní název dokumentu. Má největší velikost a nejvýraznější styl.

Nadpis druhé úrovně (H2)

Nadpisy H2 slouží k rozdělení obsahu do hlavních sekcí. Jsou podtržené a mají výrazný okraj nahoře.

Nadpis třetí úrovně (H3)

Používá se pro podsekce v rámci H2. Menší velikost, ale stále výrazný.

Nadpis čtvrté úrovně (H4)

Pro další členění obsahu. Použijte pro detailnější strukturu.

Nadpis páté úrovně (H5)

Pro velmi detailní členění. Má podobnou velikost jako běžný text, ale je tučný.

NADPIS ŠESTÉ ÚROVNĚ (H6)

H6 je nejmenší nadpis, často používaný pro popisky nebo velmi specifické sekce. Je psán verzálkami.

Odstavce a text

Toto je běžný odstavec. Odstavce mají nastavenou optimální délku řádku pro čitelnost a patřičné řádkování. Text je nastaven tak, aby byl dobře čitelný na všech zařízeních.

Druhý odstavec demonstruje, že odstavce mají mezi sebou patřičné odsazení. Každý odstavec by měl obsahovat jednu hlavní myšlenku nebo téma pro lepší čitelnost.

Textové formátování

V textu můžete používat tučný text pomocí elementu <strong> nebo tučný text pomocí <b>.

Kurzíva je možná pomocí elementu em nebo elementu i.

Můžete také použít menší text pro poznámky pod čarou.

Zvýrazněný text pomocí elementu <mark> přitáhne pozornost.

Smazaný text a vložený text pro sledování změn.

Dolní index: H₂O a horní index: E = mc².

API - zkratka s vysvětlením při najetí myší.

15. ledna 2024 - sémantický element pro datum.

Výsledné skóre - strojově čitelná data.

Odkazy

Toto je standardní odkaz. Odkazy mají barvu primární barvy a při najetí se podtrhnou.

Odkazy mohou vést i na interní kotvy na stejné stránce.

Seznamy

Nečíslovaný seznam

• Položka první úrovně
• Další položka první úrovně
  • Položka druhé úrovně
  • Další položka druhé úrovně
    • Položka třetí úrovně
• Poslední položka první úrovně

Číslovaný seznam

1. První krok instalace
2. Druhý krok
   1. Podkrok 2.1
   2. Podkrok 2.2
3. Třetí krok
4. Čtvrtý krok

Definiční seznam

API

Application Programming Interface - rozhraní pro komunikaci mezi aplikacemi

REST

Representational State Transfer - architektonický styl pro webové služby

JSON

JavaScript Object Notation - formát pro výměnu dat

Definiční seznam - Glosář styl

Endpoint

Koncový bod API, URL adresa pro přístup ke konkrétní funkci

Webhook

Mechanismus pro asynchronní notifikace mezi systémy

OAuth

Open standard for authorization - protokol pro autorizaci

Citace a boxy

Standardní citace

Jednoduchost je nejvyšší úroveň sofistikovanosti. Čím více věcí zjednodušíte, tím lépe porozumíte jejich podstatě.

Leonardo da Vinci

Tip box

Použijte klávesovou zkratku Ctrl+K pro rychlé vyhledávání v dokumentaci.

Poznámka

Tato funkce je dostupná od verze 2.0. Ujistěte se, že používáte aktuální verzi.

Varování

Před smazáním dat se ujistěte, že máte vytvořenou zálohu. Tato akce je nevratná.

Danger box

Nikdy nesdílejte své API klíče veřejně. Mohou být zneužity k neautorizovanému přístupu.

Inline citace

Jak řekl Albert Einstein: Fantazie je důležitější než vědění.

Kód

Inline kód

Použijte funkci console.log() pro výpis do konzole. Proměnné se deklarují pomocí const, let nebo var.

Blok kódu

// Příklad funkce v JavaScriptu
function greet(name) {
  return `Hello, ${name}!`;
}

// Použití
const message = greet('World');
console.log(message); // "Hello, World!"

# Příklad v Pythonu
def calculate_fibonacci(n):
    if n <= 1:
        return n
    return calculate_fibonacci(n - 1) + calculate_fibonacci(n - 2)

# Výpočet prvních 10 čísel
for i in range(10):
    print(f"F({i}) = {calculate_fibonacci(i)}")

#!/bin/bash
# Instalační skript

echo "Instaluje se aplikace..."
npm install
npm run build
npm start

echo "Instalace dokončena!"

{
  "name": "knowledge-base",
  "version": "1.0.0",
  "description": "Centrální dokumentační systém",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Klávesové zkratky

Stiskněte Ctrl + C pro kopírování a Ctrl + V pro vložení.

Pro rychlé vyhledávání použijte Ctrl + K.

Sample output

Výstup programu: Process completed successfully in 2.5 seconds.

Proměnné

Použijte proměnnou x pro souřadnici a y pro osu Y.

Tabulky

Základní tabulka

Tabulka s kódem

Obrázky a média

Základní obrázek

Obrázek s popiskem (Figure)

Picture element

Formuláře

Základní formulář

Datum a čas

Textarea a select

Checkbox a radio

Range a color

File upload

Progress a meter

Interaktivní prvky

Details/Summary

function example() {
  console.log('Tento kód je uvnitř details elementu');
}

Dialog

Sémantické sekce

Article

Section

Aside

Address

Video embed

YouTube video

Pro vložení YouTube videa použijte responsivní kontejner s třídou .video-embed:

Kód pro vložení

<div class="video-embed">
  <div class="video-wrapper">
    <iframe 
      src="https://www.youtube.com/embed/VIDEO_ID" 
      title="Název videa" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen>
    </iframe>
  </div>
  <figcaption>Popis videa</figcaption>
</div>

Soubory ke stažení

Pro sekci souborů ke stažení použijte kontejner .download-section:

Kód pro sekci download

<div class="download-section">
  <div class="download-title">
    <svg>...</svg>
    Soubory ke stažení
  </div>
  <ul class="download-list">
    <li class="download-item">
      <div class="file-info">
        <div class="file-icon">...</div>
        <div class="file-details">
          <div class="file-name">nazev-souboru.pdf</div>
          <div class="file-meta">PDF • 2.4 MB</div>
        </div>
      </div>
      <a href="cesta/k/souboru.pdf" class="download-btn">Stáhnout</a>
    </li>
  </ul>
</div>

Jednoduchý download link

Pro jednoduchý odkaz na stažení použijte třídu .download-link:

Ostatní prvky

Horizontal Rule

Standardní oddělovač:

Section oddělovač:

Footnotes

Tento text obsahuje poznámku pod čarou¹. Další poznámka je zde².

Disabled stav

Readonly stav

Kompletní seznam podporovaných prvků

Textové prvky

• <h1> - <h6> - Nadpisy
• <p> - Odstavec
• <br> - Zalomení řádku
• <hr> - Vodorovná čára
• <strong>, <b> - Tučný text
• <em>, <i> - Kurzíva
• <small> - Menší text
• <mark> - Zvýrazněný text
• <del>, <ins> - Smazaný/vložený text
• <sub>, <sup> - Dolní/horní index
• <abbr> - Zkratka
• <q> - Inline citace
• <cite> - Citace zdroje
• <time> - Datum/čas
• <data> - Strojová data
• <var> - Proměnná

Seznamy

• <ul>, <ol>, <li> - Seznamy
• <dl>, <dt>, <dd> - Definiční seznam

Citace a kód

• <blockquote> - Bloková citace
• <code> - Inline kód
• <pre> - Blok kódu
• <kbd> - Klávesová zkratka
• <samp> - Výstup programu

Tabulky a obrázky

• <table> a související elementy
• <figure>, <figcaption>
• <img>, <picture>

Formuláře

• <form>, <fieldset>, <legend>
• <label>, <input>, <textarea>
• <select>, <option>
• <button>
• <progress>, <meter>

Interaktivní a sémantické

• <details>, <summary>
• <dialog>
• <article>, <section>, <aside>
• <address>