UNIT-I Lecture Notes

TOPIC-1 WEB ESSENTIALS: CLIENT, SERVERS AND COMMUNICATON

1.1 THE INTERNET:
Internet is defined as an Information super Highway, to access information over the web.
However, It can be defined in many ways as follows:
• Internet is a world-wide global system of interconnected computer networks.
• Internet uses the standard Internet Protocol (TCP/IP).
• Every computer in internet is identified by a unique IP address.
• IP Address is a unique set of numbers (such as [Link]) which identifies a computer
location.
• A special computer DNS (Domain Name Server) is used to give name to the IP Address so that
user can locate a computer by a name.
• For example, a DNS server will resolve a name [Link] to a particular IP
address to uniquely identify the computer on which this website is hosted.
• Internet is accessible to every user all over the world.

Evolution
The concept of Internet was originated in 1969 and has undergone several technological &
Infrastructural changes as discussed below:
• The origin of Internet devised from the concept of Advanced Research Project Agency
Network (ARPANET).
• ARPANET was developed by United States Department of Defense.
• Basic purpose of ARPANET was to provide communication among the various bodies of
government.
• Initially, there were only four nodes, formally called Hosts.
• In 1972, the ARPANET spread over the globe with 23 nodes located at different countries and
thus became known as Internet.
• By the time, with invention of new technologies such as TCP/IP protocols, DNS, WWW,
browsers, scripting languages etc., Internet provided a medium to publish and access
information over the web.
 1.1.1 BASIC INTERNET PROTOCOLS:
A computer communication protocol is a detailed specification of how communication between
two computers will be carried out in order to serve some purpose.
i) TCP/IP (Transmission Control Protocol/ Internet Protocol):
These are a set of standard rules that allows different types of computers to communicate with each
other. The IP protocol ensures that each computer that is connected to the Internet is having a
specific serial number called the IP address. TCP specifies how data is exchanged over the internet
and how it should be broken into IP packets. It also makes sure that the packets have information
about the source of the message data, the destination of the message data, the sequence in which
the message data should be re-assembled, and checks if the message has been sent correctly to the
specific destination. The TCP is also known as a connection-oriented protocol.
The functionality of TCP/IP is divided into 4 layers with each one having specific protocols:
1. Application Layer: The application layer makes sure that the data from the sending end is
received in a format that is acceptable and supported at the receiving end.
2. Transport Layer: The transport layer is responsible for the smooth transmission of data from
one end to the other. It is also responsible for reliable connectivity, error recovery, and flow control
of the data.
3. Internet Layer: This Internet Layer moves packets from source to destination by connecting
independent networks.
4. Network Access Layer: The Network Access Layer sees how a computer connects to a network.

ii) User Datagram Protocol (UDP)

Like IP, UDP is connectionless and unreliable protocol. It doesn’t require making a connection with
the host to exchange data. Since UDP is unreliable protocol, there is no mechanism for ensuring that
data sent is received.
UDP transmits the data in form of a datagram. The UDP datagram consists of five parts as shown in
the following diagram:
 Points to remember:
• UDP is used by the application that typically transmit small amount of data at one time.
• UDP provides protocol port used i.e. UDP message contains both source and destination port number,
that makes it possible for UDP software at the destination to deliver the message to correct application
program.

iii) DNS (Domain Name System)

It allows you to interact with devices on the Internet without having to remember long strings of
numbers. Each computer on the Internet has its own unique address, known as an IP address, just
like every home has a unique address for sending direct mail. [Link] is an IP address
consisting of four sets of numbers extending from 0 to 255 separated by a period. It’s not easy
having to remember this complicated collection of numbers every time you want to access a
website, which is where DNS comes in handy. [Link] can be remembered instead of
[Link].

Domain Hierarchy:
 When you make a DNS request, what happens?

• When you request a domain name, your computer first checks its local cache to see if you have
recently visited the address. If you haven’t, your computer will send a request to your recursive
DNS server.
• Your ISP will typically provide you with a recursive DNS server, but you can also use your own.
A local cache of recently discovered domain names is also kept on this server. If a local result is
discovered, it is returned to your computer, and your request is completed (this is common for
popular and highly requested services such as Google, Facebook, Twitter). If the request cannot be
met locally, a journey begins with the Internet’s root DNS server to locate the appropriate response.
• Root servers act as the DNS backbone of the Internet, leading you to the appropriate top-level
domain servers based on your request. For example, if you request [Link], the
root server will recognize the .org top-level domain and direct you to the appropriate TLD server
for .org addresses.
• The TLD server keeps track of where to look for authoritative servers that respond to DNS requests.
Authoritative servers are sometimes referred to as domain nameservers. [Link] and
[Link], for example, are name servers for [Link]. Multiple nameservers
for one domain name are often used as backups in case they go down.
• An authoritative DNS server is the server that stores the DNS records for a domain name and where
any modifications are made to the DNS records for that domain name. The DNS record is then
transmitted to the recursive DNS server, where a local copy is cached for future queries and later
sent back to the originating client making the request based on the record type.
iv) HIGHER LEVEL PROTOCOLS

Protocols operate at multiple levels during communication between systems on the web as is seen in
the OSI model. Key to using the web is various high-level protocols like FTP, SMTP, Telnet and
HTTP. Out of this list, perhaps the most ubiquitous and most used protocol is the HTTP
FTP (File Transfer Protocol):
This protocol is used for transferring files from one system to the other. This works on a client -
server model. When a machine requests for file transfer from another machine, the FTO sets up a
connection between the two and authenticates each other using their ID and Password. And, the
desired file transfer takes place between the machines. Files can easily be copied over another
computer residing on the same network, through a shared folder. Transfer of files can even be sent
over E-Mails but then the size is limited. However, if they are big and/or separated across the web,
then transferring files can happen through the Internet in an effective way, but then for security
reasons, it is not allowed to share folders over.
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
mails. And as soon as, it delivers the mail to the receiving email id, it removes the email from the
outgoing list. The message or the electronic mail may consider of text, video, image etc. It helps in
setting up of some communication server rules.
HTTP(Hyper Text Transfer Protocol):
This protocol is used to transfer hypertexts over the internet and it is defined by the www(world
wide web) for information transfer. This protocol defines how the information needs to be formatted
and transmitted. And, it also defines the various actions the web browsers should take in response
to the calls made to access a particular web page. Whenever a user opens their web browser, the
user will indirectly use HTTP as this is the protocol that is being used to share text, images, and
other multimedia files on the World Wide Web.
Note: Hypertext refers to the special format of the text that can contain links to other texts.
HTTPS (Hyper Text Transfer Protocol Secure):
HTTPS is an extension of the Hypertext Transfer Protocol (HTTP). It is used for secure
communication over a computer network with the SSL/TLS protocol for encryption and
authentication. So, generally, a website has an HTTP protocol but if the website is such that it
receives some sensitive information such as credit card details, debit card details, OTP, etc then it
requires an SSL certificate installed to make the website more secure. So, before entering any
sensitive information on a website, we should check if the link is HTTPS or not. If it is not HTTPS
then it may not be secure enough to enter sensitive information.
TELNET (Terminal Network):
TELNET is a standard TCP/IP protocol used for virtual terminal service given by ISO. This enables
one local machine to connect with another. The computer which is being connected is called a
remote computer and which is connecting is called the local computer. TELNET operation lets us
display anything being performed on the remote computer in the local computer. This operates on
the client/server principle. The local computer uses the telnet client program whereas the remote
computer uses the telnet server program.
POP3(Post Office Protocol 3):
POP3 stands for Post Office Protocol version 3. It has two Message Access Agents (MAAs) where
one is client MAA (Message Access Agent) and another is server MAA (Message Access Agent)
for accessing the messages from the mailbox. This protocol helps us to retrieve and manage emails
from the mailbox on the receiver mail server to the receiver’s computer. This is implied between
the receiver and receiver mail server. It can also be called as one way client server protocol. The
POP3 WORKS ON THE 2 PORTS I.E. PORT 110 AND PORT 995.
1.2 World Wide Web

World Wide Web, which is also known as a Web, is a collection of websites or web pages stored
in web servers and connected to local computers through the internet. These websites contain text
pages, digital images, audios, videos, etc. Users can access the content of these sites from any part
of the world over the internet using their devices such as computers, laptops, cell phones, etc. The
WWW, along with internet, enables the retrieval and display of text and media to your device.

The building blocks of the Web are web pages which are formatted in HTML and connected by
links called "hypertext" or hyperlinks and accessed by HTTP. These links are electronic
connections that link related pieces of information so that users can access the desired information
quickly. Hypertext offers the advantage to select a word or phrase from text and thus to access other
pages that provide additional information related to that word or phrase.

A web page is given an online address called a Uniform Resource Locator (URL). A particular
collection of web pages that belong to a specific URL is called a website,
e.g., [Link], [Link], etc. So, the World Wide Web is like a huge electronic
book whose pages are stored on multiple servers across the world.

Small websites store all of their Web Pages on a single server, but big websites or organizations
place their Web Pages on different servers in different countries so that when users of a country
search their site they could get the information quickly from the nearest server.

So, the web provides a communication platform for users to retrieve and exchange information over
the internet. Unlike a book, where we move from one page to another in a sequence, on World Wide
Web we follow a web of hypertext links to visit a web page and from that web page to move to
other web pages. You need a browser, which is installed on your computer, to access the Web.

Difference between World Wide Web and Internet:

Some people use the terms 'internet' and 'World Wide Web' interchangeably. They think they are
the same thing, but it is not so. Internet is entirely different from WWW. It is a worldwide network
of devices like computers, laptops, tablets, etc. It enables users to send emails to other users and
chat with them online. For example, when you send an email or chatting with someone online, you
are using the internet.

But, when you have opened a website like [Link] for information, you are using the World
Wide Web; a network of servers over the internet. You request a webpage from your computer
using a browser, and the server renders that page to your browser. Your computer is called a client
who runs a program (web browser), and asks the other computer (server) for the information it
needs.

The World Wide Web Works

Now, we have understood that WWW is a collection of websites connected to the internet so that
people can search and share information. Now, let us understand how it works!

The Web works as per the internet's basic client-server format as shown in the following image.
The servers store and transfer web pages or information to user's computers on the network when
requested by the users. A web server is a software program which serves the web pages requested
by web users using a browser. The computer of a user who requests documents from a server is
known as a client. Browser, which is installed on the user' computer, allows users to view the
retrieved documents.
 All the websites are stored in web servers. Just as someone lives on rent in a house, a website
occupies a space in a server and remains stored in it. The server hosts the website whenever a user
requests its Web Pages, and the website owner has to pay the hosting price for the same.

The moment you open the browser and type a URL in the address bar or search something on
Google, the WWW starts working. There are three main technologies involved in transferring
information (web pages) from servers to clients (computers of users). These technologies include
Hypertext Markup Language (HTML), Hypertext Transfer Protocol (HTTP) and Web browsers.

1.3 Hypertext Transfer Protocol (HTTP):

➢ HTTP stands for Hyper Text Transfer Protocol.
➢ It is a protocol used to access the data on the World Wide Web (www).
➢ The HTTP protocol can be used to transfer the data in the form of plain text, hypertext, audio, video,
and so on.
➢ This protocol is known as Hyper Text Transfer Protocol because of its efficiency that allows us to
use in a hypertext environment where there are rapid jumps from one document to another
document.
➢ HTTP is similar to the FTP as it also transfers the files from one host to another host. But HTTP is
simpler than FTP as HTTP uses only one connection, i.e., no control connection to transfer the files.
➢ HTTP is used to carry the data in the form of MIME-like format.
➢ HTTP is similar to SMTP as the data is transferred between client and server. The HTTP differs
from the SMTP in the way the messages are sent from the client to the server and from server to
the client. SMTP messages are stored and forwarded while HTTP messages are delivered
immediately.
 Features of HTTP:

➢ Connectionless protocol: HTTP is a connectionless protocol. HTTP client initiates a request and
waits for a response from the server. When the server receives the request, the server processes the
request and sends back the response to the HTTP client after which the client disconnects the
connection. The connection between client and server exist only during the current request and
response time only.
➢ Media independent: HTTP protocol is a media independent as data can be sent as long as both the
client and server know how to handle the data content. It is required for both the client and server
to specify the content type in MIME-type header.
➢ Stateless: HTTP is a stateless protocol as both the client and server know each other only during
the current request. Due to this nature of the protocol, both the client and server do not retain the
information between various requests of the web pages.

HTTP Transactions

➢ The above figure shows the HTTP transaction between client and server. The client initiates a
transaction by sending a request message to the server. The server replies to the request message
by sending a response message.
➢ Messages
➢ HTTP messages are of two types: request and response. Both the message types follow the same
message format.

Uniform Resource Locator (URL)

➢ A client that wants to access the document in an internet needs an address and to facilitate the access
of documents, the HTTP uses the concept of Uniform Resource Locator (URL).
➢ The Uniform Resource Locator (URL) is a standard way of specifying any kind of information on
the internet.
➢ The URL defines four parts: method, host computer, port, and path.

➢ Method: The method is the protocol used to retrieve the document from a server. For example,
HTTP.
➢ Host: The host is the computer where the information is stored, and the computer is given an alias
name. Web pages are mainly stored in the computers and the computers are given an alias name
that begins with the characters "www". This field is not mandatory.
➢ Port: The URL can also contain the port number of the server, but it's an optional field. If the port
number is included, then it must come between the host and path and it should be separated from
the host by a colon.
➢ Path: Path is the pathname of the file where the information is stored. The path itself contain slashes
that separate the directories from the subdirectories and files.

HTTP Request and Response Message

 HTTP requests, and responses, share similar structure and are composed of:

1. A start-line describing the requests to be implemented, or its status of whether successful or a

failure. This start-line is always a single line.
2. An optional set of HTTP headers specifying the request, or describing the body included in the
message.
3. A blank line indicating all meta-information for the request has been sent.
4. An optional body containing data associated with the request (like content of an HTML form), or
the document associated with a response. The presence of the body and its size is specified by the
start-line and HTTP headers.

The start-line and HTTP headers of the HTTP message are collectively known as the head of the
requests, whereas its payload is known as the body.

1.3.1 HTTP Request Message:

The request message is sent by the client that consists of a request line, headers, and sometimes a
body.

1) Start line

HTTP requests are messages sent by the client to initiate an action on the server.
 Their start-line contain three elements:

1. An HTTP method, a verb (like GET, PUT or POST) or a noun (like HEAD or OPTIONS), that
describes the action to be performed. For example, GET indicates that a resource should be fetched
or POST means that data is pushed to the server (creating or modifying a resource, or generating a
temporary document to send back).
2. The request target, usually a URL, or the absolute path of the protocol, port, and domain are usually
characterized by the request context. The format of this request target varies between different
HTTP methods. It can be
• An absolute path, ultimately followed by a '?' and query string. This is the most common form,
known as the origin form, and is used with GET, POST, HEAD, and OPTIONS methods.

i. POST / HTTP/1.1
ii. GET /[Link] HTTP/1.0
iii. HEAD /[Link]?query=alibaba HTTP/1.1
iv. OPTIONS /[Link] HTTP/1.0

• A complete URL, known as the absolute form, is mostly used with GET when connected to a
proxy. GET [Link] HTTP/1.1
• The authority component of a URL, consisting of the domain name and optionally the port (prefixed
by a ':'), is called the authority form. It is only used with CONNECT when setting up an HTTP
tunnel. CONNECT [Link] HTTP/1.1
• The asterisk form, a simple asterisk ('*') is used with OPTIONS, representing the server as a
whole. OPTIONS * HTTP/1.1
3. The HTTP version, which defines the structure of the remaining message, acting as an indicator of
the expected version to use for the response.

2) Headers

HTTP headers from a request follow the same basic structure of an HTTP header: a case-
insensitive string followed by a colon (':') and a value whose structure depends upon the header.
The whole header, including the value, consists of one single line, which can be quite long.

Many different headers can appear in requests. They can be divided in several groups:

• General headers, like Via, apply to the message as a whole.

• Request headers, like User-Agent or Accept, modify the request by specifying it further
(like Accept-Language), by giving context (like Referer), or by conditionally restricting it (like If-
None).
• Representation headers like Content-Type that describe the original format of the message data
and any encoding applied (only present if the message has a body).
3) Body

The final part of the request is its body. Not all requests have one: requests fetching resources,
like GET, HEAD, DELETE, or OPTIONS, usually don't need one. Some requests send data to the
server in order to update it: as often the case with POST requests (containing HTML form data).

Bodies can be broadly divided into two categories:

• Single-resource bodies, consisting of one single file, defined by the two headers: Content-
Type and Content-Length.
• Multiple-resource bodies, consisting of a multipart body, each containing a different bit of
information. This is typically associated with HTML Forms.

1.3.2 HTTP Response Message:

The response message is sent by the server to the client that consists of a status line, headers, and
sometimes a body.

1) Status line

The start line of an HTTP response, called the status line, contains the following information:

1. The protocol version, usually HTTP/1.1.

2. A status code, indicating success or failure of the request. Common status codes are 200, 404,
or 302
3. A status text. A brief, purely informational, textual description of the status code to help a human
understand the HTTP message.

A typical status line looks like: HTTP/1.1 404 Not Found.

2) Headers

HTTP headers for responses follow the same structure as any other header: a case-insensitive
string followed by a colon (':') and a value whose structure depends upon the type of the header.
The whole header, including its value, presents as a single line.

Many different headers can appear in responses. These can be divided into several groups:

• General headers, like Via, apply to the whole message.

• Response headers, like Vary and Accept-Ranges, give additional information about the server
which doesn't fit in the status line.
• Representation headers like Content-Type that describe the original format of the message data
and any encoding applied (only present if the message has a body).

3) Body

The last part of a response is the body. Not all responses have one: responses with a status code
that sufficiently answers the request without the need for corresponding payload
(like 201 Created or 204 No Content) usually don't.

Bodies can be broadly divided into three categories:

• Single-resource bodies, consisting of a single file of known length, defined by the two
headers: Content-Type and Content-Length.
• Single-resource bodies, consisting of a single file of unknown length, encoded by chunks
with Transfer-Encoding set to chunked.
• Multiple-resource bodies, consisting of a multipart body, each containing a different section of
information. These are relatively rare.

HTTP/2 Frames

HTTP/1.x messages have a few drawbacks for performance:

• Headers, unlike bodies, are uncompressed.

• Headers are often very similar from one message to the next one, yet still repeated across
connections.
• No multiplexing can be done. Several connections need opening on the same server: and warm
TCP connections are more efficient than cold ones.

HTTP/2 introduces an extra step: it divides HTTP/1.x messages into frames which are embedded
in a stream. Data and header frames are separated, which allows header compression. Several
streams can be combined together, a process called multiplexing, allowing more efficient use of
underlying TCP connections.

HTTP frames are now transparent to Web developers. This is an additional step in HTTP/2, between
HTTP/1.1 messages and the underlying transport protocol. No changes are needed in the APIs used
by Web developers to utilize HTTP frames; when available in both the browser and the server,
HTTP/2 is switched on and used.

1.4 web Clients

➢ A web client is software that accesses a web server by sending an HTTP request message and
processing the resulting HTTP response.
➢ In general, any web client that is designed to directly support user access to web servers is known
as a user agent.
➢ Furthermore, some web clients are not designed to be used directly by humans at all. For example,
software robots are often used to automatically crawl the Web and download information for use
by search engines
➢ A web client is a client-side application used for connecting to a web server over HTTP.

1.5 WEB SERVERS

1.5.1 Server Features
The primary feature of every web server is to accept HTTP requests from web clients and return an
appropriate resource (if available) in the HTTP response. Even this basic functionality involves a
number of steps.
➢ The server calls on TCP software and waits for connection requests to one or more ports.
➢ When a connection request is received, the server dedicates a “subtask” to handling this connection.
➢ The subtask establishes the TCP connection and receives an HTTP request.
➢ The subtask examines the Host header field of the request to determine which “virtual host” should
receive this request and invokes software for this host.
➢ The virtual host software maps the Request-URI field of the HTTP request start line to a resource
on the server.
o If the resource is a file, the host software determines the MIME type of the file and creates an HTTP
response that contains the file in the body of the response message.
➢ If the resource is a program, the host software runs the program, providing it with information from
the request and returning the output from the program as the body of an HTTP response message.
➢ The server normally logs information about the request and response—such as the IP address of the
requester and the status code of the response—in a plain-text file
➢ If the TCP connection is kept alive, the server subtask continues to monitor the connection until a
certain length of time has elapsed, the client sends another request, or the client initiates a
connection close.

1.5.2 Server History

➢ Both servers can be configured to run a variety of types of programs, although certain programming
languages tend to be used more frequently on one system than the other.
➢ For example, many IIS servers run programs written in VBScript (a derivative of Visual Basic),
while a typical Apache server might run programs written in either Perl or the PHP scripting
language (PHP stands for “PHP Hypertext Processor”; yes, the definition is infinitely recursive).
➢ A number of IIS and Apache servers also run Java programs. When running a Java program, both
Apache and IIS servers are usually configured to run the program by using separate software called
a servlet container. The servlet container provides the Java Virtual Machine that runs the Java
program (known as a servlet), and also provides communication between the servlet and the Apache
or IIS web server.

1.5.3 Server Configuration and Tuning

➢ Broadly speaking, server configuration can be broken into two areas: external communication and
internal processing. In Tomcat, this corresponds to two separate Java packages: Coyote, which
provides the HTTP/1.1 communication, and Catalina, which is the actual servlet container. Some
of the Coyote parameters, affecting external communication, include the following:
➢ IP addresses and TCP ports that may be used to connect to this server.
➢ Number of subtasks (called threads in Java) that will be created when the server is initialized. This
many TCP connections can be established simultaneously with minimal overhead.
➢ Maximum number of threads that will be allowed to exist simultaneously. If this is larger than the
previous value, then the number of threads maintained by the server may change, either up or down,
over time.
➢ Maximum number of TCP connection requests that will be queued if the server is already running
its maximum number of threads. Connection requests received if the queue is full will be refused.
➢ Length of time the server will wait after serving an HTTP request over a TCP connection before
closing the connection if another request is not received.
➢ The settings of these parameters can have a significant influence on the performance of a server;
changing the values of these and similar parameters in order to optimize performance is often
referred to as tuning the server.
➢ Load generation or stress test tools can be used to simulate requests to a web server, and can
therefore be helpful for experimenting with tuning parameters based on anticipated traffic patter ns
even before a web site “goes live.”
➢ The internal Catalina portion of Tomcat also has a number of parameter settings that affect
functionality. These settings can determine:
➢ Which client machines may send HTTP requests to the server.
➢ Which virtual hosts are listening for TCP connections on a given port.
➢ What logging will be performed.
➢ How the path portion of Request-URIs will be mapped to the server’s file system or other resources.
➢ Whether or not the server’s resources will be password protected.
➢ Whether or not resources will be cached in the server’s memory.
1.6 Web Browser:

A web browser, which is commonly known as a browser, is a program that displays text, data,
pictures, videos, animation, and more. It provides a software interface that allows you to click
hyperlinked resources on the World Wide Web. When you double click the Browser icon installed
on your computer to launch it, you get connected to the World Wide Web and can search Google
or type a URL into the address bar.

In the beginning, browsers were used only for browsing due to their limited potential. Today, they
are more advanced; along with browsing you can use them for e-mailing, transferring multimedia
files, using social media sites, and participating in online discussion groups and more. Some of the
commonly used browsers include Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and
more.

1.6.1 Working of a Web Browser

A web browser helps us find information anywhere on the internet. It is installed on the client
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.
1.6.2 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.

1.6.3 Some Popular Web Browsers

Here is a list of 7 popular web browsers:

• Google Chrome: Developed by Google, Chrome is one of the most widely-used web browsers in
the world, known for its speed and simplicity.
• Mozilla Firefox: Developed by the Mozilla Foundation, Firefox is an open-source browser that is
known for its privacy features and customization options.
• Apple Safari: Developed by Apple, Safari is the default browser on Mac and iOS devices and is
known for its speed and integration with other Apple products.
• Microsoft Edge: Developed by Microsoft, Edge is the default browser on Windows 10 and is
known for its integration with other Microsoft products and services.
• Opera: Developed by Opera Software, Opera is a web browser that is known for its speed and
built-in VPN feature.
• Brave: Developed by Brave Software, Brave is a web browser that is focused on privacy and
security and blocks third-party ads and trackers by default.
• Tor Browser: Developed by The Tor Project, Tor Browser is a web browser that is designed for
anonymous web browsing and is based on Mozilla Firefox.
These are some of the most popular web browsers, there are other browsers available such as
Vivaldi, Brave, and so on. The choice of a web browser depends on the user’s preference and
requirements.
 TOPIC-2 HTML
INTRODUCTION

➢ HTML stands for Hyper Text Markup Language. It is used to design web pages using markup
language.
➢ HTML is the combination of Hypertext and Markup language. Hypertext defines the link between
the web pages.
➢ Markup language is used to define the text document within 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 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 on 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 web browser.
➢ Uses SQL database to store data offline.
➢ Allows to draw 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″>

1.7 HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

1.7.1 Defining an HTML Table

A table in HTML consists of table cells inside rows and columns.

Table Cells

Each table cell is defined by a <td> and a <td> tag. td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
You can have as many rows as you like in a table; just make sure that the number of cells are the
same in each row.

Table Headers

Sometimes you want your cells to be table header cells. In those cases, use the <th> tag instead of
the <td> tag:
th stands for table header.

Example
Let the first row be table header cells:
<table>
<tr>
<th>Person1</th>
<th>Person2</th>
<th>Person3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
 HTML Table Tags

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

1.7.2 HTML Table Borders

HTML tables can have borders of different styles and shapes.

To add a border, use the CSS border property on table, th, and td elements:
Example
table, th, td {
border: 1px solid black;
}
Types of Borders
1) Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-collapse property
to collapse.
This will make the borders collapse into a single border:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
2) Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the
document background), you get the impression of an invisible border:

Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

3) Round Table Borders

With the border-radius property, the borders get rounded corners:

Example
table, th, td {
border: 1px solid black;
border-radius: 10px;
}

4) Border Color
With the border-color property, you can set the color of the border.

Example
th, td {
border-color: #96D4D4;
}
1.7.3 Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space between the cells.

With Padding With Spacing

hello hello hello hello hello hello

hello hello hello hello hello hello

hello hello hello hello hello hello

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.
By default, the padding is set to 0.
To add padding on table cells, use the CSS padding property:
Example

th, td {
padding: 15px;
}

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-right properties:

Example

th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

HTML Table - Cell Spacing

Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on
the table element:
Example

table {
border-spacing: 30px;
}
1.7.4 HTML Table Colspan & Rowspan
NAME

APRIL

2022

FIESTA

HTML Table - Col span

To make a cell span over multiple columns, use the colspan attribute:

Example

<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
 HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example

<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

1.8 HTML Lists

HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
• Item
• Item
• Item
• Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

1.8.1 Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
1.8.2 Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
1.8.3 HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

1.9 HTML Images

Images can improve the design and the appearance of a web page.
HTML Images Syntax
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a closing tag.
• The <img> tag has two required attributes:
➢ src - Specifies the path to the image
➢ alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
• The src Attribute
The required src attribute specifies the path (URL) to the image.
<img src="img_chania.jpg" alt="Flowers in Chania">
• The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).
The value of the alt attribute should describe the image:
<img src="img_chania.jpg" alt="Flowers in Chania">

1.9.1 Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px; height:600px;">
1.9.2 Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in the src attribute: If
not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in
the src attribute:
<img src="/images/[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">

1.9.3 Images on Another Server/Website

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:
Example
<img src="[Link] alt="[Link]">

1.9.4 Animated Images

HTML allows animated GIFs:

<img src="[Link]" alt="Computer Man" style="width:48px;height:48px;">

1.9.5 Image Maps

The HTML <map> tag defines an image map. An image map is an image with clickable areas.
The areas are defined with one or more <area> tags.
Usemap
The image is inserted using the <img> tag. The only difference from other images is that you
must add a usemap attribute:
<img src="[Link]" alt="Workplace" usemap="#workmap">
Example

<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more
about the topic:</p>
<img src="[Link]" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="[Link]">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="[Link]">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="[Link]">
</map>
</body>
</html>

1.10 HTML5 control elements

• An HTML element usually consists of a start tag and an end tag, with the content
inserted in between:

<tagname>Content goes here...</tagname>

• The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>

1.10.1 Nested HTML Elements

• HTML elements can be nested (elements can contain elements).

• All HTML documents consist of nested HTML elements.
• This example contains four HTML elements:

Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• The <html> element defines the whole document.
• It has a start tag <html> and an end tag </html>.
• Inside the <html> element is the <body> element.
 1.10.2 HTML New Tag Elements

Tags (Elements) Description

<article> Represents an independent piece of content of a document, such as a
blog entry or newspaper article
<aside > Represents a piece of content that is only slightly related to the rest
of
the page.
<audio> Defines an audio file.
<canvas> This is used for rendering dynamic bitmap graphics on the fly, such
as
graphs or games.
<command> Represents a command the user can invoke.
<datalist> Together with the a new list attribute for input can be used to make
comboboxes
<details> Represents additional information or controls which the user can
obtain
on demand
<embed> Defines external interactive content or plugin.
<figure> Represents a piece of self-contained flow content, typically
referenced
as a single unit from the main flow of the document.
<footer> Represents a footer for a section and can contain information about
the
author, copyright information, et cetera.
<header> Represents a group of introductory or navigational aids.
<hgroup> Represents the header of a section.
<keygen> Represents control for key pair generation.
<mark> Represents a run of text in one document marked or highlighted for
reference purposes, due to its relevance in another context.
<meter> Represents a measurement, such as disk usage.
<nav> Represents a section of the document intended for navigation.
<output> Represents some type of output, such as from a calculation done
through scripting.
<progress> Represents a completion of a task, such as downloading or when
performing a series of expensive operations.
<ruby> Together with <rt> and <rp> allow for marking up ruby annotations.
<section> Represents a generic document or application section
<time> Represents a date and/or time.
<video> Defines a video file.
<wbr> Represents a line break opportunity.

• New types for <input> tag

• The input element's type attribute now has the following new values −
 Type Description
color Color selector, which could be represented by a wheel or swatch
picker
date Selector for calendar date
datetime- Date and time display, with no setting or indication for time zones
local
datetime Full date and time display, including a time zone.
email Input type should be an email.
month Selector for a month within a given year
number A field containing a numeric value only
range Numeric selector within a range of values, typically visualized as a
slider
search Term to supply to a search engine. For example, the search bar atop a
browser.
tel Input type should be telephone number.
time Time indicator and selector, with no time zone information
url Input type should be URL type.
week Selector for a week within a given year

1.11 SEMANTIC ELEMENTS

Semantics is the study of the meanings of words and phrases in a language.
Semantic elements = elements with a meaning.
1.11.1 What are Semantic Elements?
• A semantic element clearly describes its meaning to both the browser and the
developer.
• Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.
• Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its
content.
1.11.2 New Semantic Elements in HTML5
• Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer">to indicate navigation, header, and footer.
• HTML5 offers new semantic elements to define different parts of a web page:

➢ <article>
➢ <aside>
➢ <details>
➢ <figcaption>
➢ <figure>
➢ <footer>
➢ <header>
➢ <main>
➢ <mark>
➢ <nav>
➢ <section>
➢ <summary>
➢ <time>
HTML5 <section> Element
• The <section> element defines a section in a document.
• According to W3C's HTML5 documentation: "A section is a thematic grouping of
content, typically with a heading."
• A home page could normally be split into sections for introduction, content, and contact
information.
<section>
<h1>WWF</h1>
<p> THE WORLD-WIDE FUND FOR NATURE (WWF) is </P>
</section>
1) HTML5 <article> Element
• The <article> element specifies independent, self-contained content.
• An article should make sense on its own, and it should be possible to read it
independently from the rest of the web site.
• Examples of where an <article> element can be used:
➢ Forum post
➢ Blog post
➢ Newspaper article
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a
future in which humans live in harmony with nature.</p>
</article>
Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a
future in which humans live in harmony with nature.</p>
</article>
2) HTML5 <footer> Element
• The <footer> element specifies a footer for a document or section.
• A <footer> element should contain information about its containing element.
• A footer typically contains the author of the document, copyright information, links
to terms of use, contact information, etc.
 Example
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="[Link]
someone@[Link]</a>.</p>
</footer>
3) HTML5 <nav> Element
• The <nav> element defines a set of navigation links.
Example
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
4) HTML5 <aside> Element
• The <aside> element defines some content aside from the content it is placed in (like a
sidebar).
• The <aside> content should be related to the surrounding content.
Example
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
5) HTML5 <figure> and <figcaption> Elements
• The purpose of a figure caption is to add a visual explanation to an image.
• In HTML5, an image and a caption can be grouped together in a <figure> element:
Example
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
1.11.3 Why Semantic Elements?
• With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
• This made it impossible for search engines to identify the correct web page content.
• With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this
will become easier.
• According to the W3C, a Semantic Web: "Allows data to be shared and reused across
applications, enterprises, and communities."
 Semantic Elements in HTML5

Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption Defines a caption for a <figure> element
>
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary Defines a visible heading for a <details> element
>
<time> Defines a date/time

1.12 HTML5 DRAG AND DROP

Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder
and deletion of items with the help of mouse clicks. This allows the user to click and hold the
mouse button down over an element, drag it to another location, and release the mouse button to
drop the element there.
To achieve drag and drop functionality with traditional HTML4, developers would either have to
either have to use complex JavaScript programming or other JavaScript frameworks like jQuery
etc.
Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the
browser making it much easier to code up.
HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

1.12.1 Drag and Drop Events

There are number of events which are fired during various stages of the drag and drop operation.
These events are listed below −

[Link] Events & Description

1 Dragstart
Fires when the user starts dragging of the object.
Dragenter
Fired when the mouse is first moved over the target element while a drag is
2 occurring. A listener for this event should indicate whether a drop is
allowed over this location. If there are no listeners, or the listeners perform
no
operations, then a drop is not allowed by default.
 Dragover
3 This event is fired as the mouse is moved over an element when a drag is
occurring. Much of the time, the operation that occurs during a listener will
be
the same as the dragenter event.
Dragleave
4 This event is fired when the mouse leaves an element while a drag is
occurring.
Listeners should remove any highlighting or insertion markers used for drop
feedback.
5 Drag
Fires every time the mouse is moved while the object is being dragged.
Drop
6 The drop event is fired on the element where the drop was occurred at the
end
of the drag operation. A listener would be responsible for retrieving the data
being dragged and inserting it at the drop location.
Dragend
7 Fires when the user releases the mouse button while dragging an object.

Example
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
[Link]();
}

function drag(ev) {
[Link]("text",[Link]);
}

function drop(ev) {
[Link]();
var data=[Link]("text");
[Link]([Link](data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)

" width="336" height="69">
</body>
</html>
1.13 HTML AUDIO/VIDEO controls
1.13.1 HTML Audio
The HTML <audio> element is used to play an audio file on a web page.

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may choose
from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not
support the <audio> element.

1.13.2 HTML Video

The HTML <video> element is used to show a video on a web page.

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the
page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose
from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.

1.13.3 HTML Audio/Video Methods

Method Description
addTextTrack() Adds a new text track to the audio/video

canPlayType() Checks if the browser can play the specified audio/video

type
load() Re-loads the audio/video element

play() Starts playing the audio/video

pause() Pauses the currently playing audio/video

1.13.4 HTML Audio/Video Properties

Property Description
audioTracks Returns an AudioTrackList object representing available audio
tracks Autoplay
buffered Returns a TimeRanges object representing the buffered parts of
the audio/video
controller Returns the MediaController object representing the current
media controller of the audio/video
controls Sets or returns whether the audio/video should display controls
(like play/pause etc.)
currentTime Returns the URL of the current audio/video
defaultMuted Sets or returns whether the audio/video should be muted by
default
1.13.5 HTML Audio/Video Events

Event Description
error Fires when an error occurred during the loading of an audio/video
loadeddata Fires when the browser has loaded the current frame of the
audio/video
loadedmetadat Fires when the browser has loaded meta data for the audio/video
a
loadstart Fires when the browser starts looking for the audio/video
pause Fires when the audio/video has been paused
play Fires when the audio/video has been started or is no longer paused
playing Fires when the audio/video is playing after having been paused or
stopped for buffering
progress Fires when the browser is downloading the audio/video
ratechange Fires when the playing speed of the audio/video is changed
seeked Fires when the user is finished moving/skipping to a new position in
the
audio/video
seeking Fires when the user starts moving/skipping to a new position in the
audio/video
stalled Fires when the browser is trying to get media data, but data is not
available
suspend Fires when the browser is intentionally not getting media data
timeupdate Fires when the current playback position has changed
volumechange Fires when the volume has been changed
waiting
Fires when the video stops because it needs to buffer the next frame
 TOPIC-3 CSS
1.14 Css3
Types of CSS (Cascading Style Sheet)
• Cascading Style Sheet(CSS) is used to set the style in web pages which contain
HTML elements. It sets the background color, font-size, font-family, color, … etc
property of elements in a web pages.
• There are three types of CSS which are given below:
➢ Inline CSS
➢ Internal or Embedded CSS
➢ External CSS
➢ Inline CSS:

Inline CSS contains the CSS property in the body section attached with element is known as
inline CSS. This kind of style is specified within an HTML tag using style attribute.

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

Output
This is a heading

This is a paragraph.

Internal or Embedded CSS

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
 <body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

➢ External CSS
With an external style sheet, you can change the look of an entire website by changing just one
file!
Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.
Example<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
1.15 RULE CASCADING
• A single style sheet associated with one or more web pages is valuable, but in quite a limited
way.
• For small sites, the single style sheet is sufficient, but for larger sites, especially sites
managed by more than one person (perhaps several teams who may never communicate)
single style sheets don't provide the ability to share common styles, and extend these styles
where necessary. This can be a significant limitation.
• Cascading style sheets are unlike the style sheets you might have worked with using word
processors, because they can be linked together to create a hierarchy of related style sheets.
1.15.1 Font Family
• The font family of a text is set with the font-family [Link] font-family property should
hold several font names as a "fallback" system.
• If the browser does not support the first font, it tries the next [Link] with the font you
want, and end with a generic family, to let the browser pick a similar font in the generic
family, if no other fonts are available.
Example
p{font-family:"Times New Roman", Times, serif;}

1.15.2 Font Style

The font-style property is mostly used to specify italic text. This property has three
values:
➢ normal - The text is shown normally italic - The text is shown in italics
➢ oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
 1.15.3 Font Size
• The font-size property sets the size of the text. Being able to manage the text size is
important in web design. However, you should not use font size adjustments to make
paragraphs look like headings, or headings look like paragraphs. Always use the proper
HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
• The font-size value can be an absolute, or relative size.
➢ Absolute size: Sets the text to a specified size Does not allow a user to change the text size
in all browsers (bad for accessibility reasons).Absolute size is useful when the physical size
of the output is known
➢ Relative size: Sets the size relative to surrounding elements. Allows a user to change the
text size in browsers
1.15.4 The CSS Box Model
All HTML elements can be considered as boxes. 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 HTML elements, and it consists
of: margins, borders, padding, and the actual content.
• The box model allows us to place a border around elements and space elements in relation to
other elements.
Explanation of the different parts:
• Margin - Clears an area around the border. The margin does not have a background color, it is
completely transparent.
• Border - A border that goes around the padding and content. The border is affected by the
background color of the box.
• Padding - Clears an area around the content. The padding is affected by the background color of
the box .
• Content - The content of the box, where text and images appear.
• In order to set the width and height of an element correctly in all browsers, you need to know how
the box model works.

1.16 INHERITANCE AND CASCADE

Inheritance and the cascade are two fundamental concepts in CSS, that are important to understand.
The two concepts are closely related, yet different:
• Inheritance is associated with how the elements in the HTML markup inherit properties from their
parent (containing) elements and pass them on to their children.
• The cascade relates to CSS declarations being applied to a document, and how conflicting rules do
or do not override each other.

Inheritance
• Inheritance is the mechanism by which certain properties are passed on from a parent element down
to its children, in the same fashion as genetics: if parents have blue eyes, their children will probably
also have blue eyes.
• Not all CSS properties are inherited, because it does not make sense for some of them to be.
 Why inheritance is useful
• CSS has an inheritance mechanism because otherwise CSS rules would be redundant. Without
inheritance, it would be necessary to specify styles like font family, font size, and text color
individually — for every single element type. The code would become bloated and repetitive.
• Using inheritance, you can specify the font properties for the html or body elements and the styles
will be inherited by all other elements. You can specify background and text colors for a specific
container element and the text color will automatically be inherited by any child elements in that
container.
• The background color is not inherited, but the initial value for background-color is transparent,
which means a parent’s background will shine through. The effect is similar to the page’s
appearance if background colors were inherited.
How inheritance works
• Every element in an HTML document inherits all inheritable properties from its parent except
the root element (<html>), which does not have a parent.
• Whether or not the inherited properties will have any effect depends on other things, as
described later in the section about the cascade.
• Just as a blue-eyed mother can have a brown-eyed child if the father has brown eyes, inherited
properties in CSS can be overridden.
• An example of inheritance Copy the following HTML document into a new file in your favorite
text editor and save it as [Link].
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inheritance</title>
</head>
<body>
<h1>Heading</h1>
<p>A paragraph of text.</p>
</body>
</html>
➢ Create a new empty file in your text editor, copy the following CSS rule into it, and save the file as
[Link] in the same location as the HTML file.
html {
font: 75% Verdana, sans-serif;
}
➢ Link the style sheet to your HTML document by inserting the following line before the </head> tag:
<link rel="stylesheet" type="text/css" href="[Link]">
➢ Save the modified HTML file and reload the document in your browser.
The CSS rule only specified two properties — the font size and the font family — but that rule is
equivalent to the following:
html {
font-style:
normal; font-
variant: normal;
font-weight:
normal; font-
size: 75%;
line-height: normal;
font-family: Verdana,sans-serif;
}
1.17 BACKGROUNDS
CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1. background-color
The background-color property sets the background color of an element.
The background of an element is the total size of the element, including padding and border (but
not the margin).
CSS Syntax
background-color: color|transparent|initial|inherit;
Example
1) Specify the background color with a HEX value:
body {background-color: #92a8d1;}
2) Specify the background color with an RGB value:
body {background-color: rgb(201, 76, 76);}

2. background-image
The background-image property sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element, and repeated both
vertically and horizontally.
CSS Syntax
background-image: url | none| Initial | inherit;

Value Description

url('URL') The URL to the image. To specify more than one image,
separate the URLs with a comma

none No background image will be displayed. This is default

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

Example
body {
background-image: url("img_tree.gif"),url("[Link]");
background-repeat: no-repeat,repeat;
background-color: #cccccc;
}
3. background-repeat
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
CSS Syntax
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Example
Repeat a background image both vertically and horizontally (this is default):
body {
background-image: url("[Link]");
background-repeat: repeat;
}
4. background-attachment
The background-attachment property sets whether a background image scrolls with the rest of the
page, or is fixed.

CSS Syntax
background-attachment: scroll|fixed|local|initial|inherit;
Example
A background-image that will scroll with the page (scroll). This is default:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
5. background-position
The background-position property sets the starting position of a background image.
CSS Syntax
background-position: value;
Example
How to position a background-image to be centered at top:
body {
background-image: url('[Link]');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: centertop;
}
 1.18 border-image
The border-image property allows you to specify an image to be used as the border around an
element.
The border-image property is a shorthand property for:
1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat
Omitted values are set to their default values.
1. border-image-source
The border-image-source property specifies the path to the image to be used as a border (instead
of the normal border around an element).
CSS Syntax
border-image-source: none|image|initial|inherit;
Example
Specify an image as the border around an element:
#borderimg {
border-image-source: url([Link]);
}
2. border-image-slice
The border-image-slice property specifies how to slice the image specified by border-image-
source. The image is always sliced into nine sections: four corners, four edges and the middle.
The "middle" part is treated as fully transparent, unless the fill keyword is set.
CSS Syntax
border-image-slice: number|%|fill|initial|inherit;
Example
Specify how to slice the border image:
#borderimg {
border-image-slice: 30%;
}
3. border-image-width
The border-image-width property specifies the width of the border image.
CSS Syntax
border-image-width: number|%|auto|initial|inherit;
Example
Specify the width of the border image:
#borderimg {
border-image-source: url([Link]);
border-image-width: 10px;
}
4. border-image-outset
The border-image-outset property specifies the amount by which the border image area extends
beyond the border box.
CSS Syntax
border-image-outset: length|number|initial|inherit;
Example
Place the border image 10 pixels outside the border edges of an element:
#borderimg {
border-image-source: url([Link]);
border-image-outset: 10px;
}

5. border-image-repeat
The border-image-repeat property specifies whether the border image should be repeated,
rounded, spaced or stretched.
CSS Syntax
border-image-repeat: stretch|repeat|round|space|initial|inherit;
Example
Specify how to repeat the border image:
#borderimg {
border-image-source: url([Link]);
border-image-repeat: repeat;
}
1.19 CSS color
The color property specifies the color of text.
CSS Syntax
color: color|initial|inherit;
1) RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel - which specifies
the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a
number between 0.0 (fully transparent) and 1.0 (fully opaque).

The following example defines different RGBA colors:

Example
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
2) HSL Colors

HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).

1. Hue is a degree on the color wheel (from 0 to 360):

• 0 (or 360) is red
• 120 is green
• 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is white.
4. The following example defines different HSL colors:

Example

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
3) HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel - which specifies
the opacity for a color.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha
parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (fully opaque).

the following example defines different HSLA colors:

Example
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
4) Opacity

The CSS opacity property sets the opacity for the whole element (both background color and text
will be opaque/transparent).

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully
opaque).

Example
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

1.20 CSS Shadow

CSS Shadow Effects
With CSS you can add shadow to text and to elements.
There are two properties for shadow
1) text-shadow
2) box-shadow

1) CSS Text Shadow

The CSS text-shadow property applies shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):
Text shadow effect!
Example
h1 {
text-shadow: 2px 2px;
}
Text shadow effect!
Example
h1 {
text-shadow: 2px 2px red;
}
Then, add a blur effect to the shadow:
Text shadow effect!
Example
h1 {
text-shadow: 2px 2px 5px red;
}
2) Box Shadow
CSS box-shadow Property
The CSS box-shadow property is used to apply one or more shadows to an element.
Specify a Horizontal and a Vertical Shadow
In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the
shadow is the current text-color.
Example
Specify a horizontal and a vertical shadow:
div {
box-shadow: 10px 10px;
}
Specify a Color for the Shadow
The color parameter defines the color of the shadow.
Example
Specify a color for the shadow:
div {
box-shadow: 10px 10px lightblue;
}
Add a Blur Effect to the Shadow
The blur parameter defines the blur radius. The higher the number, the more blurred the shadow
will be.
Example
Add a blur effect to the shadow:
div {
box-shadow: 10px 10px 5px lightblue;
}
1.21 CSS text-transform
The text-transform property controls the capitalization of text. CSS Syntax
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
1) 2D Transforms

With the CSS transform property you can use the following 2D transformation methods:

a) translate()
b) rotate()
c) scaleX()
d) scaleY()
e) scale()
f) skewX()
g) skewY()
h) skew()
i) matrix()

a) The translate() Method

The translate() method moves an element from its current position (according to the parameters
given for the X-axis and the Y-axis).
The following example moves the <div> element 50 pixels to the right, and 100 pixels down from
its current position:
Example
div {
transform: translate(50px, 100px);
}
b) The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given

degree.
The following example rotates the <div> element clockwise with 20 degrees:
Example
div {
transform: rotate(20deg);
}
c) The scale() Method

The scale() method increases or decreases the size of an element (according to the parameters
given for the width and height).
The following example increases the <div> element to be two times of its original width, and
three times of its original height:
Example
div {
transform: scale(2, 3);
}
d) The scaleX() Method
The scaleX() method increases or decreases the width of an element.
The following example increases the <div> element to be two times of its original width:
Example
div {
transform: scaleX(2);
}
e) The scaleY() Method
The scaleY() method increases or decreases the height of an element.
The following example increases the <div> element to be three times of its original height:
Example
div {
transform: scaleY(3);
}
f) The skewX() Method
The skewX() method skews an element along the X-axis by the given angle.
The following example skews the <div> element 20 degrees along the X-axis:
Example
div {
transform: skewX(20deg);
}
g) The skewY() Method
The skewY() method skews an element along the Y-axis by the given angle.
The following example skews the <div> element 20 degrees along the Y-axis:
Example
div {
transform: skewY(20deg);
}
h) The skew() Method
The skew() method skews an element along the X and Y-axis by the given angles.
The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees
along the Y-axis:
 Example
div {
transform: skew(20deg, 10deg);
}
i) The matrix() Method

The matrix() method combines all the 2D transform methods into one.
The matrix() method take six parameters, containing mathematic functions, which allows you to
rotate, scale, move (translate), and skew elements.
The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(),
translateY())
Example
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
2) CSS 3D Transforms
CSS 3D Transforms Methods
With the CSS transform property you can use the following 3D transformation methods:
a) rotateX()
b) rotateY()
c) rotateZ()

a) The rotateX() Method

The rotateX() method rotates an element around its X-axis at a given degree:
Example
#myDiv {
transform: rotateX(150deg);
}
b)The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree:
Example
#myDiv {
transform: rotateY(150deg);
}
c) The rotateZ() Method
The rotateZ() method rotates an element around its Z-axis at a given degree:
Example
#myDiv {
transform: rotateZ(90deg);
}
1.22 CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

How to Use CSS Transitions?

To create a transition effect, you must specify two things:
1. The CSS property you want to add an effect to the duration of the effect
2. The following example shows a 100px * 100px red <div> element. The <div> element has also
specified a transition effect for the width property, with a duration of 2 seconds:
Example
div {`
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
The transition effect will start when the specified CSS property (width) changes value.
Now, let us specify a new value for the width property when a user mouses over the <div>
element:
Example
div:hover {
width: 300px;
}
Delay the Transition Effect
The transition-delay property specifies a delay (in seconds) for the transition effect.
The following example has a 1 second delay before starting:
Example
div {
transition-delay: 1s;
}

Transition + Transformation
The following example adds a transition effect to the transformation:
Example
div {
transition: width 2s, height 2s, transform 2s;
}
 1.23 CSS Animations

CSS allows animation of HTML elements without using JavaScript or Flash!

the following properties:

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times as you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.

1) The @keyframes Rule

• When you specify CSS styles inside the @keyframes rule, the animation will gradually change
from the current style to the new style at certain times.
• To get an animation to work, you must bind the animation to an element.
• The following example binds the "example" animation to the <div> element. The animation will
last for 4 seconds, and it will gradually change the background-color of the <div> element from
"red" to "yellow":
Example
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
2) Delay an Animation
The animation-delay property specifies a delay for the start of an animation.
The following example has a 2 seconds delay before starting the animation:
Example
div {
width: 100px;
height: 100px;
 position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Set How Many Times an Animation Should Run
The animation-iteration-count property specifies the number of times an animation should run.
The following example will run the animation 3 times before it stops:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property specifies whether an animation should be played forwards,

backwards or in alternate cycles.

The animation-direction property can have the following values:

• normal - The animation is played as normal (forwards). This is default

• reverse - The animation is played in reverse direction (backwards)
• alternate - The animation is played forwards first, then backwards
• alternate-reverse - The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards):

Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}