वेबसाइट बनाना खुद को व्यक्त करने का एक शानदार तरीका है। हालांकि कई वेबसाइट निर्माण उपकरण हैं, इसे स्वयं लिखना एक मजेदार तरीका है कि वेबसाइटें पर्दे के पीछे कैसे काम करती हैं। एक अच्छा शुरुआती प्रोजेक्ट एक वेबसाइट बनाना और सीएसएस के साथ एक पृष्ठभूमि छवि जोड़ना है। यह प्रोजेक्ट आपको HTML और CSS दोनों के साथ मिल जाएगा।
CSS क्या है?
CSS कास्केडिंग स्टाइल शीट के लिए है। यह एक प्रोग्रामिंग भाषा है जो आपको मार्कअप भाषाओं को स्टाइल करने की अनुमति देती है। ऐसी ही एक मार्कअप भाषा है एचटीएमएल या हाइपर-टेक्स्ट मार्कअप लैंग्वेज। HTML का उपयोग वेबसाइट बनाने के लिए किया जाता है। यद्यपि आप HTML का उपयोग करके वेबसाइट की कुछ शैली को नियंत्रित कर सकते हैं, लेकिन सीएसएस बहुत अधिक नियंत्रण और डिज़ाइन विकल्प प्रदान करता है।
HTML के साथ एक बेसिक वेबसाइट बनाना
चूंकि सीएसएस सिर्फ एक स्टाइल भाषा है, इसका उपयोग करने के लिए, हमें पहले स्टाइल के लिए कुछ चाहिए। सीएसएस के साथ खेलना शुरू करने के लिए एक बहुत ही बुनियादी वेबसाइट हमारे लिए पर्याप्त होगी। हमारा पृष्ठ "हैलो वर्ल्ड" प्रदर्शित करेगा।
नमस्ते दुनिया
यदि आप HTML से परिचित नहीं हैं, तो चलो जल्दी से सभी तत्वों को पूरा करते हैं। जैसा कि उल्लेख किया गया है, एचटीएमएल एक मार्कअप भाषा है, जिसका अर्थ है कि यह पाठ को चिह्नित करने के लिए टैग का उपयोग करता है। जब भी आप किसी शब्द को घेरे हुए देखते हैं
<> यह एक टैग है। दो प्रकार के टैग हैं, एक टैग जो <> का उपयोग करके अनुभाग की शुरुआत को चिह्नित करता है और एक ऐसा है जो उपयोग करने वाले अनुभाग के अंत को चिह्नित करता हैहमारे उदाहरण में, हमारे पास चार टैग हैं। एचटीएमएल टैग इंगित करता है कि कौन से तत्व वेबसाइट का हिस्सा हैं। सिर टैग में हेडर की जानकारी होती है जो पेज पर प्रदर्शित नहीं होती है लेकिन पेज बनाने के लिए आवश्यक होती है। सभी प्रदर्शित तत्व के बीच हैं तन टैग। हमारे पास केवल एक प्रदर्शित तत्व है, पी टैग। यह वेब ब्राउज़र को बताता है कि टेक्स्ट एक पैराग्राफ है।
सम्बंधित: 10 सरल सीएसएस कोड उदाहरण आप 10 मिनट में सीख सकते हैं
CSS का उपयोग करने के बारे में अधिक जानना चाहते हैं? शुरू करने के लिए इन बुनियादी सीएसएस कोड उदाहरणों की कोशिश करें, फिर उन्हें अपने स्वयं के वेब पृष्ठों पर लागू करें।
HTML में CSS जोड़ना
अब हमारे पास एक सरल पृष्ठ है, हम CSS के साथ शैली को अनुकूलित कर सकते हैं। हमारा पृष्ठ अभी बहुत सरल है, और ऐसा बहुत कुछ नहीं है जो हम कर सकते हैं, लेकिन आइए हम अपने पैराग्राफ को बाहर करना शुरू करते हैं ताकि हम इसे सीमा से जोड़कर पृष्ठभूमि से अलग कर सकें।
नमस्ते दुनिया
अब, हमारा पैरा काली सीमा से घिरा होगा। CSS में एक स्टाइल विवरण जोड़कर हमारे पैराग्राफ टैग में वेबसाइट को बताया गया है कि पैराग्राफ को कैसे स्टाइल किया जाए। हम और विवरण जोड़ सकते हैं। आइए अपने पैराग्राफ के आसपास सफेद-स्पेस या पैडिंग को बढ़ाएं और हमारे टेक्स्ट को केंद्र में रखें।
नमस्ते दुनिया
हमारी वेबसाइट बेहतर दिख रही है, लेकिन हमारा HTML पैराग्राफ टैग में उन सभी विवरणों के साथ गड़बड़ दिखने लगा है। हम इस जानकारी को अपने हेडर में स्थानांतरित कर सकते हैं। हमारा हेडर जानकारी के लिए है जिसे हमें वेबसाइट को सही ढंग से प्रदर्शित करने की आवश्यकता है।
नमस्ते दुनिया
अब हमारा HTML पढ़ना आसान है। आप देखेंगे कि हमें कुछ चीजों को बदलना होगा। स्टाइल टैग वेब ब्राउज़र शैली की जानकारी बताता है, लेकिन यह भी कि शैली क्या है। हमारे उदाहरण में, हमने यह बताने के लिए दो अलग-अलग तरीकों का उपयोग किया है कि क्या शैली है। पी स्टाइल टैग में वेब ब्राउज़र को उस शैली को सभी पैराग्राफ टैग पर लागू करने के लिए कह रहा है। #ourParagraph अनुभाग इसे आईडी के साथ केवल शैली तत्वों को बताता है हमारा अनुच्छेद. नोटिस जो ईद हमारे शरीर में p टैग में जानकारी जोड़ी गई।
अपनी वेबसाइट पर CSS फ़ाइल आयात करना
हेडर में स्टाइल की जानकारी जोड़ने से हमारा कोड पढ़ने में बहुत आसान हो जाता है। हालाँकि, अगर हम कई अलग-अलग पेजों को उसी तरह से स्टाइल करना चाहते हैं, तो हमें उस टेक्स्ट को हर पेज के टॉप पर जोड़ना होगा। यह बहुत काम की तरह प्रतीत नहीं हो सकता है, आप इसे बाद में कॉपी और पेस्ट कर सकते हैं, लेकिन अगर आप किसी तत्व को बाद में बदलना चाहते हैं तो यह बहुत काम करता है।
इसके बजाय, हम CSS जानकारी को एक अलग फाइल में रखने जा रहे हैं और पेज को स्टाइल करने के लिए फाइल को आयात करते हैं। स्टाइल टैग के बीच जानकारी को एक नई CSS फ़ाइल में कॉपी और पेस्ट करें ourCSSfile.css.
पी {
पाठ-संरेखण: केंद्र
}
#ourParagraph {
सीमा-शैली: ठोस;
गद्दी: 30 पीएक्स;
}फिर, फ़ाइल को HTML फ़ाइल में आयात करें।
नमस्ते दुनिया
सीएसएस के साथ एक पृष्ठभूमि छवि जोड़ना
अब आपके पास HTML और CSS में एक ठोस आधार है, पृष्ठभूमि छवि को जोड़ने से केक का एक टुकड़ा होगा। सबसे पहले, पहचानें कि आप किस तत्व को पृष्ठभूमि छवि देना चाहते हैं। हमारे उदाहरण में, हम पूरे पृष्ठ पर एक पृष्ठभूमि जोड़ देंगे। इसका मतलब है कि हम की शैली को बदलना चाहते हैं तन. याद रखें, बॉडी टैग में सभी दृश्य तत्व होते हैं।
तन{
पृष्ठभूमि-छवि: url ("sky.jpg");
}
पी {
पाठ-संरेखण: केंद्र
}
#ourParagraph {
सीमा-शैली: ठोस;
गद्दी: 30 पीएक्स;
}CSS में बॉडी स्टाइल बदलने के लिए, सबसे पहले उपयोग करें तन कीवर्ड। फिर घुंघराले ब्रैकेट जोड़ें जैसा कि हमने {} से पहले किया था। शरीर के लिए शैली की सभी जानकारी घुंघराले कोष्ठक के बीच होनी चाहिए। हम जिस शैली विशेषता को बदलना चाहते हैं, वह है पृष्ठभूमि छवि. कई शैली विशेषताएँ हैं। उन सभी को याद करने की उम्मीद न करें। बुकमार्क a सीएसएस गुण धोखा-शीट उन विशेषताओं के साथ जिन्हें आप याद रखना चाहते हैं।
सम्बंधित: 8 कूल HTML इफेक्ट्स जो कोई भी अपनी वेबसाइट पर जोड़ सकता है
विशेषता के बाद, यह इंगित करने के लिए कि आप विशेषता को कैसे बदलेंगे, एक कॉलन का उपयोग करें। एक छवि आयात करने के लिए, का उपयोग करें url (). यह इंगित करता है कि आप छवि को इंगित करने के लिए लिंक का उपयोग कर रहे हैं। उद्धरण चिह्नों के बीच कोष्ठक में फ़ाइल स्थान रखें। अंत में, अर्धविराम के साथ पंक्ति को समाप्त करें। यद्यपि सीएसएस में सफेद स्थान का अर्थ नहीं है, लेकिन सीएसएस को पढ़ने के लिए आसान बनाने के लिए इंडेंटेशन का उपयोग करें।
हमारा उदाहरण इस तरह दिखता है:
यदि छवि के आकार के कारण आपकी छवि सही ढंग से प्रदर्शित नहीं हो रही है, तो आप छवि को सीधे बदल सकते हैं। हालाँकि, CSS में बैकग्राउंड स्टाइल विशेषताएँ हैं जिनका उपयोग आप बैकग्राउंड को बदलने के लिए कर सकते हैं। पृष्ठभूमि से छोटी छवियां स्वचालित रूप से पृष्ठभूमि में दोहराई जाएंगी। इसे बंद करने के लिए, जोड़ें पृष्ठभूमि दोहराएँ: कोई दोहराने; अपने तत्व के लिए।
एक छवि को पूरी पृष्ठभूमि को कवर करने के दो तरीके भी हैं। सबसे पहले, आप पृष्ठभूमि के आकार को स्क्रीन के आकार के साथ सेट कर सकते हैं पृष्ठभूमि का आकार: 100% 100%;, लेकिन यह छवि को बढ़ाएगा और छवि को बहुत अधिक विकृत कर सकता है। यदि आप नहीं चाहते कि छवि का अनुपात बदल जाए, तो आप पृष्ठभूमि का आकार भी निर्धारित कर सकते हैं आवरण. कवर पृष्ठभूमि छवि को पृष्ठभूमि को कवर कर देगा, लेकिन छवि को विकृत नहीं करेगा।
पृष्ठभूमि का रंग बदलना
चलो एक आखिरी बात बदलते हैं। अब जब हमारे पास एक पृष्ठभूमि है, तो हमारा अनुच्छेद पढ़ना मुश्किल है। आइए इसकी पृष्ठभूमि को सफेद बनाते हैं। प्रक्रिया समान है। जिस तत्व को हम संशोधित करना चाहते हैं वह है #ourParagraph। # इंगित करता है कि "हमारा अनुच्छेद" एक आईडी नाम है। अगला, हम सेट करना चाहते हैं पृष्ठभूमि का रंग सफेद को विशेषता।
तन{
पृष्ठभूमि-छवि: url ("sky.jpg");
}
पी {
पाठ-संरेखण: केंद्र
}
#ourParagraph {
पृष्ठभूमि-रंग: सफेद;
सीमा-शैली: ठोस;
गद्दी: 30 पीएक्स;
}ज्यादा बेहतर।
सीएसएस के साथ अपनी वेबसाइट डिजाइन करने के लिए जारी है
अब जब आप जानते हैं कि विभिन्न HTML तत्वों की शैली को कैसे बदलना है, तो आकाश की सीमा है! शैली की विशेषताओं को बदलने का मूल तरीका एक ही है। उस तत्व को पहचानें जिसे आप बदलना चाहते हैं, और वर्णन करें कि विशेषता को कैसे बदलना है। अधिक जानने का सबसे अच्छा तरीका विभिन्न विशेषताओं के साथ खेलना है। अपने पाठ का रंग बदलने के लिए अपने आप को चुनौती दें।
अपनी खुद की वेबसाइटों और एप्लिकेशन को कोड करने के लिए HTML सीखना चाहते हैं? अपने आप को HTML और CSS सिखाने के लिए इन वेब पेज उदाहरणों और स्रोत कोड का उपयोग करें।
- प्रोग्रामिंग
- एचटीएमएल
- वेब डिजाइन
- सीएसएस
जे। सीटन एक विज्ञान लेखक है जो जटिल विषयों को तोड़ने में माहिर है। उन्होंने सस्काचेवान विश्वविद्यालय से पीएचडी की है; उनके शोध ने छात्र सगाई ऑनलाइन बढ़ाने के लिए खेल-आधारित शिक्षा का उपयोग करने पर ध्यान केंद्रित किया। जब वह काम नहीं कर रही है, तो आप उसे उसके पढ़ने, वीडियो गेम खेलने या बागवानी के साथ पाएंगे।
हमारे न्यूज़लेटर की सदस्यता लें
टेक टिप्स, रिव्यू, फ्री ईबुक और एक्सक्लूसिव डील्स के लिए हमारे न्यूज़लेटर से जुड़ें!
एक और कदम…!
कृपया हमें आपके द्वारा भेजे गए ईमेल में अपने ईमेल पते की पुष्टि करें।