whycomputer.com >> Cunoștințe despre Internet >  >> Internet

Crearea unei cronologii interactive în HTML

O cronologie este un mod util de a afișa o listă de evenimente pe o pagină web, iar o cronologie interactivă oferă utilizatorilor control asupra modului în care vizualizează conținutul. Deși există numeroase metode pentru a crea o cronologie interactivă, majoritatea implică mai mult decât simpla limbajă HTML. În acest articol vom prezenta o soluție foarte simplă, bazată exclusiv pe HTML, care permite adăugarea de bare de derulare interactive.

Pasul 1: Pregătirea fișierului HTML

Deschideți un editor de text și creați un fișier HTML de bază. În interiorul secțiunii <body> adăugați următorul cod:
<div style="width: 100%; height: 300px; overflow: auto;"> </div>
Elementul div acționează ca un container pentru lista de evenimente. Valoarea overflow: auto; adaugă automat o bară de derulare atunci când conținutul depășește dimensiunile containerului. Salvați fișierul sub numele timeline.html.

Pasul 2: Adăugarea conținutului cronologiei

Între etichetele de deschidere și închidere <div> inserați evenimentele în ordine ascendentă sau descendentă. Fiecare eveniment poate fi structurat în propriul său <section> cu conținut HTML bine format. Salvați de fiecare dată când adăugați sau modificați un eveniment.

Testați fișierul: deschideți-l în browserul preferat. Dacă conținutul depășește dimensiunile containerului div, veți observa o bară de derulare interactivă. Ajustați valorile width și height pentru a obține aspectul dorit.

Sugestii utile

  • În cazul unui layout vertical, plasarea fiecărui eveniment într-un div separat este cea mai simplă soluție.
  • Pentru un layout orizontal, puteți folosi un tabel cu o singură linie și o celulă pentru fiecare eveniment. Asigurați-vă că înălțimea tabelului corespunde înălțimii containerului div și atenție la marginile și padding‑urile verticale.
  • Articolul folosește un stil CSS „inline” (atributul style) pentru a crea bara de derulare. Pentru o mai bună controlabilitate, puteți utiliza un stil intern (în secțiunea <head>) sau extern (un fișier .css).
  • Pentru a extinde interactivitatea, adăugați butoane HTML și scrieți script JavaScript care să modifice poziția cronologiei în funcție de acțiunea utilizatorului.

Materiale necesare

  • Editor de text (ex.: Notepad++, VS Code, Sublime Text)

URL:https://ro.whycomputer.com/Internet/100503388.html

Internet
  • Cum să creezi etichete pentru CD pe Mac

    Crearea etichetelor pentru CD nu mai este rezervată companiilor de muzică sau designerilor grafici. În era backup-urilor digitale, playlisturilor personalizate și documentelor de lucru pe CD, etichetarea eficientă a discurilor devine esențială. Folosind un format standard Avery CD, poți produce etic

  • Ghid complet pentru crearea unui site de matematică

    Introducere Un site de matematică poate fi un instrument util pentru studenți, profesori și oricine dorește să învețe sau să-și actualizeze cunoștințele. De la simplu la complex, totul depinde de scopul tău și de resursele disponibile. În continuare, găsești pașii esențiali pentru a lansa un site de

  • Cum să creezi un site politic și să influențezi opinia publică

    Dacă vrei să devii un comentator politic sau să expui soluții la problemele consiliului local, un site web poate fi instrumentul tău. Internetul transformă pe oricine în jurnalist de buzunar sau expert la scaunul comodă, iar pentru a-ți publica opiniile nu ai nevoie de un titlu de jurnalist sindicat

Cunoștințe despre Internet © https://ro.whycomputer.com