Jak vytvořit interaktivní HTML časovou osu

Časový řádek je užitečný způsob, jak zobrazit seznam událostí na webové stránce, a interaktivní časový řádek poskytuje uživatelům určitou kontrolu nad zobrazeným obsahem. Zatímco existuje mnoho způsobů, jak vytvořit interaktivní časovou linii, většina z nich vyžaduje více než jen jazyk HTML (hypertext markup language). Existuje však jedno velmi jednoduché HTML řešení. Můžete snadno vytvořit interaktivní posuvníky pro svůj časový řádek pomocí atributu HTML ve stylu. Uživatelé této časové řady tak budou moci procházet jeho obsahem, jak se jim líbí.

Krok 1
Vytvořte soubor HTML. Otevřete nový dokument v softwarovém programu textového editoru a vytvořte základní HTML stránku. Přidat tento kód do části "tělo" HTML: Element rozdělení ("div") je kontejner pro události seznamu časových řad. "Přetečení" hodnota "auto" přidá interaktivní posuvník, když vaše časové osy dostane širší nebo vyšší než tento kontejner. Uložte stránku jako "timeline.html".

Krok 2
Vytvořte si vlastní obsah časové osy. V prostoru mezi úvodními a závěrečnými značkami div přidejte události časové řady ve vzestupném nebo sestupném pořadí. Každou událost přidejte do své vlastní části dobře vytvořeného HTML. Uložte stránku při práci.
Otestujte kód HTML. Otevřete webový prohlížeč počítače a načtěte „timeline.html“. Pokud je jeho obsah větší než kontejner „div“, zobrazí se interaktivní posuvník. Upravte hodnoty "šířky" a "výšky" kontejneru tak, aby odpovídaly svislému nebo vodorovnému rozložení.

Tipy
Vertikální rozložení jsou nejjednodušší kód. Jednoduše zabalte každou ze svých sekcí událostí do svého vlastního prvku „div“. Pro horizontální rozložení můžete použít tabulku s jedním řádkem a buňkou sloupce pro každou událost. Pokud tak učiníte, nastavte výšku svého stolu na stejnou výšku, jakou má výška kontejneru "div". Dávejte pozor na hodnoty vertikálního "okraje" a "polstrování" vašeho stolu.
Tento článek vytvoří interaktivní posuvník pomocí "inline" kaskádové styl (CSS). "Inline" styly jdou dovnitř "stylu" atributu úvodní značky elementu HTML. Místo toho však můžete použít "interní" nebo "externí" seznam stylů. "Vnitřní" šablony stylů jdou do HTML "head" sekce. "Externí" styly jsou samostatné ".css" soubory. Použití jednoho z těchto typů vám dává větší kontrolu nad formátováním obsahu HTML.
Interaktivitu příkladu můžete rozšířit pomocí JavaScriptu. Můžete začít přidáním tlačítek HTML a poté, co uživatelé kliknou na tlačítka, přesuňte obsah JavaScriptu.

Položky, které budete potřebovat