विषय
- HTML में एक टेबल बनाएं
- चरण 1
- चरण 2
- चरण 3
- चरण 4
- चरण 5
- कैलेंडर कस्टमाइज़ करें
- चरण 1
- चरण 2
- कैलेंडर को {
- चरण 3
- वें कैलेंडर,
- td कैलेंडर {
- चरण 4
- td स्पैन कैलेंडर {
हालाँकि जब यह वेब पेज लेआउट बनाने की बात आती है, तो टेबल अनुकूल हो जाती हैं, फिर भी वे HTML कैलेंडर कोडिंग के लिए अच्छी तरह से काम करती हैं। कैलेंडर्स एक तरह से सारणीबद्ध डेटा प्रदर्शित करते हैं, एक बार जब वे नाम के कॉलम के साथ तारीखों के ग्रिड में व्यवस्थित होते हैं, उदाहरण के लिए, सप्ताह के दिनों के साथ। अतिरिक्त सीएसएस कोड एक कैलेंडर की तरह नाम और संख्या के साथ एक थकाऊ ग्रिड बना देगा। चूंकि एक कैलेंडर पर घटनाओं को स्थान की आवश्यकता होती है, दोनों तिथियों की संख्या और घटनाओं के लिए, तारीखों को प्रारूपित करने के लिए सीएसएस का उपयोग करना भी आवश्यक होगा, जो दोनों सूचनाओं के टुकड़ों को पठनीय रखता है।
HTML में एक टेबल बनाएं
चरण 1
कैलेंडर बनाने के लिए एक तालिका बनाएं। इस तालिका में सात कोशिकाओं के साथ एक हेडर की आवश्यकता होती है, सप्ताह के प्रत्येक दिन के लिए। नियमित टेबल कोशिकाओं की छह पंक्तियाँ बनाना भी आवश्यक है। नोटपैड या एक कोड संपादक की सहायता से अंश को वेब पेज में कॉपी और पेस्ट करें।
| रविवार | सोमवार | मंगलवार | बुधवार | गुरूवार | शुक्रवार | शनिवार |
|---|
यह कोड तालिका और शीर्षक बनाएगा। यदि वेबसाइट अन्य पृष्ठों पर टेबल का उपयोग करती है, तो तालिका "कैलेंडर" नामक एक पहचान नाम का उपयोग करती है।
चरण 2
"" टैग के नीचे बॉडी टैग की एक जोड़ी जोड़ें:
चरण 3
निम्नलिखित कोड को कॉपी करें और इसे "के बीच पेस्ट करें"
" छ: बार:यह कोड प्रत्येक पंक्ति को सात कोशिकाओं के साथ बनाएगा, ताकि उनमें से छह जोड़कर, कैलेंडर में वर्ष के सभी महीनों के लिए आवश्यक सभी डेटा स्थान होंगे।
चरण 4
उस महीने के अनुसार कैलेंडर में तारीखें जोड़ें, जिसे आप दिखाना चाहते हैं। एक वास्तविक कैलेंडर से परामर्श करें और सावधान रहें कि किसी तारीख को छोड़ें या न दोहराएं। प्रत्येक तिथि को "" टैग के साथ संलग्न करें ताकि आप बाद में संख्याओं को अनुकूलित कर सकें:
चरण 5
उन कोशिकाओं में घटनाओं पर ध्यान दें जिनमें प्रासंगिक तिथियाँ हैं। घटनाएँ "" टैग के बाहर होनी चाहिए, लेकिन "" के अंदर
’:
हैलोवीन पार्टी!
पंजीकरण के लिए अंतिम दिन
कैलेंडर कस्टमाइज़ करें
चरण 1
"का पता लगाएँ"
रूपरेखा वैकल्पिक है, लेकिन वर्तमान वेब पृष्ठों पर सीमाओं को जोड़ने के लिए यह सबसे उपयुक्त तरीका है।
चरण 2
अक्षरों के लिए और पृष्ठभूमि के लिए एक रंग के साथ तालिका का शीर्षक अनुकूलित करें:
कैलेंडर को {
रंग: #ffffff; पृष्ठभूमि-रंग: डार्कब्लू; फोंट की मोटाई: बोल्ड; }
हेक्साडेसिमल कोड या रंगों के नाम का उपयोग करना संभव है। यह शीर्षक एक नेवी ब्लू बैकग्राउंड पर सफेद टेक्स्ट प्रदर्शित करेगा।
चरण 3
तालिका कोशिकाओं के सापेक्ष भरण, सीमा, चौड़ाई और स्थिति:
वें कैलेंडर,
td कैलेंडर {
गद्दी: 20 पीएक्स; सीमा: 1px ठोस काला; चौड़ाई: 100px; स्थिति: रिश्तेदार; }
रिलेटिव प्लेसमेंट प्रोग्रामर को बाद में टेबल सेल के कोनों में संख्या के रूप में तारीखें लगाने की अनुमति देता है। एक ऊंचाई निर्धारित न करें, क्योंकि यह प्रतिबंधित करेगा कि आप किसी भी तिथि में कितना पाठ जोड़ सकते हैं।
चरण 4
भरण, पृष्ठभूमि रंग और पूर्ण स्थिति का उपयोग करके संख्या बनाएं:
td स्पैन कैलेंडर {
फोंट की मोटाई: बोल्ड; स्थिति: निरपेक्ष; नीचे: 0; सही: 0; प्रदर्शन क्षेत्र; गद्दी: 5 पीएक्स; पृष्ठभूमि-रंग: #eeeeee; }
वेब पेज पर बक्से के रूप में टैग बनाने के लिए आपको "प्रदर्शन: ब्लॉक" शामिल करना चाहिए, अन्यथा आप उन्हें नहीं भर पाएंगे। यह नमूना कोड प्रत्येक दिनांक स्थान के निचले बाएँ कोने में एक बेहोश ग्रे बॉक्स बनाता है, जो दिनांक संख्या प्रदर्शित करता है।