Jak vytvořit interaktivní časovou osu s HTML

Krok 1

Vytvořte soubor HTML. Otevřete nový dokument v textovém editoru a vytvořte základní stránku HTML. Přidejte tento kód do sekce "body" na stránce:

Prvek rozdělení ("div") je kontejner pro seznam událostí na vaší časové ose. Hodnota "přetečení" "auto" (automatizace) přidává interaktivní posuvník, když se časová osa stane širší nebo vyšší než její kontejner. Uložit tuto stránku jako "timeline.html".

Krok 2

Vytvořte obsah časové osy. V prostoru mezi značky "div" otevírání a zavírání přidáte události v sestupném nebo vzestupném pořadí. Přidejte každou událost svou vlastní dobře vytvořenou sekci HTML. Udržujte stránku neustále, zatímco pracujete na ní.

Krok 3

Otestujte svůj kód HTML Otevřete webový prohlížeč počítače a načtěte soubor "timeline.html". Pokud je obsah větší než kontejner "div", uvidíte interaktivní posuvník. Nastavte hodnoty "šířka" a "výška" tak, aby odpovídaly vertikálnímu nebo horizontálnímu rozložení stránky.