Introduction to HTML, HTML का परिचय | What is HTML ? HTML क्या है?

-

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It is platform-independent, tag-based, and case-insensitive.

HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) एक मानक मार्कअप भाषा है जिसका उपयोग वेब पेज बनाने के लिए किया जाता है। यह प्लेटफॉर्म-इंडिपेंडेंट, टैग-आधारित और केस-इनसेंसिटिव होती है।

HTML allows us to design structured documents using tags and elements. Each tag tells the browser how to display the content.

HTML हमें टैग्स और एलिमेंट्स की सहायता से संरचित डॉक्यूमेंट डिज़ाइन करने की अनुमति देता है। प्रत्येक टैग ब्राउज़र को यह बताता है कि सामग्री को कैसे प्रदर्शित किया जाए।

# 🧱 Basic Structure of an HTML Document | HTML डॉक्यूमेंट की संरचना

```html
<!DOCTYPE html>
<html>
<head>
  <title>Title of Page</title>
</head>
<body>
  <h1>Main Heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>
```

This is a simple HTML page structure that includes a header and body content.
यह एक साधारण HTML पेज की संरचना है जिसमें हेडर और बॉडी कंटेंट होता है।


# 🏷️ Common HTML Tags | सामान्य HTML टैग्स

| Tag        | Purpose (उद्देश्य)                               |
| ---------- | ------------------------------------------------ |
| `<html>`   | HTML डॉक्यूमेंट की शुरुआत और अंत करता है         |
| `<head>`   | मेटा जानकारी, स्क्रिप्ट और टाइटल के लिए          |
| `<title>`  | ब्राउज़र टैब में वेबपेज का शीर्षक दिखाता है      |
| `<body>`   | मुख्य दृश्य सामग्री को परिभाषित करता है          |
| `<applet>` | Java Applet जोड़ने के लिए (HTML5 में deprecated) |


# ✍️ Formatting Tags | फॉर्मेटिंग टैग्स

| Tag        | Description (विवरण)                        |
| ---------- | ------------------------------------------ |
| `<i>`      | Italic text (इटैलिक टेक्स्ट)               |
| `<b>`      | Bold text (बोल्ड टेक्स्ट)                  |
| `<u>`      | Underlined text (रेखांकित टेक्स्ट)         |
| `<mark>`   | Highlighted text (हाइलाइटेड टेक्स्ट)       |
| `<sub>`    | Subscript text (सबस्क्रिप्ट टेक्स्ट)       |
| `<sup>`    | Superscript text (सुपरस्क्रिप्ट टेक्स्ट)   |
| `<strong>` | Emphasized bold text (प्रबल बोल्ड टेक्स्ट) |
| `<small>`  | Smaller text (छोटा टेक्स्ट)                |
| `<ins>`    | Inserted text (नया जोड़ा गया टेक्स्ट)      |

---

# 📝 Form Tags | फॉर्म टैग्स

HTML forms are used to collect user input.
HTML फॉर्म का उपयोग यूज़र से इनपुट प्राप्त करने के लिए किया जाता है।

| Tag          | Purpose (उद्देश्य)                               |
| ------------ | ------------------------------------------------ |
| `<form>`     | HTML फॉर्म तैयार करता है                         |
| `<input>`    | टेक्स्ट बॉक्स, चेकबॉक्स, रेडियो बटन, पासवर्ड आदि |
| `<textarea>` | मल्टीलाइन इनपुट हेतु                             |
| `<select>`   | ड्रॉपडाउन लिस्ट के लिए                           |
| `<option>`   | ड्रॉपडाउन में विकल्प जोड़ने हेतु                 |
| `<button>`   | बटन बनाने के लिए                                 |
| `<label>`    | किसी इनपुट के लिए टेक्स्ट लेबल दर्शाता है        |

### 📌 Sample Form Code (फॉर्म कोड का उदाहरण):

```html
<form action="thankyou.html" method="post">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="pass"><br>
  Gender:
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="submit" value="Submit">
</form>
```

---

# 📦 Frame Tags | फ्रेम टैग्स

Used to divide web pages into multiple sections or windows.
वेब पेज को कई हिस्सों में विभाजित करने के लिए फ्रेम टैग्स का प्रयोग किया जाता है।

| Tag          | Description (विवरण)                                        |
| ------------ | ---------------------------------------------------------- |
| `<frame>`    | एक फ्रेम परिभाषित करता है                                  |
| `<frameset>` | फ्रेम के सेट को परिभाषित करता है                           |
| `<noframes>` | फ्रेम न सपोर्ट करने वाले ब्राउज़रों के लिए वैकल्पिक कंटेंट |
| `<iframe>`   | इनलाइन फ्रेम तैयार करता है                                 |

---

# 🖼️ Image Tags | इमेज टैग्स

| Tag      | Purpose (उद्देश्य)                        |
| -------- | ----------------------------------------- |
| `<img>`  | वेबपेज पर इमेज शामिल करता है              |
| `<map>`  | इमेज मैप को परिभाषित करता है              |
| `<area>` | इमेज मैप के क्षेत्रों को परिभाषित करता है |

```html
<img src="winter.jpg" alt="Winter Image" width="300">
```

---

# 🔗 Link Tags | लिंक टैग्स

Used to create hyperlinks.
वेब पेज में एक से दूसरे पेज पर जाने के लिए लिंक टैग्स का प्रयोग होता है।

| Tag      | Description (विवरण)                  |
| -------- | ------------------------------------ |
| `<a>`    | हाइपरलिंक बनाने के लिए               |
| `<link>` | CSS जैसी बाहरी फाइल्स को जोड़ने हेतु |

```html
<a href="about.html">About Us</a>
```

---

# 📋 List Tags | लिस्ट टैग्स

| Tag    | Purpose (उद्देश्य)               |
| ------ | -------------------------------- |
| `<ul>` | अनऑर्डर्ड लिस्ट (unordered list) |
| `<ol>` | ऑर्डर्ड लिस्ट (ordered list)     |
| `<li>` | लिस्ट आइटम                       |
| `<dl>` | डेफिनिशन लिस्ट                   |
| `<dt>` | डेफिनिशन टर्म (शब्द)             |
| `<dd>` | डेफिनिशन विवरण                   |

---

# 📊 Table Tags | टेबल टैग्स

| Tag         | Purpose (उद्देश्य)                |
| ----------- | --------------------------------- |
| `<table>`   | टेबल बनाता है                     |
| `<tr>`      | टेबल की एक रो बनाता है            |
| `<th>`      | टेबल हैडर सेल तैयार करता है       |
| `<td>`      | टेबल डाटा सेल तैयार करता है       |
| `<caption>` | टेबल का शीर्षक (कैप्शन) जोड़ता है |

```html
<table border="1">
  <caption>Student Data</caption>
  <tr><th>Name</th><th>Class</th></tr>
  <tr><td>Ravi</td><td>10th</td></tr>
</table>
```

---

# 🎨 Style Tags | स्टाइल टैग्स

CSS can be applied using the `<style>` tag within HTML documents.
HTML डॉक्यूमेंट में स्टाइल लागू करने के लिए `<style>` टैग का प्रयोग होता है।

```html
<style>
p { color: red; font-size: 20px; }
</style>
```

---

# 📚 Section Tags | सेक्शन टैग्स

| Tag         | Purpose (उद्देश्य)                      |
| ----------- | --------------------------------------- |
| `<div>`     | ब्लॉक लेवल सेक्शन बनाता है              |
| `<span>`    | इनलाइन लेवल कंटेनर बनाता है             |
| `<section>` | डॉक्यूमेंट के विभागों को दर्शाने के लिए |

---

# 📜 Scripting Tags | स्क्रिप्टिंग टैग्स

Used for embedding scripts like JavaScript.
HTML में JavaScript जैसी स्क्रिप्ट्स जोड़ने हेतु टैग्स का प्रयोग होता है।

```html
<script>
  alert("Welcome to HTML World!");
</script>
<noscript>
  Your browser does not support JavaScript.
</noscript>
```

---

# 🚀 Conclusion | निष्कर्ष

HTML is the foundational language for web development. With HTML5, we now have richer media support, semantic tags, and better integration with JavaScript and CSS.
HTML वेब विकास की आधारशिला है। HTML5 के साथ अब हमें बेहतर मीडिया सपोर्ट, सेमान्टिक टैग्स और JavaScript व CSS के साथ बेहतर समन्वय मिलता है।

HTML अकेले नहीं, बल्कि CSS और JavaScript के साथ मिलकर एक पूर्ण वेबसाइट तैयार करता है।

Comments

Post a Comment

Popular posts from this blog

What is a Web Browser? वेब ब्राउज़र क्या है?

-
🌐 A web browser is a special type of application software that allows users to search, retrieve, and display information on the World Wide Web (WWW) . वेब ब्राउज़र एक विशेष प्रकार का एप्लिकेशन सॉफ्टवेयर होता है जिसका उपयोग वर्ल्ड वाइड वेब (WWW) पर जानकारी खोजने, प्राप्त करने और प्रदर्शित करने के लिए किया जाता है। 🔍 How Does a Web Browser Work? | वेब ब्राउज़र कैसे कार्य करता है? A web browser receives text, images, videos , and other files from web servers in the form of web pages . In the client-server model , the browser acts as a client running on your device. When a user sends a request to access some information, the web server responds and sends the result back to the browser. The browser then displays the result as a web page to the user. वेब ब्राउज़र वेब सर्वर से टेक्स्ट, चित्र, वीडियो और अन्य फाइलें वेबपेज के रूप में प्राप्त करता है। क्लाइंट-सर्वर मॉडल में, ब्राउज़र एक क्लाइंट की तरह कार्य करता है। जब उपयोगकर्ता किसी जानकारी का अनुरोध क...
Read more

Java's Support System जावा का सहयोगी तंत्र

-
Java एप्लिकेशन और अप्लेट्स को सफलतापूर्वक चलाने के लिए कई सहयोगी घटकों (supporting components) की आवश्यकता होती है। ये घटक Java को एक प्लेटफ़ॉर्म-स्वतंत्र और सुरक्षित भाषा बनाने में महत्वपूर्ण भूमिका निभाते हैं। इस लेख में हम जावा के समर्थन तंत्र (Support System) से जुड़े प्रमुख भागों को द्विभाषीय रूप में समझेंगे। 🅰️ a) Java Code | जावा कोड Java code is the actual source code written in .java files that defines the behavior and structure of a Java Applet. जावा कोड वह मूल स्रोत कोड होता है जो .java फ़ाइल में लिखा जाता है और जावा एप्लेट के व्यवहार व संरचना को परिभाषित करता है। 🗂️ Example: public class MyApplet extends Applet { public void paint(Graphics g) { g.drawString("Hello Applet", 20, 20); } } 🅱️ b) Byte Code | बाइट कोड Byte code is the compiled version of Java source code ( .class file) that is downloaded and executed by the user's browser using the Java Virtual Machine (JVM). बाइट कोड जावा स्रोत कोड का संकलित रूप होता है ( .class ...
Read more

The Internet and Java इंटरनेट और जावा का सम्बन्ध

-
🌐 What is Internet?  इंटरनेट क्या है? The Internet is a vast global network that connects millions of computers worldwide. It is considered a network of networks — consisting of public, private, academic, commercial, and local to global systems. इंटरनेट एक विशाल नेटवर्क है जो दुनिया भर के कंप्यूटरों को जोड़ता है। इसे कई नेटवर्क का नेटवर्क कहा जाता है — जिसमें सार्वजनिक, निजी, शैक्षणिक, व्यावसायिक और स्थानीय से वैश्विक नेटवर्क सम्मिलित होते हैं। 📡 How Internet Works  इंटरनेट कैसे कार्य करता है? The Internet works on packet routing technology which uses Internet Protocol (IP) and Transmission Control Protocol (TCP) . It connects a variety of systems through electronic, wireless, and optical networks. इंटरनेट पैकेट रूटिंग तकनीक का उपयोग करता है जो इंटरनेट प्रोटोकॉल (IP) और ट्रांसपोर्ट कंट्रोल प्रोटोकॉल (TCP) पर आधारित है। यह इलेक्ट्रॉनिक, वायरलेस और ऑप्टिकल नेटवर्क से विभिन्न प्रणालियों को जोड़ता है। ✉️ Internet Uses  इंटरनेट का उपयोग The Internet is use...
Read more