html Tutorial in Hindi

❮ Previous

html एलीमेंट तथा html टैग

HTML (एच.टी.एम.एल.) के लिखने से पहले आइए उसमें प्रयुक्त (उपयोग यानि Use) होने वाले घटकों, अर्थात चिन्ह तथा लिखने के तरीकों को देखें।

html या HTML के वर्शन या संस्करण (Version) का डेक्लरेशन

आपने अभी वेव पेज के लिए जो html कोड लिखा है, उसे देखें। सुविधा के लिए वह कोड फिर से दिया जा रहा है।

(1) <!DOCTYPE html>

(2) <html>

(3) <body>

(4) <h1>यह हमारा पहला वेब पेज है। </h1>

(5) <h2>It is My First Web Page </h2>

(6) <p>हेलो दोस्त ! !</p>

(7) <p>Hello Friend ! !</p>

(8) </body>

(9) </html>

ऊपर दिये गये html डॉक्यूमेंट में बायीं तरफ लाइन नम्बर दिया गया है।

लाइन नम्बर (1)

html डॉक्यूमेंट के लाइन नम्बर (1) में लिखा है

< !DOCTYPE html >

यह बतलाता है कि यह html डॉक्यूमेंट html 5 (अर्थात html का पाँचवा संस्करण) है।

वर्तमान में html 5 ही नवीनतम (Latest) संस्करण है। इसके पहले html 4.0, html 3.0 आदि संस्करण पर कार्य होता था। हालाँकि आज भी html के पुराने कुछ संस्करण कार्यरत हैं, परंतु यहाँ हमलोग नवीनतम संस्करण html 5 पर कार्य करेंगे।

जैसे किसी कार के मॉडल का नवीनतम संस्करण (latest model) होता है, ठीक वैसा ही समझ लिजिए कि html 5 कम्प्यूटर के इस भाषा का नवीनतम संस्करण (Latest version) है।

किसी भी html डॉक्यूमेंट को शुरू करने से पहले उसके संस्करण की घोषणा (Declaration) आवश्यक (Declaration of the html version is must) है। html के अन्य संस्करण के लिए अलग तरह से declaration क़ी आवश्यकता होती है। यहाँ चूँकि हमलोग html के पाँचवें संस्करण अर्थात html 5 को सीख रहे हैं, अत: इसमें html डॉक्यूमेंट के शुरू में < !DOCTYPE html > लिखकर यह बतलाया गया है कि यह html 5 है।

इसे नीचे दिये गये तीनों तरीकों में से किसी एक तरह से लिखा जा सकता है।

< !DOCTYPE html >

< !doctype html >

< !DOCTYE HTML >

html एलीमेंट तथा html टैग

html एलीमेंट तथा html टैग लगभग एक ही चीज है।

जैसे कि < html > < /html > , < p > </p> , < h1> </h1> इत्यादि, html एलीमेंट या टैग के कुछ उदाहरण हैं।

html एलीमेंट तथा html टैग लिखने के नियम

(a) html एलीमेंट या टैग को कोणीय ब्रैकेट (Angle bracket <>) के अंदर लिखा जाता है। जैसे कि < h1> , <p> , <div> आदि।

(b) html एलीमेंट या टैग हमेशा जोड़े में लिखा जाता है। जैसे कि जैसे कि < html > < /html > , < p > </p> आदि।

html एलीमेंट का पहला भाग अर्थात जोड़े का पहला पार्ट ओपनिंग टैग (Opening tag) कहलाता है, तथा दूसरा पार्ट क्लोसिंग टैग (Closing tag) कहलाता है।

जैसे कि < p > </p> एलीमेंट के जोड़े में < p > ओपनिंग टैग (opening tag) है तथा </p> क्लोजिंग टैग (Closing tag) है।

इस तरह प्रत्येक html एलीमेंट के जोड़े में एक ओपनिंग टैग (opening tag) तथा दूसरा क्लोजिंग टैग (closing tag) होता है।

ओपनिंग टैग (opening tag) में कोणीय ब्रैकेट के अंदर केवल एलीमेंट का चिन्ह (Symbol) लिखा जाता है।

क्लोजिंग टैग (Closing tag) में कोणीय ब्रैकेट शुरू करने के बाद एक फॉरवार्ड स्लैश (Forward slash (/)) उसके बाद html एलीमेंट का चिन्ह (Symbol) तथा अंत में कोणीय ब्रैकेट को बंद किया जाता है।

उदारण के लिये < p > < /p >

html tutorial7 in hindi

सारांश (Summary)

(a) html एलीमेंट: html डॉक्यूमेंट में विभिन्न अवयवों को विशेष चिन्ह या कोड द्वारा दिखाया जाता है। ये कोड कोणीय ब्रैकेट के अंदर लिखे जाते हैं। इन्हें html एलीमेंट कहा जाता है।

जैसे: <p> , <div> , आदि

(b) html टैग: html एलीमेंट को जोड़े में लिखा जाता है। जोड़े का प्रथम भाग ओपनिंग टैग तथा दूसरा भाग क्लोजिंग टैग कहलाता है।

जैसे: p एलीमेंट का ओपनिंग टैग <p> तथा क्लोजिंग टैग </p> है।

(c) html एलीमेंट के क्लोजिंग टैग में कोणीय ब्रैकेट शुरू होने के बाद एक फॉरवार्ड स्लैश लगाया जाता है। परंतु ओपेनिंग टैग में कोई स्लैश नहीं लगाया जाता है।

विभिन्न html एलीमेंट तथा टैग एवं उपयोग

head टैग

head एलीमेंट डॉक्यूमेंट में <html> लिखने के बाद लिखा जाता है।

अन्य html टैग की तरह ही head एलीमेंट भी जोड़े में लिखा जाता है।

head एलीमेंट का भी एक ओपनिंग टैग < head > तथा एक क्लोजिंग टैग होता है।

head एलीमेंट लिखने का तरीका:

<head></head>

title टैग

title टैग को head एलीमेंट के बीच में अर्थात अंदर लिखा जाता है।

अन्य एलीमेंट की तरह ही title टैग का एक ओपनिंग टैग <title> तथा एक क्लोजिंग टैग </title> होता है। अर्थात title टैग को भी जोड़े में लिखा जाता है।

title टैग को लिखने का तरीका:

<title> </title>

चूँकि title टैग को heat एलीमेंट के अंदर लिखा जाता है, अत: पूरा title टैग को निम्नांकित तरीके से लिखा जायेगा।

<head>

<title> </title>

</head>

title टैग वेब पेज के टाइटल को दिखलाता है। तथा टाइटल टैग के अंदर वेब पेज का टाइटल लिखा जाता है।

<head>

<title> मेरा पहला वेब पेज</title>

</head>

यहाँ मेरा पहला वेब पेज टाइटल के रूप में लिखा गया है। ब्राउजर पर पेज खुलने पर उसके टाइटल के रूप में मेरा पहला वेब पेज दिखेगा।

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

body एलीमेंट

body एलीमेंट वेब पेज के बॉडी को दर्शाता है।

body एलीमेंट को भी जोड़े में लिखा जाता है, तथा इसका एक ओपनिंग टैग <body> तथा एक क्लोजिंग टैग </body> होता है।

body एलीमेंट को head एलीमेंट के क्लोज होने के बाद लिखा जाता है, अर्थात body एलीमेंट को head एलीमेंट के क्लोजिंग टैग </head> के बाद लिखा जाता है।

body एलीमेंट को लिखने का तरीका

<body></body>

html (एचटीएमएल) h1 एलीमेंट

html (एचटीएमएल) h1 एलीमेंट डॉक्यूमेंट में मुख्य प्रसंग या शीर्षक को दर्शाने के लिये लिखा जाता है। मूल रूप से h1 एलीमेंट के अक्षर का साईज (Font size) सबसे बड़ा होता है या रखा जाता है।

html (एचटीएमएल) h1 एलीमेंट को भी अन्य एलीमेंट की तरह जोड़े में लिखा जाता है। h1 एलीमेंट का भी एक ओपनिंग टैग <h1> तथा क्लोजिंग टैग </h1> है।

h1 एलीमेंट एक डॉक्यूमेंट में एक ही हो सकता है।

html (एचटीएमएल) h2 एलीमेंट

html (एचटीएमएल) h2 एलीमेंट डॉक्यूमेंट में उप प्रसंग के लिये लिखा जाता है। मूल रूप से h2 एलीमेंट के अक्षर का साईज (Font size) h1 एलीमेंट से छोटा होता है या रखा जाता है।

html (एचटीएमएल) h2 एलीमेंट को भी अन्य एलीमेंट की तरह जोड़े में लिखा जाता है। h2 एलीमेंट का भी एक ओपनिंग टैग <h2> तथा क्लोजिंग टैग </h2> है।

h2 एलीमेंट एक डॉक्यूमेंट में एक से ज्यादा हो सकता है।

html (एचटीएमएल) h3 एलीमेंट

html (एचटीएमएल) h3 एलीमेंट डॉक्यूमेंट में उप प्रसंग के लिये लिखा जाता है। मूल रूप से h3 एलीमेंट के अक्षर का साईज (Font size) h2 एलीमेंट से छोटा होता है या रखा जाता है।

html (एचटीएमएल) h3 एलीमेंट को भी अन्य एलीमेंट की तरह जोड़े में लिखा जाता है। h3 एलीमेंट का भी एक ओपनिंग टैग <h3> तथा क्लोजिंग टैग </h3> है।

h3 एलीमेंट भी एक डॉक्यूमेंट में एक से ज्यादा हो सकता है।

html (एचटीएमएल) h4 एलीमेंट

html (एचटीएमएल) h4 एलीमेंट डॉक्यूमेंट में उप प्रसंग के लिये लिखा जाता है। मूल रूप से h4 एलीमेंट के अक्षर का साईज (Font size) h3 एलीमेंट से छोटा होता है या रखा जाता है।

html (एचटीएमएल) h4 एलीमेंट को भी अन्य एलीमेंट की तरह जोड़े में लिखा जाता है। h4 एलीमेंट का भी एक ओपनिंग टैग <h4> तथा क्लोजिंग टैग </h4> है।

h4 एलीमेंट भी एक डॉक्यूमेंट में एक से ज्यादा हो सकता है।

html (एचटीएमएल) h5 एलीमेंट

html (एचटीएमएल) h5 एलीमेंट डॉक्यूमेंट में उप प्रसंग के लिये लिखा जाता है। मूल रूप से h5 एलीमेंट के अक्षर का साईज (Font size) h5 एलीमेंट से छोटा होता है या रखा जाता है।

html (एचटीएमएल) h5 एलीमेंट को भी अन्य एलीमेंट की तरह जोड़े में लिखा जाता है। h5 एलीमेंट का भी एक ओपनिंग टैग <h5> तथा क्लोजिंग टैग </h5> है।

h5 एलीमेंट भी एक डॉक्यूमेंट में एक से ज्यादा हो सकता है।

html (एचटीएमएल) h6 एलीमेंट

html (एचटीएमएल) h6 एलीमेंट डॉक्यूमेंट में उप प्रसंग के लिये लिखा जाता है। मूल रूप से h6 एलीमेंट के अक्षर का साईज (Font size) h5 एलीमेंट से छोटा होता है या रखा जाता है।

html (एचटीएमएल) h6 एलीमेंट को भी अन्य एलीमेंट की तरह जोड़े में लिखा जाता है। h6 एलीमेंट का भी एक ओपनिंग टैग <h6> तथा क्लोजिंग टैग </h6> है।

h6 एलीमेंट भी एक डॉक्यूमेंट में एक से ज्यादा हो सकता है।

इस तरह पैराग्राफ के हेडिंग को लिखने के लिये html डॉक्यूमेंट में h1 से h6 तक हेडिंग एलीमेंट होता है।

उदाहरण:


<!DOCTYPE html>
<html>
       <head>
	<title>This is the title of my headings page</&title>	
      </head>
      <body>
             <h1>It is first heading</h1>
             <h2>It is second heading</h2>
             <h3>It is third heading</h3>
             <h4>It is fourth heading</h4>
             <h5>It is fifth heading</h5>
             <h6>It is sixth heading</h6>
      </body>
</html>

इसे ब्राउजर पर देखने पर विभिन्न हेडिंग नीचे दिखाया गया है।

html tutorial8 in hindi

html p (पैराग्राफ) एलीमेंट

एक html (एचटीएमएल) डॉक्यूमेंट में p एलीमेंट का उपयोग पैराग्राफ लिखने में होता है।

अन्य html एलीमेंट की तरह ही p एलीमेंट को जोड़े में लिखा जाता है। तथा p एलीमेंट का एक ओपनिंग टैग <p> तथा एक क्लोजिंग टैग <p> होता है।

एचटीएमएल (html) p एलीमेंट को एचटीएमएल (html) डॉक्यूमेंट में बॉडी (body) एलीमेंट के अंदर लिखा जाता है।

एक एचटीएमएल (html) डॉक्यूमेंट में कई p एलीमेंट हो सकते हैं।

एचटीएमएल (html) p एलीमेंट को लिखने का तरीका

<p></p>

p एलीमेंट के साथ पूरा एचटीएमएल (html) डॉक्यूमेंट


<!DOCTYPE html>
<html>
       <head>
	<title></title>	
      </head>
      <body>
             <p>यह एक पैराग्राफ है।</p>
      </body>
</html>

एचटीएमएल (html) div एलीमेंट

एचटीएमएल (html) डॉक्यूमेंट में div एलीमेंट का उपयोग विषय वस्तु को विभिन्न डिवीजन अर्थात सेगमेंट (विभिन्न खंडों) में बाँटने के लिये किया जाता है।

एचटीएमएल (html) के अन्य एलीमेंट की तरह ही div एलीमेंट को भी जोड़े में लिखा जाता है। तथा div एलीमेंट का भी एक ओपनिंग टैग <div> तथा क्लोजिंग टैग </div> होता है।

एक एचटीएमएल (html) डॉक्यूमेंट में div एलीमेंट की संख्या आवश्यक्ता के अनुरूप एक से अधिक हो सकती है।

div एलीमेंट के अंदर पैराग्राफ (अर्थात p एलीमेंट), हेडिंग (अर्थात h1 से h6 एलीमेंट) हो सकते हैं।

परंतु p एलीमेंट या h1 से h6 एलीमेंट के अंदर div एलीमेंट नहीं होगा। ऐस क्यों नहीं हो सकता है, इसकी ब्याख्या हम आगे समझेंगे।

सारांश

एक html डॉक्यूमेंट में मुख्य रूप से निम्नांकित एलीमेंट तथा टैग होते हैं।

(a) <html></html>

इसका उपयोग सभी html डॉक्यूमेंट में किया जाता है। अन्य सारे एलीमेंट इसके अंदर लिखे जाते हैं। इसका ओपनिंग टैग html डॉक्यूमेंट के शुरू होने तथा क्लोजिंग टैग html डॉक्यूमेंट के खत्म होने अर्थात क्लोज होने के बारे में ब्राउजर को बतलाता है।

(b) <head></head>

head एलीमेंट को डॉक्यूमेंट के शुरू में तथा html एलीमेंट के ओपनिंग टैग के बाद लिखा जाता है। इसका उपयोग title एलीमेंट, स्टाइल शीट (डॉक्यूमेंट को विभिन्न आकर्षक स्टाइल में सजाने के लिये लिखा जाने वाला कोड), आदि के लिये किया जाता है।

title एलीमेंट का उपयोग वेब पेज के टाइटल को लिखने के लिए होता है। एक वेब साइट में प्रत्येक वेब पेज का एक यूनिक टाइटल होता है। title टैग को head एलीमेंट के अंदर लिखा जाता है।

(d) <body></body>

body एलीमेंट का उपयोग डॉक्यूमेंट में लिखे गये विषय वस्तु को दर्शाने के लिये किया जाता है। body एलीमेंट के अंतर्गत लिखी गई सामग्रियाँ ही वेब पेज पर दिखती है। body एलीमेंट को डॉक्यूमेंट में head एलीमेंट के क्लोजिंग टैग के बाद लिखा जाता है।

(e) हेडिंग एलीमेंट h1 से h6

एचटीएमएल (html) डॉक्यूमेंट में हेडिंग एलीमेंट h1 से h6 तक का उपयोग विषयवस्तु के विभिन्न शीर्षकों को दर्शाने के लिये किया जाता है।

एक एचटीएमएल (html) डॉक्यूमेंट h1 केवल एक तथा h2 से h6 तक के एलीमेंट आवश्यक्तानुसार कई हो सकते हैं।

(f) <p></p>

एचटीएमएल (html) डॉक्यूमेंट में विभिन्न पैराग्राफ को दर्शाने के लिए p एलीमेंट का उपयोग किया जाता है। एक डॉक्यूमेंट p एलीमेंट की संख्या आवश्यक्ता के अनुसार कई हो सकती है।

(g) <div></div>

div एलीमेंट का उपयोग एचटीएमएल (html) डॉक्यूमेंट के विषयवस्तु को विभिन्न खंडों (Segment) में बाँटने के लिये किया जाता है।

html tutorial hindi home

❮ Previous

Reference: