वेब कैसे चलता है: क्लाइंट, सर्वर, URL और HTTP
वर्ल्ड वाइड वेब आपस में जुड़े पेजों का बड़ा जाल है, जो सर्वर नाम के कंप्यूटरों पर रखे होते हैं। तुम्हारा ब्राउज़र क्लाइंट है।
- URL: पेज का पता, जैसे
https://example.org/news/index.html। इसमें प्रोटोकॉल (https), डोमेन नाम और पाथ होते हैं। - HTTP/HTTPS: माँगने और जवाब देने के नियम। ब्राउज़र GET अनुरोध भेजता है; सर्वर स्टेटस कोड (200 = ठीक, 404 = नहीं मिला) और फ़ाइलें भेजता है।
- DNS डोमेन नाम को सर्वर के IP पते में बदलता है।
- हाइपरलिंक एक पेज को दूसरे से जोड़ता है। एक डोमेन के जुड़े पेज मिलकर वेबसाइट बनाते हैं।
सर्च इंजन पेजों के शब्द जमा करके खोज पर सूची दिखाते हैं। सही शब्द लिखो, वाक्यांश के लिए quotes लगाओ, और भरोसा करने से पहले देखो कि पेज किसने लिखा है।
HTML: पेज का ढाँचा
HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) टेक्स्ट के हिस्सों पर टैग लगाती है। ज़्यादातर टैग जोड़े में होते हैं: <p>text</p>। टैग में एट्रिब्यूट हो सकते हैं, जैसे <a href="page2.html">।
हर पेज का ढाँचा
<!DOCTYPE html>, फिर <html> के अंदर <head> (title, CSS का लिंक) और <body> (जो दिखता है)।
आम टैग
- हेडिंग
h1–h6, पैराग्राफ़p, लाइन ब्रेकbr - लिंक
a href, चित्रimg src alt - सूची
ul,ol,li; टेबलtable,tr,th,td - फ़ॉर्म
form,input,button,label - लेआउट (सिमैंटिक) टैग:
header,nav,main,aside,footer
CSS: सजावट और लेआउट
CSS (कैस्केडिंग स्टाइल शीट्स) बताती है कि HTML कैसा दिखे। एक नियम में सिलेक्टर और डिक्लेरेशन होते हैं: h1 { color: navy; font-size: 32px; }।
- सिलेक्टर: टैग (
p), क्लास (.card), id (#top)। - बॉक्स मॉडल: हर एलिमेंट एक डिब्बा है: content, padding, border, margin।
- लेआउट:
display: flexयाgridसे डिब्बे पंक्ति और कॉलम में लगते हैं। - CSS अलग फ़ाइल (
style.css) में रखो, ताकि सारे पेज एक ही स्टाइल बाँटें।
रिस्पॉन्सिव डिज़ाइन
मीडिया क्वेरी छोटी स्क्रीन पर स्टाइल बदलती है: @media (max-width: 600px) { .cols { flex-direction: column; } }। viewport मेटा टैग भी लगाओ।
JavaScript, पब्लिश करना और अच्छी आदतें
JavaScript ब्राउज़र के अंदर चलती है। यह इवेंट (क्लिक, टाइपिंग) पर काम करती है, DOM (पेज का ऑब्जेक्ट-पेड़) से टेक्स्ट और स्टाइल बदलती है, और फ़ॉर्म भेजने से पहले जाँचती है।
btn.addEventListener("click", () => { n++; out.textContent = n; });
फ़्रंट एंड और बैक एंड
ब्राउज़र में चलने वाले HTML, CSS, JavaScript फ़्रंट एंड हैं। सर्वर के प्रोग्राम और डेटाबेस बैक एंड हैं। साइट पब्लिश करने के लिए फ़ाइलें वेब होस्ट पर अपलोड करो और डोमेन जोड़ो।
अच्छी आदतें
- पहले योजना: उद्देश्य, दर्शक, साइट मैप और स्केच (वायरफ़्रेम)।
- सुगमता: चित्रों पर alt टेक्स्ट, अच्छा कंट्रास्ट, सही हेडिंग।
- गति: छोटे चित्र; फ़ोन और कंप्यूटर दोनों पर जाँचो।
- सुरक्षा और नियम: HTTPS, फ़ॉर्म इनपुट पर अंधा भरोसा नहीं, चित्रों-लेखों का कॉपीराइट मानो।
मुख्य सूत्र और परिभाषाएँ
- HTML = ढाँचा (टैग और एलिमेंट)
- CSS = सजावट (selector { property: value; })
- JavaScript = व्यवहार (इवेंट, DOM)
- URL = प्रोटोकॉल + डोमेन + पाथ
- बॉक्स मॉडल = content + padding + border + margin
- स्टेटस कोड: 200 OK, 404 Not Found, 500 Server Error
हल किए गए उदाहरण
1. "मेरा स्कूल" हेडिंग और about.html का लिंक "हमारे बारे में" टेक्स्ट के साथ HTML में लिखो।
<h1>मेरा स्कूल</h1> फिर <a href="about.html">हमारे बारे में</a>। href में पता है; टैग के बीच का टेक्स्ट वह है जिस पर क्लिक करते हैं।
2. ऐसा CSS नियम लिखो जिससे हर पैराग्राफ़ गहरा स्लेटी, 18 px और अंदर 10 px जगह वाला हो।
p { color: #333; font-size: 18px; padding: 10px; } सिलेक्टर p सभी पैराग्राफ़ चुनता है; हर डिक्लेरेशन property: value; है।
3. डिब्बे की width 200 px, padding 10 px, border 2 px, margin 5 px (हर ओर) है। margin छोड़कर स्क्रीन पर चौड़ाई?
200 + 2×10 + 2×2 = 224 px। margin सहित 224 + 2×5 = 234 px जगह लेता है।
4. कंप्यूटर पर 3 कॉलम हैं, पर फ़ोन पर बहुत पतले हो जाते हैं। ठीक करो।
कॉलम को flex कंटेनर में रखो और जोड़ो: @media (max-width: 600px) { .cols { flex-direction: column; } }। 600 px से कम पर कॉलम एक के नीचे एक आ जाएँगे। viewport मेटा टैग भी जोड़ो।
आम गलतियाँ
- बंद करने वाला टैग भूलना, जैसे <p> लिखा पर </p> नहीं, जिससे लेआउट बिगड़ता है।
- हर टैग पर अलग स्टाइल लिखना, एक CSS फ़ाइल न बनाना; फिर बदलाव में घंटों लगते हैं।
- चित्रों पर alt टेक्स्ट न देना; स्क्रीन रीडर और सर्च इंजन चित्र नहीं समझ पाते।
- JavaScript और Java को एक ही भाषा समझना। दोनों अलग हैं।