यह लेख HTML और CSS का उपयोग करके हेडर बनाने की चरण-दर-चरण प्रक्रिया को प्रदर्शित करता है जिसमें निम्न शामिल होंगे:
- एक शीर्षलेख अनुभाग बनाना
- एक नेविगेशन बार बनाना
- नेवबार मदों में शैलियाँ लागू करना
- नेवबार आइटम में होवर इफेक्ट जोड़ना
HTML और CSS का उपयोग करके हेडर बनाने की प्रक्रिया क्या है?
हेडर परिभाषित करता है जिसमें वेबसाइट के बारे में सबसे महत्वपूर्ण जानकारी होती है। इसमें ज्यादातर एक लोगो, वेबसाइट का शीर्षक, एक खोज बार और नेविगेशन मेनू आइटम होते हैं जो उपयोगकर्ता को अन्य पृष्ठों पर जाने में मदद करते हैं।
हेडर बनाने के लिए नीचे दिए गए चरणों का पालन करें:
चरण 1: हैडर अनुभाग बनाएँ
HTML फ़ाइल में, ' <शीर्षलेख> ” टैग का उपयोग हेडर के लिए एक सेक्शन बनाने के लिए किया जाता है। ' <दिव> ' या ' <अनुभाग> ” टैग का भी उपयोग किया जा सकता है लेकिन “ का उपयोग करना एक अच्छा अभ्यास है <शीर्षलेख> ' उपनाम। अगला, असाइन करें ' हैडर हेडर अनुभाग पर सीएसएस शैलियों को लागू करने के लिए वर्ग। उसके बाद, 'जोड़ें' <एच1> 'इसमें टैग करें और इसे' का एक वर्ग असाइन करें शीर्षक ' सामग्री प्रदर्शित करने के लिए 'लिनक्सहिंट में आपका स्वागत है!':
<शीर्षक कक्षा = 'शीर्षक' >
< एच 1 कक्षा = 'शीर्षक' > लिनक्सहिंट में आपका स्वागत है! < / एच 1 >
< / हेडर>
उसके बाद, 'का चयन करें <शीर्षलेख> ” वर्ग को टैग करें और निम्नलिखित शैलियों को असाइन करें:
.शीर्षक {
पृष्ठभूमि-छवि: url ( '../bg.jpg' ) ;
पृष्ठभूमि- आकार : ढकना;
बैकग्राउंड-रिपीट: नो-रिपीट;
रंग : सफेद धुआं;
पृष्ठभूमि-स्थिति: शीर्ष;
गद्दी: 0px 20px 20px 20px;
}
उपरोक्त कोड की व्याख्या नीचे उल्लिखित है:
- सबसे पहले, छवि सेट करें ' bg.jpg '' का उपयोग करके हेडर अनुभाग के लिए एक पृष्ठभूमि के रूप में पृष्ठभूमि छवि ' संपत्ति।
- अगला, ' पृष्ठभूमि-आकार ' और ' पृष्ठभूमि दोहराएँ ”गुणों का उपयोग क्रमशः छवि आकार सेट करने और छवि पुनरावृत्ति को रोकने के लिए किया जाता है।
- इसके बाद टेक्स्ट के कलर और इमेज की पोजीशन को “की मदद से टॉप पर सेट करें। रंग ' और ' पृष्ठभूमि स्थिति ' गुण।
- अंत में, ' गद्दी ” संपत्ति का उपयोग हेडर सामग्री और सीमा के बीच एक स्थान निर्धारित करने के लिए किया जाता है।
उपरोक्त कोड को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट प्रदर्शित करता है कि हेडर सेक्शन बनाया गया है, और उस पर CSS शैलियाँ लागू की गई हैं।
चरण 2: एक नेविगेशन बार बनाएँ
ज्यादातर मामलों में हेडर में एक नेविगेशन बार भी हो सकता है। नेवबार HTML के निर्माण के लिए ' <कोई नहीं> ” टैग बहुत उपयोगी हो सकता है। इसलिए, 'का उपयोग करके नेवबार आइटम जोड़ें' <क> 'टैग करें और' का एक वर्ग असाइन करें कार्य ':
<शीर्षक कक्षा = 'शीर्षक' ><कोई नहीं>
< ए कक्षा = 'कार्य' href = '#' >घर< / ए >
< ए कक्षा = 'कार्य' href = '#' > सेवाएं< / ए >
< ए कक्षा = 'कार्य' href = '#' > हमारे बारे में< / ए >
< ए कक्षा = 'कार्य' href = '#' >हमसे संपर्क करें< / ए >
< ए कक्षा = 'कार्य' href = '#' >नए आगमन< / ए >
< / नहीं>
< बीआर < बीआर >
< एच 1 कक्षा = 'शीर्षक' > लिनक्सहिंट में आपका स्वागत है! < / एच 1 >
< / हेडर>
उपरोक्त कोड को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट दिखाता है कि नेवबार आइटम ' घर ”, “ सेवाएं ”, “ हमारे बारे में ”, “ संपर्क करें ' और ' नवागन्तुक ' निर्मित किया जा चुका है।
चरण 3: नवबार मदों पर शैलियाँ लागू करें
नेवबार आइटम को शैलीबद्ध करने के लिए, “चुनें” कार्य ” वर्ग और निम्नलिखित सीएसएस शैलियों गुण असाइन करें:
।कार्य {पाठ-सजावट: कोई नहीं;
रंग : सफ़ेद;
प्रदर्शन क्षेत्र;
पैडिंग: 15 पीएक्स;
फॉन्ट- आकार : बड़ा;
नाव छोड़ी;
मार्जिन: 0 पीएक्स 20 पीएक्स;
}
उपरोक्त कोड की व्याख्या है:
- पहले ' text-decoration ' की पूर्वनिर्धारित स्टाइल को हटाने के लिए ' संपत्ति 'कोई नहीं' पर सेट है <क> ' उपनाम।
- उपयोगकर्ता के लिए टेक्स्ट दृश्यता बढ़ाने के लिए, ' सफ़ेद ' और ' बड़ा 'मान' को प्रदान किए जाते हैं रंग ' और यह ' फ़ॉन्ट आकार ' संपत्ति।
- उसके बाद, ' दिखाना ' और ' तैरना 'गुण मदद करते हैं' <क> ” टैग एक ही लाइन पर प्रदर्शित होने के लिए।
- अंत में, ' गद्दी ' और ' अंतर ” गुण मानों का उपयोग प्रत्येक “ ” टैग के बीच स्थान बनाने के लिए किया जाता है।
उपरोक्त कोड को क्रियान्वित करने के बाद, वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट दिखाता है कि नेवबार आइटम अब स्टाइल किए गए हैं।
चरण 4: नेवबार आइटम में होवर इफेक्ट जोड़ें
जैसा कि उपरोक्त आउटपुट में, नेवबार आइटम पर होवर प्रभाव उपलब्ध नहीं है। दोनों को जोड़ने के लिए, 'चुनें' शीर्षक ” वर्ग जिसे “को सौंपा गया है” <एच1> ' उपनाम। उसके बाद, 'जोड़ें' : होवर 'के साथ चयनकर्ता' कार्य नेवबार आइटम पर होवर प्रभाव लागू करने के लिए वर्ग:
अधिनियम: होवर {सीमा : 2px ठोस सफेद;
रंग : नीला बैंगनी;
}
शीर्षक {
मूलपाठ- संरेखित : केंद्र;
अंतर: 18 % 0 पीएक्स;
}
उपरोक्त कोड की व्याख्या नीचे दी गई है:
- सबसे पहले, 'सेट करें' सीमा 'एक 2px प्रकार के ठोस और एक सफेद निर्दिष्ट करें' रंग ”। इसके साथ, 'सेट करें नीला बैंगनी ” रंग केवल तभी जब माउस नेवबार आइटम पर उपयोगकर्ता द्वारा मँडराया जाता है।
- अगला, 'का चयन करें शीर्षक 'कक्षा और इसके संरेखण को' पर सेट करें केंद्र ” और सेक्शन को बड़ा दिखाने के लिए कुछ मार्जिन प्रदान करें।
उपरोक्त कोड को निष्पादित करने के बाद, हेडर का अंतिम रूप इस तरह दिखता है:
उपरोक्त आउटपुट प्रदर्शित करता है कि हेडर HTML और CSS का उपयोग करके बनाया गया है।
निष्कर्ष
HTML फ़ाइल में, “<शीर्षलेख>” टैग का उपयोग शीर्षलेख के लिए एक अनुभाग बनाने के लिए किया जाता है। उसके बाद, उपयोगकर्ता हेडर सेक्शन को बढ़ाने के लिए सीएसएस गुणों जैसे पैडिंग और पृष्ठभूमि छवियों को लागू कर सकते हैं। यह नेविगेशन बार जैसे सभी हेडर तत्वों पर लागू होता है। एक नेविगेशन बार बनाने के लिए, उपयोगकर्ता '<नेव>' टैग का उपयोग 'के साथ' कर सकते हैं <क> ” टैग। इस लेख में दिखाया गया है कि HTML और CSS का उपयोग करके हेडर कैसे बनाया जाता है।