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

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

चरण 1

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

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

चरण दो

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

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