CodeX Cider Logo
CodeX Cider
HTML टॉपिक्स
HTML मॉड्यूल📖पाठ 1 / 18

HTML का परिचय

आज हम HTML से शुरुआत करते हैं — वह भाषा जो कंप्यूटर को बताती है कि webpage किस चीज़ से बना है, ताकि browser उसे पढ़कर स्क्रीन पर दिखा सके।

⏱️~5 मिनट पढ़ाई🟢शुरुआती लेवल⚡लाइव एडिटर पर जाएँ

इस पाठ में आप क्या सीखेंगे

  1. 1HTML क्या है, और इसे markup language क्यों कहते हैं
  2. 2कंप्यूटर के लिए tags किसी ने क्यों बनाए
  3. 3Browser क्या है, और वह HTML कैसे पढ़ता है
  4. 4पहले पेज का ढांचा: DOCTYPE, html, head, body
  5. 5आगे चलकर यह एक पूरी, खूबसूरत website कैसे बनती है
  1. 1

    चलो, आज HTML के बारे में पढ़ते हैं

    तो HTML क्या है? HTML एक language है, लेकिन वह भाषा नहीं जिसे हम मुँह से बोलते हैं। यह लिखने वाली भाषा है, ताकि कोई website कंप्यूटर पर चल सके और स्क्रीन पर दिखाई दे।

    इसका पूरा नाम HyperText Markup Language है, और असली ज़रूरी शब्द Markup है। Markup का मतलब है टेक्स्ट के चारों ओर निशान लगाना, ताकि कंप्यूटर समझ सके कि कौन सी लाइन heading है, कौन सी paragraph है, और कौन सी चीज़ link है। बिना इन निशानों के कंप्यूटर को सिर्फ़ अक्षरों की कतार दिखती है। निशान लगते ही उसे पता चल जाता है कि पेज को कैसे बनाना है।

  2. 2

    पहले एक समस्या थी

    मान लो, सालों पहले किसी इंसान ने कंप्यूटर देखा और सोचा कि इसमें कुछ दिखाया जाए — एक टाइटल, एक कहानी, शायद एक फ़ोटो — लेकिन कैसे? कंप्यूटर पेज को वैसे नहीं पढ़ता जैसे तुम अखबार पढ़ते हो। अखबार खोलते ही तुम्हें पता चल जाता है कि बड़े अक्षर हेडलाइन हैं और छोटी लाइनें खबर हैं। कंप्यूटर के पास ऐसी समझ नहीं होती। उसे सिर्फ़ अक्षर दिखते हैं, जब तक कोई उसे फ़र्क सिखाए।

    इसलिए उस इंसान ने कुछ signs तय किए, शब्दों के चारों ओर छोटे लेबल। Heading वाले sign में लपेटो तो वह heading बन जाती है, paragraph वाले sign में लपेटो तो वह paragraph बन जाता है। आज उन्हीं signs को हम tags कहते हैं — <h1>, <p>, <a>, और कई और। HTML इन्हीं signs का तय किया हुआ नियम है।

  3. 3

    फिर एक engine बनी, जिसे आज हम browser कहते हैं

    कागज़ पर signs लिख देने से काम नहीं चलता, अगर उन्हें पढ़ने वाला कोई न हो। इसलिए एक engine भी बनाई गई, जिसका एक ही काम है: उन signs को पढ़ो, syntax समझो, और स्क्रीन पर एक design दिखाओ। उसी engine को आज हम browser कहते हैं — Chrome, Firefox, Edge, Safari। हर एक का आइडिया एक जैसा है, सिर्फ़ कंपनी अलग है।

    तुम HTML लिखते हो, browser उस syntax को पढ़ता है, और स्क्रीन पर एक पेज बन जाता है। HTML न हो तो browser के पास पढ़ने को कुछ ठोस नहीं बचता। Browser न हो तो HTML डिस्क पर पड़ी एक टेक्स्ट फ़ाइल भर है। दोनों एक-दूसरे के लिए बने हैं, और आज दुनिया की हर website तुम्हारे सामने इसी रिश्ते से आती है।

  4. 4

    आज हम यही पढ़ने वाले हैं

    आज हम यह समझने वाले हैं कि थोड़ा सा code कैसे लिखा जाता है, वह code browser पर कैसे दिखता है, और आगे चलकर यही चीज़ एक खूबसूरत website में कैसे बदलती है। अकेले HTML से खूबसूरती नहीं आती। HTML पेज का ढांचा है, उसका skeleton है। CSS पेंट है, spacing है, और पूरा look है। JavaScript व्यवहार है — वे बटन जो क्लिक करने पर सच में कुछ करते हैं।

    हर website फिर भी यहीं से शुरू होती है। पहले signs लिखे जाते हैं, फिर उनके ऊपर पेंट चढ़ता है। इस लेसन में हम signs पर रुकेंगे, और वह पहला ढांचा देखेंगे जो लगभग हर HTML फ़ाइल में होता है।

  5. 5

    हर पेज का एक सीधा सा ढांचा होता है

    असली HTML फ़ाइल टैग्स का ढेर नहीं होती। उसका एक shape होता है, और इंटरनेट का लगभग हर पेज उसी shape को follow करता है। पहली लाइन <!DOCTYPE html> browser से कहती है कि यह आधुनिक HTML5 है, नब्बे के दशक का कोई पुराना फ़ॉर्मैट नहीं। उसके बाद <html> आता है, जो पूरा दस्तावेज़ है; जो कुछ भी तुम लिखते हो, वह इसके अंदर बैठता है।

    उसके अंदर <head> बैकस्टेज है। यहाँ रखा <title> ब्राउज़र टैब वाला नाम बनता है, और सर्च इंजन भी अक्सर इसे पढ़ते हैं, लेकिन विज़िटर इस हिस्से को पेज की तरह नहीं देखते। <body> स्टेज है। Headings, paragraphs, images, forms — जो स्क्रीन पर दिखना चाहिए, वह यहीं लिखा जाता है।

    नीचे वही पहली फ़ाइल का उदाहरण है। एक बार पढ़ो, फिर कोड के बगल वाला browser pane देखो। वही कोड है, बस अब वह पेज बन चुका है।

Interactive Live Editor
index.html
Click & type to editHTML5
Browser

लाइन-बाय-लाइन

  1. <!DOCTYPE html>

    यह पहली लाइन browser से कहती है कि फ़ाइल को आज के HTML5 नियमों से पढ़ो, पुराने अनिश्चित व्यवहार में मत जाओ।

  2. <html> ... </html>

    यह पूरे दस्तावेज़ का बाहरी डब्बा है। Opening tag पेज शुरू करता है, closing tag उसे खत्म करता है, और जो कुछ तुम लिखते हो वह इन दोनों के बीच रहता है।

  3. <head>

    यह बैकस्टेज है: टैब का title, और बाद में CSS फ़ाइलें। विज़िटर इस सेक्शन को मुख्य पेज की तरह नहीं देखते।

  4. <title>My First Website</title>

    यह वह नाम है जो ब्राउज़र टैब पर दिखाई देता है। सर्च इंजन भी अक्सर इसी लाइन को पढ़ते हैं, इसलिए इसे ध्यान से लिखना चाहिए।

  5. <body>

    यह स्टेज है। जो यूज़र को दिखाना है — headings, टेक्स्ट, images, forms — वह यहीं लिखा जाता है, और browser इसी हिस्से को पेज की तरह खींचता है।

  6. <h1> और <p>

    <h1> heading वाला sign है, इसलिए browser उस लाइन को मुख्य टाइटल मानता है। <p> paragraph वाला sign है, इसलिए browser उस लाइन को साधारण पढ़ने वाला टेक्स्ट मानता है।

  7. <!-- HTML Comments -->

    कोड में खुद के लिए या दूसरे डेवलपर्स के लिए नोट्स लिखना। <!-- ... --> के अंदर लिखी किसी भी बात को ब्राउज़र पूरी तरह नज़रअंदाज़ (ignore) कर देता है और यह स्क्रीन पर कभी नहीं दिखती।

खुद ट्राई करो

ऊपर दिए गए लाइव कोड एडिटर में क्लिक करो। Hello, World! की जगह अपना नाम लिखो और नए paragraph में अपना शहर लिखकर देखो। दाईं तरफ ब्राउज़र पेन में बदलाव तुरंत लाइव दिखेंगे!

हिंट: जो टैब पर दिखना चाहिए वह head के अंदर title में जाता है। जो पेज पर दिखना चाहिए वह body में जाता है।

💡 समाधान देखें (यदि अटक गए हों)
<!DOCTYPE html>
<html>
  <head>
    <title>मेरा पहला वेबपेज</title>
  </head>
  <body>
    <h1>नमस्ते, मैं राहुल हूँ!</h1>
    <p>मैं नई दिल्ली में रहता हूँ और वेब डेवलपमेंट सीख रहा हूँ।</p>
  </body>
</html>
त्वरित ज्ञान जाँच

यूज़र को स्क्रीन पर दिखने वाला सारा कंटेंट (जैसे हेडिंग, इमेज और पैराग्राफ) HTML दस्तावेज़ में कहाँ लिखा जाना चाहिए?

गलती कहाँ होती है

  • 1.Closing tag भूल जाना। अगर <h1>Hello लिख दिया और </h1> नहीं लगाया, तो browser उसके बाद की बहुत सी चीज़ों को उसी heading का हिस्सा मान सकता है।
  • 2.दिखने वाला टेक्स्ट head में डाल देना। Head बैकस्टेज है, इसलिए पेज खाली लगेगा। यूज़र को जो दिखना चाहिए, वह body में जाता है।
  • 3.<!DOCTYPE html> की स्पेलिंग गलत लिखना या एंगुलर ब्रैकेट > बंद करना भूल जाना।

इंटरव्यू की तैयारी (क्लिक करके उत्तर देखें)

Q: HTML क्या है, एक लाइन में?▼

HTML एक markup language है जो webpage की structure बताती है — heading क्या है, paragraph क्या है, link क्या है — ताकि browser उस syntax को पढ़कर पेज बना सके।

Q: Tag और element में क्या फ़र्क है?▼

Tag खुद sign है, जैसे <p>। Element पूरा टुकड़ा है: opening tag, उसके अंदर का content, और closing tag, जैसे <p>Hello</p>।

Q: Browser HTML के साथ क्या करता है?▼

वह HTML का syntax पढ़ता है, DOM (Document Object Model) बनाता है, नियम लगाता है, और स्क्रीन पर layout खींचता है। CSS बाद में look को सँवारती है और JavaScript व्यवहार जोड़ता है।

अगला लेसनHTML एलिमेंट्स