OPEN SOURCE SOFTWARE

UNIT I: INTRODUCTION TO HTML, CSS

Objective: To understand the concept of HTML, HTML5 and CSS.
Need of Open Source –Advantages of Open source –Application of Open Source – HTML – HTML
tags –Dynamic Web content– HTTP Request and Response Procedure–Introduction to HTML5–
HTML5 Canvas – HTML5 Audio and Video–Introduction to CSS – CSS Rules –Style Types – CSS
Selectors– CSS Colors.

Open Source Software

Open source software is software with source code that anyone can inspect, modify, and
enhance.
"Source code" is the part of software that most computer users don't ever see; it's the
code computer programmers can manipulate to change how a piece of software—a "program" or
"application"—works. Programmers who have access to a computer program's source code can
improve that program by adding features to it or fixing parts that don't always work correctly.
Open source generally refers to software whose source code is freely available and can be
viewed by independent third parties. Depending on the underlying open source license, it can
also be used, changed, and redistributed more or less freely. However, no license fees may be
charged.

Need of Open Source

There are lots of reasons why people choose open source over proprietary software, but the
most common ones are:
 Peer review: Because the source code is freely accessible and the open source
community is very active, open source code is actively checked and improved upon by
peer programmers. Think of it as living code, rather than code that is closed and becomes
stagnant.
 Transparency: Need to know exactly what kinds of data are moving where, or what
kinds of changes have happened in the code? Open source allows you to check and track
that for yourself, without having to rely on vendor promises.
 Reliability: Proprietary code relies on the single author or company controlling that code
to keep it updated, patched, and working. Open source code outlives its original authors
because it is constantly updated through active open source communities. Open
standards and peer review ensure that open source code is tested appropriately and
often.
 Flexibility: Because of its emphasis on modification, you can use open source code to
address problems that are unique to your business or community. You aren’t locked in to
using the code in any one specific way, and you can rely on community help and peer
review when you implement new solutions.
 Lower cost: With open source the code itself is free—what you pay for when you use a
company like Red Hat is support, security hardening, and help managing interoperability.
 No vendor lock-in: Freedom for the user means that you can take your open source code
anywhere, and use it for anything, at anytime.
 Open collaboration: The existence of active open source communities means that you
can find help, resources, and perspectives that reach beyond one interest group or one
company.
Advantages of Open source
 No royalties or license fees
 No dependence on a single manufacturer
 Transparency from insight into the source code
 Interoperability through open standards and file formats
 Software can be flexibly adapted to individual needs
 Fast and efficient troubleshooting due to the “many eyes” principle and swarm
intelligence
 High level of IT security because anyone can check the code for vulnerabilities or
backdoors
 Savings through shared development costs in open source projects
 Lower development costs through the use of OSS components
 Accelerated innovation because not all parts of a software program need to be rewritten
and companies can try different solutions with no cost risk
 Open source solutions are easily portable. Hence, it requires lesser hardware power to
carry out the tasks than the servers' power.
 Most open-source software is well designed and is of high quality. As several individuals
contribute to the betterment of the software, new features are introduced regularly.
 Open-source effectively addresses the issues such as expensive license fees, lack of
portability, and the inability to customize the software.
 Open-source software uses high-end technologies that enable users to combine servers
and applications, resulting in efficient administration.
 The speed of the development cycle is fast. Also, the bugs and loopholes in the software
are fixed as soon as they are found.
 It allows users to install and use software from any given location. So, the user does not
have to worry about license complications.

Disadvantages:
1. A user may face compatibility issues while dealing with open-source software.
2. Some malicious users can easily exploit the source code as it is freely available to
everyone.
3. Open-source software can pose liability issues as they don’t come with any warranty,
unlike the software that an individual organization produces.

Application of Open Source

In today’s era, we are increasingly relying on open-source software as they are cheaper, flexible,
and have more longevity than their proprietary peers. Following are some most common usage
of open-source worldwide:
1. Business Firms: As open-source software is available freely, companies can gain huge
profits using it, unlike proprietary software requiring huge capital investments. One of the
best advantages of using this kind of software is that it can be customized. Hence, they are
independent of the vendors for any possible updates. Some of the commonly used open
sources are as follows:
Linux is among the best-known and most widely used operating systems. It is an open-
source operating system. The code used to create this is available to the community to
inspect, modify, and contribute. Linux is highly customizable.
 Apache web server is a free and open-source web server that delivers web content
through the internet. It is one of the most popular HTTP clients on the web.
2. Educational Institutes: A large application of open-source is in the field of research and
education. It can be used to teach working of the software. This software comes with open
code that can be modified multiple times to learn different things.
3. Mozilla Firefox is a free and open-source web browser. It has various features that
make it exceptional among its competitors, such as focusing on user privacy, using
containers, incorporating powerful development tools, a friendly user interface, and many
more.
4. The VLC media player is a portable, free and open-source, cross-platform media
player available for multiple operating systems and mobile platforms. It can play most
audio and video files, including VCDs and DVDs.
5. GIMP (Gnu Image Manipulation Program) is a free and open-source platform used for
image editing, free-form drawing, image manipulation, and many more.
6. jQuery is a feature-rich free and open-source JavaScript library that makes event
handling, animation, Ajax, HTML document handling much easy to use.
7. Notepad++ is a free and open-source text and source code editor for use with Microsoft
Windows. It supports tabbed editing, which allows working with multiple open files in a
single window. The product's name comes from the C postfix increment operator; it is
sometimes referred to as npp or NPP.
8. Microsoft Office, or simply Office, is a family of client software, server software, and
services developed by Microsoft. It was first announced by Bill Gates on August 1, 1988, at
COMDEX in Las Vegas.
9. WordPress is a web content management system. It was originally created as a tool to
publish blogs but has evolved to support publishing other web content, including more
traditional websites, mailing lists and Internet forum, media galleries, membership sites,
learning management systems and online stores.
10. Google Chrome is a cross-platform web browser developed by Google. It was first
released in 2008 for Microsoft Windows, built with free software components from Apple
WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, iOS, and also
for Android, where it is the default browser.
11. Wikipedia is a free-content online encyclopedia, written and maintained by a community
of volunteers, collectively known as Wikipedians, through open collaboration and using a
wiki-based editing system called MediaWiki. Wikipedia is the largest and most-read
reference work in history.
12. Shotcut is a free and open-source, cross-platform video, audio, and image editing
program for FreeBSD, Linux, macOS and Windows. Started in 2011 by Dan Dennedy,
Shotcut is developed on the MLT Multimedia Framework, in development since 2004 by
the same author.
13. Audacity is a free and open-source digital audio editor and recording application
software, available for Windows, macOS, Linux, and other Unix-like operating systems. As
of December 6, 2022, Audacity is the most popular download at FossHub, with over 114.2
million downloads since March 2015.
HTML
HTML stands for Hyper Text Markup Language, which is the most widely used language
on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0"
was the first standard HTML specification which was published in 1995. HTML 4.01 was a major
version of HTML and it was published in late 1999. Though HTML 4.01 version is widely used
but currently we are having HTML-5 version which is an extension to HTML 4.01, and this
version was published in 2012.
HTML stands for Hyper Text Markup Language. This is the language in which we write
web pages for any Website. Even the page you are reading right now is written in HTML.
This is a subset of Standard Generalized Mark-Up Language (SGML) for electronic publishing, the
specific standard used for the World Wide Web.
HTML stands for Hypertext Markup Language. It is used to design the front-end portion of
web pages using a markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages. The markup language is used to
define the text documentation within the tag which defines the structure of web pages.

Why to Learn HTML?

Originally, HTML was developed with the intent of defining the structure of documents
like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers. Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
HTML is a MUST for students and working professionals to become a great Software
Engineer specially when they are working in Web Development Domain. I will list down some of
the key advantages of learning HTML:
 Create Web site - You can create a website or customize an existing web template if you
know HTML well.
 Become a web designer - If you want to start a carrier as a professional web designer,
HTML and CSS designing is a must skill.
 Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.
 Learn other languages - Once you understands the basic of HTML then other related
technologies like JavaScript, PHP, or angular are become easier to understand.

HTML tags
Tags for Document structure
A typical HTML document will have the following structure –
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of
HTML.

<html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page which appears at the top
of the browser window. It must be placed inside the head tag and should close immediately.
(Optional)

<body> : Text between body tag describes the body content of the page that is visible to the end
user. This tag contains the main content of the HTML document.

<h1> : Text between <h1> tag describes the first level heading of the webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
This will produce the following result –
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph
of text should go in between an opening <p> and a closing </p> tag as shown below in the
example −
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
This will produce the following result −
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as there
is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit
this space, older browsers will have trouble rendering the line break, while if you miss the
forward slash character and just use <br> it is not valid in XHTML.
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
This will produce the following result –
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line
from the current position in the document to the right margin and breaks the line accordingly.
For example, you may want to give a line between two paragraphs as in the given example below

Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
This will produce the following result –

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
The <hr /> element has a space between the characters hr and the forward slash. If you omit
this space, older browsers will have trouble rendering the horizontal line, while if you miss the
forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting
of the source document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>

Font-Style Elements
I'm not a big fan of the font-style elements. But it's my duty to tell you about them. Maybe you'll
find them useful.
Four font-style elements here:
 bold
 italic
 small
 big

Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<P><B>font-style elements</B>
<I>font-style elements</I>
<SMALL>font-style elements</SMALL>
<BIG>font-style elements</BIG></P>
</body>
</html>

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered
list will be used. This list is created by using <ol> tag. The numbering starts at one and is
incremented by one for each successive ordered list element tagged with <li>.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce the following result −

 1. Beetroot
2. Ginger
3. Potato
4. Radish

HTML Unordered Lists

An unordered list is a collection of related items that have no special order or sequence. This list
is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>
This will produce the following result −
 Beetroot
 Ginger
 Potato
 Radish

HTML - Images
Images are very important to beautify as well as to depict many complex concepts in simple way
on your web page. This tutorial will take you through simple steps to use images in your web
pages.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the simple syntax to
use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has
no closing tag.
Example
To try following example, let's keep our HTML file test.htm and image file test.png in the same
directory −
<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>

</html>

HTML - Image Links

We have seen how to create hypertext link using text and we also learnt how to use images in
our webpages. Now, we will learn how to use images to create hyperlinks.
Example
It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the
place of text as shown below −
<!DOCTYPE html>
<html>

<head>
<title>Image Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>

</html>

HTML - Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells. The elements under <td> are regular and left
aligned by default
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>

This will produce the following result –

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If
you do not need a border, then you can use border = "0".

Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the white
space in your table cells. The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the content within a cell.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
 <th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>
This will produce the following result –
Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column.
Similar way you will use rowspan if you want to merge two or more rows.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
 <td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>
This will produce the following result −
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

HTML - Frames
HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as a
frameset. The window is divided into frames in a similar way the tables are organized: into rows
and columns.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.
Example
Following is the example to create three horizontal frames −
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>
Example
Let's put the above example as follows, here we replaced rows attribute by cols and changed
their width. This will create all the three frames vertically −
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

HTML - Forms
HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name, email
address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes –

Sr.No Attribute & Description

action
1
Backend script ready to process your passed data.
method
2
Method to be used to upload data. The most frequently used are GET and POST methods.
target
3 Specify the target window or frame where the result of the script will be displayed. It takes
values like _blank, _self, _parent etc.
4 enctype
You can use the enctype attribute to specify how the browser encodes the data before it
sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in
 simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of
files like image, word file etc.
Note − You can refer to Perl & CGI for a detail on how form data upload works.

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form −
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
Text Input Controls
There are three types of text input used on forms −
 Single-line text input controls − This control is used for items that require only one line
of user input, such as search boxes or names. They are created using HTML <input> tag.
 Password input controls − This is also a single-line text input but it masks the character
as soon as a user enters it. They are also created using HTMl <input> tag.
 Multi-line text input controls − This is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or
names. They are created using HTML <input> tag.
Example
Here is a basic example of a single-line text input used to take first name and last name −
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>

</html>
This will produce the following result –
First name:
Last name:

Dynamic Web content

The World Wide Web is a constantly evolving network that has already traveled far
beyond its conception in the early 1990s, when it was created to solve a specific problem. State-
of-the-art experiments at CERN (the European Laboratory for Particle Physics—now best known
as the operator of the Large Hadron Collider) were producing incredible amounts of data—so
much that the data was proving unwieldy to distribute to the participating scientists who were
spread out across the world.
At this time, the Internet was already in place, with several hundred thousand computers
connected to it, so Tim Berners-Lee (a CERN fellow) devised a method of navigating between
them using a hyperlinking framework, which came to be known as Hypertext Transfer Protocol,
or HTTP. He also created a markup language called HTML, or Hypertext Markup Language. To
bring these together, he wrote the first web browser and web server, tools that we now take for
granted.
But back then, the concept was revolutionary. The most connectivity so far experienced
by at-home modem users was dialing up and connecting to a bulletin board that was hosted by a
single computer, where you could communicate and swap data only with other users of that
service. Consequently, you needed to be a member of many bulletin board systems in order to
effectively communicate electronically with your colleagues and friends.
But Berners-Lee changed all that in one fell swoop, and by the mid-1990s, there were
three major graphical web browsers competing for the attention of five million users. It soon
became obvious, though, that something was missing. Yes, pages of text and graphics with
hyperlinks to take you to other pages was a brilliant concept, but the results didn’t reflect the
instantaneous potential of computers and the Internet to meet the particular needs of each user
with dynamically changing content. Using the Web was a very dry and plain experience, even if
we did now have scrolling text and animated GIFs!
Shopping carts, search engines, and social networks have clearly altered how we use the
Web. In this chapter, we’ll take a brief look at the various components that make up the Web, and
the software that helps make it a rich and dynamic experience.

HTTP Request
HTTP is a communication standard governing the requests and responses that take place
between the browser running on the end user’s computer and the web server. The server’s job is
to accept a request from the client and attempt to reply to it in a meaningful way, usually by
serving up a requested web page—that’s why the term server is used. The natural counterpart to
a server is a client, so that term is applied both to the web browser and the computer on which
it’s running.
Between the client and the server there can be several other devices, such as routers,
proxies, gateways, and so on. They serve different roles in ensuring that the requests and
responses are correctly transferred between the client and server. Typically, they use the
Internet to send this information.
A web server can usually handle multiple simultaneous connections and—when not
communicating with a client—spends its time listening for an incoming connection. When one
arrives, the server sends back a response to confirm its receipt.
Response Procedure
At its most basic level, the request/response process consists of a web browser asking the
web server to send it a web page and the server sending back the page. The browser then takes
care of displaying the page (see Figure 1-1).

Figure 1-1. The basic client/server request/response sequence

Each step in the request and response sequence is as follows:
1. You enter http://server.com into your browser’s address bar.
2. Your browser looks up the IP address for server.com.
3. Your browser issues a request for the home page at server.com.
4. The request crosses the Internet and arrives at the server.com web server.
5. The web server, having received the request, looks for the web page on its hard disk.
6. The web page is retrieved by the server and returned to the browser.
7. Your browser displays the web page.
For an average web page, this process takes place once for each object within the page: a graphic,
an embedded video or Flash file, and even a CSS template.
In step 2, notice that the browser looked up the IP address of server.com. Every machine attached
to the Internet has an IP address—your computer included. But we generally access web servers
by name, such as google.com. As you probably know, the browser consults an additional Internet
service called the Domain Name Service (DNS) to find its associated IP address and then uses it
to communicate with the computer.
For dynamic web pages, the procedure is a little more involved, because it may bring both PHP
and MySQL into the mix (see Figure 1-2).
Figure 1-2. A dynamic client/server request/response sequence
Here are the steps for a dynamic client/server request/response sequence:
1. You enter http://server.com into your browser’s address bar.
2. Your browser looks up the IP address for server.com.
3. Your browser issues a request to that address for the web server’s home page.
4. The request crosses the Internet and arrives at the server.com web server.
5. The web server, having received the request, fetches the home page from its hard disk.
6. With the home page now in memory, the web server notices that it is a file incorporating
PHP scripting and passes the page to the PHP interpreter.
7. The PHP interpreter executes the PHP code.
8. Some of the PHP contains MySQL statements, which the PHP interpreter now passes to
the MySQL database engine.
9. The MySQL database returns the results of the statements back to the PHP interpreter.
10. The PHP interpreter returns the results of the executed PHP code, along with the results
from the MySQL database, to the web server.
11. The web server returns the page to the requesting client, which displays it.
Although it’s helpful to be aware of this process so that you know how the three elements work
together, in practice you don’t really need to concern yourself with these details, because they all
happen automatically.
HTML pages returned to the browser in each example may well contain JavaScript, which will be
interpreted locally by the client, and which could initiate another request—the same way
embedded objects such as images would.
Introduction to HTML5
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>
<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.

HTML5 Canvas
HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript.
It can be used to draw graphs, make photo compositions or do simple (and not so simple)
animations.
Here is a simple <canvas> element which has only two specific attributes width and height plus
all the core HTML5 attributes like id, name and class, etc.
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
You can easily find that <canvas> element in the DOM using getElementById() method as follows
−
var canvas = document.getElementById("mycanvas");
Let us see a simple example on using <canvas> element in HTML5 document.
<!DOCTYPE HTML>

<html>
<head>

<style>
#mycanvas{border:1px solid red;}
</style>
</head>
 <body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>

HTML5 Canvas Examples

This tutorial covers the following examples related to HTML5 <canvas> element.
Sr.No. Examples & Description
Drawing Rectangles
1
Learn how to draw rectangle using HTML5 <canvas> element
Drawing Paths
2
Learn how to make shapes using paths in HTML5 <canvas> element
Drawing Lines
3
Learn how to draw lines using HTML5 <canvas> element
Drawing Bezier
4
Learn how to draw Bezier curve using HTML5 <canvas> element
Drawing Quadratic
5
Learn how to draw quadratic curve using HTML5 <canvas> element
Using Images
6
Learn how to use images with HTML5 <canvas> element
Create Gradients
7
Learn how to create gradients using HTML5 <canvas> element
Styles and Colors
8
Learn how to apply styles and colors using HTML5 <canvas> element
Text and Fonts
9
Learn how to draw amazing text using different fonts and their size.
Pattern and Shadow
10
Learn how to draw different patterns and drop shadows.
Canvas States
11
Learn how to save and restore canvas states while doing complex drawings on a canvas.
Canvas Translation
12
This method is used to move the canvas and its origin to a different point in the grid.
Canvas Rotation
13
This method is used to rotate the canvas around the current origin.
Canvas Scaling
14
This method is used to increase or decrease the units in a canvas grid.
Canvas Transform
15
These methods allow modifications directly to the transformation matrix.
Canvas Composition
16
This method is used to mask off certain areas or clear sections from the canvas.
Canvas Animation
17
Learn how to create basic animation using HTML5 canvas and JavaScript.
HTML5 Audio and Video
HTML5 features include native audio and video support without the need for Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set
src attribute to identify the media source and include a controls attribute so the user can play
and pause the media.

Embedding Video
Here is the simplest form of embedding a video file in your webpage −
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
The current HTML5 draft specification does not specify which video formats browsers should
support in the video tag. But most commonly used video formats are −
 Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
 mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
You can use <source> tag to specify media along with media type and many other attributes. A
video element allows multiple source elements and browser will use the first recognized format
−
<!DOCTYPE HTML>

<html>
<body>

<video width = "300" height = "200" controls autoplay>

<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>

</body>
</html>
Video Attribute Specification
The HTML5 video tag can have a number of attributes to control the look and feel and various
functionalities of the control −
Sr.No. Attribute & Description
autoplay
1 This Boolean attribute if specified, the video will automatically begin to play back as soon
as it can do so without stopping to finish loading the data.
autobuffer
2 This Boolean attribute if specified, the video will automatically begin buffering even if it's
not set to automatically play.
controls
3 If this attribute is present, it will allow the user to control video playback, including
volume, seeking, and pause/resume playback.
height
4
This attribute specifies the height of the video's display area, in CSS pixels.
loop
5 This Boolean attribute if specified, will allow video automatically seek back to the start
after reaching at the end.
preload
6 This attribute specifies that the video will be loaded at page load, and ready to run.
Ignored if autoplay is present.
poster
7
This is a URL of an image to show until the user plays or seeks.
src
8 The URL of the video to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.
width
9
This attribute specifies the width of the video's display area, in CSS pixels.

Embedding Audio
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML
document as follows.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which audio formats browsers should
support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
You can use <source&ggt; tag to specify media along with media type and many other attributes.
An audio element allows multiple source elements and browser will use the first recognized
format −
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
 Your browser does not support the <audio> element.
</audio>
</body>
</html>

Audio Attribute Specification

The HTML5 audio tag can have a number of attributes to control the look and feel and various
functionalities of the control −
Sr.No. Attribute & Description
autoplay
1 This Boolean attribute if specified, the audio will automatically begin to play back as soon
as it can do so without stopping to finish loading the data.
autobuffer
2 This Boolean attribute if specified, the audio will automatically begin buffering even if it's
not set to automatically play.
controls
3 If this attribute is present, it will allow the user to control audio playback, including
volume, seeking, and pause/resume playback.
loop
4 This Boolean attribute if specified, will allow audio automatically seek back to the start
after reaching at the end.
preload
5 This attribute specifies that the audio will be loaded at page load, and ready to run.
Ignored if autoplay is present.
src
6 The URL of the audio to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.

Introduction to CSS
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended
to simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independently of the HTML that makes up
each web page. It describes how a webpage should look: it prescribes colours, fonts, spacing, and
much more. In short, you can make your website look however you want. CSS lets developers
and designers define how it behaves, including how elements are positioned in the browser.
While HTML uses tags, CSS uses rulesets. CSS is easy to learn and understand, but it provides
powerful control over the presentation of an HTML document.

Why CSS?
 CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML
pages.
 Easy Maintenance: To make a global change simply change the style, and all elements in
all the webpages will be updated automatically.
 Search Engines: CSS is considered a clean coding technique, which means search engines
won’t have to struggle to “read” its content.
  Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you
can give a far better look to your HTML page in comparison to HTML attributes.
 Offline Browsing: CSS can store web applications locally with the help of an offline cache.
Using this we can view offline websites.

CSS Syntax:
CSS comprises style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule set consists of a selector and declaration
block.
1. Selector: A selector in CSS is used to target and select specific HTML elements to apply
styles to.
2. Declaration: A declaration in CSS is a combination of a property and its corresponding
value.
Selector -- h1
Declaration -- {color:blue;font size:12px;}
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a CSS property name and a value, separated by a colon.

For example :
selector {
property1: value1;
property2: value2;
}

CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
Here is a more specific example: In the following example all p elements will be centre-aligned,
with a blue text colour:
p{
color: blue;
text-align: center;
}

CSS Rules
A CSS rule is a grouping of one or more CSS properties which are to be applied to one or more
target HTML elements.
A CSS rule consists of a CSS selector and a set of CSS properties. The CSS selector determines
what HTML elements to target with the CSS rule. The CSS properties specifies what to style of the
targeted HTML elements.
Here is a CSS rule example:
div {
border : 1px solid black;
font-size : 18px;
}
This example creates a CSS rule that targets all div elements, and the set the CSS properties
border and font-size for the targeted elements.
The CSS selector part a CSS rule is the part before the first {. In the example above it is the div
part of the CSS rule. The CSS properties are listed inside the { ... } block.
CSS rules have to be specified inside either a style element or inside an external CSS file.

Style Types
Cascading Style Sheet (CSS) is used to set the style in web pages that contain HTML elements. It
sets the background color, font-size, font-family, color, … etc. properties of elements on a web
page.
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 to the element is
known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
Example: This example shows the application of inline-css.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style="color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>
</body>
</html>

Internal or Embedded CSS: This can be used when a single HTML document must be styled
uniquely. The CSS rule set should be within the HTML file in the head section i.e. the CSS is
embedded within the <style> tag inside the head section of the HTML file.
Example: This example shows the application of internal-css.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
}

.GFG {
color: #009900;
font-size: 50px;
font-weight: bold;
 }

.geeks {
font-style: bold;
font-size: 20px;
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksForGeeks</div>

<div class="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

External CSS: External CSS contains separate CSS files that contain only style properties with the
help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate
file with a .css extension and should be linked to the HTML document using a link tag. It means
that, for each element, style can be set only once and will be applied across web pages.
Example: The file given below contains CSS property. This file saves with .css extension. For Ex:
geeks.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
Below is the HTML file that is making use of the created external style sheet.
 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css" />
</head>

<body>
<div class="main">
<div class="GFG">GeeksForGeeks</div>
<div id="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

CSS Selectors
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Let?s take an example with the id "para1".
 <!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.
Let's take an example with a class "center".
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements on the pages.
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
 </head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.
Let's see the CSS code without group selector.
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p{
text-align: center;
color: blue;
}

As you can see, you need to define CSS properties for all the elements. It can be grouped in
following ways:
h1,h2,p {
text-align: center;
color: blue;
}

Let's see the full example of CSS group selector.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
 <h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>

CSS Colors
CSS Color property is used to set the color of HTML elements. This property is used to set font
color, background color, etc. The color of an element can be defined in the following ways:
 Built-In Color
 RGB Format
 RGBA Format
 Hexadecimal Notation
 HSL
 HSLA

Built-In Color: These are a set of predefined colors which are used by its name. For example:
red, blue, green etc.

Syntax:
h1 {
color: color-name;
}

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS color property</title>
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>

RGB Format: The RGB(Red, Green, Blue) format is used to define the color of an HTML element
by specifying the R, G, B values range between 0 to 255. For example: RGB value of Red color is
(255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0, 255) etc.
Syntax:
h1 {
color: rgb(R, G, B);
}

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS color property</title>
<style>
h1 {
color: rgb(0, 153, 0);
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>

RGBA Format: The RGBA format is similar to the RGB, but the difference is RGBA contains A
(Alpha) which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0
where 0.0. represents fully transparent and 1.0 represents not transparent.

Syntax:
h1 {
color:rgba(R, G, B, A);
}

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS RGBA color property</title>
<style>
h1 {
color: rgba(0, 153, 0, 0.5);
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
 </h1>
</body>
</html>

Hexadecimal Notation: The hexadecimal notation begins with # symbol followed by 6

characters each ranging from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF
etc.

Syntax:
h1 {
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS hex property</title>
<style>
h1 {
color: #009900;
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>

HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical
coordinate system.
 Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0
represents red, 120 represents green and 240 represents blue color.
 Saturation: It takes a percentage value, where 100% represents completely saturated,
while 0% represents completely unsaturated (gray).
 Lightness: It takes percentage value, where 100% represents white, while 0% represents
black.

Syntax:
h1 {
color:hsl(H, S, L);
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1 {
color: hsl(120, 100%, 30%);
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>

HSLA:
The HSLA color property is similar to HSL property, but the difference is HSLA contains A
(Alpha) which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0
where 0.0. represents fully transparent and 1.0 represents not transparent.

Syntax:
h1 {
color:hsla(H, S, L, A);
}

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS hsla color property</title>
<style>
h1 {
color: hsla(120, 100%, 50%, 0.50);
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Text Color: It is used to set the color of the text.

Syntax:
h1 {
color:color_name;
}

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS text color property</title>
<style>
h1 {
color: #009900;
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>

Background Color: It is used to set the background color of an HTML element.

Syntax:
h1 {
background-color:color_name;
}

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS background color property</title>
<style>
h1 {
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
 </h1>
</body>
</html>

Border Color: It is used to set the border color of an element. Border-style is used to set the
border type.

Syntax:
h1 {
border-style:solid/dashed/dotted
border-color:color_name;
}

Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS border color</title>
<style>
h1 {
border-style: solid;
border-color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
List of Colors: Following is the list of a few CSS colors.

Color Name Hex(RGB) Decimal(RGB) Color

Red FF0000 255, 0, 0
Pink FFC0CB 255, 192, 203
Orange FFA500 255, 165, 0
Yellow FFFF00 255, 255, 0
Violet EE82EE 238, 130, 238
Green 008000 0, 128, 0
Aqua 00FFFF 0, 255, 255
Blue 0000FF 0, 0, 255
Brown A52A2A 165, 42, 42
White FFFFFF 255, 255, 255
Gray 808080 128, 128, 128
Black 000000 0, 0, 0