SRI RAMAKRISHNA ENGINEERING COLLEGE

[Educational Service : SNR Sons Charitable Trust]

[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University, Chennai]
[ISO 9001:2015 Certified and all Eligible Programmes Accredited by NBA]
VATTAMALAIPALAYAM, N.G.G.O. COLONY POST, COIMBATORE – 641 022.

Department of Information Technology

20IT212 – INTERNET PROGRAMMING

PRESENTATION BY
[Link] ,ASP/IT
[Link], AP/IT
20IT212 - INTERNET PROGRAMMING 2
 20IT212 – INTERNET PROGRAMMING

Module I : INTERNET AND WEB DESIGNING BASICS

12

Web Basics and Overview: Introduction to Internet,

World Wide Web, Web Browsers, URL, Introduction to
Client/Server Computing –Basic internet protocols –
Bootstrap: Scaffolding – CSS –Layout components – XML:
Language basics, Structuring: Schema – DTD

20IT212 - INTERNET PROGRAMMING 3

 20IT212 – INTERNET PROGRAMMING

Module II : CLIENT SIDE SCRIPTING

18
JavaScript : Control Structures – Arrays – Strings – Functions –
Objects – JSON – Forms – Angular : Jumping into TypeScript–Angular
Architect – Angular life cycle – Angular routing –Learning the Different
Types – Understanding Interfaces – Implementing Classes –
Implementing Modules – Understanding Functions –Understanding
Angular –Using the Angular CLI – Creating a Basic Angular Application –
Angular Components – Component Configuration – Building a Template
– Injecting Directives – Expressions – Using Expressions – Introducing
[Link] –Setting up the Environments. Basic concepts of [Link]–
Creating first React component – React Lifecycle – Working with
Data – Adding Server Side Rendering to Your React Application
20IT212 - INTERNET PROGRAMMING 4
 20IT212 – INTERNET PROGRAMMING

Module III : SERVER SIDE PROGRAMMING

15
[Link]: Understanding [Link] – Installing [Link] –
Working with Node Packages – Creating a [Link]
Application – Writing Data to the Console – Understanding
the [Link] Event Model – Working with JSON – Processing
URLs – Processing Query Strings and Form Parameters –
Understanding Request, Response, and Server Objects –
Implementing HTTP Clients and Servers in [Link] –
Implementing HTTPS Servers and Clients. Restful API – REST
Constraints – [Link] and REST. Database connectivity using
MySQL –Accessing and Manipulating Database
20IT212 - INTERNET PROGRAMMING 5
20IT212 – INTERNET PROGRAMMING

20IT212 - INTERNET PROGRAMMING 6

20IT212 – INTERNET PROGRAMMING

20IT212 - INTERNET PROGRAMMING 7

 Assessment and Evaluation Criteria

PO Attainment
Direct Assessment
Weightage
CO to be
Internal Assessment Duration Marks
addressed
Internal Test I 120min 12.5 CO 1-3 Internal
Internal Test II 120min 12.5 CO 4-6 Assessment
Continuous Internal
Examinations (CIE)
ALMs
Surprise Quiz
- 5 CO 3,4 marks
calculated to
40
online - 5 CO 1,2 40
(Minimum 2)
Assignment Test 45 min 5 CO 5,6
Semester End 10 - One Marks External
Examinations
(SEE)
5 – Three Marks
5 – Fifteen Marks
180 min 100 CO 1-6 Assessment
reduced to 60
60
Total 100%
20IT212 - INTERNET PROGRAMMING 8
 INTERNET PROGRAMMING

 At its core, internet programming involves creating and

maintaining websites and web applications that are accessible
via the world wide web(www).

 The process begins with front-end development which focuses on

designing and implementing the user interface and user
experience of a website or web application.

 Front end developers use a combination of languages such as

HTML, CSS and Javascript to create visually appealing and
interactive interfaces that engage users and facilitate seamless
navigation.
20IT212 - INTERNET PROGRAMMING 9
STAGES OF WEB APPLICATION

20IT212 - INTERNET PROGRAMMING 10

 WEB BASICS AND OVERVIEW

➔ Usually called as web(collection of different websites) you can

access through the internet
➔ Website - It is made up of related text, images and other resources
➔ Purpose of website- News platform, advertisement , an online
library and educational site
➔ It can also resemble other forms of media like newspaper articles or
television programs

20IT212 - INTERNET PROGRAMMING 11

 NETWORK
 A network is the combination of two or more computers and their connecting
links. A physical network is the hardware (equipment such as adapters,
cables, and telephone lines) that makes up the network.
 The software and the conceptual model make up the logical network.
Different types of networks and emulators provide different functions
 Computer networking refers to interconnected computing devices that can
exchange data and share resources with each other. These networked devices
use a system of rules, called communications protocols, to transmit
information over physical or wireless technologies.

20IT212 - INTERNET PROGRAMMING 12

20IT212 - INTERNET PROGRAMMING 13
USAGE OF INTERNET

20IT212 - INTERNET PROGRAMMING 14

INTERNET

20IT212 - INTERNET PROGRAMMING 15

 INTERNET

 It is a system architecture that has revolutionized mass

communication, mass media, and commerce by allowing
various computer networks around the world to interconnect.
Sometimes referred to as a “network of networks”.
 It supports human communication via social media, electronic
mail(e-mail), “chat rooms,” newsgroups, and audio and video
transmission and allows people to work collaboratively at many
different locations. It supports access to digital information by
many applications, including the World Wide Web.

20IT212 - INTERNET PROGRAMMING 16

EARLY NETWORKS
(ARPA and DARPA)

20IT212 - INTERNET PROGRAMMING 17

 ADVANCED RESEARCH PROJECTS AGENCY (ARPA)
(1960s)

 ARPANET was one of the first general-purpose computer networks. It

connected time-sharing computers at government-supported research sites,
principally universities in the United States, and it soon became a critical
piece of infrastructure for the computer science research community in the
United States.
 Tools and applications - such as the simple mail transfer protocol (SMTP,
commonly referred to as e-mail), for sending short messages, and the file
transfer protocol (FTP), for longer transmissions - quickly emerged.
 In order to achieve cost-effective interactive communications between
computers, which typically communicate in short bursts of data, ARPANET
employed the new technology of packet switching.

20IT212 - INTERNET PROGRAMMING 18

 DEFENSE ADVANCEDANCED RESEARCH
PROJECTS AGENCY(DARPA)

 (Defense Advanced Research Projects Agency; formerly ARPA)

supported initiatives for ground-based and satellite-based packet networks.
 The ground-based packet radio system provided mobile access to computing
resources, while the packet satellite network connected the United States with
several European countries and enabled connections with widely dispersed
and remote regions.

20IT212 - INTERNET PROGRAMMING 19

 Internet Origin:
The internet as we know it today is a vast, interconnected
network that has transformed how we communicate, work,
learn, and interact. But it wasn't always this way.
The origin of the internet dates back to the 1950s when the
world was grappling with the Cold War, and researchers sought
to create a communication system that could withstand
disruptions.
From its humble beginnings as a military project to the global
web it is now, the history of the internet is a tale of human
ingenuity, collaboration, and the relentless pursuit of
connectivity and a fascinating journey of innovation,
collaboration, and rapid technological advancement.
20IT212 - INTERNET PROGRAMMING 20
20IT212 - INTERNET PROGRAMMING 21
 Key Milestones in Internet History
1969: Launch of ARPANET, the first operational packet-switching
network.
1971: The first email is sent by Ray Tomlinson.
1983: Adoption of TCP/IP as the standard protocol for ARPANET.
1989-1990: Tim Berners-Lee invents the World Wide Web.
1993: The first graphical web browser, Mosaic, is released.
1998: Google is founded, revolutionizing search engines.
2007: The iPhone introduces widespread mobile Internet access.
2010s: Rise of cloud computing, social media, and streaming
services.

20IT212 - INTERNET PROGRAMMING 22

20IT212 - INTERNET PROGRAMMING 23
 FAQs
Who is known as the father of the Internet?
The Fathers of the Internet: Vint Cerf and Bob Kahn

Who controls the Internet?

The Internet is not controlled by any single person, organization, or country. Instead, it
is governed through a multi-stakeholder model involving technical bodies,
governments, private companies, academia, and civil society.

What is the Difference Between the World Wide Web and the Internet?
The Internet is the global network of networks that connects millions of computers
and devices worldwide. The Web is a service that runs on the Internet and allows
users to access and share information via web pages.

20IT212 - INTERNET PROGRAMMING 24

WORLD WIDE WEB

20IT212 - INTERNET PROGRAMMING 25

 WORLD WIDE WEB(WWW)
 The World Wide Web (WWW), often called the Web, is a system of interconnected webpages
and information that you can access using the Internet.
 It was created to help people share and find information easily, using links that connect
different pages together.
 The Web allows us to browse websites, watch videos, shop online, and connect with others
around the world through our computers and phones.
 All public websites or web pages that people may access on their local computers and other
devices through the internet are collectively known as the World Wide Web or W3.
 Users can get further information by navigating to links interconnecting these pages and
documents. This data may be presented in text, picture, audio, or video formats on the
internet.

20IT212 - INTERNET PROGRAMMING 26

 FACT about WWW
 The first website ever is still online! You can visit it at
"[Link]
 There are over 1.5 billion websites in the world, and that
number grows every day.
 Google Chrome is used by more than 60% of people
browsing the Web.
 The Web is available in over 150 languages, so you can
explore in your language or learn a new one!

20IT212 - INTERNET PROGRAMMING 27

History of the WWW

20IT212 - INTERNET PROGRAMMING 28

Key Parts of the Web

The Web has three main building blocks that make it work:
URL (Uniform Resource Locator): This is the address of a
webpage, like [Link] It tells your browser
exactly where to find the page.
HTTP (Hypertext Transfer Protocol): This is the set of
rules that lets your browser and the server talk to each other
to send and receive webpages.
HTML (Hypertext Markup Language): This is the code that
tells browsers how to display a webpage, including where to
put text, pictures, and links.

20IT212 - INTERNET PROGRAMMING 29

 Working of World Wide Web(WWW)
 A Web browser is used to access web pages. Web browsers can be
defined as programs which display text, data, pictures, animation
and video on the Internet. Hyperlinked resources on the World Wide
Web can be accessed using software interfaces provided by Web
browsers.
 Initially, Web browsers were used only for surfing the Web but now
they have become more universal.
 The below diagram indicates how the Web operates just like
client-server architecture of the internet.
 When users request web pages or other information, then the web
browser of your system request to the server for the information and
then the web server provide requested services to web browser
back and finally the requested service is utilized by the user who
made the request. 20IT212 - INTERNET PROGRAMMING 30
 INTERNET VS WORLD WIDE WEB(WWW)

Aspect World Wide Web Internet

A collection of webpages and websites you access with a

What It Is browser.
A global network connecting computers.

Started 1989 by Tim Berners-Lee at CERN. 1960s as ARPANET.

To share and explore information like text, images, and

Purpose videos.
To connect devices and share data.

How You Use It Through browsers like Chrome or Firefox. Through any connected device for email, apps, etc.

Example Visiting a website like Wikipedia. Sending an email or streaming a video.

20IT212 - INTERNET PROGRAMMING 31

20IT212 - INTERNET PROGRAMMING 32
 Challenges of the Web
 Privacy: Some websites collect information about you, like what you
search for, and might share it without asking.
 Safety: Hackers can try to steal your information or send viruses
through fake links or ads.
 False Information: Not everything on the Web is true, so you need
to check if a website is trustworthy.
 Bullying: Some people use the Web to be mean or bully others,
which can hurt feelings.
 Too Much Screen Time: Spending too much time online can make
it hard to focus on school or sleep well.
 Access Issues: Not everyone has fast Internet, especially in some
countries, which makes it harder to use the Web.

20IT212 - INTERNET PROGRAMMING 33

 WEB BROWSERS

 A web browser is a program that your computer runs to communicate with web
servers on the internet, which enables it to download and display the web pages that
you request.
 The web browser is an application software used to explore the World Wide Web
(WWW).
 It acts as a platform that allows users to access information from the Internet by
serving as an interface between the client (user) and the server.
 The browser sends requests to servers for web documents and services, then renders
the received HTML content, including text, images, links, styles, and scripts.
Elements of a browser window :
● Menu bar
● Toolbars
● Address or Location window
● Viewing window and Status bar

20IT212 - INTERNET PROGRAMMING 34

WEB BROWSERS

20IT212 - INTERNET PROGRAMMING 35

Popular web browsers 2025

20IT212 - INTERNET PROGRAMMING 36

 History of Browsers

 The development of browsers started in the year 1990 by Tim Berners-Lee. Later it
was changed to Nexus.
 Later, first browser was developed to display text and images on screen named
Mosiac. It was the first web browser to have GUI(Graphical User Interface)
 Microsoft launched its web browser Internet Explorer which came pre-installed in
Windows. It was a freeware so it ensured .
 In competition with Explorer , Netscape released a browser which later became the
foundation of Mozilla with an open source model
 In competition with all these browsers Apple launched its browser Safari in the year
2003 which is a dominant browser of all Apple devices
 Google's Chrome debuted in the year 2008 and had a huge growth and nearly
captured all the market share in initial years
 Microsoft replaced Explorer with Edge since Windows 10 was released as a much faster
browser

20IT212 - INTERNET PROGRAMMING 37

 How Does a Web Browser Work?

 When a user accesses a website by typing a URL like [Link] into the browser,
 the browser first contacts a DNS (Domain Name System) server to translate the domain
name into an IP address, such as [Link]. After obtaining the IP address, the browser
sends a request to the corresponding web server. The web server processes this request
and responds with the required content, including HTML, CSS, images, and scripts.
 A browser helps us find information anywhere on the internet. It is installed on the
client's computer and requests information from the web server; such a type of working
model is called a client-server model
 The browser receives information through HTTP protocol. In which transmission of data
is defined. When the browser received data from the server, it is rendered in HTML to
user-readable form and, information is displayed on the device screen.

20IT212 - INTERNET PROGRAMMING 38

How Does a Web Browser Work?

20IT212 - INTERNET PROGRAMMING 39

 How Does a Web Browser Work?

Step 1: URL Resolution

The browser uses DNS (Domain Name System) to resolve the domain name into an IP address, which identifies the
server where the website is hosted.
Step 2: Sending HTTP Request
The browser sends an HTTP (HyperText Transfer Protocol) request to the server to access the webpage associated with
the URL. It requests resources like HTML, CSS, JavaScript, images, and media files.
Step 3: Server Response
The server responds with the requested resources (HTML, images, etc.) along with an HTTP response code. For a
successful request, the response code is typically 200 OK.
Step 4: Rendering the Page
The browser starts parsing the HTML content, requesting additional resources such as images, stylesheets, and scripts as
needed. CSS is used to style the elements, and JavaScript is executed to add interactivity.
Step 5: Displaying the Content
After receiving and processing the content, the browser renders the page, displaying it to the user. Any user interaction
(like clicks or scrolling) may trigger new requests or JavaScript actions.

20IT212 - INTERNET PROGRAMMING 40

Core Architecture of Web Browser

 When you use a browser, the

User Interface (like the
address bar or buttons) sends
your request to the
Browser Engine, which tells
the Rendering Engine to load
the webpage.
 The Rendering Engine reads
the website code and shows it
on your screen.
 It works with other parts like
the JavaScript
Interpreter (which runs
scripts), Networking (which
gets data from the internet),
and the UI Backend (which
helps display the page).
20IT212 - INTERNET PROGRAMMING 41
 Functions of a Browser

 Takes you to websites: You type in a website address (like [Link]) or

click a link, and the browser finds that page on the internet and shows it to [Link]
process involves the browser sending a request to a web server, which then sends the
website's data back to your browser.
 Displays web content: Browsers can understand and show you different types of
content like text, images, videos, and interactive elements on a webpage. They do
this by interpreting computer languages like HTML, CSS, and JavaScript to build the
page you see.
 Helps you navigate: Browsers have features like back and forward buttons, tabs to
open multiple pages at once, and bookmarks to save your favorite sites, making it
easy to move around the internet.
 Manages security and settings: Browsers have built-in security features to help
protect you from online threats. They also allow you to customize your experience, for
example, by managing your browsing history, passwords, and cookies (small pieces of
data websites store on your computer).

20IT212 - INTERNET PROGRAMMING 42

Website Cookies

 When we visited any website over the internet our web browser stores
information about us in small files called cookies.
 Cookies are designed to remember stateful information about our
browsing history.
 Some more cookies are used to remember about us like our interests, our
browsing patterns, etc.
 Websites show us ads based on our interests using cookies.
 Types of Cookies
 Session Cookies: Temporary, deleted when you close your browser.
 Persistent Cookies: Stored on your device; remain after closing browser.
 First-party Cookies: Set by the website you're visiting.
 Third-party Cookies: Set by external services (e.g., advertisers).

20IT212 - INTERNET PROGRAMMING 43

 FAQs

 Are Cookies Safe?

 Generally safe, but they can be used for tracking.
 Some may pose privacy concerns if misused by third parties.
 You should regularly clear cookies if concerned about tracking.
 How to Managing Cookies (Browser Settings)?
 Chrome: Settings → Privacy & Security → Cookies and other site data
 Firefox: Preferences → Privacy & Security → Cookies and Site Data
 Safari: Preferences → Privacy → Manage Website Data
 Edge: Settings → Site permissions → Cookies and site data
 Why Are Cookies Used?
 Authentication: Remembers your login details (if you allow it).
 Analytics: Helps website owners track user behavior (e.g., Google Analytics).
 Advertising: Tracks your online behavior to show targeted ads.
 Preferences: Stores language, theme, or location settings.
 Commonly Used Terms in Browsers
 URL,DNS,HTTP,HTTPS,IP address and HTTP Response code
Google Chrome is the most popular browser, while Brave Browser offers the best speed and privacy balance. Tor Browser
leads in privacy but is slower and less popular. Overall, Brave Browser stands out as the best choice for users prioritizing both
speed and security.
20IT212 - INTERNET PROGRAMMING 44
 URL

20IT212 - INTERNET PROGRAMMING 45

 WEB PAGE
 A Web page is a document for the World Wide Web that is identified by a unique
uniform resource locator (URL).
 A web page is a single hypertext document available on World Wide Web
(WWW). It is composed of HTML elements and displayed on the user's browser
such as Mozilla, Firefox, Chrome, etc. It is also referred to as "Page."
 It can be accessed and displayed on a monitor or mobile device through a Web
browser . The data found in a Web page is usually in HTML or XHTML format.
 The Web pages usually also contain other resources such as style sheets, scripts
and images for presentation. Users may be able to navigate to other pages through
hypertext links.

20IT212 - INTERNET PROGRAMMING 46

WEB PAGE EXAMPLE

20IT212 - INTERNET PROGRAMMING 47

 UNIFORM RESOURCE LOCATOR(URL)

 A URL (Uniform Resource Locator) is the address of a unique resource on

the internet. It is one of the key mechanisms used by browsers to retrieve
published resources, such as HTML pages, CSS documents, images, and
so on
 URLs guide web browsers to the right website, just like a physical street
address

20IT212 - INTERNET PROGRAMMING 48

Components of a URL

20IT212 - INTERNET PROGRAMMING

49
 SCHEME
 The protocol or scheme part of the URL and indicates the set of rules that will decide
the transmission and exchange of data.
 HTTPS which stands for Hyper Text Transfer Protocol Secure tells the browser to
display the page in Hyper Text (HTML) format as well as encrypt any information
that the user enters in the page.
 Other protocols include the FTP or File Transfer Protocol which is used for
transferring files between client and server, SMTP or Single Mail Transfer Protocol
which is used for sending emails.

https://

20IT212 - INTERNET PROGRAMMING 50

 SUB DOMAIN

 The subdomain is used to separate different sections of the website as it specifies the
type of resource to be delivered to the client.
 Here the subdomain used ‘www’ is a general symbol for any resource on the web.
Subdomains like ‘blog’ direct to a blog page, ‘audio’ indicates the resource type as
audio.

[Link]

20IT212 - INTERNET PROGRAMMING 51

 Domain Name :
Domain name specifies the organization or
entity that the URL belongs to. Like
in [Link] the domain name ‘facebook’
indicates the organization that owns the site.

[Link]

20IT212 - INTERNET PROGRAMMING 52

 TOP LEVEL DOMAIN(TLD)

 The top-level domain (TLD) specifies what type of entity your organization
registers as on the internet.
 For example, “.com” is intended for commercial entities in the United
States, so a lot of American businesses register with a top-level domain of
“.com”.

https://
[Link]

20IT212 - INTERNET PROGRAMMING 53

 Port Number :
● A port number specifies the type of service that is
requested by the client since servers often deliver
multiple services. Some default port numbers include 80 for
HTTP and 443 for HTTPS servers.

https://
[Link]

20IT212 - INTERNET PROGRAMMING 54

 PATH

The path specifies the location of the file or resource that the user wants to access.
In the example below, the specified path would be the article “parts-url.”

[Link]
search

20IT212 - INTERNET PROGRAMMING 55

 QUERY

That question mark says that a specific query is being performed and is used
to precede a query string. A query string specifies the parameters of the data being asked
from a website’s database.

ttps://[Link]/blog/article/search?docid=720&hl=en

20IT212 - INTERNET PROGRAMMING 56

 Fragment :
The fragment identifier of a URL is optional, usually appears at the end, and
begins with a hash (#). It indicates a specific location within a page such
as the ‘id’ or ‘name’ attribute for an HTML element.

[Link]

20IT212 - INTERNET PROGRAMMING 57

 URLs and Types

URLs (Uniform Resource Locators) come in different types

depending on how they specify the resource location. Here’s a
breakdown of the main types of URLs:

 Absolute URL: A full web address that includes all

components needed to locate a resource.
Example:[Link]

 Relative URL:A partial address, relative to the current

document’s location.
Example:<img src "../images/[Link]">

20IT212 - INTERNET PROGRAMMING 58

 Benefits using absolute URLs
 Makes it difficult to clone your site: Cloned websites are used
by cybercriminals to defraud a company’s customers. To create
clones, they use scraping tools that search and copy a site’s
content. Absolute URLs make it more difficult for them to do this.
 Stops duplicate content
Duplicate website content can impact your SEO and your site’s
ranking. Absolute URLs help prevent duplicate content issues.
Search engines, for example, consider the [Link] [Link]
https:// and [Link] versions of a website as different
websites.
 Assists with search engine indexing
Search engine crawlers index your site by following internal links.
However, they don’t always search the whole site.
20IT212 - INTERNET PROGRAMMING 59
 Benefits of Using Relative URLs
 Faster coding and development
You can code a website far easier if you only need to use, shorter
relative URLs. If you are developing a website and have live and
developmental versions with different domains, relative URLs allow
you to bring your newly developed site online without having to
modify all the URLs to those of your live site.
 Effective Internal linking
Remember, relative URLs can only be used to link to resources with
the same root directory.

20IT212 - INTERNET PROGRAMMING 60

INTRODUCTION TO CLIENT- SERVER
COMPUTING

20IT212 - INTERNET PROGRAMMING 61

 CLIENT – SERVER COMPUTING
In client server computing, the clients requests a resource and the server provides that
resource. A server may serve multiple clients at the same time while a client is in contact with only
one server. Both the client and server usually communicate via a computer network.

20IT212 - INTERNET PROGRAMMING 62

 CLIENT - SERVER COMPUTING
Client-server computing is a distributed computing model in which client applications
request services from server processes. Clients and servers typically run on different
computers interconnected by a computer network

20IT212 - INTERNET PROGRAMMING 63

CLIENT – SERVER COMPUTING

20IT212 - INTERNET PROGRAMMING 64

 CLIENT – SERVER COMPUTING
Application Programming Interface :
It is a way for two or more computer programs or components to communicate with each
other. It is a type of software interface, offering a service to other pieces of software.
Client :
A client is a host computer, requests services or information from the server. The client is
also called a user. In a computer system, a client is a computer program that asks something from the
server and the server gives the information back to the client computer.
Middleware :
It is software that helps to connect the operating system and applications. Or it is software
that runs between client and server processes. Generally, this software is written in such a way that
the user never notices the presence of middleware. It also helps in delivering secure and transparent
services to users.

20IT212 - INTERNET PROGRAMMING 65

 CLIENT- SERVER COMPUTING
Relational Database :
This is a type of database in which information access is limited to a selection of rows that
meet all search criteria.

Server:
A server is a computer program that provides services, data, information to other
computer programs.

Structured Query Language(SQL) :

It is a programming language for storing and processing information in a relational
database. A relational database stores information in tabular form, with rows and columns
representing different data attributes and the various relationships between the data values.

20IT212 - INTERNET PROGRAMMING 66

 ADVANTAGES
• The server need not be located physically close to the clients. Yet the data can be accessed
efficiently.
• It is easy to replace, upgrade or relocate the nodes in the client server model because all the
nodes are independent and request data only from the server.
• All the nodes i.e clients and server may not be build on similar platforms yet they can easily
facilitate the transfer of data.
• All the required data is concentrated in a single place i.e. the server. So it is easy to protect the
data and provide authorization and authentication.

20IT212 - INTERNET PROGRAMMING 67

 DISADVANTAGES
• If all the clients simultaneously request data from the server, it may get overloaded. This may
lead to congestion in the network.
• If the server fails for any reason, then none of the requests of the clients can be fulfilled. This
leads of failure of the client server network.
• The cost of setting and maintaining a client server model are quite high.

20IT212 - INTERNET PROGRAMMING 68

BASIC INTERNET PROTOCOLS

20IT212 - INTERNET PROGRAMMING 69

 WHAT IS A PROTOCOL?
The Internet Protocol (IP) is a protocol, or set of rules, for routing and
addressing packets of data so that they can travel across networks and arrive at
the correct destination.

Protocols define the format, order of messages sent

and received among network entities, and actions
taken on message transmission, receipt

20IT212 - INTERNET PROGRAMMING 70

WHAT IS A PROTOCOL

20IT212 - INTERNET PROGRAMMING 71

 Layer by Layer

• Two computing devices need a physical mechanism to send digital data to each other.
• They send electromagnetic signals either over a wired or wireless connection and interpret the
signal as bits.
• The type of physical connection affects the bit rate and bandwidth

20IT212 - INTERNET PROGRAMMING 72

Layer by Layer

• need addressing protocols

• uniquely identify who is sending data
and who should receive the data.
• Every node on the Internet is identified
with an IP address

20IT212 - INTERNET PROGRAMMING 73

 Layer by Layer

• Route between any two computers on the Internet isn't just a straight
path
• Data must pass from router to router until it finally reaches its
destination, a strategy that comes from the Internet routing protocol

20IT212 - INTERNET PROGRAMMING 74

 Layer by Layer

• Data broken into small packets & reassembled at the destination

• Transmission Control Protocol - ensures reliable transport of those
packets, with sequencing, acknowledgement, and retries.
• User Datagram Protocol - faster but less reliable transport
protocol

20IT212 - INTERNET PROGRAMMING 75

 Layer by Layer

• Most common use of the Internet is the World Wide Web

• With its millions of publicly viewable websites, all made possible due
to the HyperText Transfer Protocol (HTTP).
• We can visit a website by typing a domain name in the browser
address bar, since the browser knows how to turn the domain into an
IP address using the Domain Name System (DNS).

20IT212 - INTERNET PROGRAMMING 76

 Layer by Layer

• When the data contains private information, it needs to be

transported securely from the sender to the destination.
• Transport Layer Security (TLS) protocol uses algorithms to
encrypt the data, while certificate authorities help users trust the
encryption.

20IT212 - INTERNET PROGRAMMING 77

INTERNET PROTOCOLS
Recall in
Computer
Networks

20IT212 - INTERNET PROGRAMMING 78

 INTERNET PROTOCOLS
TCP/IP (Transmission Control Protocol / Internet Protocol)

• TCP specifies how data is exchanged over the internet

and how it should be broken into IP packets.

FTP(File Transfer Protocol)

• This protocol is used for transferring files from one

system to the other. This works on a client server
model
Telnet (Terminal Network)

• This enables one local machine to connect with another.

• TELNET operation lets us display anything being performed on
the remote computer in the local computer.
20IT212 - INTERNET PROGRAMMING 79
 INTERNET PROTOCOLS

DNS(Domain Name System)

• Domain Name System (DNS) is a hostname for IP address translation service. DNS is a distributed
database implemented in a hierarchy of name servers.
• It is an application layer protocol for message exchange between clients and servers.

20IT212 - INTERNET PROGRAMMING 80

 DOMAIN NAME SYSTEM

DNS = Name service in Internet – A zone is an administrative unit, and a domain is a subtree.

20IT212 - INTERNET PROGRAMMING 81

DOMAIN NAME SERVER

20IT212 - INTERNET PROGRAMMING 82

HOW DOES DNS WORKS ?

20IT212 - INTERNET PROGRAMMING 83

INTERNET PROTOCOLS

20IT212 - INTERNET PROGRAMMING 84

 IPV4(Internet Protocol
version 4)
IPv4 provides with the 32 bit address scheme. IPv4 addressing has four numeric fields
and are separated by dot. IPv4 can be configured either using DHCP or manually.
IPv4 does not provide with more security features as it does not support authentication
or encryption techniques.
IPv4 is further divided into five classes as
 Class A
 Class B
 Class C
 Class D
 Class E

20IT212 - INTERNET PROGRAMMING 85

 IPV4(Internet Protocol
version 4)
1. Address Space
A protocol such as IPv4 that defines addresses has an address space. An address space
is the total number of addresses used by the protocol. If a protocol uses N bits to
define an address, the address space is 2N because each bit can have two different
values (0 or 1) and N bits can have 2N values.
IPv4 uses 32-bit addresses, which means that the address space is 232 or
4,294,967,296 (more than 4 billion). This means that, theoretically, if there were no
restrictions, more than 4 billion devices could be connected to the Internet.

20IT212 - INTERNET PROGRAMMING 86

 IPV4(Internet Protocol
version 4)
2. Notation
There are two prevalent notations to show an IPv4 address: binary notation and dotted
decimal notation.
a. Binary Notation
b. Dotted-Decimal Notation

a. Binary Notation
In binary notation, the IPv4 address is displayed as 32 bits. Each octet is often referred
to as a byte. So it is common to hear an IPv4 address referred to as a 32-bit address or
a 4-byte address. The following is an example of an IPv4 address in binary notation.

01110101 10010101 00011101 00000010

20IT212 - INTERNET PROGRAMMING 87

 IPV4(Internet Protocol
version 4)
b. Dotted-Decimal Notation
To make the IPv4 address more compact and easier to read, Internet addresses are usually
written in decimal form with a decimal point (dot) separating the bytes. The following is the
dotted-decimal notation of the above address: [Link]
IPv4 address in both binary and dotted-decimal notation. Note that because each byte (octet) is
8 bits, each number in dotted-decimal notation is a value ranging from 0 to 255

20IT212 - INTERNET PROGRAMMING 88

 IPV4(Internet Protocol
version 4)
3. Classful Addressing
IPv4 addressing, at its inception, used the concept of classes. This architecture is called
classful addressing. In classful addressing, the address space is divided into five classes: A, B,
C, D, and E.
We can find the class of an address when given the address in binary notation or dotted-
decimal notation. If the address is given in binary notation, the first few bits can immediately
tell us the class of the address. If the address is given in decimal-dotted notation, the first byte
defines the class.

20IT212 - INTERNET PROGRAMMING 89

 IPV4(Internet Protocol
version 4)
Classes and Blocks
One problem with classful addressing is that each class is divided into a fixed number of
blocks with each block having a fixed size
Class A addresses were designed for large organizations with a large number of attached hosts
or routers.
Class B addresses was designed for midsize organizations with tens of thousands of attached
hosts or routers.
Class C addresses were designed for small organizations with a small number of attached hosts
or routers.
Class D addresses were designed for multicasting. The class E addresses were reserved for
future use. In c1assfnl addressing, a large part of the available addresses were wasted

20IT212 - INTERNET PROGRAMMING 90

 IPV4(Internet Protocol
version 4)
Netid and Hostid
In classful addressing, an IP address in class A, B, or C is divided into netid and hostid.

These parts are of varying lengths, depending on the class of the address. The netid is in color,
the hostid is in white. Note that the concept does not apply to classes D and E.
In class A, one byte defines the netid and three bytes define the hostid.
In class B, two bytes define the netid and two bytes define the hostid.
In class C, three bytes define the netid and one byte defines the hostid.

20IT212 - INTERNET PROGRAMMING 91

 IPV4(Internet Protocol
version 4)
Mask:Although the length of the netid and hostid (in bits) is predetermined in classful
addressing, we can also use a mask (also called the default mask), a 32-bit number made of
contiguous Is followed by contiguous as. The concept does not apply to classes D and E.

The mask can help us to find the netid and the hostid. For example, the mask for a class A
address has eight 1s, which means the first 8 bits of any address in class A define the netid; the
next 24 bits define the hostid. The last column of Table shows the mask in the
form /n where n can be 8, 16, or 24 in classful addressing. This notation is also called slash
notation or Classless Interdomain Routing (CIDR) notation.

20IT212 - INTERNET PROGRAMMING 92

 IPV4(Internet Protocol
version 4)
If you have an IP address like [Link] with a subnet mask of /24
(which is equivalent to [Link]),
you can calculate the network address by performing a bitwise AND operation
(ANDing the IP address with the subnet mask).

•IP address: [Link] (binary: 11000000.10101000.00000001.01100100)

•Subnet mask: [Link] (binary: 11111111.11111111.11111111.00000000)

•Network Address (AND): [Link] (binary: 11000000.10101000.00000001.00000000)

20IT212 - INTERNET PROGRAMMING 93

 IPV4(Internet Protocol
version 4)
Subnetting:If an organization was granted a large block in class A or B, it could
divide the addresses into several contiguous groups and assign each group to
smaller networks (called subnets). Subnetting increases the number of Is in the
mask.

Supernetting:In supernetting, an organization can combine several class C

blocks to create a larger range of addresses. In other words, several networks are
combined to create a supernetwork or a supemet. An organization can apply for a
set of class C blocks instead of just one.

20IT212 - INTERNET PROGRAMMING 94

 Next Generation IP(IPV6)
The next generation Internet Protocol (IP) address standard, known as
IPv6, is meant to work in cooperation with IPv4. To communicate with other
devices, a computer, smartphone, home automation component, Internet of
Things sensor, or any other Internet-connected device needs a numerical IP
address.
Because so many connected devices are being used, the original IP address
scheme, known as IPv4, is running out of addresses. This new IP address
version is being deployed to fulfil the need for more Internet addresses.
With 128-bit address space, it allows 340 undecillion unique address
space. IPv6 support a theoretical maximum of 340, 282, 366, 920, 938, 463,
463, 374, 607, 431, 768, 211, 456.

20IT212 - INTERNET PROGRAMMING 95

 Next Generation IP(IPV6)
The Birth of IPv6: Formulated by the Internet Engineering Task Force (IETF)
in the early 1990s, Internet Protocol version 6 (IPv6) came into being to tackle
the exhaustion of IPv4 addresses. With the rapid expansion of the Internet, it
was crucial to have a larger address space in order to support the growing
number of devices and users on the network.

Officially standardized in 2017, IPv6 marked a defining moment for the

Internet’s capacity to grow freely, representing the next generation internet
protocol.

20IT208 – DATA COMMUNICATION & NETWORKS - MRS. [Link],AP/IT 96

Next Generation IP(IPV6)

20IT208 – DATA COMMUNICATION & NETWORKS - MRS. [Link],AP/IT 97

 Next Generation IP(IPV6)
Representation of IPv6:IPv6 uses eight groups of four hexadecimal digits to
create a vast range of addresses. Each device needs a numerical IP address to
communicate with other devices.

This structure not only expands the horizon of possible addresses but also
enhances the efficiency of data routing.
With its 128-bit addressing scheme, IPv6 proposes a solution to address
exhaustion problem, making network address translation unnecessary and
enabling a more efficient and direct Internet.
20IT212 - INTERNET PROGRAMMING 98
 Difference Between IPv4 and IPv6
IPV4 IPV6

What is it? Internet Protocol version four Internet Protocol version six

Address size 32 bits, or 232 IP addresses 128 bits, or 2128 IP addresses

Numerical IP address. Four lots of three-digit numbers, separated Alphanumeric address. Eight lots of four-character
Naming standard by full stops. hexadecimal numbers, separated by
[Link] colons.[Link]
Requires address translation Yes, through Network Address Translation (NAT) No

Packet addressing Unicast, broadcast, and multicast Unicast, multicast, and anycast
Autoconfiguration (SLAAC). DHCPv6 is also supported
Address configuration Manual and DHCP configuration
for stateful connections.
Variable; 20 bytes, which can increase up to 60 bytes when Fixed; 40 bytes. The size of separate extension headers
Header size
optional fields and flags are added varies.
Fragmentation Handled by routers Handled by the originator

Mobile support Requires Mobile IP Built-in

20IT212 - INTERNET PROGRAMMING 99

 History of HTTP

Tim Berners Lee and his team at CERN get credit for inventing original HTTP and
associated technologies.
• HTTP version 0.9: This was the first version of HTTP which was introduced in
1991.
• HTTP version 1.0: In 1996, RFC 1945 (Request For Comments) was
introduced in HTTP version 1.0.
• HTTP version 1.1: In January 1997, RFC 2068 was introduced in HTTP version
1.1. Improvements and updates to the HTTP version 1.1 standard were released
under RFC 2616 in June 1999.
• HTTP version 2.0: The HTTP version 2.0 specification was published as RFC
7540 on May 14, 2015.
• HTTP version 3.0: HTTP version 3.0 is based on the previous RFC draft. It is
renamed as Hyper-Text Transfer Protocol QUIC which is a transport layer
network protocol developed by Google.
20IT212 - INTERNET PROGRAMMING 100
Characteristics of HTTP

HTTP is IP based communication protocol that is used to deliver data from

server to client or vice-versa.
• The server processes a request, which is raised by the client, and also server
and client know each other only during the current bid and response period.
• Any type of content can be exchanged as long as the server and client are
compatible with it.
• Once data is exchanged, servers and clients are no longer connected.
• It is a request and response protocol based on client and server requirements.
• It is a connection-less protocol because after the connection is closed, the
server does not remember anything about the client and the client does not
remember anything about the server.
• It is a stateless protocol because both client and server do not expect
anything from each other but they are still able to communicate.

20IT212 - INTERNET PROGRAMMING 101

Cookies in HTTP

• An HTTP cookie (web cookie, browser cookie) is a little piece of

data that a server transmits to a user’s web browser.
• When making subsequent queries, the browser may keep the
cookie and transmit it back to the same server.
• An HTTP cookie is typically used, for example, to maintain a
user’s login state, and to determine whether two requests
originate from the same browser.
• For the stateless HTTP protocol, it retains stateful information.

20IT212 - INTERNET PROGRAMMING 102

Advantages of HTTP

• Memory usage and CPU usage are low because of fewer simultaneous
connections.
• Since there are few TCP connections hence network congestion is less.
• Since handshaking is done at the initial connection stage, then latency is
reduced because there is no further need for handshaking for
subsequent requests.
• The error can be reported without closing the connection.
• HTTP allows HTTP pipe-lining of requests or responses.

20IT212 - INTERNET PROGRAMMING 103

Disadvantages of HTTP

• HTTP requires high power to establish communication and transfer data.

• HTTP is less secure because it does not use any encryption method like
HTTPS and uses TLS to encrypt regular HTTP requests and responses.
• HTTP is not optimized for cellular phones and it is too gabby.
• HTTP does not offer a genuine exchange of data because it is less secure.
• The client does not close the connection until it receives complete data from
the server; hence, the server needs to wait for data completion and cannot
be available for other clients during this time.

20IT212 - INTERNET PROGRAMMING 104

20IT212 - INTERNET PROGRAMMING 105
 HTTP Request
HTTP request is simply termed as the information or data that is
needed by Internet browsers for loading a website. This is
simply known as HTTP Request.
There is some common information that is generally present in
all HTTP requests. These are mentioned below.
• HTTP Version
• URL
• HTTP Method
• HTTP Request Headers
• HTTP Body

20IT212 - INTERNET PROGRAMMING 106

HTTP Request Headers
HTTP Request Headers generally store information in the form of key-value
and must be present in each HTTP Request. The use of this Request Header
is to provide core information about the client’s information, etc.

HTTP Request Body

HTTP Request Body simply contains the information that has to be
transferred. HTTP Request has the information or data to be sent to these
browsers.

HTTP Method
HTTP Methods are simply HTTP Verb. In spite of being present so many
HTTP Methods, the most common HTTP Methods are
HTTP GET and HTTP POST. These two are generally used in HTTP cases. In
HTTP GET, the information is received in the form of a website.

20IT212 - INTERNET PROGRAMMING 107

 HTTP Response

HTTP Response is simply the

answer to what a Server gets
when the request is raised.
There are various things
contained in HTTP Response,
some of them are listed below.
• HTTP Status Code
• HTTP Headers
• HTTP Body

20IT212 - INTERNET PROGRAMMING 108

HTTP Response Headers
HTTP Response headers are simply like an HTTP Request where it has that
work to send some important files and data to the HTTP Response Body.
HTTP Response Body
HTTP Responses are the responses that are received successfully upon the
request. Generally, it comes under the requests generated by the web. In
most cases, the request is to transfer the HTML data into a webpage.

20IT212 - INTERNET PROGRAMMING 109

HTTP Status Code

HTTP Status Codes are the 3-digit codes that tell the message or
simply tell us about the HTTP Request whether it has been
completed or not. There are simply 5 types of status codes.
• Informational
• Successful
• Re-directional
• Client-Error
• Server-Error • 1x Informative
• 2xx Achievement
• 3xx Reorientation
• 4xx Client Mistake
• 5xx Error on the
Server
20IT212 - INTERNET PROGRAMMING 110
Supported Browsers: The browsers compatible with the HTTP
status code Client Error Responses are listed below:
• Google Chrome
• Internet Explorer
• Firefox
• Safari
• Opera

20IT212 - INTERNET PROGRAMMING 111

Informational Responses

The HTTP status codes are used to indicate that any specific HTTP
request has successfully completed or not. The HTTP status codes
are categorized into five sections those are listed below:
• Informational responses (100–199)
• Successful responses (200–299)
• Redirects (300–399)
• Client errors (400–499)
• Server errors (500–599)

20IT212 - INTERNET PROGRAMMING 112

Client Error Responses

400 Bad Request: This response code occurs when the server could not understand
the request because an invalid syntax is used.
401 Unauthorized: This response code occurs when the server refuses to respond
to the request because the request lacks client authentication to get the resources.
402 Payment Required: The response code 402 is reserved for future use. The aim
of creating this response code is for the digital payment system.
403 Forbidden: This response code occurs when the client wants to access the
content but it does not have the right to access the content as it is unauthorized.
404 Not Found: This response code occurs when the server cannot find the resources
requested by the client. This code can also be sent by the server instead of error 403
to hide the resources from the unauthorized client. Error 404 is one of the most famous
response
405 codes
Method onAllowed:
Not the web. This response code occurs when the server knows the
method of the request but currently it has been disabled by the server.

20IT212 - INTERNET PROGRAMMING 113

406 Not Acceptable: This response code occurs when the server does not find the
content mentioned in the client request.

407 Proxy Authentication Required: This response code occurs when it is

necessary for the client to authenticate itself with the proxy.

408 Request Timeout: This response code occurs when the webserver did not
receive the required response within the time that it was prepared to wait.

409 Conflict: This response code occurs when the server could not complete the
request due to conflict in the target resource. The client can resubmit the request
by resolving the conflict.
410 Gone: This response code occurs when the requested resource is permanently
deleted from the server and is no longer available.

411 Length Required: This response code occurs when the server rejects the
request as the request did not have a defined “Content-Length”.

20IT212 - INTERNET PROGRAMMING 114

412 Precondition Failed: This response code occurs when the server evaluates the
preconditions given in the request header as false.

413 Request Entity Too Large: This response code occurs when the server refuses
to process the request because the request entity is larger than the server’s ability to
process the data.
414 Request-URI Too Long: This response code occurs when the client’s requested
URI is longer than the ability of the server to interpret the URI.

415 Unsupported Media Type: This response code occurs when the server rejects the
requested resource because the media format of the requested resource is not supported
by the server.
416 Requested Range Not Satisfiable: Response code occurs when the request
cannot be completed because of the range specified in the Range Header. The range can
also be outside the target URI’s data.
417 Expectation Failed: This response code occurs when the server can’t meet the
expectation indicated by the Expect request-header field.
20IT212 - INTERNET PROGRAMMING 115
 INTERNET PROTOCOLS
SMTP(Simple Mail Transfer Protocol)
• These protocols are important for sending and distributing outgoing emails. This protocol
uses the header of the mail to get the email id of the receiver and enters the mail into the
queue of outgoing mail. MTP(Mail Transfer Protocol) preceded SMTP.
• As soon as it delivers the mail to the receiving email id, it removes the email from the
outgoing list.
• When an e-mail is sent from the sender to receiver, in most cases this involves, the sender
machine sends the email to local SMTP sever, which in then sends mail to recipients local
SMTP sever, and finally to recipients local machine.
• The Simple Mail Transfer Protocol (SMTP) commonly uses port
587 for secure transmission via TLS(Transport Layer Security ).
While port 465 was previously supported by many providers, it is no
longer an accepted standard. Additionally, port 25 is mainly used
for SMTP relay, not for SMTP submission. Although port 2525 is not an
official SMTP port, it can serve as a good alternative

20IT212 - INTERNET PROGRAMMING 116

INTERNET PROTOCOLS

SMTP clients and servers have two main

components:
• User Agents (UA):

It prepares a message and encloses in an

envelope.
• Mail Transfer Agents (MTA):

It transfers the mail across the internet.

20IT212 - INTERNET PROGRAMMING 117

Components of SMTP

• Mail User Agent (MUA): It is a computer application that helps you in

sending and retrieving mail. It is responsible for creating email messages for
transfer to the mail transfer agent(MTA).
• Mail Submission Agent (MSA): It is a computer program that receives mail
from a Mail User Agent(MUA) and interacts with the Mail Transfer Agent(MTA)
for the transfer of the mail.
• Mail Transfer Agent (MTA): It is software that has the work to transfer mail
from one system to another with the help of SMTP.
• Mail Delivery Agent (MDA): A mail Delivery agent or Local Delivery Agent is
basically a system that helps in the delivery of mail to the local system.

20IT212 - INTERNET PROGRAMMING 118

How does SMTP Work

• Communication between the sender and the receiver: The sender’s user
agent prepares the message and sends it to the MTA. The MTA’s responsibility is to
transfer the mail across the network to the receiver’s MTA. To send mail, a system
must have a client MTA, and to receive mail, a system must have a server MTA.
• Sending Emails: Mail is sent by a series of request and response messages
between the client and the server. The message which is sent across consists of a
header and a body. A null line is used to terminate the mail header and everything
after the null line is considered the body of the message, which is a sequence of
ASCII characters. The message body contains the actual information read by the
receipt.
• Receiving Emails: The user agent on the server-side checks the mailboxes at a
particular time of intervals. If any information is received, it informs the user about
the mail. When the user tries to read the mail it displays a list of emails with a short
description of each mail in the mailbox. By selecting any of the mail users can view
its contents on the terminal.

20IT212 - INTERNET PROGRAMMING 119

20IT212 - INTERNET PROGRAMMING 120
SMTP Envelope

• Purpose
• The SMTP envelope contains information that guides email
delivery between servers.
• It is distinct from the email headers and body and is not visible to the
email recipient.
• Contents of the SMTP Envelope
• Sender Address: Specifies where the email originates.
• Recipient Addresses: Indicates where the email should be delivered.
• Routing Information: Helps servers determine the path for email
delivery.
• Comparison to Regular Mail
• Think of the SMTP envelope as the address on a physical envelope for
regular mail.
• Just like an envelope guides postal delivery, the SMTP envelope directs
email servers on where to send the email.

20IT212 - INTERNET PROGRAMMING 121

SMTP Commands

[Link]. KeyworD Command form Description Usage

It provides the
1. HELO HELO<SP><domain><CRLF> identification of the sender Mandatory
i.e. the host name.

MAIL<SP>FROM : <reverse- It specifies the originator

2. MAIL Mandatory
path><CRLF> of the mail.

It specifies the recipient of

3. RCPT RCPT<SP>TO : <forward-path><CRLF> Mandatory
mail.

It specifies the beginning

4. DATA DATA<CRLF> Mandatory
of the mail.

It closes the TCP

5. QUIT QUIT<CRLF> Mandatory
connection.

20IT212 - INTERNET PROGRAMMING 122

 INTERNET PROTOCOLS
POP(Post Office Protocol) :
• In computing, the Post Office Protocol (POP) is an application-layer Internet standard protocol
used by e-mail clients to retrieve e-mail from a mail server.
• Today, POP version 3 (POP3) is the most commonly used version.
• Since POP3 creates local copies of emails and deletes the originals from the server, the emails
are tied to that specific machine
• The need for POP mainly arises when the user or client does not have a continuous internet
connection and what’s to receive email messages. The Pop client makes use of POP to pull
email messages from the POP server. POP3 is the updated version of POP.
• The user can access the messages locally even if the user is offline. Every time the client needs
to check manually for new messages as POP3 Protocol provides the feature of real-time
synchronization. Various email applications such as Microsoft Outlook, Apple Mail, Gmail
supports POP3 protocol.

20IT212 - INTERNET PROGRAMMING 123

POP3 Ports

POP3 makes use of two network ports. They are:

• Port 110: Port 110 is a default TCP port used by POP3. But It has a
disadvantage that it does not support encrypted communication.
• Port 995: Port 995 is majorly used for more secure applications. Port 995 is
a TLS or SSL port used to provide more security.

20IT212 - INTERNET PROGRAMMING 124

20IT212 - INTERNET PROGRAMMING 125
Working of POP3

• Initially, POP3 needs to establish a connection between the POP client and the
POP server.
• Once a secure connection is established several commands are exchanged
between them to perform the task.
• Once a connection is established client requests available email messages.
• The Server sends the available messages along with their size and unique
identifier number.
• Once the client receives the message, it makes a request to the server for
downloading the messages. The user marks such messages and sends them to
the server.
• Upon receiving from the client-server sends the messages selected by the client
and accordingly marks them as read or unread.
• The client if want sends a request for deleting the messages.
• Once the tasks are completed the client sends a close connection request to the
server
• The server then sends an acknowledgment to the client and closes the
connection. 20IT212 - INTERNET PROGRAMMING 126
Advantages of SMTP
• If necessary, the users can have a dedicated server.
• It allows for bulk mailing.
• Low cost and wide coverage area.
• Offer choices for email tracking.
• Reliable and prompt email delivery.

Disadvantages of SMTP
• SMTP’s common port can be blocked by several firewalls.
• SMTP security is a bigger problem.
• Its simplicity restricts how useful it can be.
• Just 7-bit ASCII characters can be used.
• If a message is longer than a certain length, SMTP servers may reject the
entire message.
• Delivering your message will typically involve additional back-and-forth
processing between servers, which will delay sending and raise the likelihood
that it won’t be sent. 20IT212 - INTERNET PROGRAMMING 127
 INTERNET PROTOCOLS
Internet Message Access Protocol (IMAP)
It is an application layer protocol that operates as a contract for receiving emails from the
mail server. IMAP retrieves all of your recent messages from your email provider by getting in
touch with it.

20IT212 - INTERNET PROGRAMMING 128

• Internet Message Access Protocol (IMAP) is an application layer protocol that
operates as a contract for receiving emails from the mail server.
• It was designed by Mark Crispin in 1986 as a remote access mailbox protocol, the
current version of IMAP is IMAP4.
• It is used as the most commonly used protocol for retrieving emails.
• This term is also known as Internet mail access protocol, Interactive mail access
protocol, and Interim mail access protocol.
• IMAP retrieves messages from your email provider to your email client (such as on
your Mac or PC).
• Importantly, it does not delete messages from the email service after you download
them until the user explicitly deletes them.
• IMAP allows you to view and manage your emails across multiple devices because it
synchronizes the emails between your email client and the server.
• This synchronization ensures that changes such as read status, deletions, and folder
organization are reflected consistently across all devices connected to the same email
account.
20IT212 - INTERNET PROGRAMMING 129
20IT212 - INTERNET PROGRAMMING 130
Working of IMAP

• IMAP follows Client-server Architecture and is the most commonly used email
protocol.
• It is a combination of client and server process running on other computers that are
connected through a network.
• This protocol resides over the TCP/IP protocol for communication. Once the
communication is set up the server listens on port 143 by default which is non-
encrypted.
• For the secure encrypted communication port, 993 is used.
• Email client Gmail establishes a connection with Gmail’s SMTP [Link] approving
the sender’s and recipient’s email addresses, the SMTP server verifies
(authenticates) that the email can be sent.
• The email is sent to the Outlook SMTP server by Gmail’s SMTP server.
• The recipient’s email address is authenticated by the Outlook SMTP server.
• IMAP or POP3 is used by the Outlook SMTP server to deliver the email to the
Outlook email client.

20IT212 - INTERNET PROGRAMMING 131

Architecture of IMAP

20IT212 - INTERNET PROGRAMMING 132

• IMAP clients: An IMAP client is an email application or software that users use
to communicate with their email accounts. Examples include Microsoft Outlook,
Mozilla Thunderbird, Apple Mail, and mobile email applications. The client
communicates with the IMAP server to receive, manage, and send email
messages.
• IMAP Server: The IMAP server manages email messages and manages user
mailboxes. It responds to requests from IMAP clients, and provides access to
email folders and messages. The server stores emails in a structured format,
usually organized in user-defined folders or mailboxes. Common IMAP server
software includes Dovecot, Courier IMAP, Cyrus IMAP, and Microsoft Exchange
Server.
• Network Protocols: IMAP works over TCP/IP (Transmission Control
Protocol/Internet Protocol) networks, and allows an IMAP client to connect to an
IMAP server over the Internet or local area networks. IMAP typically uses TCP
port 143 for unencrypted connections and TCP port 993 for encrypted
connections using SSL/TLS (IMAPS).
20IT212 - INTERNET PROGRAMMING 133
Steps involve in IMAP Operation
• An email client, like Microsoft Outlook, connects to the server via IMAP when a
user registers in.
• Certain ports are used for connections.
• The email client shows the headers of every email.
• IMAP does not automatically download attachments; messages are
downloaded to the client only when the user taps on them.
• Compared to alternative email retrieval protocols like Post Office Protocol 3,
users can check their mail more quickly with IMAP (POP3).
• Until they are specifically deleted by the user, emails will stay on the server.
• While IMAP over Secure Sockets Layer (SSL)/Transport Layer Security assigns
port number 993, the IMAP server listens on port 143.

20IT212 - INTERNET PROGRAMMING 134

Advantages
• It offers synchronization across all the maintained sessions by
the user.
• It provides security over POP3 protocol as the email only exists
on the IMAP server.
• Users have remote access to all the contents.
• It offers easy migration between the devices as it is
synchronized by a centralized server.
• There is no need to physically allocate any storage to save
contents.
Disadvantages
• IMAP is complex to maintain.
• Emails of the user are only available when there is an internet
connection.
• It is slower to load messages.
• Some emails don’t support IMAP which makes it difficult to
manage. 20IT212 - INTERNET PROGRAMMING 135
SMTP vs POP vs IMAP

SMTP POP IMAP

Stands for Simple mail transfer protocol Stands for Post Office Protocol. Stands for Internet Message Access Protocol.

Used for sending mail. Used for retrieving mail. Used for retrieving mail.

it is push protocol. it is pull protocol. it is pull protocol.

It work between sender’s mail server to

It work between receiver and receiver’s mail It works between receiver and receiver’s mail
receiver’s mail server and sender and
server. server.
sender’s mail server.

It does not store mail on server it just send the It download all the mail when it connected to It store all mail on server and download when
mail. internet. it get request to download.

Works on TCP port number 25. Works on TCP port number 110. Works on TCP port number 143.

Connection oriented protocol. Connection oriented protocol. Connection oriented protocol.

It is in band protocol. It is in band protocol. It is in band protocol.

Not used at receiver side. Used at receiver side. Used at receiver side.

20IT212 - INTERNET PROGRAMMING 136

 HTML
Origin
Document structure
Tags
HTML5
 HTML
Origin
Tim Berne Lee
Standard Generalized Markup Language (SGML)
Hyper Text Markup Language (HTML)
Markup languages-design of web pages
Elements, attribute and tag

Elements
Basic building block of HTML is element.
Consists of a tag, its attribute and content.
Content of tag may be simple text or one or more tag.
Elements are organized in a tree-like structure.
<html> is root element of HTML document.
HTML Tag
Tags are code of which marks up a certain region in an HTML document.
Tags are case sensitive, written within angular bracket and ignored in the
browser.
Syntax
◦ <tag> content </tag>
Opening tag+content +closing tag together we called as element.
Embedded tag: OT and CT or ET
Standalone tag: only OT
Attribute
Properties of the tag.
It is placed within the OT
Example:
◦ <hr width=“100” color=“Red”>
Its recommended to specify double quotes to support browser neutral
code.
Document structure (.htm/.html)

<html>
HEAD

<head>
</head>
BODY

<body>
</html> </body>
Begins with <html> and ends with </html>
HTML describes structure using two main sections:
<head> and <body>
Elements (tags) are nested one inside another.
<html> and </html> parsed by browser.
Head sections contains meta-information about HTML
page.
The head section contains <title> contains the title
of the web page which appears on the title bar of the
browser’s window.
Common HTML tags
Embedded Tag
◦ <html>
◦ <body>
◦ <head>
◦ <p> starts new paragraph
◦ <b>, <i>, <u> bold ,italic, underline
◦ <center> center alignment
◦ <strong> similar to <b>
◦ <img src=“path”>
Standalone Tag
◦ <br> insert break
◦ <hr> insert horizontal rule
 Common tag placed in Head
section
<meta> specify the document properties
<base> specify the URL of the document
<link> specify the link between external source to HTML file
<style> .. </style> insert a style (internal method>
<title>.. </title> title of the web page
Attribute in Body section
Bgcolor :specifies background color
Backgroud: specifies background image
Link : specify the color of a not visited link
Alink: represents the color of an active link
Vlink: represents the color of a visited link
Text: Specifies the color of the enclosed text
Some color code
◦ #000000 – white
◦ #FFFFFF – Black
◦ #FF0000 – Red
◦ #ooFF00 - Blue
Text style
Changing base font
◦ <basefont face=“arial” sze=“5” color=“red”>
Changing style of a specific text
◦ This is a line<br>
◦ <font face=“Verdana” size=“4”> This is a another line
Heading
6 level of heading
<h1>…..
<h2>…..
<h3>…..
<h4>…..
<h5>…..
<h6>…..
Preformatted text
Browser substitute
consecutive white spaces by only one.
<html>
<head> <title>demo</title></head>
<body>
<pre>
<br>
<hr>
CPU i7 processor
Disk 1TB
</pre>
</body>
</html>
 Strikethrough text
◦ <del> some text </del>
◦ List
◦ It is a collection one or more items
◦ 3 types formatting
◦ Unordered-bulleted
◦ Ordered-numbered
◦ Definition list
<ul>
<ul>
<li>……</li>
</ul
<ul> options
◦ <ul> default shape.
◦ <ul type=“disc”> Disc shaped bullet
◦ <ul type=“circle”> circle shaped bullet
◦ <ul type=“square”> square shaped bullet
<ol> options
<ol type=“1”>
<ol type=“A”>
<ol type=“a”>
<ol type=“i”>
<ol start=“5”>
<ol type=“A” start=“4>
<ol type=“I” start=“4>
Definition list
A list contains two part
1. A term
2. Its description
<html>
<head> <title>demo</title></head>
<body>
<dl>
<dt> d1 tag</dt?
<dd> It is outermost tag</dd>
<dt> d2 tag</dt>
<dd> Second line</dd>
<dd> third line</dd>
</dl>
</body>
</html>
Nested List
<html>
<head> <title>demo</title></head>
<body>
<dl>
<dt> d1 tag</dt?
<dd> It is outermost tag</dd>
<dt> d2 tag</dt>
<dd>
<ol><li>Second line</li>
<li>third line</li>
</ol>
</dd>
</dl>
</body>
</html>
Table
It was introduced by HTML 3.2
Table created using 3 basic tag table, tr and td.
<table>
<tr>
<td>…..<.td>
</tr>
……
</table>
<tr> create row. <td> defines the cell
 Simple HTML Tables

<table>
<tr>
<td>row11</td>
<td>row12</td>
</tr>
<tr>
<td>row21</td>
<td>row22</td>
</tr>
</table>

158
Formatting
Border : <table border=“3”>….
Row and column heading: <tr><th>Name</th>……..
Caption: to add the title of the table
<table>
<caption>……</caption> …………</table>
Row and Column span

<table border="1">
<caption>Student's Mark</caption>
<tr>
<th rowspan=2>Name</th>
<th columnspan=2>Marks</th>
</tr>

<tr> <th>OS</th> <th>WT</th> </tr>

<tr> <td>Suresh</td><td>67</td><td>90</td> </tr>
<tr> <td>Kumar</td><td>79</td><td>97</td></tr>
</table>
Cellspacing and cellpadding
Spacing : specifies the white space in the table
Padding : specifies the amount of spaces in pixels between cell border and
its content<table border=“1” cellspacing=“5” cellpadding=“3”>
 HTML Forms

Forms are the primary method for gathering data from site
visitors
Create a form block with
The “method" attribute tells how the
<form></form>
Example: form data should be sent – via GET or
POST request

<form name="myForm" method="post"

action="path/to/[Link]">
...
</form>
The "action" attribute tells where the form
data should be sent
162
<form >
<fieldset><legend>Academic information</legend>
<label >Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label >Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
 <br />
Gender:
<input name="gender" type="radio" id="gm"
value="m" />
<label>Male</label>
<input name="gender" type="radio" id="gf"
value="f" />
<label>Female</label>
<br />
<label>Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND
CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send
Form" />
<input type="reset" value="Clear Form" /> 164
</p>
165
 HTML Frames

Frames provide a way to show multiple HTML documents in a

single Web page
The page can be split into separate views (frames)
horizontally and vertically
Frames were popular in the early ages of HTML development,
but now their usage is rejected
 <html>
vertically
<!-- Dave Reed [Link]
1/16/03 -->
<frameset cols="50%,50%">
<frameset cols="*,*">
<frame src="[Link]">
horizontally <frame src="[Link]">
</frameset>
<frameset rows="30%,*,*">
</html>

* causes the browser to divide the remaining space evenly

by default, each frame scrollable

 Differences between HTML and HTML5

Document of HTML is very large as compare to the HTML5.

Audio and Video tags are not present in HTML whereas HTML5
contains audio and video tags.
HTML supported by all old browsers whereas HTML5 is
supported by new browser.
In HTML web sockets are not available whereas in HTML5 Full
duplex communication channel is present.
Introduction to CSS
CSS Defined:
Short for "Cascading Style Sheets".
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of
multiple web pages all at once.
Designed to separate the content of a web page
from the presentation of that content.
Enables us to make all pages of our website look
similar and consistent (font, color, etc.).
Allows us to make site-wide formatting changes from
a single location (rather than having to edit each
page individually).
 CSS(Cascading Style Sheet)
CSS Syntax
A CSS rule-set consists of a selector and a declaration block
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by a
colon.
A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
p{
color: red;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>
CSS Format Conflicts:
It's possible for CSS formatting to be defined in all three
locations at the same time. For example, a paragraph
element could contain an inline style (color:red) but the
internal style sheet (color:blue) and the external style sheet
(color:green) give conflicting instructions to the web
browser.

Web browsers need a consistent way of "settling" this

disagreement.
Four Ways to Use CSS:
1) External Style Sheet - CSS is placed into a separate computer file and
"connected" to a web page.
2) Embedded Style Sheet – It allows importing style sheet from another
style sheet using
@import url(“[Link]”)
3) Inline Style - CSS is placed directly into the XHTML element.
4) Internal Style Sheet - CSS is placed into a separate area within the
<head> section of a web page.
External Style Sheet(ESS)
Style information is written into separate file( .css format).
This helps to update and maintain the look and feel of the
entire website from a single file without significant effort.
<link> tag is used to apply ESS
<link rel=“stylesheet” type=“text/css” href=“[Link]” />
 CSS Comments

Comments are used to explain the code, and may help when you edit the
source code at a later date.
Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span
multiple lines:
p{
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */
Example: Inline Style
<h2 style="font-family:georgia; color:red;">
CAUTION: Winter!
</h2>

A semicolon must follow each style declaration.

An inline style declaration like this one will affect only that particular
element. In other words, other <h2> elements on the page will not
be affected by this formatting.

Because inline styles do not properly separate content and

presentation, their use is discouraged. We will not be using inline
styles in this class.
Example: Internal Style
Sheet
<head>
<style type="text/css">
h2 {font-family:georgia; color:red;}
</style>
</head>

For internal style sheets, all formatting declarations are placed inside
the <style> element within the <head> section of the document. An
element is listed and all the styling information follows, surrounded
by opening and closing curly brackets, { }. A semicolon must still
follow each style declaration.

Styles declared in the internal style sheet will affect all matching
elements on the page. In this example, all <h2> elements on the
page will be displayed in Georgia font and in red color.
Example: External Style
Sheet
<head>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>

[Link] (separate file):

h2 {font-family:georgia; color:red;}

For external style sheets, a <link> tag is placed at the beginning of

the <head> section of the document specifying the external style
sheet (with a .css extension) to be used for formatting. The external
style sheet uses the same syntax as the internal style sheet when
listing elements and their styling.

Styles declared in an external style sheet will affect all matching

elements on all web pages that link to the stylesheet. In this
example, all <h2> elements on all pages using this style sheet will
be displayed in Georgia font and in red color.
Internal vs. External Style Sheets

Internal style sheets are appropriate for very small

sites, especially those that have just one page.
Internal style sheets might also make sense when
each page of a site needs to have a completely
different look.

External style sheets are better for multi-page

websites that need to have a uniform look and
feel to all pages.
External style sheets not only make for faster-
loading sites (less redundant code) but also allow
designers to make site-wide changes quickly and
easily.
CSS Terminology and Syntax:
Correct syntax:
selector {property:value;}
p {color:red;}

Selector Property Value

Be careful to put the semicolon after each declaration. It is the

single most common mistake made by those learning CSS.
Setting Multiple Properties:
p {
color:red;
font-style:italic;
text-align:center;
}
You can define as many selectors as you wish for the element you
are formatting.

In the above example, all paragraph elements will now show red
italic text that is centered on the page.

Many designers choose to place the selector and the open bracket
on a dedicated line and the closing bracket on its own line too. By
doing this, all the selectors in between are aligned and easy to read.
 Setting a Background
with CSS:
body {
background-image:url('[Link]');
background-repeat:repeat-x;
background-color:red;
}

With background-image, you can specify an image to be placed in the

background of your web page.

If you specify a background image, you can also decide whether the image
will "tile" across or down the screen. Possible values for the background-
repeat property include repeat-x (horizontally only), repeat-y (vertical only),
and no-repeat (no tiling at all). If you don't specify this property at all, by
default the image will repeat up and down to fill the entire page.

You can use the background-color property to set one solid color for the
background. Even if you specify a background image, it is good practice to
specify a color too. If for some reason the background image is not
available, the background color will be shown instead.
 CSS Text Properties:
The following properties can be specified for any element
that contains text, such as <h1> thru <h6>, <p>, <ol>,
<ul>, and <a>:
Property Some Possible Values
text-align: center, left, right, justify
text-decoration: underline, line-through, blink
color: blue, green, yellow, red, white, etc.
font-family: Arial, Verdana, "Times New Roman"
font-size: large, 120%, 20px (pixels)
font-weight: bold, normal
font-style: italic, normal

For a full list of available color names, refer to the following page:
[Link]
 CSS Box Model

In CSS, the term "box model" is used when talking about design and
layout.
The CSS box model is essentially a box that wraps around every HTML
element.
It consists of: margins, borders, padding, and the actual content. The
image below illustrates the box model:
CSS Box Model
Every rendered element occupies a box:

(or outer edge)

(or inner edge)

Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
CSS Box Model
CSS Box Model
Normal Flow Layout
In normal flow processing, each displayed element has a corresponding
box
◦ html element box is called initial containing block and corresponds to entire
document
◦ Boxes of child elements are contained in boxes of parent
◦ Sibling block elements are laid out one on top of the other
◦ Sibling inline elements are one after the other
Normal Flow Layout
html
body
div d1
div d2

div d3

div d4

Top edges of
block boxes are
in document order
Normal Flow Layout
What is a “block element”?
◦ Element with value block specified for its display property
◦ User agent style sheet (not CSS) specifies default values; typical block
elements include html, body, p, pre, div, form, ol, ul, dl, hr, h1 through h6
◦ Most other elements except li and table-related have inline specified for
display
Normal Flow Layout
When blocks stack, adjacent margins are collapsed to the size of the larger
margin
 CSS Text

Text Color
The color property is used to set the color of the text. The color
is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)“
Ex:
body {
color: blue;
}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
h1 {
text-align: center;
}
Text Decoration
The text-decoration property is used to set or remove decorations from
text.
Example
a{
text-decoration: none;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word:
Example:
[Link] {
text-transform: uppercase;
}
 Text Direction
The direction property is used to change the text direction of an element:
Example
p{
direction: rtl;
}
 CSS Fonts
The CSS font properties define the font family, boldness, size, and the
style of a text.

Property Description

font Sets all the font properties in

one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

 CSS Lists
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
Output
 CSS Tables

To specify table borders in CSS, use the border property.

The example below specifies a black border for <table>, <th>, and <td>
elements
table, th, td {
border: 1px solid black;
}
Table Width and Height
Width and height of a table are defined by
the width and height properties.
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Alignment
The text-align property sets the horizontal alignment
(like left, right, or center) of the content in <th> or
<td>.
By default, the content of <th> elements are center-
aligned and the content of <td> elements are left-
aligned.
 Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for
both <th> and <td> elements).
td {
height: 50px;
vertical-align: bottom;
}
 Navigation Bars

A navigation bar needs standard HTML as a base.

A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense
<html>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html
BOOTSTRAP SCAFFOLDING

20IT212 - INTERNET PROGRAMMING 212

 WHAT IS BOOTSTRAP ?
• Open source front-end framework for faster and easier web development
• gives the ability to easily create responsive designs
• It has evolved from being an entirely CSS-driven project to include a host of JavaScript plugins
and icons that go hand in hand with forms and buttons.
• Based on HTML, JS, CSS .
In desktop/laptop view

In tablet view In Mobile view

20IT212 - INTERNET PROGRAMMING 213

 WHY BOOTSTRAP ?
• Bootstrap is a free front-end framework, with the purpose of making web development faster
and easier.
• It also includes HTML and CSS-based design templates for forms, typography, buttons,
navigation, tables, modals, image carousels, and many other components along with other
optional JavaScript plugins.
• Bootstrap also provides the users with the ability to easily create responsive designs.
• The responsive CSS of Bootstrap also adjusts to phones, tablets, and desktops easily.
• It is compatible with all modern browsers like Chrome, Firefox, Internet Explorer, Edge,
Safari, and Opera.

20IT212 - INTERNET PROGRAMMING 214

 HOW TO INSTALL BOOTSTRAP ?

METHOD 1

Type in html file – head part

Paste it in your project

[Link] / Copy Both the Folders

20IT212 - INTERNET PROGRAMMING 215

 CONTD..,
METHOD 2

Paste in Html File – Head Part

20IT212 - INTERNET PROGRAMMING 216

 CONTD..,
METHOD 2

20IT212 - INTERNET PROGRAMMING 217

BOOTSTRAP FILE STRUCTURE

20IT212 - INTERNET PROGRAMMING 218

 HTML STRUCTURE TO INCLUDE BOOTSTRAP
<!DOCTYPE html>
<html lang="en">
</html>
1. Add HTML5 doctype
2. Add <meta> tag for viewport declaration
Bootstrap follows Mobile-first approach. In order to ensure proper rendering and touch
zooming, add <meta> tag inside the <head> element

<head>
<meta charset="utf-8">
<meta name="viewport“ content="width=device-width, initial-scale=1">
</head>

width=device-width helps in setting the width of the page to the screen-width of the device.
initial-scale=1 helps in setting the initial zoom level on the first time load of the page in the browser.

20IT212 - INTERNET PROGRAMMING 219

 CONTD..,
3. Bootstrap containers :
• Bootstrap requires a container element to wrap contents of a webpage.
• The container element has to be attached with .container or .container-fluid class provided
by Bootstrap.

<div class="container">
...
</div>

20IT212 - INTERNET PROGRAMMING 220

 BOOTSTRAP CONTAINERS

• Containers are used to pad the content inside of them, and there are two
container classes available:
 The .container class provides a responsive fixed width container
 The .container-fluid class provides a full width container, spanning the
entire width of the viewport

20IT212 - INTERNET PROGRAMMING 221

 BOOTSTRAP 5 GRID SYSTEM
 Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.
 If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

20IT212 - INTERNET PROGRAMMING 222

BOOTSTRAP 5 GRID SYSTEM

20IT212 - INTERNET PROGRAMMING 223

BOOTSTRAP 5 GRID SYSTEM

20IT212 - INTERNET PROGRAMMING 224

 GRID CLASSES
The Bootstrap 5 grid system has six classes :

 col- (extra small devices - screen width less than 576px)

 col-sm- (small devices - screen width equal to or greater than 576px)
 col-md- (medium devices - screen width equal to or greater than 768px)
 col-lg- (large devices - screen width equal to or greater than 992px)
 col-xl- (xlarge devices - screen width equal to or greater than 1200px)
 col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

The classes above can be combined to create more dynamic and flexible layouts.

NOTE : Each class scales up, so if you want to set the same widths for sm and md, you only need to
specify sm.

20IT212 - INTERNET PROGRAMMING 225

BASIC STRUCTURE OF ROOTSTRAP 5 GRID
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->

<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

20IT212 - INTERNET PROGRAMMING 226

 EXAMPLE- THREE EQUAL – WIDTH COLUMNS
<!DOCTYPE html>
<div class="container-fluid mt-3">
<html lang="en">
<h1>Three equal width columns</h1>
<head> <p>Note: Try to add a new div with class="col" inside
the row class - this will create four equal-width
<title>Bootstrap Example</title>
columns.</p>
<meta charset="utf-8"> <div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<meta name="viewport" content="width=device-width, <div class="col p-3 bg-dark text-white">.col</div>
initial-scale=1">
<div class="col p-3 bg-primary text-white">.col</div>
<link </div>
href="[Link]
[Link]" rel="stylesheet"> </div>
<script
src="[Link] </body>
[Link]"></script> </html>

</head>three equal-width columns

<body>

20IT212 - INTERNET PROGRAMMING 227

 TEXT COLORS WITH AN EXAMPLE
EXAMPLE CODING FOR TEXT COLORS
 Bootstrap 5 has some contextual classes that
can be used to provide "meaning through
<!DOCTYPE html> colors".
<html lang="en">
<head>
The classes for text colors are :
<title>Bootstrap Example</title> .text-muted, .text-primary, .text-success, .text-
<meta charset="utf-8"> info, .text-warning, .text-danger, .text-
<meta name="viewport" content="width=device-width, initial- secondary, .text-white, .text-dark, .text-
scale=1">
<link body (default body color/often black) and .text-
href="[Link] light:
[Link]" rel="stylesheet">
<script
src="[Link]
[Link]"></script>
</head>
<body>

20IT212 - INTERNET PROGRAMMING 228

 EXAMPLE CONTD..,
<div class="container mt-3">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>

</body>
</html>

20IT212 - INTERNET PROGRAMMING 229

 BOOTSTRAP 5 GRID STACK TO HORIZONTAL
Let's create a basic grid system that starts out stacked on extra small devices, before becoming horizontal on larger devices.
The following example shows a simple "stacked-to-horizontal" two-column layout, meaning it will result in a 50%/50%
split on all screens, except for extra small screens, which it will automatically stack (100%):

col- sm - 6 col – sm - 6

<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

20IT212 - INTERNET PROGRAMMING 230

 EXAMPLE WITH A CODING
<!DOCTYPE html>
<div class="container-fluid mt-3">
<html lang="en"> <h1>Grid Example</h1>
<p>This example demonstrates a 50%/50% split on small,
<head>
medium, large, xlarge and xxlarge devices. On extra small devices,
<title>Bootstrap Example</title> it will stack (100% width).</p>
<p>Resize the browser window to see the effect.</p>
<meta charset="utf-8"> <div class="row">
<meta name="viewport" content="width=device-width, initial- <div class="col-sm-6 bg-primary text-white p-3">
scale=1"> Lorem ipsum...
</div>
<link <div class="col-sm-6 bg-dark text-white p-3">
href="[Link] Sed ut perspiciatis...
[Link]" rel="stylesheet"> </div>
<script </div>
src="[Link] </div>
[Link]"></script>
</body>
</head> </html>
<body>

20IT212 - INTERNET PROGRAMMING 231

 BOOTSTRAP 5 GRID EXTRA SMALL

Types XSmall Small Medium Large Extra Large XXL

Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-

Screen width <576px >=576px >=768px >=992px >=1200px >=1400px

Assume we have a simple layout with two columns. We want the columns to split 25%/75% for ALL devices.

We will add the following classes to our two columns :

<div class="col-3">....</div>
<div class="col-9">....</div>

20IT212 - INTERNET PROGRAMMING 232

 EXAMPLE - 1
The following example will result in a 25% / 75% split on all devices (extra small, small, medium, large,
xlarge and xxlarge).

Col - 3 Col - 9

<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-9 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

20IT212 - INTERNET PROGRAMMING 233

 EXAMPLE - 2
For a 33.3% / 66.6% split, you would use .col-4 and .col-8
(and for a 50% / 50% split, you would use .col-6 and .col-6) :

Col - 4 Col - 8

Col - 6 Col - 6

20IT212 - INTERNET PROGRAMMING 234

 EXAMPLE 2 WITH CODING
<!-- 33.3%/66.6% split -->
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-8 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
<!-- 50%/50% split -->
<div class="container-fluid">
<div class="row">
<div class="col-6 bg-primary">
<p>Lorem ipsum...</p>
</div>
<div class="col-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>

20IT212 - INTERNET PROGRAMMING 235

BOOTSTRAP – CSS

20IT212 - INTERNET PROGRAMMING 236

 TYPOGRAPHY
The elements below are HTML elements that will be styled a little bit differently by Bootstrap than browser
defaults. Look at the "Try it" examples to see the result/differences.
The classes below is used to style the elements further.

ELEMENT / CLASS DESCRIPTION

<h1> - <h6> or .h1 h1 - h6 headings
- .h6
.small Indicates smaller text (set to 85% of the size of the parent): Smaller text
.lead Makes a text stand out: Stand out text
<s> Indicates no longer relevant text: No longer relevant text
<ins> Indicates inserted text: Inserted text
<u> Indicates underlined text: Underlined text

<strong> Indicates bold text: Bold text

20IT212 - INTERNET PROGRAMMING 237

 TYPOGRAPHY – CONTD..,
ELEMENT / DESCRIPTION
CLASS
.text-left Indicates left-aligned text

.text-right Indicates right-aligned text

.text-lowercase
Indicates lowercased text: lowercased text
.text-capitalize Indicates capitalized text: Capitalized Text

<abbr> The <abbr> element indicates an abbreviation or acronym.

Abbreviations with a title attribute have a dotted bottom border
<address> Presents contact information

20IT212 - INTERNET PROGRAMMING 238

 TYPOGRAPHY – CONTD..,
Display :
Display headings are used to stand out more than normal headings (larger font-size and
lighter font-weight), and there are six classes to choose from: .display-1 to .display-6:

20IT212 - INTERNET PROGRAMMING 239

 TYPOGRAPHY – <code>
Bootstrap 5 will style the HTML <code> element

Element/Class Description
<var> Indicates variables: x = ab + y

Indicates input that is typically entered

<kbd>
via the keyboard: CTRL + P

<pre> Indicates multiple lines of code

<pre class="pre- Indicates multiple lines of code with
scrollable"> scrollbar
Indicates sample output from a computer
<samp>
program: Sample output
Indicates inline snippets of code: span,
<code>
div
20IT212 - INTERNET PROGRAMMING 240
 EXAMPLE CODING
<!DOCTYPE html>
<body>
<html> <div class="container">
<head> <h2>Code</h2>

<meta name="viewport" content="width=device-width, initial-scale=1"> <p>Inline snippets of code should

<link rel="stylesheet" be embedded in the code element:
href="[Link] </p>
"> <p>The following HTML elements:
<code>span</code>,
<scriptsrc="[Link] <code>section</code>, and
</script> <code>div</code> defines a section
in a document.
<script </p>
src="[Link]
script>
</head>

20IT212 - INTERNET PROGRAMMING 241

 TYPOGRAPHY - FORMS

Individual form controls automatically receive some global styling with Bootstrap.

All textual <input>, <textarea>, and <select> elements with class="form-control" are set to width: 100%;
by default.
Standard rules for all three form layouts:

• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements

20IT212 - INTERNET PROGRAMMING 242

 EXAMPLE OF FORMS
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

20IT212 - INTERNET PROGRAMMING 243

TYPOGRAPHY – CSS TABLES

20IT212 - INTERNET PROGRAMMING 244

 CONTD..,
Responsive Tables
The .table-responsive class creates a responsive table. The table will then
scroll horizontally on small devices (under 768px). When viewing on
anything larger than 768px wide, there is no difference:

EXAMPLE :

<div class="table-responsive">
<table class="table">
...
</table>
</div>

20IT212 - INTERNET PROGRAMMING 245

 CONTD..,

.table

.table - dark

20IT212 - INTERNET PROGRAMMING 246

TABLE ROW CLASSES

20IT212 - INTERNET PROGRAMMING 247

 IMAGES

20IT212 - INTERNET PROGRAMMING 248

BUTTONS

20IT212 - INTERNET PROGRAMMING 249

 SELECT MENU
Select menu is used if you want to allow the user to pick from multiple options.
To style a select menu in Bootstrap 5, add the .form-select class to the <select> element

<select class="form- Use the .form-select-lg or .form-select-

select"> sm class to change the size of the select
<option>1</option> menu
<option>2</option>
<option>3</option> Use the disabled attribute to disable the
<option>4</option> select menu
</select>

20IT212 - INTERNET PROGRAMMING 250

 CHECKBOX

Checkboxes are used if you want the user to select any number of options from a list of preset
options

<div class="form-check">
<input class="form-check-
input" type="checkbox" id="check1" name="option1" value="something" c
hecked>
<label class="form-check-label">Option 1</label>
</div>

20IT212 - INTERNET PROGRAMMING 251

 COLOR PICKER
To style an input with type="color" properly, use the .form-control-color class

<div class="container mt-3">

<h2>Color Picker</h2>
<p>To style an input with type="color" properly, use the .form-control-color class:</p>
<form>
<label for="myColor" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color“
id="myColor" value="#CCCCCC" title="Choose a color">
</form>
</div>

20IT212 - INTERNET PROGRAMMING 252

BOOTSTRAP – LAYOUT
COMPONENTS

20IT212 - INTERNET PROGRAMMING 253

 LAYOUT COMPONENTS – DROP DOWN MENU
Drop Down Menu :
• A dropdown menu is a toggleable menu that allows the user to choose one value
from a predefined list
• The .dropdown class indicates a dropdown menu.
• To open the dropdown menu, use a button or a link with a class of .dropdown-
toggle and the data-bs-toggle="dropdown" attribute.
• Add the .dropdown-menu class to a <div> element to actually build the
dropdown menu. Then add the .dropdown-item class to each element (links or
buttons) inside the dropdown menu.

20IT212 - INTERNET PROGRAMMING 254

 DROP DOWN MENU
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-
toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>

20IT212 - INTERNET PROGRAMMING 255

 DROPDOWN DIVIDER
The .dropdown-divider class is used to separate links inside the dropdown menu with a thin
horizontal border :

<li><hr class="dropdown-divider"></hr></li>

20IT212 - INTERNET PROGRAMMING 256

 DROPDOWN BUTTON
The .dropdown-header class is used to add headers inside the dropdown menu :

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

20IT212 - INTERNET PROGRAMMING 257

 DROPDOWN POSITION
• create a "dropend" or "dropstart" menu, by adding the .dropend or .dropstart
class to the dropdown element

20IT212 - INTERNET PROGRAMMING 258

LAYOUT COMPONENTS
NAVIGATION ELEMENTS

20IT212 - INTERNET PROGRAMMING 259

 NAVIGATION ELEMENTS
• Bootstrap provides a few different options for styling navigation elements.
• All of them share the same markup and base class, .nav

20IT212 - INTERNET PROGRAMMING 260

 NAVIGATION ELEMENTS
add the .nav class to a <ul> element, followed by .nav-item for each <li> and
add the .nav-link class to their links

<ul
class="nav"> <ul class="nav justify-content-
center">
<ul class="nav justify-content-
end">
<ul class="nav flex-
column">

20IT212 - INTERNET PROGRAMMING 261

 TABULAR NAVIGATION
 nav menu into navigation tabs with the .nav-tabs class. Add the .active class to
the active/current link

20IT212 - INTERNET PROGRAMMING 262

 PILLS
 nav menu into navigation pills with the .nav-pills class

 Justify the tabs/pills with the .nav-justified

class (equal width)

20IT212 - INTERNET PROGRAMMING 263

 BREADCRUMBS

• way to show hierarchy-based information for a site

• A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. There is a
also a helper class of .divider that mutes the colors and makes the text a little smaller

<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">2012</a> <span class="divider">/</span></li>
<li><a href="#">December</a> <span class="divider">/</span></li>
<li><a href="#">5</a></li>
</ul>

20IT212 - INTERNET PROGRAMMING 264

 PAGINATION
• To create a basic pagination, add the .pagination class to an <ul> element.
• Then add the .page-item to each <li> element and a .page-link class to each
link inside <li>
pagination-lg, justify-content-center

<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></
li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
active, disabled

20IT212 - INTERNET PROGRAMMING 265

 LABELS

Labels are great for offering counts, tips, or other markup for pages

<span class="label label-default">Default Label</span>

<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

<h1>Example <span class="label label-default">New</span></h1>

*in
Bootstrap3

20IT212 - INTERNET PROGRAMMING 266

 PROGRESS BARS
• A progress bar can be used to show how far a user is in a process.

 To create a default progress bar, add a .progress class <div class="progress">

to a container element and add the .progress-bar class <div class="progress-
to its child element. bar" style="width:70%"></
 Use the CSS width property to set the width of the div>
</div>
progress bar

20IT212 - INTERNET PROGRAMMING 267

 PROGRESS BARS (CONTD..,)
Progress Bar Labels
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Colored Progress Bars
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
Striped Progress Bars Progress Bar Animated
<div class="progress">
<div class="progress-bar progress-bar-
striped" style="width:40%"></div>
</div>

20IT212 - INTERNET PROGRAMMING 268

 XML

20IT212 - INTERNET PROGRAMMING 26947

 Introduction to XML
XML (Extensible Markup Language) is a markup language similar
to HTML, but without predefined tags to use. Instead, you define your own
tags designed specifically for your needs. This is a powerful way to store data
in a format that can be stored, searched, and shared.
Most importantly, since the fundamental format of XML is standardized, if
you share or transmit XML across systems or platforms, either locally or over
the internet, the recipient can still parse the data due to the standardized XML
syntax.
There are many languages based on XML, including XHTML, MathML,
SVG, RSS, and RDF. You can also define your own.

20IT212 - INTERNET PROGRAMMING 270

 Design rationale for XML
1. XML must be easily usable over the Internet
2. XML must support a wide variety of applications
3. XML must be compatible with SGML
4. It must be easy to write programs that process XML documents
5. The number of optional features in XML must be kept small
6. XML documents should be clear and easily understood
7. The XML design should be prepared quickly
8. The design of XML must be exact and concise
9. XML documents must be easy to create
10. Keeping an XML document size small is of minimal importance

20IT212 - INTERNET PROGRAMMING 271

XML TREE STRUCTURE

20IT212 - INTERNET PROGRAMMING 272

Structure of an XML document
Structure
Prolog
◦ Instructs the parser as to what it parsing
◦ Contains processing instructions for processor
Body
◦ Tags - Entities
◦ Attributes - Properties of Entities
◦ Comments - Statements for clarification in the document

20IT212 - INTERNET PROGRAMMING 273

 Structure of an XML document
Prolog
Syntax: <?xml version=“1.0” encoding=“UTF-8”
standalone=“yes” ?>
Contains eclaration that identifies a document as xml
Version
◦ Version of XML markup language used in the data
◦ Not optional
Encoding
◦ Identifies the character set used to encode the data
◦ Default compressed Unicode: UTF-8
Standalone
◦ Tells whether or not this document references external entity
May contain entity definitions and tag specifications

20IT212 - INTERNET PROGRAMMING 274

 XML Structure
Example
<?xml version=“1.0” encoding=“UTF-8” standalone=“yes” ?>  Prolog
<contact>
<name>
<first name>Sanjay</first name>
<last name>Goel</last name>
</name>
<address>  Body
<street>56 Della Street</street>
<city>Phoenix</city>
<state>AZ</state>
<zip>15784</zip>
</address>
</contact>

20IT212 - INTERNET PROGRAMMING 275

 XML Syntax
Element with Attributes

<MyElement myAttribute="attribute value">Some Text</MyElement>

Attributes typically enrich to the data contained within the element, i.e.
define the language the text is in, provide unique ID by which the element
can be referenced elsewhere within the document etc.

Attributes are typically considered to contain secondary/meta

information, although there are no hard and fast rules.

20IT212 - INTERNET PROGRAMMING 276

 XML Syntax
Element with Child Elements

<MyElement> <ChildElement/> </MyElement>

By nesting elements complex hierarchies of data can be constructed. However

these hierarchies are tree like.

When you start placing real world data in them you quickly hit problems sharing
entities between different branches of a tree.

20IT212 - INTERNET PROGRAMMING 277

 XML Syntax
Element with Mixed Data

<MyElement>Some <b>Mixed</b> Data</MyElement>

Mixed data can contain text and child elements within the containing element.
This is typically only used to mark up data (HTML etc).

Its typically only used to hold mark-up/formatted text entered by a person, it is

typically not he best choice for storing machine readable data as adds significant
complexity to the parser. Where possible it should be avoided.

20IT212 - INTERNET PROGRAMMING 278

 XML Syntax
XML Elements
XML is a meta-markup language, a set of rules for creating semantic tags used to describe
data. An XML element is made up of a start tag, an end tag, and data in between. The start
and end tags describe the data within the tags, which is considered the value of the element.

20IT212 - INTERNET PROGRAMMING 279

 Attributes
Definition
• Attributes are properties associated with an element
• Each attribute is a name value pair
– No element may contain two attributes with same name
– Name and value are strings
Example
<?xml version=“1.0” encoding=“UTF-8” standalone=“yes” ?>
◦ <contact>
◦ <name first=“Sanjay” last=“Goel”></name>  Attributes
◦ <address>
◦ <street>56 Della Street</street>  Nested Elements
◦ <city>Phoenix</city>
◦ <state>AZ</state>
◦ <zip>15784</zip>
◦ </address>
◦ </contact>

20IT212 - INTERNET PROGRAMMING 280

 Comments Basics
XML comments begin with “<!--”and end with “-->”
◦ All data between these delimiters is discarded
◦ <!-- This is a list of names of people -->
Comments should not come before XML declaration
Comments can not be placed inside a tag
Comments may be used to hide and surround tags
<Name>
<first>Sanjay</first>
<!-- <last>Goel</last> -->  Last tag is ignored
</Name>
“--” string may not occur inside a comment except as part of
its opening and closing tag
◦ <!-- the Red door -- that is the second -->  Illegal

20IT212 - INTERNET PROGRAMMING 281

•.

Namespaces
In XML, a namespace is used to avoid element name conflicts when
combining XML documents from different XML vocabularies. It does this by
qualifying element and attribute names with a unique URI (Uniform Resource
Identifier).
Why Use Namespaces?
Imagine two different XML documents:
•One uses <name> to represent a person's name.
•Another uses <name> to represent a product name.
•When merged, it's unclear which <name> refers to which — namespaces solve
this problem.

20IT212 - INTERNET PROGRAMMING 282

 Namespaces
XML Namespace Syntax
xmlns:prefix="namespaceURI”
•xmlns is the namespace declaration.
•prefix is the shorthand used in your XML.
•namespaceURI(Uniform Resource Identifier) is a unique
name, typically a URL (but it doesn’t have to point to an actual
resource).
20IT212 - INTERNET PROGRAMMING 283
 Namespaces
Example of XML Without Namespace (Conflict Risk):
<info>
<name>John Doe</name> <!-- Person name -->
<name>Toothbrush</name> <!-- Product name -->
</info>
This is confusing — what does each <name> refer to?

20IT212 - INTERNET PROGRAMMING 284

 Namespaces
Example of XML With Namespaces (No Conflict):
<info xmlns:person="[Link]
xmlns:product="[Link]
<person:name> John Doe </person:name>
<product:name> Toothbrush </product:name>
</info>
Now it's clear:
•<person:name> is a person's name.
•<product:name> is a product's name.

20IT212 - INTERNET PROGRAMMING 285

 Namespaces
Default Namespace (No Prefix):
You can also declare a default namespace for elements:
<book xmlns="[Link]
<title>XML Guide</title>
<author>Jane Doe</author>
</book>
Here, all elements inside <book> are part of the
[Link] namespace, even without a prefix.

20IT212 - INTERNET PROGRAMMING 286

 XML DTD
DTD is a document-type definition. DTD contains a set of
rules that control the structure and elements of XML files. When any
XML file refers DTD file, it validates against those rules. DTD has
validated elements and attributes that are defined inside the DTD
document.
It serves as a formal specification that outlines the elements,
attributes, and their relationships within an XML document. They
specify what elements can appear, their order, which attributes they
can have, and what data types those attributes can contain.
Types of DTD: There are two ways to specify XML DTD.
Internal DTD: Inside the document
External DTD: Specified in a separate document and linked later
20IT212 - INTERNET PROGRAMMING 287
 XML DTD
Data Types in DTD
DTD uses limited data types:
•#PCDATA: Parsed character data (text)
•CDATA: Unparsed character data
•Enumerations: <element attribute (yes | no)>

20IT212 - INTERNET PROGRAMMING 288

XML DTD

20IT212 - INTERNET PROGRAMMING 289

 XML DTD
DTD Syntax
1. DOCTYPE Declaration
Internal DTD:
<!DOCTYPE root-element [
DTD declarations here
]>
External DTD:
<!DOCTYPE root-element SYSTEM "[Link]">
20IT212 - INTERNET PROGRAMMING 290
 XML DTD
2. Element Declaration
<!ELEMENT element-name content-model>
Part Meaning
<!ELEMENT Starts the declaration of an element
The name of the XML element you're
element-name
defining
Describes what content the element can
content-model
contain (text, elements, etc.)
> Ends the declaration
20IT212 - INTERNET PROGRAMMING

291
 XML DTD
3. Attribute Declaration
<!ATTLIST element-name attribute-name attribute-type default-value>

Part Description
<!ATTLIST Declares an attribute list (starts the declaration)
element-name Name of the XML element that will have the attribute
attribute-name Name of the attribute you're defining
attribute-type The type of data the attribute can hold
default-value Whether the attribute is required, optional, or has a default

20IT212 - INTERNET PROGRAMMING 292

 XML DTD
3. Attribute DTD

20IT212 - INTERNET PROGRAMMING 293

 XML DTD
[Link] DTD Example

20IT212 - INTERNET PROGRAMMING 294

 XML DTD
2. External DTD Example
Step 1: Create the DTD file – [Link] Step 2: Link the DTD in your XML file

20IT212 - INTERNET PROGRAMMING 295

 XML Schema

An XML Schema (also called XSD — XML Schema Definition) defines the
structure, content, and data types of XML documents using XML syntax.

It is more powerful and precise than DTD and allows:

•Data type enforcement([Link]:int, xs:string, xs: Date, xs: boolean, custom types)
•Custom data types
• Namespace support

20IT212 - INTERNET PROGRAMMING 296

 XML Schema
Why Use XML Schema (XSD)?

20IT212 - INTERNET PROGRAMMING 297

 XML Schema
Concept Description
xs:element Defines an element
xs:attribute Defines an attribute

xs:complexType An element that contains other elements/attrs

xs:simpleType Element with only text (like string or number)

minOccurs/maxOccurs Controls how many times an element appears

xs:restriction Restricts values (e.g., string length, pattern)

20IT212 - INTERNET PROGRAMMING 298

 XML Schema
XML Schema Basic Syntax

20IT212 - INTERNET PROGRAMMING 299

XML Schema

20IT212 - INTERNET PROGRAMMING 300

XML Schema

20IT212 - INTERNET PROGRAMMING 301

 XML Schema
3. Element Occurrence Rules
xml
<xs:element name="chapter" type="xs:string"
minOccurs="1" maxOccurs="5"/>

minOccurs: Minimum times the element can appear.

maxOccurs: Maximum times it can appear.
maxOccurs="unbounded" = no limit.

20IT212 - INTERNET PROGRAMMING 302

 XML Schema
4. Defining Attributes
xml
<xs:element name="book">
<xs:complexType>
<xs:attribute name="genre" type="xs:string“
use="required"/>
</xs:complexType>
</xs:element>
Adds a required genre attribute to the <book> element.

20IT212 - INTERNET PROGRAMMING 303

 XML
5. Restricting Values
Schema
a) Restrict string length
<xs:element name="username">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:minLength value="4"/>
<xs:maxLength value="12"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
20IT212 - INTERNET PROGRAMMING 304
 XML Schema
b) Restrict to pattern (e.g., ZIPcode)
<xs:element name="zipcode">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="\d{5}"/>
</xs:restriction>
</xs:simpleType>
</xs:element>

20IT212 - INTERNET PROGRAMMING 305

20IT212 - INTERNET PROGRAMMING 306