भले ही आधुनिक वेबसाइटें आम तौर पर उपयोगकर्ता के अनुकूल इंटरफेस के साथ बनाई जाती हैं, लेकिन कुछ बुनियादी HTML को जानना उपयोगी होता है। यदि आप निम्नलिखित 17 HTML उदाहरण टैग (और कुछ अतिरिक्त) जानते हैं, तो आप स्क्रैच से एक मूल वेबपेज बनाने में सक्षम होंगे या वर्डप्रेस जैसे ऐप द्वारा बनाए गए कोड को ट्वीक कर पाएंगे।
हमने अधिकांश टैग के लिए आउटपुट के साथ HTML कोड उदाहरण प्रदान किए हैं। यदि आप उन्हें कार्य करते हुए देखना चाहते हैं, तो लेख के अंत में नमूना HTML फ़ाइल डाउनलोड करें। आप इसके साथ एक टेक्स्ट एडिटर में खेल सकते हैं और इसे ब्राउज़र में लोड करके देख सकते हैं कि आपके परिवर्तन क्या करते हैं।
1. <!DOCTYPE html>
आपके द्वारा बनाए गए प्रत्येक HTML दस्तावेज़ की शुरुआत में आपको इस टैग की आवश्यकता होगी। यह सुनिश्चित करता है कि एक ब्राउज़र जानता है कि वह HTML पढ़ रहा है, और यह कि वह नवीनतम संस्करण HTML5 की अपेक्षा करता है।
हालांकि यह वास्तव में एक HTML टैग नहीं है, फिर भी यह जानना अच्छा है।
2. <html>
यह एक अन्य टैग है जो ब्राउज़र को बताता है कि वह HTML पढ़ रहा है। <html> टैग सीधे DOCTYPE टैग के बाद जाता है, और आप इसे अपनी फ़ाइल के अंत में </html> टैग के साथ बंद कर देते हैं। आपके दस्तावेज़ में बाकी सब कुछ इन टैगों के बीच जाता है।
3. <सिर>
<head> टैग आपकी फाइल के हेडर सेक्शन को शुरू करता है। यहां आने वाली सामग्री आपके वेबपेज पर दिखाई नहीं देती है। इसके बजाय, इसमें खोज इंजन के लिए मेटाडेटा और आपके ब्राउज़र की जानकारी शामिल है।
बुनियादी पेजों के लिए, <head> टैग में आपका शीर्षक होगा, और वह इसके बारे में है। लेकिन कुछ अन्य चीजें हैं जिन्हें आप शामिल कर सकते हैं, जिन पर हम एक क्षण में विचार करेंगे।
4. <शीर्षक>
यह टैग आपके पेज का टाइटल सेट करता है। आपको बस इतना करना है कि अपना शीर्षक टैग में डालें और इसे इस तरह बंद करें (मैंने संदर्भ दिखाने के लिए हेडर टैग भी शामिल किए हैं):
<head>
<title>My Website</title>
</head>
यह वह नाम है जो ब्राउज़र में खोले जाने पर टैब शीर्षक के रूप में प्रदर्शित होगा।
5. <मेटा>
शीर्षक टैग की तरह, मेटाडेटा आपके पृष्ठ के शीर्षलेख क्षेत्र में रखा जाता है। मेटाडेटा मुख्य रूप से खोज इंजन द्वारा उपयोग किया जाता है, और यह आपके पृष्ठ पर मौजूद जानकारी के बारे में जानकारी है। कई अलग-अलग मेटा फ़ील्ड हैं, लेकिन इनमें से कुछ सबसे अधिक उपयोग किए जाते हैं:
- विवरण : आपके पृष्ठ का एक मूल विवरण।
- खोजशब्द : आपके पृष्ठ पर लागू होने वाले खोजशब्दों का चयन।
- लेखक : आपके पेज का लेखक।
- व्यूपोर्ट : यह सुनिश्चित करने के लिए एक टैग कि आपका पृष्ठ सभी उपकरणों पर अच्छा दिखता है।
यहां एक उदाहरण दिया गया है जो इस पृष्ठ पर लागू हो सकता है:
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MUO">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
"व्यूपोर्ट" टैग में हमेशा "चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0" सामग्री के रूप में होना चाहिए ताकि यह सुनिश्चित हो सके कि आपका पृष्ठ मोबाइल और डेस्कटॉप उपकरणों पर अच्छी तरह से प्रदर्शित हो।
6. <शरीर>
हेडर सेक्शन को बंद करने के बाद, आप बॉडी पर पहुंच जाते हैं। आप इसे <body> टैग से खोलें और </body> टैग से बंद करें। यह आपकी फ़ाइल के अंत में, </html> टैग के ठीक पहले जाता है।
आपके वेबपेज की सारी सामग्री इन टैग्स के बीच में जाती है। यह जितना आसान लगता है उतना ही आसान है:
<body>
Everything you want displayed on your page.
</body>
7. <h1>
<h1> टैग आपके पेज पर लेवल-वन हेडर को परिभाषित करता है। यह आमतौर पर शीर्षक होगा, और आदर्श रूप से प्रत्येक पृष्ठ पर केवल एक ही होगा।
<h2> लेवल-टू हेडर को परिभाषित करता है जैसे सेक्शन हेडर, <h3> लेवल-थ्री सब-हेडर, और इसी तरह, नीचे <h6> तक। उदाहरण के तौर पर, इस आलेख में टैग के नाम स्तर-दो शीर्षलेख हैं।
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
परिणाम:
जैसा कि आप देख सकते हैं, वे प्रत्येक स्तर पर छोटे होते जाते हैं।
8. <p>
अनुच्छेद टैग एक नया अनुच्छेद प्रारंभ करता है। यह आमतौर पर दो लाइन ब्रेक सम्मिलित करता है।
उदाहरण के लिए, पिछली पंक्ति और इस के बीच के विराम को देखें। एक <p> टैग यही काम करेगा।
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
परिणाम:
आपका पहला पैराग्राफ।
आपका दूसरा पैराग्राफ।
आप अपने पैराग्राफ टैग में सीएसएस शैलियों का भी उपयोग कर सकते हैं, जैसे यह टेक्स्ट आकार बदलता है:
<p style="font-size: 150%;">This is 50% larger text.</p>
परिणाम:
9. <br>
लाइन ब्रेक टैग सिंगल लाइन ब्रेक को सम्मिलित करता है:
<p>The first line.<br>
The second line (close to the first one).</p>
परिणाम:
इसी तरह काम करना <hr> टैग है। यह आपके पृष्ठ पर एक क्षैतिज रेखा खींचता है और पाठ के अनुभागों को अलग करने के लिए अच्छा है।
10. <मजबूत>
यह टैग महत्वपूर्ण टेक्स्ट को परिभाषित करता है। सामान्य तौर पर, इसका मतलब है कि यह बोल्ड होगा। हालांकि, <strong> टेक्स्ट को अलग तरह से प्रदर्शित करने के लिए CSS का संभव है।
हालांकि, आप बोल्ड टेक्स्ट के लिए सुरक्षित रूप से <strong> का उपयोग कर सकते हैं।
<strong>Very important things you want to say.</strong>
परिणाम:
बहुत जरूरी बातें जो आप कहना चाहते हैं।
यदि आप टेक्स्ट को बोल्ड करने के लिए <b> टैग से परिचित हैं, तब भी आप उसका उपयोग कर सकते हैं। इसकी कोई गारंटी नहीं है कि यह HTML के भविष्य के संस्करणों में काम करना जारी रखेगा, लेकिन अभी के लिए, यह काम करता है।
11. <em>
जैसे <b> और <strong>, <em> और <i> संबंधित हैं। <em> टैग जोर दिए गए टेक्स्ट की पहचान करता है, जिसका आम तौर पर मतलब है कि यह इटैलिक हो जाएगा। फिर, इस बात की संभावना है कि सीएसएस अलग तरह से टेक्स्ट डिस्प्ले पर जोर देगा।
<em>An emphasized line.</em>
परिणाम:
एक जोर देने वाली रेखा।
<i> टैग अभी भी काम करता है, लेकिन फिर से, यह संभव है कि इसे HTML के भविष्य के संस्करणों में बहिष्कृत कर दिया जाएगा।
12. <ए>
<a>, या एंकर, टैग आपको लिंक बनाने देता है। एक साधारण लिंक इस तरह दिखता है:
<a href="https://www.muo.com/>Go to MUO</a>
परिणाम:
"Href" विशेषता लिंक के गंतव्य की पहचान करती है। कई मामलों में, यह दूसरी वेबसाइट होगी। यह एक फाइल भी हो सकती है, जैसे कोई इमेज या पीडीएफ।
अन्य उपयोगी विशेषताओं में "लक्ष्य" और "शीर्षक" शामिल हैं। एक नए टैब या विंडो में एक लिंक खोलने के लिए लक्ष्य विशेषता का लगभग विशेष रूप से उपयोग किया जाता है, जैसे:
<a href="https://www.muo.com/" target="_blank">Go to MUO in a new tab</a>
परिणाम:
"शीर्षक" विशेषता एक टूलटिप बनाती है। यह कैसे काम करता है यह देखने के लिए नीचे दिए गए लिंक पर होवर करें:
<a href="https://www.muo.com/" title="This is a tool tip">Hover over this to see the tool tip</a>
परिणाम:
टूल टिप देखने के लिए इस पर होवर करें
13. <आईएमजी>
अगर आप अपने पेज में कोई इमेज एम्बेड करना चाहते हैं, तो आपको इमेज टैग का इस्तेमाल करना होगा. आप इसे सामान्य रूप से "src" विशेषता के संयोजन में उपयोग करेंगे। यह छवि के स्रोत को इस तरह निर्दिष्ट करता है:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">
परिणाम:
अन्य विशेषताएं उपलब्ध हैं, जैसे "ऊंचाई," "चौड़ाई," और "ऊंचाई"। यहां बताया गया है कि यह कैसा दिख सकता है:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
जैसा कि आप उम्मीद कर सकते हैं, "ऊंचाई" और "चौड़ाई" विशेषताएँ छवि की ऊँचाई और चौड़ाई निर्धारित करती हैं। सामान्य तौर पर, उनमें से केवल एक को सेट करना एक अच्छा विचार है ताकि छवि सही ढंग से मापी जा सके। यदि आप दोनों का उपयोग करते हैं, तो आप एक खिंची हुई या छितरी हुई छवि के साथ समाप्त हो सकते हैं।
"Alt" टैग ब्राउज़र को बताता है कि अगर छवि प्रदर्शित नहीं की जा सकती है तो कौन सा टेक्स्ट प्रदर्शित करना है और किसी भी छवि के साथ शामिल करना एक अच्छा विचार है। यदि किसी के पास विशेष रूप से धीमा कनेक्शन या पुराना ब्राउज़र है, तो वे अभी भी इस बात का अंदाजा लगा सकते हैं कि आपके पृष्ठ पर क्या होना चाहिए।
14. <ol>
आदेशित सूची टैग आपको एक आदेशित सूची बनाने देता है। सामान्य तौर पर, इसका मतलब है कि आपको एक क्रमांकित सूची मिलेगी। सूची में प्रत्येक आइटम को सूची आइटम टैग (<li>) की आवश्यकता होती है, इसलिए आपकी सूची इस तरह दिखाई देगी:
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>
परिणाम:
- पहली बात
- दूसरी बात
- तीसरी बात
HTML5 में, आप संख्याओं के क्रम को उलटने के लिए <ol reversed> का उपयोग कर सकते हैं। और आप शुरुआती मान को start विशेषता के साथ सेट कर सकते हैं।
"प्रकार" विशेषता आपको ब्राउज़र को यह बताने देती है कि सूची आइटम के लिए किस प्रकार के प्रतीक का है। इसे "1," "ए," "ए," "आई," या "आई" पर सेट किया जा सकता है, इस तरह से संकेतित प्रतीक के साथ प्रदर्शित करने के लिए सूची सेट करना:
<ol type="A">
15. <उल>
अनियंत्रित सूची अपने आदेशित समकक्ष की तुलना में बहुत सरल है। यह सिर्फ एक बुलेटेड सूची है।
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
परिणाम:
- पहला आइटम
- दूसरा आइटम
- तीसरा आइटम
अनियंत्रित सूचियों में "प्रकार" विशेषताएँ भी होती हैं, और आप इसे "डिस्क," "सर्कल," या "वर्ग" पर सेट कर सकते हैं।
16. <तालिका>
फ़ॉर्मेटिंग के लिए तालिकाओं का उपयोग करते समय, बहुत बार ऐसा होता है जब आप अपने पृष्ठ पर जानकारी को खंडित करने के लिए पंक्तियों और स्तंभों का चाहेंगे। तालिका को काम करने के लिए कई टैग की आवश्यकता होती है। यहाँ नमूना HTML कोड है:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table>
<table> और </table> टैग तालिका के प्रारंभ और अंत को निर्दिष्ट करते हैं। <tbody> टैग में सभी टेबल सामग्री होती है।
तालिका की प्रत्येक पंक्ति <tr> टैग में संलग्न है। प्रत्येक पंक्ति के भीतर प्रत्येक सेल कॉलम हेडर के लिए <th> टैग, या कॉलम डेटा के लिए <td> टैग में लपेटा जाता है। प्रत्येक पंक्ति पर प्रत्येक कॉलम के लिए आपको इनमें से एक की आवश्यकता है।
परिणाम:
| पहला कॉलम | दूसरा कॉलम |
|---|---|
| पंक्ति 1, कॉलम 1 | पंक्ति 1, कॉलम 2 |
| पंक्ति २, कॉलम १ | पंक्ति २, स्तंभ २ |
17. <ब्लॉकक्वॉट>
जब आप किसी अन्य वेबसाइट या व्यक्ति को उद्धृत कर रहे हों और आप उद्धरण को अपने शेष दस्तावेज़ से अलग करना चाहते हैं, तो ब्लॉकक्वाट टैग का उपयोग करें। आपको बस इतना करना है कि ब्लॉकक्वाट टैग खोलने और बंद करने में उद्धरण संलग्न करें:
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>
परिणाम:
वेब जैसा कि मैंने इसकी परिकल्पना की थी, हमने इसे अभी तक नहीं देखा है। भविष्य अभी भी अतीत की तुलना में बहुत बड़ा है।
उपयोग की जाने वाली सटीक स्वरूपण आपके द्वारा उपयोग किए जा रहे ब्राउज़र या आपकी साइट के CSS पर निर्भर हो सकती है। लेकिन टैग वही रहता है।
एचटीएमएल कोड नमूने
इन 17 HTML उदाहरणों के साथ, आपको एक साधारण वेबसाइट बनाने में सक्षम होना चाहिए। वे कैसे काम करते हैं, यह महसूस करने के लिए आप अभी ऑनलाइन टेक्स्ट एडिटर में उन सभी का परीक्षण कर सकते हैं।
HTML में अधिक छोटे आकार के पाठों के लिए, कोडिंग के लिए कुछ माइक्रोलर्निंग ऐप्स आज़माएं। वे आपको कुछ ही समय में गति प्राप्त करने में मदद करेंगे।