Как да създадем интерактивна HTML хронология

Хронологията е удобен начин за визуализиране на поредица от събития на уеб страница. Интерактивната версия позволява на потребителя да прелиства съдържанието по свой избор. За разлика от сложните решения, можете да постигнете интерактивна лента за превъртане само с HTML и малко CSS, като използвате атрибута style директно в елементите.

Стъпка 1 – Създаване на HTML файл

Отворете любимия текстов редактор и създайте нов документ. Вмъкнете основната HTML структура и в <body> добавете следния контейнер:

<div style="overflow:auto; width:600px; height:400px; border:1px solid #ccc;">
    
</div>

Този div е контейнерът за вашата хронология. Стойността overflow:auto създава лента за превъртане, когато съдържанието надвиши зададените размери. Запазете файла като timeline.html.

Стъпка 2 – Добавяне на съдържание

Между отварящия и затварящия таг <div> поставете отделните събития, подредени във възходящ или низходящ ред. За всеки елемент използвайте добре форматиран HTML, например:

<div class="event">
    <h3>Дата или година</h3>
    <p>Кратко описание на събитието.</p>
</div>

Запазвайте файла след всяка промяна.

Тестване

Отворете timeline.html в браузъра си. Ако съдържанието надвиши размерите на контейнера, ще се появи интерактивна лента за превъртане. При нужда коригирайте стойностите width и height за вертикален или хоризонтален дизайн.

Съвети

Вертикалният дизайн е най‑лесен за реализиране – просто поставете всяко събитие в отделен div. За хоризонтален изглед можете да използвате таблица с един ред, където всяка колона е събитие. Уверете се, че височината на таблицата съвпада с тази на контейнера.
В примера използваме „inline“ CSS – стила е зададен директно в атрибута style. Можете също да преместите стила в <head> като вътрешен CSS, или да създадете отделен външен файл .css. Това ви дава по‑голям контрол върху оформлението.
За по‑голяма интерактивност добавете JavaScript – напр. бутони за превъртане наляво/надясно, които преместват съдържанието на хронологията при клик.

Необходими материали

Текстов редактор (например Visual Studio Code, Sublime Text, Notepad++)

URL:https://bg.whycomputer.com/Internet/100203388.html

Как да промените заглавието на блога в HTML

Как да видим времевия печат в историята на браузъра

Интернет

Как да създадете етикети за CD на Mac

Създаването на етикети за CD вече не е привилегия само на музикалните компании и графичните дизайнери. Днес много хора съхраняват резервни файлове, плейлисти и важни документи на компактдискове, затова персонализираните етикети са полезен начин за организация. Стъпка 1 Отворете Microsoft Word, отиде

Ръководство за създаване на уебсайт за математика

Уебсайт за математика е отличен начин да предложите допълнителна помощ, да създадете пространство за споделяне на бележки и упражнения и да дадете възможност на всеки да учи или да освежи математическите си умения. Сайтът може да бъде прост или сложен – важното е да имате ясни инструкции и примери,

Интернет