Web Applications:

An application program that is stored on a remote server and delivered over the internet through
a browser interface. OR A web application (web app) is an application program that is stored on
a remote server and delivered over the internet through a browser interface. Web services are
web apps by definition and many, although not all, websites contain web apps.

How web applications work

Web applications do not need to be downloaded since they are accessed through a network.
Users can access a web application through a web browser, such as Google Chrome, Mozilla
Firefox or Safari.

For a web app to operate, it needs a web server, application server and database. Web servers
manage the requests that come from a client, while the application server completes the
requested task. A database stores any necessary information.

Web applications typically have short development cycles and small development teams.
Developers write most web apps in JavaScript, HTML5 or CSS. Client-side programming
typically utilizes these languages, which help build an application's front-end. Server-side
programming creates the scripts a web app will use. Languages such as Python, Java and Ruby
are commonly used in server-side programming.

Benefits
Web applications have many benefits. Some common benefits include the following:

 Multiple users can access the same version of an application.

 Users don't need to install the app.

 Users can access the app through various platforms such as a desktop, laptop or mobile.

 Users can access the app through multiple browsers.

Web app vs. native app vs. hybrid app
Within the mobile computing sector, web apps are sometimes contrasted with native apps, which
are applications developers build specifically for a particular platform or device and install on
that device. Native apps can commonly make use of device-specific hardware, such as a GPS or
camera on a mobile native app.
Programs that combine the two approaches are sometimes referred to as hybrid applications.
Hybrid apps work similar to web apps but install to the device as a native app would. Hybrid
apps can also take advantage of device-specific resources by using internal APIs. Downloaded
native apps can sometimes operate offline; however, hybrid apps don't have this functionality. A
hybrid app will typically share similar navigation elements to a web app since they are primarily
based on web apps.
TCP/IP

TCP/IP stands for Transmission Control Protocol/Internet Protocol and is a suite of communication
protocols used to interconnect network devices on the internet. TCP/IP is also used as a communications
protocol in a private computer network -- an intranet or extranet.

Difference Between TCP and IP

TCP (Transmission
Feature Control Protocol) IP (Internet Protocol)

Ensures reliable, ordered, and Provides addressing and

Purpose error-checked delivery of data routing of packets across
between applications. networks.

Type Connection-oriented Connectionless

Manages data transmission Routes packets of data from

Function between devices, ensuring data the source to the destination
integrity and order. based on IP addresses.

No, IP itself does not handle

Yes, includes error checking
Error Handling errors; relies on upper-layer
and recovery mechanisms.
protocols like TCP.

Yes, includes flow control

Flow Control No
mechanisms.

Yes, manages network

Congestion Control No
congestion.

Breaks data into smaller

Breaks data into packets but
Data Segmentation packets and reassembles them
does not handle reassembly.
at the destination.
 TCP (Transmission
Feature Control Protocol) IP (Internet Protocol)

Header Size Larger, 20-60 bytes Smaller, typically 20 bytes

Does not guarantee delivery,

Reliability Provides reliable data transfer
reliability, or order.

Transmission Yes, acknowledges receipt of

No
Acknowledgment data packets.

LAYERS OF TCP/IP
TCP/IP is a four-layer model that defines how data is exchanged between applications, hosts, and
networks. The four layers are the application, transport, internet, and network access layers.
The diagrammatic comparison of the TCP/IP and OSI model is as follows:

1. Network Access Layer

It is a group of applications requiring network communications. This layer is responsible for
generating the data and requesting connections. It acts on behalf of the sender and the Network
Access layer on the behalf of the receiver. During this article, we will be talking on the behalf
of the receiver.
The packet’s network protocol type, in this case, TCP/IP, is identified by network access layer.
Error prevention and “framing” are also provided by this layer. Point-to-Point Protocol
(PPP) framing and Ethernet IEEE 802.2 framing are two examples of data-link layer protocols.
2. Internet or Network Layer
This layer parallels the functions of OSI’s Network layer. It defines the protocols which are
responsible for the logical transmission of data over the entire network. The main protocols
residing at this layer are as follows:
 IP: IP stands for Internet Protocol and it is responsible for delivering packets from the
source host to the destination host by looking at the IP addresses in the packet headers. IP
has 2 versions: IPv4 and IPv6. IPv4 is the one that most websites are using currently. But
IPv6 is growing as the number of IPv4 addresses is limited in number when compared to
the number of users.
 ICMP: ICMP stands for Internet Control Message Protocol. It is encapsulated within IP
datagrams and is responsible for providing hosts with information about network problems.
 ARP: ARP stands for Address Resolution Protocol. Its job is to find the hardware address
of a host from a known IP address. ARP has several types: Reverse ARP, Proxy ARP,
Gratuitous ARP, and Inverse ARP.

The Internet Layer is a layer in the Internet Protocol (IP) suite, which is the set of protocols
that define the Internet. The Internet Layer is responsible for routing packets of data from one
device to another across a network. It does this by assigning each device a unique IP address,
which is used to identify the device and determine the route that packets should take to reach
it.

Example: Imagine that you are using a computer to send an email to a friend. When you click
“send,” the email is broken down into smaller packets of data, which are then sent to the
Internet Layer for routing. The Internet Layer assigns an IP address to each packet and uses
routing tables to determine the best route for the packet to take to reach its destination. The
packet is then forwarded to the next hop on its route until it reaches its destination. When all of
the packets have been delivered, your friend’s computer can reassemble them into the original
email message.
In this example, the Internet Layer plays a crucial role in delivering the email from your
computer to your friend’s computer. It uses IP addresses and routing tables to determine the
best route for the packets to take, and it ensures that the packets are delivered to the correct
destination. Without the Internet Layer, it would not be possible to send data across the
Internet.

3. Transport Layer
The TCP/IP transport layer protocols exchange data receipt acknowledgments and retransmit
missing packets to ensure that packets arrive in order and without error. End-to-end
communication is referred to as such. Transmission Control Protocol (TCP) and User
Datagram Protocol are transport layer protocols at this level (UDP).
 TCP: Applications can interact with one another using TCP as though they were physically
connected by a circuit. TCP transmits data in a way that resembles character-by-character
transmission rather than separate packets. A starting point that establishes the connection,
 the whole transmission in byte order, and an ending point that closes the connection make
up this transmission.
 UDP: The datagram delivery service is provided by UDP, the other transport layer
protocol. Connections between receiving and sending hosts are not verified by UDP.
Applications that transport little amounts of data use UDP rather than TCP because it
eliminates the processes of establishing and validating connections.
4. Application Layer
This layer is analogous to the transport layer of the OSI model. It is responsible for end-to-end
communication and error-free delivery of data. It shields the upper-layer applications from the
complexities of data. The three main protocols present in this layer are:
 HTTP and HTTPS: HTTP stands for Hypertext transfer protocol. It is used by the World
Wide Web to manage communications between web browsers and servers. HTTPS stands
for HTTP-Secure. It is a combination of HTTP with SSL(Secure Socket Layer). It is
efficient in cases where the browser needs to fill out forms, sign in, authenticate, and carry
out bank transactions.
 SSH: SSH stands for Secure Shell. It is a terminal emulations software similar to Telnet.
The reason SSH is preferred is because of its ability to maintain the encrypted connection.
It sets up a secure session over a TCP/IP connection.
 NTP: NTP stands for Network Time Protocol. It is used to synchronize the clocks on our
computer to one standard time source. It is very useful in situations like bank transactions.
Assume the following situation without the presence of NTP. Suppose you carry out a
transaction, where your computer reads the time at 2:30 PM while the server records it at
2:28 PM. The server can crash very badly if it’s out of sync.
The host-to-host layer is a layer in the OSI (Open Systems Interconnection) model that is
responsible for providing communication between hosts (computers or other devices) on a
network. It is also known as the transport layer.
Some common use cases for the host-to-host layer include:
 Reliable Data Transfer: The host-to-host layer ensures that data is transferred reliably
between hosts by using techniques like error correction and flow control. For example, if a
packet of data is lost during transmission, the host-to-host layer can request that the packet
be retransmitted to ensure that all data is received correctly.
 Segmentation and Reassembly: The host-to-host layer is responsible for breaking up
large blocks of data into smaller segments that can be transmitted over the network, and
then reassembling the data at the destination. This allows data to be transmitted more
efficiently and helps to avoid overloading the network.
 Multiplexing and Demultiplexing: The host-to-host layer is responsible for multiplexing
data from multiple sources onto a single network connection, and then demultiplexing the
data at the destination. This allows multiple devices to share the same network connection
and helps to improve the utilization of the network.
 End-to-End Communication: The host-to-host layer provides a connection-oriented
service that allows hosts to communicate with each other end-to-end, without the need for
intermediate devices to be involved in the communication.

Example: Consider a network with two hosts, A and B. Host A wants to send a file to host B.
The host-to-host layer in host A will break the file into smaller segments, add error correction
and flow control information, and then transmit the segments over the network to host B. The
host-to-host layer in host B will receive the segments, check for errors, and reassemble the file.
Once the file has been transferred successfully, the host-to-host layer in host B will
acknowledge receipt of the file to host A.
In this example, the host-to-host layer is responsible for providing a reliable connection
between host A and host B, breaking the file into smaller segments, and reassembling the
segments at the destination. It is also responsible for multiplexing and demultiplexing the data
and providing end-to-end communication between the two hosts.
Advantages of TCP/IP Model
 Interoperability: The TCP/IP model allows different types of computers and networks to
communicate with each other, promoting compatibility and cooperation among diverse
systems.
 Scalability: TCP/IP is highly scalable, making it suitable for both small and large
networks, from local area networks (LANs) to wide area networks (WANs) like the
internet.
 Standardization: It is based on open standards and protocols, ensuring that different
devices and software can work together without compatibility issues.
 Flexibility: The model supports various routing protocols, data types, and communication
methods, making it adaptable to different networking needs.
 Reliability: TCP/IP includes error-checking and retransmission features that ensure reliable
data transfer, even over long distances and through various network conditions.

Disadvantages of TCP/IP Model

 Complex Configuration: Setting up and managing a TCP/IP network can be complex,
especially for large networks with many devices. This complexity can lead to configuration
errors.
 Security Concerns: TCP/IP was not originally designed with security in mind. While there
are now many security protocols available (such as SSL/TLS), they have been added on top
of the basic TCP/IP model, which can lead to vulnerabilities.
 Inefficiency for Small Networks: For very small networks, the overhead and complexity
of the TCP/IP model may be unnecessary and inefficient compared to simpler networking
protocols.
 Limited by Address Space: Although IPv6 addresses this issue, the older IPv4 system has
a limited address space, which can lead to issues with address exhaustion in larger
networks.
 Data Overhead: TCP, the transport protocol, includes a significant amount of overhead to
ensure reliable transmission. This can reduce efficiency, especially for small data packets
or in networks where speed is crucial.

TCP/IP Application Services

 Some TCP/IP application services include:
 DNS: Allows DNS clients to query the DNS database to resolve hostnames to IP addresses.
 Telnet: Establishes a TCP connection to a port and sends and receives ASCII characters to and
from the destination system.
 File Transfer Protocol (FTP): Allows a user to log in to a remote host and perform file
operations.
 User Datagram Protocol (UDP): Provides full transport layer services to applications. It is
another transport layer protocol in the IP suite. Unlike TCP, UDP does not guarantee reliable
delivery of data, but it provides faster data transfer by eliminating the overhead of retransmitting
lost or corrupted data.
 Hypertext Transfer Protocol (HTTP): An application-level protocol that is used to transfer data over
the internet. It is built on top of TCP, which provides the reliable delivery of data.

 Transmission Control Protocol (TCP): Ensures process to process error and flow control.
 Simple Network Time Protocol (SNTP): It is a protocol that synchronizes the clocks of devices
on a network. It's a subset of the Network Time Protocol (NTP), but is simpler and uses less
memory and processing power. SNTP is commonly used for applications that don't require
precise clock synchronization, such as IP cameras, DVRs, and some network switches. It
retrieves a timestamp from an NTP server.
 Trivial File Transfer Protocol (TFTP): It is a simple, Internet-standard protocol for
transferring files between computers and server. TFTP is used to transfer files
between two TCP/IP machines, typically for bootstrapping remote devices. It's also used to
upload HTML pages to an HTTP server or download log files to a remote PC .

The core functions implemented by the main TCP/IP protocols such as IP, TCP and UDP are
designed to accomplish the internetworking functions of the protocol suite.
Applications provided by TCP/IP
fragmentation, packet addressing, routing, and packet reassembly

Packet Addressing allows the transmission of packets from one IP address to another.

Packet routing means the selection of a path for transmission.

Packet fragmentation and reassembly allows transmission of large data through small packets, and it is
this capability that allows connection to different network media.

WEB SERVERS & its Operations

A web server is a computer system capable of delivering web content to end users over the internet via a
web browser.

How a web server works

The end user processes a request via a web browser installed on a web server. The
communication between a web server or browser and the end user takes place using Hypertext
Transfer Protocol (HTTP). The primary role of a web server is to store, process, and deliver
requested information or webpages to end users. It uses:

Physical Storage: All website data is stored on a physical web server to ensure its safety. When
an end user enters the URL of your website or searches it using a keyword on a browser, a
request is generated and sent to the web server to process the data.

Web browser: The role of web browsers such as Firefox, Chrome, or Internet Explorer is to find
the web server on which your website data is located. Once the browser finds your server, it
reads the request and processes the information.

Uses of a Web Server

Web servers are primarily used to process and manage HTTP/HTTPS requests
and responses from the client system.

A web server can also perform several other functions, such as:
o Store and protect website data: A web server can store and protect critical website data from
unauthorized users.
o Control bandwidth to regulate network traffic: A web server can help eliminate the downtime
caused by high web traffic. Web hosts can set bandwidth to manage the rate of data transmission
over the internet and minimize the excess network traffic.
o Server-side web scripting: The server-side web scripting feature enables users to create
dynamic web pages using scripting languages such as Ruby, Python, and PHP.
o Virtual hosting: Web servers can also be used as virtual servers to run multiple applications,
websites, data, and other services.

Dynamic & Static Servers:

A dynamic web server is a web server that uses an application server and database to update
hosted files before sending them to a browser. This allows for personalized content, real-time
updates, and interactive features.

Dynamic websites can personalize content based on a user's preferences, interests, browsing
history, and other factors. For example, a dynamic website might display product prices in a
visitor's local currency.

Static Web Server (or SWS abbreviated) is a tiny and fast production-ready web server suitable
to serve static web files or assets. We call it "static" because the server sends its hosted files as-is
to your browser.

VIRTUAL HOSTING
Virtual hosting is hosting several domain names on a single server. It simply means
hosting multiple websites on one machine. This server can share all its resources, such as
CPU and memory cycles, with the hosted domains. It is also known as shared hosting. It's a
cost-effective way for companies to share resources like memory, CPU, and
disk space.

some key features of virtual hosting:

 Host names: Each website is differentiated by its host name.

 Routing: Visitors are routed to the correct virtual host by IP address or host name.
 DNS names: Virtual hosts use DNS naming to map host names to the IP address of a web
server.

 IP-based or name-based: Virtual hosts can be either IP-based, where each website has a
different IP address, or name-based, where multiple names run on each IP address.

 Cost-effective: Companies can share the cost of the server with other organizations.

 Good for small to medium-sized websites: This system is well suited for businesses that
don't need all the resources of a server to operate efficiently.
 Virtual hosting is used in a variety of ways, including:
 External sales
Companies like GoDaddy and Wix use virtual hosting to host multiple websites on
their servers.
 Internal traffic
Companies with an internal intranet and an external-facing website can use a virtual
host to avoid the need for two servers.

Chunked Transfer
Chunked transfer encoding (CTE) is a method of data transfer in Hypertext Transfer
Protocol (HTTP) that breaks data into chunks and sends them separately. CTE divides a data stream
into non-overlapping chunks, which are sent independently. Each chunk is preceded by its
size in bytes, and the transmission ends when a zero-length chunk is received.

 Benefits
CTE improves performance and user experience by:
 Allowing the client to start processing data before the entire response is received
 Enabling smaller requests to use the connection between chunks
 Allowing for faster load times in video streaming applications

 When to use it
CTE is useful for sending large files or dynamically generated content, where the total
size of the response is unknown or cannot be predetermined.
 How to indicate it
The chunked keyword in the Transfer-Encoding header indicates chunked transfer.

Caching Support

Web caching is a technique that stores copies of web objects, like images or
web pages, to improve the performance of a website or application:
 How it works
When a user visits a website for the first time, the browser downloads the content from
the web server and saves it to a local cache. When the user visits the site again, the
browser can retrieve the content from the cache instead of the server, which speeds
up the page load time.
 Benefits
 Caching reduces the load on the web server, saves the user time, and reduces
network traffic. It can also protect against outages by delivering cached content when
servers are down.

 Caching strategies
Caching servers can be set to refresh at specific intervals or in response to
events. This ensures that the freshest content is cached, which is useful for rapidly
changing information.
Security features
Some web cache solutions, like Oracle Web Cache, include security features like:
 Password authentication
 Control over which ports administration and invalidation operations can be requested
from
 Timeout for inactive connections
 IP and subnet administration restrictions

CDN caching

A CDN, or content delivery network, caches content (such as images, videos, or webpages) in
proxy servers that are located closer to end users than origin servers. (A proxy server is a server
that receives requests from clients and passes them along to other servers.) Because the servers
are closer to the user making the request, a CDN is able to deliver content more quickly.

Extensibility in web technology: is the ability to customize or extend a web

platform, framework, or language to meet a project's needs. It allows developers to add new
features or functionalities without changing the underlying codebase.

Here are some examples of extensibility in web technology:

 UI extensibility
Allows developers to add new widgets, hide existing widgets, override default field labels, and
customize the theme for an application.
 Browser extensions
Allow users to add new features, tools, or integrations to a web browser without altering the
core browser experience.
 CSS Houdini
A set of APIs that allow developers to create new CSS features without waiting for them to be
implemented natively in browsers.
 Extensible Web Server (EWS)
 A distributed web server architecture that allows server nodes to be added or removed at any
time.
Extensibility is a design principle that prepares for the unknown by acknowledging that it's
impossible to predict all future needs. It's about creating flexible, modular systems that can adapt
to changing requirements over time.

Standard Generalized Markup Language (SGML)

Standard Generalized Markup Language (SGML) is an international computer

standard that defines how to specify markup languages for documents. SGML is a description of
how to define markup languages, rather than a document language itself. It uses structural
markup to describe structured information without regard to how it is processed.
SGML is used to specify document type definitions (DTDs), which define the syntax of markup
constructs and the rules for using document elements. For example, a DTD can specify what
elements must appear in a document and how subparts are organized.
SGML has been extended into languages like HTML and XML. XML is a subset of SGML that
uses fewer rules and is more easily implemented on large networks like the internet.

Here are some components of an SGML application:

 SGML declaration: Specifies which characters and delimiters can appear in the application
 Document type definition (DTD): Defines the syntax of markup constructs and rules for using
document elements
 Specification: Describes the semantics to be ascribed to the markup
 Document instances: Contain data and markup, and reference the DTD to be used to interpret
them


History of SGML
 This standard descended from IBM’s GML (Generalized Markup Language).
 Edward Mosher, Charles Goldfarb, and Raymond Lorie developed GML in the 1960s.
The editor of the international standard, Goldfarb, used the initials of their surnames to
coin the term GML.
 SGML originated as a document markup language. It aimed to enable the sharing of
large-project documents that are machine-readable. It included docs in law, government,
and industry.
 The military, aerospace, industrial publishing industries, and technical reference also
extensively applied SGML.
 The XML profile advent made SGML suitable for its widespread application in general
purposes and small-scale industries.
Advantages of SGML
 One can recreate the SGML on the basis of document structure instead of appearance
characteristics. It is good because such characteristics may change over time.
 The documents produced originally for print media can re-adapt into other media, like the
computer display screen.
 A compiler of SGML can interpret any document easily by referencing its DTD
(document type definition). Thus, it becomes more portable.
 The SGML standard supports all media types, and it can encode the entire structure of
any document.
 It separates the content from its appearance.
 The stylesheets with SGML make its content reusable for various purposes.
 The file encoding that SGML offers can perform more formatting when compared to
HTML.
 SGML is much more in use compared to HTML because HTML provides capabilities for
coding visual representation, and it cannot structure the original information/data.
 Due to ISO standards, many tools are available for SGML. Thus, it is well supported
currently.

Disadvantages of SGML
 Coding software in SGML may be typical and complicated.
 The tools in use with this standard are very expensive.
 SGML may not have extensive use.
 It needs special software for running and allowing the document to display.
 Creating the DTDs requires exacting software engineering.

Components of SGML:
 SGML provides a way of describing the relationships between these entities, elements, and
attributes, and tells the computer how it can recognize the component parts of a document
and it is based on the concept of a document being composed of a series of entities (object).
 It provides rules that allow the computer to recognize where the various elements of a text
entity start and end.
 Document Type Definition (DTD) in SGML is used to describe each element of the
document in a form that the computer can understand .

SGML is the simplest medium to produce files that can be read by people and exchanged
between machines and applications in a straightforward manner. It is easy to understand by the
human as well as the machine.

Structure of SGML

<main Object>
<sub Object>
</sub Object>
</main Object>

Extension of SGML file

File_name.sgml

Example:

<EMAIL>

<SENDER>

<PERSON>

<FIRSTNAME>GEEKS FOR GEEKS</FIRSTNAME>

</PERSON>

</SENDER>

<BODY>

<p>A Computer Science Portal For Geeks</p>

</BODY>

</EMAIL>

HTML5
Introduction: HTML stands for Hyper Text Markup Language. It is used to design web pages
using a markup language. HTML is an abbreviation of Hypertext and Markup language.
Hypertext defines the link between the web pages. The markup language is used to define the
text document within the tag which defines the structure of web pages. HTML 5 is the fifth and
current version of HTML. It has improved the markup available for documents and has
introduced application programming interfaces (API) and Document Object Model (DOM).
Features:
 It has introduced new multimedia features which supports both audio and video controls by
using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it to a new
location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on the web
browser.
 Uses SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e., <!doctype html>
 Easy character encoding i.e., <meta charset=”UTF-8″>

Removed elements from HTML 5 : There are many elements which are depreciated from
HTML 5 are listed below:
Removed Elements Use Instead Elements

<acronym> <abbr>

<applet> <object>

<basefont> CSS

<big> CSS

<center> CSS

<dir> <ul>

<font> CSS

<frame>

<frameset>

<noframes>
Removed Elements Use Instead Elements

<isindex>

<strike> CSS, <s> or <del>

<tt> CSS

New Added Elements in HTML 5:

 <article>: The <article> tag is used to represent an article. More specifically, the content
within the <article> tag is independent from the other content of the site (even though it
can be related).
 <aside>: The <aside> tag is used to describe the main object of the web page in a shorter
way like a highlighter. It basically identifies the content that is related to the primary
content of the web page but does not constitute the main intent of the primary page. The
<aside> tag contains mainly author information, links, related content and so on.
 <figcaption>: The <figcaption> tag in HTML is used to set a caption to the figure element
in a document.
 <figure>: The <figure> tag in HTML is used to add self-contained content like
illustrations, diagrams, photos or codes listing in a document. It is related to main flow, but
it can be used in any position of a document and the figure goes with the flow of the
document and if it is removed it should not affect the flow of the document.
 <header>: It contains the section heading as well as other content, such as a navigation
links, table of contents, etc.
 <footer>: The <footer> tag in HTML is used to define a footer of HTML document. This
section contains the footer information (author information, copyright information, carriers
etc.). The footer tag is used within body tag. The <footer> tag is new in the HTML 5. The
footer elements require a start tag as well as an end tag.
 <main>: Delineates the main content of the body of a document or web app.
 <mark>: The <mark> tag in HTML is used to define the marked text. It is used to
highlight the part of the text in the paragraph.
 <nav>: The <nav> tag is used to declaring the navigational section in HTML documents.
Websites typically have sections dedicated to navigational links, which enables user to
navigate the site. These links can be placed inside a nav tag.
 <section>: It demarcates a thematic grouping of content.
 <details>: The <details> tag is used for the content/information which is initially hidden
but could be displayed if the user wishes to see it. This tag is used to create interactive
widget which user can open or close it. The content of details tag is visible when open the
set attributes.
 <summary>: The <summary> tag in HTML is used to define a summary for the <details>
element. The <summary> element is used along with the <details> element and provides a
summary visible to the user. When the summary is clicked by the user, the content placed
inside the <details> element becomes visible which was previously hidden. The
<summary> tag was added in HTML 5. The <summary> tag requires both starting and
ending tag.
 <time>: The <time> tag is used to display the human-readable data/time. It can also be
used to encode dates and times in a machine-readable form. The main advantage for users
is that they can offer to add birthday reminders or scheduled events in their calendars and
search engines can produce smarter search results.
 <bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It differentiates a text from
other text that may be formatted in different direction. This tag is used when a user
generated text with an unknown direction.
 <wbr>: The <wbr> tag in HTML stands for word break opportunity and is used to define
the position within the text which is treated as a line break by the browser. It is mostly used
when the used word is too long and there are chances that the browser may break lines at
the wrong place for fitting the text.
 <datalist>: The <datalist> tag is used to provide autocomplete feature in the HTML files.
It can be used with input tag, so that users can easily fill the data in the forms using select
the data.
 <keygen>: The <keygen> tag in HTML is used to specify a key-pair generator field in a
form. The purpose of <keygen> element is to provide a secure way to authenticate users.
When a form is submitted then two keys are generated, private key and public key. The
private key stored locally, and the public key is sent to the server. The public key is used to
generate client certificate to authenticate user in future.
 <output>: The <output> tag in HTML is used to represent the result of a calculation
performed by the client-side script such as JavaScript.
 <progress>: It is used to represent the progress of a task. It also defines how much work is
done and how much is left to download a task. It is not used to represent the disk space or
relevant query.
 <svg>: It is the Scalable Vector Graphics.
 <canvas>: The <canvas> tag in HTML is used to draw graphics on web page using
JavaScript. It can be used to draw paths, boxes, texts, gradient and adding images. By
default, it does not contain border and text.
 <audio>: It defines the music or audio content.
 <embed>: Defines containers for external applications (usually a video player).
 <source>: It defines the sources for <video> and <audio>.
 <track>: It defines the tracks for <video> and <audio>.
 <video>: It defines the video content.

Advantages:

 All browsers supported.

 More device friendly.
 Easy to use and implement.
 HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites.
Disadvantages:
 Long codes have to be written which is time consuming.
 Only modern browsers support it.
Supported Browsers: It is supported by all modern browsers.

Example 1:
<!DOCTYPE html>
<html>
<head>
<title>HTML 5</title>
<style>
h1 {
font-size:50px;
}
</style>
</head>

<body>
<h1>FG Degree College Gujranwala Cantt</h1>
</body>

</html>

Example 2:

<!DOCTYPE html>
<html>

<head>
<title>HTML 5 Demo</title>

<style>
.GFG {
font-size:40px;
font-weight:bold;
color:green;
}
body {
text-align:center;
}
</style>
</head>

<body>
<div class = "GFG">FG DEGREE COLLEGE GUJRANWALA CANTT</div>
<aside>
<div>My old College</div>
</aside>
</body>

</html>

CSS3
 Cascading Style Sheets Level 3 (CSS3) is a web technology that allows developers to style web
pages and make them more visually appealing and user-friendly:

 Features
CSS3 includes many features that make web design more dynamic, such as animations,
transitions, gradients, shadows, and 3D transformations. It also supports responsive design and
cross-browser compatibility.
 Benefits
CSS3 allows developers to create more complex layouts and precisely position elements on a
web page. It also simplifies many styling tasks, saving time and making it easier to create well-
structured websites.
 Compatibility
CSS3 is supported by almost all modern web browsers, including Google Chrome, Firefox,
Safari, and Opera.
 Modules
Some of the major modules of CSS3 include:
 Box model
 Image values and replaced content
 Text effects
 Selectors
 Backgrounds and borders
 Animations
 User interface (UI)
 Multiple column layouts

Understanding CSS and CSS3

1. CSS:
CSS stands for Cascading Style Sheets. It is primarily used to provide styling to web pages,
including color, layout, background, font, and border properties. The main objective of CSS is
to improve content accessibility, provide enhanced flexibility and control, and specify
presentation characteristics.
2. CSS3:
CSS3 stands for Cascading Style Sheets Level 3. It is an advanced version of CSS, used for
structuring, styling, and formatting web pages. CSS3 introduces several new features and is
supported by all modern web browsers. One of the most significant advancements in CSS3 is
the splitting of CSS standards into separate modules, making it simpler to learn and use.

Difference Between CSS and CSS3

 CSS CSS3

Capable of making web pages more

Capable of positioning texts and objects. attractive and takes less time to create. It is
backward compatible with CSS.

Does not support responsive design. Supports responsive design.

Cannot be split into modules. Can be broken down into modules.

Cannot build 3D animation and

Supports animation and 3D transformations.
transformation.

Slower compared to CSS3. Faster than CSS.

Uses a set of standard colors and basic Has a good collection of HSL, RGBA,
color schemes. HSLA, and gradient colors.

Supports only single text blocks. Supports multi-column text blocks.

Does not support media queries. Supports media queries.

Not supported by all types of modern

Supported by all modern browsers.
browsers.

Requires manual development of Provides advanced codes for setting

rounded gradients and corners. rounded gradients and corners.

No special effects like shadowing text or

Supports text shadows, visual effects, and a
text animation; requires jQuery and
wide range of font styles and colors.
JavaScript for animations.
 CSS CSS3

Can add background colors to list items Lists have a special display property and list
and lists, and set images for list items. items have counter reset properties.

Developed in 1996. Released in 2005.

Memory intensive. Consumes less memory compared to CSS.

New Features of CSS3

1. Combinator: CSS3 introduces a new general sibling combinator, which matches sibling
elements using the tilde (~) combinator.
2. CSS Selectors: CSS3 selectors are more advanced than the simple selectors offered by
CSS, providing a sequence of easy-to-use and simple selectors.
3. Pseudo-elements: CSS3 adds many new pseudo-elements for easier and more detailed
styling. The new convention of double colons (::) is also introduced.
4. Border Style: CSS3 includes new border styling features like border-radius, border-image-
slice, border-image-source, and values for “width stretch”.
5. Background Style Properties: CSS3 introduces new background style properties such
as background-clip, background-size, background-style, and background-origin.
In conclusion, CSS3 significantly improves upon CSS by offering advanced features like
responsive design, animations, and modular structures. These enhancements make web
development faster, more efficient, and visually appealing, emphasizing the importance of
utilizing modern web technologies for better design.