Unit -1 Lecture -1

Introduction to HTML & Internet

Introduction:

HTML (Hypertext Markup Language) is the standard language used to create and design
documents on the web. It is used to structure content and layout of web pages by defining
various elements like headings, paragraphs, links, images, and other multimedia
elements.

History of internet:

1960s: Seeds of the Internet

• The concept of connected computer networks emerges during this period.
• ARPANET, funded by the US Department of Defence, is created to connect
computers at research institutions.
1970s: Birth of the Internet
• TCP/IP, the communication protocol that allows different networks to talk to
each other, is developed.
• On January 1, 1983, ARPANET and other networks officially switch to
TCP/IP, marking the birth of the Internet as we know it.
1980s: From Research to Public Use
• The internet expands beyond military and academic use, with universities and
research centers connecting.
• Email becomes a popular communication tool.
1990s: The World Wide Web Revolution
• Tim Berners-Lee invents the World Wide Web, a hypertext system that allows
users to navigate information easily using web browsers.
• Mosaic, the first user-friendly web browser, is released, making the web
accessible to a wider audience.
• The internet experiences explosive growth, with the rise of search engines, e-
commerce, and online communication platforms.
2000s: The Modern Internet
• The internet continues to evolve rapidly, with high-speed connections, social
media, mobile internet, and the growth of cloud computing.
 • The internet becomes an essential part of everyday life for many people
around the world.

2020s: IoT and 5G

• 2020s: The Internet of Things (IoT) connected everyday devices, and 5G networks
offered faster, more reliable connections.

Internet design principles:

Internet design principles are foundational concepts that guide the architecture,
development, and maintenance of the Internet. Here are some of the key principles:

1. End-to-End Principle
o Concept: Core network functions should be implemented at the endpoints of a
communication system, rather than in the intermediary nodes.
o Advantage: Simplifies the network design, making it more robust and
scalable by reducing complexity in the core of the network.
2. Robustness Principle (Postel's Law)
o Concept: "Be conservative in what you send, and liberal in what you accept."
o Advantage: Ensures interoperability and stability by encouraging systems to
handle unexpected or non-standard inputs gracefully.
3. Decentralization
o Concept: The Internet is designed without a central governing body, allowing
distributed control and management.
o Advantage: Enhances resilience and fault tolerance, as the network can
continue to operate even if parts of it fail.
4. Scalability
o Concept: The Internet's architecture is designed to accommodate a vast
number of devices and networks.
o Advantage: Supports growth and evolution without requiring significant
changes to the core infrastructure.
5. Interoperability
o Concept: The Internet is built on open, non-proprietary standards that ensure
compatibility between different systems and devices.
o Advantage: Promotes innovation and inclusivity by allowing diverse entities
to participate and build upon the existing infrastructure.
6. Flexibility and Adaptability
o Concept: The Internet's protocols and technologies are designed to adapt to
new uses, applications, and technological advancements.
o Advantage: Supports continuous improvement and adoption of new
technologies without disrupting existing services.
7. Security and Privacy
o Concept: Although originally designed for openness, modern Internet design
incorporates security measures to protect data and privacy.
o Advantage: Ensures safe and trustworthy communication, which is crucial for
personal, business, and governmental activities.
8. Quality of Service (QoS)
 o Concept: Mechanisms are in place to manage network traffic and ensure the
performance of critical applications.
o Advantage: Enhances user experience by prioritizing important data and
managing congestion.

These principles collectively ensure that the Internet remains robust, scalable, and capable of
evolving with changing technological and societal needs.

Internet Protocols:

The internet relies on a complex set of protocols, which are essentially rules and
specifications that govern how data is formatted, transmitted, and received across
networks. These protocols work together at different layers to ensure seamless
communication. Here's a breakdown of some key internet protocols:

1. TCP / IP:

TCP/IP, or the Transmission Control Protocol/Internet Protocol, is the foundation for

communication on the internet. It's a suite of protocols that define how data is
formatted, addressed, transmitted, and received across networks. Here are some areas
where TCP/IP is widely used:

• The Internet: TCP/IP is the underlying protocol that enables all the
communication that happens on the web, from browsing websites to sending
emails.

• Local Area Networks (LANs): Many private networks within businesses and
organizations also use TCP/IP for communication between computers and
devices.

Overall, TCP/IP is an essential component for any network that needs to connect and
share data across devices.

Examples:

• Web browsing (HTTP): When you visit a website, TCP/IP handles the data
transfer between your computer and the web server. HTTP (Hypertext Transfer
Protocol) runs on top of TCP/IP and defines the format of the data exchange.
 • Email (SMTP & POP3): Sending and receiving emails involve two protocols:
SMTP (Simple Mail Transfer Protocol) for sending and POP3 (Post Office Protocol)
for receiving. Both rely on TCP/IP for reliable data delivery.

• File Transfer (FTP): Transferring files between computers utilizes FTP (File
Transfer Protocol). TCP/IP ensures the file gets broken down into packets,
transmitted securely, and reassembled correctly on the receiving end.

• Online Gaming: Many online games rely on TCP/IP for real-time communication
between players and game servers. This ensures smooth gameplay and
synchronized experiences.

• Video Streaming: Streaming services like Netflix or YouTube use TCP/IP for video
delivery. Different protocols like RTP (Real-time Transport Protocol) might be
used on top of TCP/IP for efficient video transmission.

2. FTP

Imagine you're a web developer working on a new website. You've created all the cool
HTML files, images, and stylesheets on your local computer. Now, you need to transfer
those files to the web server so people can visit your website. That's where FTP comes
in.

Here's how you might use FTP in this scenario:

1. FTP Client: You'll need an FTP client program. Popular free options include
FileZilla or WinSCP. These programs act as a bridge between your computer and
the FTP server.

2. Server Details: You'll get login credentials (server address, username, and
password) from your web hosting provider. These details are specific to the
server where your website files will reside.

3. Connecting: Open your FTP client and enter the server address, username, and
password. If successful, you'll see two panels in the program window.

• Local Panel: This shows the files and folders on your own computer.

• Remote Panel: This shows the files and folders on the remote server (where your
website will be hosted).

4. Uploading Files: Navigate to the folder on your local computer where your
website files are stored. In the remote panel, locate the directory on the server
where you want to upload your website files (often named "public_html" or
"www").
 5. Drag and Drop: Simply drag and drop the files you want to upload from your
local panel to the designated folder on the remote panel. The FTP client will
handle the transfer, and you might see a progress bar for each file.

6. Verification: Once uploaded, you can often preview your website by visiting its
address in your web browser. This verifies that the files have transferred correctly
and your website is accessible online.

[Link]:

SMTP, which stands for Simple Mail Transfer Protocol, is the workhorse behind the
scenes of email delivery. It's a set of rules that computers use to send emails between
servers. Here's a breakdown of how it works:

The Email Journey with SMTP:

1. Composing the Email: You write your email in your email client (like Gmail or
Outlook) and hit send.

2. Connecting to the Server: Your email client establishes a connection with your
email provider's outgoing mail server (SMTP server) using SMTP. This connection
typically happens on port 587 or 465.

3. Exchange of Information: The email client and server talk using SMTP
commands. The client sends information like your email address, recipient's
address, email subject, and the email body itself.

4. Server Verification: The SMTP server verifies your identity (usually through login
credentials) and checks if the recipient's email address is valid.

5. Delivery Route: The server determines the recipient's email provider and figures
out the best route to deliver the email. This might involve connecting to other
mail servers along the way.

6. Transfer and Storage: The email gets transferred to the recipient's email
provider's server using SMTP again. The recipient's server then stores the email
until they check their inbox.

7. SMTP is for sending emails, not receiving them. Separate protocols like POP3 or
IMAP are used for retrieving emails from the server to your email client.

[Link]:
Telnet, short for "Teletype Network", is a network protocol that allows you to remotely
access and control another computer. It works like a virtual terminal, giving you a
command-line interface on the remote machine as if you were sitting right in front of it.

client-server communication:

Client-server communication is a foundational model in networking where two software

entities, the client and the server, interact to exchange data and perform tasks over a
network. Here’s a detailed explanation with an example:

Example: Web Browser (Client) and Web Server

Client Side (Web Browser):

1. Request Initialization:

o A user opens a web browser (e.g., Chrome, Firefox) and enters a URL (e.g.,
[Link] in the address bar.

o The browser acts as the client in this scenario.

2. Sending a Request:

o The browser sends an HTTP (or HTTPS) request to the web server
identified by the URL.

o The request includes specific details like the HTTP method (GET, POST,
etc.) and headers (metadata about the request).

3. Waiting for Response:

o The browser waits for the server to process the request and send back a
response.

Server Side (Web Server):

4. Handling the Request:

o The web server (e.g., Apache, Nginx) receives the HTTP request from the
client (browser).

o It interprets the request, retrieves the requested resource (e.g., HTML

page, image, data), or performs the requested action (e.g., processing
form data).

5. Generating a Response:

o The server generates an HTTP response containing the requested

resource or result of the action.
 o The response includes an HTTP status code (e.g., 200 OK for successful
requests) and headers (metadata about the response).

6. Sending the Response:

o The server sends the HTTP response back to the client (web browser) over
the network.

Client Side (Web Browser):

7. Receiving and Displaying the Response:

o The browser receives the HTTP response from the server.

o It processes the response, interprets HTML, CSS, and JavaScript content,

and renders the web page to the user.

8. User Interaction:

o The user interacts with the rendered web page (clicks links, fills forms,
etc.), and the process may repeat as the browser sends new requests to
the server based on user actions.

Web system architecture:

Web system architecture refers to the structure and design of components that make
up a web application or website. It encompasses various layers, components, and
technologies that work together to deliver functionality, process data, and interact with
users. Here’s an overview of the typical components and their roles in web system
architecture:

Components of Web System Architecture

1. Client-side Components:
 o Web Browser (Client): The interface through which users interact with
the web application. It renders HTML, CSS, and JavaScript provided by the
server.

o HTML/CSS/JavaScript: These are the core technologies used to

structure, style, and add interactivity to web pages.

o Client-side Frameworks/Libraries: Examples include [Link], Angular,

or [Link], which provide tools and abstractions to build rich, dynamic user
interfaces.

2. Server-side Components:

o Web Server: The software that handles incoming HTTP requests from
clients (browsers) and responds with HTML pages, resources, or data.

o Application Server: Manages the business logic and processes of the

web application. It may handle tasks like authentication, database
access, and server-side processing.

o Database: Stores and manages data that the web application needs.
Common database systems include MySQL, PostgreSQL, MongoDB, etc.

o Server-side Scripting: Languages like PHP, Python (Django), Ruby (Ruby

on Rails), Java (Spring), or [Link] are used to create dynamic content
and handle server-side operations.

3. Networking Components:

o Protocols: HTTP/HTTPS protocols define how clients and servers

communicate over the Internet. HTTPS ensures secure data transmission
using SSL/TLS encryption.

o Load Balancer: Distributes incoming client requests across multiple

servers to optimize performance, scalability, and reliability.

4. Middleware:

o Web Services: Allow different systems and applications to communicate

and share data over the Internet. Examples include SOAP (Simple Object
Access Protocol) and REST (Representational State Transfer).

Web System Architecture Patterns

• Client-Server Architecture: The separation of concerns between client-side

and server-side components.

• Microservices Architecture: Breaking down the application into smaller,

independent services that communicate through APIs.
• Serverless Architecture: Using cloud services to handle server-side logic,
scalability, and maintenance automatically.

• Single Page Application (SPA): A client-side application that loads once and
dynamically updates content without refreshing the entire page.
Evaluation of WEB:

The evolution of the web spans several decades, marked by significant technological
advancements, standards development, and shifts in user behavior. Here's a brief
overview of the key stages in the evolution of the web:

1. Web 1.0 (Early 1990s - Early 2000s)

• Description: Web 1.0, also known as the "static web," emerged in the early
1990s with the advent of the World Wide Web.

• Characteristics:

o Static Content: Websites consisted mainly of static HTML pages with text
and basic formatting.

o One-way Communication: Websites were informational, offering

content to users without interaction or dynamic updates.

o Primary Users: Usage was predominantly passive, with users consuming

information rather than generating or sharing content.

• Key Technologies: HTML (HyperText Markup Language), early web browsers

(e.g., Mosaic, Netscape Navigator), HTTP (HyperText Transfer Protocol).

2. Web 2.0 (Mid-2000s - Late 2000s)

• Description: Web 2.0 marked a transition towards dynamic, interactive, and

user-centric web experiences.

• Characteristics:

o User Participation: Increased user engagement through social media,

blogging, wikis, and forums.

o User-generated Content: Enabled users to create, share, and

collaborate on content (e.g., social networking sites, YouTube).

o Rich User Interfaces: Adoption of AJAX (Asynchronous JavaScript and

XML) allowed for smoother, more responsive web applications.

o Personalization: Websites began to tailor content based on user

preferences and behavior.

• Key Technologies: AJAX, CSS (Cascading Style Sheets), JavaScript

frameworks/libraries (e.g., jQuery), RSS (Really Simple Syndication).

3. Web 3.0 (Late 2000s - Present)

 • Description: Web 3.0, often referred to as the "semantic web" or "linked data,"
focuses on making web content more meaningful and interconnected.

• Characteristics:

o Semantic Web: Emphasis on metadata, ontologies, and linked data to

enable better understanding and context.

o Artificial Intelligence (AI) Integration: Machine learning, natural

language processing (NLP), and AI-driven applications enhance user
experiences (e.g., virtual assistants, personalized recommendations).

o Internet of Things (IoT): Integration of web technologies with physical

devices, enabling data exchange and control over the internet.

• Key Technologies: RDF (Resource Description Framework), SPARQL (SPARQL

Protocol and RDF Query Language), AI/ML frameworks (e.g., TensorFlow,
PyTorch), IoT protocols (e.g., MQTT)

Web clients and servers:

n the context of the World Wide Web, the interaction between clients and servers forms
the foundation of how information is accessed, exchanged, and displayed. Here’s an
overview of web clients and servers:

Web Clients

Definition: Web clients are software applications (typically web browsers) that request
and display web resources from web servers. Users interact with web clients to access
websites, web applications, and other online content.

Key Characteristics:
 1. User Interface: Web clients provide a graphical interface (GUI) for users to
interact with web content. This includes rendering HTML, CSS, JavaScript, and
multimedia content like images and videos.

2. Requesting Resources: Clients initiate HTTP (or HTTPS) requests to servers to

retrieve web pages, files, or data. These requests specify the URL (Uniform
Resource Locator) of the resource being requested.

3. Interactivity: Modern web clients support dynamic interactions through

JavaScript, allowing for real-time updates, form submissions, and interactions
with server-side applications.

4. Rendering: Web browsers interpret HTML documents received from servers and
render them into visual web pages that users can navigate and interact with.

Web Servers

Definition: Web servers are computer systems or software applications that store,
process, and deliver web content to clients over the Internet.

Key Characteristics:

1. Storing Content: Servers host web resources such as HTML files, images, CSS
stylesheets, JavaScript files, and other multimedia content. These resources are
stored in directories accessible to clients.

2. Processing Requests: Servers receive HTTP requests from clients, interpret the
requests, and fetch the requested resources or execute server-side scripts to
generate dynamic content.

3. Delivering Responses: After processing requests, servers send HTTP responses

back to clients. Responses include the requested content along with metadata
such as HTTP status codes, headers, and cookies.

4. Server-Side Processing: Servers execute server-side scripts (e.g., PHP, Python,

Ruby) to perform tasks like database queries, user authentication, and
application logic processing before generating and delivering dynamic web
pages to clients.

Example Interaction

1. Client Request:

o A user enters a URL (e.g., [Link] into a web browser.

o The web browser sends an HTTP request to the server identified by the
URL.

2. Server Response:
 o The web server receives the HTTP request and processes it.

o If the request is for a static resource (e.g., an HTML page), the server
retrieves the file and sends it back as an HTTP response.

o If the request requires server-side processing (e.g., submitting a form), the

server executes scripts to handle the request, access databases, and
generate a dynamic response.

3. Client Display:

o The web browser receives the HTTP response from the server.

o It renders the HTML content, applies CSS styles, and executes JavaScript
to display the web page to the user.

Static and Dynamic Web Applications

Static Web Applications

● Content: Fixed and doesn't change unless manually updated.

● Technology: Primarily HTML, CSS, and sometimes JavaScript.

● Performance: Generally faster because content is pre-rendered and stored on

the server.

● Usage: Suitable for websites with information that doesn't change frequently,
like portfolios or blogs.

Dynamic Web Applications

● Content: Changes based on user interaction, data, and other factors.

● Technology: HTML, CSS, JavaScript, server-side languages (PHP, Python, Ruby,

etc.), databases (MySQL, MongoDB, etc.).

● Performance: Can be slower due to the need to fetch data from the server and
render it dynamically.

● Usage: Suitable for interactive websites like social media platforms, e-

commerce sites, and web applications.

Front-End and Back-End Web Development

Front-End Development

● Focus: Client-side; what users see and interact with in the browser.
 ● Technologies:

○ HTML (HyperText Markup Language): The structure of the web page.

○ CSS (Cascading Style Sheets): The style and layout of the web page.

○ JavaScript (JS): The behavior and interactivity of the web page.

● Frameworks/Libraries: React, Angular, [Link].

Back-End Development

● Focus: Server-side; what happens behind the scenes on the server.

● Technologies:

○ Server-side Languages: [Link], Python, PHP, Ruby, Java, etc.

○ Databases: MySQL, PostgreSQL, MongoDB, etc.

○ APIs (Application Programming Interfaces): REST, GraphQL.

● Frameworks: [Link] (for [Link]), Django (for Python), Laravel (for PHP).

HTML CSS JS XML

HTML (HyperText Markup Language)

● Purpose: Structure of web pages.

● Features: Tags and elements to define content, headings, paragraphs, links,

images, etc.

CSS (Cascading Style Sheets)

● Purpose: Style and layout of web pages.

● Features: Selectors, properties, and values to define colors, fonts, spacing,

positioning.

JavaScript (JS)

● Purpose: Interactivity and dynamic behavior of web pages.

● Features: Functions, events, DOM manipulation, AJAX for asynchronous

requests, ES6+ features (classes, modules, promises).

XML (eXtensible Markup Language)

● Purpose: Store and transport data.

 ● Features: Custom tags to define data, used for configuration files, data
interchange between systems (e.g., SOAP web services).

HTTP

HTTP (HyperText Transfer Protocol) is the way web browsers and servers communicate
with each other.

It's how you load websites and send data over the internet

1. Request-Response Model:

○ Client: Usually your web browser. It sends a request for a web page.

○ Server: The computer hosting the website. It responds with the requested
web page.

2. Stateless:

○ Each time you load a page, it's a new request. The server doesn't
remember previous requests.

Common HTTP Methods

3. GET: Ask for data (like a web page).

4. POST: Send data (like a form submission).

5. PUT: Update data.

6. DELETE: Remove data

● Status Codes:
200 OK: Everything worked fine.

● 404 Not Found: The page wasn't found.

● 500 Internal Server Error: Something went wrong on the server

HTTPS:

HTTPS stands for Hypertext Transfer Protocol Secure. It's the secure version of the HTTP
protocol, the foundation of communication between web browsers and websites.

HTTPS encrypts information sent between your browser and the site you visit, making it
much harder for eavesdroppers to steal your data.

HTTPS is essential for secure online interactions, especially when you're:

● Accessing financial accounts (banks, investment platforms)

 ● Submitting login credentials (email, social media)

● Entering personal information (online forms, healthcare portals)

● Shopping online (e-commerce websites)

SOAP:

SOAP (Simple Object Access Protocol) is a protocol used for exchanging structured
information in web services.

Structure of a SOAP Message:

A SOAP message consists of four main parts:

1. Envelope:

○ The root element that defines the XML document as a SOAP message.

2. Header (Optional):

○ Contains application-specific information like authentication or

transaction management.

3. Body:

○ Contains the actual message intended for the recipient. This is where the
main data is found.

4. Fault (Optional):

○ Used for error handling and provides information about errors that occur
during message processing.

How SOAP Works:

1. Client Sends Request:

○ The client application sends a SOAP request to the server with the desired
operation and data.

2. Server Processes Request:

○ The server processes the request and performs the necessary operations.

3. Server Sends Response:

○ The server sends a SOAP response back to the client with the requested
data or a status message.

REST:
REST (Representational State Transfer) is a way to build web services that are simple
and easy to use.

It relies on standard HTTP methods to interact with resources (data) on a server.