HTML मूल बातें: तत्व, टैग और दस्तावेज़ संरचना
HTML हाइपरटेक्स्ट मार्कअप लैंग्वेज के लिए खड़ा है और यह मूल संरचनात्मक
तत्व है जिसका उपयोग वेबपेज बनाने के लिए किया जाता है। HTML एक
मार्कअप भाषा है, जिसका अर्थ है कि यह एक दस्तावेज़ के भीतर सामग्री को
"चिह्नित" करने के लिए उपयोग किया जाता है, इस मामले में एक
वेबपेज, संरचनात्मक और अर्थ संबंधी जानकारी के साथ जो एक ब्राउज़र को बताता
है कि पृष्ठ कैसे प्रदर्शित किया जाए। जब HTML दस्तावेज़ एक
वेब ब्राउज़र द्वारा लोड किया जाता है, तो ब्राउज़र HTML टैग
का उपयोग करता है, जिसने पृष्ठ की सामग्री को प्रस्तुत करने के लिए दस्तावेज़ को
चिह्नित किया है।
तीन तरह के कोड होते हैं जो एक बेसिक वेबसाइट पेज बनाते हैं। HTML
संरचनात्मक
तत्वों को नियंत्रित करता है, CSS उन तत्वों को स्टाइल करता है, और
जावास्क्रिप्ट उन तत्वों के बीच गतिशील बातचीत को सक्षम करता है।
HTML संरचना + CSS शैली + JS इंटरैक्शन = वेब
पेज
तत्व और टैग
HTML तत्व और टैग सामग्री को चिह्नित करने के लिए एक साथ काम करते हैं।
एचटीएमएल तत्व एक टैग के उद्देश्य को इंगित करते हैं और टैग एक तत्व की शुरुआत और
अंत का संकेत देते हैं।
उदाहरण के लिए, यहाँ HTML में एक सरल
अनुच्छेद है:
<p> यह एक पैराग्राफ है। </ p>
पत्र "पी" पैराग्राफ तत्व का प्रतिनिधित्व करता है। इस
उदाहरण में, <p> एक प्रारंभिक टैग है जो ब्राउज़र को बताता है कि सामग्री जो इसका
अनुसरण करती है वह एक पैराग्राफ है। दूसरे टैग में स्लैश </ p> इंगित
करता है कि यह एक क्लोजिंग टैग है जो ब्राउज़र को बताता है कि पैरा तत्व समाप्त हो
रहा है और इसके बाद दिखाई देने वाली कोई भी सामग्री पैराग्राफ का हिस्सा नहीं है।
यदि आप प्रत्येक टैग को "बंद" करना याद नहीं रखते हैं, तो
आप गंभीर प्रदर्शन समस्याओं का सामना कर सकते हैं क्योंकि ब्राउज़र इस पैटर्न की
व्याख्या करेगा, जिसका अर्थ है कि उद्घाटन टैग द्वारा पहचाना गया तत्व शेष पृष्ठ के
लिए जारी रहना चाहिए।
तत्व और टैग लेबल
आप मोज़िला डेवलपर नेटवर्क HTML तत्व संदर्भ
पृष्ठ पर सभी HTML तत्वों की पूरी सूची पा सकते हैं।
मूल HTML पृष्ठ संरचना
एक मूल HTML पृष्ठ एक दस्तावेज है जिसमें आमतौर पर
फ़ाइल एक्सटेंशन .html होता है, हालांकि HTML अक्सर अन्य फ़ाइल प्रकारों की सामग्री
में भी दिखाई देता है। सभी HTML दस्तावेज़ एक ही मूल संरचना का पालन
करते हैं ताकि फ़ाइल को प्रस्तुत करने वाला ब्राउज़र जानता है कि उसे क्या करना
है। मूल संरचना, जिस पर सभी वेबपृष्ठ बनाए गए हैं, इस तरह दिखता
है:
<! DOCTYPE html>
<Html>
<Head>
<शीर्षक>
पृष्ठ
शीर्षक </ शीर्षक>
</ Head>
<Body>
<h1> मुखपृष्ठ
शीर्षक </ h1>
<p> यह
एक पैराग्राफ है। </ p>
</ Body>
</ Html>
जब यह कोड किसी ब्राउज़र द्वारा प्रदान किया जाता है, तो
यह इस तरह दिखाई देगा:
ब्राउज़र में बेसिक html पेज रेंडरिंग
doctype
कोड की पहली पंक्ति, <! DOCTYPE html>, एक doctype
घोषणा
कहलाती है और ब्राउज़र को बताती है कि पृष्ठ के HTML के किस संस्करण
में लिखा गया है। इस मामले में, हम doctype का उपयोग कर रहे
हैं जो HTML5 से मेल खाता है, सबसे ऊपर है। HTML भाषा
का नवीनतम संस्करण। HTML के विभिन्न संस्करणों के अनुरूप कई
अलग-अलग सिद्धांत हैं।
एचटीएमएल रूट तत्व
अगला, <html> तत्व हमारे दस्तावेज़ में अन्य सभी कोड
और सामग्री के चारों ओर घूमता है। HTML मूल तत्व के रूप में जाना जाने वाला यह
तत्व, हमेशा एक <head> तत्व और एक <body> तत्व
होता है।
प्रधान तत्व
HTML हेड तत्व एक कंटेनर है जिसमें कई HTML तत्व शामिल हो
सकते हैं जो ब्राउज़र द्वारा प्रदान किए गए पृष्ठ के दृश्य भाग नहीं होते हैं। ये
तत्व या तो मेटाडेटा हैं जो पृष्ठ के बारे में जानकारी का वर्णन करते हैं या
सीएसएस स्टाइलशीट या जावास्क्रिप्ट फ़ाइलों जैसे बाहरी संसाधनों में खींचने में
मदद कर रहे हैं।
<शीर्षक> तत्व एकमात्र ऐसा तत्व है जिसे <head>
टैग
के भीतर समाहित किया जाना आवश्यक है। इस तत्व के भीतर की सामग्री को ब्राउज़र के
टैब में पृष्ठ शीर्षक के रूप में प्रदर्शित किया जाता है और यह भी कि खोज इंजन
किसी पृष्ठ के शीर्षक की पहचान करने के लिए क्या उपयोग करते हैं।
HTML के सभी तत्व जिनका उपयोग <head> तत्व के अंदर
किया जा सकता है:
<आधार>
<Link>
<मेटा>
<Noscript>
<Script>
<Style>
<शीर्षक> (आवश्यक)
शरीर तत्व
HTML डॉक्यूमेंट में केवल एक <body> एलिमेंट हो सकता
है क्योंकि यह एलिमेंट वह कंटेनर होता है जो डॉक्यूमेंट की सामग्री को रखता है।
आपके द्वारा ब्राउज़र में प्रस्तुत की गई सभी सामग्री इस तत्व में निहित है।
उपरोक्त उदाहरण में, पृष्ठ की सामग्री एक शीर्षक और सरल पैराग्राफ है।
घोंसला करने की क्रिया
आपने देखा होगा कि मैं HTML तत्वों का उल्लेख "कंटेनर"
के रूप में करता हूं। ऐसा इसलिए है क्योंकि उचित "नेस्टिंग" HTML
लिखने
का एक महत्वपूर्ण हिस्सा है जो सभी ब्राउज़रों में काम करेगा, सभी
सामग्री को प्रस्तुत करेगा, स्क्रीन पाठकों द्वारा पठनीय होगा,
और
सीएसएस और जावास्क्रिप्ट द्वारा लक्षित किया जा सकेगा। HTML के संदर्भ में,
घोंसले
के शिकार का मतलब है कि आप क्या सोचते हैं इसका मतलब हो सकता है: प्रत्येक तत्व
दूसरे तत्व के अंदर जाता है, जैसे घोंसले के शिकार गुड़िया एक दूसरे
के भीतर शारीरिक रूप से "नेस्टेड" होते हैं।
उदाहरण के लिए, ऊपर उल्लिखित मूल पृष्ठ संरचना वैध HTML
है
क्योंकि प्रत्येक तत्व के उद्घाटन टैग में एक समापन टैग होता है और इसके भीतर कोई
अन्य तत्व पूरी तरह से होते हैं।
मैंने उदाहरणों को लेबल करने के लिए HTML टिप्पणियों का
उपयोग किया है जो हम यह दिखाने के लिए उपयोग कर रहे हैं कि कौन से टैग टैग खोल रहे
हैं और कौन से टैग टैग बंद कर रहे हैं, इसलिए आप देख सकते हैं कि प्रत्येक
तत्व कैसे निहित है। HTML में, कोई भी सामग्री
जो </! और -> के बीच है, एक टिप्पणी है जो ब्राउज़र द्वारा
प्रदान नहीं की जाएगी।
<! DOCTYPE html> <! - doctype घोषणा ->
<html> <-! HTML टैग खोलने ->
<head> <! - हेड टैग खोलना ->
<शीर्षक>
पृष्ठ
शीर्षक </ शीर्षक> <! - शीर्षक टैग ->
</ head> <! - हेड
टैग बंद करना ->
<body> <! - बॉडी टैग खोलना
->
<h1> मुखपृष्ठ
शीर्षक </ h1> <! - h1 शीर्षक ->
<p> यह
एक पैराग्राफ है। </ p> <! - पैराग्राफ ->
</ body> <! - बॉडी
टैग बंद करना ->
</ html> <! - HTML टैग बंद करना ->
ध्यान रखें कि इंडेंटेशन का उपयोग डेवलपर्स द्वारा यह सुनिश्चित करने
में मदद करने के लिए किया जाता है कि उनका HTML ठीक से नेस्टेड
है और यह सुनिश्चित करने के लिए कि सभी शुरुआती टैगों में एक समान समापन टैग है। HTML
टिप्पणियों
की तरह, ब्राउज़र कोड में इंडेंटेशन प्रदर्शित नहीं करेगा, ये
फ़ॉर्मेटिंग पैटर्न केवल कोड की पठनीयता को सुधारने में मदद करने के लिए हैं।
नमूना कोड का निम्नलिखित संस्करण सही ढंग से नेस्टेड नहीं है। यहां
नेस्टिंग त्रुटियों को देखने और खोजने के लिए कुछ समय लें।
<! DOCTYPE html>
<Html>
<Head>
<शीर्षक>
पृष्ठ
शीर्षक </ शीर्षक>
<Body>
</ Head>
<h1>
<p> मुखपृष्ठ शीर्षक </ h1>
यह
एक पैराग्राफ है। </ p>
</ Body>
</ Html>
पिछले उदाहरण में दो नेस्टिंग त्रुटियाँ हैं:
प्रारंभिक <body> टैग उद्घाटन और समापन <head>
टैग
के भीतर समाहित है।
<Body> सामग्री में उद्घाटन <p> टैग
खोलने और बंद करने के <h1> टैग के भीतर समाहित है।
यह कोड वास्तव में कुछ ब्राउज़रों में रेंडर करेगा, लेकिन
सिर्फ इसलिए कि कुछ रेंडर करते हैं इसका मतलब यह नहीं है कि कोड वाक्यविन्यास रूप
से सही है।
निष्कर्ष
इस पोस्ट में हमने सीखा है कि HTML क्या है,
HTML तत्व क्या है, HTML टैग क्या है और मूल HTML पृष्ठ
कैसे संरचित है। क्या आपके पास इनमें से किसी भी अवधारणा के बारे में कोई प्रश्न
है? टिप्पणी में अपने सवाल छोड़ दो!
No comments:
Post a Comment