Jak vytvořit interaktivní HTML časovou osu

Časová osa je užitečný způsob, jak na webové stránce zobrazit řadu událostí. Interaktivní časová osa umožňuje návštěvníkům posouvat obsah podle potřeby. Tento návod ukazuje, jak takovou osu vytvořit pouze pomocí HTML a inline CSS, bez nutnosti JavaScriptu.

Krok 1 – Vytvořte HTML soubor

Otevřete libovolný textový editor a založte nový dokument. Do těla stránky (<body>) vložte následující kód:

<div style="width:600px; height:400px; overflow:auto;">
    
</div>

Prvek div bude sloužit jako kontejner pro seznam událostí. Hodnota overflow:auto zajistí, že se objeví posuvník, pokud obsah přesáhne nastavenou šířku nebo výšku. Soubor uložte jako timeline.html.

Krok 2 – Přidejte obsah časové osy

Mezi otevírací a zavírací značky div vložte jednotlivé události. Každou událost zapište jako samostatný blok HTML, např. <section> nebo další div. Soubor průběžně ukládejte.

Otestujte

Otevřete soubor timeline.html v prohlížeči. Pokud je obsah větší než kontejner, zobrazí se posuvník. Podle potřeby upravte hodnoty width a height, aby odpovídaly vertikálnímu či horizontálnímu rozložení.

Tipy

• Vertikální rozložení je nejjednodušší – stačí každou událost zabalit do vlastního div. Pro horizontální osu můžete použít tabulku s jedním řádkem a buňkami pro jednotlivé události; výšku tabulky nastavte na stejnou jako výšku kontejneru a dbejte na správné odsazení (margin, padding).
• V tomto návodu je posuvník vytvořen pomocí inline CSS (style atribut). Místo toho můžete použít interní stylopis v <head> nebo externí soubor .css, což poskytuje větší kontrolu nad vzhledem.
• Interaktivitu můžete rozšířit pomocí JavaScriptu – například přidáním tlačítek, která po kliknutí posunou obsah časové osy.

Co budete potřebovat

• Textový editor (např. Notepad++, VS Code, Sublime Text)