HTML Complete Learning – Basic to Advanced

📘 HTML Complete Learning File

यह फाइल HTML सीखने के लिए बनाई गई है। हर टैग का उदाहरण और समझाना शामिल है।

1️⃣ HTML क्या है?

HTML का पूरा नाम Hyper Text Markup Language है। यह वेब पेज बनाने की भाषा है।

2️⃣ HTML Structure


<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

3️⃣ Heading Tags


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Heading 1

Heading 2

Heading 3

4️⃣ Paragraph और Line Break


<p>यह पैराग्राफ है</p>
<br>
नई लाइन

यह पैराग्राफ है

नई लाइन

5️⃣ Text Formatting


<b>Bold</b>
<i>Italic</i>
<u>Underline</u>

Bold | Italic | Underline

6️⃣ Link (Anchor)


<a href="https://google.com">Google</a>

Google

7️⃣ Image


<img src="image.jpg" width="150">

📌 src में इमेज का नाम होगा

8️⃣ List


<ul>
<li>Apple</li>
</ul>

Apple
Banana

9️⃣ Table


<table border="1">
<tr><th>Name</th></tr>
<tr><td>Ravi</td></tr>
</table>

Name
Ravi

🔟 div और span


<div>यह बॉक्स है</div>
<span>छोटा टेक्स्ट</span>

यह div है

यह span है

1️⃣1️⃣ Form और Input


<input type="text">
<input type="password">

1️⃣2️⃣ Textarea


<textarea></textarea>

1️⃣3️⃣ Select (Dropdown)


<select>
<option>कक्षा 1</option>
</select>

1️⃣4️⃣ iframe


<iframe src="https://example.com"></iframe>

1️⃣5️⃣ Audio / Video


<audio controls></audio>
<video controls></video>

1️⃣6️⃣ details / summary

उत्तर देखें

यह सही उत्तर है

1️⃣7️⃣ Semantic Tags


<header>Header</header>
<section>Section</section>
<footer>Footer</footer>

1️⃣8️⃣ Comment


<!-- यह नहीं दिखेगा -->

🎯 अब आप HTML जान चुके हैं

Website बना सकते हैं
Quiz / Form बना सकते हैं
Blogger में HTML डाल सकते हैं

अब CSS और JavaScript बहुत आसान लगेगी ✅

CSS सीखें – सरल हिंदी में

🎨 CSS सीखें – बिल्कुल आसान हिंदी में

यह फाइल ऐसे बनाई गई है कि जो भी इसे पढ़े, वह **कोड + मतलब + उदाहरण** एक साथ समझ सके।

1️⃣ CSS क्या है?

CSS का पूरा नाम Cascading Style Sheets है। HTML से हम सिर्फ ढांचा बनाते हैं, और CSS से उस ढांचे को **सुंदर (Design)** बनाते हैं।

👉 CSS से हम तय करते हैं:

रंग (Color)
आकार (Size)
जगह (Spacing)
लेआउट (Layout)

2️⃣ CSS लगाने का पहला तरीका – Inline CSS

Inline CSS का मतलब है – सीधे HTML टैग के अंदर style लिखना


<p style="color:red;">
यह लाल रंग का टेक्स्ट है
</p>

यह लाल रंग का टेक्स्ट है

🧠 समझिए: यहाँ color:red का मतलब है → टेक्स्ट का रंग लाल कर दो

3️⃣ Internal CSS (सबसे ज़्यादा इस्तेमाल)

Internal CSS को हम <style> टैग के अंदर लिखते हैं और वह पूरे पेज पर लागू हो जाती है।


<style>
p {
   color: blue;
}
</style>

👉 इसका मतलब:

p = पैराग्राफ
color: blue = रंग नीला

यह पैराग्राफ नीले रंग में है

4️⃣ Color और Background

CSS में रंग देने के लिए दो मुख्य property होती हैं:

color → टेक्स्ट का रंग
background-color → पीछे का रंग


p {
  color: white;
  background-color: black;
}

सफेद टेक्स्ट, काला बैकग्राउंड

5️⃣ Font Size और Text Align

टेक्स्ट का साइज और उसकी पोज़िशन तय करने के लिए:


font-size: 20px;
text-align: center;

👉 मतलब:

20px = टेक्स्ट बड़ा
center = बीच में

यह बड़ा और बीच में लिखा टेक्स्ट है

6️⃣ Padding और Margin (बहुत ज़रूरी)

Padding = बॉक्स के अंदर की जगह Margin = बॉक्स के बाहर की जगह


padding: 20px;
margin: 15px;

इस बॉक्स के अंदर padding है और बाहर margin

7️⃣ Border (किनारा बनाना)


border: 3px solid black;

👉 मतलब:

3px = मोटाई
solid = सीधी लाइन
black = काला रंग

यह बॉर्डर वाला बॉक्स है

8️⃣ Width और Height

किसी बॉक्स की चौड़ाई और ऊँचाई तय करने के लिए:


width: 200px;
height: 100px;

निश्चित साइज का बॉक्स

9️⃣ Button और Hover Effect

Hover का मतलब है – जब माउस ऊपर जाए तब स्टाइल बदले


button:hover {
  background: red;
}

🎯 अब आपको CSS में यह सब समझ आ जाना चाहिए

CSS क्या है
Color कैसे बदलते हैं
Size और Spacing
Box कैसे बनता है
Button effect

अगर यह फाइल आपको समझ आ गई, तो JavaScript बहुत आसान लगेगी 😊

CSS Complete Part-2 (Hindi Explanation)

🎨 CSS Complete Part-2 (छूटे हुए सभी ज़रूरी टॉपिक)

यह फाइल उन सभी CSS पॉइंट्स को कवर करती है जो शुरुआती फाइलों में नहीं आ पाए थे।

1️⃣ overflow (Content बाहर जाए तो?)

जब किसी बॉक्स का कंटेंट उसकी सीमा से बाहर निकल जाए तो overflow तय करता है क्या करना है।


overflow: hidden;
overflow: scroll;

यह बहुत लंबा टेक्स्ट है जो बॉक्स से बाहर जा रहा है

2️⃣ float और clear

float से किसी बॉक्स को बाएँ या दाएँ तैराया जाता है।


float: left;
clear: both;

Left

Right

3️⃣ z-index (कौन ऊपर दिखे?)

जब बॉक्स एक-दूसरे पर चढ़ें, तो z-index तय करता है कौन ऊपर रहेगा।


z-index: 10;

4️⃣ box-sizing (Size का सही गणित)

box-sizing: border-box padding और border को width में ही जोड़ देता है।


box-sizing: border-box;

5️⃣ opacity (पारदर्शिता)


opacity: 0.5;

यह हल्का दिखाई देगा

6️⃣ cursor (Mouse का रूप)


cursor: pointer;

यहाँ माउस बदल जाएगा

7️⃣ transition (Smooth effect)

transition से बदलाव अचानक नहीं, धीरे-धीरे होता है।


transition: 0.5s;

Hover करें

8️⃣ transform (घुमाना / बड़ा करना)


transform: scale(1.2);