Una linea del tempo è un modo utile per visualizzare un elenco degli eventi in una pagina web, e una linea del tempo interattiva offre agli utenti qualche controllo sulla visualizzazione del contenuto. Mentre esistono molti modi per creare una linea del tempo interattiva, la maggior parte richiedono più appena HTML hypertext markup language (). Tuttavia, c'è una soluzione molto semplice HTML. È possibile creare facilmente le barre di scorrimento interattiva per la vostra linea di tempo utilizzando l'attributo di "stile" di HTML. In questo modo, gli utenti della vostra linea di tempo sarà in grado di scorrerne il contenuto come a loro piace.

Istruzioni

1

Creare file HTML. Aprire un nuovo documento in un programma di software di editor di testo e creare una pagina HTML di base. Aggiungere questo codice all'interno della sezione "corpo" di HTML:

< div style = "width: 400px; Altezza: 400px; overflow: auto;" >

< / div >

L'elemento di divisione ("div") è un contenitore per elenco della linea di tempo di eventi. Il valore di "overflow" di "auto" aggiunge una barra di scorrimento interattivo quando il vostro tempo linea ottiene più ampia o superiori a questo contenitore. Salvare la pagina come "timeline.html".

2

Creare il proprio contenuto di linea del tempo. Nello spazio tra l'apertura e il tag di chiusura "div", aggiungere eventi della vostra linea di tempo in ordine crescente o decrescente. Aggiungere ogni evento all'interno della propria sezione di codice HTML ben formato. Continuare a salvare la pagina come si lavora.

3

Testare il codice HTML. Aprire il browser web del computer e caricare "timeline.html." Se il contenuto è più grande di "div" contenitore, vedrete una barra di scorrimento interattiva. Regolare i valori "width" e "altezza" del contenitore per soddisfare il vostro layout verticale o orizzontale.

Consigli & Avvertenze

• Layout verticale sono il più facile da codice. Semplicemente avvolgere ciascuna delle sezioni di evento all'interno dell'elemento "div". Per un layout orizzontale, è possibile utilizzare una tabella con una singola riga e cella di una colonna per ogni evento. Se si esegue questa operazione, fare altezza della vostra tabella lo stesso altezza di tuo "div" contenitore. Prendersi cura con il vostro tavolo "margine" verticale e i valori di «riempimento».
• Articolo crea una barra di scorrimento interattiva utilizzando un foglio di stile CSS "inline" (CSS). Fogli di stile "Inline" andare all'interno dell'attributo di "stile" del tag di apertura di un elemento HTML. È possibile utilizzare un foglio di stile "interna" o "esterna" invece, tuttavia. Fogli di stile "Interno" andare all'interno della sezione di "testa" di HTML. Fogli di stile "Esterni" sono file separati "CSS". Utilizzando uno di questi tipi vi dà più controllo sulla formattazione di qualsiasi contenuto HTML.
• Si potrebbe estendere l'interattività dell'esempio tramite JavaScript. Si potrebbe iniziare aggiungendo pulsanti HTML e quindi scrivere un codice JavaScript per spostare il contenuto di linea di tempo quando gli utenti fanno clic i pulsanti.