सीधे मुख्य हिस्से पर जाएं
Kodebloc

गाइड / वेब की बुनियादी बातें

HTML क्या है?

HTML की आसान शुरुआत, वही भाषा जिसमें हर वेब पेज लिखा जाता है, Kodebloc के लिखे कोड के साथ।

HTML एक लाइन में

HTML वह भाषा है जो वेब ब्राउज़र को बताती है कि पेज पर क्या है। वह कहती है "यह हेडिंग है", "यह पैराग्राफ़ है", "यह फ़ोटो है" और "यह लिंक है"। HTML का पूरा नाम HyperText Markup Language है। इसे याद रखने की ज़रूरत नहीं। बस इतना याद रखिए कि HTML का काम मतलब और ढांचा है, दिखावट नहीं। रंग, फ़ॉन्ट और लेआउट एक दूसरी भाषा से आते हैं, जिसका नाम CSS है।

आप जो भी वेबसाइट खोलते हैं, वह HTML पर बनी है, Kodebloc की बनाई वेबसाइटें भी। जब आप अपनी वेबसाइट के बारे में बताते हैं, तो AI आपके लिए एक असली HTML पेज लिखता है। इसलिए थोड़ा HTML सीखने से आप समझ पाते हैं कि आपने क्या बनाया, और बेहतर बदलाव मांग पाते हैं।

टैग और एलिमेंट

HTML टैग से बनता है। टैग एंगल ब्रैकेट के अंदर लिखा एक शब्द है, जैसे <p>। ज़्यादातर टैग जोड़ी में आते हैं: एक खुलने वाला टैग और एक बंद होने वाला टैग। बंद होने वाले टैग में स्लैश होता है। दोनों के बीच जो भी है, वह कंटेंट है।

<p>We bake bread every morning.</p>

<p> से </p> तक की पूरी चीज़ को एलिमेंट कहते हैं। यहां यह पैराग्राफ़ एलिमेंट है। ब्राउज़र टैग नहीं दिखाता। वह सिर्फ़ शब्द दिखाता है, एक पैराग्राफ़ की तरह सजाकर।

एलिमेंट दूसरे एलिमेंट के अंदर भी रह सकते हैं, जैसे डिब्बे के अंदर डिब्बा। इसे नेस्टिंग कहते हैं। हमेशा अंदर वाले एलिमेंट को बाहर वाले से पहले बंद कीजिए।

<p>Open <strong>every day</strong> from 7 am.</p>

एट्रिब्यूट: ज़्यादा जानकारी

कुछ एलिमेंट को ज़्यादा जानकारी चाहिए होती है। यह आप खुलने वाले टैग के अंदर एक एट्रिब्यूट से देते हैं। एट्रिब्यूट में एक नाम, बराबर का निशान और कोट्स में एक वैल्यू होती है।

<a href="https://www.example.com">Visit our friends</a>

यहां href एट्रिब्यूट है। यह लिंक को बताता है कि कहां जाना है। दो और एट्रिब्यूट आपको अक्सर दिखेंगे: class, जिससे CSS किसी एलिमेंट को स्टाइल करता है, और alt, जो फ़ोटो के बारे में बताता है।

हेडिंग और पैराग्राफ़

HTML में हेडिंग के छह लेवल हैं, <h1> से <h6> तक। <h1> पेज का मुख्य टाइटल है, और आम तौर पर पेज में एक ही होता है। हर बड़े सेक्शन के लिए <h2> और सेक्शन के अंदर छोटे हिस्सों के लिए <h3> इस्तेमाल कीजिए। इन्हें किताब के नाम, चैप्टर और उसके अंदर के हिस्सों की तरह समझिए।

<h1>Rosa's Bakery</h1>
<h2>Our breads</h2>
<h3>Sourdough</h3>
<p>Slow-rising bread with a crisp crust.</p>

हेडिंग का लेवल ढांचे में उसकी जगह देखकर चुनिए, साइज़ देखकर नहीं। किसी भी हेडिंग को CSS से बड़ा या छोटा किया जा सकता है। स्क्रीन रीडर और सर्च इंजन इन लेवल से समझते हैं कि आपका पेज कैसे बंटा है।

लिंक

लिंक से ही वेब, वेब बनता है। <a> एलिमेंट ("anchor" से) लिंक बनाता है, और उसका href बताता है कि वह कहां जाता है। यह किसी दूसरी वेबसाइट, किसी ईमेल पते, या उसी पेज के किसी हिस्से पर ले जा सकता है।

<a href="https://www.example.com">Another website</a>
<a href="mailto:hello@example.com">Email us</a>
<a href="#menu">Jump to the menu</a>

आखिरी लिंक उसी पेज पर id="menu" वाले एलिमेंट तक ले जाता है। Kodebloc भी ऐसे लिंक इस्तेमाल करता है। एक से ज़्यादा पेज वाली वेबसाइट में Menu पेज का लिंक <a href="#menu"> लिखा जाता है।

इमेज

<img> एलिमेंट तस्वीर दिखाता है। इसका कोई बंद होने वाला टैग नहीं होता, क्योंकि इसके अंदर कोई कंटेंट नहीं होता। इसे दो एट्रिब्यूट चाहिए: src, यानी तस्वीर का पता, और alt, यानी उसका छोटा सा विवरण।

<img src="croissants.jpg" alt="A tray of golden croissants" width="800" height="600">

स्क्रीन रीडर alt टेक्स्ट पढ़कर सुनाता है, और तस्वीर न खुले तो वही दिखता है। width और height से ब्राउज़र सही जगह पहले से छोड़ देता है, ताकि तस्वीर लोड होते वक्त पेज उछले नहीं।

ढांचा बनाने वाले हिस्से

कुछ एलिमेंट इसलिए होते हैं कि दूसरे एलिमेंट को एक साथ रखें और बताएं कि पेज का हर हिस्सा किस काम का है। इन्हें सिमैंटिक एलिमेंट कहते हैं, क्योंकि इनका अपना मतलब होता है:

  • <header>: पेज का ऊपरी हिस्सा, अक्सर लोगो और मेन्यू के साथ।
  • <nav>: मुख्य नेविगेशन लिंक, एक जगह।
  • <main>: पेज का मुख्य कंटेंट। हर पेज में एक होता है।
  • <section>: किसी एक विषय वाला हिस्सा, जैसे "हमारा मेन्यू" या "रिव्यू"।
  • <footer>: पेज का निचला हिस्सा, जिसमें संपर्क की जानकारी और छोटे अक्षरों वाली बातें होती हैं।

Kodebloc को कहा गया है कि वह अपनी बनाई हर वेबसाइट में ये सिमैंटिक टैग इस्तेमाल करे। इनसे स्क्रीन रीडर पेज के हिस्सों के बीच कूद पाते हैं, और आपके लिए कोड पढ़ना भी आसान होता है।

एक छोटा पूरा पेज

यह रहा एक पूरा, चलता हुआ वेब पेज। आप इसे index.html नाम की फ़ाइल में कॉपी करके ब्राउज़र में खोल सकते हैं, और यह दिख जाएगा।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rosa's Bakery - Fresh Bread in Town</title>
  <meta name="description" content="Rosa's Bakery bakes sourdough and buns every morning. Open daily from 7 am.">
</head>
<body>
  <header>
    <nav>
      <a href="#breads">Breads</a>
      <a href="#visit">Visit</a>
    </nav>
  </header>
  <main>
    <h1>Rosa's Bakery</h1>
    <p>Fresh bread, baked every morning.</p>
    <section id="breads">
      <h2>Our breads</h2>
      <img src="sourdough.jpg" alt="A round sourdough loaf on a wooden board">
    </section>
    <section id="visit">
      <h2>Visit us</h2>
      <p>Open every day from 7 am.</p>
    </section>
  </main>
  <footer>
    <p>Rosa's Bakery</p>
  </footer>
</body>
</html>

हर हिस्सा क्या करता है:

  • <!DOCTYPE html> ब्राउज़र को बताता है कि यह आज के ज़माने का HTML पेज है।
  • <html lang="en"> सब कुछ अपने अंदर रखता है और बताता है कि पेज अंग्रेज़ी में है।
  • <head> में पेज के बारे में वह जानकारी होती है जो विज़िटर को पेज पर नहीं दिखती: ब्राउज़र टैब का टाइटल, सर्च नतीजों में दिखने वाला विवरण, और viewport वाली लाइन जिससे पेज फ़ोन की स्क्रीन पर फ़िट होता है।
  • <body> में वह सब होता है जो विज़िटर देखते हैं।

Kodebloc वेबसाइट का ढांचा भी ऐसा ही होता है। उसके head में टाइटल, meta description और viewport वाली लाइन होती है, और body में header, सेक्शन वाला main हिस्सा, और footer। बस वह लंबी होती है, ज़्यादा सेक्शन और ढेर सारी स्टाइलिंग के साथ।

Crumb & Chai बेकरी की वेबसाइट: बकाइन रंग के ब्लॉक में बड़ी हेडलाइन, बगल में क्रोसां की फ़ोटो
Kodebloc से बनी एक असली वेबसाइट। रंगों के नीचे यह भी उन्हीं हिस्सों से बनी है जिनसे ऊपर वाला छोटा पेज: लिंक वाला मेन्यू, एक हेडिंग, एक पैराग्राफ़ और एक इमेज।

अपनी वेबसाइट का HTML देखें

Plus और Pro पर आप वह असली HTML देख सकते हैं जो Kodebloc ने आपके लिए लिखा। एडिटर में ऊपर बाईं ओर अपनी वेबसाइट के नाम वाला मेन्यू खोलिए और Download चुनिए। आपको website.html नाम की फ़ाइल मिलेगी। वेबसाइट देखने के लिए इसे ब्राउज़र में खोलिए, या कोड पढ़ने के लिए किसी टेक्स्ट एडिटर (जैसे Notepad, TextEdit या VS Code) में।

  1. अपनी मुख्य हेडिंग ढूंढने के लिए फ़ाइल में <h1 सर्च कीजिए।
  2. पेज कैसे बंटा है, यह देखने के लिए <section ढूंढिए।
  3. कोई <img ढूंढिए और उसका alt टेक्स्ट पढ़िए।
  4. ऊपर head के अंदर <title> ढूंढिए।

जो मिला उसमें कुछ बदलना है? फ़ाइल बदलने की ज़रूरत नहीं। Kodebloc में लौटकर आप चैट से बदलाव मांग सकते हैं या शब्द खुद बदल सकते हैं।

एक नज़र में

  • HTML बताता है कि पेज पर क्या है। CSS तय करता है कि वह कैसा दिखे।
  • एंगल ब्रैकेट वाले टैग कंटेंट को घेरकर एलिमेंट बनाते हैं।
  • href, src और alt जैसे एट्रिब्यूट ज़्यादा जानकारी जोड़ते हैं।
  • हेडिंग क्रम से रखिए: एक <h1>, फिर <h2> और <h3>।
  • <header> और <main> जैसे सिमैंटिक एलिमेंट पेज का ढांचा बनाते हैं।
वेबसाइट बनाएं, कोड देखें

अब भी कुछ अटका है?

कॉन्टैक्ट पेज पर हमें मैसेज भेजिए, हम ईमेल से जवाब देंगे।