HTML का इतिहास, कार्यप्रणाली, तत्व और टैग्स को उदाहरणों के साथ जानें

HTML का इतिहास, कार्यप्रणाली, तत्व और टैग्स को उदाहरणों के साथ जानें

HTML-Full Form, Working, Elements, Tags with Examples

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

हमारे ब्लॉग में आपका स्वागत है, जहाँ हमारा लक्ष्य HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) को सभी के लिए सरल बनाना है। इस गाइड में, हम HTML के काम करने के तरीके, इसके इतिहास, मुख्य विशेषताओं और टैग पर करीब से नज़र डालेंगे और अपनी समझ को बढ़ाने के लिए व्यावहारिक उदाहरण प्रदान करेंगे। चाहे आप वेब की नींव के बारे में जानने के लिए उत्सुक शुरुआती हों या एक अनुभवी डेवलपर जो त्वरित समीक्षा की तलाश में हैं, आइए हम HTML की आकर्षक दुनिया का पता लगाते हैं, इसके रहस्यों को उजागर करते हैं और वेब विकास में इसकी क्षमता का दोहन करते हैं।

एचटीएमएल

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

HTML की अवधारणा

HTML, या हाइपर टेक्स्ट मार्कअप लैंग्वेज, वेब डेवलपमेंट के लिए मौलिक है, क्योंकि यह वेब पेजों की संरचना और लेआउट को रेखांकित करता है। HTML को और अधिक स्पष्ट रूप से समझने में आपकी सहायता करने के लिए यहां कुछ मुख्य बिंदु दिए गए हैं:

1. HTML की परिभाषा:

- HTML का अर्थ हाइपर टेक्स्ट मार्कअप लैंग्वेज है।

- यह वेब पेज बनाने के लिए उपयोग की जाने वाली मानक मार्कअप भाषा है।

2. हाइपर टेक्स्ट और मार्कअप लैंग्वेज:

- "हाइपरटेक्स्ट" उस टेक्स्ट को संदर्भित करता है जिसमें लिंक होते हैं, जो उपयोगकर्ताओं को दस्तावेज़ के विभिन्न भागों के बीच नेविगेट करने में सक्षम बनाता है।

- "मार्कअप लैंग्वेज" एक प्रकार की कंप्यूटर भाषा है जो टेक्स्ट डॉक्यूमेंट पर फ़ॉर्मेटिंग और लेआउट नियम लागू करती है।

3. वेब पेज निर्माण:

- एक वेब पेज अनिवार्य रूप से HTML में लिखा गया एक दस्तावेज़ है।

- जब वेब ब्राउज़र में देखा जाता है, तो HTML कोड एक विज़ुअल फ़ॉर्मेट में परिवर्तित हो जाता है जिससे उपयोगकर्ता इंटरैक्ट कर सकते हैं।

4. पेज संरचना का वर्णन:

- एक वेब पेज की संरचना HTML तत्वों की एक श्रृंखला द्वारा निर्धारित की जाती है।

- ये तत्व पृष्ठ के विभिन्न भागों को परिभाषित करते हैं, जिसमें शीर्षक, पैराग्राफ, लिंक, चित्र और बहुत कुछ शामिल हैं।

5. तत्व और उनका उद्देश्य:

- HTML विभिन्न तत्वों से बना है, जिनमें से प्रत्येक का एक विशिष्ट कार्य है।

- तत्व सामग्री के विभिन्न हिस्सों को टैग करते हैं, ब्राउज़र को उन्हें प्रस्तुत करने के तरीके के बारे में मार्गदर्शन करते हैं।

- उदाहरण के लिए, `<h1>` एक मुख्य शीर्षक को इंगित करता है, `<p>` एक पैराग्राफ को दर्शाता है, `<a>` एक हाइपरलिंक बनाता है, और इसी तरह।

HTML के इन मूलभूत पहलुओं को समझकर, डेवलपर्स वेब पेजों की संरचना को प्रभावी ढंग से बना और उसमें बदलाव कर सकते हैं, जिससे इंटरनेट पर उपयोगकर्ताओं के लिए निर्बाध नेविगेशन और इंटरैक्शन संभव हो सकेगा।

HTML कैसे काम करता है:

How HTML Works

HTML, या हाइपरटेक्स्ट मार्कअप लैंग्वेज, वेब डेवलपमेंट की रीढ़ है, जो वेब पेज बनाने के लिए एक संरचित दृष्टिकोण प्रदान करती है। यहाँ HTML कैसे काम करता है, इस पर करीब से नज़र डाली गई है:

1. टेक्स्ट-आधारित मार्कअप:

HTML दस्तावेज़ सरल टेक्स्ट फ़ाइलें हैं जिनमें वेब पेज की संरचना और सामग्री को परिभाषित करने के लिए मार्कअप टैग शामिल हैं। वेब ब्राउज़र पेज को सही ढंग से प्रदर्शित करने के लिए इन टैग की व्याख्या करते हैं।

2. दस्तावेज़ संरचना:

एक HTML दस्तावेज़ आमतौर पर `<!DOCTYPE html>` घोषणा के साथ शुरू होता है, जो दस्तावेज़ के प्रकार और उपयोग में HTML के संस्करण को दर्शाता है। `<html>` टैग पूरे दस्तावेज़ को लपेटता है, जबकि `<head>` और `<body>` टैग क्रमशः हेड और बॉडी सेक्शन को रेखांकित करते हैं।

3. टैग और तत्व:

HTML शीर्षक, पैराग्राफ, लिंक और छवियों जैसे विभिन्न तत्वों को बनाने के लिए टैग की एक प्रणाली का उपयोग करता है। टैग कोणीय कोष्ठकों (`< >`) से बने होते हैं जो तत्व का नाम घेरते हैं, जैसे पैराग्राफ के लिए `<p>` या छवियों के लिए `<img>`।

4. विशेषताएँ:

तत्वों में ऐसी विशेषताएँ शामिल हो सकती हैं जो अतिरिक्त जानकारी प्रदान करती हैं या उनके व्यवहार को बदलती हैं। ये विशेषताएँ ओपनिंग टैग के भीतर परिभाषित की जाती हैं और इनमें छवियों के लिए `src` या लिंक के लिए `href` जैसे गुण शामिल हो सकते हैं।

5. पदानुक्रम और नेस्टिंग:

HTML तत्वों को एक दूसरे के भीतर नेस्ट करके एक पदानुक्रमित संरचना बनाई जा सकती है। उदाहरण के लिए, एक `<ul>` (अव्यवस्थित सूची) में कई `<li>` (सूची आइटम) तत्व हो सकते हैं।

6. वेब ब्राउज़र में रेंडरिंग:

वेब ब्राउज़र HTML दस्तावेज़ों को पढ़ते हैं और उन्हें आकर्षक वेब पेजों में बदल देते हैं। वे मार्कअप टैग की व्याख्या करते हैं, स्टाइल (CSS द्वारा परिभाषित) लागू करते हैं, और इंटरैक्टिव अनुभव बनाने के लिए स्क्रिप्ट (जावास्क्रिप्ट में लिखी गई) चलाते हैं।

7. संगतता और मानक:

HTML विभिन्न ब्राउज़रों और उपकरणों में एकरूपता और संगतता सुनिश्चित करने के लिए वर्ल्ड वाइड वेब कंसोर्टियम (W3C) द्वारा स्थापित मानकों के एक सेट का पालन करता है। जबकि अधिकांश आधुनिक ब्राउज़र इन मानकों का अनुपालन करते हैं, डेवलपर्स को HTML में कोडिंग करते समय संभावित संगतता मुद्दों के प्रति सचेत रहना चाहिए।

8. पहुँच और SEO:

उचित रूप से संरचित HTML कोड विकलांग उपयोगकर्ताओं के लिए पहुँच में सुधार करता है।

HTML का इतिहास

HTML, वर्ल्ड वाइड वेब की नींव है, जिसका इतिहास कई दशकों तक फैला हुआ है। यहाँ इसके विकास पर एक नज़र डालते हैं:

1. शुरुआती शुरुआत (1980 का दशक):

- HTML की उत्पत्ति का पता 1980 के दशक के उत्तरार्ध में लगाया जा सकता है जब ब्रिटिश कंप्यूटर वैज्ञानिक टिम बर्नर्स-ली ने CERN (यूरोपीय परमाणु अनुसंधान संगठन) में वर्ल्ड वाइड वेब बनाया था।

- मार्च 1989 में, बर्नर्स-ली ने शोधकर्ताओं के बीच सूचना साझा करने की सुविधा के लिए एक हाइपरटेक्स्ट सिस्टम का प्रस्ताव रखा, जिसने अंततः HTML बनने की नींव रखी।

2. HTML का जन्म (1990 का दशक):

- 1990 में, CERN में रहते हुए, बर्नर्स-ली ने HTML का पहला संस्करण विकसित किया।

- प्रारंभिक डिज़ाइन सीधा था, मुख्य रूप से टेक्स्ट फ़ॉर्मेटिंग और हाइपरलिंक के माध्यम से दस्तावेज़ों को जोड़ने पर ध्यान केंद्रित किया गया था।

- HTML 1.0 को सीमित सुविधाओं के साथ एक बुनियादी मार्कअप भाषा के रूप में 1991 में जारी किया गया था।

3. विस्तार और मानकीकरण (1990-2000):

- 1990 के दशक में वर्ल्ड वाइड वेब की लोकप्रियता में उछाल देखा गया, जिससे HTML में तेज़ी से प्रगति हुई।

- HTML 2.0 को 1995 में पेश किया गया, जिसमें टेबल, फ़ॉर्म और इमेज एम्बेडिंग के लिए समर्थन जोड़ा गया।

- 1997 में, HTML 3.2 जारी किया गया, जिसमें फ़्रेम जैसी अतिरिक्त सुविधाएँ और स्क्रिप्टिंग भाषाओं के लिए बेहतर समर्थन शामिल किया गया।

- HTML का विकास नेटस्केप नेविगेटर और इंटरनेट एक्सप्लोरर जैसे वेब ब्राउज़र के उदय के साथ हुआ।

4. XHTML और HTML5 (2000-2010):

- 2000 के दशक की शुरुआत में, XHTML HTML के संशोधित संस्करण के रूप में उभरा, जो सख्त XML दिशानिर्देशों का पालन करता था।

- XHTML का उद्देश्य इंटरऑपरेबिलिटी, एक्सेसिबिलिटी और डिवाइस स्वतंत्रता को बढ़ाना था।

- हालाँकि, XHTML को अपनाने में चुनौतियों के कारण HTML5 की शुरुआत के साथ HTML का पुनरुद्धार हुआ।

- 2014 में लॉन्च किया गया, HTML5 ने वेब विकास में एक महत्वपूर्ण मील का पत्थर साबित हुआ, जो बेहतर मल्टीमीडिया समर्थन, मूल ऑडियो और वीडियो तत्व, ग्राफिक्स के लिए एक कैनवास और बेहतर एक्सेसिबिलिटी और SEO के लिए उन्नत शब्दार्थ प्रदान करता है।

5. आधुनिक युग और उससे आगे (2010-वर्तमान):

- डिजिटल परिदृश्य की मांगों को पूरा करने के लिए HTML का विकास जारी है।

HTML पेज की संरचना

HTML मुख्य रूप से तीन भागों में विभाजित है

हेड:- दस्तावेज़ का शीर्षक, शीर्षक और दस्तावेज़ के शीर्षक से संबंधित अन्य जानकारी शामिल करें

बॉडी:- पृष्ठ की सभी सामग्री जैसे पैराग्राफ, चित्र, वीडियो, टेक्स्ट, ऑडियो आदि शामिल करें

पाद:- दस्तावेज़ के पाद से संबंधित दिनांक समय और अन्य सामग्री जैसी सामग्री शामिल करें।

सभी HTML दस्तावेज़ों को दस्तावेज़ प्रकार घोषणा के साथ शुरू होना चाहिए: <!DOCTYPE html>

HTML दस्तावेज़ स्वयं <html> से शुरू होता है और </html> के साथ समाप्त होता है।

HTML दस्तावेज़ का दृश्य भाग <body> और </body> के बीच होता है।

HTML पेज एक्सटेंशन “.htm” या “.html” के साथ समाप्त होता है

“सामान्य पाठ” ब्रैकेटेड टैग से घिरा हुआ है जो ब्राउज़र को बताता है कि वेब को कैसे प्रदर्शित किया जाए

HTML के तत्व

HTML में कई तरह के तत्व होते हैं जो वेब पेज की संरचना और सामग्री को परिभाषित करते हैं। ये तत्व बुनियादी टेक्स्ट फ़ॉर्मेटिंग से लेकर मल्टीमीडिया एकीकरण तक होते हैं। यहाँ कुछ सामान्य HTML तत्व दिए गए हैं। एक HTML तत्व को एक शुरुआती टैग द्वारा परिभाषित किया जाता है। यदि तत्व में अन्य सामग्री शामिल है, तो यह एक समापन टैग के साथ समाप्त होता है, जहाँ तत्व नाम के पहले एक फ़ॉरवर्ड स्लैश होता है जैसा कि नीचे दिखाया गया है

यहाँ <p>....</p> एक HTML तत्व है,

<h1>...</h1> एक और HTML तत्व है।

यहाँ कुछ सामान्य HTML तत्व दिए गए हैं:

शीर्षक तत्व (h1-h6):

विभिन्न स्तरों के शीर्षकों को परिभाषित करने के लिए उपयोग किया जाता है, जिसमें <h1> उच्चतम स्तर होता है और <h6> सबसे कम होता है।

पैराग्राफ़ एलिमेंट (p):

टेक्स्ट का पैराग्राफ़ परिभाषित करता है।

लिंक एलिमेंट (a):

अन्यवेब पेजों या संसाधनों के लिए हाइपरलिंक बनाता है।

गंतव्य का URL निर्दिष्ट करने के लिए href विशेषता का उपयोग करता है।

इमेज एलिमेंट (img):

वेब पेज में इमेज डालता है।

इमेज फ़ाइल का URL निर्दिष्ट करने के लिए src विशेषता का उपयोग करता है और एक्सेसिबिलिटी के लिए वैकल्पिक टेक्स्ट प्रदान करने के लिए alt विशेषता का उपयोग करता है।

सूची एलिमेंट (ul, ol, li):

<ul> एक अव्यवस्थित सूची (बुलेटेड सूची) बनाता है।

<ol> एक क्रमबद्ध सूची (क्रमांकित सूची) बनाता है।

<li> <ul> या <ol> के भीतर अलग-अलग सूची आइटम परिभाषित करता है।

डिवीज़न एलिमेंट (div):

दस्तावेज़ में एक डिवीज़न या सेक्शन को परिभाषित करता है, जिसका उपयोग अक्सर लेआउट उद्देश्यों के लिए किया जाता है।

अन्य तत्वों के लिए एक कंटेनर के रूप में कार्य करता है और इसे CSS का उपयोग करके स्टाइल किया जा सकता है।

स्पैन एलिमेंट (span):

टेक्स्ट के एक विशिष्ट भाग पर स्टाइल लागू करने के लिए उपयोग किया जाने वाला इनलाइन एलिमेंट।

<div> के समान, लेकिन छोटी, इनलाइन सामग्री के लिए।

हेडर, फ़ुटर, नेव, आर्टिकल, सेक्शन एलिमेंट:

HTML5 में वेब पेज की संरचना को अधिक सार्थक रूप से परिभाषित करने के लिए पेश किए गए अर्थपूर्ण तत्व।

<header> पेज के हेडर सेक्शन को परिभाषित करता है।

<footer> फ़ुटर सेक्शन को परिभाषित करता है।

<nav> नेविगेशन लिंक को परिभाषित करता है।

<article> स्व-निहित सामग्री को परिभाषित करता है, जैसे ब्लॉग पोस्ट।

<section> सामग्री के एक सामान्य सेक्शन को परिभाषित करता है।

फ़ॉर्म एलिमेंट (फ़ॉर्म, इनपुट, टेक्स्टएरिया, बटन, सेलेक्ट):

<form> उपयोगकर्ता इनपुट के लिए एक फ़ॉर्म बनाता है।

<input> टेक्स्ट, ईमेल, पासवर्ड इत्यादि जैसे विभिन्न इनपुट फ़ील्ड बनाता है।

<textarea> एक मल्टीलाइन टेक्स्ट इनपुट फ़ील्ड बनाता है।

<button> एक क्लिक करने योग्य बटन बनाता है।

<select> एक ड्रॉपडाउन सूची बनाता है।

टेबल एलिमेंट्स (टेबल, tr, td):

<table> एक टेबल बनाता है।

<tr> टेबल के भीतर एक पंक्ति को परिभाषित करता है।

<td> टेबल की पंक्ति के भीतर एक एकल सेल को परिभाषित करता है।

ये HTML एलिमेंट्स के कुछ उदाहरण मात्र हैं। प्रत्येक एलिमेंट एक विशिष्ट उद्देश्य को पूरा करता है और इसे विशेषताओं और CSS शैलियों का उपयोग करके अनुकूलित किया जा सकता है ताकि दिखने में आकर्षक और कार्यात्मक वेब पेज बनाए जा सकें।

HTML विशेषताएँ

विशेषताएँ HTML तत्वों के बारे में अतिरिक्त जानकारी प्रदान करती हैं और उनके व्यवहार या उपस्थिति को संशोधित करती हैं। वे किसी तत्व के ओपनिंग टैग के भीतर निर्दिष्ट किए जाते हैं और एक नाम-मूल्य जोड़ी से मिलकर बने होते हैं जो बराबर चिह्न से अलग होते हैं। यहाँ कुछ सामान्य रूप से उपयोग की जाने वाली HTML विशेषताएँ दी गई हैं:

1. id:

- किसी तत्व के लिए एक अद्वितीय पहचानकर्ता निर्दिष्ट करता है।

- CSS या JavaScript के साथ तत्वों को लक्षित करने के लिए उपयोग किया जाता है।

2. class:

किसी तत्व को एक या अधिक वर्ग नाम प्रदान करता है।

- CSS शैलियों को लागू करने या JavaScript के साथ तत्वों को लक्षित करने के लिए उपयोग किया जाता है।

3. href:

- लिंक (`<a>` तत्व) के लिए गंतव्य का URL निर्दिष्ट करता है।

- हाइपरलिंक का लक्ष्य निर्धारित करता है।

4. src:

छवियों (`<img>`), ऑडियो (`<audio>`), और वीडियो (`<video>`) जैसे मीडिया तत्वों के लिए स्रोत का URL निर्दिष्ट करता है।

5. alt:

- छवियों (`<img>`) के लिए वैकल्पिक पाठ प्रदान करता है।

- जब छवि लोड नहीं की जा सकती या पहुँच उद्देश्यों के लिए प्रदर्शित किया जाता है।

6. title:

किसी तत्व के बारे में अतिरिक्त जानकारी प्रदान करता है।

- आमतौर पर टूलटिप के रूप में प्रदर्शित होता है जब उपयोगकर्ता तत्व पर होवर करता है।

7. चौड़ाई, ऊँचाई:

- किसी तत्व की चौड़ाई और ऊँचाई के आयाम सेट करता है, जैसे कि छवियाँ (`<img>`)।

8. प्रकार:

- किसी फ़ॉर्म के भीतर `<input>` तत्वों के लिए इनपुट का प्रकार निर्दिष्ट करता है।

- मानों में टेक्स्ट, पासवर्ड, चेकबॉक्स, रेडियो, सबमिट, रीसेट, आदि शामिल हैं।

9. प्लेसहोल्डर:

- किसी इनपुट फ़ील्ड (`<input>`, `<textarea>`) के भीतर प्लेसहोल्डर टेक्स्ट प्रदर्शित करता है।

- उपयोगकर्ता से अपेक्षित इनपुट का संकेत या उदाहरण प्रदान करता है।

10. अक्षम:

किसी तत्व के साथ सहभागिता अक्षम करता है, जैसे कि इनपुट फ़ील्ड या बटन।

- उपयोगकर्ताओं को तत्व को संशोधित करने या उसके साथ सहभागिता करने से रोकता है।

11. चेक किया गया:

- यह इंगित करता है कि डिफ़ॉल्ट रूप से कोई चेकबॉक्स (`<input type="checkbox">`) या रेडियो बटन (`<input type="radio">`) चयनित है।

12. आवश्यक:

- निर्दिष्ट करता है कि फ़ॉर्म सबमिट करने से पहले इनपुट फ़ील्ड को भरना होगा।

- फ़ॉर्म सत्यापन के लिए उपयोग किया जाता है ताकि यह सुनिश्चित किया जा सके कि आवश्यक फ़ील्ड खाली न छोड़े जाएँ।

ये विशेषताएँ HTML तत्वों के व्यवहार, उपस्थिति और पहुँच को परिभाषित करने में महत्वपूर्ण भूमिका निभाती हैं, जिससे वेब पेजों के समग्र उपयोगकर्ता अनुभव में वृद्धि होती है।

create first html page

पहला HTML पेज बनाएं

पहला HTML पेज बनाएँ

1) नोटपैड, टेक्स्टपैड, वर्ड या किसी भी टेक्स्ट एडिटर में से कोई भी चुनें।

2) HTML कोड टाइप करें

<HTML>

<HEAD>

<TITLE>मेरा पहला वेबपेज</TITLE>

</HEAD>

<BODY>

यह मेरा पहला वेबपेज है

</BODY>

</HTML>

3) फ़ाइल को .html एक्सटेंशन के साथ सेव करें

4) फ़ाइल को ब्राउज़र में चलाएँ

5) हमें निम्न आउटपुट मिलता है

शीर्षक टैग

HTML में शीर्षक टैग वेब पेज का शीर्षक परिभाषित करता है और HTML दस्तावेज़ के हेड सेक्शन में पाया जाता है। शीर्षक टैग के अंदर का टेक्स्ट वेब पेज एक्सेस किए जाने पर ब्राउज़र के शीर्षक बार या टैब में दिखाई देता है। उदाहरण के लिए, यहाँ शीर्षक टैग का एक उदाहरण दिया गया है:

<TITLE>मेरा पहला वेबपेज</TITLE>

बॉडी टैग

HTML में <body> टैग वेब पेज की मुख्य सामग्री को परिभाषित करता है। इसमें वह सब कुछ शामिल होता है जो उपयोगकर्ता साइट पर जाने पर देखते हैं, जैसे कि टेक्स्ट, इमेज, लिंक, मल्टीमीडिया तत्व और अन्य HTML घटक जो वेबपेज की सामग्री बनाते हैं। इसके अतिरिक्त, <body> टैग आपको सामग्री के दिखने और व्यवहार को प्रबंधित करने के लिए विभिन्न विशेषताएँ सेट करने देता है, जिसमें पृष्ठभूमि का रंग, टेक्स्ट का रंग और पेज लोड या अनलोड करने के लिए ईवेंट हैंडलर शामिल हैं।

मुख्य भाग की विशेषताएँ

यहाँ कुछ सामान्य विशेषताएँ दी गई हैं जिनका उपयोग <body> टैग के साथ उनके विवरण के साथ किया जा सकता है:

bgcolor: यह विशेषता बॉडी एलिमेंट का बैकग्राउंड रंग सेट करती है। यह हेक्साडेसिमल, RGB या रंग नामों जैसे विभिन्न प्रारूपों में रंग मान लेती है।

उदाहरण: <body bgcolor="#ffffff">

text: यह विशेषता बॉडी एलिमेंट के भीतर सामग्री के लिए डिफ़ॉल्ट टेक्स्ट रंग सेट करती है। यह bgcolor विशेषता के समान रंग मान स्वीकार करती है।

उदाहरण: <body text="#000000">

link: यह विशेषता बॉडी एलिमेंट के भीतर अनविजिटेड हाइपरलिंक का डिफ़ॉल्ट रंग सेट करती है।

उदाहरण: <body link="#0000FF">

alink

यह विशेषता हाइपरलिंक्स पर क्लिक किए जाने या सक्रिय किए जाने के दौरान उनका रंग सेट करती है।

उदाहरण: <body alink="#FF0000">

vlink

यह विशेषता हाइपरलिंक्स का रंग सेट करती है जिन्हें पहले ही देखा जा चुका है।

उदाहरण: <body vlink="#800080">

background

यह विशेषता बॉडी एलिमेंट के लिए बैकग्राउंड के रूप में उपयोग की जाने वाली छवि का URL निर्दिष्ट करती है।

उदाहरण: <body background="background.jpg">

ribute	Description	Syntax	Default Value
Background	It contains the URL of the background image. It is used to set the background image.	<BODY BACKGROUND=“hi.gif”>	No image
Bgcolor	It is used to specify the background color of an image.	<BODY BGCOLOR=“Black”>	White colour
Text	It specifies the color of the text in a document.	<BODY TEXT=“Blue”>	Black colour
Link Alink Vlink	It is used to specify the color of visited links. It is used to specify the color of the active link. It specifies the color of visited links.	<BODY LINK=“#0000FF” VLINK=“#FF00FF” ALINK=“FFFF00”>	Blue Purple Yellow

शीर्षक टैग

HTML में हेडिंग टैग का उपयोग वेब पेज के भीतर हेडिंग को परिभाषित करने के लिए किया जाता है। वे सामग्री को संरचना और पदानुक्रम प्रदान करते हैं, जिससे उपयोगकर्ताओं और खोज इंजन दोनों के लिए पेज के संगठन को समझना आसान हो जाता है। HTML में हेडिंग टैग के छह स्तर हैं, जो <h1> से लेकर <h6> तक हैं, जिसमें <h1> सबसे ऊंचा स्तर है और <h6> सबसे निचला स्तर है। उन्हें HTML के मुख्य भाग के अंदर रखा जाता है। यहाँ हेडिंग टैग का उपयोग कैसे किया जाता है इसका एक उदाहरण दिया गया है:

<HTML>

<HEAD>

<TITLE> उदाहरण पृष्ठ</TITLE>

</HEAD>

<BODY>

<H1> हेडिंग 1 </H1>

<H2> हेडिंग 2 </H2>

<H3> हेडिंग 3 </H3>

<H4> हेडिंग 4 </H4>

<H5> हेडिंग 5 </H5>

<H6> हेडिंग 6 </H6>

</BODY>

</HTML>

Heading Tag

इस उदाहरण में, <h1>मुख्य शीर्षक</h1> उच्चतम स्तर का शीर्षक है, <h2>उपशीर्षक</h2> एक उपशीर्षक है, और <h3>उप-उपशीर्षक</h3> उपशीर्षक का उपशीर्षक है और इसी तरह आगे भी। ये शीर्षक टैग सामग्री को संरचित करने और पृष्ठ पर जानकारी के पदानुक्रम के बारे में उपयोगकर्ताओं को दृश्य संकेत प्रदान करने में मदद करते हैं।

अनुच्छेद टैग

HTML में पैराग्राफ़ टैग, जिसे <p> द्वारा दर्शाया जाता है, का उपयोग वेब पेज के भीतर टेक्स्ट के पैराग्राफ़ को परिभाषित करने के लिए किया जाता है। यह सबसे आम HTML टैग में से एक है और इसका उपयोग टेक्स्ट या सामग्री के ब्लॉक को अलग करने के लिए किया जाता है। दस्तावेज़ में पैराग्राफ़ को शामिल करने से टेक्स्ट को डिस्प्ले के दौरान ब्राउज़र विंडो के आकार में फ़िट होने के लिए अपने लाइन ब्रेक को गतिशील रूप से समायोजित करने में सक्षम बनाता है। यह सुनिश्चित करता है कि टेक्स्ट की प्रत्येक पंक्ति विंडो की पूरी चौड़ाई में फैली हो। पैराग्राफ़ टैग का उपयोग कैसे किया जाता है, इसका एक उदाहरण यहाँ दिया गया है:

<head>

<title>उदाहरण पृष्ठ</title>

</head>

<body>

<p>यह टेक्स्ट का एक पैराग्राफ़ है। इसमें किसी चीज़ के बारे में कुछ जानकारी या विवरण हो सकता है।</p>

<p>यह एक और पैराग्राफ़ है। प्रत्येक पैराग्राफ़ टैग टेक्स्ट का एक नया ब्लॉक बनाता है।</p>

</body>

</html>

paragraph tag

इस उदाहरण में, <p>यह पाठ का एक पैराग्राफ है...</p> और <p>यह एक और पैराग्राफ है...</p> पैराग्राफ टैग का उपयोग करके परिभाषित दो अलग-अलग पैराग्राफ हैं। यह टैग वेब पेज की सामग्री को संरचित करने में मदद करता है और इसे उपयोगकर्ताओं के लिए अधिक पठनीय बनाता है।

Break Tagब्रेक टैग

HTML में ब्रेक टैग, जिसे <br> द्वारा दर्शाया जाता है, का उपयोग टेक्स्ट या कंटेंट के ब्लॉक में लाइन ब्रेक डालने के लिए किया जाता है। अन्य HTML टैग के विपरीत, ब्रेक टैग को क्लोजिंग टैग की आवश्यकता नहीं होती है, क्योंकि यह एक स्व-क्लोजिंग टैग है। इसका उपयोग आमतौर पर सिंगल-लाइन ब्रेक बनाने के लिए किया जाता है, जैसे कि पते या कविताओं में, जहाँ प्रत्येक पंक्ति एक नई लाइन पर दिखाई देनी चाहिए। यहाँ एक उदाहरण दिया गया है कि ब्रेक टैग का उपयोग कैसे किया जाता है:

Break tag in html

Break tag in html

इस उदाहरण में, <br> का उपयोग पैराग्राफ़ के भीतर लाइन ब्रेक बनाने के लिए किया जाता है। प्रत्येक <br> टैग के कारण उसके बाद का टेक्स्ट एक नई लाइन पर शुरू होता है।

hr tag

HTML में <hr> टैग का उपयोग वेब पेज के भीतर एक क्षैतिज नियम बनाने के लिए किया जाता है, जिसे क्षैतिज रेखा या विभाजक के रूप में भी जाना जाता है। यह एक स्व-समापन टैग है, जिसका अर्थ है कि इसे समापन टैग की आवश्यकता नहीं है। <hr> टैग का उपयोग आमतौर पर सामग्री या अनुभागों को दृष्टिगत रूप से अलग करने के लिए किया जाता है। यहाँ एक उदाहरण दिया गया है कि <hr> टैग का उपयोग कैसे किया जाता है:

<!DOCTYPE html>

<head>

<title>उदाहरण पृष्ठ</title>

</head>

<body>

<p>यह पाठ का एक पैराग्राफ है।</p>

<hr>

<p>यह पाठ का एक और पैराग्राफ है।</p>

</body>

</html>

Hr Tag in HTML

Hr Tag in HTML

इस उदाहरण में, <hr> दो पैराग्राफों के बीच एक क्षैतिज रेखा बनाता है, जो दृश्य रूप से विषय-वस्तु को विभाजित करता है।

Attributes of <HR>

Attribute	Description	Default Value
SIZE	Height of the rule in pixels	2 pixels
WIDTH	Width of the rule in pixels or percentage of screen width	100%
NOSHADE	Draw the rule with a flat look instead of a 3D look	Not set (3D look)
ALIGN	Aligns the line (Left, Center, Right)	Center
COLOR	Sets a color for the rule (IE 3.0 or later)	Not set

HTML में वर्ण स्वरूपण

HTML में, आप विभिन्न टैग और विशेषताओं का उपयोग करके टेक्स्ट और वर्णों को स्वरूपित कर सकते हैं। टेक्स्ट को स्वरूपित करने के कुछ सामान्य तरीके यहां दिए गए हैं:

1. बोल्ड: टेक्स्ट को बोल्ड बनाने के लिए `<b>` टैग का उपयोग करें।

2. इटैलिक: टेक्स्ट को इटैलिक बनाने के लिए `<i>` टैग का उपयोग करें।

<i>यह टेक्स्ट इटैलिक है</i>

3. रेखांकित: टेक्स्ट को रेखांकित करने के लिए `<u>` टैग का उपयोग करें।

<u>यह टेक्स्ट रेखांकित है</u>

4. स्ट्राइकथ्रू: टेक्स्ट को स्ट्राइकथ्रू करने के लिए `<s>` या `<strike>` टैग का उपयोग करें।

<s>इस टेक्स्ट में स्ट्राइकथ्रू है</s>

<strike>इस टेक्स्ट में स्ट्राइकथ्रू भी है</strike>

5. सुपरस्क्रिप्ट: सुपरस्क्रिप्ट टेक्स्ट बनाने के लिए `<sup>` टैग का उपयोग करें।

E=mc<sup>2</sup>

6. सबस्क्रिप्ट: सबस्क्रिप्ट टेक्स्ट बनाने के लिए `<sub>` टैग का उपयोग करें।

H<sub>2</sub>O

7. फ़ॉन्ट आकार: फ़ॉन्ट आकार बदलने के लिए `style` विशेषता का उपयोग करें।

<p>

</p>

8. फ़ॉन्ट रंग: फ़ॉन्ट रंग बदलने के लिए `color` विशेषता का उपयोग करें।

<p>

<font color = "#FF00FF">यह टेक्स्ट गुलाबी रंग में है</font>

</p>

9. फ़ॉन्ट परिवार: फ़ॉन्ट परिवार बदलने के लिए `style` विशेषता का उपयोग करें।

<p>

<font face = "Comic sans MS" size =" 5">Comic Sans MS</font>

</p>

Summery

Attribute	Description	Default Value	Syntax
FONT FACE	DESCRIBE THE FONT FACE(NAME)	DEFAULT FONT	<font face = "Times New Roman“>Font </FONT>
FONT SIZE	DESCRIBE THE FONT SIZE	3	<FONT SIZE=“20”> TWENTY sizes </FONT>
BOLD, ITALIC, UNDERLINE	TO CHANGE THE FONT FACE	NORMAL	<B> Bold </B> *<I> Italic* </I> <U> Underline </U>**
FONT COLOR	TO CHANGE THE FONT COLOR	BLACK	<FONT COLOR=“#RRGGBB”> Color</FONT>
PREFORMATED	PREFORMATED TEXT	NOT PREFORMATED	<PRE> Preformatted </PRE>
<EM> *Emphasis* </EM> <STRONG> STRONG </STRONG> <TT> TELETYPE </TT> <CITE> Citation </CITE>	DIFFERENT FONT FACES	NORMAL	*<EM> Emphasis* </EM> <STRONG> STRONG </STRONG> <TT> TELETYPE </TT> <CITE> Citation </CITE>**

वर्ण स्वरूपण का उदाहरण

<TITLE> Chracter Formating</TITLE></HEAD>

<BODY>

<H1> Heading 1 </H1>

<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />

<I> italics</I> <br/>

<U> Underlined </U> <br/>

<EM> Emphasized</EM> <br/>

<PRE> Preformatted </PRE> <br/>

<STRONG> Strong </STRONG> <br/>

</BODY>

</HTML>

Character formatting in HTML

HTML में रंग

HTML में, रंगों को विभिन्न तरीकों का उपयोग करके निर्दिष्ट किया जा सकता है, जिसमें रंग नाम, हेक्साडेसिमल कोड, RGB मान शामिल हैं। रंग निर्दिष्ट करने के कुछ सामान्य तरीके यहां दिए गए हैं: 1. रंग नाम: HTML पूर्वनिर्धारित रंग नामों के एक सेट का समर्थन करता है, जैसे "लाल", "नीला", "हरा", आदि। <p style="color: red;">यह टेक्स्ट लाल है</p> <p style="color: blue;">यह टेक्स्ट नीला है</p> 2. हेक्साडेसिमल कोड: रंगों को हेक्साडेसिमल कोड का उपयोग करके भी निर्दिष्ट किया जा सकता है, जो लाल, हरे और नीले (RGB) मानों के संयोजन का प्रतिनिधित्व करते हैं। <p style="color: #ff0000;">यह टेक्स्ट लाल है</p> <p style="color: #0000ff;">यह टेक्स्ट नीला है</p> 3. RGB मान: रंगों को RGB मानों का उपयोग करके निर्दिष्ट किया जा सकता है, जो लाल, हरे और नीले घटकों की तीव्रता का प्रतिनिधित्व करते हैं। <p style="color: rgb(255, 0, 0);">यह टेक्स्ट लाल है</p> <p style="color: rgb(0, 0, 255);">यह टेक्स्ट नीला है</p> नीचे दी गई तालिका RGB और हेक्सा दशमलव कोड के साथ रंग को प्रदर्शित करती है

color coding in HTML

ये विधियां HTML में रंग निर्दिष्ट करने में लचीलापन प्रदान करती हैं, जिससे डेवलपर्स को अपनी वेब सामग्री के लिए वांछित दृश्य स्वरूप प्राप्त करने में सहायता मिलती है।

HTML में संरेखण

HTML में, आप विभिन्न विशेषताओं और CSS गुणों का उपयोग करके सामग्री को संरेखित कर सकते हैं। सामग्री को संरेखित करने के कुछ सामान्य तरीके यहां दिए गए हैं:

बाएं संरेखित करें:

छवियों, तालिकाओं और पैराग्राफ जैसे तत्वों के लिए `"बाएं"` मान के साथ `संरेखित करें` विशेषता का उपयोग करें।

केंद्र संरेखित करें:

`"केंद्र"` मान के साथ `संरेखित करें` विशेषता का उपयोग करें

दाएं संरेखित करें:

छवियों, तालिकाओं और पैराग्राफ जैसे तत्वों के लिए `"दाएं"` मान के साथ `संरेखित करें` विशेषता का उपयोग करें।

संरेखण का उदाहरण

<HTML>

<HEAD>

<TITLE> वर्ण स्वरूपण</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Alignment in HTML

HTML में सूची

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

अव्यवस्थित सूची (`<ul>`):

इस प्रकार की सूची आइटम को बुलेटेड प्रारूप में प्रदर्शित करती है। इसका उपयोग आम तौर पर तब किया जाता है जब आइटम का क्रम महत्वपूर्ण नहीं होता है। `<ul>` टैग निम्नलिखित विशेषता को स्वीकार करता है:

TYPE: उपयोग किए जाने वाले बुलेट मार्कर के प्रकार को निर्दिष्ट करता है। सामान्य मानों में "डिस्क" (डिफ़ॉल्ट), "सर्कल" और "स्क्वायर" शामिल हैं।

<UL>

</UL>

उदाहरण

</UL>

क्रमबद्ध सूची (`<ol>`):

अक्रमित सूचियों के विपरीत, क्रमित सूचियाँ आइटम को क्रमांकित प्रारूप में प्रदर्शित करती हैं। इनका उपयोग तब किया जाता है जब आइटम का क्रम मायने रखता है। `<ol>` टैग निम्नलिखित विशेषता को स्वीकार करता है:

प्रकार: यह विशेषता क्रमांकन प्रारूप के प्रकार का वर्णन करती है। मानों में "1" (डिफ़ॉल्ट, अरबी अंक), "A" (बड़े अक्षर), "a" (छोटे अक्षर), "I" (बड़े रोमन अंक) और "i" (छोटे रोमन अंक) शामिल हो सकते हैं।

<OL>

</OL>

उदाहरण

</OL>

सूची आइटम (`<li>`):

`<li>` टैग सूची के भीतर प्रत्येक आइटम का प्रतिनिधित्व करता है। इसका उपयोग `<ul>` या `<ol>` टैग के भीतर अलग-अलग सूची आइटम को परिभाषित करने के लिए किया जाता है। जबकि `<li>` टैग में स्वयं बहुत सी विशेषताएँ नहीं होती हैं, इसे रंग, फ़ॉन्ट आकार और संरेखण जैसे विभिन्न प्रभावों के लिए CSS का उपयोग करके स्टाइल किया जा सकता है।

इन टैग को संयोजित करके, डेवलपर्स वेब पेजों पर प्रभावी ढंग से जानकारी प्रस्तुत करने के लिए व्यवस्थित और आकर्षक सूचियाँ बना सकते हैं।

परिभाषा सूची (<dl>)

HTML में परिभाषा सूची (<dl>) टैग का उपयोग शब्दों की सूची और उनके संगत विवरण को परिभाषित करने के लिए किया जाता है। यह शब्दावलियों, शब्दकोशों या शब्द-परिभाषा युग्मों के अन्य सेटों को प्रस्तुत करने के लिए उपयोगी है।

परिभाषा सूची (<dl>):

<dl> टैग परिभाषा सूची के लिए कंटेनर है। इसमें बहुत सी विशेषताएँ नहीं होती हैं, लेकिन इसे आमतौर पर फ़ॉर्मेटिंग उद्देश्यों के लिए CSS का उपयोग करके स्टाइल किया जाता है।

परिभाषा शब्द (<dt>):

<dt> टैग का उपयोग सूची में आइटम के शब्द या नाम को परिभाषित करने के लिए किया जाता है। प्रत्येक <dt> टैग के बाद एक या अधिक <dd> टैग होते हैं जो शब्द का विवरण या परिभाषा प्रदान करते हैं।

परिभाषा विवरण (<dd>):

<dd> टैग का उपयोग पिछले <dt> टैग द्वारा परिभाषित शब्द का विवरण या परिभाषा प्रदान करने के लिए किया जाता है। यह <dl> संरचना के भीतर सीधे <dt> टैग का अनुसरण करता है।

उदाहरण

<DL>

<DT>मुंबई </DT>

<DD>महाराष्ट्र की राजधानी </DD>

<DT>भोपाल </DT>

<DD>मध्य प्रदेश की राजधानी</DD>

</DL>

नेस्टेड सूचियाँ:

आप एक सूची को दूसरी सूची के अंदर रखकर नेस्टेड सूचियाँ भी बना सकते हैं। उदाहरण के लिए:

<LI> सूची आइटम …

</OL>

</LI>

</UL>

HTML में तालिका

HTML में, टेबल एक संरचित तत्व है जिसका उपयोग पंक्तियों और स्तंभों में डेटा प्रदर्शित करने के लिए किया जाता है। टेबल `<table>` तत्व का उपयोग करके बनाए जाते हैं, और आप उनकी उपस्थिति और व्यवहार को अनुकूलित करने के लिए विभिन्न विशेषताओं का उपयोग कर सकते हैं। यहाँ `<table>` तत्व का संक्षिप्त अवलोकन कुछ सामान्य विशेषताओं के साथ दिया गया है:

1. `<table>` तत्व के लिए विशेषताएँ:

- `border`: यह विशेषता टेबल के चारों ओर की सीमा की मोटाई निर्धारित करती है। उदाहरण के लिए, `<table border="1">` 1 पिक्सेल की सीमा चौड़ाई वाली टेबल बनाएगा।

- `width`: यह टेबल की चौड़ाई निर्धारित करता है, जिसे पिक्सेल, प्रतिशत या अन्य इकाइयों में निर्दिष्ट किया जा सकता है। उदाहरण के लिए, `<table width="100%">` टेबल को उसके सम्मिलित तत्व की पूरी चौड़ाई में फैला देगा।

- `

- `सेलपैडिंग`: यह प्रत्येक सेल की सामग्री और उसकी सीमा के बीच पैडिंग को निर्दिष्ट करता है। उदाहरण के लिए, `<table cellpadding="5">` प्रत्येक सेल में 5 पिक्सेल की पैडिंग जोड़ेगा।

- `सेलस्पेसिंग`: यह तालिका में कोशिकाओं के बीच की दूरी निर्धारित करता है। उदाहरण के लिए, `<table cellspacing="10">` आसन्न कोशिकाओं के बीच 10 पिक्सेल का अंतर बनाएगा।

- `संरेखित`: यह तालिका के क्षैतिज संरेखण को उसके सम्मिलित तत्व के भीतर सेट करता है। संरेखण के लिए संभावित मान "बाएं", "केंद्र" या "दाएं" हैं। उदाहरण के लिए, `<table align="center">` तालिका को पृष्ठ पर क्षैतिज रूप से केंद्र में रखेगा।

- `bgcolor`: यह तालिका का पृष्ठभूमि रंग निर्धारित करता है, जिसे रंग नामों, हेक्साडेसिमल मानों या RGB मानों का उपयोग करके निर्दिष्ट किया जा सकता है। उदाहरण के लिए, `<table bgcolor="#FFFF00">` पृष्ठभूमि रंग को पीला सेट करेगा।

- `bordercolor`: यह टेबल बॉर्डर का रंग निर्दिष्ट करता है। ध्यान दें कि यह विशेषता HTML5 में अप्रचलित है और स्टाइलिंग उद्देश्यों के लिए CSS का उपयोग करने के पक्ष में इसका उपयोग नहीं किया जाना चाहिए।

2. टेबल तत्वों के लिए विशेषताएँ (`<tr>`, `<th>`, `<td>`):

- `align`: सेल के भीतर सामग्री का क्षैतिज संरेखण सेट करता है। मान "बाएं", "केंद्र", या "दाएं" हो सकते हैं।

- `valign`: सेल के भीतर सामग्री का लंबवत संरेखण सेट करता है। तीन संभावित मान हैं: "शीर्ष", "मध्य", या "नीचे"।

- `bgcolor`: सेल का पृष्ठभूमि रंग सेट करता है। इस विशेषता का उपयोग `<td>` और `<th>` तत्वों के भीतर किया जा सकता है।

- `colspan`: विशेषता `colspan` का उपयोग यह इंगित करने के लिए किया जाता है कि सेल को कितने कॉलम कवर करने चाहिए। उदाहरण के लिए, `<td colspan="2">` सेल को दो कॉलम तक फैला देगा।

- `rowspan`: सेल को कितनी पंक्तियों तक फैलाना चाहिए, यह निर्दिष्ट करता है। उदाहरण के लिए, `<td rowspan="2">` सेल को दो पंक्तियों में फैला देगा।

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

निष्कर्ष

निष्कर्ष में, यह ब्लॉग निम्नलिखित विषयों का संक्षिप्त विवरण कवर करता है

HTML, HTML अवधारणा, HTML विशेषताएँ, HTML तत्व, HTML कैसे काम करता है, HTML इतिहास, HTML टैग

संक्षेप में, मैं कह सकता हूँ कि ये विषय कंप्यूटर के मूलभूत सिद्धांतों से संबंधित हैं और उन लोगों के लिए बहुत उपयोगी हैं जो विभिन्न विश्वविद्यालयों से BCA, PGDCA, DCA, 'O' लेवल कोर्स कर रहे हैं

मुझे उम्मीद है कि यह ब्लॉग आपकी बहुत मदद करेगा। सीखने में खुशी हो....

HTML का इतिहास, कार्यप्रणाली, तत्व और टैग्स को उदाहरणों के साथ जानें