Създаване на интерактивен HTML Timeline

Времевата линия е полезен начин за показване на списък от събития на уеб страница, а интерактивна времева линия дава на потребителите някакъв контрол върху съдържанието. Въпреки че съществуват много начини за създаване на интерактивна времева линия, повечето изискват повече от език за маркиране на хипертекст (HTML). Въпреки това, има едно много просто HTML решение. Можете лесно да създавате интерактивни ленти за превъртане за вашата времева линия, като използвате атрибута "стил" на HTML. По този начин потребителите на времевата линия ще могат да преглеждат съдържанието му както им харесва.

Стъпка 1
Създайте HTML файл. Отворете нов документ в софтуерна програма за текстов редактор и създайте основна HTML страница. Добавете този код в секцията "тяло" на HTML: Елементът за разделяне ("div") е контейнер за списъка с събития във вашата времева линия. Стойността "препълване" на "автоматично" добавя интерактивен лента за превъртане, когато времето ви се разширява или надвишава този контейнер. Запазете страницата като "timeline.html".

Стъпка 2
Създайте свое собствено съдържание за времева линия. В пространството между началните и затварящите маркери „div“ добавете събитията във времевата линия във възходящ или низходящ ред. Добавете всяко събитие в своя раздел на добре оформен HTML. Продължавайте да запазвате страницата, докато работите.
Проверете HTML кода си. Отворете уеб браузъра на компютъра си и заредете „timeline.html“. Ако съдържанието му е по-голямо от контейнера "div", ще видите интерактивна лента за превъртане. Настройте стойностите на ширината и височината на контейнера, за да съответстват на вертикалното или хоризонталното оформление.

Съвети
Вертикалните оформления са най-лесни за кодиране. Просто обгърнете всяка от секциите на събитието в собствения си елемент "div". За хоризонтално оформление можете да използвате таблица с един ред и клетка на колона за всяко събитие. Ако направите това, направете височината на вашата маса същата като височината на контейнера. Погрижете се за стойностите на вертикалната "граница" и "подплата" на таблицата.
Тази статия създава интерактивен плъзгач с помощта на "inline" каскаден стилов лист (CSS). "Inline" стиловете влизат в атрибута "style" на началния маркер на HTML елемент. Вместо това можете да използвате "вътрешен" или "външен" стилов лист. "Вътрешни" стилови листове влизат в секцията "главата" на HTML. "External" style sheets са отделни ".css" файлове. Използването на един от тези типове ви дава по-голям контрол върху форматирането на HTML съдържание. Можете да разширите интерактивността на примера, като използвате JavaScript. Можете да започнете с добавяне на HTML бутони и след това да напишете JavaScript, за да преместите съдържанието на времевата линия, когато потребителите кликнат върху бутоните.

Елементи, от които се нуждаете