इस chapter में हम सीखेंगे कि इंटरनेट पर वेब पेज कैसे बनाए, प्रबंधित और प्रकाशित किए जाते हैं। इसमें शामिल होंगे — SGML, Web Hosting, Document Standards, WWW, Browsers, HTTP और Web Publishing Tools जैसी मुख्य अवधारणाएँ जो किसी भी web developer के लिए जरूरी हैं।
Web Publishing का अर्थ है — किसी Website या Web Page को इंटरनेट पर प्रकाशित करना ताकि वह किसी भी उपयोगकर्ता द्वारा Web Browser के माध्यम से देखा जा सके। Browsing का मतलब है — Internet पर उपलब्ध जानकारी को Web Browser के माध्यम से खोजना और देखना।
“Web Publishing refers to the process of creating, uploading, and maintaining web pages on the Internet so that users can access them through web browsers.”
🌐 Example: आपने HTML और CSS से एक Portfolio Website बनाई। उसे Hostinger या GoDaddy पर upload किया ताकि कोई भी user “www.yourname.com” से देख सके।
SGML एक standard language है जो documents की structure और formatting define करने के लिए उपयोग होती है। HTML (HyperText Markup Language) SGML की subset language है।
Web Hosting का अर्थ है website को Internet पर accessible बनाना। Hosting providers server space देते हैं जहाँ आपकी HTML, CSS, और images जैसी files store की जाती हैं।
📤 Example: आपने FileZilla FTP tool से अपनी “index.html” file को Hostinger server पर upload किया।
Document Interchange Standards का उपयोग विभिन्न computer systems के बीच documents को share करने के लिए किया जाता है। ये standard format तय करते हैं ताकि document का structure और content safe रहे।
Document Management का अर्थ है website के सभी files (HTML, CSS, JS, Images, etc.) को organize और maintain करना। इससे update करना आसान होता है और error कम होते हैं।
🎨 Example: Mobile-friendly layout के लिए CSS Flexbox या Grid का प्रयोग करें।
Search Engines web pages को crawl और index करते हैं ताकि user आसानी से information खोज सके। Meta Search Engines कई search engines के results को combine करते हैं।
WWW Internet का वो हिस्सा है जहाँ interconnected web pages होते हैं जिन्हें hypertext links के द्वारा access किया जाता है। यह Tim Berners-Lee द्वारा 1991 में बनाया गया था।
Browser एक software application है जो web pages को interpret और display करता है। यह HTML, CSS, और JavaScript को process करता है ताकि content interactive बने।
HTTP एक communication protocol है जो web browser और server के बीच data transfer के लिए उपयोग होता है।
📡 Example: जब आप browser में https://boostingskills.com टाइप करते हैं, तो HTTP protocol server से data लाता है।
Web Publishing tools की मदद से websites को design, upload और manage किया जाता है। ये manual coding और automated uploading दोनों provide करते हैं।
| Concept | Description |
|---|---|
| Web Publishing | Process of uploading web pages to a server |
| SGML | Base language from which HTML is derived |
| Hosting | Making website accessible online |
| Document Management | Organizing and maintaining web files |
| WWW | Collection of hyperlinked documents on the Internet |
| Browser | Software to view and interact with web pages |
| HTTP | Protocol for communication between browser and server |
SGML एक international standard (ISO 8879) है जो documents की structure, content और presentation को describe करने के लिए meta-language प्रदान करता है। इसे आप “languages बनाने की भाषा” समझ सकते हैं— इसी से आगे चलकर HTML और XML बनीं।
“SGML is a meta-markup language standardized by ISO 8879 for defining the structure and meaning of electronic documents via DTD (Document Type Definition), elements, attributes and entities.”
BOOK, CHAPTER, P).lang, id).©, या file references).Structure of an SGML Document — तीन हिस्से होते हैं:
नीचे एक छोटा SGML उदाहरण दिया है—पहले DTD, फिर उसका instance। इसे पढ़कर flow समझें:
<!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>
<AUTHOR>Pooja Sharma</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 करता है।
| Feature | SGML | HTML | XML |
|---|---|---|---|
| Type | Meta-language (framework) | SGML का application | SGML-inspired simplified meta-language |
| Primary Use | Complex, long-term docs | Web page presentation | Data exchange/structure |
| Strictness | Flexible, complex rules | Lenient (older HTML) | Very strict (well-formedness) |
| Learning Curve | High | Low/Medium | Medium |
Web Hosting का मतलब है अपनी website को इंटरनेट पर लाइव करना ताकि कोई भी user उसे browser के ज़रिए access कर सके। Hosting provider आपको server space देता है जहाँ आपकी site की सभी files (HTML, CSS, JS, Images, Videos) store होती हैं।
“Web Hosting is a service that allows individuals or organizations to make their websites accessible via the World Wide Web by storing them on web servers.”
🌐 Example: आपने अपनी portfolio website बनाई — “index.html”, “style.css”, “images/”। अब आप इसे Hostinger या GoDaddy के server पर upload करते हैं ताकि www.yourname.com पर दिख सके।
www.google.com)।📦 Example: Shared Hosting में आपकी site और कई अन्य sites एक ही server पर होती हैं, जबकि Dedicated Hosting में पूरा server केवल आपकी site के लिए reserved होता है।
🧩 Example: आप FileZilla tool से public_html folder में अपनी HTML files upload करते हैं।
FTP एक protocol है जिससे हम अपनी local computer की files को remote web server पर upload या download करते हैं।
📤 Example: FileZilla में host, username, password डालकर आप “index.html” upload कर सकते हैं।
| Type | Cost | Speed | Control | Best For |
|---|---|---|---|---|
| Shared | Low | Medium | Limited | Beginners |
| VPS | Medium | High | Good | Growing Websites |
| Dedicated | High | Very High | Full | Large Businesses |
| Cloud | Flexible | Very High | High | Modern Apps |
जब अलग-अलग systems या applications के बीच documents share किए जाते हैं, तो यह ज़रूरी होता है कि उनका structure, format और content एक समान तरीके से समझा जा सके। इसी उद्देश्य के लिए बनाए गए हैं — Document Interchange Standards।
“Document Interchange Standards are a set of rules and formats that allow documents to be exchanged and interpreted consistently across different computer systems and software applications.”
🌐 Example: अगर आपने MS Word में एक file बनाई है और कोई user उसे Google Docs में खोलना चाहता है — तो दोनों software को एक common format चाहिए जैसे RTF या PDF ताकि content सही दिखे।
| Standard | Full Form | Purpose | Usage Area |
|---|---|---|---|
| HTML | HyperText Markup Language | Display documents on the web | Web Pages |
| XML | eXtensible Markup Language | Data storage and transfer | Data Exchange |
| Portable Document Format | Fixed-layout viewing and printing | Print/Sharing | |
| SGML | Standard Generalized Markup Language | Define markup rules for documents | Meta-standard |
📁 Example: आप MS Word file (.docx) को Save as PDF करके
किसी भी device में वैसा ही layout पा सकते हैं।
Web Publishing का अर्थ है किसी website या web page को इंटरनेट पर प्रकाशित करना ताकि उसे कोई भी उपयोगकर्ता web browser से access कर सके। इस प्रक्रिया के मुख्य हिस्सों को Web Publishing Components कहा जाता है।
“The components of web publishing are the essential elements required to create, host, and manage a website on the Internet — including content creation, domain registration, hosting, uploading, and maintenance.”
www.example.com।
इसे किसी domain registrar (GoDaddy, Namecheap, Hostinger) से खरीदा जाता है।
🧩 Example: आपने HTML और CSS से एक Blog बनाया → GoDaddy से domain खरीदा → Hostinger पर upload किया → अब कोई भी user www.myblog.com पर visit कर सकता है।
| Component | Description | Example |
|---|---|---|
| Website Creation | HTML/CSS से pages बनाना | index.html, about.html |
| Domain Registration | Unique web address खरीदना | www.mysite.com |
| Web Hosting | Server पर files upload करना | Hostinger, GoDaddy |
| File Transfer | FTP/SFTP से data upload करना | FileZilla |
| Maintenance | Regular update और error fixing | CMS updates, backups |
किसी भी website या web project में बहुत सारी files होती हैं — जैसे HTML, CSS, JS, images, videos और documents। इन सबको सही ढंग से organize, update, version controlsecureDocument Management कहलाता है।
“Document Management in Web Publishing refers to the process of organizing, storing, versioning, and maintaining all web-related files (HTML, CSS, scripts, images, etc.) to ensure consistency, efficiency, and easy maintenance of a website.”
🧩 Example: अगर आप अपनी site में हर हफ्ते नया blog जोड़ते हैं, तो proper folder structure और backup से update करना आसान रहेगा।
एक ideal website structure नीचे दिए अनुसार होना चाहिए:
/mywebsite
├── index.html
├── about.html
├── /css
│ └── style.css
├── /js
│ └── script.js
├── /images
│ └── logo.png
├── /docs
│ └── privacy-policy.pdf
└── /backup
└── old-version.zip
Version control system (VCS) जैसे Git developers को यह देखने देता है कि किसने कौन-सा change किया, और जरूरत पड़ने पर पुराना version restore किया जा सकता है।
📂 Example: GitHub पर आपकी project repository में commits और branches से हर version का record रहता है।
Backup का मतलब है website files की duplicate copy बनाना ताकि data loss की स्थिति में restore किया जा सके। यह hosting panel या external storage दोनों में हो सकता है।
🧠 Example: WordPress media manager आपको site के सभी images और documents एक centralized जगह पर manage करने देता है।
| Component | Purpose | Example |
|---|---|---|
| Storage | Files store करना | Server, Cloud |
| Version Control | Changes track करना | Git, GitHub |
| Backup | Data recovery के लिए copy | cPanel, Google Drive |
| Access Control | File permissions manage करना | Admin roles |
| CMS Tools | Content organize करना | WordPress |
किसी भी website का success केवल उसके content पर नहीं, बल्कि उसके design और usability पर भी निर्भर करता है। एक अच्छा web design user को आसानी से navigate करने, जानकारी जल्दी पाने और visually pleasant अनुभव देने में मदद करता है।
“Web Page Design Principles are a set of rules and guidelines that help in creating user-friendly, responsive, accessible, and visually appealing websites.”
🎨 Example: किसी educational website में blue color theme, consistent fonts, और clear navigation use करना balance और unity दिखाता है।
Responsive Design ensures कि web page हर screen size (mobile, tablet, desktop) पर सही दिखे। इसके लिए CSS media queries, flexbox, और grid layout का उपयोग किया जाता है।
@media (max-width: 768px) {
body {
font-size: 16px;
}
.container {
flex-direction: column;
}
}
🖋 Example: Headlines के लिए H1 (24–32px), paragraphs के लिए 16px font size रखें।
| Principle | Description | Example |
|---|---|---|
| Balance | Equal visual weight | Image left, text right |
| Contrast | Difference for focus | Dark text on light background |
| Alignment | Proper positioning | Left-aligned text blocks |
| Repetition | Consistency in style | Same color for buttons |
| White Space | Empty space for clarity | Padding around content |
🌐 Example: “BoostingSkills.com” जैसी educational sites lightweight design और responsive interface के लिए जानी जाती हैं।
जब हम Internet पर किसी विषय की जानकारी खोजते हैं, तो हमें वह जानकारी Search Engines की मदद से मिलती है। ये web pages को scan करके उनका index बनाते हैं ताकि user को relevant result तुरंत दिखाया जा सके। वहीं, Meta Search Engines कई search engines के परिणामों को एक साथ दिखाते हैं।
“A Search Engine is a web-based tool that searches, indexes, and retrieves information from the World Wide Web based on user queries.” “A Meta Search Engine collects search results from multiple search engines and displays them collectively.”
Search engine तीन मुख्य चरणों में काम करता है:
🌐 Example: जब आप “best HTML tutorial” Google पर type करते हैं, तो crawler पहले से indexed millions of pages में से सबसे relevant results दिखाता है।
📊 Example: “Boosting Skills” को Google और Bing दोनों में search करने पर algorithms अलग होने के कारण different ranking दिखेगी।
Meta Search Engines खुद web crawl नहीं करते, बल्कि multiple search engines से results collect करते हैं और combined list दिखाते हैं। इससे user को broader search results मिलते हैं।
SEO वह प्रक्रिया है जिससे website search engines में higher rank पर आती है। यह web publishing का महत्वपूर्ण हिस्सा है।
🧠 Example: यदि आप “Best HTML Notes” keyword को अपने title और headings में रखते हैं, तो search ranking बेहतर होगी।
| Feature | Search Engine | Meta Search Engine |
|---|---|---|
| Data Source | Own crawled database | Results from multiple search engines |
| Crawling | Yes (spiders/bots) | No |
| Result Accuracy | High (based on ranking algorithm) | Moderate |
| Speed | Faster | Depends on external sources |
| Example | Google, Bing | Dogpile, Metacrawler |
User Query
↓
Search Engine Interface
↓
Query Processor
↓
Index Database
↓
Result Ranking Algorithm
↓
Displayed Results
World Wide Web (WWW) Internet का सबसे महत्वपूर्ण हिस्सा है जो users को hyperlinked web pages के माध्यम से जानकारी प्रदान करता है। WWW के बिना हम web browsing, searching, या website access नहीं कर सकते।
“The World Wide Web (WWW) is a system of interlinked hypertext documents and multimedia content that can be accessed over the Internet using web browsers via HTTP/HTTPS protocols.”
📜 Example: Tim Berners-Lee ने 1991 में पहली बार “HyperText Transfer Protocol (HTTP)” और “HTML” का उपयोग करके web page बनाया था।
User (Browser)
↓
HTTP Request
↓
Web Server
↓
HTTP Response (HTML/CSS/JS)
↓
Displayed on Browser
🌐 Example: जब आप Wikipedia खोलते हैं, तो आप interconnected HTML pages के माध्यम से पूरे knowledge network में navigate करते हैं।
| Concept | Description |
|---|---|
| Full Form | World Wide Web |
| Invented By | Sir Tim Berners-Lee (1991) |
| Protocol Used | HTTP / HTTPS |
| Core Components | Browser, Server, Pages, Links |
| Document Type | HTML |
| Architecture | Client-Server |
| Basis | Internet | WWW |
|---|---|---|
| Definition | Global network of computers | System of web pages on the Internet |
| Components | Hardware + Network | Web pages + Hyperlinks + Browsers |
| Protocol | Uses TCP/IP | Uses HTTP/HTTPS |
| Existence | Older (1969 onwards) | Newer (1991 onwards) |
| Example | Email, FTP, Chat | Websites, Web Apps |
Web Browser एक software application है जो Internet पर उपलब्ध web pages को access, interpret और display करता है। यह user और web server के बीच interface की तरह काम करता है।
“A Web Browser is an application software that allows users to access, retrieve, and view information and resources on the World Wide Web using the HTTP or HTTPS protocols.”
🌐 Example: जब आप Chrome में “boostingskills.com” type करते हैं, तो browser server से HTTP request भेजता है और प्राप्त HTML page को display करता है।
Browser Architecture:
+---------------------------+
| User Interface |
| Browser Engine |
| Rendering Engine (Blink) |
| JavaScript Engine (V8) |
| Network & Storage Modules |
+---------------------------+
| Action | Shortcut |
|---|---|
| Open New Tab | Ctrl + T |
| Close Tab | Ctrl + W |
| Reopen Closed Tab | Ctrl + Shift + T |
| Open History | Ctrl + H |
| Open Downloads | Ctrl + J |
| Refresh Page | F5 |
| Browser | Developer | Rendering Engine | Platform |
|---|---|---|---|
| Google Chrome | Blink | Windows, macOS, Android | |
| Mozilla Firefox | Mozilla Foundation | Gecko | Windows, Linux, Android |
| Safari | Apple | WebKit | macOS, iOS |
| Microsoft Edge | Microsoft | Chromium (Blink) | Windows, macOS |
| Opera | Opera Software | Blink | Cross-Platform |
HTTP एक communication protocol है जिसका उपयोग web browser और web server के बीच data (web pages, images, videos, etc.) transfer करने के लिए किया जाता है। यह web का आधार है और हर web request इसी protocol के माध्यम से होती है।
“HTTP (HyperText Transfer Protocol) is an application-level protocol used for transferring hypertext documents (HTML files) and other web resources between a web client and a web server.”
https://boostingskills.com — तो browser और server के बीच communication HTTP के ज़रिए होता है।
⚙️ Example: HTTP/3 अब UDP-based QUIC protocol का उपयोग करता है जिससे latency कम होती है।
https://example.com).
Client (Browser) → HTTP Request → Server
Client (Browser) ← HTTP Response ← Server
GET /index.html HTTP/1.1)HTTP/1.1 200 OK)| Method | Purpose |
|---|---|
| GET | Retrieve data from server |
| POST | Send data to server (forms, uploads) |
| PUT | Update an existing resource |
| DELETE | Remove a resource from server |
| HEAD | Same as GET, but without body (for testing) |
| Code | Meaning |
|---|---|
| 200 | OK – Request successful |
| 301 | Moved Permanently |
| 404 | Not Found |
| 500 | Internal Server Error |
| 403 | Forbidden – Access denied |
HTTPS HTTP का secure version है जो SSL/TLS encryption का उपयोग करता है। यह data को सुरक्षित रखता है ताकि कोई तीसरा व्यक्ति उसे intercept न कर सके।
🔐 Example: जब आप https:// से शुरू होने वाली site खोलते हैं, तो data encrypted रूप में भेजा जाता है।
Web Publishing Tools ऐसी software utilities हैं जो websites को design, develop, upload, और manage करने में मदद करती हैं। इनका उपयोग web developers और beginners दोनों द्वारा websites को आसानी से publish करने के लिए किया जाता है।
“Web Publishing Tools are software applications that help in creating, uploading, and maintaining websites or web pages on the Internet.”
🌐 Example: WordPress का उपयोग करके आप बिना coding के blog या business website बना सकते हैं।
| Tool | Type | Key Features |
|---|---|---|
| Adobe Dreamweaver | Web Design | WYSIWYG editor, HTML/CSS/JS support |
| WordPress | CMS | Easy templates, plugins, no coding |
| FileZilla | FTP Tool | Upload/download files between PC & server |
| cPanel | Hosting Panel | Server and database management |
| Wix | Website Builder | Drag & drop interface, cloud hosting |
💡 Example: FileZilla से आप अपनी index.html file को server पर upload करके instantly publish कर सकते हैं।
यह FAQs Section Web Publishing and Browsing के सबसे ज़्यादा पूछे जाने वाले सवालों और उनके छोटे, सटीक जवाबों को प्रस्तुत करता है। यह O Level और viva दोनों के लिए perfect revision tool है।
| Topic | Keyword / Key Fact |
|---|---|
| WWW Inventor | Tim Berners-Lee (1991) |
| HTTP Port | 80 |
| HTTPS Port | 443 |
| First Browser | Mosaic |
| CMS Example | WordPress |
| FTP Tool | FileZilla |
| Search Engine Example | Google, Bing |
| Meta Search Example | Dogpile, StartPage |
| Protocol for Web | HTTP / HTTPS |
| Rendering Engine | Blink (Chrome), Gecko (Firefox) |