इंटरैक्टिव HTML टाइमलाइन कैसे बनाएं

लेखक: Roger Morrison
निर्माण की तारीख: 28 सितंबर 2021
डेट अपडेट करें: 8 मई 2024
Anonim
केवल HTML CSS JQuery का उपयोग करके आधुनिक समयरेखा कैसे बनाएं?
वीडियो: केवल HTML CSS JQuery का उपयोग करके आधुनिक समयरेखा कैसे बनाएं?

विषय

समयरेखा एक वेब पेज पर घटनाओं की सूची दिखाने के लिए एक उपयोगी तरीका है, और एक इंटरैक्टिव समयरेखा उपयोगकर्ताओं को सामग्री दृश्य पर नियंत्रण देती है। जबकि इंटरैक्टिव टाइमलाइन बनाने के कई तरीके हैं, कई को HTML से अधिक की आवश्यकता होती है। हालांकि, एक बहुत ही सरल HTML समाधान है: आप HTML "शैली" विशेषता का उपयोग करके अपने समयरेखा पर इंटरैक्टिव स्क्रॉलबार बना सकते हैं। ऐसा करने से, उपयोगकर्ता सामग्री को स्वतंत्र रूप से इधर-उधर करने में सक्षम होंगे।

चरण 1

अपनी HTML फ़ाइल बनाएँ। एक टेक्स्ट एडिटर में एक नया दस्तावेज़ खोलें और एक मूल HTML पेज बनाएँ। इस कोड को HTML के "बॉडी" खंड में जोड़ें:

डिवाइडर ("div") आपके समयरेखा में घटनाओं की सूची के लिए एक कंटेनर है। "ओवरफ्लो" में "ऑटो" का मूल्य इंटरैक्टिव स्क्रॉल बार जोड़ता है जब समयरेखा कंटेनर से अधिक लंबी या व्यापक होती है। पृष्ठ को "टाइमलाइन" के रूप में सहेजें।


चरण 2

सामग्री बनाएँ। "Div" टैग के बीच के स्थान में, आरोही या अवरोही क्रम में समयरेखा में घटनाओं को जोड़ें। प्रत्येक ईवेंट को अपने स्वयं के सुव्यवस्थित HTML अनुभाग में जोड़ें। काम करने के दौरान पेज को लगातार सेव करें।

चरण 3

अपने HTML कोड का परीक्षण करें। अपने कंप्यूटर के वेब ब्राउज़र में "टाइमलाइन.html" फाइल खोलें। यदि सामग्री "div" कंटेनर से बड़ी है, तो आपको एक इंटरैक्टिव स्क्रॉल बार दिखाई देगा। अपने ऊर्ध्वाधर या क्षैतिज स्ट्रोक को फिट करने के लिए कंटेनर की "चौड़ाई" और "ऊंचाई" मूल्यों को समायोजित करें।