HTML5 बॉयलरप्लेट का उपयोग करके मिनटों में वेबसाइट कैसे बनाएं

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

सौभाग्य से, HTML5 बॉयलरप्लेट टेम्प्लेट मदद कर सकते है। यह एक साधारण फ्रंट-एंड टेम्प्लेट है जिसका उपयोग आप कुछ ही मिनटों में HTML5 वेबसाइट बनाने के लिए कर सकते हैं। लेकिन यह इतना शक्तिशाली भी है कि आप इसे एक जटिल, पूरी तरह से चित्रित साइट की नींव के रूप में उपयोग कर सकते हैं।

---

---

किसी अन्य प्रोग्राम में खुली हुई फ़ाइल को कैसे हटाएं?

यह HTML5 बॉयलरप्लेट ट्यूटोरियल टेम्प्लेट में क्या आता है, इसका उपयोग करने के तरीके के बारे में जानने के लिए आवश्यक मूल बातें और आगे सीखने के लिए कुछ संसाधनों पर चर्चा करेगा। मैं आपको यह भी दिखाऊंगा कि कैसे मैंने HTML की केवल कुछ पंक्तियों के साथ एक बहुत ही बुनियादी साइट बनाने के लिए टेम्पलेट का उपयोग किया।

HTML5 बॉयलरप्लेट टेम्प्लेट

जब आप HTML5 बॉयलरप्लेट से टेम्प्लेट डाउनलोड करते हैं, तो आपको कई फ़ोल्डर और फ़ाइलें मिलती हैं। यहाँ ज़िप फ़ाइल की सामग्री है:

css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.png

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

HTML5 बॉयलरप्लेट सहायता दस्तावेज़ीकरण

बॉयलरप्लेट का संग्रह है GitHub में होस्ट किए गए सहायता दस्तावेज़ . यह एक बड़ी मदद है जब आपके पास तकनीकी प्रश्न हैं या आप सोच रहे हैं कि किसी चीज़ को जिस तरह से डिज़ाइन किया गया था, उसे क्यों बनाया गया था।

दस्तावेज़ीकरण में लगभग सब कुछ टेम्पलेट के दस्तावेज़ फ़ोल्डर में भी शामिल है। आपको कई मार्कडाउन (.md) फाइलें दिखाई देंगी जो यह पता लगाने में बड़ी मदद करती हैं कि आपकी बॉयलरप्लेट साइट कैसे बनाई जाए।

---

---

यदि आप सब कुछ पढ़ना चाहते हैं, तो TOC.md से शुरू करें और वहां से अन्य मार्कडाउन फाइलों के लिंक का पालन करें। यदि आप किसी विशिष्ट मुद्दे पर सहायता की तलाश कर रहे हैं, तो वह फ़ाइल ढूंढें जो ऐसा लगता है कि यह संबंधित हो सकती है; use.md शुरू करने के लिए एक अच्छी जगह है।

HTML5 बॉयलरप्लेट के CSS से शुरू हो रहा है

HTML5 बॉयलरप्लेट टेम्प्लेट दो CSS फाइलों के साथ आता है: main.css और normalize.css।

---

---

दूसरी फ़ाइल, normalize.css, विभिन्न ब्राउज़रों को तत्वों को सुसंगत तरीके से प्रस्तुत करने में मदद करती है। यह कैसे काम करता है, इसके बारे में और जानने के लिए, देखें GitHub पर normalize.css प्रोजेक्ट .

इस बीच, main.css वह जगह है जहाँ आप कोई भी कोड डालेंगे जिसकी आपको आवश्यकता है सीएसएस के साथ अपनी साइट को प्रारूपित करें . टेम्पलेट के साथ शामिल मानक CSS डेवलपर्स और HTML5 बॉयलरप्लेट समुदाय द्वारा किए गए शोध का परिणाम है। यह पठनीय है और विभिन्न ब्राउज़रों में अच्छी तरह से प्रदर्शित होता है।

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

आधार सीएसएस में कई उपयोगी सहायक वर्ग भी शामिल हैं। उनमें से कुछ मानक ब्राउज़र और स्क्रीन रीडर (या कुछ संयोजन) से आइटम छिपाते हैं।

साथ ही main.css में आपको रिस्पॉन्सिव डिज़ाइन और मददगार प्रिंट सेटिंग्स के लिए सपोर्ट मिलेगा।

इन सभी मदों को सीएसएस में टिप्पणियों द्वारा स्पष्ट रूप से समझाया गया है:

सामान्य तौर पर, आप बेस सीएसएस के साथ शुरुआत कर सकते हैं।

टेम्पलेट में अपना स्वयं का HTML जोड़ना

बॉयलरप्लेट में दो HTML फ़ाइलें शामिल हैं: 404.html और index.html।

इंडेक्स पेज वह जगह है जहां आप अपना होमपेज बनाएंगे (या आपका एकमात्र पेज, अगर आप एक साधारण वन-पेजर के लिए जा रहे हैं)।

यदि आप किसी ब्राउज़र में अनुक्रमणिका पृष्ठ खोलते हैं, तो आपको पाठ की एक पंक्ति दिखाई देगी। लेकिन HTML में देखने से कोड में बहुत अधिक छिपा हुआ पता चलता है। केवल एक चीज जिसे बदलने के बारे में आपको वास्तव में चिंता करने की आवश्यकता है वह है Google Analytics कोड ('UA-XXXXX-Y' टेक्स्ट ढूंढें और इसे अपने स्वयं के ट्रैकिंग कोड से बदलें)।

अनुक्रमणिका पृष्ठ पर शेष HTML में वेब ऐप्स की जानकारी, पुराने ब्राउज़र के लिए सूचनाएं और उपयोगी JavaScript शामिल हैं। जब आप शुरुआत कर रहे हों, तो आपको इनमें से किसी के साथ खिलवाड़ करने की आवश्यकता नहीं है।

हालांकि, उन्हें पहले से ही पहले से भर कर रखना, यह सुनिश्चित करने का एक अच्छा तरीका है कि आपकी साइट HTML5 का अधिकतम लाभ उठाने के लिए तैयार है।

अपना पृष्ठ बनाने के लिए, फ़ाइल में टैग के बीच अपना HTML डालें। यहां कुछ बुनियादी जानकारी दी गई है जो मैं अपने बारे में जोड़ूंगा:

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

यदि आप अपने 404 पृष्ठ को अनुकूलित करना चाहते हैं, तो बस HTML फ़ाइल को संशोधित करें। सुनिश्चित नहीं हैं कि आपके 404 पृष्ठ पर क्या रखा जाए? इन महान 404 पृष्ठ डिज़ाइन उदाहरणों को देखें।

एक फ़ेविकॉन (और अन्य चिह्न) जोड़ना

अपना फ़ेविकॉन बदलना चाहते हैं? फिर favicon.ico वह फ़ाइल है जिसे आपको बदलना होगा।

यदि आपके पास अभी तक एक नहीं है, तो आपको एक बनाना होगा। आप एक ऑनलाइन फ़ेविकॉन जनरेटर का उपयोग कर सकते हैं या अपना खुद का डिज़ाइन कर सकते हैं। बस सुनिश्चित करें कि यह 16 x 16 पिक्सेल का है और इसमें .ico फ़ाइल प्रकार है।

विंडोज़ 10 64 बिट के लिए विंडोज़ मीडिया प्लेयर

अपने फ़ेविकॉन में कुछ विचार करना एक अच्छा विचार है। अपने विचार-मंथन का मार्गदर्शन करने के लिए इन प्रसिद्ध फ़ेविकॉन का उपयोग करें। सुनिश्चित करें कि जब आप नया फ़ेविकॉन जोड़ते हैं तो उसे favicon.ico कहा जाता है।

आप देख सकते हैं कि आपकी साइट की मूल निर्देशिका में तीन अन्य छवियां हैं: icon.png, टाइल.पीएनजी, और टाइल-वाइड.पीएनजी। ये किस लिए हैं?

• icon.png का उपयोग Apple टच आइकन के लिए किया जाता है। यदि आप एक वेब ऐप बनाते हैं, तो इस आइकन का उपयोग तब किया जाएगा जब कोई आईफोन या आईपैड उपयोगकर्ता ऐप को अपनी होमस्क्रीन पर जोड़ता है।
• टाइल.पीएनजी और टाइल-वाइड.पीएनजी विंडोज की 'पिन' कार्यक्षमता के लिए हैं, और विंडोज 10 में दिखाई देंगे।

इन सभी मामलों के लिए आइकन प्रदान करना एक अच्छा विचार है --- लेकिन यदि आप वेब ऐप नहीं बना रहे हैं, तो यह कम प्राथमिकता हो सकती है।

अधिक कार्यक्षमता जोड़ना

एक बार जब आप अपना HTML और एक फ़ेविकॉन (साथ ही कोई भी CSS जिसे आप शामिल करना चाहें) जोड़ लेते हैं, तो आपकी साइट प्रकाशित होने के लिए तैयार है। HTML5 बॉयलरप्लेट का उपयोग करना इतना आसान है। इसे अपने सर्वर पर अपलोड करें, और आपका काम हो गया!

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

जैसा कि आप देख सकते हैं, टेक्स्ट की कुछ पंक्तियों ने पूरी तरह कार्यात्मक (यदि थोड़ी सी धुंधली) वेबसाइट बनाई है। यह ज्यादा नहीं है, लेकिन इसमें केवल कुछ मिनट लगे। और यह HTML5 के साथ अत्यधिक एक्स्टेंसिबल है। यही बॉयलरप्लेट टेम्पलेट की शक्ति है।

लेकिन यदि आप चाहें तो आप बॉयलरप्लेट टेम्पलेट के साथ और भी बहुत कुछ कर सकते हैं। यदि आप कुछ विशिष्ट खोज रहे हैं, तो एक अच्छा मौका है कि आप इसे सहायता दस्तावेज़ में पाएंगे।

यदि आप सुनिश्चित नहीं हैं कि आप HTML5 के साथ क्या कर सकते हैं, लेकिन आप यह जानना चाहते हैं, तो आपकी सहायता के लिए बहुत सारे वेब डिज़ाइन ट्यूटोरियल हैं।

साझा करना साझा करना कलरव ईमेल क्या असंगत पीसी पर विंडोज 11 स्थापित करना ठीक है?

अब आप पुराने पीसी पर आधिकारिक आईएसओ फाइल के साथ विंडोज 11 स्थापित कर सकते हैं ... लेकिन क्या ऐसा करना एक अच्छा विचार है?

आगे पढ़िए संबंधित विषय

• प्रोग्रामिंग
• एचटीएमएल 5
• कोडिंग ट्यूटोरियल

लेखक के बारे में फिर अलब्राइट(506 लेख प्रकाशित)

डैन एक कंटेंट स्ट्रैटेजी और मार्केटिंग कंसल्टेंट है जो कंपनियों को डिमांड और लीड जेनरेट करने में मदद करता है। वह dannalbright.com पर रणनीति और सामग्री विपणन के बारे में भी ब्लॉग करता है।

डैन अलब्राइट . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें