🌐 Introduction to Internet and Web

The Internet is behind almost everything we do online. This chapter explains how a single click loads a webpage and how an email reaches someone across the world: the Internet and the World Wide Web, web servers, URLs, websites and webpages, web browsers, and applications such as email, chat and VoIP.

10.1 🌟 Introduction

Imagine life 30 years ago — no Google, no WhatsApp, no YouTube. To send a letter, you'd write it, post it, and wait DAYS for a reply. Today? You send a message and get a reply in SECONDS! What changed? The Internet. 🚀

graph LR
    OLD["📮 OLD WAY\nPostal Letters\n(Days to reach)"]
    NEW["⚡ NEW WAY\nInternet\n(Instant!)"]

    OLD -->|"Internet\nRevolution!"| NEW

    style OLD fill:#9E9E9E,color:#fff
    style NEW fill:#4CAF50,color:#fff

This chapter covers how the Internet works, what WWW really is, how websites and webpages are built, how browsers work, and how Email/Chat/VoIP let us communicate instantly!

10.2 🌍 Introduction to Internet

The Internet is a HUGE global network connecting MILLIONS of computers and smaller networks worldwide — literally, a "network of networks"!

graph TD
    INT["🌍 THE INTERNET"]
    N1["🏫 School Networks"]
    N2["🏢 Office Networks"]
    N3["🏠 Home Networks"]
    N4["🏛️ Government Networks"]

    INT --- N1
    INT --- N2
    INT --- N3
    INT --- N4

    style INT fill:#F44336,color:#fff

Analogy: If your school's WiFi network is like ONE classroom's WhatsApp group, the Internet is like joining EVERY classroom's group, EVERY school's group, and EVERY country's group into ONE MASSIVE super-group where anyone can talk to anyone!

10.3 🕸️ World Wide Web (WWW)

WWW is a system of INTERLINKED webpages/documents that you access through a web browser — it's just ONE SERVICE that runs ON TOP of the Internet!

graph LR
    NET["🌍 Internet\n(the ROADS —\nphysical infrastructure)"]
    WWW["🕸️ WWW\n(the CARS driving\non those roads —\nlinked webpages)"]

    NET -->|"WWW runs\nON TOP of it"| WWW

    style NET fill:#2196F3,color:#fff
    style WWW fill:#9C27B0,color:#fff

10.3.1 History of World Wide Web 📜

graph LR
    Y1["1989\n👨‍💻 Tim Berners-Lee\nproposed WWW at CERN"]
    Y2["1991\n🌐 First website\nwent LIVE"]
    Y3["Today\n🚀 Billions of\nwebsites worldwide!"]

    Y1 --> Y2 --> Y3

    style Y1 fill:#4CAF50,color:#fff
    style Y2 fill:#FF9800,color:#fff
    style Y3 fill:#2196F3,color:#fff

Fun Fact! 🎉 Tim Berners-Lee never patented the WWW — he made it FREE for the whole world to use. That's why the entire internet as we know it exists today!

10.3.2 Difference between WWW and Internet ⚠️

THIS IS THE #1 MOST CONFUSED TOPIC IN THE ENTIRE CHAPTER!

The Complete Comparison Table:

10.4 🖥️ Web Servers

A Web Server is a powerful computer that STORES website files and SENDS ("serves") them to browsers whenever someone requests a webpage.

graph LR
    USER["👤 You type\nwww.csip12.in"]
    BROWSER["🧭 Browser sends\na REQUEST"]
    SERVER["🖥️ Web Server\n(finds the file,\nsends it back)"]
    PAGE["📄 Webpage appears!"]

    USER --> BROWSER -->|"Request"| SERVER -->|"Response"| PAGE

    style SERVER fill:#F44336,color:#fff

Analogy: A Web Server is like a WAITER in a restaurant — you (browser) place an order (request a webpage), the waiter goes to the kitchen (server storage), and brings back exactly what you asked for (the webpage)!

10.4.1 Services Provided by a Server 🛎️

10.5 🔗 URLs

URL = Uniform Resource Locator — the COMPLETE address that uniquely identifies a resource (webpage, image, file) on the Internet.

10.5.1 Elements of URL 🧩

https  ://  www.csip12.in  :443  /notes/chapter10  ?search=python  #section2
  ↑              ↑           ↑           ↑                ↑             ↑
Protocol    Domain Name    Port      Path/Directory   Query String   Fragment

Simplified Version — What You Really Need to Know:

Analogy: A URL is like a COMPLETE postal address — Protocol is like "By Registered Post", Domain is "House Number + Street + City", Path is "Room Number inside the house"!

10.5.2 URL Types 📋

graph LR
    ABS["🔗 Absolute URL\nComplete Address\nWorks from ANYWHERE"]
    REL["📍 Relative URL\nShortcut\nWorks only WITHIN\nsame website"]

    style ABS fill:#4CAF50,color:#fff
    style REL fill:#FF9800,color:#fff

Analogy: An Absolute URL is like giving your FULL home address to a stranger — they can find you from ANYWHERE in the world. A Relative URL is like telling your ROOMMATE "my room is down the hall" — this only makes sense if they're ALREADY inside your house!

10.6 🌐 WebSite

A Website is a COLLECTION of related webpages, hosted together under ONE domain name.

10.6.1 Components of a Website 🧩

graph TD
    SITE["🌐 Website"]
    HOME["🏠 Homepage\n(the main entry page)"]
    NAV["🧭 Navigation Menu\n(links to other pages)"]
    CONTENT["📄 Content Pages\n(actual information)"]
    FOOTER["📌 Footer\n(contact, copyright info)"]

    SITE --> HOME
    SITE --> NAV
    SITE --> CONTENT
    SITE --> FOOTER

    style SITE fill:#4CAF50,color:#fff

10.7 📄 Web Pages

A Web Page is a SINGLE document within a website, viewable through a browser.

10.7.1 Components of a Webpage 🧩

graph TD
    PAGE["📄 Webpage"]
    HEAD["📋 Head Section\n(title, metadata — NOT visible)"]
    BODY["👁️ Body Section\n(visible content)"]
    TEXT["📝 Text"]
    IMG["🖼️ Images"]
    LINK["🔗 Hyperlinks"]

    PAGE --> HEAD
    PAGE --> BODY
    BODY --> TEXT
    BODY --> IMG
    BODY --> LINK

    style PAGE fill:#2196F3,color:#fff

10.7.2 Types of Web Page — Static vs Dynamic ⚡

A key comparison in this chapter.

graph LR
    STATIC["📄 STATIC\nFixed content\nSame for EVERYONE"]
    DYNAMIC["🔄 DYNAMIC\nContent CHANGES\nper user/time/data"]

    style STATIC fill:#9E9E9E,color:#fff
    style DYNAMIC fill:#4CAF50,color:#fff

The Complete Comparison Table:

Analogy: A Static page is like a PRINTED newspaper — once printed, it NEVER changes, and everyone reading it sees the exact SAME content. A Dynamic page is like a NEWS APP — it refreshes, shows YOU personalised news, and looks DIFFERENT for different people!

10.7.3 Difference between a Webpage and Website 📖

Analogy — Book vs Library Shelf! A Webpage is like ONE PAGE in a book. A Website is like the ENTIRE BOOK — many pages bound together under one cover!

10.8 🧭 Web Browsers

A Web Browser is software that lets you REQUEST and DISPLAY webpages — your window into the World Wide Web!

graph LR
    YOU["👤 You"]
    BROWSER["🧭 Web Browser\n(Chrome, Firefox...)"]
    SERVER["🖥️ Web Server"]

    YOU --> BROWSER -->|"Requests page"| SERVER -->|"Sends page"| BROWSER --> YOU

    style BROWSER fill:#2196F3,color:#fff

10.8.1 Web Browser Toolbar 🛠️

graph TD
    TB["🛠️ Browser Toolbar"]
    BACK["⬅️ Back Button"]
    FORWARD["➡️ Forward Button"]
    REFRESH["🔄 Refresh/Reload"]
    HOME["🏠 Home Button"]
    ADDRESS["🔗 Address Bar\n(type URL here)"]
    BOOKMARK["⭐ Bookmark/Favourites"]

    TB --> BACK
    TB --> FORWARD
    TB --> REFRESH
    TB --> HOME
    TB --> ADDRESS
    TB --> BOOKMARK

    style TB fill:#9C27B0,color:#fff

10.8.2 Browser Settings ⚙️

Browsers let you CUSTOMISE your browsing experience:

10.8.3 Add-ons and Plug-ins 🧩

Browsers can do more than open web pages — we can extend them with extra software.

Analogy: An add-on is like a phone cover with a stand 📱 — it changes the phone itself and helps everywhere. A plug-in is like a special charger cable 🔌 — you need it only when you want to connect one particular thing!

10.8.4 Cookies 🍪

A cookie is a small text file that a website saves in your browser. It stores information about you and your visit, so the site can remember you the next time.

You can view, block or delete cookies from the browser's Settings → Privacy and Security.

10.9 📧 Internet Applications

Beyond just browsing the Web, the Internet powers MANY other daily-use services!

10.9.1 E-mail (Electronic Mail) 📬

Email lets you send and receive electronic letters/messages instantly, anywhere in the world.

graph LR
    SENDER["📤 Sender's\nEmail Client"]
    SMTP1["📮 Sender's\nMail Server"]
    SMTP2["📬 Receiver's\nMail Server"]
    RECEIVER["📥 Receiver's\nEmail Client"]

    SENDER -->|"SMTP"| SMTP1 -->|"SMTP"| SMTP2 -->|"POP3/IMAP"| RECEIVER

    style SMTP1 fill:#FF9800,color:#fff
    style SMTP2 fill:#FF9800,color:#fff

10.9.2 Protocols Used in Email 📋

POP3 vs IMAP — Quick Comparison:

10.10 💬 Chat

Chat is real-time TEXT-based communication between two or more users over the Internet.

graph LR
    USER1["👤 User 1"]
    SERVER["☁️ Chat Server"]
    USER2["👤 User 2"]

    USER1 <-->|"Instant messages"| SERVER <-->|"Instant messages"| USER2

    style SERVER fill:#4CAF50,color:#fff

10.10.1 Commonly Used Type of Chat 💬

Analogy: Chat is like passing NOTES in class, but INSTANTLY — no need to fold the paper and pass it hand-to-hand; it reaches the other person immediately, no matter how far away they are!

10.11 📞 Voice Over Internet Protocol (VoIP)

VoIP converts your VOICE into DATA PACKETS and sends it over the Internet — instead of using traditional telephone lines!

graph LR
    MIC["🎤 Your Voice\n(Analog Sound)"]
    CONV["⚙️ Converted to\nDigital Data Packets"]
    NET["🌐 Sent over\nthe Internet"]
    SPK["🔊 Converted back\nto Sound for Listener"]

    MIC --> CONV --> NET --> SPK

    style CONV fill:#2196F3,color:#fff
    style NET fill:#4CAF50,color:#fff

Analogy: Traditional phone calls are like sending a letter through a DEDICATED private courier (expensive, especially internationally). VoIP is like sending that SAME message using the regular Internet "postal system" you already have — MUCH cheaper, sometimes FREE!

⚠️ Common Errors and Misconceptions

Internet = Physical global network (infrastructure)
WWW      = ONE service (linked webpages) running ON the Internet

Protocol :// Domain Name : Port / Path ? Query # Fragment

Webpage  = ONE document
Website  = Collection of MULTIPLE webpages

Static  = Fixed content, HTML/CSS only
Dynamic = Changes per user, needs server-side code + database

SMTP  = Sends email
POP3  = Downloads to ONE device, deletes from server
IMAP  = Syncs across ALL devices, stays on server

Chat  = Real-time TEXT communication
VoIP  = Voice/video calls over the Internet (not phone lines)

🎯 Sample Board Exam Questions

Q1: Very Short Answer [1 mark each]

a) Who invented the World Wide Web, and in which year? → Tim Berners-Lee, in 1989

b) What is the full form of URL? → Uniform Resource Locator

c) Name any two email protocols. → Any two of: SMTP, POP3, IMAP

d) What is VoIP? → Voice over Internet Protocol — allows voice/video calls over the Internet

e) Name any two commonly used web browsers. → Any two of: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge

Q2: Short Answer [2 marks]

Q: Differentiate between Internet and WWW.

The Internet is the global physical network of interconnected computers and networks. WWW is a service that runs on the Internet, consisting of linked webpages accessed via a browser. The Internet also supports OTHER services (Email, Chat, VoIP) besides WWW.

Q3: Short Answer [3 marks]

Q: Differentiate between Static and Dynamic webpages with examples.

Q4: Short Answer [2 marks]

Q: Differentiate between POP3 and IMAP.

POP3 downloads emails to a single device and removes them from the server — accessible from only that ONE device. IMAP keeps emails on the server and syncs across ALL devices — accessible from phone, laptop, etc., simultaneously.

Q5: Short Answer [2 marks]

Q: What are the elements of a URL? Explain with an example.

A URL has three main elements: Protocol (how to fetch, e.g., https://), Domain Name (website address, e.g., www.csip12.in), and Path (specific page, e.g., /notes/chapter10). Example: https://www.csip12.in/notes/chapter10

✏️ Practice Problems

1. Draw a diagram showing the relationship between the Internet, WWW, and a Web Browser.

2. Identify each URL part in: https://www.school.edu.in/results/2026?class=12

3. Explain the difference between an Absolute URL and a Relative URL with one example each.

4. List the components of a website and briefly explain each one.

5. A company website has a fixed "About Us" page and a personalised "My Orders" page that shows different content for each logged-in user. Identify which is Static and which is Dynamic, with reasoning.

6. Explain why IMAP is preferred over POP3 for someone who checks email on both their phone and laptop.

7. What is the role of a Web Server in displaying a webpage when you type a URL? Explain step-by-step.

8. List three types of chat and give a real-world example of each.

9. Explain why VoIP calls are usually cheaper than traditional international phone calls.

10. Differentiate between a Webpage and a Website using a real-world analogy of your own (not the book vs library example).