HTML (HyperText Markup Language) का इस्तेमाल वेब पेज बनाने के लिए होता है। मैं आपको HTML की मूल बातें हिंदी में सिखाता हूँ।
HTML डॉक्यूमेंट की बेसिक संरचना
एक साधारण HTML डॉक्यूमेंट का ढाँचा इस प्रकार होता है
<!DOCTYPE html>
<html>
<head>
<title>पेज का शीर्षक</title>
</head>
<body>
<h1>यह एक शीर्षक है</h1>
<p>यह एक अनुच्छेद है।</p>
</body>
</html>
इस कोड का विवरण:
<!DOCTYPE html>: यह ब्राउज़र को बताता है कि यह HTML5 डॉक्यूमेंट है।<html>: यह HTML कोड का मुख्य भाग होता है।<head>: इसमें मेटाडेटा होता है, जैसे कि पेज का शीर्षक (title), स्टाइल शीट्स, और अन्य सेटिंग्स।<title>: यह पेज का शीर्षक निर्धारित करता है जो ब्राउज़र की टैब में दिखता है।<body>: इसमें वो सभी सामग्री होती है जो वेब पेज पर दिखाई जाती है, जैसे कि टेक्स्ट, चित्र, लिंक आदि।
HTML के सामान्य टैग्स
1. हेडिंग्स (Headings):
हेडिंग के लिए HTML में <h1> से लेकर <h6> तक के टैग होते हैं। <h1> सबसे बड़ी हेडिंग होती है और <h6> सबसे छोटी।
<h1>मुख्य शीर्षक</h1>
<h2>उप शीर्षक</h2>
2. अनुच्छेद (Paragraphs):
अनुच्छेद लिखने के लिए <p> टैग का उपयोग किया जाता है।
<p>यह एक सामान्य अनुच्छेद है।</p>
3. लिंक (Links):
वेब पेज में लिंक जोड़ने के लिए <a> टैग का उपयोग किया जाता है। href के अंदर लिंक का पता होता है।
<a href=”https://example.com”>यह एक लिंक है</a>
4. चित्र (Images):
चित्र जोड़ने के लिए <img> टैग का उपयोग किया जाता है। src के अंदर चित्र का URL होता है और alt में चित्र का वर्णन।
<img src=”image.jpg” alt=”यह एक चित्र है”>
5. सूचियाँ (Lists):
HTML में दो प्रकार की सूचियाँ होती हैं:
- अनऑर्डर्ड (Unordered) – जहाँ बुलेट्स होते हैं (
<ul>टैग के साथ) - ऑर्डर्ड (Ordered) – जहाँ नंबर होते हैं (
<ol>टैग के साथ)
अनऑर्डर्ड सूची:
<ul>
<li>आइटम 1</li>
<li>आइटम 2</li>
</ul>
ऑर्डर्ड सूची:
<ol>
<li>पहला आइटम</li>
<li>दूसरा आइटम</li>
</ol>
अब हम HTML की कुछ और महत्वपूर्ण चीज़ों के बारे में जानेंगे, जैसे कि फॉर्म्स, टेबल्स, और डिव लेआउट्स।
1. HTML फॉर्म्स (Forms)
HTML फॉर्म्स का उपयोग यूज़र से इनपुट प्राप्त करने के लिए किया जाता है। उदाहरण के तौर पर, जब कोई यूज़र वेबसाइट पर अपना नाम, ईमेल, और अन्य जानकारी भरता है, तो वो फॉर्म के माध्यम से होता है।
एक साधारण फॉर्म:
<form action=”/submit-form” method=”post”>
<label for=”name”>नाम:</label>
<input type=”text” id=”name” name=”user_name”><br><br>
<label for=”email”>ईमेल:</label>
<input type=”email” id=”email” name=”user_email”><br><br>
<input type=”submit” value=”जमा करें”>
</form>
विवरण:
<form>: फॉर्म की शुरुआत करता है।actionमें उस पेज का URL होता है जहां डेटा भेजा जाएगा।methodबताता है कि डेटा किस तरीके से भेजा जाएगा (POST या GET)।<label>: यह फॉर्म फ़ील्ड का नाम दर्शाने के लिए उपयोग होता है।<input>: यूज़र द्वारा इनपुट देने के लिए।<input type="submit">: बटन जो यूज़र के डेटा को सबमिट करने के लिए होता है।
2. HTML टेबल्स (Tables)
टेबल्स का उपयोग डेटा को पंक्तियों और स्तंभों में दिखाने के लिए किया जाता है। उदाहरण के लिए, आप छात्रों की मार्कशीट या प्रोडक्ट की लिस्ट दिखा सकते हैं।
एक साधारण टेबल:
<table border=”1″>
<tr>
<th>नाम</th>
<th>उम्र</th>
<th>शहर</th>
</tr>
<tr>
<td>राम</td>
<td>25</td>
<td>दिल्ली</td>
</tr>
<tr>
<td>सीता</td>
<td>23</td>
<td>मुंबई</td>
</tr>
</table>
विवरण:
<table>: टेबल की शुरुआत करता है।<tr>: एक पंक्ति (row) दर्शाता है।<th>: हेडर कॉलम (column header) के लिए उपयोग होता है।<td>: टेबल का डेटा दर्शाने के लिए उपयोग होता है।
3. HTML Div और Layouts
<div> टैग का उपयोग किसी HTML डॉक्यूमेंट में विभाजन या सेक्शन बनाने के लिए किया जाता है। आमतौर पर, इसका उपयोग पेज के लेआउट को डिज़ाइन करने के लिए किया जाता है। CSS के साथ मिलाकर इसे और सुंदर बनाया जा सकता है।
एक साधारण डिव लेआउट:
<div style=”background-color: lightgray; padding: 20px;”>
<h2>हेडर</h2>
<p>यह एक अनुभाग (section) है जो div के अंदर है।</p>
</div>
CSS के साथ लेआउट:
CSS (Cascading Style Sheets) का उपयोग HTML को डिज़ाइन और स्टाइल करने के लिए किया जाता है। CSS को HTML के साथ इस तरह जोड़ा जा सकता है:
<style>
.container {
width: 100%;
background-color: lightblue;
padding: 10px;
}
.content {
background-color: white;
padding: 20px;
margin: 10px;
}
</style>
<div class=”container”>
<div class=”content”>
<h2>यह एक कंटेंट बॉक्स है</h2>
<p>CSS का उपयोग करके इसे स्टाइल किया गया है।</p>
</div>
</div>
विवरण:
.containerऔर.content: ये CSS क्लासेस हैं जिन्हें आप HTML के अंदरclassattribute के साथ उपयोग कर सकते हैं।padding,margin,background-color: CSS प्रॉपर्टीज़ जो HTML एलिमेंट्स को स्टाइल और स्पेसिंग देती हैं।
4. HTML के कुछ महत्वपूर्ण और उपयोगी टैग्स
<br>: लाइन ब्रेक डालने के लिए।<hr>: एक हॉरिज़ॉन्टल रूल/लाइन डालने के लिए।<strong>और<b>: टेक्स्ट को बोल्ड करने के लिए।<em>और<i>: टेक्स्ट को इटैलिक करने के लिए।
HTML की गहराई में जाने के लिए हम कुछ और महत्वपूर्ण टॉपिक्स पर ध्यान देंगे। इसमें शामिल होंगे: HTML5 के नए फीचर्स, मल्टीमीडिया एलिमेंट्स, फ़ॉर्म वेलिडेशन, और कुछ एडवांस कॉन्सेप्ट्स जैसे अगर आप HTML को JavaScript के साथ कैसे इंटरेक्टिव बना सकते हैं।
1. HTML5 के नए फीचर्स
HTML5 ने बहुत से नए एलिमेंट्स और फ़ीचर्स जोड़े हैं, जिससे वेबसाइट्स को और अधिक प्रभावी और यूज़र-फ्रेंडली बनाया जा सकता है। आइए कुछ मुख्य फीचर्स पर नज़र डालते हैं:
1.1. नए Semantic Elements:
HTML5 में कई नए सेमांटिक (meaningful) टैग्स आए हैं, जो पेज की संरचना को और स्पष्ट बनाते हैं। ये ब्राउज़र और सर्च इंजन को पेज की सामग्री को बेहतर ढंग से समझने में मदद करते हैं।
<header>: पेज या सेक्शन का हेडर।<footer>: पेज या सेक्शन का फुटर।<nav>: नेविगेशन लिंक को दर्शाने के लिए।<article>: एक स्वतंत्र लेख या कंटेंट।<section>: एक सेक्शन, जिससे पेज को अलग-अलग भागों में बांटा जाता है।<aside>: मुख्य कंटेंट से अलग जानकारी, जैसे कि साइडबार।
उदाहरण:
<header>
<h1>वेबसाइट का शीर्षक</h1>
</header>
<nav>
<ul>
<li><a href=”#home”>होम</a></li>
<li><a href=”#about”>हमारे बारे में</a></li>
<li><a href=”#contact”>संपर्क करें</a></li>
</ul>
</nav>
<section>
<article>
<h2>यह एक लेख है</h2>
<p>यहां पर लेख का विवरण आता है।</p>
</article>
</section>
<aside>
<p>यह साइडबार की जानकारी है।</p>
</aside>
<footer>
<p>कॉपीराइट जानकारी</p>
</footer>
2. मल्टीमीडिया एलिमेंट्स (Multimedia Elements)
HTML5 में सीधे वीडियो और ऑडियो इम्बेड करना अब और भी आसान हो गया है, और इसके लिए कोई प्लगइन की आवश्यकता नहीं होती।
2.1. Video Tag:
HTML5 में <video> टैग का उपयोग करके वीडियो को आसानी से पेज में एम्बेड किया जा सकता है।
<video controls>
<source src=”movie.mp4″ type=”video/mp4″>
आपका ब्राउज़र वीडियो टैग को सपोर्ट नहीं करता।
</video>
2.2. Audio Tag:
ऑडियो फाइल को इम्बेड करने के लिए <audio> टैग का उपयोग किया जाता है।
<audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”>
आपका ब्राउज़र ऑडियो टैग को सपोर्ट नहीं करता।
</audio>
3. HTML फ़ॉर्म वेलिडेशन (Form Validation)
HTML5 में इन-बिल्ट फ़ॉर्म वेलिडेशन फीचर्स हैं, जिससे आप जावास्क्रिप्ट के बिना ही बेसिक वेलिडेशन लागू कर सकते हैं।
3.1. Required Attribute:
इससे आप इनपुट फ़ील्ड को अनिवार्य (mandatory) बना सकते हैं।
<form action=”/submit-form” method=”post”>
<label for=”email”>ईमेल:</label>
<input type=”email” id=”email” name=”user_email” required><br><br>
<input type=”submit” value=”जमा करें”>
</form>
3.2. Input Types:
HTML5 में कई नए इनपुट टाइप्स हैं जो उपयोगकर्ता को सही डेटा दर्ज करने में मदद करते हैं।
- email: ईमेल दर्ज करने के लिए।
- url: यूआरएल दर्ज करने के लिए।
- number: केवल नंबर इनपुट के लिए।
- date: तारीख दर्ज करने के लिए।
उदाहरण:
<form>
<label for=”dob”>जन्म तिथि:</label>
<input type=”date” id=”dob” name=”dob”><br><br>
<label for=”age”>उम्र:</label>
<input type=”number” id=”age” name=”age” min=”18″ max=”60″><br><br>
<input type=”submit” value=”जमा करें”>
</form>
4. इंटरएक्टिविटी के लिए HTML और JavaScript
HTML सिर्फ एक संरचना (structure) देता है, लेकिन वेबसाइट को इंटरएक्टिव बनाने के लिए JavaScript का उपयोग किया जाता है। उदाहरण के तौर पर, अगर आप किसी बटन को क्लिक करने पर एक संदेश (alert) दिखाना चाहते हैं, तो आप JavaScript का इस्तेमाल कर सकते हैं।
4.1. एक साधारण बटन और JavaScript के साथ इंटरेक्शन:
<button onclick=”displayMessage()”>यह बटन क्लिक करें</button>
<script>
function displayMessage() {
alert(“आपने बटन क्लिक किया!”);
}
</script>
5. Canvas (HTML5 का एक नया फीचर)
HTML5 का <canvas> टैग आपको ग्राफिक्स, आरेख (diagrams), और एनिमेशन बनाने की सुविधा देता है। यह मुख्य रूप से जावास्क्रिप्ट के साथ काम करता है।
एक साधारण canvas उदाहरण:
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”></canvas>
<script>
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.fillStyle = “#FF0000”;
ctx.fillRect(0, 0, 150, 75);
</script>
6. Local Storage (HTML5)
HTML5 का Local Storage आपको ब्राउज़र में डेटा को स्टोर करने की सुविधा देता है, जिसे पेज को रीफ्रेश करने के बाद भी एक्सेस किया जा सकता है।
उदाहरण:
<script>
localStorage.setItem(“name”, “आपका नाम”);
document.write(localStorage.getItem(“name”));
</script>
7. एडवांस्ड लेआउट्स: Flexbox और Grid
HTML में CSS का उपयोग करके पेज का लेआउट डिज़ाइन करना Flexbox और Grid के साथ और आसान हो गया है। Flexbox का उपयोग करके आप एलिमेंट्स को लाइन में आसानी से व्यवस्थित कर सकते हैं।
एक साधारण Flexbox उदाहरण:
<style>
.container {
display: flex;
background-color: lightgray;
}
.box {
background-color: blue;
color: white;
padding: 20px;
margin: 10px;
}
</style>
<div class=”container”>
<div class=”box”>बॉक्स 1</div>
<div class=”box”>बॉक्स 2</div>
<div class=”box”>बॉक्स 3</div>
</div>
