Please support if you like my work by payment through upi: sinhamit@icici or payment by bank
account name: Amit Kumar Sinha,
account number: 2646728782
IFSC code: KKBK0005660
SWIFT: KKBKINBB
HTML Template in Category: एचटीएमएल by amit
🕙 Posted on 2023-04-05 at 02:42:31
DRY (Don't Repeat Yourself) अर्थात, अपने (कोड) को न दोहराएं प्रोग्रामिंग का मंत्र है।
आइए, हम पहले इस्तेमाल किए गए सभी HTML कोड्स का उपयोग करें। आप नीचे देख सकते हैं कि कुछ HTML स्क्रिप्ट्स/कोड्स में उचित इंडेंटेशन नहीं है। HTML, CSS, JavaScript और PHP में इंडेंटेशन कोई मायने नहीं रखता। यह इन स्क्रिप्टिंग भाषाओं में कोड को देखने में अच्छा दिखाने के लिए डाला जाता है। लेकिन, PYTHON प्रोग्रामिंग लैंग्वेज में, उचित इंडेंटेशन होना चाहिए।
आप नीचे दिए गए HTML कोड में भी देख सकते हैं कि <meta /> , <link /> , <title> </title> , <style> </style> और कुछ <script> </script> एलिमेंट <head> </head> तत्व के अंदर रखे गए हैं। हालाँकि, <script> </script> तत्व के अंदर रखे गए JavaScript CODES को <body> </body> तत्व में समापन </body> टैग से ठीक पहले डाला जाता है।
<link /> और <style> </ style> एलिमेंट (CSS स्टाइल) का इस्तेमाल <head> </head> एलिमेंट में क्यों किया जाता है ?
क्योंकि स्क्रिप्टिंग भाषाओं को वेब-ब्राउज़र में ऊपर से नीचे तक प्रोसेस और लोड किया जाता है। और, <head> </head> तत्व के अंदर <title> </title> तत्व में रखी गई सामग्री/जानकारी को छोड़कर, अन्य कोड, जनता के लिए दृश्यमान नहीं हैं। इसलिए, <link /> और <style> </style> Element (CSS Styles) को <head> </head> Element में रखना अच्छा अभ्यास है, ताकि जब WEB-PAGE सर्वर से वेब-ब्राउज़र पर डाउनलोड हो जाए, तब यह देखने में अच्छा और उचित लगें।
इस प्रकार, HTML5 तत्वों के IE8 समर्थन के लिए और मीडिया क्वेरी के लिए भी, जावास्क्रिप्ट फ़ाइलों HTML5shiv.min.js और Respond.min.js के लिए लिंक, <head> </head> तत्व में डाली जाती हैं। ये कोड (लाल रंग में, नीचे देखें) पर टिप्पणी की गई है, और, <!-- एवं --> (HTML टिप्पणी टैग) को हटाया नहीं जाना चाहिए। इन कोड का उपयोग केवल तभी किया जाता है, जब कोई व्यक्ति पुराने माइक्रोसॉफ्ट इंटरनेट एक्सप्लोरर (IE8 या पिछले) ब्राउज़रों में WEB-PAGE खोलता है।
जिन टिप्पणियों को <style> </style> और <script> </script> तत्वों के अंदर लिखा जाता है, वे HTML टिप्पणियाँ नहीं हैं, बल्कि क्रमशः विशिष्ट CSS और JavaScript टिप्पणियाँ हैं। इसलिए, मैंने पहले ही विभिन्न स्क्रिप्टिंग और प्रोग्रामिंग भाषाओं में उपयोग किए जाने वाले विभिन्न प्रकार के COMMENT का वर्णन किया है ( पिछला पृष्ठ देखें)।
और, <script> </script> तत्व का उपयोग <body> </body> तत्व में क्यों किया जाता है?
आप तीसरे पक्ष (आपके होस्ट सर्वर के बाहर) या बाहरी जावास्क्रिप्ट फ़ाइलों से जावास्क्रिप्ट कोड लोड करने के लिए <script src="" defer>defer> // JS कोड ... </script> तत्व जावास्क्रिप्ट कोड एम्बेड करने के लिए उपयोग कर सकते हैं। कीवर्ड defer को विशेषता के रूप में उपयोग किया जाता है, ताकि वेब-पेज (स्टाइलशीट, छवियों आदि सहित संपूर्ण HTML कोड) को पहले वेब-ब्राउज़र पर ठीक से डाउनलोड किया जा सके, और फिर जावास्क्रिप्ट कोड WEB-PAGE के अनुभाग और दूसरे भाग, पर अपनी क्रियाशीलता (भूमिका) निभाएंगे।
<!DOCTYPE html>
<html lang="en-US" >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="Keywords" content="एचटीएमएल, सीएसएस, जावास्क्रिप्ट, पीएचपी, पायथन, एसक्यूएल, माईएसक्यूएल, बूटस्ट्रैप, एक्सएमएल, ट्यूटोरियल, वेबसाइट" />
<meta name="author" content="अमित के. सिन्हा, उद्यमी , वकील, नवप्रवर्तक, वेब डेवलपर" />
<meta name="Description" content="एचटीएमएल, सीएसएस, जावास्क्रिप्ट, एसक्यूएल, माईएसक्यूएल, पीएचपी, पायथन, बूटस्ट्रैप, और बहुत कुछ सीखने के लिए सटीक और संक्षिप्त ट्यूटोरियल।" />
<!-- आपको निम्नलिखित दो पंक्तियों में से केवल एक का उपयोग करना चाहिए, क्योंकि दोनों फाइलें समान हैं। -->
<link rel="stylesheet" href="https://cdn.
<!-- <link rel="stylesheet" href="./bootstrap-3.4.1.css" /> -->
<!-- वैकल्पिक थीम: यदि आवश्यक हो, तो आप निम्नलिखित दो पंक्तियों में से एक जोड़ सकते हैं। -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net
<!-- <link href="./bootstrap-theme.min.css" rel="stylesheet" /> -->
<title> RIBHU अकादमी </title>
<!-- HTML5 तत्वों और मीडिया क्वेरी के IE8 समर्थन के लिए HTML5shiv और Respond.js -->
<!-- चेतावनी: यदि आप file:// के माध्यम से पृष्ठ देखते हैं तो Respond.js काम नहीं करता है -->
<!--[if lt IE 9]>
<script src="https://cdn.
<script src="https://
<![endif]-->
<!-- कई व्यक्ति और सरकारी वेबसाइट अभी भी सुरक्षा कारणों से पुराने इंटरनेट एक्सप्लोरर का उपयोग करते हैं, और इसका उपयोग भारत में कई संगठनों में डिजिटल हस्ताक्षर अपलोड करने के लिए भी किया जाता है। लाल रंग में Codes की उपरोक्त पंक्तियाँ आवश्यक हैं। -->
<style>
/* === एम्बेडेड CSS स्टाइल्स === */
h1 { color: gold; }
</style>
</head>
<body>
<h1>Exercise: HTML Template</h1>
<!-- jQuery (बूटस्ट्रैप के JavaScript प्लगइन्स के लिए आवश्यक) -->
<script src="https://code.
<!-- <script src="./jquery-3.6.1.js"></script> -->
<!-- सभी संकलित प्लगइन्स (नीचे) शामिल करें, या आवश्यकतानुसार अलग-अलग फाइलें शामिल करें -->
<script src="https://cdn.
<!-- <script src="./bootstrap-3.4.1.js"></script> -->
<!-- आपको, इसी तरह, ऊपर के जावास्क्रिप्ट तृतीय-पक्ष कोड की छह पंक्तियों के दूसरी और पाँचवीं पंक्तियों का उपयोग करना चाहिए, या तीसरी और छठी पंक्तियों का उपयोग करना चाहिए, क्योंकि इन फ़ाइलों के जोड़े समान हैं।
अस्वीकरण: प्रामाणिक स्रोत से सभी कोड कॉपी करें जहां integrity विशेषता और ऊपर वर्णित कोड (लाल रंग में) मौजूद है। -->
<script type="text/javascript">
// जावास्क्रिप्ट कोड एम्बेड करने के लिए script तत्व के अंदर लिखा जाता है
</script>
</body>
</html>
बूटस्ट्रैप क्या है ? और जेक्वेरी क्या है?
बूटस्ट्रैप एक ढांचा है, जिसमें CSS (style नियम) और जावास्क्रिप्ट कोड शामिल हैं। इसी तरह jQuery भी JavaScript कोड है। ये कोड ट्विटर सहित कई वेब डेवलपर्स के द्वारा विकसित किए गए हैं। हाँ! आपने इसे सही पढ़ा है। बूटस्ट्रैप को ट्विटर ब्लूप्रिंट के नाम से भी जाना जाता है ।
1990 के दशक में शायद ही आज जैसा इंटरनेट होता था! 2K सहस्राब्दी के नए दशक (2010 के मध्य) में भी, इंटरनेट अभी विकसित हो रहा था। प्रोग्रामर और डेवलपर्स ने WEB-PAGEs को स्क्रिप्ट करने के लिए कड़ा संघर्ष करते थे। जॉन रेजिग क्रॉस-ब्राउज़र जावास्क्रिप्ट कोड से निराश थे, जिसका अर्थ है कि एक ही क्रियाशीलता कोड को अलग-अलग वेब-ब्राउज़रों के लिए अलग-अलग लिखा जाना था। और, इसलिए jQuery उनके द्वारा विकसित किया गया था और jQuery के कई संस्करण अब jQuery फाउंडेशन द्वारा जारी किए गए हैं । jQuery ने जावास्क्रिप्ट कोड लिखने का तरीका सरल किया, और अब जावास्क्रिप्ट कोड सीखना और लिखना बहुत आसान हो गया है। मोज़िला फाउंडेशन सहित कई कंपनियों और वेब-डेवलपर्स ने विभिन्न ब्राउज़रों के लिए जावास्क्रिप्ट विकसित करना जारी रखा।
CSS HTML तत्वों (tagName) के लिए केवल बुनियादी नियम था। अब CSS2, CSS2.1 और CSS3 आदि भी जारी किए गए हैं। अब, HTML5, आधुनिक JavaScript (ECMAScript 6 - 2015) और आधुनिक CSS के साथ, WEB-PAGE बनाना बहुत आसान है। जब आप HTML वेब-पेज की मूल संरचना का उपयोग करते हैं, तो आपको अधिक (HTML, CSS और जावास्क्रिप्ट) कोड लिखने होंगे। शुरुआत में यह कम कोड दिखता है, जब कुछ HTML तत्व होते हैं, लेकिन जब एक जटिल वेबसाइट बनानी होती है, तो अधिक से अधिक कोड जोड़े जाएंगे।
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>R.I.B.H.U. Academy</title>
<style>
/* === EMBEDDED CSS STYLES === */
h1 { color: gold; }
</style>
</head>
<body>
<h1>Exercise: HTML Template</h1>
<!-- some contents, text or other HTML elements will be inserted here -->
<script type="text/javascript">
// जावास्क्रिप्ट कोड एम्बेड करने के लिए script तत्व के अंदर लिखा जाता है
</script>
</body>
</html>
Leave a Comment:
Amit Sinha March 2nd, 2023 at 9:30 PM
😃 😄 😁 😆 😅 😂 😉 😊 😇 😍 😘 😚 😋 😜 😝 😶 😏 😒 😌 😔 😪 😷 😵 😎 😲 😳 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 😤
Ribhu March 3rd, 2023 at 9:30 PM
🐵 🐒 🐶 🐩 🐺 🐱 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇
