Come creare una timeline HTML interattiva

Una cronologia è un modo utile per visualizzare un elenco di eventi su una pagina Web e una cronologia interattiva offre agli utenti un certo controllo sulla visualizzazione dei contenuti. Sebbene esistano molti modi per creare una linea temporale interattiva, la maggior parte richiede più di un semplice linguaggio di markup ipertestuale (HTML). Tuttavia, esiste una soluzione HTML molto semplice. Puoi facilmente creare barre di scorrimento interattive per la tua cronologia utilizzando l'attributo "stile" dell'HTML. In questo modo, gli utenti della tua timeline saranno in grado di scorrere i suoi contenuti a loro piacimento.

Passo 1

Crea il tuo file HTML. Apri un nuovo documento in un programma software di editor di testo e crea una pagina HTML di base. Aggiungi questo codice all'interno della sezione HTML "body":

L'elemento di divisione ("div") è un contenitore per l'elenco di eventi della linea temporale. Il valore "overflow" di "auto" aggiunge una barra di scorrimento interattiva quando la linea del tempo diventa più ampia o più alta di questo contenitore. Salva la pagina come "timeline.html".

Passo 2

Crea il tuo contenuto della linea temporale. Nello spazio tra i tag "div" di apertura e chiusura, aggiungi gli eventi della sequenza temporale in ordine crescente o decrescente. Aggiungi ogni evento all'interno della propria sezione di HTML ben formato. Continua a salvare la pagina mentre lavori.

Metti alla prova il tuo codice HTML. Apri il browser web del tuo computer e carica "timeline.html". Se il suo contenuto è più grande del contenitore "div", vedrai una barra di scorrimento interattiva. Regola i valori di "larghezza" e "altezza" del contenitore in base al tuo layout verticale o orizzontale.