whycomputer.com >> Wiedza o Internecie >  >> Internet

Jak stworzyć interaktywną oś czasu w HTML

Wprowadzenie

Oś czasu to praktyczny sposób prezentacji kolejnych wydarzeń na stronie internetowej. Interaktywna wersja pozwala użytkownikom samodzielnie przewijać treść. Nie trzeba sięgać po skomplikowane skrypty – wystarczy kilka atrybutów style w HTML.

Krok 1 – Przygotowanie pliku

Otwórz dowolny edytor tekstu i utwórz nowy dokument HTML. W sekcji <body> wstaw następujący kod:

<div style="width:600px; height:300px; overflow:auto;">
    
</div>

Element div pełni rolę kontenera dla listy wydarzeń. Wartość overflow:auto automatycznie dodaje pasek przewijania, gdy zawartość przekracza wymiary kontenera. Zapisz plik jako timeline.html.

Krok 2 – Dodanie treści

Między otwierającym a zamykającym tagiem <div> umieść kolejne wydarzenia w kolejności rosnącej lub malejącej. Każde wydarzenie umieść w osobnym, poprawnie sformatowanym elemencie HTML, np. w <section> lub kolejnym <div>. Regularnie zapisuj plik.

Krok 3 – Testowanie

Otwórz plik timeline.html w przeglądarce. Jeśli zawartość jest większa niż kontener, zobaczysz interaktywny pasek przewijania. Dostosuj wartości width i height, aby uzyskać układ pionowy lub poziomy.

Wskazówki

  • Pionowy układ jest najprostszy – wystarczy umieścić każdy element wydarzenia w osobnym div. Dla układu poziomego można użyć tabeli z jednym wierszem i kolumną dla każdego wydarzenia; wysokość tabeli powinna być równa wysokości kontenera div. Zwróć uwagę na marginesy i wypełnienia.
  • W przykładzie pasek przewijania jest tworzony przy pomocy „inline” CSS, czyli atrybutu style w tagu elementu. Alternatywnie możesz zastosować style wewnętrzne (<style> w sekcji head) lub zewnętrzne (plik .css), co daje większą kontrolę nad formatowaniem.
  • Interaktywność można rozbudować przy użyciu JavaScript – np. dodać przyciski, które po kliknięciu przesuwają zawartość osi czasu.

Co będzie potrzebne

  • Edytor tekstu (np. Notepad++, VS Code)

URL:https://pl.whycomputer.com/Internet/100303388.html

Internet
  • Jak nagrać płytę DVD z muzyką

    Tworzenie płyty DVD to wygodny sposób na przechowywanie dużej ilości muzyki. Dysk DVD (Digital Versatile Disc) pomieści do 4,5 GB danych, co wystarcza na setki utworów w formacie MP3, a także dodatkowe pliki, oprogramowanie czy wideo. Utworzona w ten sposób płyta może być odtwarzana zarówno w komput

  • Jak założyć blog na Yahoo

    Blog, czyli skrót od „weblog”, to strona internetowa aktualizowana regularnie, często pełniąca rolę dziennika online. Yahoo umożliwia tworzenie darmowych blogów bez konieczności znajomości projektowania stron. Blogi mogą mieć różne tematy – politykę, rękodzieło, macierzyństwo, a także służyć do utrz

  • Jak stworzyć stronę internetową w CorelDRAW

    WprowadzenieProfesjonalne, bogate w grafikę witryny nie muszą być tworzone wyłącznie w tradycyjnych edytorach HTML. CorelDRAW, program kojarzony głównie z projektowaniem graficznym, oferuje solidne rozwiązanie do budowy stron internetowych. Dla osób, które nie chcą poświęcać czasu na naukę kodowania

Wiedza o Internecie © https://pl.whycomputer.com