Ako vytvoriť interaktívnu časovú os HTML

Časová os je užitočným spôsobom, ako zobraziť zoznam udalostí na webovej stránke, a interaktívna časová os poskytuje používateľom určitú kontrolu nad zobrazovaním obsahu. Aj keď existuje veľa spôsobov, ako vytvoriť interaktívny časový riadok, väčšina si vyžaduje viac než len značkovací jazyk hypertextu (HTML). Existuje však jedno veľmi jednoduché riešenie HTML. Interaktívne posuvníky pre svoj časový riadok môžete ľahko vytvoriť pomocou atribútu „štýl“ HTML. Ak tak urobíte, používatelia vášho časového radu budú môcť prechádzať jeho obsahom tak, ako sa im páči.

Krok 1

Vytvorte svoj súbor HTML. Otvorte nový dokument v softvérovom programe textového editora a vytvorte základnú stránku HTML. Pridajte tento kód do oddielu „telo“ HTML: Prvok delenia („div“) je kontajner pre zoznam udalostí na vašej časovej línii. Hodnota „pretečenia“ „auto“ pridá interaktívny posuvný panel, keď sa časová os rozšíri alebo rozšíri nad tento kontajner. Uložte stránku ako „timeline.html“.

Krok 2

Vytvorte si vlastný obsah časovej osi. Do medzery medzi otváracou a zatváracou značkou „div“ pridajte udalosti na časovej osi vo vzostupnom alebo zostupnom poradí. Pridajte každú udalosť do svojej vlastnej sekcie dobre tvarovaného HTML. Počas práce si stránku ukladajte.

Otestujte si HTML kód. Otvorte webový prehľadávač svojho počítača a nahrajte súbor „timeline.html“. Ak je jeho obsah väčší ako kontajner „div“, zobrazí sa interaktívny posúvač. Upravte hodnoty „šírka“ a „výška“ kontajnera tak, aby vyhovovali vertikálnemu alebo horizontálnemu rozloženiu.

Tipy

Vertikálne rozloženie je najjednoduchšie kódovať. Jednoducho zalomte každú zo svojich sekcií udalosti do svojho vlastného prvku „div“. Pre horizontálne rozloženie môžete použiť tabuľku s jedným riadkom a bunkou stĺpca pre každú udalosť. Ak to urobíte, upravte výšku tabuľky ako výšku kontajnera „div“. Dávajte pozor na vertikálne hodnoty „okrajov“ a „vypchávky“ v tabuľke.

Tento článok vytvára interaktívny posúvač pomocou „vloženého“ kaskádového štýlu (CSS). "Vložené" štýly idú vnútri atribútu "štýl" otváracej značky prvku HTML. Namiesto toho by ste však mohli použiť hárok interných alebo externých štýlov. "Interné" štýly idú do sekcie HTML "head". „Externé“ štýly sú samostatné súbory „.css“. Použitím jedného z týchto typov získate väčšiu kontrolu nad formátovaním akéhokoľvek obsahu HTML.

Interaktivitu príkladu môžete rozšíriť pomocou JavaScriptu. Môžete začať pridaním tlačidiel HTML a potom napísať skript JavaScript, aby ste presunuli obsah časovej rady, keď používatelia kliknú na tlačidlá.

Položky, ktoré budete potrebovať

Program pre textový editor

• Predchádzajúca strana: Ako nájsť časovú pečiatku v histórii prehľadávania Internetu
• Ďalšia strana: Ako upraviť názov blogu v HTML