HTML बेसिक
पिछले सत्रों में आप HTML से मिले और एक संपादक चुना। अब आप एक पूरा बेसिक पेज बनाएँगे: वह मानक कंकाल जिससे हर आधुनिक HTML फ़ाइल शुरू होनी चाहिए, साथ में थोड़ा दिखाई देने वाला कंटेंट।
बेसिक HTML दस्तावेज़ क्या है?
बेसिक HTML दस्तावेज़ एक टेक्स्ट फ़ाइल है जिसकी बाहरी संरचना तय होती है। उसके अंदर आप वह कंटेंट रखते हैं जो आगंतुक देखते हैं। इस कोर्स का लगभग हर पेज उसी बाहरी कंकाल को दोबारा उपयोग करता है और body के अंदर की चीज़ बदलता है।
सीधा उत्तर: आवश्यक कंकाल
एक आधुनिक बेसिक पेज में ये भाग इस क्रम में होते हैं:
<!DOCTYPE html>— HTML5 दस्तावेज़ घोषित करता है<html>— रूट तत्व जो पूरे पेज को लपेटता है<head>— पेज के बारे में जानकारी (मुख्य दिखाई देने वाला लेख नहीं)- head के अंदर
<title>— ब्राउज़र टैब और बुकमार्क का टेक्स्ट <body>— वह कंटेंट जो लोग पेज पर देखते हैं
<!DOCTYPE html>
<html>
<head>
<title>पेज शीर्षक</title>
</head>
<body>
<h1>यह एक शीर्षक है</h1>
<p>यह एक पैराग्राफ है।</p>
</body>
</html>
उदाहरण को पंक्ति दर पंक्ति पढ़ना
- doctype पहले होना चाहिए ताकि ब्राउज़र आधुनिक HTML नियम उपयोग करे
- बाकी सब
<html> ... </html>के अंदर रहता है <head>शीर्षक रखता है; आगंतुक इसे मुख्यतः टैब नाम में देखते हैं<body>वह शीर्षक और पैराग्राफ रखता है जो पेज क्षेत्र में दिखते हैं- अधिकांश तत्वों को स्लैश वाला मिलान बंद टैग चाहिए, जैसे
</p>
Head बनाम body
<head> को पेज के बैकस्टेज नोट्स और <body> को मंच समझें। सर्च इंजन और ब्राउज़र title व अन्य head डेटा उपयोग करते हैं। पेज पढ़ने वाले body देखते हैं। मुख्य लेख टेक्स्ट केवल head में रखना शुरुआती की आम गलती है।
नेस्टिंग और क्रम
HTML तत्व नेस्ट होते हैं: एक तत्व दूसरे के अंदर बैठ सकता है। टैग को साफ़ पेड़ में रखें। भीतरी टैग बाहरी से पहले बंद करें। बेसिक कंकाल के लिए यह क्रम रखें: doctype, फिर html, फिर head (title के साथ), फिर body।
स्वयं आज़माएँ
- अपने संपादक में
basic.htmlनाम की फ़ाइल बनाएँ - ऊपर वाला उदाहरण चिपकाएँ
- title टेक्स्ट और शीर्षक टेक्स्ट बदलें
- फ़ाइल सहेजें और ब्राउज़र में खोलें
- सेव और रिफ़्रेश के बाद पुष्टि करें कि टैब शीर्षक और पेज शीर्षक दोनों अपडेट हुए
छोटी युक्तियाँ जो बाद में समय बचाती हैं
- आधुनिक HTML शैली के लिए टैग नाम छोटे अक्षर में रखें (
<p>, न कि<P>) - नेस्टेड पंक्तियों को इंडेंट करें ताकि पता चले कौन से टैग साथ हैं
- शुरुआती उदाहरणों में मुख्य पेज शीर्षक के रूप में एक स्पष्ट
<h1>रखें - charset, लिंक, चित्र आदि बाद में जोड़ेंगे; पहले इस कंकाल पर महारत हासिल करें
आम गलतियाँ
- ऊपर
<!DOCTYPE html>भूल जाना - गलत क्रम में टैग बंद करना (जैसे
bodyसे पहलेhtmlबंद करना) - दिखाई देने वाला शीर्षक केवल
<head>में रखना .htmlएक्सटेंशन के बिना सहेजना और ब्राउज़र के अजीब व्यवहार पर हैरान होना- जब तत्व दोनों चाहता हो तो खोलने वाला टैग बिना बंद टैग लिखना
सारांश
- बेसिक HTML पेज doctype, html, head, title और body उपयोग करता है
- title मुख्यतः ब्राउज़र टैब में दिखता है
- दिखाई देने वाला कंटेंट body का है
- तत्व नेस्ट होते हैं; भीतरी टैग पहले बंद करें
- छोटी फ़ाइल संपादित कर ब्राउज़र रिफ़्रेश करके अभ्यास करें
- बाद के सत्र इसी कंकाल पर और तत्व जोड़ते हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी