एचटीएमएल की मूल बातें
इस लेख में, हम एचटीएमएल की मूल बातें समझाते हैं।
यह DOCTYPE घोषणा, <html>, <head>, और <body> टैग जैसे मुख्य टैग्स को समझाता है। यह टैग्स, एट्रिब्यूट्स और विशेष वर्णों का भी वर्णन करता है।
YouTube Video
एचटीएमएल की मूल बातें
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>फाइल की शुरुआत में, हम यह घोषित करते हैं कि यह एक HTML5 दस्तावेज़ है, जो यह संकेत देता है कि यह HTML5 के नियमों का पालन करता है।
-
<html><html>टैग HTML दस्तावेज़ में सबसे बाहरी तत्व होता है जो पूरे कंटेंट को घेरता है। प्रत्येक HTML फाइल में केवल एक<html>टैग होता है, और अन्य सभी टैग इस टैग के अंदर नेस्टेड होते हैं। उद्घाटन<html>टैग के अंदर काlang="en"एक एट्रिब्यूट कहलाता है और यह ब्राउजर को सूचना देता है कि दस्तावेज़ अंग्रेजी में लिखा गया है। यह स्क्रीन रीडर्स और खोज इंजनों को दस्तावेज़ की भाषा के बारे में सूचित करने में मदद करता है। -
<head><head>टैग पृष्ठ के लिए मेटाडेटा (सूचना) को परिभाषित करता है। इसमें पृष्ठ शीर्षक, वर्ण एन्कोडिंग, और उत्तरदायी डिज़ाइन सेटिंग्स शामिल होती हैं। उत्तरदायी डिज़ाइन एक ऐसी विधि को संदर्भित करता है जिसे वेबसाइटों या ऐप्स के लिए डिज़ाइन किया गया है ताकि वे विभिन्न उपकरणों और स्क्रीन आकारों पर अच्छी तरह से अनुकूल और प्रदर्शित हो सकें। यह उपयोगकर्ताओं को स्मार्टफोन, टैबलेट और डेस्कटॉप जैसे विभिन्न उपकरणों पर सामग्री को आराम से देखने की अनुमति देता है।<meta charset="UTF-8">दस्तावेज़ की वर्ण एन्कोडिंग को UTF-8 पर सेट करता है।<meta name="viewport" content="width=device-width, initial-scale=1.0">एक सेटिंग है जो मोबाइल उपकरणों के लिए प्रदर्शन को अनुकूलित करती है। पृष्ठ डिवाइस की स्क्रीन की चौड़ाई के अनुसार समायोजित हो जाता है।<title>ब्राउज़र टैब में प्रदर्शित पृष्ठ के शीर्षक का प्रतिनिधित्व करता है। इस उदाहरण में, शीर्षक 'HTML की बुनियादी बातें' सेट किया गया है। -
<body><body>टैग वह भाग समाहित करता है जो उपयोगकर्ताओं को कंटेंट प्रदर्शित करता है। इस टैग के भीतर, पाठ, चित्र, लिंक, आदि लिखे जाते हैं। -
<main><main>टैग पृष्ठ की मुख्य सामग्री को दर्शाता है। इसमें शीर्षक और अनुच्छेद शामिल होते हैं। -
<h1><h1>टैग पृष्ठ के सबसे महत्वपूर्ण शीर्षक का प्रतिनिधित्व करता है। किसी दस्तावेज़ में<main>टैग और<h1>टैग का केवल एक बार उपयोग करना आम बात है। -
<p><p>टैग एक अनुच्छेद का प्रतिनिधित्व करता है। -
<!-- Comment -->आप इस प्रारूप में HTML में टिप्पणियाँ लिख सकते हैं। चूंकि क्लाइंट-साइड HTML को कोई भी देख सकता है, इसलिए टिप्पणियों में पासवर्ड या एपीआई कुंजियों जैसी संवेदनशील जानकारी शामिल न करें।
HTML में कई टैग होते हैं, लेकिन यहां निम्नलिखित बिंदुओं पर ध्यान दें। एक HTML फाइल DOCTYPE घोषणा और एक <html> टैग से बनती है। <html> टैग में एक <head> टैग और एक <body> टैग होता है। HTML में, सभी टैग <html> टैग के भीतर होते हैं, जो पाठ की संरचना को माता-पिता, बच्चे, और भाई-बहन के संबंधों के माध्यम से व्यक्त करते हैं, जो एक वृक्ष संरचना के समान है। HTML लिखते समय, दस्तावेज़ की संरचना पर भी ध्यान दें।
टैग और विशेषताएँ
अगले चरण में, आइए HTML टैग्स और गुणों को देखें।
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->टैग कोणीय कोष्ठकों (<, >) में बंद होते हैं और आमतौर पर एक उद्घाटन और समापन टैग के जोड़े के रूप में होते हैं। हालांकि, ऐसे एकल टैग भी होते हैं, जैसे कि <meta> टैग और <img> टैग, जिनमें कोई सामग्री नहीं होती है। एकल टैग को समापन टैग की आवश्यकता नहीं होती है।
टैग में गुण हो सकते हैं, जो टैग को अतिरिक्त जानकारी प्रदान करते हैं। गुणों को उद्घाटन टैग के अंदर attributeName="value" प्रारूप में लिखा जाता है।
यहां, <div> को एक टैग कहा जाता है और <div>Content</div> को एक एलिमेंट कहा जाता है।
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>HTML में आम गुणों में id, class, और style शामिल हैं। id गुण का प्रयोग किसी तत्व को एक विशिष्ट पहचानकर्ता देने के लिए किया जाता है, और एक पृष्ठ पर समान id वाले केवल एक तत्व हो सकते हैं। यह JavaScript या CSS के साथ विशिष्ट तत्वों को संचालित करते समय उपयोगी होता है। class गुण आपको CSS या JavaScript के साथ एक वर्ग नाम का उपयोग करके कई तत्वों को समूहबद्ध करने की अनुमति देता है। आप एक ही वर्ग को कई तत्वों को सौंप सकते हैं, जिससे शैलियों को साझा किया जा सके। style गुण किसी तत्व के लिए इनलाइन CSS शैलियों को निर्दिष्ट करता है। आमतौर पर, शैलियाँ एक बाहरी स्टाइलशीट या <style> टैग के भीतर परिभाषित की जाती हैं, लेकिन जब आप किसी तत्व के लिए सीधे शैलियों को निर्दिष्ट करना चाहते हैं, तब इस गुण का उपयोग किया जाता है।
एचटीएमएल में विशेष वर्ण
अगले चरण में, आइए HTML में विशेष चरित्रों को देखें।
HTML में, विशेष प्रतीकों और वर्णों को प्रदर्शित करने के लिए विशेष वर्ण होते हैं। इन विशेष वर्णों को एंटिटीज़ कहा जाता है। विशेष वर्ण & (अंडसाइन) से शुरू होते हैं, इसके बाद एक नाम या संख्या होती है, और ; (अर्धविराम) के साथ समाप्त होते हैं।
एचटीएमएल में प्रतिनिधि विशेष वर्ण
यहाँ कुछ सामान्य विशेष वर्ण हैं।
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
एचटीएमएल में विशेष वर्णों के उपयोग के उदाहरण
विशेष रूप से, HTML में कोणीय कोष्ठक (<, >) और डबल उद्धरण सही ढंग से उपयोग करने की आवश्यकता है।
कोणीय ब्रैकेट (<, >) और द्विगुण उद्धरण चिह्नों को एचटीएमएल में विशेष वर्णों के रूप में प्रस्तुत किया जाना चाहिए, जैसा कि नीचे दिखाया गया है।
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
एचटीएमएल संस्करण
आइए यहां HTML संस्करणों पर एक नज़र डालें।
HTML संस्करणों ने वेब पेजों की संरचना और कार्यक्षमता को परिभाषित करने के लिए विकास किया है। यहां मुख्य संस्करण हैं:।
-
एचटीएमएल 1.0 (1993)
पहले HTML संस्करण में केवल बहुत ही बुनियादी मार्कअप सुविधाएँ थीं। इसने लिंक, शीर्षक, पैराग्राफ और सूचियों जैसे तत्वों को परिभाषित किया।
-
एचटीएमएल 2.0 (1995)
पहला मानकीकृत संस्करण, जिसमें अधिक तत्व जोड़े गए, जैसे कि फॉर्म और तालिकाओं का समर्थन।
-
एचटीएमएल 3.2 (1997)
अधिक लेआउट सुविधाओं को जोड़ा गया, जिससे स्टाइल तत्वों और स्क्रिप्ट्स को एम्बेड करना संभव हुआ। इसके अलावा,
<table>तत्व का उपयोग करके लेआउट आम हो गया। -
एचटीएमएल 4.01 (1999)
संरचना और प्रस्तुति का अलगाव उन्नत हुआ, और CSS को प्रस्तुत किया गया। मानकों के अनुरूप साइटों का निर्माण अनुशंसित हो गया। इसके अलावा, दस्तावेजों की अंतर्राष्ट्रीयकरण और पहुंच को सुधारा गया।
-
एचटीएमएल5 (2014)
नवीनतम प्रमुख संस्करण, जिसमें वीडियो और ऑडियो, कैनवास, स्थानीय संग्रहण, जियोलोकेशन और अन्य नई एपीआई के लिए समर्थन शामिल किया गया है। यह मोबाइल के अनुकूल है, जिससे अधिक इंटरएक्टिव वेब अनुप्रयोगों का विकास संभव होता है।
HTML5.2 HTML का एक संस्करण है जिसे 2017 में अनुशंसित किया गया था, और यह HTML5 का एक उन्नत संस्करण है। HTML5.2 के बाद से, इसे स्थिर संस्करण संख्या के बजाय HTML जीवन्त मानक के रूप में निरंतर अपडेट किया जाता है।
HTML ने इन संस्करणों के माध्यम से विकास किया है, जिससे यह अधिक लचीली और शक्तिशाली वेब तकनीक में बदल गई है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।