Chapter 8: Web Publishing & Browsing — Website को Live करना

🔹 Components of Web Publishing (एक नज़र में)

1. Website Creation: HTML, CSS, JS से pages design करना।
2. Web Hosting: Website को server पर upload करना।
3. Domain Name: Website का नाम (जैसे www.example.com)।
4. File Transfer: FTP से files server पर भेजना।
5. Maintenance: Regular update व error fixing।

🔹 Why SGML? (क्यों आवश्यक)

• Large व long-lived documents (manuals, standards, books) की consistent structure तय करना।
• अलग-अलग systems/softwares में interchange व archival आसान बनाना।
• Presentation से अधिक structure/meaning पर जोर — same content से कई outputs (web, print, PDF) बन सकते हैं।

🔹 SGML Document — Core Building Blocks

📄 Structure of an SGML Document — तीन हिस्से

1. Prolog: DTD/Entity declarations
2. Document Instance: Actual content (elements/attributes)
3. Epilog: Optional end declarations

🧩 Mini Example (DTD + Document)

<!DOCTYPE BOOK [
  <!ELEMENT BOOK    (TITLE, AUTHOR+, CHAPTER+)>
  <!ELEMENT TITLE   (#PCDATA)>
  <!ELEMENT AUTHOR  (#PCDATA)>
  <!ELEMENT CHAPTER (CHTITLE, P+)>
  <!ELEMENT CHTITLE (#PCDATA)>
  <!ELEMENT P       (#PCDATA)>
]>

<BOOK>
  <TITLE>Learning SGML</TITLE>
  <AUTHOR>Ravi Kumar</AUTHOR>

  <CHAPTER>
    <CHTITLE>Introduction</CHTITLE>
    <P>SGML is a meta-language for defining markup.</P>
    <P>HTML and XML are derived from SGML concepts.</P>
  </CHAPTER>
</BOOK>

🔎 ऊपर DTD allowed structure define करता है; नीचे instance उसी structure को follow करता है।

⚖️ SGML vs HTML vs XML

✅ Advantages

• Separation of content & presentation — same content से multiple outputs (Web/Print/PDF)।
• Validation via DTD — documents structurally correct रहते हैं।
• Reusability & Consistency — बड़े manual/technical docs में uniformity।

⚠️ Limitations

• Complex specification; tooling setup कठिन (modern dev के लिए heavy)।
• Web-only use के लिए overkill; HTML/XML पर्याप्त रहते हैं।

🔄 Typical Workflow (Production Publishing)

1. Design DTD — organization के document structure rules तय करें।
2. Authoring — SGML-aware editor में content लिखें (DTD-guided)।
3. Validate — DTD के against check करें (errors fix करें)।
4. Transform — Output के लिए stylesheets/processors (HTML/PDF/Print)।
5. Publish — web server/print system पर deploy करें।

🔹 Need for Web Hosting (क्यों आवश्यक)

• Website को 24×7 इंटरनेट पर उपलब्ध रखने के लिए।
• High-speed servers पर fast access के लिए।
• Data backup व security management के लिए।
• Custom domain (www.example.com) connect करने के लिए।

🔹 Components of Web Hosting

• Web Server: Physical/virtual computer जो website files store करता है।
• Domain Name: Website का पता (जैसे www.google.com)।
• DNS: Domain name को server IP address से map करता है।
• Hosting Space: Disk storage जहाँ files रहती हैं।
• Bandwidth: Data transfer की capacity।
• Control Panel: cPanel/Plesk — website manage करने के tools का dashboard।

🔹 Types of Web Hosting

🪜 Hosting Process (होस्टिंग की प्रक्रिया)

1. Domain name purchase करें (GoDaddy, Namecheap)।
2. Hosting plan चुनें (Shared/VPS/Cloud)।
3. Files upload करें (FTP या cPanel से)।
4. DNS configure करें ताकि domain server से जुड़ जाए।
5. Website test करें कि सब सही काम कर रहा है या नहीं।

🖥️ Common Hosting Control Panels

📤 FTP (File Transfer Protocol)

🌐 Popular Hosting Providers

• Hostinger — Budget-friendly shared hosting।
• AWS (Amazon Web Services) — Cloud-based scalable hosting।
• Bluehost — WordPress के लिए optimized।
• GoDaddy — Domain + hosting combo।
• Netlify/Vercel — Static site hosting (developers के लिए)।

🔹 Need for Document Interchange Standards

• विभिन्न operating systems/applications के बीच compatibility बनाए रखना।
• Data loss व format corruption से बचाव।
• Long-term storage व sharing को आसान बनाना।
• Documents को printing या web publishing के लिए standardized करना।

🔹 Major Document Interchange Standards

🔄 File Conversion & Interchange Process

1. Document को create करें (Word, Writer, या Editor)।
2. Export/Save As के ज़रिए standardized format चुनें (PDF, HTML, XML)।
3. File को दूसरे system/software में open करें।
4. Formatting व structure same रहना चाहिए।

✅ Advantages

• Data exchange व interoperability आसान।
• Uniform formatting across platforms।
• Content consistency maintained रहती है।
• Automation व data sharing में सुविधा।

⚠️ Limitations

• कई बार proprietary formats (जैसे DOCX) सभी software में compatible नहीं होते।
• Conversion के दौरान formatting loss हो सकता है।
• File size बढ़ सकता है (PDF/XML में metadata के कारण)।

🌍 Real-world Use Cases

• Web Development: HTML/XML content structure के लिए।
• Corporate Reports: PDF में standardized sharing।
• Government Data Exchange: XML-based e-Governance documents।
• Printing & Publishing: SGML व PDF के माध्यम से publishing workflow।

🔄 Workflow of Web Publishing

🛠️ Supporting Technologies

• HTML/CSS/JS: Web page design के लिए।
• FTP/SFTP: Files transfer के लिए।
• CMS: WordPress, Joomla — content management।
• Database: MySQL/MongoDB — dynamic content storage।
• Analytics: Google Analytics — traffic monitor करना।

✅ Advantages of Web Publishing

• Global reach — दुनिया में कोई भी access कर सकता है।
• Cost-effective advertising platform।
• Instant updates व real-time interaction।
• Environment-friendly (paperless communication)।

⚠️ Disadvantages

• Continuous maintenance व hosting cost।
• Security threats (hacking, malware)।
• Technical knowledge की आवश्यकता।

🔹 Need for Document Management

• Website के सभी files व्यवस्थित रखने के लिए।
• Regular updates व maintenance आसान बनाने के लिए।
• Version conflicts व data loss से बचने के लिए।
• Team collaboration व editing simplify करने के लिए।
• Security व backup सुनिश्चित करने के लिए।

📁 Ideal Folder Structure

/mywebsite
 ├── index.html
 ├── about.html
 ├── /css
 │    └── style.css
 ├── /js
 │    └── script.js
 ├── /images
 │    └── logo.png
 ├── /docs
 │    └── privacy-policy.pdf
 └── /backup
      └── old-version.zip

🔹 Components of Document Management System (DMS)

🔀 Version Control in Web Publishing

Version control system (VCS) जैसे Git developers को यह देखने देता है कि किसने कौन-सा change किया, व जरूरत पड़ने पर पुराना version restore किया जा सकता है।

• Popular Tools: Git, GitHub, Bitbucket, GitLab
• Benefits: Track changes, collaborate easily, rollback facility

💾 Backup and Recovery

• Types: Manual & Automated
• Storage Options: Local drive, Cloud storage (Google Drive, Dropbox), cPanel backups
• Frequency: Daily/Weekly depending on site activity

🧰 Document Management Tools

✅ Advantages

• Organization व easy access
• Faster updates व teamwork
• Data security व consistency
• Reduced redundancy व error chances

⚠️ Limitations

• Setup व maintenance के लिए technical knowledge चाहिए।
• Large systems के लिए cost व configuration बढ़ जाती है।
• Cloud-based tools में privacy concerns हो सकते हैं।

🔹 Key Considerations in Web Design

🎨 Design Principles (डिज़ाइन के मूल सिद्धांत)

📱 Responsive Design

Responsive Design ensure करता है कि web page हर screen size पर सही दिखे — इसके लिए CSS media queries, flexbox, व grid layout का उपयोग होता है।

@media (max-width: 768px) {
  body { font-size: 16px; }
  .container { flex-direction: column; }
}

🎨 Color and Typography

• Color psychology का उपयोग करें (blue = trust, green = growth)।
• Text hierarchy (H1 → H2 → Paragraph) follow करें।
• Font family readable हो (Segoe UI, Roboto, Arial)।
• High contrast text-background readability बढ़ाता है।

🧩 Web Page Elements

✅ Best Practices

• Mobile-first responsive layout बनाएँ।
• Fast loading images व optimized code रखें।
• Clear call-to-action (CTA) buttons दें।
• Consistent color palette व readable font चुनें।
• Regular testing करें — desktop + mobile दोनों पर।

🔄 Working of a Search Engine (3 Phases)

1. Crawling: Web crawler (spider/bot) web pages explore करता है व नए links खोजता है।
2. Indexing: प्राप्त pages database (index) में store किए जाते हैं ताकि search जल्दी हो सके।
3. Searching & Ranking: User query पर indexed data से सबसे relevant results दिखाए जाते हैं।

🔹 Components of a Search Engine

🌐 Popular Search Engines vs Meta Search Engines

📈 Search Engine Optimization (SEO) Basics

SEO वह प्रक्रिया है जिससे website search engines में higher rank पर आती है — यह web publishing का महत्वपूर्ण हिस्सा है।

• On-Page SEO: Title tags, meta description, keywords, content quality।
• Off-Page SEO: Backlinks, social media promotion।
• Technical SEO: Site speed, mobile responsiveness, sitemap।

✅ Advantages

• Search Engines: Fast, accurate, regularly updated, personalized results।
• Meta Search Engines: Multiple sources से combined broader coverage।

⚠️ Limitations

• Search Engines — biased या filtered results possible।
• Meta Search Engines — duplicate results व low relevance।

📜 History & Evolution

🔹 Components of WWW

• Web Browser: Client application जो web pages access करता है (Chrome, Firefox)।
• Web Server: जहाँ web pages store रहते हैं।
• Web Pages: HTML documents (text, images, videos)।
• Hyperlinks: अन्य documents से जुड़ने वाले clickable links।
• Protocols: HTTP/HTTPS — data transfer का तरीका।

🔄 How WWW Works

1. User browser में URL टाइप करता है।
2. Browser HTTP request भेजता है web server को।
3. Server requested web page (HTML file) भेजता है।
4. Browser page को render करके user को दिखाता है।

✨ Features of WWW

• Global information sharing system।
• Hypertext-based interconnected documents।
• Multimedia content (text, audio, video, animation) support।
• Hyperlinks से easy navigation।
• Platform independent access — किसी भी device/browser से।
• Client-server architecture पर आधारित।

✅ Advantages

• Easy व instant access to global information।
• Multimedia communication support करता है।
• Education, business, research के लिए उपयोगी।
• Hyperlink structure से quick navigation।

⚠️ Limitations

• Information overload व data accuracy की कमी।
• Security व privacy issues (phishing, data theft)।
• Internet dependency — बिना connection के access नहीं।

⚖️ WWW vs Internet

🔹 Main Functions of a Web Browser

• Rendering: HTML, CSS, JS को visual form में दिखाना।
• Navigation: URLs/links के ज़रिए pages के बीच move करना।
• Caching: बार-बार visit होने वाले pages temporary memory में store करना।
• Bookmarking: Favorite sites को future access के लिए save करना।
• Downloading: Web content (files, images, videos) system में store करना।
• Security: HTTPS encryption, popup-blocking, privacy controls।
• Extensions/Add-ons: Browser की functionality बढ़ाने के लिए plugins।

🏗️ Components of a Web Browser

🔹 Types of Web Browsers

🌐 Popular Browsers & Rendering Engines

⌨️ Common Browser Shortcuts

✅ Advantages

• Easy access to websites व online resources।
• Multimedia व interactivity support करता है।
• HTTPS व privacy options से secure browsing।
• Bookmarking व tabbed browsing usability बढ़ाते हैं।

⚠️ Limitations

• High memory usage (multiple tabs के साथ)।
• Privacy risks (tracking cookies, ads)।
• पुरानी websites के साथ compatibility issues।

📜 History & Versions

🔄 Working of HTTP

1. User browser में URL डालता है।
2. Browser HTTP request भेजता है web server को।
3. Server request के अनुसार HTML/CSS/JS data return करता है।
4. Browser response को render करके page display करता है।

Client (Browser)  →  HTTP Request  →  Server
Client (Browser)  ←  HTTP Response ←  Server

📨 HTTP Message Structure

GET /index.html HTTP/1.1
Host: boostingskills.com

🔹 Common HTTP Methods

🔢 Common HTTP Status Codes

🔒 HTTPS (Secure HTTP)

HTTPS HTTP का secure version है जो SSL/TLS encryption उपयोग करता है — डेटा को सुरक्षित रखता है ताकि कोई तीसरा व्यक्ति उसे intercept न कर सके।

🔹 Types of Web Publishing Tools

⚙️ Functions of Web Publishing Tools

• Web pages design करना (text, images, links, multimedia)।
• HTML, CSS, JavaScript code generate करना।
• FTP के माध्यम से website upload करना।
• SEO tags, metadata व responsive design सेट करना।
• Website updates व backups manage करना।

📋 Examples and Features

✅ Advantages

• Beginners के लिए आसान website creation।
• Pre-designed templates व visual editing।
• Automatic HTML/CSS code generation।
• Faster deployment व built-in SEO options।

⚠️ Limitations

• Limited customization (खासकर free builders में)।
• CMS plugins पर dependency बढ़ती है।
• कुछ tools costly या hosting-bound होते हैं।

• SGML = ISO 8879 meta-language; HTML=SGML application, XML=SGML-inspired।
• Web Hosting: Shared(cheap)/VPS/Dedicated(full)/Cloud(scalable); FTP Port=21।
• Document Standards: HTML(web), XML(data), PDF(print), SGML(meta-standard)।
• Publishing Components: Design → Domain → Hosting → FTP → Maintenance → SEO।
• Document Management: Organize + Version Control (Git) + Backup + Access Control।
• Design Principles: Balance, Contrast, Alignment, Repetition, White Space।
• Search Engines: Crawling → Indexing → Ranking; Meta search=results combine करते हैं।
• WWW: Tim Berners-Lee, 1991, CERN; HTTP/HTTPS protocol; WWW ≠ Internet।
• Browsers: Chrome=Blink, Firefox=Gecko, Safari=WebKit; पहला browser Mosaic(1993)।
• HTTP: Port 80 (HTTPS=443); Methods GET/POST/PUT/DELETE; stateless protocol।
• Publishing Tools: WordPress(CMS), FileZilla(FTP), cPanel(hosting panel)।

❓ A. Multiple Choice Questions (50)

📝 B. 15 Theory Questions (Short Answers)

1. SGML क्या है? HTML से इसका संबंध बताइए।SGML (Standard Generalized Markup Language) ISO 8879 standard के अंतर्गत आने वाला meta-language है जो documents की structure व meaning define करता है। HTML इसी का एक application है — यानी SGML से derive हुई एक specific markup language।
2. Web Hosting क्या है? इसके 4 प्रकार लिखिए।Web Hosting एक service है जो website files को server पर store करके उसे इंटरनेट पर accessible बनाती है। प्रकार — Shared Hosting, VPS Hosting, Dedicated Hosting, Cloud Hosting।
3. FTP क्या है? इसका उपयोग समझाइए।FTP (File Transfer Protocol) local computer से files को remote web server पर upload/download करने के लिए उपयोग होता है। Port 21 पर काम करता है; FileZilla जैसे tools से इसका उपयोग किया जाता है।
4. Document Interchange Standards क्यों ज़रूरी हैं?ये अलग-अलग computer systems व software के बीच documents को consistent format में share करना संभव बनाते हैं, जिससे compatibility बनी रहती है व data loss नहीं होता। उदाहरण — HTML, XML, PDF।
5. Web Publishing के मुख्य components लिखिए।Website Creation, Domain Registration, Web Hosting, File Transfer (FTP), Maintenance, Promotion & SEO — ये सभी मिलकर website को design से live तक ले जाते हैं।
6. Document Management क्या है? इसके key elements लिखिए।Document Management website की सभी files को organize, version-control व backup रखने की प्रक्रिया है। Key elements — Storage, Version Control (Git), Access Control, Backup & Recovery।
7. Web Design के कोई 3 principles समझाइए।Balance (visual elements का बराबर weight), Contrast (text-background का अंतर readability देता है), White Space (खाली जगह content को स्पष्ट बनाती है)।
8. Search Engine कैसे काम करता है?Search Engine तीन चरणों में काम करता है — Crawling (crawler pages explore करता है), Indexing (pages को database में store करता है), Ranking (query के अनुसार relevant results दिखाता है)।
9. Search Engine और Meta Search Engine में अंतर बताइए।Search Engine खुद web crawl करके अपना index बनाता है (जैसे Google)। Meta Search Engine खुद crawl नहीं करता, बल्कि कई search engines के results combine करके दिखाता है (जैसे Dogpile)।
10. WWW क्या है? इसका आविष्कार किसने किया?World Wide Web इंटरनेट का वह हिस्सा है जहाँ hyperlinked web pages HTTP/HTTPS protocol से access किए जाते हैं। इसे Tim Berners-Lee ने 1991 में CERN में बनाया।
11. WWW और Internet में अंतर लिखिए।Internet computers का global network है (TCP/IP protocol, 1969 से)। WWW उस network पर चलने वाली hyperlinked documents की system है (HTTP/HTTPS protocol, 1991 से) — WWW Internet का एक हिस्सा है, पूरा Internet नहीं।
12. Web Browser क्या है? इसके कोई 3 functions लिखिए।Web Browser एक software है जो web pages को access व display करता है। Functions — Rendering (HTML/CSS/JS दिखाना), Navigation (links से move करना), Caching (pages temporary store करना)।
13. HTTP क्या है? इसके मुख्य methods लिखिए।HTTP (HyperText Transfer Protocol) browser व server के बीच data transfer का protocol है (port 80, stateless)। Methods — GET (data लेना), POST (data भेजना), PUT (update करना), DELETE (हटाना)।
14. HTTP और HTTPS में अंतर बताइए।HTTP data को plain text (unencrypted) में भेजता है, port 80 पर काम करता है। HTTPS SSL/TLS से data encrypt करता है, port 443 पर काम करता है — अधिक सुरक्षित है।
15. Web Publishing Tools के कोई 4 उदाहरण व उनका काम लिखिए।WordPress (CMS — बिना coding website manage), FileZilla (FTP — files upload/download), cPanel (hosting control panel — server management), Adobe Dreamweaver (visual web design tool)।

ये questions Web Publishing & Browsing के सबसे ज़्यादा पूछे जाने वाले सवाल हैं — छोटे व सटीक जवाबों के साथ। O Level व viva दोनों के लिए perfect rapid-revision tool।

🧩 General Basics

🌍 Domain, Hosting & Terminology

🔍 Search Engines & Meta Search

🌐 WWW और Web Browsers

⚙️ HTTP & HTTPS

🧰 Web Publishing Tools

💡 Extra Important Viva Questions

🏁 Quick Revision Table