Introduction to HTML
HTML का हिंदी में अर्थ होता है "हाइपरटेक्स्ट मार्कअप भाषा"। HTML वेब पृष्ठों को बनाने के लिए उपयोग होने वाली मानक मार्कअप भाषा है। यह एक संरचित तरीके से दस्तावेज़ को तैयार करने की सुविधा प्रदान करती है जिसमें टैग्स का उपयोग किया जाता है। HTML टैग्स वेब पृष्ठों के तत्वों को प्रतिष्ठित करते हैं और उन्हें संरचित करने में मदद करते हैं। यह वेबसाइट डिज़ाइन, कन्टेंट संरचना, लिंक, छवि, तालिका, फ़ॉर्म इत्यादि के लिए उपयोग होती है। HTML साधारित ब्राउज़रों द्वारा समझी जाती है और उन्हें वेब पृष्ठ को रंगीन और संरचित तरीके से प्रदर्शित करने की क्षमता प्रदान करती है।
Why to Learn HTML? In Hindi
HTML सीखने के कई कारण हो सकते हैं। यहां HTML सीखने के कुछ मुख्य कारण हैं:
1. वेब डेवलपमेंट: HTML वेब डेवलपमेंट की आधारभूत भाषा है। यदि आप वेबसाइट या वेब ऐप्स बनाना चाहते हैं, तो HTML को सीखना आवश्यक है।
2. वेब पृष्ठों का निर्माण: HTML की मदद से आप वेब पृष्ठों का निर्माण कर सकते हैं। आप लिखते हैं HTML तैग्स की मदद से सामग्री, छवियों, लिंक और अन्य तत्वों को संरचित कर सकते हैं।
3. वेबसाइटों का पता लगाना: HTML का ज्ञान आपको वेबसाइटों के पते को समझने में मदद करता है। आप एक वेबसाइट के HTML को देखकर उसके संरचना, तत्वों की जानकारी और सामग्री को समझ सकते हैं।
4. वेब डिजाइन का समर्थन: HTML का ज्ञान आपको वेब डिजाइन का समर्थन करता है। यह आपको टेक्स्ट स्टाइलिंग, लेआउट, रंग और और भी बहुत कुछ तय करने में मदद करता है।
5. वेब की संवाहकता: HTML की संवाहकता बहुत अच्छी होती है। यह सभी मॉडर्न ब्राउज़र्स द्वारा समर्थित होती है और वेब पृष्ठों को विभिन्न प्लेटफ़ॉर्मों पर सही रूप से प्रदर्शित करने में मदद करती है।
6. वेबसाइट प्रबंधन: HTML की समझ आपको वेबसाइट प्रबंधन में मदद कर सकती है। आप सामग्री को संपादित कर सकते हैं, नए तत्वों को जोड़ सकते हैं और वेबसाइट में बदलाव कर सकते हैं।
7. करियर मौके: वेब डेवलपमेंट और डिजाइन क्षेत्र में भरपूर करियर मौके हैं और HTML का ज्ञान आपको इन क्षेत्रों में सफलता प्राप्त करने में मदद कर सकता है।
HTML सीखने के द्वारा आप वेब डेवलपमेंट की एक मजबूत आधार तैयार करते हैं और आपको वेबसाइट और वेब ऐप्स का निर्माण करने के लिए आवश्यक ज्ञान प्रदान करता है।
HTML सीखने में कितना समय लगता है?
सौभाग्य से, HTML की मूल बातें वास्तव में औसत शिक्षार्थी के लिए समझना बहुत आसान है। आप कुछ ही घंटों में HTML सीखना शुरू कर सकते हैं। HTML का पूरा सार समझने में आपको एक से दो सप्ताह का समय लगना चाहिए, और भाषा के साथ सहज होने के लिए लगभग एक महीने का अभ्यास करना चाहिए।
Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
History of html in Hindi
- HTML की गवेषणा और विकास 1990 के दशक में एक महत्वपूर्ण कदम था जब वैब डिजाइन और डेवलपमेंट के लिए एक मानकीकृत भाषा की आवश्यकता प्राम्भिक रूप से उभरने लगी।
- HTML का विकास संयुक्त राष्ट्रीय अंतरजाल के लिए एक वैब पृष्ठ के बारे में विचारशील रहे टिम बर्नर्स-ली द्वारा किया गया था। इस विचार के आधार पर, उन्होंने 1990 में HTML को बनाने का प्रस्तावित विधानक लिखा।
- HTML का प्रथम संस्करण (HTML 1.0) 1993 में जारी हुआ, जिसमें बुनियादी तत्व और टैग्स शामिल थे जो वेब पृष्ठों को बनाने के लिए उपयोग होते हैं।
- इसके बाद, HTML 2.0 (1995) में नए तत्व और अद्यतन जोड़े गए, जैसे टैबल्स, इमेज मैप्स, और फॉर्म्स।
- 1997 में HTML 3.2 जारी हुआ, जिसमें आवेशी तत्वों का समर्थन किया गया।
- इसके बाद, HTML 4.01 (1999) जारी हुआ, जिसमें वैधानिक बदलाव और नए तत्व शामिल थे।
- यहीं नहीं, HTML की विकास प्रक्रिया 2000 के दशक में जारी रही और 2010 में HTML5 का प्रारंभ हुआ।
- HTML5 एक बड़ी सकारात्मक परिवर्तन था, जिसमें नए तत्व, एपीआई, फ़ॉर्म्स, मल्टीमीडिया समर्थन, ऑफलाइन वेब अनुभव और सेमांटिक एलिमेंट्स शामिल हैं।
- HTML5 ने वेब डेवलपमेंट को एक नया अधिकार दिया और उद्योग में व्यापक अपनी प्रभावशाली उपस्थिति बनाई।
- HTML के बाद आजकल वेब डेवलपमेंट के लिए भी अन्य मार्कअप भाषाएं जैसे CSS (सीएसएस) और JavaScript (जावास्क्रिप्ट) भी उपयोग होते हैं, जिनका उपयोग वेबसाइटों को बेहतर दिखाने, इंटरैक्टिविटी प्रदान करने और उच्चतम उपयोगिता प्राप्त करने के लिए किया जाता है।
HTML Elements and Tags
HTML दस्तावेज़ों में तत्वों का एक संग्रह होता है, प्रत्येक को टैग द्वारा दर्शाया जाता है। टैग कोण कोष्ठक (< और >) में संलग्न हैं। एक HTML तत्व में आमतौर पर एक प्रारंभिक टैग, सामग्री और एक समापन टैग होता है। प्रारंभिक टैग किसी तत्व की शुरुआत को इंगित करता है, और समापन टैग तत्व के अंत को इंगित करता है।
Commonly Used HTML Tags
- <h1><h2><h3><h4><h5><h6>: Headings
- <p>: Paragraph
- <a>: Anchor Link
- <img>: Image
- <ul> and <li>: Unordered List
- <ol> and <li>: Ordered List
- <table>, <tr>, <th>, and <td>: Table
- <div> and <span>: Division and Span
- <form> and <input>: Form and Input Fields
Chapter – 2 (Basic HTML Tags)
हम पेज लेआउट को परिभाषित करने के लिए बॉडी टैग के अंदर तत्व जोड़ सकते हैं।
HTML Element
Everything from starting to the ending tag
<body> - Opening tag
--Content--
</body> - Closing tag
The Heading Tag
HTML में हेडिंग को चिन्हित करने के लिए हेडिंग टैग का उपयोग किया जाता है। h1 से h6 तक, हमारे पास सबसे महत्वपूर्ण से लेकर सबसे कम महत्वपूर्ण शीर्षकों के लिए टैग हैं।
<h1> Most important heading </h1>
<h2> Another heading H2 </h2>
<h3> Another heading H3 </h3>
<h4> Another heading H4 </h4>
<h5> Another heading H5 </h5>
<h6> Least important heading </h6>
Note: We should not use HTML headings to make text thick or bold.
The Paragraph Tag
पैराग्राफ टैग का उपयोग HTML पेज पर पैराग्राफ जोड़ने के लिए किया जाता है।
<p> This is a paragraph </p>
Anchor Tag
एंकर टैग का उपयोग HTML पेज के अंदर मौजूदा सामग्री के लिंक जोड़ने के लिए किया जाता है।
<a href=”https://codewithharry.com/”>मुझे क्लिक करें</a>
img Tag
img टैग का उपयोग HTML पेज में इमेज जोड़ने के लिए किया जाता है।
<img src=”image.jpeg”>
नोट: src विशेषता में, हमें छवि का सापेक्ष पथ निर्दिष्ट करना होगा।
बोल्ड, इटैलिक और अंडरलाइन टैग
हम टेक्स्ट को हाइलाइट करने के लिए बोल्ड, इटैलिक और अंडरलाइन टैग का उपयोग इस प्रकार कर सकते हैं:
<b> यह बोल्ड है </b>
<i> यह इटैलिक है </i>
<u> यह रेखांकित है </u>
br टैग
br टैग का उपयोग HTML दस्तावेज़ में लाइन ब्रेक बनाने के लिए किया जाता है।
एक बुनियादी HTML पृष्ठ
HTML वेब पेज की संरचना बनाने के लिए विभिन्न टैग का उपयोग करता है। प्रत्येक टैग कोणीय कोष्ठक <> के अंदर लिखा जाता है। लगभग हर टैग में एक संबंधित समापन टैग भी होता है। टैग को तत्व के रूप में भी जाना जाता है। जैसा कि पहले बताया गया है, HTML एक मार्कअप भाषा है और सामग्री को प्रारूपित करने के लिए विभिन्न टैग का उपयोग करती है। ये टैग कोण ब्रेसिज़ <टैग नाम> के भीतर संलग्न हैं। कुछ टैगों को छोड़कर, अधिकांश टैगों में उनके अनुरूप समापन टैग होते हैं। उदाहरण के लिए, <html> का अपना क्लोजिंग टैग </html> होता है और <body> टैग का अपना क्लोजिंग टैग </body> टैग आदि होता है। HTML दस्तावेज़ का उपरोक्त उदाहरण निम्नलिखित टैग का उपयोग करता है
<!Doctype html> - निर्दिष्ट करता है कि यह एक html5 दस्तावेज़ है
<html> - HTML पृष्ठ का मूल
<head> - पेज मेटाडेटा शामिल है
<body> - पृष्ठ का मुख्य भाग (ब्राउज़र द्वारा प्रस्तुत)
<h1> यह एक शीर्षक है </h1> - शीर्षक टैग
<p> मेरा पैराग्राफ </p> - पैराग्राफ टैग
</head> - क्लोजिंग head टैग
</body> - क्लोजिंग बॉडी टैग
</html> - html टैग बंद करना
एक टैग सामग्री या अन्य HTML टैग के लिए एक कंटेनर की तरह होता है।
HTML में टिप्पणियाँ
HTML में टिप्पणियों का उपयोग टेक्स्ट को चिह्नित करने के लिए किया जाता है जिसे पार्स नहीं किया जाना चाहिए। वे स्रोत कोड के दस्तावेज़ीकरण के दौरान सहायता कर सकते हैं।
कोड का संक्षिप्त विवरण प्रदान करने के लिए HTML के कोड में टिप्पणियाँ जोड़ी जाती हैं। यह वेब पेज पर दिखाई नहीं देता है लेकिन विकास उद्देश्यों के लिए रखा जाता है क्योंकि यह वेब डेवलपर के लिए बहुत महत्वपूर्ण भूमिका निभाता है। HTML दस्तावेज़ में टिप्पणी जोड़ने के लिए हम इसका उपयोग करते हैं।
- <!-- HTML टिप्पणी -->
- <!-- इस कोणीय कोष्ठक के अंदर लिखी गई कोई भी चीज़ वेब पेज पर नहीं दिखाई जाएगी -->
मामले की संवेदनशीलता
- HTML एक केस असंवेदनशील भाषा है. <H1> और <h1> टैग समान हैं।
HTML Attributes
HTML विशेषताएँ किसी तत्व के बारे में अतिरिक्त जानकारी प्रदान करती हैं और शुरुआती टैग में जोड़ी जाती हैं। उदाहरणों में class, id, src, href, etc. शामिल हैं।
- सभी HTML तत्वों में विशेषताएँ हो सकती हैं ।
- विशेषताएँ तत्वों के बारे में अतिरिक्त जानकारी प्रदान करती हैं ।
- विशेषताएँ हमेशा प्रारंभ टैग में निर्दिष्ट होती हैं।
- विशेषताएँ आमतौर पर नाम/मूल्य जोड़े में आती हैं जैसे: name='मूल्य'
For example-
<html>
<body>
<a href="https://procoderh.blogspot.com/"> Procoderh </a>
<!-- The link written inside of double quotes i.e.(play.google.com) will get linked
to text written inside of anchor tag i.e.(Google Play Store) -->
</body>
</html>
HTML Links and Images
<a> tag is used to create hyperlinks, and <img> tag is used to display images.
For example-
<!doctype html>
<html>
<head>
<title> My Website </title>
</head>
<body>
<p> Try our other apps on
<img src = " image url "/>
<!-- When image is clicked, it'll open the provided link-->
</p>
</body>
</html>
HTML Formatting and Styling
HTML सामग्री को प्रारूपित और स्टाइल करने के लिए विभिन्न टैग और विशेषताएँ प्रदान करता है, जैसे <strong>, <em>, <u>, <strike>, <br>, <hr>, आदि।
HTML Lists and Tables
<ul> और <ol> टैग का उपयोग क्रमशः अव्यवस्थित और क्रमबद्ध सूचियाँ बनाने के लिए किया जाता है। <table> टैग का उपयोग पंक्तियों और स्तंभों के साथ तालिकाएँ बनाने के लिए किया जाता है।
HTML Forms
<form> tag is used to create forms, and <input> tag is used to define input fields within forms.
Case Sensitivity
HTML is a case insensitive language. <H1> and <h1> tags are the same.
FAQs
HTML के बाद क्या सीखना चाहिए?
आपको अपना प्रोग्रामिंग करियर
C और
C++ से शुरू करना चाहिए और फिर
Java एवं
Python की तरफ बढ़ना चाहिए।
HTML और DHTML के बीच क्या अंतर है?
यह HTML से पूरी तरह अलग है HTML का इस्तेमाल static वेब पेज बनाने के लिए किया जाता है, जबकि DHTML का इस्तेमाल dynamic वेब पेज बनाने के लिए किया जाता है। DHTML में HTML, CSS, Javascript और DOM की विशेषताएं सम्मिलित रहती हैं। जिनका उपयोग करके आकर्षक वेब पेज बनाये जाते हैं।
Conclusion
यह हमारे बुनियादी HTML ट्यूटोरियल का समापन करता है। HTML वेब पेज बनाने के लिए आधार प्रदान करता है और वेब विकास के लिए एक आवश्यक कौशल है।