Web Design - Unit I: Introduction to

• Originated from ARPANET (1969).

• Functions as a network of networks.
•
Internet and Email
Provides services: WWW, Email, File Transfer (FTP), Chat, Cloud storage, etc.

Example:

Accessing the World Wide Web When you send a message on WhatsApp, the Internet routes data packets between
devices.
Definition:
Possible Questions:
The World Wide Web (WWW) is a collection of interlinked documents and resources,
• Short Answer: What is the Internet?
accessed via the Internet using web browsers.
• Long Answer: Explain the evolution and uses of the Internet.
Explanation:

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

Example: When computers communicate over the Internet, they must follow rules and standards to
ensure data is transmitted correctly. These rules are called protocols.
Typing https://www.google.com in the browser connects you to Google’s website.

Possible Questions:
A protocol is like a language or agreement between devices that defines:
• Short Answer: Define WWW.
• Short Answer: What are the requirements to access the World Wide Web? • How to start communication
• Long Answer: Explain the process of accessing a website using a URL. • How to transfer data
• How to detect and correct errors
• How to end communication

Internet
Definition: Common Internet Protocols
The Internet is a global network of interconnected computers that communicate using
standardized protocols.
2.1 HTTP (HyperText Transfer Protocol)
Explanation:
 • Used for transferring web pages on the Internet.
• Every time you open a website, your browser uses HTTP to request data from the
server. 2.5 POP3 (Post Office Protocol v3)
• Port number: 80
• Used for retrieving emails from a mail server to a client.
• Downloads messages from server → removes them from the server.
• Port number: 110
Example: http://www.google.com

Example: Configuring Outlook with POP3 removes mails from server after
2.2 HTTPS (HyperText Transfer Protocol Secure) downloading.

• Secure version of HTTP.

• Uses encryption (SSL/TLS) to protect data during transfer.
• Important for banking, shopping, and login forms. 2.6 IMAP (Internet Message Access Protocol)
• Port number: 443
• Advanced email retrieval protocol.
• Allows reading emails without deleting them from the server.
• Useful when accessing email from multiple devices (phone + laptop).
Example: https://www.amazon.com • Port number: 143 (secure IMAP uses 993).

2.3 FTP (File Transfer Protocol) Example: Gmail app uses IMAP to sync across devices.

• Used for transferring files between computers over the Internet.

• Provides options for uploading, downloading, renaming, and deleting files.
• Port number: 21 2.7 DNS (Domain Name System)

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

142.250.182.14).
Example: Uploading a website to a hosting server. • Makes the Internet user-friendly.

2.4 SMTP (Simple Mail Transfer Protocol) Without DNS, we would have to remember numbers instead of names.

• Used for sending emails.

• Works in combination with other mail protocols.
• Port number: 25 (sometimes 587 or 465 for secure versions). 2.8 TCP/IP (Transmission Control Protocol / Internet Protocol)

• The foundation of the Internet.

• TCP ensures reliable delivery (splits data into packets, reassembles them).
Example: Gmail sending email to Yahoo Mail. • IP ensures addressing and routing (delivers packets to the right device).
 3.4 Packet

Example: Sending a WhatsApp message uses TCP/IP in the background. • Data is not sent all at once, but broken into packets.
• Each packet has:
o Header (address info)
o Payload (data)
2.9 UDP (User Datagram Protocol) o Trailer (error check)

• 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. 3.5 Firewall

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

• Protects against hackers and viruses.
Example: Online games, video streaming, voice calls.

3.6 Cookies
3. Other Networking Jargons • Small files stored on your computer by websites.
• Used to remember login info, preferences, shopping carts.

3.1 IP Address
3.7 VPN (Virtual Private Network)
• A unique number that identifies a device on the Internet.
• Types: • Encrypts your internet connection.
o IPv4 (e.g., 192.168.1.1) – 32-bit address.
• Masks your IP address → gives privacy.
o IPv6 (e.g., 2001:0db8:85a3::8a2e:0370:7334) – 128-bit address.
• Often used for secure remote work.

3.2 Bandwidth
4. Table: Summary of Common Protocols
• 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. Port
Protocol Full Form Function Example
Number
HyperText Transfer Accessing
HTTP Transfers web pages 80
Protocol websites
3.3 Latency HyperText Transfer
HTTPS Secure websites 443 Online banking
Protocol Secure
• The delay between sending and receiving data. FTP File Transfer Protocol Upload/download files 21 Hosting websites
• Low latency = faster response (important in gaming, video calls).
Simple Mail Transfer
SMTP Send emails 25/587 Sending email
Protocol
POP3 Post Office Protocol v3 Retrieve emails 110 Outlook POP3
 Port • Host name: www.amazon.com
Protocol Full Form Function Example • IP address: 176.32.98.166
Number
(download & delete)
Possible Questions:
Internet Message Access
IMAP Retrieve emails (sync) 143/993 Gmail app
Protocol
• Short Answer: What is a host machine?
DNS Domain Name System Converts domain to IP 53 www.google.com • Long Answer: Explain how host names are resolved into IP addresses.
Transmission Control
Reliable delivery &
TCP/IP Protocol / Internet Varies Browsing, email
addressing
Protocol
Internet Architecture and Packet Switching
Fast, unreliable data Streaming,
UDP User Datagram Protocol Varies
transfer gaming
Internet Architecture:

• Based on the client/server model.

5. Exam-Oriented Questions • Uses routers, switches, and ISPs to connect devices.

Short Answer (2 Marks): Packet Switching:

1. Define protocol. Give one example. • Data is divided into packets before transmission.
2. What is the difference between POP3 and IMAP? • Each packet contains source & destination addresses.
3. What does DNS do? • Packets travel independently and are reassembled at the destination.

Long Answer (10 Marks): Example:

1. Explain different Internet protocols in detail with examples. Sending an email → broken into packets → travels across multiple routers →
2. Differentiate between HTTP and HTTPS. reassembled by recipient’s computer.
3. Compare TCP and UDP with examples.
4. Write short notes on: (a) Cookies (b) Firewalls (c) VPN. Possible Questions:

• Short Answer: What is packet switching?

• Long Answer: Explain Internet architecture with a neat diagram.
Host Machines and Host Names
Definition: The Client/Server Software Model
• Host Machine: A computer connected to a network that provides services.
• Host Name: The unique name assigned to a host machine.
1. Introduction
Explanation:

• Every host has an IP address.

The Client–Server Model is a fundamental architecture in computer networks and
• Host names are mapped to IPs through DNS.
distributed systems. In this model, clients request services (such as data or processing),
and servers provide those services.
Example:
 5. Examples
It is the basis for the Internet, web applications, email systems, and most modern
• Web browsing:
network-based applications.
o Client = Browser (Chrome, Firefox)
o Server = Web server (Apache, Nginx)
• Email communication:
o Client = Outlook, Gmail app
2. Basic Concept o Server = Mail server (SMTP, IMAP, POP3)
• Online banking:
• Client: o Client = Banking app
o A device or software that requests a service. o Server = Bank’s database + application server
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. 6. Advantages
1. Centralized control: Data and resources managed in one place.
2. Scalability: One server can serve multiple clients.
3. How it Works 3. Security: Easier to manage from a central server.
4. Maintenance: Updates and backups can be done on the server without affecting
1. The client initiates a request (e.g., typing a URL in the browser). clients directly.
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).

7. Disadvantages
Diagram: Client–Server Model 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.
+---------+ Request +---------+
| Client | ---------------------> | Server | 3. Cost: Servers require more powerful hardware and maintenance.
| (Browser)| | (Website)| 4. Performance bottleneck: Too many clients may slow down the server.
+---------+ <--------------------- +---------+
Response

8. Variants of Client–Server Model

4. Features of Client–Server Model
• Two-tier model: Client communicates directly with server.
• Service-based: Server provides services, clients consume them. • Three-tier model: Client → Application Server → Database Server (commonly
• Separation of concerns: Client handles user interface; Server handles data used in web apps).
storage/processing. • N-tier model: Extended with multiple layers for scalability.
• Network-dependent: Communication happens via a network
(LAN/WAN/Internet).
• Scalability: Multiple clients can connect to one server.
Diagram: Three-Tier Client–Server Model
+---------+ +----------------+ +------------------+ • Measured in bps (bits per second).
| Client | -----> | Application | -----> | Database Server |
• Common units: Kbps (kilobits/sec), Mbps (megabits/sec), Gbps (gigabits/sec).
| (Browser)| | Server | | (Data Storage) |
+---------+ +----------------+ +------------------+

Detailed Explanation:
9. Comparison with Peer-to-Peer (P2P)
• Bandwidth determines how much information can flow through a network
Feature Client–Server Model Peer-to-Peer (P2P) Model connection at once.
Control Centralized (server) Decentralized (all peers equal) • It is similar to a water pipe: the wider the pipe, the more water flows. Similarly,
Scalability Limited by server capacity High, but harder to manage higher bandwidth means more data can be transmitted.
• Internet Service Providers (ISPs) advertise their plans using bandwidth values
Examples Web apps, Email, Banking systems Torrent sharing, Blockchain
(e.g., 100 Mbps broadband).
Security Easier to manage centrally More difficult, less controlled • Bandwidth is often shared: multiple users on the same Wi-Fi reduce effective
speed.
• Two directions:
10. Exam Questions 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.
Short Answer (2 Marks):

1. Define the client–server model.

2. Give two examples of client–server applications. Example of Bandwidth Usage:
3. Differentiate between client and server.
• 1 Mbps: Suitable for email and basic browsing.
• 10 Mbps: Good for HD video streaming.
• 25 Mbps: Required for 4K video streaming.
Long Answer (10 Marks): • 100+ Mbps: Supports multiple users streaming and gaming simultaneously.

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. Diagram: Bandwidth Representation
4. Explain two-tier and three-tier client–server architecture with diagrams.
High Bandwidth (100 Mbps):
==========================
|■■■■■■■■■■■■■■■■■■■■■■■■|

Low Bandwidth (10 Mbps):

Bandwidth and Asynchronous Communication ========================
|■■■■■ |
1. Bandwidth
Definition: Factors Affecting Bandwidth:

Bandwidth is the maximum rate at which data can be transferred over a network 1. Network congestion (many users online reduces speed).
connection in a given time. It is the “capacity” of the communication channel. 2. Quality of hardware (old routers, poor cables reduce performance).
 3. Wired vs Wireless (Wi-Fi generally slower than Ethernet). • Real-time, immediate feedback.
4. Distance from server (closer servers provide faster response). • Reduces chances of miscommunication.
• Best for urgent and collaborative work.

Advantages of High Bandwidth:

Disadvantages:
• Smooth video calls without lag.
• Faster downloads/uploads. • Both users must be available at the same time.
• Supports multiple users simultaneously. • Different time zones make it inconvenient.
• Essential for online classes, cloud storage, and remote work. • Sometimes stressful because response is expected immediately.

2. Synchronous Communication 3. Asynchronous Communication

Definition: Definition:

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

Explanation: Explanation:

• Both parties must be present simultaneously. • The message is stored and delivered later when the receiver is available.
• Interaction is instant – message is sent and immediately received/responded to. • Allows flexibility; participants respond when convenient.
• Useful when immediate feedback is required. • Useful for remote teams or communication across time zones.

Examples: Examples:

• Phone calls. • Email.

• Zoom or Google Meet live video classes. • WhatsApp messages (if receiver is offline).
• Live customer support chat. • Online discussion forums (Moodle, Reddit).
• Face-to-face conversations. • Recorded video lectures.

Advantages: Advantages:
 • Flexible – participants reply at their own convenience. Quick Example (Practical Bandwidth Calculation):
• Suitable for global communication.
• Allows time to think and prepare detailed responses. • A 100 MB file = 800 Megabits (since 1 Byte = 8 bits).
• On a 10 Mbps connection:
o Time to download = 800 ÷ 10 = 80 seconds.

Disadvantages:

• Delayed responses (not suitable for urgent needs).

• May lead to miscommunication if replies are unclear.
6. Exam Questions
• Not effective for instant decision-making.

Short Answer (2 Marks):

4. Comparison Table: Synchronous vs Asynchronous 1. Define bandwidth.

2. Give one example each of synchronous and asynchronous communication.
Feature Synchronous Communication Asynchronous Communication 3. What is the unit of bandwidth?
Timing Real-time Time-delayed 4. Differentiate between upload and download bandwidth.
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 Long Answer (10 Marks):
Limitation Requires availability of both users Responses may be delayed
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).
5. Data Measurement Units for Bandwidth 4. Discuss the advantages and disadvantages of synchronous and asynchronous
communication.

Since bandwidth is measured in bits per second, understanding data size units is
important.
Working with E-mail
Unit Equivalent in Bytes
Definition:
1 Kilobyte (KB) 1,024 Bytes
1 Megabyte (MB) 1,024 KB = 1,048,576 Bytes Email (Electronic Mail) is a method of sending digital messages across the Internet.
1 Gigabyte (GB) 1,024 MB = 1,073,741,824 Bytes
1 Terabyte (TB) 1,024 GB = 1,099,511,627,776 Bytes Components:
1 Petabyte (PB) 1,024 TB = 1,125,899,906,842,624 Bytes
• Email address: username@domain.com
1 Exabyte (EB) 1,024 PB = 1,152,921,504,606,846,976 Bytes
• Email client: Software (e.g., Outlook, Gmail).
1 Zettabyte (ZB) 1,024 EB • Email server: Stores and forwards mail.
1 Yottabyte (YB) 1,024 ZB
Possible Questions:
 • Short Answer: Define email. 3.
• Long Answer: Explain how email works with example.
Attachments

• Additional files (documents, images, audio, video, etc.) that are sent along with
Anatomy of an E-mail Message the email.
• Common formats: .pdf, .docx, .jpg, .mp3.

Definition:
4.
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, Signature
and understood.
• Custom block at the end of an email.
• Usually includes:
o Name of sender
1. o Designation
o Contact information
o Organization details
Header Section

• Contains technical and descriptive information about the message.

• Includes:
o From: Sender’s email address (e.g., professor@sju.edu). Example Layout:
o To: Recipient’s email address (e.g., student@gmail.com).
+---------------------------------------------------+
o CC (Carbon Copy): Additional recipients (visible to all). | From: professor@sju.edu |
o BCC (Blind Carbon Copy): Hidden recipients (invisible to others). | To: student@gmail.com |
o Date/Time: When the message was sent. | Cc: hod@sju.edu |
o Subject: A short summary of the message. | Subject: Assignment Submission Reminder |
| Date: 17-Aug-2025 |
+---------------------------------------------------+
| Dear Student, |
| Please submit your assignment by Friday. |
2. | |
| Regards, |
| Prof. George Gabriel |
Body Section | Dept. of Computer Science |
+---------------------------------------------------+
• The main content of the email. | Attachment: assignment_instructions.pdf |
+---------------------------------------------------+
• Can be plain text or HTML formatted (with colors, fonts, images).
• Structured as:
o Salutation → “Dear Student,”
o Message Content → The actual communication. Advantages of Understanding Email Anatomy:
o Closing → “Regards, Prof. George”
• Helps students identify important information quickly.
• Avoids miscommunication by properly using Subject, CC, and BCC.
• Improves professional communication skills.
 Selecting an email from Gmail opens message details.

Possible Exam Questions Possible Questions:

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

Short Answer (2 Marks):

1. What is the purpose of the Subject line in an email? Sending a New Mail Message
2. Differentiate between CC and BCC in email.
Steps:

1. Click “Compose” in Gmail.

Long Answer (10 Marks):
2. Enter recipient’s email address.
3. Add subject and body.
1. Explain the anatomy of an email message with a neat diagram.
4. Attach files (if required).
2. Describe the role of the header, body, attachments, and signature in an email
5. Click “Send”.
message.
Possible Questions:

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

Viewing Your Inbox • Long Answer: Describe the process of composing and sending an email.

• Inbox: The folder containing received emails.

• Allows sorting by date, sender, or subject.
• Supports searching and archiving.
Replying to and Forwarding E-mail Messages
Example:
• Reply: Respond to sender directly.
• Reply All: Respond to all recipients.
Logging into Gmail → Inbox shows new and old messages.
• Forward: Send received email to a new recipient.
Possible Questions:
Example:
• Short Answer: What is an inbox?
If a teacher sends instructions via email, you can reply to clarify doubts or forward to
• Long Answer: Explain the functions available in an inbox.
friends.

Possible Questions:
Viewing Individual Mail Messages • Short Answer: Differentiate between reply and forward.
• Long Answer: Explain how to reply and forward an email with examples.
• Clicking on a mail displays full content.
• Options available: reply, forward, delete, mark as unread.

Example: