Web Design - Unit I: Introduction to

Internet and Email

Accessing the World Wide Web
Definition:

The World Wide Web (WWW) is a collection of interlinked documents and resources, accessed via the Internet
using web browsers.

Explanation:

The WWW uses the Hypertext Transfer Protocol (HTTP) for communication.
Websites consist of web pages that contain text, images, videos, and links.
To access the WWW, one requires:
1. A device (computer, tablet, phone).
2. Internet connection.
3. A web browser (Google Chrome, Firefox, Safari, Edge).
Users type a Uniform Resource Locator (URL) into the browser to retrieve web pages.

Example:

Typing https://www.google.com in the browser connects you to Google’s website.

Possible Questions:

Short Answer: Define WWW.

Short Answer: What are the requirements to access the World Wide Web?
Long Answer: Explain the process of accessing a website using a URL.

Internet
Definition:
The Internet is a global network of interconnected computers that communicate using standardized protocols.

Explanation

• Originated from ARPANET (1969).

• Functions as a network of networks.

• Provides services: WWW, Email, File Transfer (FTP), Chat, Cloud storage, etc.
Example:
When you send a message on WhatsApp, the Internet routes data packets
between devices.

Possible Questions:

 Short Answer: What is the Internet?

 Long Answer: Explain the evolution and uses of the Internet.

Protocols and Other Jargons

1. Introduction

When computers communicate over the Internet, they must follow rules and standards to
ensure data is transmitted correctly. These rules are called protocols.

A protocol is like a language or agreement between devices that defines:

 How to start communication

 How to transfer data
 How to detect and correct errors
 How to end communication

Common Internet Protocols

2.1 HTTP (HyperText Transfer Protocol)

  Used for transferring web pages on the Internet.
 Every time you open a website, your browser uses HTTP to request data from the server.
 Port number: 80

yS) Example: http://www.google.com

2.2 HTTPS (HyperText Transfer Protocol Secure)

 Secure version of HTTP.

 Uses encryption (SSL/TLS) to protect data during transfer.
 Important for banking, shopping, and login forms.
 Port number: 443

yS) Example: https://www.amazon.com

2.3 FTP (File Transfer Protocol)

 Used for transferring files between computers over the Internet.

 Provides options for uploading, downloading, renaming, and deleting files.
 Port number: 21

)yS Example: Uploading a website to a hosting server.

2.4 SMTP (Simple Mail Transfer Protocol)

 Used for sending emails.

 Works in combination with other mail protocols.
 Port number: 25 (sometimes 587 or 465 for secure versions).

y)S Example: Gmail sending email to Yahoo Mail

2.5 POP3 (Post Office Protocol v3)

 Used for retrieving emails from a mail server to a client.

 Downloads messages from server → removes them from the server.
 Port number: 110

)Sy Example: Configuring Outlook with POP3 removes mails from server after
downloading.

2.6 IMAP (Internet Message Access Protocol)

 Advanced email retrieval protocol.

 Allows reading emails without deleting them from the server.
 Useful when accessing email from multiple devices (phone + laptop).
 Port number: 143 (secure IMAP uses 993).

y)S Example: Gmail app uses IMAP to sync across devices.

2.7 DNS (Domain Name System)

 Converts domain names (like www.google.com) into IP addresses (like

142.250.182.14).
 Makes the Internet user-friendly.

)yS Without DNS, we would have to remember numbers instead of names.

2.8 TCP/IP (Transmission Control Protocol / Internet Protocol)

 The foundation of the Internet.

 TCP ensures reliable delivery (splits data into packets, reassembles them).
 IP ensures addressing and routing (delivers packets to the right device).
y)S Example: Sending a WhatsApp message uses TCP/IP in the background.

2.9 UDP (User Datagram Protocol)

 A faster but less reliable alternative to TCP.

 Does not check if packets arrive correctly (no error correction).
 Used in real-time applications where speed matters more than accuracy.

)yS Example: Online games, video streaming, voice calls.

3. Other Networking Jargons

3.1 IP Address

 A unique number that identifies a device on the Internet.

 Types:
o IPv4 (e.g., 192.168.1.1) – 32-bit address.
o IPv6 (e.g., 2001:0db8:85a3::8a2e:0370:7334) – 128-bit address.

3.2 Bandwidth

 The amount of data that can be transmitted over a network in a given time.
 Measured in bits per second (bps), Mbps, Gbps, Tbps, etc.

3.3 Latency

 The delay between sending and receiving data.

 Low latency = faster response (important in gaming, video calls).
3.4 Packet

 Data is not sent all at once, but broken into packets.

 Each packet has:
o Header (address info)
o Payload (data)
o Trailer (error check)

3.5 Firewall

 A security system that monitors and controls incoming/outgoing network traffic.

 Protects against hackers and viruses.

3.6 Cookies

 Small files stored on your computer by websites.

 Used to remember login info, preferences, shopping carts.

3.7 VPN (Virtual Private Network)

 Encrypts your internet connection.

 Masks your IP address → gives privacy.
 Often used for secure remote work.

4. Table: Summary of Common Protocols

Port
Protocol Full Form Function
Number Example
HyperText Accessing
HTTP Transfer Protocol Transfers web pages 80
websites
HyperText Transfer
HTTPS Protocol Secure
Secure websites 443 Online banking
FTP File Transfer Protocol Upload/download files 21 Hosting websites
Simple Mail Transfer
SMTP Protocol Send emails 25/587 Sending email
POP3 Post Office Protocol v3 Retrieve emails 110 Outlook POP3
 Port
Protocol Full Form Function
Number
Example

(download & delete)

Internet Message
IMAP Access Protocol Retrieve emails (sync) 143/993 Gmail app
DNS Domain Name System Converts domain to IP 53 www.google.com
Transmission Reliable delivery &
TCP/IP Control Protocol / Varies Browsing, email
addressing
Internet Protocol
UDP Fast, unreliable data
User Datagram Protocol Streaming,
transfer Varies gaming

5. Exam-Oriented Questions
Short Answer (2 Marks):

1. Define protocol. Give one example.

2. What is the difference between POP3 and IMAP?
3. What does DNS do?

Long Answer (10 Marks):

1. Explain different Internet protocols in detail with examples.

2. Differentiate between HTTP and HTTPS.
3. Compare TCP and UDP with examples.
4. Write short notes on: (a) Cookies (b) Firewalls (c) VPN.

Host Machines and Host Names

Definition:

 Host Machine: A computer connected to a network that provides services.

 Host Name: The unique name assigned to a host machine.

Explanation:

 Every host has an IP address.

 Host names are mapped to IPs through DNS.

Example:
  Host name: www.amazon.com
 IP address: 176.32.98.166

Possible Questions:

 Short Answer: What is a host machine?

 Long Answer: Explain how host names are resolved into IP addresses.

Internet Architecture and Packet Switching

Internet Architecture:

 Based on the client/server model.

 Uses routers, switches, and ISPs to connect devices.

Packet Switching:

 Data is divided into packets before transmission.

 Each packet contains source & destination addresses.
 Packets travel independently and are reassembled at the destination.

Example:

Sending an email → broken into packets → travels across multiple routers →

reassembled by recipient’s computer.

Possible Questions:

 Short Answer: What is packet switching?

 Long Answer: Explain Internet architecture with a neat diagram.

The Client/Server Software Model

1. Introduction

The Client–Server Model is a fundamental architecture in computer networks and

distributed systems. In this model, clients request services (such as data or processing),
and servers provide those services.
It is the basis for the Internet, web applications, email systems, and most
modern network-based applications.

2. Basic Concept
 Client:
o A device or software that requests a service.
o Examples: Web browsers, mobile apps, email applications.
 Server:
o A powerful system or software that provides services to clients.
o Examples: Web server, Database server, Mail server.

3. How it Works
1. The client initiates a request (e.g., typing a URL in the browser).
2. The server processes the request (e.g., retrieves the web page).
3. The server sends a response back to the client (e.g., HTML page).

Diagram: Client–Server Model

+---------+ Request +---------+
| Client | ---------------------> | Server |
| (Browser)| | (Website)|
+ + < + +
Response

4. Features of Client–Server Model

 Service-based: Server provides services, clients consume them.
 Separation of concerns: Client handles user interface; Server handles
data storage/processing.
 Network-dependent: Communication happens via a
network (LAN/WAN/Internet).
 Scalability: Multiple clients can connect to one server.
5. Examples
 Web browsing:
o Client = Browser (Chrome, Firefox)
o Server = Web server (Apache, Nginx)
 Email communication:
o Client = Outlook, Gmail app
o Server = Mail server (SMTP, IMAP, POP3)
 Online banking:
o Client = Banking app
o Server = Bank’s database + application server

6. Advantages
1. Centralized control: Data and resources managed in one place.
2. Scalability: One server can serve multiple clients.
3. Security: Easier to manage from a central server.
4. Maintenance: Updates and backups can be done on the server without
affecting clients directly.

7. Disadvantages
1. Single point of failure: If server crashes, all clients are affected.
2. Network dependency: Clients cannot work if the network or server is down.
3. Cost: Servers require more powerful hardware and maintenance.
4. Performance bottleneck: Too many clients may slow down the server.

8. Variants of Client–Server Model

 Two-tier model: Client communicates directly with server.
 Three-tier model: Client → Application Server → Database Server (commonly
used in web apps).
 N-tier model: Extended with multiple layers for scalability.

Diagram: Three-Tier Client–Server Model

+ + + + + +
| Client | -----> | Application | -----> | Database Server |
| (Browser)| | Server | | (Data Storage) |
+ + + + + +

9. Comparison with Peer-to-Peer (P2P)

Feature Client–Server Model Peer-to-Peer (P2P) Model
Control Centralized (server) Decentralized (all peers
equal) Scalability Limited by server capacity High, but harder to manage
Examples Web apps, Email, Banking systems Torrent sharing, Blockchain
Security Easier to manage centrally More difficult, less controlled

10. Exam Questions

Short Answer (2 Marks):

1. Define the client–server model.

2. Give two examples of client–server applications.
3. Differentiate between client and server.

Long Answer (10 Marks):

1. Explain the working of the client–server model with examples.

2. What are the advantages and disadvantages of the client–server architecture?
3. Compare client–server and peer-to-peer models.
4. Explain two-tier and three-tier client–server architecture with diagrams.

Bandwidth and Asynchronous Communication

1. Bandwidth
Definition:

Bandwidth is the maximum rate at which data can be transferred over a network
connection in a given time. It is the “capacity” of the communication channel.
  Measured in bps (bits per second).
 Common units: Kbps (kilobits/sec), Mbps (megabits/sec), Gbps (gigabits/sec).

Detailed Explanation:

 Bandwidth determines how much information can flow through a

network connection at once.
 It is similar to a water pipe: the wider the pipe, the more water flows.
Similarly, higher bandwidth means more data can be transmitted.
 Internet Service Providers (ISPs) advertise their plans using bandwidth
values (e.g., 100 Mbps broadband).
 Bandwidth is often shared: multiple users on the same Wi-Fi reduce effective
speed.
 Two directions:
1. Download Bandwidth (Downstream): Receiving data from the Internet →
browsing, streaming, downloads.
2. Upload Bandwidth (Upstream): Sending data to the Internet → uploading
files, video conferencing.

Example of Bandwidth Usage:

 1 Mbps: Suitable for email and basic browsing.

 10 Mbps: Good for HD video streaming.
 25 Mbps: Required for 4K video streaming.
 100+ Mbps: Supports multiple users streaming and gaming simultaneously.

Diagram: Bandwidth Representation

High Bandwidth (100 Mbps):
==========================
|■■■■■■■■■■■■■■■■■■■■■■■■|

Low Bandwidth (10 Mbps):

========================
|■■■■■ |

Factors Affecting Bandwidth:

1. Network congestion (many users online reduces speed).

2. Quality of hardware (old routers, poor cables reduce performance).
 3. Wired vs Wireless (Wi-Fi generally slower than Ethernet).
4. Distance from server (closer servers provide faster response).

Advantages of High Bandwidth:

 Smooth video calls without lag.

 Faster downloads/uploads.
 Supports multiple users simultaneously.
 Essential for online classes, cloud storage, and remote work.

2. Synchronous Communication

Definition:

Synchronous communication is real-time communication where the sender and receiver are
engaged at the same time.

Explanation:

 Both parties must be present simultaneously.

 Interaction is instant – message is sent and immediately received/responded to.
 Useful when immediate feedback is required.

Examples:

 Phone calls.
 Zoom or Google Meet live video classes.
 Live customer support chat.
 Face-to-face conversations.

Advantages:
  Real-time, immediate feedback.
 Reduces chances of miscommunication.
 Best for urgent and collaborative work.

Disadvantages:

 Both users must be available at the same time.

 Different time zones make it inconvenient.
 Sometimes stressful because response is expected immediately.

3. Asynchronous Communication

Definition:

Asynchronous communication is communication where sender and receiver do not

interact at the same time.

Explanation:

 The message is stored and delivered later when the receiver is available.
 Allows flexibility; participants respond when convenient.
 Useful for remote teams or communication across time zones.

Examples:

 Email.
 WhatsApp messages (if receiver is offline).
 Online discussion forums (Moodle, Reddit).
 Recorded video lectures.

Advantages:
  Flexible – participants reply at their own convenience.
 Suitable for global communication.
 Allows time to think and prepare detailed responses.

Disadvantages:

 Delayed responses (not suitable for urgent needs).

 May lead to miscommunication if replies are unclear.
 Not effective for instant decision-making.

4. Comparison Table: Synchronous vs Asynchronous

Feature Synchronous Communication Asynchronous Communication
Timing Real-time Time-delayed
Requirement Both users must be online Users can be online at different
times Examples Phone call, Zoom, Live chat Email,
WhatsApp (offline), Forums Advantage Instant feedback, interactive
Flexibility, convenience
Limitation Requires availability of both users Responses may be delayed

5. Data Measurement Units for Bandwidth

Since bandwidth is measured in bits per second, understanding data size units is
important.

Unit Equivalent in Bytes

1 Kilobyte (KB) 1,024 Bytes
1 Megabyte (MB) 1,024 KB = 1,048,576 Bytes
1 Gigabyte (GB) 1,024 MB = 1,073,741,824 Bytes
1 Terabyte (TB) 1,024 GB = 1,099,511,627,776 Bytes
1 Petabyte (PB) 1,024 TB = 1,125,899,906,842,624 Bytes
1 Exabyte (EB) 1,024 PB = 1,152,921,504,606,846,976 Bytes
1 Zettabyte (ZB) 1,024 EB
1 Yottabyte (YB) 1,024 ZB
Quick Example (Practical Bandwidth Calculation):

 A 100 MB file = 800 Megabits (since 1 Byte = 8 bits).

 On a 10 Mbps connection:
o Time to download = 800 ÷ 10 = 80 seconds.

6. Exam Questions

Short Answer (2 Marks):

1. Define bandwidth.
2. Give one example each of synchronous and asynchronous communication.
3. What is the unit of bandwidth?
4. Differentiate between upload and download bandwidth.

Long Answer (10 Marks):

1. Explain bandwidth in detail with examples.

2. Compare synchronous and asynchronous communication with examples.
3. Write detailed notes on data measurement units (MB to YB).
4. Discuss the advantages and disadvantages of synchronous and
asynchronous communication.

Working with E-mail

Definition:

Email (Electronic Mail) is a method of sending digital messages across the Internet.

Components:

 Email address: username@domain.com

 Email client: Software (e.g., Outlook, Gmail).
 Email server: Stores and forwards mail.

Possible Questions:
  Short Answer: Define email.
 Long Answer: Explain how email works with example.

Anatomy of an E-mail Message

Definition:

The anatomy of an email message refers to the different parts that make up an email.
Each part has a specific role in ensuring that the message is properly delivered,
formatted, and understood.

1.

Header Section

 Contains technical and descriptive information about the message.

 Includes:
o From: Sender’s email address (e.g., professor@sju.edu).
o To: Recipient’s email address (e.g., student@gmail.com).
o CC (Carbon Copy): Additional recipients (visible to all).
o BCC (Blind Carbon Copy): Hidden recipients (invisible to others).
o Date/Time: When the message was sent.
o Subject: A short summary of the message.

2.

Body Section

 The main content of the email.

 Can be plain text or HTML formatted (with colors, fonts, images).
 Structured as:
o Salutation → “Dear Student,”
o Message Content → The actual communication.
o Closing → “Regards, Prof. George”
3.

Attachments

 Additional files (documents, images, audio, video, etc.) that are sent along
with the email.
 Common formats: .pdf, .docx, .jpg, .mp3.

4.

Signature

 Custom block at the end of an email.

 Usually includes:
o Name of sender
o Designation
o Contact information
o Organization details

Example Layout:
+ +
| From: professor@sju.edu |
| To: student@gmail.com |
| Cc: hod@sju.edu |
| Subject: Assignment Submission Reminder |
| Date: 17-Aug-2025 |
+ +
| Dear Student, |
| Please submit your assignment by Friday. |
| |
| Regards, |
| Prof. George Gabriel |
| Dept. of Computer Science |
+ +
| Attachment: assignment_instructions.pdf |
+ +

Advantages of Understanding Email Anatomy:

 Helps students identify important information quickly.

 Avoids miscommunication by properly using Subject, CC, and BCC.
 Improves professional communication skills.
 Possible Exam Questions

Short Answer (2 Marks):

1. What is the purpose of the Subject line in an email?

2. Differentiate between CC and BCC in email.

Long Answer (10 Marks):

1. Explain the anatomy of an email message with a neat diagram.

2. Describe the role of the header, body, attachments, and signature in an
email message.

Viewing Your Inbox

 Inbox: The folder containing received emails.
 Allows sorting by date, sender, or subject.
 Supports searching and archiving.

Example:

Logging into Gmail → Inbox shows new and old messages.

Possible Questions:

 Short Answer: What is an inbox?

 Long Answer: Explain the functions available in an inbox.

Viewing Individual Mail Messages

 Clicking on a mail displays full content.
 Options available: reply, forward, delete, mark as unread.

Example:
Selecting an email from Gmail opens message details.

Possible Questions:

 Short Answer: What actions can be taken after viewing an email?

Sending a New Mail Message

Steps:

1. Click “Compose” in Gmail.

2. Enter recipient’s email address.
3. Add subject and body.
4. Attach files (if required).
5. Click “Send”.

Possible Questions:

 Short Answer: What is the use of subject in an email?

 Long Answer: Describe the process of composing and sending an email.

Replying to and Forwarding E-mail Messages

 Reply: Respond to sender directly.
 Reply All: Respond to all recipients.
 Forward: Send received email to a new recipient.

Example:

If a teacher sends instructions via email, you can reply to clarify doubts or forward to
friends.

Possible Questions:

 Short Answer: Differentiate between reply and forward.

 Long Answer: Explain how to reply and forward an email with examples.