Obsah
Časová osa je užitečný způsob, jak zobrazit seznam událostí na webové stránce, a interaktivní časová osa dává uživatelům kontrolu nad zobrazením obsahu. I když existuje mnoho způsobů, jak vytvořit interaktivní časovou osu, mnoho z nich potřebuje víc než HTML. Existuje však velmi jednoduché řešení HTML: můžete vytvořit interaktivní posuvníky na své časové ose pomocí atributu HTML „style“. Tímto způsobem budou uživatelé moci volně se pohybovat po obsahu.
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 části „body“ kódu HTML:
Oddělovač („div“) je kontejner pro seznam událostí na vaší časové ose. Hodnota „auto“ v „přetečení“ přidává interaktivní posuvníky, když je časová osa delší nebo širší než kontejner. Uložte stránku jako „timeline.html“.
Krok 2
Vytvořte obsah. V prostoru mezi značkami „div“ přidejte události na časovou osu vzestupně nebo sestupně. Přidejte každou událost do své vlastní dobře vytvořené sekce HTML. Při práci stránku neustále ukládejte.
Krok 3
Vyzkoušejte svůj HTML kód. Otevřete soubor „timeline.html“ ve webovém prohlížeči počítače. Pokud je obsah větší než kontejner „div“, zobrazí se interaktivní posuvník. Upravte hodnoty „šířky“ a „výšky“ kontejneru tak, aby odpovídaly jeho vertikálnímu nebo horizontálnímu tahu.