HTML में टेक्स्ट का विस्तार और संक्षिप्तिकरण कैसे करें

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

एक नया प्रोजेक्ट बनाएं

अपना पसंदीदा वेब डेवलपमेंट टूल खोलें और एक नई वेबसाइट बनाएं। Microsoft के Visual Studio टूल्स का उपयोग यहां किया जाएगा क्योंकि WebDev संस्करण को मुफ्त में डाउनलोड किया जा सकता है और इसमें एक अंतर्निहित वेब सर्वर शामिल है।

एक नया HTML पेज बनाएं

एक नया पृष्ठ default.htm बनाएँ। "प्रोजेक्ट", "आइटम जोड़ें" पर क्लिक करें और फिर "HTML पेज" चुनें और इसे default.htm नाम दें। यदि कोई default.aspx फ़ाइल पहले से मौजूद है, तो उसे हटा दें। HTML या मार्कअप दृश्य पर स्विच करें और टैग के बाद निम्न कोड जोड़ें।

नमूना पृष्ठ

नमूना पृष्ठ

1? शीर्षक 1

2? शीर्षक २

H3 टैग एक पेज हेडर बनाता है जिसका शीर्षक है "नमूना पृष्ठ", इसके बाद एक रूपरेखा की दो पंक्तियाँ। प्रत्येक पंक्ति एक संख्या, एक प्रश्न चिह्न और एक शीर्षक के साथ शुरू होती है। प्रश्न चिह्न लंगर से घिरा हुआ है ((टैग जो उन्हें क्लिक करने योग्य लिंक में बदल देते हैं। प्रत्येक शीर्षक के बाद, हमने एक खाली div टैग जोड़ा है जहां अतिरिक्त पाठ सम्मिलित किया जा सकता है

जावास्क्रिप्ट जोड़ें

एक जावास्क्रिप्ट फंक्शन जोड़ें जिसे प्रत्येक प्रश्न चिह्न लिंक द्वारा इस प्रकार सक्रिय किया जा सकता है:

लिंक में से प्रत्येक जावास्क्रिप्ट फ़ंक्शन help_click, div tagname और कुछ अतिरिक्त पाठ को पास करता है। फ़ंक्शन पहले देखता है कि क्या div टैग खाली है (div.innerHTML == "")। यदि टैग खाली है, तो कोड एक लाइन ब्रेक जोड़ता है (

), तीन रिक्त अक्षर () पाठ के बाद। यदि div में पहले से ही टेक्स्ट है, तो div टैग के अंदर का मार्कअप साफ हो जाता है।

नए पृष्ठ का परीक्षण करें

कोड का परीक्षण करें। Visual Studio के लिए, "F5" कुंजी पर क्लिक करें। जब पृष्ठ प्रकट होता है, तो प्रश्न चिह्न पर क्लिक करें। पहली बार पंक्ति 1 में दिए गए लिंक पर क्लिक किया जाता है, तो पाठ "अतिरिक्त शीर्षक 1 के लिए पाठ" पाठ को शामिल करने का विस्तार करता है। दूसरी बार जब लिंक पर क्लिक किया जाता है, तो टेक्स्ट चला जाता है। थोड़ा रचनात्मक कोड के साथ, इसी तकनीक का उपयोग पेड़ के दृश्य बनाने, जटिल रूपरेखा या सहायता पाठ दिखाने और छिपाने के लिए किया जा सकता है।

लोकप्रिय पोस्ट