Een interactieve HTML-tijdlijn maken Time

Een tijdlijn is een handige manier om een ​​lijst met gebeurtenissen op een webpagina weer te geven, en een interactieve tijdlijn geeft gebruikers enige controle over het bekijken van inhoud. Hoewel er veel manieren zijn om een ​​interactieve tijdlijn te maken, vereisen de meeste meer dan alleen hypertext markup language (HTML). Er is echter één zeer eenvoudige HTML-oplossing. U kunt eenvoudig interactieve schuifbalken voor uw tijdlijn maken door het HTML-kenmerk "style" te gebruiken. Door dit te doen, kunnen de gebruikers van uw tijdlijn naar believen door de inhoud scrollen.

Stap 1

Maak uw HTML-bestand. Open een nieuw document in een teksteditor-softwareprogramma en maak een eenvoudige HTML-pagina. Voeg deze code toe in de HTML-sectie "body":

Het divisie-element ("div") is een container voor de lijst met gebeurtenissen van uw tijdlijn. De "overflow"-waarde van "auto" voegt een interactieve schuifbalk toe wanneer uw tijdlijn breder of hoger wordt dan deze container. Sla de pagina op als "timeline.html".

Stap 2

Maak uw eigen tijdlijninhoud. Voeg in de ruimte tussen de openings- en sluitingstag "div" de gebeurtenissen van uw tijdlijn toe in oplopende of aflopende volgorde. Voeg elke gebeurtenis toe binnen zijn eigen sectie van goed opgemaakte HTML. Blijf de pagina opslaan terwijl u werkt.

Test uw HTML-code. Open de webbrowser van uw computer en laad "timeline.html". Als de inhoud groter is dan de "div"-container, ziet u een interactieve schuifbalk. Pas de waarden voor "breedte" en "hoogte" van de container aan uw verticale of horizontale lay-out aan.