एक आकर्षक संपूर्ण वेब पेज बनाने के लिए आवश्यक 10 महत्वपूर्ण एचटीएमएल टैग
आपके पहले सबसे महत्वपूर्ण 10 HTML टैग
यहां हम आपको एचटीएमएलHTML के 10 आवश्यक और सबसे महत्वपूर्ण टैग समझा रहे हैं, जिन्हें आपको अपना वेब पेज बनाते समय जानना जरूरी होगा। यदि आप जान जाएंगे कि ये 10 टैग कैसे काम करते हैं तो आपको अपनी पसंद का एक आकर्षक वेब पेज बनाने में कोई समस्या नहीं आएगी ।
 |
| Top 10 important web page tags |
इस ट्यूटोरियल के अंत में आपको एक उदाहरण उदाहरण द्वारा समझाया गया है कि आप सुंदर वेब पेज डिजाइन करने के लिए इन 10 एचटीएमएल टैग का इस्तेमाल कैसे करें । उदाहरण में आपकी जानकारी के लिए सभी 10 टैग शामिल किए गए हैं ताकि आप अच्छी तरह समझ सके कि इन का उपयोग कैसे होता है ।
टैग और तत्वTags and elements
HTML टैग एक विशेष शब्द या अक्षर है, जो एंगुलर ब्रैकेटangular brackets, से इस तरह <head> <b> घिरा होता है। आप HTML तत्वोंelements, जैसे पैराग्राफ या लिंक बनाने के लिए टैग का उपयोग करते हैं।
अधिकांश तत्वोंelements में एक ओपनिंग टैग और एक समापन टैग होता है - उदाहरण के लिए, एक p (पैराग्राफ) तत्व में <p> टैग होता है, जिसके बाद पैराग्राफ टेक्स्ट होता है, इसके बाद इस तरह का एक समापन </p> टैग होता है।
कुछ तत्वोंelements मैं समापन टैग नहीं होता है। इन्हें खालीEmpty तत्वelements कहा जाता है। उदाहरण के लिए, लाइन ब्रेक डालने के लिए br एलिमेंट को केवल <br> लिखा जाता है ।
यदि आप XHTML के साथ काम कर रहे हैं तो आप स्व-समापनself-closing टैग का उपयोग करके खाली तत्व लिखते हैं - उदाहरण के लिए, <br/>।
आइए अब उन 10 महत्वपूर्ण टैग्स पर नजर डालते हैं!
Related - Top 5 Computer Viruses Maware of 2020 andTips to avoid them
1. <html>… </ html> - रूट तत्वThe root element
सभी वेब पेज html एलिमेंट से शुरू होते हैं। इसीलिए इसे रूट तत्वThe root element भी कहा जाता है ।
Html एलिमेंट बनाने के लिए, आपको एक ओपनिंग <html> टैग लिखना हैं जिसके बाद एक क्लोजिंग </html> टैग होता है। आपके वेब पेज में बाकी सभी चीजें इन 2 टैगों (<html> और </html>) के बीच लिखी जाती हैं: यानी <html> से शुरू और </html> पर पूर्ण ।
से इस उदाहरण से समझें-
<html>
(all other page elements go here) वेब पेज के अन्य सभी तत्व यहां लिखे जाएंगे ।
</html>
Note - कृपया नोट करें कि एचटीएमएल केस सेंसेटिव नहीं होती है । Please note that HTML is not case sensitive.
2. <head>… </head> - अर्थात एचटीएमएल डॉक्यूमेंट का हेड सेकसन
हेड सेकसन में वेब पेज की जानकारी होती है, तथा कई तत्व हैं जिन्हें आप हेड एलिमेंट के अंदर रख सकते हैं, जैसे:
1. शीर्षकTitle (जैसा कि नीचे उदाहरण में वर्णित किया गया है)
2. लिंक, जिसका उपयोग आप अपने पेज में स्टाइल शीट और फेविकॉन जोड़ने के लिए कर सकते हैं
3. मेटा,करैक्टर सेट, पेज विवरण(Page Description) और सर्च इंजन के लिए की वर्ड जैसी चीजों को निर्दिष्ट करने के लिए
4. स्क्रिप्ट, पृष्ठ में जावास्क्रिप्ट कोड जोड़ने के लिए
कृपया यह उदाहरण देखें –
<head>( यह ओपनिंग हेड टैग है इसे स्टार्टिंग हेड टैग भी कहते हैं ।)
<title>The brief exp.of My Travel Experience>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content=" The brief exp.of My Travel Experience history, historical facts, forts and ruins.">
<meta name="keywords" content="Touring,national,historical,Expenses">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="shortcut icon" href="/favicon.ico">
</head>(यह क्लोजिंग हेड टैग है इसे एंड हेड टैग भी कहते हैं)
Related - HTML Tutorials-Understanding Basic HTML rules
3. <Title>…</Title> - वेब पेज का शीर्षक
शीर्षक एलिमेंट में वेब पेज का शीर्षक होता है प्रथा यह ब्राउज़र के टाइटल बाहर में दिखता है (ब्राउज़र विंडो के शीर्ष पर), साथ ही बुकमार्क, सर्च इंजन रिजल्ट्स और कई अन्य स्थानों में प्रदर्शित किया जाता है।
शीर्षक मैं शामिल वेब पेज की की सामग्री संक्षिप्त और सटीक होनी चाहिए। अपनी साइट के प्रत्येक वेब पेज को एक अलग टाइटल देने का प्रयास करें।
कृपया यह उदाहरण देखिए-
<Title> The brief exp.of My Travel Experience </Title>
4. <body>… </body> - वेब पेज की बॉडी अर्थात सामग्री
वेब पेज में एड एलिमेंट के बाद बॉडी एलिमेंट बनाना होता है। इसमें आपके वेब पेज की सभी सामग्री होनी चाहिए: टेक्स्ट, इमेज और इसी तरह की अन्य सामग्री। सभी वेब पेजों में एक सिंगल बॉडी एलिमेंट होता है। यद्यपि फ्रेमसेट पेज इस के अपवाद होते हैं जिनमें फ़्रेम एलिमेंट होते हैं।
बॉडी एलिमेंट का सामान्य प्रारूप इस प्रकार होता है -
<body>
(all page content will be written here)
</body>
Related - How to fix slow lagging PC laptop running Windows 10 in 5 minutes
5. <h1>… </h1> - सेक्शन हैडिंग section heading
सेक्शन हैडिंग आपके वेब पेज के अलग-अलग हाईलाइट करने के लिए होते हैं। वे किसी रिपोर्ट में हेडिंग और सबहेडिंग की तरह काम करते हैं।
एचटीएमएल वास्तव में 6 हेडिंग एलिमेंट को सपोर्ट करता है यानी एच1, एच2, एच3, एच4, एच5 और एच6 । इस में h1 सबसे महत्वपूर्ण शीर्षकों के लिए है, h2 कम महत्वपूर्ण सबहेडिंग के लिए है, और इसी तरह । इसे यूं समझिए एच के साथ जो अंक(1 to 6) जुड़ा हुआ है उसके अनुसार सेक्शन में हेडिंग के अक्षर छोटे बड़े होते रहते हैं । आमतौर पर आपको h1, h2 और h3 से अधिक का उपयोग करने की आवश्यकता नहीं होती, जब तक कि आपका वेब पेज बहुत लंबा और जटिल न हो।
यहाँ h1 शीर्षक तत्व का एक उदाहरण दिया गया है:
<h1> The brief exp.of My Travel Experience</h1>
6. <p>… </p> - पैराग्राफ टैग paragraph Tag
पी एलिमेंट आपको टेक्स्ट के पैराग्राफ बनाने की सुविधा देता है। अधिकांश ब्राउज़र प्रत्येक पैराग्राफ के बीच एक वर्टिकल अंतर के साथ पैराग्राफ प्रदर्शित करते हैं, अच्छी तरह से टेक्स्ट को विभाजित करते हैं।
यद्यपि आप टेक्स्ट के पैराग्राफ बनाने के लिए <br> टैग का भी उपयोग कर सकते हैं लेकिन इस के लिए <P> टैग का उपयोग करना बेहतर होगा। यह ब्राउज़रों, सर्च इंजनों और अन्य उपकरणों पर बेहतर परिणाम देता है ।
यहाँ एक पैराग्राफ का उदाहरण दिया गया है:
<p> मेरा पर्यटन वास्तव में रोचक और रोमांचक रहा हैं। कल मैंने एक मध्ययुगीन मंदिर देखा, और आज सुबह एक अति प्राचीन किला! </P>
वेब के लिए टेक्स्ट लिखते समय थंब रूल बनाना सुनिश्चित करना है कि प्रत्येक पैराग्राफ में एक बिंदु, एक विषय या एक विचार का समावेश हो। चाहे टेक्स्ट छोटा ही हो परंतु यदि आप 2 अलग-अलग चीजों के बारे में बात करना चाहते हैं, तो 2 पैराग्राफ का उपयोग करें।
Related - How to fix slow lagging PC laptop running Windows 10 in 5 minutes
7. <a>… </a> - लिंक टैग या एंकर एलिमेंट
एक वेब पेज में सबसे महत्वपूर्ण एलिमेंट्स में से एक है, यानी वह एलिमेंट जो आपको अन्य सामग्री को लिंक करने की सुविधा देता है। ऐसी सामग्री चाहे आपकी अपनी साइट पर हो या किसी अन्य साइट पर ।
ऐसी सामग्री को लिंक बनाने के लिए, आप को उस सामग्री को <a> और </a> टैग के बीच में रखना पड़ेगा, और URL को <a> टैग की href में लिंक करें।
Www.example.com से लिंक करने का उदाहरण देखें-
<a href="http://www.example.com/">इस उपयोगी साइट पर आपका स्वागत है!</a>
8. <img> - इमेज टैग
Img एलिमेंट आपको अपने वेब पेजों में विभिन्न इमेज सम्मिलित करने के लिए काम आता है। कोई इमेज सम्मिलित करने के लिए, आप पहले वह इमेज अपने वेब सर्वर पर अपलोड करनी पड़ती हैं, फिर अपलोड की गई छवि का फ़ाइल नाम को संदर्भित करने के लिए <img> टैग का उपयोग करते हैं।
कृपया यह उदाहरण देखिए-
<img src = "fortphoto.jpg" alt = " किले की फोटो">
सभी img टैग्स के लिए alt अटरीब्यूट आवश्यक है। यह उन ब्राउज़रों द्वारा उपयोग किया जाता है जो विजिट करने वालों को वैकल्पिक टेक्स्ट देने के लिए छवियों को प्रदर्शित नहीं करते हैं।
Related - Major security privacy differences between signal, whatsapp, telegram
9. <div>… </div> - सामग्री के लिए एक ब्लॉक-स्तरीय कंटेनरblock-level container for content
Div एलिमेंट एक जेनेरिक कंटेनर है जिसका उपयोग आप अपने पेज कंटेंट में अधिक स्ट्रक्चर जोड़ने के लिए कर सकते हैं। उदाहरण के लिए, आप कई पैराग्राफ या हेडिंग का समूह बना सकते हैं जो एक Div एलिमेंट के अंदर एक समान उद्देश्य को पूरा करते हैं। आमतौर पर, Div एलिमेंट का उपयोग इस तरह की चीजों के लिए किया जाता है जैसे:
1. पेज हैडर और फूटर्स
2. सामग्री कलम और साइडबार
3. टेक्स्ट प्रवाह के भीतर हाइलाइट किए गए बॉक्स
4. किसी वेब पेज के विशिष्ट उद्देश्य वाले क्षेत्र, जैसे विज्ञापन के लिए स्थान
5. इमेज गैलरीया
अपने div एलिमेंट्स में क्लास और/या Div id एट्रीब्यूट्स जोड़कर, फिर आप CSS को स्टाइल और पोजिशन में इस्तेमाल कर सकते हैं। यह CSS- आधारित पेज लेआउट बनाने का आधार है।
पेज में साइडबार के लिए सामग्री सम्मिलित करने के लिए div का उपयोग करने का एक उदाहरण देखिए:
<div id="sidebar">
<h1>Sidebar Heading</h1>
<p>Sidebar text</p>
<p>More sidebar text</p>
</div>
Related - computer issues-causes fix windows issuesmanually or with software
10. <span>… </span> - आपके वेब पेज की सामग्री के लिए एक इनलाइन कंटेनर
स्पैनspan एलिमेंट उस विभाजन के समान है जो आपकी सामग्री आपकी इच्छा अनुसार सही संरचना बनाता है। स्पैनspan एलिमेंट और div एलिमेंट मैं अंतर यह है कि div एक ब्लॉक-स्तरीय एलिमेंट है, जबकि स्पैन एक इनलाइन एलिमेंट है:
• ब्लॉक-स्तरीय एलिमेंट, जैसे div, h1, और p, ऐसे एलिमेंट हैं जो सामग्री के अपेक्षाकृत बड़े या स्टैंड-अलोन ब्लॉकों के लिए डिज़ाइन किए गए हैं, जैसे कि टेक्स्ट के पैराग्राफ। एक ब्लॉक-स्तरीय एलिमेंट हमेशा एक नई लाइन पर शुरू होता है।
• इनलाइन एलिमेंट, जैसे स्पानSpan, एa,और आईएमजीimg, सामग्री के एक बड़े ब्लॉक के भीतर सामग्री के छोटे भाग को रखने के लिए डिज़ाइन किए गए हैं - जैसे कि कुछ शब्द या एक वाक्य । एक इनलाइन एलिमेंट जोड़ने से नई लाइन बनने का कारण नहीं बनता है। ब्लॉक-स्तरीय एलिमेंट में इनलाइन एलिमेंट शामिल हो सकते हैं, लेकिन इनलाइन एलिमेंट में ब्लॉक-स्तरीय एलिमेंट नहीं हो सकते।
एक div के साथ, आप अक्सर एक स्पैन में एक क्लास और/या आईडी अटरीब्यूट जोड़ते हैं ताकि आप CSS का उपयोग करके इसे स्टाइल प्रदान कर सकें।
एक पैराग्राफ के भीतर उत्पाद नामों को इंगित करने के लिए span एलिमेंट का उपयोग कैसे होता है यह निम्नलिखित उदाहरण से समझें। ये उत्पाद नाम CSS का उपयोग करके हाइलाइट किए जा सकते हैं। एक कस्टम सर्च इंजन संभावित रूप से पेज के भीतर प्रोडक्ट्स की पहचान करने के लिए span एलिमेंट द्वारा प्रदान की गई जानकारी का उपयोग कर सकता है।
<p>Some of our products include <span class="product">SuperWidgets</span>, <span class="product">MegaWidgets</span>, and <span class="product">WonderWidgets</span>.</p>
Related - Computer Security Basics:
Protect Yourself from Viruses, Hackers, Keyloggers and data Thieves
इन सभी 10 टैग्स को एक साथ उपयोग करने के लिए यह उदाहरण देखें -
मैं उम्मीद करता हूं कि अब जब आप ये सभी 10 आवश्यक HTML टैग सीख गए हैं, तो आइए अब सीखते हैं कि इन सभी को एक ही वेब पेज पर एक साथ कैसे रखते हैं –
<html>
<head>
<title> The brief exp.of My Travel Experience</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content=" The brief exp.of My Travel Experience history, historical facts, forts and ruins.">
<meta name="keywords" content="Historical sites">
<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<h1> The brief exp.of My Travel Experience</h1>
<div id="mainContent">
<p> The brief exp.of My Travel Experience of last week<a href="Forts.html">visited a fort</a>, and yesterday I visited encient forts!</p>
<p>See some of the images:</p>
<img src="history.jpg" alt="Ruins">
</div>
<div id="sidebar">
<h2>Buy our stuff!</h2>
<p>Some of our products<span class="product">SuperWidgets</span>, <span class="product">MegaWidgets</span>, and <span class="product">WonderWidgets</span>.</p>
</div>
</body>
</html>
जैसा कि आप अच्छी तरह समझ गए हैं हैं, आप इन 10 HTML टैग का उपयोग करके एक एक सुंदर, आकर्षक और अपनी पसंद का वीडियो एचडी सॉन्ग संपूर्ण वेब पेज बना सकते हैं। अब आप एचटीएमएल के बारे में और बहुत कुछ सीखना चाहते हैं तो हमारी वेबसाइट पर मौजूद articles HTML Basics, HTML Editing, और HTML Learning पर विजिट करने की कृपा करें ।
Related - How to See Most Recent Updates Installed Windows 10 history should I skip updates
हमारी वेबसाइट पर विजिट करने के लिए धन्यवाद। अगर आप हमसे कुछ और पूछना चाहते हैं या हमसे संपर्क करना चाहते हैं तो हमारी पोस्ट पर कमेंट करके या हमारी वेबसाइट के होम पेज पर मौजूद कांटेक्ट फार्म का इस्तेमाल करके हमसे संपर्क कर सकते हैं । अगर आप हमसे संपर्क करेंगे तो हमें बहुत प्रसन्नता होगी । नमस्कार धन्यवाद आपका दिन शुभ हो ।
HTML Basics, HTML
Editing,HTML Learning, html tutorials, html meta tags, basic structure of
html, basic html structure, Simple web page in html, create web page using
html, Basic html tutorial, learn html for beginners, Learn HTML step by Step,
meta
tags, Very basic html tag, Html tags at every webpage, Important Html tags,
Html, html for seo. html tags for seo, seo tags html, seo tags in html, html
tutorials, html meta tags, basic structure of html, basic html structure,
Simple web page in html, create web page using html, Basic html tutorial, learn
html for beginners, Learn HTML step by Step