Zawartość
Oś czasu to przydatny sposób wyświetlania listy zdarzeń na stronie internetowej, a interaktywna oś czasu zapewnia użytkownikom kontrolę nad widokiem zawartości. Chociaż istnieje wiele sposobów tworzenia interaktywnej osi czasu, wiele z nich wymaga czegoś więcej niż tylko HTML. Istnieje jednak bardzo proste rozwiązanie HTML: możesz tworzyć interaktywne paski przewijania na swojej osi czasu, używając atrybutu HTML „style”. W ten sposób użytkownicy będą mogli swobodnie poruszać się po treści.
Krok 1
Utwórz plik HTML. Otwórz nowy dokument w edytorze tekstu i utwórz podstawową stronę HTML. Dodaj ten kod w sekcji „body” kodu HTML:
Separator („div”) to kontener na listę wydarzeń na Twojej osi czasu. Wartość „auto” w pozycji „overflow” dodaje interaktywne paski przewijania, gdy oś czasu jest dłuższa lub szersza niż kontener. Zapisz stronę jako „timeline.html”.
Krok 2
Utwórz treść. W przestrzeni między tagami „div” dodaj zdarzenia na osi czasu w kolejności rosnącej lub malejącej. Dodaj każde wydarzenie we własnej, dobrze sformułowanej sekcji HTML. Ciągle zapisuj stronę podczas pracy.
Krok 3
Przetestuj swój kod HTML. Otwórz plik „timeline.html” w przeglądarce internetowej na komputerze. Jeśli zawartość jest większa niż kontener „div”, zobaczysz interaktywny pasek przewijania. Dostosuj wartości „szerokości” i „wysokości” kontenera, aby pasowały do jego pionowego lub poziomego obrysu.