पाठ

वेब विकास 

एचटीएमएल का परिचय

वेब डेवलपमेंट की दुनिया में आपका स्वागत है! यह पाठ आपको इंटरनेट के मूलभूत निर्माण खंडों से परिचित कराएगा: एचटीएमएल। एचटीएमएल का मतलब हाइपरटेक्स्ट मार्कअप लैंग्वेज है, और यह वेबपेज बनाने के लिए मानक भाषा है। इसे एक वेबसाइट का कंकाल समझें – यह संरचना और सामग्री प्रदान करता है।

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

एचटीएमएल संरचना: मूल टेम्पलेट

प्रत्येक एचटीएमएल दस्तावेज़ एक मूल संरचना का पालन करता है। यह संरचना ब्राउज़र को बताती है कि यह एक एचटीएमएल फ़ाइल पढ़ रहा है और पृष्ठ के लिए आवश्यक तत्व प्रदान करती है। यहां एक न्यूनतम एचटीएमएल टेम्पलेट दिया गया है:

            
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

आइए प्रत्येक भाग को समझते हैं:

  • <!DOCTYPE html>: यह घोषणा ब्राउज़र को बताती है कि दस्तावेज़ एक HTML5 दस्तावेज़ है। यह हमेशा आपकी एचटीएमएल फ़ाइल में सबसे पहली चीज़ होनी चाहिए।
  • <html>: यह पृष्ठ का मूल तत्व है। बाकी सब कुछ इस टैग के अंदर जाता है।
  • <head>: इस अनुभाग में एचटीएमएल दस्तावेज़ के बारे में मेटा-जानकारी होती है, जैसे शीर्षक, वर्ण सेट और स्टाइलशीट के लिंक।
  • <title>: एचटीएमएल पृष्ठ के लिए एक शीर्षक निर्दिष्ट करता है (जो ब्राउज़र के शीर्षक बार या टैब में दिखाया जाता है)।
  • <body>: यह वह जगह है जहां आपके वेबपेज की सारी सामग्री जाती है – टेक्स्ट, इमेज, लिंक और वह सब कुछ जो उपयोगकर्ता देखते हैं।

एचटीएमएल टैग: तत्व और विशेषताएँ

एचटीएमएल तत्वों को परिभाषित करने के लिए टैग का उपयोग करता है। अधिकांश टैग जोड़े में आते हैं: एक ओपनिंग टैग और एक क्लोजिंग टैग। उदाहरण के लिए, <p> एक पैराग्राफ के लिए ओपनिंग टैग है, और </p> क्लोजिंग टैग है।

कुछ टैग स्व-क्लोजिंग होते हैं, जिसका अर्थ है कि उन्हें अलग क्लोजिंग टैग की आवश्यकता नहीं होती है। एक उदाहरण <br> टैग है, जो एक लाइन ब्रेक बनाता है। टैग में विशेषताएँ (attributes) भी हो सकती हैं, जो तत्व के बारे में अतिरिक्त जानकारी प्रदान करती हैं। उदाहरण के लिए, <img> टैग (छवियों के लिए) छवि स्रोत निर्दिष्ट करने के लिए src विशेषता का उपयोग करता है।

शीर्षक: <h1> से <h6>

शीर्षकों का उपयोग आपकी सामग्री को संरचित करने और उसे पढ़ना आसान बनाने के लिए किया जाता है। एचटीएमएल शीर्षकों के छह स्तर प्रदान करता है, <h1> (सबसे महत्वपूर्ण) से <h6> (सबसे कम महत्वपूर्ण) तक। आमतौर पर, <h1> का उपयोग पृष्ठ के मुख्य शीर्षक के लिए किया जाता है।

यहां एक उदाहरण दिया गया है:

            
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>

पैराग्राफ: <p>

पैराग्राफ का उपयोग टेक्स्ट के ब्लॉक प्रदर्शित करने के लिए किया जाता है। <p> टैग एक पैराग्राफ को परिभाषित करता है।

उदाहरण:

            
<p>This is a paragraph of text.  It can contain multiple sentences and words.</p>
<p>This is another paragraph. Paragraphs are automatically separated by a blank line.</p>

सूचियाँ: <ul> और <ol>

एचटीएमएल दो प्रकार की सूचियाँ प्रदान करता है: अनऑर्डर की गई सूचियाँ (<ul>) और ऑर्डर की गई सूचियाँ (<ol>)। अनऑर्डर की गई सूचियों का उपयोग उन वस्तुओं के लिए किया जाता है जिनका कोई विशिष्ट क्रम नहीं होता है, जबकि ऑर्डर की गई सूचियों का उपयोग उन वस्तुओं के लिए किया जाता है जिन्हें एक विशेष अनुक्रम में होने की आवश्यकता होती है। सूची आइटम <li> टैग का उपयोग करके परिभाषित किए जाते हैं।

यहां दोनों के उदाहरण दिए गए हैं:

            
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

लिंक: <a>

लिंक उपयोगकर्ताओं को विभिन्न वेबपेजों या एक ही पृष्ठ के भीतर अनुभागों के बीच नेविगेट करने की अनुमति देते हैं। <a> टैग एक हाइपरलिंक को परिभाषित करता है। सबसे महत्वपूर्ण विशेषता href है, जो लिंक के URL को निर्दिष्ट करती है।

उदाहरण:

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

target विशेषता का उपयोग यह निर्दिष्ट करने के लिए किया जा सकता है कि लिंक्ड दस्तावेज़ को कहाँ खोलना है। target="_blank" लिंक को एक नए टैब या विंडो में खोलता है।

छवियाँ: <img>

<img> टैग का उपयोग वेबपेज में छवियों को एम्बेड करने के लिए किया जाता है। src विशेषता छवि फ़ाइल का पथ निर्दिष्ट करती है। alt विशेषता छवि के लिए वैकल्पिक टेक्स्ट प्रदान करती है, जो छवि लोड न होने पर प्रदर्शित होता है और पहुंच के लिए महत्वपूर्ण है।

उदाहरण:

            
<img src="image.jpg" alt="Description of the image">

एक साधारण वेबपेज लेआउट बनाना

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

यहां पूरा एचटीएमएल कोड दिया गया है:

            
<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage!</h1>
    <p>This is a simple webpage created using HTML fundamentals.</p>
    <ul>
        <li>Learn HTML</li>
        <li>Practice coding</li>
        <li>Build awesome websites</li>
    </ul>
    <a href="https://www.google.com" target="_blank">Visit Google</a>
    <img src="placeholder.jpg" alt="A placeholder image">
</body>
</html>

"placeholder.jpg" को एक इमेज फ़ाइल के वास्तविक पथ से बदलना याद रखें। इस कोड को एक एचटीएमएल फ़ाइल (उदाहरण के लिए, "index.html") के रूप में सहेजें और परिणाम देखने के लिए इसे अपने वेब ब्राउज़र में खोलें। अब आपके पास एक पूरी तरह कार्यात्मक एचटीएमएल पेज है!



-/- ✔: 0, ✖: 0