वेबसाइट को कैसे कोड करें

वेबसाइट को कैसे कोड करेंHTML और CSS के साथ वेबसाइट बनाना सीखना चाहते हैं?


आप सही जगह पर हैं इस गाइड में, हम आपको एक खाली स्क्रीन से एक काम करने वाली वेबसाइट तक पहुंचने के लिए सभी चरणों को दिखाते हैं जो एक ही समय में अनुकूलित और काफी अच्छी दिखती हैं।.

लेकिन सबसे पहले, HTML और CSS क्या है?

ठीक है, आप विकिपीडिया में दोनों शब्दों को देख सकते हैं, लेकिन वे परिभाषाएँ बहुत पाठक के अनुकूल नहीं हैं। आइए चीजों को थोड़ा सरल करें:

  • एचटीएमएल (हाइपरटेक्स्ट मार्कअप लैंग्वेज) एक वेब पेज की संरचना और सामग्री को परिभाषित करता है – कहाँ पे चीजें चलती हैं, किस तरह उन्हें बाहर रखा गया है, और क्या पेज पर
  • सीएसएस (कैस्केडिंग स्टाइल शीट्स) को परिभाषित करता है स्टाइल / प्रस्तुति एक वेब पेज और उस पर तत्वों की

आपके पास वास्तव में एक के बिना एक नहीं हो सकता है – दो अंतिम वेब पेज, इसकी डिजाइन और उस पर सामग्री बनाने के लिए एक साथ काम करते हैं।.

ध्यान दें; जब हम “एक वेब पेज” कहते हैं, तो हमारा मतलब है कि एक एकल HTML दस्तावेज़ – एक पेज जो आपकी वेबसाइट का हिस्सा है। जबकि, “एक वेबसाइट” पूरी बात है – आपकी पूरी साइट अपने सभी व्यक्तिगत वेब पेजों के साथ.

HTML और CSS (सामग्री की तालिका) का उपयोग करके वेबसाइट कैसे बनाएं:

  1. HTML की मूल बातें जानें
  2. HTML दस्तावेज़ संरचना को समझें
  3. CSS चयनकर्ताओं को जानें
  4. एक सीएसएस स्टाइलशीट को एक साथ रखें
  5. बूटस्ट्रैप प्राप्त करें
  6. एक डिज़ाइन चुनें
  7. HTML और CSS के साथ अपनी वेबसाइट को कस्टमाइज़ करें
  8. सामग्री और चित्र जोड़ें
  9. फाइन-ट्यून रंग और फोंट
  10. अतिरिक्त पृष्ठ बनाएं

वेबसाइट बनाने के लिए कुल समय: 4-5 घंटे
कौशल स्तर: मध्यम

यदि आपको लगता है कि यह बहुत जटिल है, तो हम अनुशंसा करते हैं कि या तो वर्डप्रेस का उपयोग करके एक वेबसाइट बनाई जाए या वेबसाइट बिल्डरों में से किसी एक को चुना जाए। आप वेब विकास के लिए चयनित सर्वश्रेष्ठ IDE की सूची भी देख सकते हैं. 

Contents

शुरू करने से पहले, अपने संसाधनों को इकट्ठा करें:

इसलिए, HTML और CSS के साथ वेबसाइट बनाने से पहले आपको जो पहली चीज चाहिए वह एक वेब सर्वर (होस्टिंग) है। हालांकि चिंता मत करो; आपको अपनी मशीन नहीं खरीदनी होगी कई वेब होस्टिंग कंपनियां आपको उनकी मशीनों पर एक साधारण होस्टिंग सेवा बेच देंगी। “वेब होस्टिंग” के लिए बस Google और कुछ ऐसा चुनें जो बहुत महंगा न हो.

सर्वर को क्रमबद्ध करने के साथ, आपको जो अगली चीज़ चाहिए वह है डोमेन नाम। डोमेन नाम वह है जिसे वेब पर वेबसाइट की पहचान की जाती है। उदाहरण के लिए, इस साइट का डोमेन नाम है websitesetup.org.

जब आपके पास एक डोमेन नाम और एक सर्वर होता है, तो आप दोनों को एक साथ जोड़ सकते हैं.

पूरा खुलासा: यदि आप इस गाइड में हमारे रेफ़रल लिंक के माध्यम से ब्लूहोस्ट को खरीदते हैं तो हम एक कमीशन कमाते हैं। यह हमें WebsiteSetup को चालू रखने और अप-टू-डेट रखने में मदद करता है। आपके समर्थन के लिए धन्यवाद.

आपके अंत में बिना किसी दर्द के साथ इसे हल करने के लिए, हम जैसी कंपनी के साथ साइन अप करने की सलाह देते हैं Bluehost.

वे आपके लिए सभी सेटअप को संभाल लेंगे। मतलब है कि वे करेंगे: (ए) आपके लिए एक होस्टिंग खाता स्थापित करें, (ख) अपनी ओर से एक डोमेन नाम पंजीकृत करें, (सी) एक साथ काम करने के लिए सब कुछ कॉन्फ़िगर करें, और (घ) आपको एक आसान उपयोग वाले डैशबोर्ड तक पहुंच प्रदान करता है.

आगे बढ़ें और साइन अप करें Bluehost, खैर इंतजार करो। जब आप वापस आ जाएं और आपके वेब सर्वर को कॉन्फ़िगर कर दिया जाए और जाने के लिए तैयार हों, तो अगले चरण पर स्क्रॉल करें.

अनुलेख यदि आप बस अपने कंप्यूटर पर एक HTML वेबसाइट के साथ प्रयोग करना चाहते हैं, और इसे सार्वजनिक करने का इरादा नहीं है, एक स्थानीय वेब सर्वर सॉफ्टवेयर का उपयोग करें। जिसे हम उपयोग करने की सलाह देते हैं और उसे कहते हैं XAMPP. इसके मैक और पीसी दोनों संस्करण हैं, और इसका उपयोग करना आसान है। यहां बताया गया है रास्ता बताने वाला सहायक इसे अपने कंप्यूटर पर कैसे स्थापित करें.

1. HTML की मूल बातें जानें

HTML संरचना का मुख्य तत्व एक HTML है टैग.

एक टैग, उदाहरण के लिए, इस तरह दिखता है:

कुछ कुछ

यहाँ, हम एक के साथ काम कर रहे हैं टैग। यह एक होगा साहसिक पाठ का एक टुकड़ा जो शुरुआती टैग के बीच है () और समापन टैग ()। इस स्थिति में, पाठ का वह भाग है कुछ कुछ.

लेकिन अन्य टैग हैं, बस कुछ नाम रखने के लिए:

  • ... खुलने और बंद होने वाले टैग के बीच पाठ को इटैलिकाइज करेगा
  • ... इसे रेखांकित करेंगे
  • ...

    पाठ का एक पैराग्राफ है


  • ...

    पृष्ठ पर मुख्य हैडर है

उन सरल टैगों के अलावा, अधिक जटिल टैग भी हैं। उदाहरण के लिए, यदि आप निम्नलिखित की तरह एक सूची बनाना चाहते हैं:

  • वस्तु 1
  • मद २
  • मद ३

… आप निम्न HTML कोड के साथ ऐसा कर सकते हैं:

  • वस्तु 1
  • मद २
  • मद ३

या, यदि आप किसी अन्य पेज का लिंक जोड़ना चाहते हैं, तो इस तरह:

यह हमारे होमपेज की एक कड़ी है

… आप कोड के इस टुकड़े के साथ कर सकते हैं:

यह मेरे होमपेज का लिंक है

पाने के लिए इसे पढ़ें HTML टैग्स की पूरी सूची. जैसे ही आप HTML और CSS के साथ वेबसाइट बना रहे हैं, यह उपयोगी हो जाएगा.

2. HTML डॉक्यूमेंट स्ट्रक्चर को समझें

अपने HTML पृष्ठ के बारे में सोचें जैसे कि यह Legos द्वारा बनाया गया था। आप दिए गए बड़े ढांचे के साथ अलग ईंटों को एक दूसरे के ऊपर रख देते हैं.

लेकिन लेगो ईंटों के बजाय, आपको HTML टैग मिलते हैं …

यहाँ सरलतम HTML दस्तावेज़ संरचना है:





नमस्ते दुनिया!


नमस्ते दुनिया!

मेरा पहला वेब पेज.

आप ऊपर दिए गए कोड को ले सकते हैं, कॉपी कर सकते हैं और इसे एक नई फ़ाइल में पेस्ट कर सकते हैं, दस्तावेज़ को सहेज सकते हैं index.html, और यह पूरी तरह से मान्य HTML पृष्ठ है.

आइए इस कोड के अलग-अलग हिस्सों की व्याख्या करें:

  • – दस्तावेज़ की प्रारंभिक घोषणा
  • – एक और घोषणा; कहते हैं कि आगे आने वाला एक HTML दस्तावेज़ अंग्रेजी में लिखा गया है
  • – की शुरुआत के निशान सिर अनुभाग; सिर अनुभाग वह जगह है जहां पृष्ठ के सभी मूल पैरामीटर चलते हैं; उनमें से अधिकांश स्क्रीन पर दिखाए जाने वाले नहीं हैं; वे बस परिभाषित करते हैं कि हुड के नीचे क्या चल रहा है
  • – यह निर्धारित करता है कि दस्तावेज़ लिखने के लिए किस वर्ण सेट का उपयोग किया जाता है; इस पर बहुत अधिक समय खर्च करने की आवश्यकता नहीं है; बस इस घोषणा का उपयोग करें
  • नमस्ते दुनिया! – पृष्ठ का शीर्षक; यह वही है जो लोग अपने ब्राउज़र के शीर्षक बार में देखेंगे, उदा .:

HTML और CSS के साथ वेबसाइट बनाते समय वेब ब्राउज़र में शीर्षक

  • – की शुरुआत के निशान तन अनुभाग; यह वह जगह है जहाँ पृष्ठ की सभी सामग्री जाती है; यह एक HTML दस्तावेज़ का मुख्य भाग है; आइए हम इस पर ज़ोर दें, यह वह जगह है जहाँ आप वे सभी सामग्री शामिल करने जा रहे हैं जो पृष्ठ पर दिखाई देने वाली हैं

  • नमस्ते दुनिया!

    – पेज पर मुख्य हैडर

  • मेरा पहला वेब पेज.

    – पाठ का एक सरल पैराग्राफ

  • – संपूर्ण HTML दस्तावेज़ का समापन टैग

एक महत्वपूर्ण नोट यहाँ। एक मूल पाठ ऐप में एक HTML फ़ाइल पर काम करना या एमएस वर्ड जैसे जटिल टेक्स्ट प्रोसेसर एक अच्छा अनुभव नहीं है। चीजों को खुद पर आसान बनाने के लिए, नामक एक उपकरण स्थापित करें उदात्त पाठ. इसके मैक और पीसी दोनों संस्करण हैं, और यह मुफ़्त है.

यह बेहतर क्यों है? अन्य बातों के अलावा, यह HTML फ़ाइल के सिंटैक्स को रंग देगा। इसका अर्थ यह है कि यह आपके HTML टैग्स को पाठ सामग्री, टैग मापदंडों और अन्य मूल्यों से अलग करता है। असल में, यह सब पठनीय हो जाएगा। यहां हमारी सरल HTML संरचना क्या है, यह उदात्त पाठ में दिखता है:

HTML और CSS के साथ वेबसाइट बनाते समय उदात्त सिंटैक्स बहुत अच्छा है

ठीक है, विषय पर वापस। आप वह नया ले सकते हैं index.html आपकी फ़ाइल, उसे कॉपी करें जहां आपके वेब सर्वर की मुख्य निर्देशिका है, और फिर उस पेज को वेब ब्राउज़र के माध्यम से नेविगेट करके देखें। हालांकि बहुत उत्साहित मत हो; यह पृष्ठ बल्कि बदसूरत होगा (नीचे देखें).

यह पृष्ठ बदसूरत है

ठीक है, तो पृष्ठ बदसूरत है, इसे कैसे बनाया जाए?

3. सीएसएस चयनकर्ताओं को जानें

जैसे HTML में इसके टैग हैं, वैसे ही CSS है चयनकर्ताओं.

चयनकर्ता बताते हैं कि किसी दिए गए तत्व को उपस्थिति-वार कैसे व्यवहार करना चाहिए। यहाँ एक CSS चयनकर्ता का उदाहरण दिया गया है:

पी {
फ़ॉन्ट-आकार: 18 पीएक्स;
}

यह चयनकर्ता इंगित करता है कि सभी HTML

दस्तावेज़ के भीतर टैग में 18px का फ़ॉन्ट आकार होगा.

हालांकि, सीएसएस चयनकर्ताओं का उपयोग करने का एक अधिक व्यावहारिक तरीका किसी दिए गए प्रकार के सभी टैग को एक निश्चित स्टाइल तक सीमित नहीं करना है, बल्कि अलग-अलग “कक्षाएं” बनाना और उन्हें एक-एक करके टैग करने के लिए असाइन करना है।.

उदाहरण के लिए, CSS में एक वर्ग चयनकर्ता इस तरह दिखता है:

.सामान्य-पाठ {
फ़ॉन्ट-आकार: 18 पीएक्स;
}

डॉट को नोटिस करें (.) वर्ग के नाम से पहले (सामान्य-पाठ)। “सामान्य-पाठ” वर्ग को परिभाषित करने के साथ, अब हम उस वर्ग को उन विशिष्ट HTML टैगों को सौंप सकते हैं जिन्हें हम आकार में 18px बनाना चाहते हैं.

उदाहरण के लिए:

यह पाठ 18px होने जा रहा है.

उपरोक्त सीएसएस कोड के सभी तत्वों को समझाने के लिए एक और मिनट का समय दें:

  • .सामान्य-पाठ – वर्ग परिभाषा; वर्ग के नाम और उद्घाटन और समापन कोष्ठक के बीच सब कुछ {} परिभाषित करता है कि इस वर्ग को दिए गए तत्व क्या दिखेंगे
  • फ़ॉन्ट आकार – एक उदाहरण सीएसएस संपत्ति
  • 18px – संपत्ति को सौंपा गया एक मूल्य

ऊपर से अलग सीएसएस संपत्तियों का एक टन है फ़ॉन्ट आकार. यहाँ है पूरी लिस्ट यदि आप उत्सुक हैं.

4. एक सीएसएस स्टाइलशीट एक साथ रखें

एक HTML दस्तावेज़ बहुत संरचनात्मक है – प्रत्येक तत्व का अपना स्थान है, और तत्वों का क्रम अंतिम निर्माण और प्रश्न में वेब पेज की उपस्थिति के लिए महत्वपूर्ण है। एक सीएसएस दस्तावेज़ बहुत कम है.

सीएसएस दस्तावेजों को अक्सर कहा जाता है स्टाइलशीट. असल में, सीएसएस स्टाइलशीट सभी वर्ग परिभाषाओं की एक सूची है जो संबंधित HTML दस्तावेज़ में उपयोग की जा रही हैं। वर्ग परिभाषाओं का क्रम उस समय का सबसे महत्वपूर्ण नहीं है (कम से कम सरल डिजाइनों के लिए).

जिस तरह से आपने एक सीएसएस स्टाइलशीट को एक साथ रखा है वह प्रत्येक वर्ग को एक-एक करके परिभाषित करने और फिर आपके पृष्ठ के डिजाइन में परिणाम का परीक्षण करना है।.

यह थकाऊ काम की तरह लगता है, और यह है.

लेकिन हम चीजों को आप पर आसान बना देंगे, न कि आपको HTML और CSS डिज़ाइन को हाथ से सीखने के लिए मजबूर करेंगे। आपको खरोंच से सब कुछ सिखाने के बजाय, हम एक जीवित जीव लेंगे और इसके तत्वों को विच्छेदित करेंगे.

यह वह जगह है जहां बूटस्ट्रैप नामक एक चीज खेल में आती है.

5. बूटस्ट्रैप डाउनलोड और इंस्टॉल करें

बूटस्ट्रैप HTML और CSS के साथ एक वेबसाइट बनाने के लिए एक ओपन-सोर्स टूलकिट है.

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

असल में, बूटस्ट्रैप आपको खरोंच से शुरू नहीं होने देता है, और इसके बजाय मज़ेदार हिस्से में सही जाता है। इसके साथ, आपको HTML और CSS के साथ एक वेबसाइट बनाने के अक्सर उबाऊ शुरुआती चरणों पर काम करना होगा.

आपके द्वारा लिए जा सकने वाले दो रास्ते हैं:

  • विकल्प (ए): बूटस्ट्रैप सीखें – बूटस्ट्रैप होमपेज पर जाएं, मुख्य बूटस्ट्रैप पैकेज डाउनलोड करें और उसके शीर्ष पर निर्माण शुरू करें.
  • विकल्प (ख): एक शॉर्टकट लें – बूटस्ट्रैप के लिए एक अच्छी दिखने वाली डिज़ाइन और पहले से निर्मित डेमो वेब पेज के साथ स्टार्टर पैक प्राप्त करें.

विकल्प (ए) शुरुआत में कुछ सीखने की अवस्था हो सकती है, लेकिन यह HTML और CSS के साथ वेबसाइट बनाने के लिए किसी भी तरह से बदतर तरीका नहीं है। एक बार जब आप मुख्य बूटस्ट्रैप संरचना में महारत हासिल कर लेते हैं, तो आपके लिए नए पृष्ठ बनाना और उन्हें वैसा ही बनाना आसान हो सकता है, जैसा आप चाहते हैं। बूटस्ट्रैप प्रलेखन इस मार्ग से आरंभ करने के लिए एक शानदार जगह है.

हम विकल्प के साथ जाने वाले हैं (ख) इस गाइड के लिए। हम कुछ कारणों से ऐसा कर रहे हैं, उनमें से प्रमुख:

एक तैयार किए गए ढांचे के साथ शुरू करना HTML दस्तावेज़ की बुनियादी आवश्यकताओं का पता लगाने की कोशिश में बहुत दर्द बचाता है। यह आपको दिलचस्प सामग्री पर ध्यान केंद्रित करने देता है – जैसे कि सामग्री रखना और इसे अच्छा बनाना.

संक्षेप में, इस तरह से चीजें सीखना आपको बेहतर दिखने वाला परिणाम देगा, जो हमें लगता है कि आप क्या चाहते हैं.

6. एक डिजाइन चुनें

जब आप HTML और CSS के साथ एक वेबसाइट बना रहे हैं, तो आप अपने पसंद के किसी भी बूटस्ट्रैप टेम्पलेट का उपयोग करने के लिए स्वतंत्र हैं। उन्हें सभी को समान रूप से काम करना चाहिए.

हालाँकि, इस गाइड के लिए, हम किसी एक टेम्पलेट का उपयोग करने जा रहे हैं बूटस्ट्रैप प्रारंभ करें. उनके पास मुफ्त टेम्पलेट्स का एक अच्छा चयन है जो अनुकूलित हैं, परेशानी से मुक्त हैं, और बहुत अच्छी तरह से डिज़ाइन किए गए हैं.

हम जिस विषय का उपयोग करने जा रहे हैं उसे कहा जाता है रचनात्मक. हम जिस अंतिम प्रभाव के लिए जा रहे हैं वह कुछ इस तरह दिखाई देगा:

HTML और CSS के साथ वेबसाइट बनाने के बाद अंतिम होमपेज

क्रिएटिव टेम्पलेट के साथ शुरू करने के लिए, पर क्लिक करें मुफ्त डाउनलोड बटन जो दाईं ओर है (चालू) यह पन्ना) और ज़िप पैकेज को अपने डेस्कटॉप पर सहेजें.

पैकेज को अनज़िप करें और अपनी सामग्री को अपने स्थानीय वेब सर्वर या अपने वेब होस्टिंग खाते की मुख्य निर्देशिका में स्थानांतरित करें.

अब अपने वेब ब्राउज़र के माध्यम से उस स्थान को खोलें। आपको टेम्पलेट का स्टॉक संस्करण दिखाई देगा:

बूटस्ट्रैप टेम्पलेट शुरू करें

यह पहले से ही काफी अच्छा है, लेकिन अब यह जानने का समय आ गया है कि एचटीएमएल और सीएसएस का उपयोग कैसे किया जाए, यह वही है जो आप इसे बनाना चाहते हैं।.

7. HTML और CSS के साथ अपनी वेबसाइट को कस्टमाइज़ करें

पहले डिजाइन के होमपेज पर काम करते हैं। यह हमें ग्राफिक्स, ग्रंथों को बदलने और सामान्य रूप से सब कुछ ट्यून करने का तरीका बताने जा रहा है.

हमने ऊपर HTML दस्तावेज़ के मुख्य भाग के बारे में संक्षेप में बात की है। आइए इसे यहां अधिक गहराई से देखें.

जब आप खोलते हैं index.html उदात्त पाठ में आपकी बूटस्ट्रैप साइट की फ़ाइल, आपको इस तरह एक हेड सेक्शन दिखाई देगा (हमने स्पष्टता के लिए इस कोड से सभी गैर-महत्वपूर्ण चीजें हटा दीं):






क्रिएटिव - बूटस्ट्रैप थीम शुरू करें





* उपरोक्त के अलावा, Google फ़ॉन्ट्स, फ़ॉन्ट विस्मयकारी आइकन और पेज पर प्रदर्शित छवियों के लिए एक लाइटबॉक्स मॉड्यूल को लोड करने के लिए भी कोड था।.

यहां घोषित अधिकांश हम पहले से ही जानते हैं, लेकिन कुछ नए हैं:

  • सबसे पहले, के बीच सब कुछ कोष्ठक एक HTML टिप्पणी है। यह अंतिम पृष्ठ पर दिखाई नहीं देता है.
  • – यह बूटस्ट्रैप के अपने घोषणा पत्रों में से एक है। यह वेबसाइट के व्यूपोर्ट के आकार को परिभाषित करता है.
  • – यह लाइन क्रिएटिव टेम्पलेट के CSS स्टाइलशीट को लोड करती है और इसमें बूटस्ट्रैप की डिफ़ॉल्ट स्टाइलशीट भी होती है.

पिछली घोषणा को संशोधित करें – सीएसएस को लोड करने वाली लाइन – बाद में साथ काम करना आसान बनाने के लिए.

उस पंक्ति को इसमें बदलें:


यह केवल एक छोटा अंतर है – यह एक ही सीएसएस शीट के गैर-संक्षिप्त संस्करण को लोड नहीं करेगा। इस संस्करण को संशोधित करना आसान है.

अब नीचे की ओर बहुत स्क्रॉल करें index.html फ़ाइल। आप समापन से ठीक पहले निम्नलिखित पंक्तियाँ देखेंगे तन टैग:

        

वे जावास्क्रिप्ट फ़ाइलों को लोड करने के लिए जिम्मेदार हैं जो डिज़ाइन के कुछ अधिक दृश्य इंटरैक्शन को संभालते हैं। उदाहरण के लिए, जब आप पर क्लिक करते हैं के बारे में शीर्ष मेनू में लिंक, आपको उसी पृष्ठ पर लगभग ब्लॉक करने के लिए सुचारू रूप से ले जाया जाएगा – यह, अन्य बातों के अलावा, जावास्क्रिप्ट के माध्यम से किया जाता है। हमें इस कोड को समझने में अभी स्वयं को परेशान करने की आवश्यकता नहीं है। इसे दूसरी बार छोड़ दें.

इसके बजाय, पेज पर अपनी सामग्री जोड़ने पर काम करें:

8. सामग्री और चित्र जोड़ें

पहली चीज जो आप करना चाहते हैं वह है पृष्ठ का शीर्षक बदलना.

1. शीर्षक बदलें

खोजो शीर्षक हेड सेक्शन में टैग करें और टेक्स्ट को टैग्स के बीच से बदलकर अपनी खुद की किसी चीज़ पर रखें:

मेरी HTML साइट

2. हीरो सेक्शन को कस्टमाइज़ करें

नायक खंड वह है जिसे हम इस ब्लॉक कहते हैं:

नायक खंड

इसके अंदर हमारी अपनी सामग्री होना अच्छा होगा। इस ब्लॉक को संशोधित करने के लिए, अपने पर वापस जाएं index.html फ़ाइल और इस अनुभाग को खोजें:

...


...

और अधिक जानकारी प्राप्त करें

कोड का यह पूरा ब्लॉक हीरो सेक्शन में क्या नियंत्रित करता है.

यहाँ कुछ नए टैग हैं:


  • – यह एक टैग परिभाषित करता है कि यह पूरा अनुभाग पृष्ठ का शीर्षलेख है; इस टैग के रूप में भाइयों और बहनों की एक जोड़ी है
    टैग और
    टैग
  • – एक सामान्य सीएसएस टैग है जो इंगित करता है कि निम्नलिखित एक अलग अनुभाग (उर्फ) है विभाजन) HTML दस्तावेज़ में; इसका उपयोग करने से पृष्ठ पर अलग-अलग वर्गों को नेत्रहीन रूप से अलग करना आसान हो जाता है

आप यह भी देखेंगे कि कुछ अन्य टैग (जिन्हें हम पहले से जानते हैं) कुछ अधिक जटिल लगते हैं, जिनके साथ कई सीएसएस वर्गों को सौंपा गया है। उदाहरण के लिए:

...

को सौंपी गई कक्षाएं

यहाँ टैग है पाठ-अपरकेस पाठ-सफेद फ़ॉन्ट-भार-बोल्ड.

ये कक्षाएं बूटस्ट्रैप और क्रिएटिव थीम के डेवलपर द्वारा बनाई गई हैं। अच्छी खबर यह है कि आप HTML और CSS के साथ वेबसाइट बनाते समय भी इनका खुलकर उपयोग कर सकते हैं.

स्पष्ट रूप से, आप अपने पेज की संरचना में जो भी टैग जोड़ सकते हैं, उसे किसी भी संख्या में कक्षाओं को निर्दिष्ट करके अनुकूलित कर सकते हैं.

यदि आप उपलब्ध कक्षाओं की पूरी सूची देखना चाहते हैं, तो आप मुख्य को खोल सकते हैं creative.css उस में फ़ाइल करें सीएसएस क्रिएटिव थीम का उपनिर्देशिका.

इन सभी वर्गों की समझ प्राप्त करना पहली बार में डराने वाला लग सकता है, लेकिन वास्तव में यह जितना आसान दिखता है, उतना आसान है.

उदाहरण के लिए, हमारे में से कुछ पैराग्राफ को सौंपी गई कक्षाओं में से एक index.html फ़ाइल है font-weight प्रकाश. जब आप में कूद जाते हैं creative.css फ़ाइल और Ctrl + F उस वर्ग नाम की तलाश में, आप देखेंगे कि यह बस सेट करता है फ़ॉन्ट वजन पैरामीटर जैसे:

.फ़ॉन्ट-वजन-प्रकाश {
फ़ॉन्ट-वजन: 300;
}

में डिफ़ॉल्ट ग्रंथों को संशोधित करना index.html फ़ाइल बहुत सरल है। केवल वह टैग ढूंढें जिसे आप खोलना और बदलना चाहते हैं, जो उद्घाटन और समापन टैग के बीच है.

उदाहरण के लिए, मुख्य शीर्षक को बदलने के लिए, बस इसे बदलें:

अापका खास ...

निम्नलिखित की तरह कुछ करने के लिए:

मेरी HTML वेबसाइट को सराहें!

आप पृष्ठ के सभी पैराग्राफ और अन्य टैग के लिए भी ऐसा कर सकते हैं.

क्या महत्वपूर्ण है कि आप स्वतंत्र रूप से नए पैराग्राफ जोड़ सकते हैं। उदाहरण के लिए, हम उस पैराग्राफ को ले सकते हैं जो पहले से ही पृष्ठ पर है, उसकी एक प्रति बनाएं और मूल पैराग्राफ के ठीक नीचे पेस्ट करें; इस तरह:

बूटस्ट्रैप शुरू कर सकते हैं ...

अनुच्छेद २

अब, जिन ग्रंथों का ध्यान रखा गया है, उन्हें पृष्ठभूमि में मौजूद छवि को बदलने दें.

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

जब आप कोड हैंडलिंग के पूरे ब्लॉक पर एक और नज़र डालते हैं मास्टहेड अनुभाग, आप देखेंगे कि इसे एक वर्ग को सौंपा गया है मास्टहेड. कोड की यह लाइन क्लास असाइनमेंट को संभालती है:

मास्टहेड वर्ग वह है जो पूरे ब्लॉक की पृष्ठभूमि में एक छवि डालता है.

खुलने दो creative.css फिर से फ़ाइल करें और “मास्टहेड” वर्ग देखें:

हैडरमास्टहेड {
गद्दी-शीर्ष: 10rem;
गद्दी-तल: calc (10rem - 72px);
पृष्ठभूमि: रैखिक-ढाल (नीचे, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead .jpg" );
पृष्ठभूमि-स्थिति: केंद्र;
बैकग्राउंड-रिपीट: नो-रिपीट;
पृष्ठभूमि-लगाव: स्क्रॉल;
पृष्ठभूमि का आकार: कवर;
}

यह कोड हमारी छवि के लिए सभी प्रकार की फैंसी चीजें करता है (जैसे ओवरले, छायांकन आदि जोड़ना), लेकिन महत्वपूर्ण हिस्सा यह है: यूआरएल ( "../ img / bg-masthead.jpg"). यह वह रेखा है जो इंगित करती है कि पृष्ठभूमि की छवि कहां मिलेगी। इसमें होने जा रहा है img उपनिर्देशिका.

इस पृष्ठभूमि की छवि को बदलने के लिए, अपनी खुद की कोई भी छवि लें, इसे कॉपी करें img उपनिर्देशिका और फिर मूल के स्थान पर उसका नाम कॉपी और पेस्ट करें bg-masthead.jpg फ़ाइल। संक्षेप में, इसे बदलें: यूआरएल ( "../ img / bg-masthead.jpg") इसके लिए: यूआरएल ( "../ img / YOURFILE.jpg").

3. पृष्ठ पर अन्य ब्लॉक को अनुकूलित करें

जैसा कि आप के माध्यम से जाना index.html फ़ाइल, आप देखेंगे कि पृष्ठ पर पहले से ही कई अलग-अलग खंड हैं। हमारे पास इसके लिए एक अनुभाग है पथ प्रदर्शन, तथा के बारे में एक ब्लॉक, कुछ सेवाएं, ए पोर्टफोलियो, ए कार्यवाई के लिए बुलावा, ए संपर्क करें ब्लॉक, और ए फ़ुटबाल.

जबकि इन सभी वर्गों में अलग-अलग सामग्री है, अनुभाग स्वयं संरचना में समान हैं। उन सभी के पास HTML टैग्स का लगभग एक ही सेट है – उन्हें सौंपे गए अलग-अलग CSS वर्ग.

अपनी आवश्यकताओं को पूरा करने के लिए पृष्ठ को संशोधित करने का सबसे अच्छा तरीका एक के बाद एक ब्लॉकों के माध्यम से जाना और आसपास की चीजों को बदलकर प्रयोग करना है.

ग्रंथों को संशोधित करने के अलावा, आप पूरे खंडों को (चारों ओर के भागों) भी स्थानांतरित कर सकते हैं

टैग)। दी, आपको यह करना है कि हाथ से (तत्वों को काटकर और फिर जगह में तत्वों को चिपकाते हुए), यह अभी भी करने के लिए सीधा है.

कहा जा रहा है कि, दो बुनियादी संशोधन हैं जिनके बारे में हमने अभी बात नहीं की है। इनको अगले कवर करें:

9. फाइन-ट्यून रंग और फ़ॉन्ट्स

HTML या CSS में रंग या फॉन्ट बदलना बहुत आसान है। सबसे सरल काम जो आप कर सकते हैं वह है HTML टैग में कुछ इन-लाइन स्टाइल असाइन करना। उदाहरण के लिए:

लाल पाठ

HTML में, रंगों को उनके हेक्स मूल्यों द्वारा दर्शाया जाता है; “# FF0000” लाल है। यहाँ अन्य सभी की एक तालिका है मानक रंग.

रंगों को असाइन करने का एक बेहतर तरीका सीएसएस स्टाइलशीट के माध्यम से करना है। उदाहरण के लिए, ऊपर दिए गए कोड के समान प्रभाव पाने के लिए, हम इसे अपनी CSS स्टाइलशीट में डाल सकते हैं:

p.red {
रंग: # FF0000;
}

और फिर मुख्य दस्तावेज़ में HTML कोड के निम्नलिखित टुकड़े का उपयोग करें:

लाल पाठ

यह दूसरा तरीका मूल रूप से बूटस्ट्रैप में चीजों को कैसे किया जाता है.

पृष्ठ पर किसी भी पाठ का रंग बदलने के लिए, पहले उस पाठ को स्टाइल करने के लिए टैग को ज़िम्मेदार मानें, और फिर स्टाइलशीट में जाएं और संबंधित वर्ग को संशोधित करें, या एक नया वर्ग बनाएं.

यहाँ एक उदाहरण है; “आप अपनी सेवा में” कहते हुए हेडर का रंग बदलना चाहते हैं। वर्तमान में, यह काला है, और यह इसे संभालने वाला कोड है:

आपकी सेवा में

इसका रंग बदलने के लिए, एक नया वर्ग बनाने के लिए सबसे अच्छा तरीका है, जिसे कहा जाता है, .पाठ-नारंगी और रंग मूल्य वहाँ सेट, जैसे:

.पाठ-नारंगी {
रंग: # f4623a! महत्वपूर्ण;
}

* द !जरूरी यह सुनिश्चित करेगा कि यह रंग सेटिंग किसी भी अन्य रंग सेटिंग को अधिलेखित कर देगी जो इससे पहले आई थी.

अब, हम अपने हेडर पर वापस जा सकते हैं, और इसके कोड को इसमें बदल सकते हैं:

आपकी सेवा में

इन परिवर्तनों के साथ, शीर्ष लेख अब नारंगी होगा:

नारंगी h2

फ़ॉन्ट और उसके आकार को बदलने के लिए, आप कुछ ऐसा ही कर सकते हैं। लेकिन पहले, एक फ़ॉन्ट परिभाषा ब्लॉक सीएसएस में कैसा दिखता है इसका एक उदाहरण:

.SOMECLASS {
फ़ॉन्ट-परिवार: "मेर्रीवेदर", रोबोटो, सैंस-सेरिफ़;
फ़ॉन्ट-आकार: 18 पीएक्स;
}
  • फोंट लोड करें Merriweather, रोबोटो, और एक प्रणाली-डिफ़ॉल्ट सान्स सेरिफ़ फ़ॉन्ट (वेब-सुरक्षित फोंट के बारे में जानने के लिए इसे पढ़ें)
  • फ़ॉन्ट का आकार 18px पर सेट करें

इस तरह की परिभाषा को किसी भी सीएसएस वर्ग में रखा जा सकता है, रंग परिभाषा की तरह। दरअसल, फ़ॉन्ट और रंग परिभाषाएँ अक्सर एक ही वर्ग की घोषणाओं में पाई जाती हैं.

“हेडर योर सर्विस” कहने वाले उस हेडर के फॉन्ट साइज़ को बदलने के लिए, अपने पिछले उदाहरण पर वापस जा रहे हैं, हम पहले एक क्लास बना सकते हैं जैसे:

.पाठ- xxl {
फ़ॉन्ट-आकार: 50 पीएक्स;
}

और फिर इस वर्ग को हेडर में असाइन करें:

आपकी सेवा में

St अपने बूटस्ट्रैप-निर्मित टेम्प्लेट में रंगों या फोंट को बदलते समय, पहले उन कक्षाओं के लिए CSS स्टाइलशीट देखें, जो आपको पहले से ही वैकल्पिक आकार या रंग प्रदान कर सकते हैं। जहां उपलब्ध है, उनका उपयोग करें.

10. अतिरिक्त पृष्ठ बनाएँ

अब जब आपके पास मुखपृष्ठ अनुकूलित है, तो कुछ अतिरिक्त पृष्ठों पर काम करना शुरू करना और फिर उन्हें मुखपृष्ठ से जोड़ना है.

HTML और CSS के साथ एक वेबसाइट बनाते समय, आप किसी भी संख्या में उप-पेज बना सकते हैं और फिर उन सभी को एक साथ जोड़ सकते हैं.

यहां कुछ सामान्य पृष्ठ दिए गए हैं, जिनकी अधिकांश वेबसाइटों को आवश्यकता है:

  • पेज के बारे में
  • संपर्क करें
  • पोर्टफोलियो
  • उत्पाद और सेवाएं
  • टीम
  • नीतियाँ (गोपनीयता नीति, नियम, आदि)

1. लेआउट के साथ शुरू करो

एक नया वेब पेज बनाते समय, आपको जो पहला निर्णय लेना होता है, वह वही होता है जो आप चाहते हैं कि लेआउट हो.

HTML और CSS के साथ एक वेबसाइट बनाते समय, कुछ भी आपको क्राफ्टिंग से नहीं रोक रहा है जो कुछ लेआउट आप चाहते हैं। एकमात्र कठिनाई वास्तव में इसे एक साथ रखना है.

HTML और CSS एक रिक्त स्क्रीन से शुरू होने पर निपटने के लिए कठिन हो सकते हैं, इसलिए हम यहां बूटस्ट्रैप का भी उपयोग करने जा रहे हैं। सबसे पहले, हम आपको एक लेआउट के प्रारूपण के कुछ सिद्धांत दिखाने जा रहे हैं और फिर बूटस्ट्रैप के साथ इसे प्रदर्शित करने का तरीका बताते हैं.

जिस तरह से आप अपने वेब पेज के लेआउट के बारे में सोच सकते हैं वह इसे अलग-अलग ब्लॉकों के अनुक्रम पर विचार करना है – एक के ऊपर एक। कुछ इस तरह (चार अलग-अलग ब्लॉकों पर ध्यान दें):

HTML और CSS के साथ वेबसाइट बनाते समय लेआउट

बूटस्ट्रैप के बारे में महान बात यह है कि यह आपके लिए बुनियादी लेआउट सिद्धांतों और उपस्थिति विवरण को संभालता है ताकि आप उन ब्लॉकों को सही स्थानों पर लगाने पर ध्यान केंद्रित कर सकें.

गाइड के इस भाग में, हम एक नया “के बारे में” पेज बनाने जा रहे हैं.

शुरू करने के लिए, हम लेआउट की एक बहुत ही मूल परियोजना बनाएँगे। ऊपर वाले जैसा कुछ.

  • शीर्ष पर एक नेविगेशन मेनू है,
  • मेनू के नीचे एक पूर्ण-चौड़ाई वाला हेडलाइन ब्लॉक,
  • बीच में मुख्य सामग्री अनुभाग, स्क्रीन के मध्य में बॉक्सिंग (पूर्ण-चौड़ाई नहीं),
  • और एक पाद.

अब HTML में इस लेआउट को बनाते हैं.

2. एक नया पृष्ठ बनाएँ

एक नए पृष्ठ पर काम करना शुरू करने का सबसे आसान तरीका एक मौजूदा पृष्ठ की नकल करना और इसे एक टेम्पलेट के रूप में उपयोग करना है। यही हम करने जा रहे हैं.

की एक प्रति बनाएँ index.html फ़ाइल और नाम बदलें about.html.

इस प्रारंभिक चरण में पृष्ठों को अलग करना आसान बनाने के लिए, नए को संपादित करें about.html फ़ाइल और उसमें क्या बदलाव है </code> टैग। उदाहरण के लिए, <code><title>मेरे बारे में.

अब फाइल लाइन से लाइन से गुजरते हैं और तय करते हैं कि हम क्या छोड़ेंगे और क्या हटाएंगे:

  • पथ प्रदर्शन मेनू (नीचे) )। आप शायद इस अनुभाग को अक्षुण्ण रखना चाहते हैं, बस सभी पृष्ठों पर नेविगेशन अनुभव को एक समान बनाने के लिए.
  • मुख्य नायक अनुभाग (नीचे) )। यह हमारे लेआउट प्रोजेक्ट के अनुसार आवश्यक नहीं है। आप आगे बढ़ सकते हैं और पूरे अनुभाग को मिटा सकते हैं.
  • के बारे में अनुभाग (नीचे) )। हम इस अनुभाग को अपने मुख्य शीर्षक ब्लॉक के रूप में पुनः उपयोग करने जा रहे हैं.
  • सेवाएं अनुभाग, पोर्टफोलियो अनुभाग, कार्यवाई के लिए बुलावा अनुभाग, और संपर्क करें अनुभाग (सब कुछ के बीच तथा )। हमें इन वर्गों की बिल्कुल जरूरत नहीं है। आप आगे बढ़ सकते हैं और उन्हें मिटा सकते हैं.
  • फ़ुटबाल अनुभाग और उसके नीचे सब कुछ (नीचे) )। इसे हमें रखना होगा.

यह हमारे वर्तमान कोड को काफी सरल बनाता है। यह मूल रूप से सिर्फ यह है:



























यहां जो चीज हमें याद आ रही है वह है मुख्य सामग्री अनुभाग। इसे बनाने के लिए, हम अनुभाग के बारे में पुन: उपयोग करने जा रहे हैं.

आगे बढ़ें और अनुभाग के बारे में एक प्रति बनाएँ। यह वाला:

...


...

अब पहली दो पंक्तियों को इसमें बदलें:

चूंकि हमें इसकी आवश्यकता नहीं है

हेडर वहाँ और

तत्व, चलो उन्हें हटा दें इस पूरे ब्लॉक के अंदर केवल एक चीज बची है जो पाठ का एक पैराग्राफ है। इस तरह:

पाठ का एक पैराग्राफ.

जब आप फ़ाइल को सहेजते हैं और अपने ब्राउज़र के माध्यम से उस पर नेविगेट करते हैं, तो आप देखेंगे कि आपके पास मूल रूप से एक ही रंग की पृष्ठभूमि के साथ एक के बाद एक दो समान ब्लॉक हैं:

पेज हेड के बारे में

मुख्य सामग्री अनुभाग में सफेद पृष्ठभूमि रखना बेहतर होगा। इसे बदलने के लिए, केवल एक चीज जो हमें करने की आवश्यकता है वह है इसे हटा दें bg-प्राथमिक मुख्य से वर्ग

टैग। दूसरे शब्दों में, इस में टैग करें:

वह बेहतर है:

पेज हेड 2 के बारे में

पेज को कुछ और पॉप्युलेट करने के लिए पेज पर कुछ डमी पैराग्राफ जोड़ दें, साथ ही शायद उप-प्रमुख:

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट...

प्रीन फेरिमम, फेलिस अस्थाई फेटरा लॉबोर्टिस, मैग्ना क्म हेन्ड्रेरिट डोलर...

दूसरा नाम

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट...

यहाँ पेज पर ऐसा दिखता है:

लगभग 1

यदि आप पाठ को केंद्र में रखना पसंद नहीं करते हैं, तो अभी हटा दें पाठ-केंद्र कक्षा एक से

टैग.

लगभग 2

यदि आप पाठ के इन ब्लॉकों पर कुछ और फ़्लेयर डालना चाहते हैं, तो आप नई सीएसएस कक्षाएं बना सकते हैं (जैसे पहले) और उन्हें ब्लॉक में पैराग्राफ को असाइन करें। या, आप वर्तमान स्टाइलशीट में झांक सकते हैं और देख सकते हैं कि इस उद्देश्य के लिए कौन सी कक्षाएं पहले से मौजूद हैं। यहाँ वे हैं जिन्हें हमने सौंपा है

तथा

टैग:

लोरेन इपसाम डलार सिट आमेट...

प्रीन फेरिमम, फेलिस अस्थाई फेटरा लॉबोर्टिस, मैग्ना क्म हेन्ड्रेरिट डोलर...

दूसरा नाम

और यहाँ प्रभाव है:

लगभग 3

एक और चीज जो हम यहां करने जा रहे हैं, वह है पृष्ठ पर कहीं एक छवि.

यहाँ HTML में एक उदाहरण छवि टैग कैसा दिखता है:


बहुत आसान है, है ना? एकमात्र पैरामीटर वहाँ छवि फ़ाइल के लिए पथ है। चीजों को अच्छी तरह से व्यवस्थित रखने के लिए, आप अपनी छवि को अंदर रख सकते हैं img निर्देशिका फिर से (जैसे आपने थोड़ी देर पहले उस पृष्ठभूमि के साथ किया था)। ऐसे मामले में, छवि टैग होगा:


यह कहा जा रहा है, इस विशेष विन्यास में छवि टैग काफी सीमित है। इसे और अधिक परिष्कृत बनाने के लिए, कुछ बूटस्ट्रैप कक्षाओं को इसे असाइन करें। विशेष रूप से:


ये दो वर्ग आपकी छवि को गोल कोने देंगे और यह भी सुनिश्चित करेंगे कि छवि का आकार ब्लॉक के आकार से अधिक नहीं है जहाँ यह बैठता है.

अब आप अपने पृष्ठ के मुख्य सामग्री अनुभाग में कहीं इस तरह का एक टैग जोड़ सकते हैं। उदाहरण के लिए, यहां:

लोरेन इपसाम डलार सिट आमेट...

प्रीन फेरिमम, फेलिस अस्थाई फेटरा लॉबोर्टिस, मैग्ना क्म हेन्ड्रेरिट डोलर...

दूसरा नाम

और यहाँ पृष्ठ पर अंतिम प्रभाव है:

लगभग 4

यहाँ पृष्ठ के बारे में हमारी महिमा है:

पेज पूरा होने के बारे में

3. नए पेज से लिंक करें

नए पृष्ठ के साथ, अब इसे मुखपृष्ठ से लिंक करें ( index.html फ़ाइल)। स्वाभाविक रूप से, इस लिंक को जोड़ने का सबसे अच्छा स्थान नेविगेशन मेनू (नीचे) है ).

विशेष रूप से, इस पंक्ति को देखें:

के बारे में

हम इसे इसमें बदलने जा रहे हैं:

के बारे में

यह वह चीज है जिसके बारे में हमने अभी तक बात नहीं की है, लेकिन टैग HTML में एक लिंक टैग है। इसका उपयोग करके, आप उस पृष्ठ का पता प्रदान करके किसी भी वेब पेज से लिंक कर सकते हैं href पैरामीटर। लिंक का पाठ – लिंक का क्लिक करने योग्य हिस्सा – उद्घाटन और समापन के बीच का पाठ होगा टैग.

जब आप मुखपृष्ठ को ताज़ा करते हैं, तो आप अपने नए लिंक को उस पृष्ठ के बारे में इंगित करते हुए देखेंगे.

आगे की पढाई:

इस स्तर पर, आपने मूल रूप से दो पृष्ठों वाले एक साधारण वेबसाइट का निर्माण किया है – a होमपेज और एक के बारे में पृष्ठ.

अब आपको क्या करना चाहिए और नए पृष्ठ बनाकर, उन्हें ट्यून करके, उनमें सामग्री जोड़कर, और फिर सब कुछ नेविगेशन मेनू से लिंक करके फिर से जोड़ना और दोहराना है.

इन चरणों से गुजरने के साथ-साथ अन्य चीजें जो HTML और CSS सिद्धांतों को सीख रही हैं, चेकलिस्ट के माध्यम से जा रही हैं, और बूटस्ट्रैप और इसकी संरचनाओं और कक्षाओं को भी सीख रही हैं। उसके लिए कुछ संसाधन:

  • HTML5 चीट शीट
  • सीएसएस धोखा शीट
  • जावास्क्रिप्ट धोखा शीट
  • HTML ट्यूटोरियल
  • बूटस्ट्रैप ट्यूटोरियल
  • बूटस्ट्रैप धोखा शीट

मास्ट्रिंग बूटस्ट्रैप, एचटीएमएल और सीएसएस के साथ अनुकूलित और सुंदर वेबसाइटों के निर्माण के लिए वर्तमान में उपलब्ध सबसे अच्छा रास्ता है.

यदि आपके पास HTML और CSS के साथ एक वेबसाइट बनाने के बारे में कोई प्रश्न हैं, तो उन्हें टिप्पणियों में प्रस्तुत करने में संकोच न करें.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map