Jak utworzyć interaktywną oś czasu HTML

Linia czasu jest użytecznym sposobem wyświetlania listy zdarzeń na stronie internetowej, a interaktywna linia czasu zapewnia użytkownikom pewną kontrolę nad wyświetlaniem treści. Chociaż istnieje wiele sposobów tworzenia interaktywnej linii czasu, większość wymaga więcej niż tylko języka znaczników hipertekstowych (HTML). Istnieje jednak jedno bardzo proste rozwiązanie HTML. Możesz łatwo tworzyć interaktywne paski przewijania dla swojej linii czasu za pomocą atrybutu „stylu” HTML. W ten sposób użytkownicy linii czasu będą mogli przewijać zawartość zgodnie z ich potrzebami.

Krok 1
Utwórz plik HTML. Otwórz nowy dokument w programie do edycji tekstu i utwórz podstawową stronę HTML. Dodaj ten kod w sekcji „ciało” HTML: Element podziału („div”) jest kontenerem dla listy zdarzeń na linii czasu. Wartość „overflow” „auto” dodaje interaktywny pasek przewijania, gdy linia czasu staje się szersza lub wyższa niż ten kontener. Zapisz stronę jako „timeline.html”.

Krok 2
Utwórz własną zawartość linii czasu. W przestrzeni między otwierającymi i zamykającymi znacznikami „div” dodaj zdarzenia linii czasu w porządku rosnącym lub malejącym. Dodaj każde zdarzenie w ramach własnej sekcji dobrze sformatowanego HTML. Zachowaj stronę podczas pracy.
Przetestuj swój kod HTML. Otwórz przeglądarkę internetową komputera i załaduj „timeline.html”. Jeśli jego zawartość jest większa niż kontener „div”, pojawi się interaktywny pasek przewijania. Dostosuj wartości „szerokości” i „wysokości” kontenera do układu pionowego lub poziomego.

Wskazówki
Układy pionowe są najłatwiejsze do zakodowania. Wystarczy zawinąć każdą sekcję wydarzenia w swój własny element „div”. W przypadku układu poziomego można użyć tabeli z pojedynczym wierszem i komórki kolumny dla każdego zdarzenia. Jeśli to zrobisz, ustaw wysokość tabeli tak, jak wysokość kontenera „div”. Uważaj na pionowe wartości „marginesu” i „wypełnienia” stołu.
Ten artykuł tworzy interaktywny pasek przewijania za pomocą „wbudowanego” arkusza stylów kaskadowych (CSS). Arkusze stylów „Inline” wchodzą do atrybutu „style” znacznika otwierającego elementu HTML. Jednak zamiast tego możesz użyć „wewnętrznego” lub „zewnętrznego” arkusza stylów. „Wewnętrzne” arkusze stylów znajdują się w sekcji „głowa” HTML. Arkusze stylów „zewnętrzne” są oddzielnymi plikami „.css”. Użycie jednego z tych typów daje większą kontrolę nad formatowaniem dowolnej zawartości HTML.
Możesz rozszerzyć interaktywność przykładu za pomocą JavaScript. Możesz zacząć od dodania przycisków HTML, a następnie napisać JavaScript, aby przenieść zawartość linii czasu, gdy użytkownicy klikną przyciski.

Elementy, które będą potrzebne