छात्र-छात्राओं के लिए एचटीएमएल में उपलब्ध स्टडी मटीरियल

एचटीएमएल, वेब पेज का मुख्य हिस्सा होता है. इस यूनिट में, हम वेब पेज के लिए मज़बूत और काम का स्ट्रक्चर बनाने का तरीका जानेंगे.

सीखने लायक ज़रूरी बातें

  • छात्र-छात्राओं को एचटीएमएल फ़ाइल के स्ट्रक्चर के बारे में जानकारी मिलती है.
  • छात्र-छात्राओं को वेब पेज बनाने के लिए, सामान्य टैग इस्तेमाल करने का तरीका पता हो.

एचटीएमएल क्या है?

एचटीएमएल का मतलब हाइपर टेक्स्ट मार्कअप लैंग्वेज है. यह एक ऐसा कोड है जिसका इस्तेमाल हम इन कामों के लिए करते हैं:

  • ऐसे दस्तावेज़ बनाएँ जो वर्ल्ड वाइड वेब पर सेव किए जाते हैं और ब्राउज़र में दिखते हैं.
  • हमारे वेब पेज के लिए बुनियादी स्ट्रक्चर उपलब्ध कराता है.
  • इससे हमारा ब्राउज़र, टेक्स्ट और इमेज को सही तरीके से लोड कर पाता है, ताकि उन्हें दिखाया जा सके.

हम एचटीएमएल का इस्तेमाल कब करते हैं?

वर्ल्ड वाइड वेब पर दिखने वाला हर वेब पेज, एचटीएमएल कोड का इस्तेमाल करके लिखा जाता है. बटन, इमेज, फ़ॉर्म, टेक्स्ट के सेक्शन - ये सभी ऐसे एलिमेंट हैं जिन्हें एचटीएमएल की मदद से बनाया जाता है.

अगर हम अपने वेब पेज को मानव शरीर के तौर पर देखें, तो एचटीएमएल, हड्डियों का ढांचा है. सीएसएस का इस्तेमाल करके, शरीर में स्किन और कपड़े जोड़े जा सकते हैं. हालांकि, ऐसा सिर्फ़ तब किया जा सकता है, जब हमारे पास स्केलेटल स्ट्रक्चर मौजूद हो.

एचटीएमएल इन ऐक्शन

एचटीएमएल के मुख्य कॉम्पोनेंट, एलिमेंट होते हैं. टैग की मदद से एलिमेंट बनाए जाते हैं.

ज़्यादातर एलिमेंट में ओपनिंग टैग और क्लोज़िंग टैग होता है:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

आपको वेब पेज पर जो कॉन्टेंट (टेक्स्ट या अन्य एचटीएमएल एलिमेंट) दिखाना है उसे इन टैग के बीच में रखा जा सकता है. यह कुछ ऐसा है जैसे सैंडविच की लेयर को एक के ऊपर एक रखना.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

कुछ एचटीएमएल कॉन्टेंट, अपने-आप बंद होने वाले टैग से बनाया जाता है. इसके लिए, किसी अन्य क्लोज़िंग टैग की ज़रूरत नहीं होती:

<img />
<link />

सिर्फ़ इस एक टैग का इस्तेमाल करना काफ़ी है, क्योंकि इस एलिमेंट का काम आपके दस्तावेज़ में जगह बनाना है. ज़्यादातर एचटीएमएल एलिमेंट के उलट, इन सेल्फ-क्लोज़िंग एलिमेंट में अन्य एलिमेंट या जानकारी को नेस्ट नहीं किया जा सकता.

एचटीएमएल एलिमेंट के हिस्से

एचटीएमएल का उदाहरण

यह कोड ब्राउज़र में दिखेगा और नीचे दी गई इमेज की तरह दिखेगा.

यह कोड...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... Makes This Web Page

एचटीएमएल रेफ़रंस

फ़्रेमिंग

संदर्भ और मकसद

एचटीएमएल का मतलब हाइपर टेक्स्ट मार्कअप लैंग्वेज है. यह टेक्स्ट को स्ट्रक्चरल अर्थ देने का एक तरीका है. इससे कंप्यूटर और प्रोग्रामर को यह आसानी से पता चल जाता है कि टेक्स्ट के किसी हिस्से का मकसद क्या है.

एचटीएमएल को वेबपेज का ढांचा माना जाता है. यह वेबपेज को स्ट्रक्चर और कॉन्टेंट देता है. वहीं, JavaScript और सीएसएस, वेबपेज को इंटरैक्टिव और स्टाइलिंग देते हैं.

सीखने के उद्देश्य

छात्र-छात्राएं ये काम कर पाएंगे

  • एचटीएमएल फ़ाइल बनाएं और उसे अपने एडिटर और ब्राउज़र में खोलें
  • सही स्ट्रक्चर वाली एचटीएमएल फ़ाइल सेट अप करना
  • सूची बनाएं और कुछ सामान्य टैग का इस्तेमाल करके, अपनी वेबसाइट में स्ट्रक्चर और कॉन्टेंट जोड़ें

शुरू करें

सेक्शन फ़्रेम करना और उसका मकसद

  • एचटीएमएल को .html एक्सटेंशन वाली फ़ाइलों में लिखा जाता है.
  • अपनी एचटीएमएल फ़ाइलों को अपनी पसंद का कोई भी नाम दिया जा सकता है. हालांकि, index.html का इस्तेमाल लैंडिंग पेज के लिए सबसे ज़्यादा किया जाता है. ऐसा तब तक होता है, जब तक डेवलपर के पास सर्वर को किसी और तरीके से कॉन्फ़िगर करने की कोई वजह न हो.
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

छोटे-छोटे चैलेंज

  1. अपनी पसंद के हिसाब से, तीन और HTML फ़ाइलें बनाएं.
  2. अपने टेक्स्ट एडिटर और ब्राउज़र में कोई फ़ाइल खोलें.

एचटीएमएल पेज का स्ट्रक्चर

सेक्शन फ़्रेम करना और उसका मकसद

एचटीएमएल दस्तावेज़ की शुरुआत हमेशा एक ही स्ट्रक्चर से होनी चाहिए:

  • DOCTYPE टैग खास होता है और यह बंद नहीं होता. यह ऐसा टैग है जिसमें अक्षर और अंकों के अलावा अन्य वर्णों का इस्तेमाल किया जा सकता है.
  • <head> में आपकी वेबसाइट के बारे में जानकारी होती है. हालांकि, इसमें ऐसा कॉन्टेंट नहीं होता जो पेज पर दिखेगा.
  • <body> में आपके पेज का वह पूरा कॉन्टेंट होता है जो स्क्रीन पर दिखता है.
  • पेज का स्ट्रक्चर बनाने के लिए इस्तेमाल किए जाने वाले टैग को <body> टैग के बीच में रखा जाना चाहिए.
  • ओपनिंग और क्लोज़िंग टैग के बीच, हम एलिमेंट का टेक्स्ट या "कॉन्टेंट" डालते हैं. आखिरी नतीजा ऐसा दिखेगा: <example-tag>Content Goes in here</example-tag>. टैग को दूसरे टैग में भी रखा जा सकता है.
  • ध्यान दें कि किसी टैग को दूसरे टैग के अंदर रखने पर, आपको नए टैग को इंडेंट करना चाहिए. इससे यह पता चलता है कि यह अपने पैरंट टैग का चाइल्ड है.

शब्द ज्ञान

  • एलिमेंट - एचटीएमएल कोड से बनाए गए आइटम (जैसे, इमेज, पैराग्राफ़, और हेडिंग).
  • टैग - कोड के ऐसे हिस्से जिनसे पता चलता है कि कुछ एलिमेंट कहां से शुरू और कहां खत्म होते हैं.
  • child - ऐसे एलिमेंट जो दूसरे एलिमेंट के अंदर शामिल होते हैं.
  • parent - ऐसे एलिमेंट जिनमें अन्य एलिमेंट शामिल होते हैं.

एचटीएमएल के उदाहरण

ध्यान दें: यहां दिया गया उदाहरण सिर्फ़ रेफ़रंस के लिए है. आपको इसे तुरंत समझने की ज़रूरत नहीं है. हालांकि, यह देखना अच्छा है कि सही फ़ॉर्मैट वाला एचटीएमएल कैसा दिखता है.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

छोटे-छोटे चैलेंज

  1. अपनी बनाई गई किसी फ़ाइल को खोलें और उसमें बेसिक एचटीएमएल टैग स्ट्रक्चर जोड़ें.
  2. फ़ैमिली ट्री (या किसी और का फ़ैमिली ट्री) दिखाने के लिए, एचटीएमएल बॉडी सेट अप करें. फ़ैमिली ग्रुप बनाने के लिए, section टैग का इस्तेमाल करें. परिवार के किसी सदस्य को होल्ड करने के लिए, p टैग का इस्तेमाल करें. परिवार के रिश्ते जटिल होते हैं. हालांकि, इसका एक उदाहरण यह हो सकता है:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

सामान्य टैग

सेक्शन फ़्रेम करना और उसका मकसद

आम तौर पर, हम अपने टाइप के एलिमेंट नहीं बनाते हैं. इसके बजाय, पहले से तय किए गए कुछ ऐसे एलिमेंट होते हैं जिनमें फ़ंक्शन पहले से ही जुड़े होते हैं.

कोड ब्लॉक के उदाहरणों के बारे में ज़्यादा जानने के लिए, एचटीएमएल रेफ़रंस देखें

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

छोटे-छोटे चैलेंज

  1. ऊपर दिए गए सभी कॉन्टेंट में बदलाव करके, अपनी दिलचस्पी के हिसाब से जानकारी जोड़ें.
  2. आपने इस लेसन की शुरुआत में जो खाली एचटीएमएल फ़ाइलें बनाई थीं उनमें से किसी एक में, टाइटल, हेडिंग, और सब-हेडिंग के साथ एक न्यूज़ आर्टिकल तैयार करें. क्या आपको कॉन्टेंट के बारे में नहीं पता? यात्रा के दौरान किसी एक दिन के बारे में लिखो. आपने जो छोटी यात्राएं की हैं, जिन जगहों पर आपने खाना खाया है, और जिन जगहों पर आपने यात्रा की है उनके बारे में सोचें.
  3. अपनी वेबसाइट पर समाचार लेख दिखाने के लिए, उससे जुड़े टैग इस्तेमाल करें और कुछ कॉन्टेंट जोड़ें.
  4. पुष्टि करें कि आपका कॉन्टेंट, ब्राउज़र में दिख रहा हो!
  5. स्ट्रेच: ऐसा फ़ॉर्म बनाएं जिसे भरकर कोई व्यक्ति आपके लेख के बारे में टिप्पणी भेज सके. हालांकि, यह फ़ॉर्म अभी काम नहीं करेगा, क्योंकि हमने इसे JavaScript से नहीं जोड़ा है. एचटीएमएल में यह फ़ॉर्म बनाने से, हमें यह पता चल सकता है कि काम करने वाला फ़ॉर्म कैसे बनाया जा सकता है.

संदर्भ

एचटीएमएल, वर्ल्ड वाइड वेब पर कॉन्टेंट की भाषा है.

अपनी एचटीएमएल फ़ाइलों पर जाने और उन्हें खोलने के लिए, कमांड लाइन का इस्तेमाल करें. आपकी एचटीएमएल फ़ाइलों में सीएसएस स्टाइल और JavaScript स्क्रिप्टिंग का इस्तेमाल करके लिखा गया व्यवहार जोड़ा जाएगा. इसमें कई फ़ंक्शन शामिल होते हैं. एचटीएमएल फ़ाइलें भी ऐसे टेंप्लेट होंगी जिनका इस्तेमाल Google App Engine करेगा. साथ ही, इन्हें डेटाबेस से भरा जाएगा.

एचटीएमएल इन ऐक्शन

एचटीएमएल का इस्तेमाल शुरू करना

एचटीएमएल को .html एक्सटेंशन वाली फ़ाइलों में लिखा जाता है.

आपका पेज देखना

Mac पर एचटीएमएल फ़ाइल की झलक देखने के लिए: कमांड लाइन में, अपने एचटीएमएल पेज वाले फ़ोल्डर पर जाएं. इसके बाद, open filename टाइप करें. "filename" को अपनी एचटीएमएल फ़ाइल के नाम से बदलें.

सामान्य सिंटैक्स

<tag>
  Content
</tag>

एलिमेंट नेस्ट किए गए हैं

एचटीएमएल एलिमेंट को दूसरे एलिमेंट के अंदर रखा जा सकता है:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

एचटीएमएल पेज का स्ट्रक्चर

हर वेब पेज का बुनियादी स्ट्रक्चर एक जैसा होता है. यह इस तरह दिखता है:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • <head> में आपकी वेबसाइट के बारे में जानकारी होती है. हालांकि, इसमें ऐसा कॉन्टेंट नहीं होता जो पेज पर दिखेगा. इसे अपने वेब पेज का ‘दिमाग़' समझें.
  • <body> में आपके पेज का वह पूरा कॉन्टेंट होता है जो स्क्रीन पर दिखता है.

सामान्य एलिमेंट

किसी पेज पर कॉन्टेंट जोड़ने के लिए, <body> और </body> टैग में इन सामान्य एलिमेंट का इस्तेमाल करें.

Paragraph

पैराग्राफ़ बनाने के लिए, p ओपनिंग और क्लोज़िंग टैग का इस्तेमाल करें:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

टिप्पणी

रेंडर किए गए फ़ाइनल एचटीएमएल पर असर डाले बिना, अपने कोड को आसानी से पढ़ने के लिए टिप्पणियों का इस्तेमाल करें.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

हेडिंग

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

सामान्य <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

सूचियां

सूची में शामिल आइटम <li> की सूचियों को, क्रम से न लगाई गई सूची वाले टैग <ul> या क्रम से लगाई गई सूची वाले टैग <ol> के साथ रैप किया जाता है.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

इमेज

<img> टैग के लिए, src एट्रिब्यूट का इस्तेमाल करके इमेज का पता बताना ज़रूरी है. साथ ही, alt एट्रिब्यूट का इस्तेमाल करना ज़रूरी नहीं है. इसका इस्तेमाल सुलभता के लिए किया जाता है. इसमें स्क्रीन रीडर भी शामिल हैं.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

हाइपरलिंक के लिए, <a> टैग का इस्तेमाल करके हाइपरलिंक के डेस्टिनेशन का पता बताना ज़रूरी होता है. इसके लिए, href एट्रिब्यूट का इस्तेमाल करें.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

हॉरिज़ॉन्टल रूल

<!-- This self-closing tag creates a line across your web page. -->
<hr>

ब्रेक

<!-- This self-closing tag creates a line break between elements. -->
<br>

फ़ॉर्म

<form> का इस्तेमाल, उपयोगकर्ता से जानकारी इकट्ठा करने के लिए किया जाता है. <form> को काम करने के लिए, इकट्ठा किए गए डेटा को किसी जगह पर भेजना होता है, ताकि उसे प्रोसेस किया जा सके या मैनेज किया जा सके. इसलिए, <form>के लिए अक्सर अतिरिक्त एट्रिब्यूट की ज़रूरत होती है:

  • action - फ़ॉर्म सबमिट होने पर, फ़ॉर्म के डेटा का डेस्टिनेशन
  • method - इससे पता चलता है कि डेटा को GET या POST टाइप के अनुरोध का इस्तेमाल करके प्रोसेस किया जाना चाहिए या नहीं.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

इनपुट

<input> एक ऐसा एलिमेंट है जिसका इस्तेमाल <form>, जानकारी इकट्ठा करने के लिए करता है.

<input> एलिमेंट में आम तौर पर एक name एट्रिब्यूट भी होता है. इसका इस्तेमाल डेटाबेस, सबमिट किए गए डेटा से जुड़े फ़ील्ड की पहचान करने के लिए करते हैं.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

<input> एलिमेंट कई तरह से काम करता है: type एट्रिब्यूट तय करके, इसे टेक्स्ट फ़ील्ड, कैलेंडर-स्टाइल वाले तारीख चुनने वाले टूल, रेडियो बटन, ड्रॉपडाउन वगैरह के तौर पर रेंडर किया जा सकता है. ज़्यादा जानकारी के लिए, बाहरी दस्तावेज़ देखें.

सुझाव और तरकीबें

  • वेब पेजों के कोड की जांच करके जानें कि कौनसा एचटीएमएल टैग उपलब्ध है. इससे यह भी पता चलेगा कि अन्य डेवलपर ने वेब पेज पर कुछ जोड़ने के लिए किन टैग का इस्तेमाल किया है.
  • अगर आपको वह फ़ील्ड नहीं मिलता जिसे जोड़ना है, तो डेवलपर से जुड़े दस्तावेज़ देखें. यहां सभी संभावित एचटीएमएल एलिमेंट की कुछ सूचियां दी गई हैं https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
  • एचटीएमएल लिखते समय, जिन एलिमेंट के लिए ओपनिंग और क्लोज़िंग टैग की ज़रूरत होती है उनके लिए, टैग के बीच कॉन्टेंट जोड़ने से पहले टैग को खोलना और बंद करना सबसे अच्छा होता है. इस तरह, आपके पास डैंगलिंग टैग नहीं बचेंगे.
  • अपने कोड में एचटीएमएल एलिमेंट को नेस्ट किए गए फ़ॉर्मैट में सबसे सही तरीके से देखने के लिए, उन एलिमेंट को इंडेंट करें जो दूसरे एलिमेंट के अंदर हैं. इससे आपको अपने एचटीएमएल कॉन्टेंट के स्ट्रक्चर को तुरंत पहचानने में मदद मिलेगी.
  • ज़्यादा से ज़्यादा टिप्पणियां करें! इनसे आपको अपने कोड से जुड़ी समस्या हल करने में मदद मिलेगी. साथ ही, जब आपको दूसरों से इसकी समीक्षा करने के लिए कहना होगा, तब भी इनसे मदद मिलेगी.
  • वेब पर मौजूद संसाधन, जैसे कि html5boilerplate.com, एचटीएमएल लिखना तुरंत शुरू करने में आपकी मदद कर सकते हैं.

सबसे सही तरीकों की खास जानकारी

  • किसी वेब पेज के बारे में जानकारी, एचटीएमएल दस्तावेज़ के <head> में होती है: टाइटल, मेटाडेटा, स्टाइल के लिंक वगैरह.
  • किसी वेब पेज पर मौजूद जानकारी, एचटीएमएल दस्तावेज़ के <body> में जाती है.
  • एचटीएमएल दस्तावेज़ का कॉन्टेंट बनाने के लिए, डेवलपर कई एलिमेंट का इस्तेमाल कर सकते हैं. इनमें ये शामिल हैं: <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- --> वगैरह.
  • कुछ एलिमेंट के लिए, ओपनिंग टैग और क्लोज़िंग टैग <p></p> की ज़रूरत होती है.
  • अन्य एलिमेंट अपने-आप बंद हो जाते हैं. इसलिए, उनके लिए सिर्फ़ ओपनिंग टैग की ज़रूरत होती है: <img>.
  • टैग में ऐसे एट्रिब्यूट (src, alt, id वगैरह) शामिल हो सकते हैं जिनसे यह पता चलता है कि किसी एलिमेंट को कैसे काम करना चाहिए: <img src="filename.png" alt="description">.
  • टिप्पणियां, <!-- -->, डेवलपर को ऐसे नोट उपलब्ध कराती हैं जो यह समझने में मददगार होते हैं कि वेब पेज के कौनसे सेक्शन क्या काम करते हैं.
  • अपने ब्राउज़र में मौजूद डेवलपर टूल का इस्तेमाल करके, वेब पेजों के एचटीएमएल कोड की जांच करें. इससे यह पता चलेगा कि पेज कैसे बनाया गया था.

Question 1

इनमें से कौनसा एलिमेंट, चाइल्ड एलिमेंट है? (इस कसरत के लिए, बॉडी/एचटीएमएल एलिमेंट को अनदेखा करें)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 और p

दूसरा सवाल

एचटीएमएल दस्तावेज़ में, __ को <head> एलिमेंट में रखा जाता है और __ को <body> एलिमेंट में रखा जाता है.

  1. स्ट्रक्चर, मेटाडेटा
  2. मेटाडेटा, स्ट्रक्चर
  3. हेडिंग, छोटा कॉन्टेंट
  4. साइट का हेडर, साइट का मुख्य कॉन्टेंट

तीसरा सवाल

नेस्ट किए गए एलिमेंट को इंडेंट करने की इनमें से कौनसी वजहें सही नहीं हैं?

  1. इंडेंट करने से, यह देखना आसान हो जाता है कि किन एलिमेंट में कौनसे एलिमेंट शामिल हैं
  2. इंडेंट करने से, लोगों के लिए वेब पेज के स्ट्रक्चर को पढ़ना आसान हो जाता है
  3. इंडेंट करने से, बॉट/सर्च इंजन को वेब पेज के स्ट्रक्चर को पढ़ने में आसानी होती है
  4. इंडेंट करने से, सिबलिंग एलिमेंट की पहचान करना आसान हो जाता है

Question 4

इनमें से कौनसी, एचटीएमएल एलिमेंट की एट्रिब्यूट है?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. साइडबार
  4. साइडबार यहां दिखेगा!

पांचवां सवाल

यहां दिए गए एचटीएमएल एलिमेंट में कितने एट्रिब्यूट हैं?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

छठा सवाल

यहां दिए गए एचटीएमएल स्निपेट में, पैरंट एलिमेंट कौन-सा है?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

सातवां सवाल

यहां दिए गए एचटीएमएल स्निपेट में, कितने एलिमेंट पैरंट एलिमेंट के चाइल्ड एलिमेंट हैं?

(रैपिंग <body> या <html> एलिमेंट को न गिनें)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

आठवां सवाल

कुछ ब्राउज़र इस एचटीएमएल स्निपेट को सही तरीके से रेंडर करेंगे. हालांकि, इसमें क्या गड़बड़ी है?

<img src=puppies.png width=400 />
  1. इसमें क्लोज़िंग टैग नहीं है
  2. एट्रिब्यूट की वैल्यू के आस-पास कोटेशन मार्क होने चाहिए
  3. width एट्रिब्यूट की वैल्यू सबमिट करने के लिए, height एट्रिब्यूट की वैल्यू सबमिट करना भी ज़रूरी है
  4. इसमें कोई ज़रूरी एट्रिब्यूट मौजूद नहीं है

Question 1

इनमें से कौनसा एलिमेंट, चाइल्ड एलिमेंट है? (इस कसरत के लिए, बॉडी/एचटीएमएल एलिमेंट को अनदेखा करें)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

a एलिमेंट, चाइल्ड एलिमेंट है, क्योंकि यह किसी दूसरे एलिमेंट में शामिल है.

दूसरा सवाल

एचटीएमएल दस्तावेज़ में, __ को <head> एलिमेंट में रखा जाता है और __ को <body> एलिमेंट में रखा जाता है.

मेटाडेटा को <head> एलिमेंट में और स्ट्रक्चर को <body> एलिमेंट में रखा जाता है. <head> एलिमेंट में मौजूद कोई भी जानकारी, वेबपेज पर नहीं दिखेगी.

तीसरा सवाल

नेस्ट किए गए एलिमेंट को इंडेंट करने की इनमें से कौनसी वजहें सही नहीं हैं?

इंडेंट करने से, बॉट/सर्च इंजन के लिए वेब पेज के स्ट्रक्चर को पढ़ना आसान नहीं होता. जब कोई बॉट किसी वेबसाइट को पढ़ता है, तो वह एचटीएमएल कोड को पढ़ सकता है. भले ही, वह कोड एक ही लाइन में लिखा गया हो.

Question 4

इनमें से कौनसी, एचटीएमएल एलिमेंट की एट्रिब्यूट है?

<div class="sidebar">Sidebar goes here!</div>

class एक एट्रिब्यूट है. एट्रिब्यूट, एचटीएमएल एलिमेंट के अंदर होते हैं और आम तौर पर इनकी कोई वैल्यू होती है. हालांकि, यह ज़रूरी नहीं है कि इनकी वैल्यू हो.

पांचवां सवाल

यहां दिए गए एचटीएमएल एलिमेंट में कितने एट्रिब्यूट हैं?

<input type="text" placeholder="username" name="username" />

ऊपर दिए गए input एलिमेंट में तीन एट्रिब्यूट हैं - type, placeholder, और name.

छठा सवाल

यहां दिए गए एचटीएमएल स्निपेट में, पैरंट एलिमेंट कौन-सा है?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> एक पैरंट एलिमेंट है, क्योंकि इसमें अन्य एलिमेंट शामिल हैं.

सातवां सवाल

यहां दिए गए एचटीएमएल स्निपेट में, कितने एलिमेंट पैरंट एलिमेंट के चाइल्ड एलिमेंट हैं?

(रैपिंग <body> या <html> एलिमेंट को न गिनें)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

स्निपेट में चार चाइल्ड एलिमेंट हैं. मूल रूप से, ऐसा कोई भी एलिमेंट जिसके ऊपर पैरंट एलिमेंट मौजूद हो. इसलिए, <div> एलिमेंट को छोड़कर बाकी सभी एलिमेंट - <h1>, <p>, <i>, <a>.

आठवां सवाल

कुछ ब्राउज़र इस एचटीएमएल स्निपेट को सही तरीके से रेंडर करेंगे. हालांकि, इसमें क्या गड़बड़ी है?

<img src=puppies.png width=400 />

एट्रिब्यूट की वैल्यू के आस-पास कोटेशन मार्क होने चाहिए. <img /> एक सेल्फ क्लोज़िंग टैग है. इसमें कोई ज़रूरी एट्रिब्यूट नहीं होता. ऐसा हो सकता है कि width मौजूद हो, लेकिन height न हो. इसके उलट, height मौजूद हो, लेकिन width न हो.