FULL STACK DEVELOPMENT

(R20A0516)

LECTURE NOTES
B.TECH III YEAR – II SEM (R20)
(2022-2023)

DEPARTMENT OF COMPUTATIONAL INTELLIGENCE

(CSE-AIML,AIML,AI&DS)

MALLA REDDY COLLEGE OF ENGINEERING & TECHNOLOGY

(Autonomous Institution – UGC, Govt. of India)
(Affiliated to JNTUH, Hyderabad, Approved by AICTE - Accredited by NBA & NAAC – ‘A’ Grade - ISO 9001:2015
Certified) Maisammaguda, Dhulapally (Post Via. Hakimpet), Secunderabad – 500100, Telangana State, INDIA.

1|P ag e
 (R20A0516) FULL STACK DEVELOPMENT
COURSE OBJECTIVES:

1. To become knowledgeable about the most recent web development

technologies.
2. Idea for creating two tier and three tier architectural web applications.
3. Design and Analyse real time web applications.
4. Constructing suitable client and server side applications.
5. To learn core concept of both front end and back end programming.

UNIT - I
Web Development Basics: Web development Basics - HTML &
Web servers Shell - UNIX CLI Version control - Git &Github
HTML, CSS

UNIT - II
Frontend Development: Javascript basics OOPS Aspects of
JavaScript Memory usage and Functions in JS AJAX for data
exchange with server jQuery Framework jQuery events, UI
components etc. JSON data format.

UNIT - III
REACT JS: Introduction to React React Router and Single Page
Applications React Forms, Flow Architecture and Introduction to
Redux More Redux and Client-Server Communication

UNIT - IV
Java Web Development: JAVA PROGRAMMING BASICS,
Model View Controller (MVC) Pattern MVC Architecture using
Spring RESTful API using Spring Framework Building an
application usingMaven

UNIT - V
Databases & Deployment: Relational schemas and normalization
Structured Query Language (SQL) Data persistence using Spring
JDBC Agile development principles and deploying application in
Cloud

2|P ag e
TEXT BOOKS:

1. Web Design with HTML, CSS, JavaScript and JQuery Set Book by
Jon Duckett ProfessionalJavaScript for Web Developers Book by
Nicholas C. Zakas
2. Learning PHP, MySQL, JavaScript, CSS & HTML5: A Step-by-
Step Guide to CreatingDynamic Websites by Robin Nixon
3. Full Stack JavaScript: Learn Backbone.js, Node.js and MongoDB.
Copyright © 2015 BYAZAT MARDAN

REFERENCE BOOKS:
1. Full-Stack JavaScript Development by Eric Bush.
2. Mastering Full Stack React Web Development Paperback – April 28,
2017 by TomaszDyl , Kamil Przeorski , Maciej Czarnecki

COURSE OUTCOMES:
1. Develop a fully functioning website and deploy on a web server.
2. Gain Knowledge about the front end and back end Tools
3. Find and use code packages based on their documentation to produce
working results ina project.
4.Create web pages that function using external data.
5.Implementation of web application employing efficient database access.

3|P ag e
UNIT TOPIC PAGE
UNIT - I Web development Basics - HTML 6
Web servers Shell - UNIX CLI 90

Version control - Git &Github HTML 92

CSS 124

Unit-II Javascript basics 170

OOPS Aspects of JavaScript 179

Memory usage and Functions in JS 183

AJAX for data exchange with server 187

jQuery Framework 191

jQuery events 193

JSON data format. 194

Unit-III REACT JS: Introduction to React 195

React Router and Single Page Applications 198

React Forms 199

Introduction to Redux 211

More Redux 214

Client-Server Communication 215

UNIT-IV Java Web Development: 221

JAVA PROGRAMMING BASICS 225

Model View Controller (MVC) 237

MVC Architecture using Spring 242

RESTful API using Spring Framework 244

Building an application usingMaven 261

Unit-V Databases & Deployment 266

Relational schemas and normalization 268

Structured Query Language 269

4|P ag e
 Data persistence using Spring 274

JDBC Agile development 276

principles and deploying application in Cloud 281

5|P ag e
What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.

Hyper Text:HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more interactive
and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Web page can be of
the static or dynamic type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content.

Let's see a simple example of HTML.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>

Description of HTML Example

<!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>

6|P ag e
<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.

Brief History of HTML

In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a
system for CERN researchers. In 1989, he wrote a memo proposing an internet based
hypertext system.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML
was a document called "HTML Tags" proposed by Tim in late 1991. The latest version of
HTML is HTML5, which we will learn later in this tutorial.

HTML Versions
Since the time HTML was invented there are lots of HTML versions in market, the brief
introduction about the HTML version is given below:

HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML
language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was standard
language version for website design. HTML 2.0 was able to support extra features such as
form-based file upload, form elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements. It can
also support a web page with complex mathematical equations. It became an official standard
for any browser till January 1997. Today it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable
version of HTML language. This version is the current official standard, and it provides
added support for stylesheets (CSS) and scripting ability for various multimedia elements.

7|P ag e
HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of
this version was announced in January 2008. There are two major organizations one is W3C
(World Wide Web Consortium), and another one is WHATWG( Web Hypertext Application
Technology Working Group) which are involved in the development of HTML 5 version, and
still, it is under development.

Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.

2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.

3) It is a markup language, so it provides a flexible way to design web pages along with the
text.

4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform like Windows,

Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.

HTML text Editors

 An HTML file is a text file, so to create an HTML file we can use any text editors.
 Text editors are the programs which allow editing in a written text, hence to create a
web page we need to write our code in some text editor.
 There are various types of text editors available which you can directly download, but
for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
 After learning the basics, you can easily use other professional text editors which are,
Notepad++, Sublime Text, Vim, etc.
 In our tutorial, we will use Notepad and sublime text editor. Following are some easy
ways to create your first web page with Notepad, and sublime text.

A. HTML code with Notepad. (Recommended for

Beginners)
Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all
versions of Windows, from where you easily access it.

8|P ag e
Step 1: Open Notepad (Windows)

Step 2: Write code in HTML

Step 3: Save the HTML file with .htm or .html extension.

9|P ag e
Step 4: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have saved the file and
then either double-click on file or click on open with option

10 | P a g e
B. HTML code with Sublime Text-editor.(Recommended
after learning basics of HTML)
When you will learn the basics of HTML, then you can use some professional text editors,
which will help you to write an efficient and fast code. So to use Sublime Text editors, first it
needs to download and install from internet. You can easily download it from this
https://www.sublimetext.com/download link and can install in your PC. When installation of
Sublime text editor done then you can follow the simple steps to use it:

Step 1: Open Sublime Text editor(Windows 8):

11 | P a g e
To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏ Open it. To open a
new page press CTRL+N.

Step 2: Save the page before writing any code.

To save your page in Sublime Text press Ctrl+S or go to File option ⤏ save, to save a file use
extension .htm or .html. We recommend to save the file first then write the code because after
saving the page sublime text editor will give you suggestions to write code.

Step 3: Write the code in Sublime Text editor

12 | P a g e
Step 4: Open the HTML page in your Browser

To execute or open this page in Web browser just right click by mouse on sublime text page
and click on Open in Browser.

13 | P a g e
Building blocks of HTML
An HTML document consist of its basic building blocks which are:

 Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.
 Attribute: An attribute in HTML provides extra information about the element, and it
is applied within the start tag. An HTML attribute contains two fields: name & value.

Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>

 Elements: An HTML element is an individual component of an HTML file. In an

HTML file, everything written within tags are termed as HTML elements.

14 | P a g e
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of paragraph tag</p>
10. <span>The element contains tag, attribute and content</span>
11. </body>
12. </html>

Output:

The building blocks

This is a paragraph tag

HTML Tags

15 | P a g e
HTML tags are like keywords which defines that how web browser will format and display
the content. With the help of tags, a web browser can distinguish between an HTML content
and a simple content. HTML tags contain three main parts: opening tag, content and closing
tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each
HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code
requirement.

 All HTML tags must enclosed within <> these brackets.

 Every tag in HTML perform different tasks.
 If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax
<tag> content </tag>

HTML Tag Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b>Bold Tag</b>

<i>Italic Tag</i>

<u> Underline Tag</u>

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

16 | P a g e
HTML Meta Tags
DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>,
<samp>, <var> and <br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

17 | P a g e
HTML Scripting Tags
script and noscript

Note: We will see examples using these tags in later charters.

HTML Tags List

Following is the complete list of HTML tags with the description which are arranged
alphabetically.

HTML Attribute
 HTML attributes are special words which provide additional information about the elements
or attributes are the modifier of the HTML element.
 Each element or tag can have attributes, which defines the behaviour of that element.
 Attributes should always be applied with start tag.
 The Attribute should always be applied with its name and value pair.
 The Attributes name and values are case sensitive, and it is recommended by W3C that it
should be written in Lowercase only.
 You can add multiple attributes in one HTML element, but need to give space between two
attributes.

Syntax
1. <element attribute_name="value">content</element>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in element</p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>

Output:

18 | P a g e
Explanation of above example:

1. <p style="height: 50px; color: blue">It will add style property in element</p>

In the above statement, we have used paragraph tags in which we have applied style attribute.
This attribute is used for applying CSS property on any HTML element. It provides height to
paragraph element of 50px and turns it colour to blue.

1. <p style="color: red">It will change the color of content</p>

In the above statement we have again used style attribute in paragraph tag, which turns its
colour red.

Note: There are some commonly used attributes are given below, and the complete list and
explanation of all attributes are given in HTML attributes List.

The title attribute in HTML

Description: The title attribute is used as text tooltip in most of the browsers. It display its
text when user move the cursor over a link or any text. You can use it with any text or link to
show the description about that link or text. In our example, we are taking this with paragraph
tag and heading tag.

Example
With <h1> tag:

1. <h1 title="This is heading tag">Example of title attribute</h1>

With <p> tag:

1. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and
you will see a description as a tooltip</p>

19 | P a g e
Code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6.
7. <h1 title="This is heading tag">Example of title attribute</h1>
8. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you
will see a description as a tooltip</p>
9.
10. </body>
11. </html>

Output:

The href attribute in HTML

Description: The href attribute is the main attribute of <a> anchor tag. This attribute gives
the link address which is specified in that link. The href attribute provides the hyperlink,
and if it is blank, then it will remain in same page.

Example
With link address:

1. <a href="https://www.javatpoint.com/html-anchor">This is a link</a>

Without link address:

1. <a href="">This is a link</a>

20 | P a g e
The src Attribute
The src attribute is one of the important and required attribute of <img> element. It is source
for the image which is required to display on browser. This attribute can contain image in
same directory or another directory. The image name or source should be correct else
browser will not display the image.

Example
1. <img src="whitepeacock.jpg" height="400" width="600">

Note: The above example also have height and width attribute, which define the height and width of
image on web page.

Output:

21 | P a g e
Quotes: single quotes or double quotes?
In this chapter you have seen that, we have used attribute with double quotes, but some
people might use single quotes in HTML. So use of single quotes with HTML attribute, is
also allowed. The following both statements are absolutely fine.

1. <a href="https://www.javatpoint.com">A link to HTML.</a>

2. <a href='https://www.javatpoint.com'>A link to HTML.</a>

IN HTML5, you can also omit use of quotes around attribute values.

1. <a href=https://www.javatpoint.com>A link to HTML.</a>

HTML Elements
An HTML file is made of elements. These elements are responsible for creating web pages
and define content in that webpage. An element in HTML usually consist of a start tag <tag
name>, close tag </tag name> and content inserted between them. Technically, an element
is a collection of start tag, attributes, end tag, content between them.

22 | P a g e
Note: Some elements does not have end tag and content, these elements are termed as empty elements
or self-closing element or void elements.

Such as:

1. <p> Hello world!!! </p>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>WebPage</title>
5. </head>
6. <body>
7. <h1>This is my first web page</h1>
8. <h2> How it looks?</h2>
9. <p>It looks Nice!!!!!</p>
10. </body>
11. </html>

 All the content written between body elements are visible on web page.

Void element: All the elements in HTML do not require to have start tag and end tag, some
elements does not have content and end tag such elements are known as Void elements or
empty elements. These elements are also called as unpaired tag.

Some Void elements are <br> (represents a line break) ,<hr>(represents a horizontal
line), etc.

Nested HTML Elements: HTML can be nested, which means an element can contain
another element.

23 | P a g e
Block-level and Inline HTML elements
For the default display and styling purpose in HTML, all the elements are divided into two
categories:

 Block-level element
 Inline element

Block-level element:
 These are the elements, which structure main part of web page, by dividing a page into
coherent blocks.
 A block-level element always start with new line and takes the full width of web page, from
left to right.
 These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML.

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>,
<nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and
<video>.

Note: All these elements are described in later chapters.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <div style="background-color: lightblue">This is first div</div>
7. <div style="background-color: lightgreen">This is second div</div>
8. <p style="background-color: pink">This is a block level element</p>
9. </body>
10. </html>

Output:

24 | P a g e
In the above example we have used

tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and the background
color are showing that it's a block level element.

Inline elements:
 Inline elements are those elements, which differentiate the part of a given text and provide it a
particular function.
 These elements does not start with new line and take width as per requirement.
 The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>,
<i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>,
<small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
7. <span style="background-color: lightblue">this is inline element</span>
8. <p>This will take width of text only</p>
9. </body>
10. </html>

Output:

25 | P a g e
Following is the list of the some main elements used in HTML:

HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML provides
us ability to format text without using CSS. There are many formatting tags in HTML. These
tags are used to make text bold, italicized, or underlined. There are almost 14 options
available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

 Physical tag: These tags are used to provide the visual appearance to the text.
 Logical tag: These tags are used to add some logical or semantic value to the text.

NOTE: There are some physical and logical tags which may give same visual appearance, but they
will be different in semantics.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML
formatting text.

Element
Description
name

<b> This is a physical tag, which is used to bold the text written between it.

<strong> This is a logical tag, which tells the browser that the text is important.

<i> This is a physical tag which is used to make text italic.

<em> This is a logical tag which is used to display content in italic.

<mark> This tag is used to highlight text.

<u> This tag is used to underline text written between it.

<tt> This tag is used to appear a text in teletype. (not supported in HTML5)

This tag is used to draw a strikethrough on a section of text. (Not supported in

<strike>
HTML5)

<sup> It displays the content slightly above the normal line.

26 | P a g e
<sub> It displays the content slightly below the normal line.

<del> This tag is used to display the deleted content.

<ins> This tag displays the content which is added

<big> This tag is used to increase the font size by one conventional unit.

<small> This tag is used to decrease the font size by one unit from base font size.

1) Bold Text
HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font, without any logical
importance. If you write anything within <b>............</b> element, is shown in bold letters.

See this example:

1. <p> <b>Write Your First Paragraph in bold text.</b></p>

Output:

Write Your First Paragraph in bold text.

The HTML <strong> tag is a logical tag, which displays the content in bold font and informs
the browser about its logical importance. If you write anything between
<strong>???????.</strong>, is shown important text.

See this example:

1. <p><strong>This is an important content</strong>, and this is normal content</p>

Output:

This is an important content, and this is normal content

Example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal content</p>
9. </body>
10. </html>

27 | P a g e
2) Italic Text
HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed content in italic font,
without any added importance. If you write anything within <i>............</i> element, is
shown in italic letters.

See this example:

1. <p> <i>Write Your First Paragraph in italic text.</i></p>

Output:

Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed content in italic
font, with added semantics importance.

See this example:

1. <p><em>This is an important content</em>, which displayed in italic font.</p>

Output:

This is an important content, which displayed in italic font.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font.</p>
9. </body>
10. </html>

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

See this example:

28 | P a g e
 1. <h2> I want to put a <mark> Mark</mark> on your face</h2>

Output:

I want to put a Mark on your face

4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

1. <p> <u>Write Your First Paragraph in underlined text.</u></p>

Output:

Write Your First Paragraph in underlined text.

5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.

See this example:

1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
If you want that each letter has the same width then you should write the content within
<tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts because different
letters have different width. (for example: 'w' is wider than 'i'). Monospaced Font provides
similar space among every letter.

See this example:

29 | P a g e
 1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text
If you put the content within ^{..............} element, is shown in superscript; means it
is displayed half a character's height above the other characters.

See this example:

1. <p>Hello ^{Write Your First Paragraph in superscript.}</p>

Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text
If you put the content within _{..............} element, is shown in subscript ; means it
is displayed half a character's height below the other characters.

See this example:

1. <p>Hello _{Write Your First Paragraph in subscript.}</p>

Output:

Hello Write Your First Paragraph in subscript.

HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it
is displayed on the browser in the bold format and size of the text depends on the number of
heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from
highest level h1 (main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important
heading and h6 is used for least important.

30 | P a g e
Headings in HTML helps the search engine to understand and index the structure of
web page.

Note: The main keyword of the whole content of a webpage should be display by h1 heading tag.

See this example:

1. <h1>Heading no. 1</h1>

2. <h2>Heading no. 2</h2>
3. <h3>Heading no. 3</h3>
4. <h4>Heading no. 4</h4>
5. <h5>Heading no. 5</h5>
6. <h6>Heading no. 6</h6>

Output:

Heading no. 1
Heading no. 2
Heading no. 3
Heading no. 4
Heading no. 5
Heading no. 6
Heading elements (h1....h6) should be used for headings only. They should not be used just to make
text bold or big.

 HTML headings can also be used with nested elements. Following are different codes to
display the way to use heading elements.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Heading elements</title>
5. </head>
6. <body>
7. <h1>This is main heading of page. </h1>
8. <p>h1 is the most important heading, which is used to display the keyword of page </p>
9. <h2>This is first sub-heading</h2>
10. <p>h2 describes the first sub heading of page. </p>
11. <h3>This is Second sub-heading</h3>
12. <p>h3 describes the second sub heading of page.</p>
13. <p>We can use h1 to h6 tag to use the different sub-
heading with their paragraphs if
14. required.
15. </p>
16. </body>

31 | P a g e
 17. </html>

Output:

HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a
simple example to see how it work. It is a notable point that a browser itself add an empty
line before and after a paragraph. An HTML <p> tag indicates starting of new paragraph.

Note: If we are using various <p> tags in one HTML file then browser automatically adds a single
blank line between the two paragraphs.

See this example:

1. <p>This is first paragraph.</p>

2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>

Output:

This is first paragraph.

This is second paragraph.

This is third paragraph.

Space inside HTML Paragraph

32 | P a g e
If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line
while displaying the page. The browser counts number of spaces and lines as a single one.

1. <p>
2. I am
3. going to provide
4. you a tutorial on HTML
5. and hope that it will
6. be very beneficial for you.
7. </p>
8. <p>
9. Look, I put here a lot
10. of spaces but I know, Browser will ignore it.
11. </p>
12. <p>
13. You cannot determine the display of HTML</p>
14. <p>because resized windows may create different result.
15. </p>

Output:

I am going to provide you a tutorial on HTML and hope that it will be very beneficial for
you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

As you can see, all the extra lines and unnecessary spaces are removed by the browser.

How to Use <br> and <hr> tag with paragraph?

An HTML <br> tag is used for line break and it can be used with paragraph elements.
Following is the example to show how to use <br> with <p> element.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Use of line break with pragraph tag</h2>
7. <p><br>Papa and mama, and baby and Dot,
8. <br>Willie and me?the whole of the lot
9. <br>Of us all went over in Bimberlie's sleigh,

33 | P a g e
 10. <br>To grandmama's house on Christmas day.
11. </p>
12. </body>
13. </html>

Output:

An HTML <hr> tag is used to apply a horizontal line between two statements or two
paragraphs. Following is the example which is showing use of <hr> tag with paragraph.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Example to show a horizontal line with paragraphs</h2>
7. <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that
line.<hr> it will start a new paragraph.
8. </p>
9. </body>
10. </html>

Output:

34 | P a g e
HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the
most important attribute of the HTML a tag. and which links to destination page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it
points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

1. <a href="second.html">Click for Second Page</a>

Specify a location for Link using target attribute

If we want to open that link to another page then we can use target attribute of <a> tag. With
the help of this link will be open in next page.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>

35 | P a g e
 5. </head>
6. <body>
7. <p>Click on <a href="https://www.javatpoint.com/" target="_blank"> this-
link </a>to go on home page of JavaTpoint.</p>
8. </body>
9. </html>

Output:

Note:

 The target attribute can only use with href attribute in anchor tag.
 If we will not use target attribute then link will open in same page.

Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.

A visited link displayed underlined and purple.

An active link is underlined and red.

HTML Image
HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>

2. <img src="good_morning.jpg" alt="Good Morning Friends"/>

36 | P a g e
Output:

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag
are given below.

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of
the alt attribute describe the image in words. The alt attribute is considered good for SEO
prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.

4) height

It h3 the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of height
attribute.

Use of height and width attribute with img tag

You have learnt about how to insert an image in your web page, now if we want to give some
height and width to display image according to our requirement, then we can set it with
height and width attributes of image.

37 | P a g e
Example:
1. <img src="animal.jpg" height="180" width="300" alt="animal image">

Output:

Note: Always try to insert the image with height and width, else it may flicker while displaying on
webpage.

Use of alt attribute

We can use alt attribute with tag. It will display an alternative text in case if image
cannot be displayed on browser. Following is the example for alt attribute:

1. <img src="animal.png" height="180" width="300" alt="animal image">

Output:

38 | P a g e
How to get image from another directory/folder?
To insert an image in your web, that image must be present in your same folder where you
have put the HTML file. But if in some case image is available in some other directory then
you can access the image like this:

1. <img src="E:/images/animal.png" height="180" width="300" alt="animal image">

In above statement we have put image in local disk E------>images folder------>animal.png.

Note: If src URL will be incorrect or misspell then it will not display your image on web page, so try
to put correct URL.

Use <img> tag as a link

We can also link an image with other page or we can use an image as a link. To do this, put
<img> tag inside the <a> tag.

Example:
1. <a href="https://www.javatpoint.com/what-is-
robotics"><img src="robot.jpg" height="100" width="100"></a>

Output:

39 | P a g e
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of
<tr> ,<td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data
is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar,
body content, footer section etc. But it is recommended to use div tag over table to manage
the layout of the page .

HTML Table Tags

Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

40 | P a g e
HTML Table Example
Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List.

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known
as numbered list also. The ordered list starts with <ol> tag and the list items start with <li>
tag.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

41 | P a g e
Click here for full details of HTML ordered list. HTML Ordered List

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as
bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>

Output:

 Aries
 Bingo
 Leo
 Oracle

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.

2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>

42 | P a g e
 9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>

Output:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.

Click here for full details of HTML description list. HTML Description List

HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a numbered
list then such type of list will called as nested list.

Code:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Nested list</title>
5. </head>
6. <body>
7. <p>List of Indian States with thier capital</p>
8. <ol>
9. <li>Delhi
10. <ul>
11. <li>NewDelhi</li>
12. </ul>
13. </li>
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>

43 | P a g e
 21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38. </ol>
39. </body>
40. </html>

Output:

HTML Ordered List | HTML Numbered

List

44 | P a g e
HTML Ordered List or Numbered List displays elements in numbered format. The HTML
ol tag is used for ordered list. We can use ordered list to represent items either in numerical
order format or alphabetical order format, or any format where an order is emphasized. There
can be different types of numbered list:

 Numeric Number (1, 2, 3)

 Capital Roman Number (I II III)
 Small Romal Number (i ii iii)
 Capital Alphabet (A B C)
 Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
Type "1" This is the default type. In this type, the list items are numbered with numbers.
Type "I" In this type, the list items are numbered with upper case roman numbers.
Type "i" In this type, the list items are numbered with lower case roman numbers.
Type "A" In this type, the list items are numbered with upper case letters.
Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example

Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we
are not defining type="1" because it is the default type.

1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

1. HTML
2. Java
3. JavaScript
4. SQL

ol type="I"
Let's see the example to display list in roman number uppercase.

1. <ol type="I">

45 | P a g e
 2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

I. HTML
II. Java
III. JavaScript
IV. SQL

ol type="i"
Let's see the example to display list in roman number lowercase.

1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

i. HTML
ii. Java
iii. JavaScript
iv. SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

A. HTML

46 | P a g e
 B. Java
C. JavaScript
D. SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.

1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

a. HTML
b. Java
c. JavaScript
d. SQL

start attribute
The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

1. <ol type="i" start="5">

2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

Output:

47 | P a g e
 v. HTML
vi. Java
vii. JavaScript
viii. SQL

HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .

Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such
as shipping address and credit/debit card details so that item can be sent to the given address.

HTML Form Syntax

1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

48 | P a g e
<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element

The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text
area, password field, etc.

Note: The <form> element does not itself create a form but it is container to contain all required form
elements, such as <input>, <label>, etc.

Syntax:

1. <form>
2. //Form elements
3. </form>

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form fields, to
take input from user. We can apply different input filed to gather different information form
user. Following is the example to show the simple text input.

Example:

49 | P a g e
 1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>

Output:

HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Output:

50 | P a g e
Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>

Output:

Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user
friendly.

51 | P a g e
If you click on the label tag, it will focus on the text control. To do so, you need to have for
attribute in label tag that must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it
will provide a focus when you tap or click on label tag. It is more worthy with touchscreens.

1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>

Output:

HTML Password Field Control

The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>

Output:

52 | P a g e
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email address. You must
use @ and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

53 | P a g e
Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.

1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>

Note: These are similar to radio button except it can choose multiple options at a time and radio
button can select one button at a time, and its display.

Output:

54 | P a g e
Submit button control
HTML <input type="submit"> are used to add a submit button on web page. When user
clicks on submit button, then form get submit to the server.

Syntax:

1. <input type="submit" value="submit">

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>

Output:

55 | P a g e
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

Example:

1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/form>

Output:

56 | P a g e
HTML Form Example
Following is the example for a simple form of registration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <br/
>
22. <input type="radio" id="gender" name="gender" value="others"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>

Output:

57 | P a g e
HTML Form Input Types
In HTML <input type=" "> is an important element of HTML form. The "type" attribute of
input element can be various types, which defines information field. Such as <input
type="text" name="name"> gives a text box.

Following is a list of all types of <input> element of

HTML.
type=" " Description

text Defines a one-line text input field

password Defines a one-line password input field

submit Defines a submit button to submit the form to server

reset Defines a reset button to reset all values in the form.

radio Defines a radio button which allows select one option.

checkbox Defines checkboxes which allow select multiple options form.

button Defines a simple push button, which can be programmed to perform a task on an event.

file Defines to select the file from device storage.

image Defines a graphical submit button.

58 | P a g e
HTML5 added new types on <input> element. Following is the list of types of elements
of HTML5

type=" " Description

color Defines an input field with a specific color.

date Defines an input field for selection of date.

datetime-local Defines an input field for entering a date without time zone.

email Defines an input field for entering an email address.

month Defines a control with month and year, without time zone.

number Defines an input field to enter a number.

url Defines a field for entering URL

week Defines a field to enter the date with week-year, without time zone.

search Defines a single line text field for entering a search string.

tel Defines an input field for entering the telephone number.

Following is the description about types of <input> element with examples.

1. <input type="text">:

<input> element of type "text" are used to define a single-line input text field.

Example:

1. <form>
2. <label>Enter first name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter last name</label><br>
5. <input type="text" name="lastname"><br>
6. <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>
7. </form>

Output:

Input "text" type:

The "text"field defines a sinlge line input text field.

Enter first name

59 | P a g e
Enter last name

Note:The default maximum cahracterlenght is 20.

2. <input type="password">:

The <input> element of type "password" allow a user to enter the password securely in a
webpage. The entered text in password filed converted into "*" or ".", so that it cannot be
read by another user.

Example:

1. <form>
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">
7. </form>

Output:

Input "password" type:

The "password"field defines a sinlge line input password field to enter the password
securely.

Enter User name

Enter Password

3. <input type="submit">:

The <input> element of type "submit" defines a submit button to submit the form to the
server when the "click" event occurs.

Example:

1. <form action="https://www.javatpoint.com/html-tutorial">
2. <label>Enter User name</label><br>
3. <input type="text" name="firstname"><br>
4. <label>Enter Password</label><br>
5. <input type="Password" name="password"><br>
6. <br><input type="submit" value="submit">

60 | P a g e
 7. </form>

Output:

Input "submit" type:

Enter User name

Enter Password

After clicking on submit button, this will submit the form to server and will redirect the page
to action value.We will learn about "action" attribute in later chapters

4. <input type="reset">:

The <input> type "reset" is also defined as a button but when the user performs a click event,
it by default reset the all inputted values.

Example:

1. <form>
2. <label>User id: </label>
3. <input type="text" name="user-id" value="user">
4. <label>Password: </label>
5. <input type="password" name="pass" value="pass"><br><br>
6. <input type="submit" value="login">
7. <input type="reset" value="Reset">
8. </form>

Output:

Input "reset" type:

user ****
User id: Password:

Try to change the input values of user id and password, then when you click on reset, it will
reset input fields with default values.

5. <input type="radio">:

The <input> type "radio" defines the radio buttons, which allow choosing an option between
a set of related options. At a time only one radio button option can be selected at a time.

Example:

1. <form>

61 | P a g e
 2. <p>Kindly Select your favorite color</p>
3. <input type="radio" name="color" value="red"> Red <br>
4. <input type="radio" name="color" value="blue"> blue <br>
5. <input type="radio" name="color" value="green">green <br>
6. <input type="radio" name="color" value="pink">pink <br>
7. <input type="submit" value="submit">
8. </form>

Output:

Input "radio" type

Kindly Select your favoritecolor

Red
blue
green
pink

6. <input type="checkbox">:

The <input> type "checkbox" are displayed as square boxes which can be checked or
unchecked to select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an important difference between
both types: radio buttons allow the user to select only one option at a time, whereas checkbox allows
a user to select zero to multiple options at a time.
Example:

1. <form>
2. <label>Enter your Name:</label>
3. <input type="text" name="name">
4. <p>Kindly Select your favourite sports</p>
5. <input type="checkbox" name="sport1" value="cricket">Cricket<br>
6. <input type="checkbox" name="sport2" value="tennis">Tennis<br>
7. <input type="checkbox" name="sport3" value="football">Football<br>
8. <input type="checkbox" name="sport4" value="baseball">Baseball<br>
9. <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>

10. <input type="submit" value="submit">

11. </form>

Output:

Input "checkbox" type

62 | P a g e
Registration Form
Enter your Name:

Kindly Select your favorite sports

Cricket
Tennis
Football
Baseball
Badminton

7. <input type="button">:

The <input> type "button" defines a simple push button, which can be programmed to control
a functionally on any event such as, click event.

Note: It mainly works with JavaScript.

Example:

1. <form>
2. <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">
3. </form>

Output:

Input "button" type.

Click the button to see the result:

Note: In the above example we have used the "alert" of JS, which you will learn in our JS tutorial. It
is used to show a pop window.

8. <input type="file">:

The <input> element with type "file" is used to select one or more files from user device
storage. Once you select the file, and after submission, this file can be uploaded to the server
with the help of JS code and file API.

Example:

1. <form>
2. <label>Select file to upload:</label>

63 | P a g e
 3. <input type="file" name="newfile">
4. <input type="submit" value="submit">
5. </form>

Output:

Input "file" type.

We can choose any type of file until we do not specify it! The selected file will appear at next
to "choose file" option

Select file to upload:

9. <input type="image">:

The <input> type "image" is used to represent a submit button in the form of image.

Example:

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Input "image" type.</h2>
5. <p>We can create an image as submit button</p>
6. <form>
7. <label>User id:</label><br>
8. <input type="text" name="name"><br><br>
9. <input type="image" alt="Submit" src="login.png" width="100px">
10. </form>
11.
12. </body>
13. </html>

HTML5 newly added <input> types element

1. <input type="color">:

The <input> type "color" is used to define an input field which contains a colour. It allows a
user to specify the colour by the visual colour interface on a browser.

Note: The "color" type only supports color value in hexadecimal format, and the default value is
#000000 (black).
Example:

1. <form>
2. Pick your Favorite color: <br><br>

64 | P a g e
 3. <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>
4. <input type="color" name="downclick" value="#f5f5dc"> Downclick
5. </form>

Output:

Input "color" types:

Pick your Favoritecolor:

Up-click

Down-click

Note:The default value of "color" type is #000000 (black). It only supports color value in
hexadecimal format.

2. <input type="date">:

The <input> element of type "date" generates an input field, which allows a user to input the
date in a given format. A user can enter the date by text field or by date picker interface.

Example:

1. <form>
2. Select Start and End Date: <br><br>
3. <input type="date" name="Startdate"> Start date:<br><br>
4. <input type="date" name="Enddate"> End date:<br><br>
5. <input type="submit">
6. </form>

Output:

Input "date" type

Select Start and End Date:

Start date:

End date:

3. <input type="datetime-local">:

The <input> element of type "datetime-local" creates input filed which allow a user to select
the date as well as local time in the hour and minute without time zone information.

Example:

1. <form>
2. <label>

65 | P a g e
 3. Select the meeting schedule: <br><br>
4. Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
5. </label>
6. <input type="submit">
7. </form>

Output:

Input "datetime-local" type

Select the meeting schedule:

Select date & time:

4. <input type="email">:

The <input> type "email" creates an input filed which allow a user to enter the e-mail address
with pattern validation. The multiple attributes allow a user to enter more than one email
address.

Example:

1. <form>
2. <label><b>Enter your Email-address</b></label>
3. <input type="email" name="email" required>
4. <input type="submit">
5. <p><strong>Note:</strong>User can also enter multiple email addresses separat
ing by comma or whitespace as following: </p>
6. <label><b>Enter multiple Email-addresses</b></label>
7. <input type="email" name="email" multiple>
8. <input type="submit">
9. </form>

Output:

Input "email" type

Enter your Email-address

Note:User can also enter multiple email addresses separating by comma or whitespace as
following:

Enter multiple Email-addresses

66 | P a g e
5. <input type="month">:

The <input> type "month" creates an input field which allows a user to easily enter month
and year in the format of "MM, YYYY" where MM defines month value, and YYYY defines
the year value. New

Example:

1. <form>
2. <label>Enter your Birth Month-year: </label>
3. <input type="month" name="newMonth">
4. <input type="submit">
5. </form>

Output:

Input "month" type:

Enter your Birth Month-year:

HTML form Attribute

HTML <form> element attributes
In HTML there are various attributes available for <form> element which are given below:

HTML action attribute

The action attribute of <form> element defines the process to be performed on form when
form is submitted, or it is a URI to process the form information.

The action attribute value defines the web page where information proceed. It can be .php,
.jsp, .asp, etc. or any URL where you want to process your form.

Note: If action attribute value is blank then form will be processed to the same page.
Example:

1. <form action="action.html" method="post">

2. <label>User Name:</label><br>
3. <input type="text" name="name"><br><br>
4. <label>User Password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit">
7. </form>

Output:

Demo of action attribute of form element

67 | P a g e
User Name:

User Password

It will redirect to a new page "action.html" when you click on submit button

HTML method attribute

The method attribute defines the HTTP method which browser used to submit the form. The
possible values of method attribute can be:

 post: We can use the post value of method attribute when we want to process the sensitive
data as it does not display the submitted data in URL.

Example:

1. <form action="action.html" method="post">

 get: The get value of method attribute is default value while submitting the form. But this is
not secure as it displays data in URL after submitting the form.

Example:

1. <form action="action.html" method="get">

When submitting the data, it will display the entered data in the form of:

1. file:///D:/HTML/action.html?name=JavaTPoint&pass=123

HTML target attribute

The target attribute defines where to open the response after submitting the form. The
following are the keywords used with the target attribute.

 _self: If we use _self as an attribute value, then the response will display in current page only.

Example:

1. <form action="action.html" method="get" target="_self">

 _blank: If we use _blank as an attribute it will load the response in a new page.

68 | P a g e
Example:

1. <form action="action.html" method="get" target="_blank">

HTML autocomplete attribute

The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an
input field to complete automatically. It can have two values "on" and "off" which enables
autocomplete either ON or OFF. The default value of autocomplete attribute is "on".

Example:

1. <form action="action.html" method="get" autocomplete="on">

Example:

1. <form action="action.html" method="get" autocomplete="off">

Note: it can be used with <form> element and <input> element both.

HTML enctype attribute

The HTML enctype attribute defines the encoding type of form-content while submitting the
form to the server. The possible values of enctype can be:

 application/x-www-form-urlencoded: It is default encoding type if the enctype attribute is

not included in the form. All characters are encoded before submitting the form.

Example:

1. <form action="action.html" method="post" enctype="application/x-www-form-

urlencoded" >

 multipart/form-data: It does not encode any character. It is used when our form contains
file-upload controls.

Example:

1. <form action="action.html" method="post" enctype="multipart/form-data">

 text/plain (HTML5): In this encoding type only space are encoded into + symbol and no any
other special character encoded.

Example:

1. <form action="action.html" method="post" enctype="text/plain" >

69 | P a g e
HTML novalidate attribute HTML5
The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this
attribute in form then it does not perform any type of validation and submit the form.

Example:

1. <form action = "action.html" method = "get" novalidate>

Output:

Fill the form

Enter name:

Enter age:

Enter email:

Try to change the form detials with novalidateatttribute and without novalidate
attribute and see the difference.

HTML <input> element attribute

HTML name attribute
The HTML name attribute defines the name of an input element. The name and value
attribute are included in HTTP request when we submit the form.

Note: One should not omit the name attribute as when we submit the form the HTTP request includes
both name-value pair and if name is not available it will not process that input field.
Example:

1. <form action = "action.html" method = "get">

2. Enter name:<br><input type="name" name="uname"><br>
3. Enter age:<br><input type="number" name="age"><br>
4. Enter email:<br><input type="email"><br>
5. <input type="submit" value="Submit">
6. </form>

Output:

70 | P a g e
Fill the form
Enter name:

Enter age:

Enter email:

Note: If you will not use name attribute in any input field, then that input field will not
be submitted, when submit the form.

Click on submit and see the URL where email is not included in HTTP request as we have
not used name attribute in the email input field

HTML value attribute

The HTML value attribute defines the initial value or default value of an input field.

Example:

1. <form>
2. <label>Enter your Name</label><br>
3. <input type="text" name="uname" value="Enter Name"><br><br>
4. <label>Enter your Email-address</label><br>
5. <input type="text" name="uname" value="Enter email"><br><br>
6. <label>Enter your password</label><br>
7. <input type="password" name="pass" value=""><br><br>
8. <input type="submit" value="login">
9. </form>

Output:

Fill the form

Enter your Name
Enter Name

Enter your Email-address

Enter email

Enter your password

Note: In password input filed the value attribute will always unclear

71 | P a g e
HTML required attribute HTML5
HTML required is a Boolean attribute which specifies that user must fill that filed before
submitting the form.

Example:

1. <form>
2. <label>Enter your Email-address</label><br>
3. <input type="text" name="uname" required><br><br>
4. <label>Enter your password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit" value="login">
7. </form>

Output:

Fill the form

Enter your Email-address

Enter your password

If you will try to submit the form without completing email field then it will give an
error pop up.

HTML autofocus attribute HTML5

The autofocus is a Boolean attribute which enables a field automatically focused when a
webpage loads.

Example:

1. <form>
2. <label>Enter your Email-address</label><br>
3. <input type="text" name="uname" autofocus><br><br>
4. <label>Enter your password</label><br>
5. <input type="password" name="pass"><br><br>
6. <input type="submit" value="login">
7. </form>

72 | P a g e
HTML placeholder attribute HTML5
The placeholder attribute specifies a text within an input field which informs the user about
the expected input of that filed.

The placeholder attribute can be used with text, password, email, and URL values.

When the user enters the value, the placeholder will be automatically removed.

Example:

1. <form>
2. <label>Enter your name</label><br>
3. <input type="text" name="uname" placeholder="Your name"><br><br>
4. <label>Enter your Email address</label><br>
5. <input type="email" name="email" placeholder="example@gmail.com"><br><
br>
6. <label>Enter your password</label><br>
7. <input type="password" name="pass" placeholder="your password"><br><br>
8. <input type="submit" value="login">
9. </form>

Output:

Registration form
Enter your name

Enter your Email address

Enter your password

HTML disabled attribute

The HTML disabled attribute when applied then it disable that input field. The disabled field
does not allow the user to interact with that field.

The disabled input filed does not receive click events, and these input value will not be sent
to the server when submitting the form.

Example:

1. <input type="text" name="uname" disabled><br><br>

73 | P a g e
Output:

Registration form
Enter User name
USER

Enter your Email address

Enter your password

HTML size attribute

The size attribute controls the size of the input field in typed characters.

Example:

1. <label>Account holder name</label><br>

2. <input type="text" name="uname" size="40" required><br><br>
3. <label>Account number</label><br>
4. <input type="text" name="an" size="30" required><br><br>
5. <label>CVV</label><br>
6. <input type="text" name="cvv" size="1" required><br><br>

Output:

Registration form with disbaled attribute

Account holder name

Account number

CVV

HTML form attribute

HTML form attribute allows a user to specify an input filed outside the form but remains the
part of the parent form.

74 | P a g e
Example:

1. User email: <br><input type="email" name="email" form="fcontrol" required><br>

2. <input type="submit" form="fcontrol">

Output:

User Name:

User password:

The email field is outside the form but still it will remain part of the form

User email:

HTML style using CSS

Let's suppose we have created our web page using a simple HTML code, and we want
something which can present our page in a correct format, and visibly attractive. So to do
this, we can style our web page with CSS (Cascading Stylesheet) properties.

CSS is used to apply the style in the web page which is made up of HTML elements. It
describes the look of the webpage.

CSS provides various style properties such as background color, padding, margin, border-
color, and many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is separated by a semicolon
(;).

Note: In this chapter, we have given a small overview of CSS. You will learn everything in depth
about CSS in our CSS tutorial.
Example:

1. <body style="text-align: center;">

2. <h2 style="color: red;">Welcome to javaTpoint</h2>
3. <p style="color: blue; font-size: 25px; font-
style: italic ;">This is a great website to learn technologies in very simple way. </p>
4. </body>

In the above example, we have used a style attribute to provide some styling format to our
code.

Output:

75 | P a g e
Welcome to javaTpoint

This is a great website to learn technologies in very simple way.

Three ways to apply CSS

To use CSS with HTML document, there are three ways:

 Inline CSS: Define CSS properties using style attribute in the HTML elements.
 Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
 External CSS: Define all CSS property in a separate .css file, and then include the file with
HTML file using tag in section.

Inline CSS:
Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each
element.

To apply inline CSS, you need to use style attribute within HTML element. We can use as
many properties as we want, but each property should be separated by a semicolon (;).

Example:

1. <h3 style="color: red;

2. font-style: italic;
3. text-align: center;
4. font-size: 50px;
5. padding-top: 25px;">Learning HTML using Inline CSS</h3>

Output:

Learning HTML using Inline CSS

Internal CSS:
An Internal stylesheets contains the CSS properties for a webpage in <head> section of
HTML document. To use Internal CSS, we can use class and id attributes.

We can use internal CSS to apply a style for a single HTML page.

Example:

1. <!DOCTYPE html>

76 | P a g e
 2. <html>
3. <head>
4. <style>
5. /*Internal CSS using element name*/
6. body{background-color:lavender;
7. text-align: center;}
8. h2{font-style: italic;
9. font-size: 30px;
10. color: #f08080;}
11. p{font-size: 20px;}
12. /*Internal CSS using class name*/
13. .blue{color: blue;}
14. .red{color: red;}
15. .green{color: green;}
16. </style>
17. </head>
18. <body>
19. <h2>Learning HTML with internal CSS</h2>
20. <p class="blue">This is a blue color paragraph</p>
21. <p class="red">This is a red color paragraph</p>
22. <p class="green">This is a green color paragraph</p>
23. </body>
24. </html>

Note: In the above example, we have used a class attribute which you will learn in the next chapter.

External CSS:
An external CSS contains a separate CSS file which only contains style code using the class
name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in
HTML file using <link> tag.

If we have multiple HTML pages for an application and which use similar CSS, then we can
use external CSS.

There are two files need to create to apply external CSS

 First, create the HTML file

 Create a CSS file and save it using the .css extension (This file only will only contain the
styling code.)
 Link the CSS file in your HTML file using tag in header section of HTML document.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <link rel="stylesheet" type="text/css" href="style.css">
5. </head>
6. <body>

77 | P a g e
 7. <h2>Learning HTML with External CSS</h2>
8. <p class="blue">This is a blue color paragraph</p>
9. <p class="red">This is a red color paragraph</p>
10. <p class="green">This is a green color paragraph</p>
11. </body>
12. </html>

CSS file:

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

Commonly used CSS properties:

Properties-name Syntax Description

background-color background-color:red; It defines the background color of that element.

color color: lightgreen; It defines the color of text of an element

padding padding: 20px; It defines the space between content and the border.

margin margin: 30px; margin-left: It creates space around an element.

font-family font-family: cursive; Font-family defines a font for a particular element.

Font-size font-size: 50px; Font-size defines a font size for a particular element.

text-align text-align: left; It is used to align the text in a selected position.

78 | P a g e
HTML Classes
Class Attribute in HTML
The HTML class attribute is used to specify a single or multiple class names for an HTML
element. The class name can be used by CSS and JavaScript to do some tasks for HTML
elements. You can use this class in CSS with a specific class, write a period (.) character,
followed by the name of the class for selecting elements.

A class attribute can be defined within <style> tag or in separate file using the (.) character.

In an HTML document, we can use the same class attribute name with different elements.

Defining an HTML class

To create an HTML class, firstly define style for HTML class using <style> tag within
<head> section as following example:

Example:

1. <head>
2. <style>
3. .headings{
4. color: lightgreen;
5. font-family: cursive;
6. background-color: black; }
7. </style>
8. </head>

We have define style for a class name "headings", and we can use this class name with any of
HTML element in which we want to provide such styling. We just need to follow the
following syntax to use it.

1. <tag class="ghf"> content </tag>

Example 1:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .headings{
6. color: lightgreen;
7. font-family: cursive;
8. background-color: black; }
9. </style>
10. </head>
11. <body>
12. <h1 class="headings">This is first heading</h1>

79 | P a g e
 13. <h2 class="headings">This is Second heading</h2>
14. <h3 class="headings">This is third heading</h3>
15. <h4 class="headings">This is fourth heading</h4>
16. </body>
17. </html>

Another Example with different class name

Example:

Let's use a class name "Fruit" with CSS to style all elements.

1. <style>
2. .fruit {
3. background-color: orange;
4. color: white;
5. padding: 10px;
6. }
7. </style>
8.
9. <h2 class="fruit">Mango</h2>
10. <p>Mango is king of all fruits.</p>
11.
12. <h2 class="fruit">Orange</h2>
13. <p>Oranges are full of Vitamin C.</p>
14.
15. <h2 class="fruit">Apple</h2>
16. <p>An apple a day, keeps the Doctor away.</p>

Here you can see that we have used the class name "fruit" with (.) to use all its elements.

Note: You can use class attribute on any HTML element. The class name is case-sensitive.

Class Attribute in JavaScript

You can use JavaScript access elements with a specified class name by using the
getElementsByClassName() method.

Example:

Let's hide all the elements with class name "fruit" when the user click on the button.

1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <h2>Class Attribute with JavaScript</h2>

80 | P a g e
 6. <p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p>
7.
8. <button onclick="myFunction()">Hide elements</button>
9.
10.
11. <h2 class="fruit">Mango</h2>
12. <p>Mango is king of all fruits.</p>
13.
14. <h2 class="fruit">Orange</h2>
15. <p>Oranges are full of Vitamin C.</p>
16.
17. <h2 class="fruit">Apple</h2>
18. <p>An apple a day, keeps the Doctor away.</p>
19.
20. <script>
21. function myFunction() {
22. var x = document.getElementsByClassName("fruit");
23. for (var i = 0; i < x.length; i++) {
24. x[i].style.display = "none";
25. }
26. }
27. </script>
28.
29. </body>
30. </html>

Note: You will learn more about JavaScript in our JavaScript tutorial.

Multiple Classes
You can use multiple class names (more than one) with HTML elements. These class names
must be separated by a space.

Example:

Let's style elements with class name "fruit" and also with a class name "center".

1. <!DOCTYPE html>
2. <html>
3. <style>
4. .fruit {
5. background-color: orange;
6. color: white;
7. padding: 10px;
8. }
9.
10. .center {
11. text-align: center;
12. }
13. </style>

81 | P a g e
 14. <body>
15.
16. <h2>Multiple Classes</h2>
17. <p>All three elements have the class name "fruit". In addition, Mango also have the cl
ass name "center", which center-aligns the text.</p>
18.
19. <h2 class="fruit center">Mango</h2>
20. <h2 class="fruit">Orange</h2>
21. <h2 class="fruit">Apple</h2>
22.
23. </body>
24. </html>

You can see that the first element <h2> belongs to both the "fruit" class and the "center"
class.

Same class with Different Tag

You can use the same class name with different tags like <h2> and <p> etc. to share the same
style.

Example:

1. <!DOCTYPE html>
2. <html>
3. <style>
4. .fruit {
5. background-color: orange;
6. color: white;
7. padding: 10px;
8. }
9. </style>
10. <body>
11. <h2>Same Class with Different Tag</h2>
12. <h2 class="fruit">Mango</h2>
13. <p class="fruit">Mango is the king of all fruits.</p>
14. </body>
15. </html>

Test it NowHTML Id Attribute

The id attribute is used to specify the unique ID for an element of the HTML document. It
allocates the unique identifier which is used by the CSS and the JavaScript for performing
certain tasks.

82 | P a g e
Note: In the Cascading Style sheet (CSS), we can easily select an element with the specific id by using
the # symbol followed by id.
Note: JavaScript can access an element with the given ID by using the getElementById() method.
Syntax

1. <tag id="value">

Example 1: The following example describes how to use the id attribute in CSS document:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of Id attribute in CSS
6. </title>
7. <style>
8. #Cars {
9. padding: 40px;
10. background-color: lightblue;
11. color: black;
12. text-align: center;
13. }
14.
15. #Bikes
16. {
17. padding: 50px;
18. background-color: lightGreen;
19. text-align: center;
20. }
21. </style>
22. </head>
23. <body>
24. <p> Use CSS to style an element with the id: </p>
25. <h1 id="Cars"> Cars </h1>
26. <h1 id="Bikes"> Bikes </h1>
27. </body>
28. </html>

Output:

83 | P a g e
Example 2: The following example describes how to use the ID attribute in JavaScript.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> Date Attribute </title>
5. <script>
6. function viewdate() {
7. var x = document.getElementById("dob").value;
8. document.getElementById("demo").innerHTML = x;
9. </script>
10. </head>
11. <body>
12. Employee Name: <input type="text" placeholder="Your Good name"/>
13. <br>
14. <br>
15. Date of Joining:
16. <input type="date" id="dob">
17. <br>
18. <button onclick="viewdate()"> Submit
19. </button>
20. <br>
21. <h2 id="demo"> </h2>
22. </body>
23. </html>

84 | P a g e
Output:

HTML
List Box
The list box is a graphical control element in the HTML document that allows a user to select
one or more options from the list of options.

Syntax

To create a list box, use the HTML element<select> which contains two attributes Name and
Size. The Name attribute is used to define the name for calling the list box, and size attribute
is used to specify the numerical value that shows the how many options it contains.

1. <select Name="Name_of_list_box" Size="Number_of_options">

2. <option> List item 1 </option>
3. <option> List item 2 </option>
4. <option> List item 3 </option>
5. <option> List item N </option>
6. </select>

Examples:

Example 1: Consider the below example that creates a simple list box.

1. <!DOCTYPE html>
2. <html>

85 | P a g e
 3. <title>
4. Example of List Box
5. </title>
6. <body>
7. Customer Name: <input type="text" Placeholder="Enter the Customer Name"/>
8. <br>
9. <br>
10. <select name="Cars" size="5">
11. <option value="Merceders"> Merceders </option>
12. <option value="BMW"> BMW </option>
13. <option value="Jaguar"> Jaguar </option>
14. <option value="Lamborghini"> Lamborghini </option>
15. <option value="Ferrari"> Ferrari </option>
16. <option value="Ford"> Ford </option>
17. </select>
18. </body>
19. </html>

Output:

Example 2: Below example uses the multipleattribute for selecting the multiple options in a
list. We can select multiple options from list box by holding the ctrl key.

1. <!DOCTYPE html>
2. <html>
3. <title>
4. Example of List Box with multiple attribute
5. </title>
6. <body>
7. Customer Name: <input type="text" Placeholder="Enter the Customer Name"/>

86 | P a g e
 8. <br>
9. <br>
10. <select name="Cars" size="5" multiple="multiple">
11. <option value="Merceders"> Merceders </option>
12. <option value="BMW"> BMW </option>
13. <option value="Jaguar"> Jaguar </option>
14. <option value="Lamborghini"> Lamborghini </option>
15. <option value="Ferrari"> Ferrari </option>
16. <option value="Ford"> Ford </option>
17. </select>
18. </body>
19. </html>

Output:

Unix commands list

This guide has been prepared by me to help myself with the list of frequently used basic
commands in UNIX/LINUX to be on my finger tip. Thought of sharing it with the others, in
case, it might turn out helpful to other readers as well. This is Unix/Linux basic commands -
1,for 2nd part follow the link given at the end of this article.

87 | P a g e
Web servers Shell
Unix/Linux file commands guide

This article will serve as a 5 minute guide or tutorial to learn/revisit basic unix or linux
commands frequently used while working with files. Unix/Linux command is given along
with their usage or description.

 ls ► use this command in unix/linux to see all the directory listing. However, any
hidden files will not be listed.
 ls -al ► use this command in unix/linux to see formatted directory listing along with
the hidden files.
 ls -lt ► use this command in unix/linux to sort the directory listing by their time of
modification.
 pwd ► use this command in unix/linux to show your current working directory.
 touch fileName ► use this command in unix/linux to create new file with its name as
filename.
 cd ► use this command in unix/linux to move to home directory.
 cd dirName ► use this command in unix/linux to change current directory to
dirName directory.
 mkdirdirName ► use this command in unix/linux to make or create directory having
name as dirName.
 rm fileName ► use this command in unix/linux to remove or delete file having name
as fileName.
 rm -r dirName ► use this command in unix/linux to remove or delete directory
dirName.
 rm -f filename ► use this command in unix/linux to force remove the file filename.
 more fileName ► use this command in unix/linux to get the content of file having
name as filename
 head fileName ► use this command in unix/linux to get output of first 10 lines of the
file fileName.
 tail fileName ► use this command in unix/linux to get output of last 10 lines of the
file filename.
 cp fileAfileB ► use this command in unix/linux to copy the content of fileA to fileB.
 cp -r dirAdirB ► use this command in unix/linux to copy directory dirA to directory
dirB and create dirB if not already created.
 mv fileAfileB ► use this command in unix/linux to rename or move fileA to fileB.
 cat >file ► use this command in unix/linux to place standard input into the file.

Unix or Linux process management commands guide

This section will serve as a 5 minute guide or tutorial to learn/revisit basic unix or linux
commands frequently used while working with process management. Unix/Linux command
is given along with their usage or description.

 ps ► use this command in unix/linux to see currently working processes.

 top ► use this command in unix/linux to display all the running processes.

88 | P a g e
  kill pid ► use this command in unix/linux to kill the process with given pid.
 killallprocessA ► use this command in unix/linux to kill all the process named as
processA
 pkill pattern ► use this command in unix/linux to kill all processes matching the
given pattern.
 bg ► use this command in unix/linux to list all the background jobs.
 fg ► use this command in unix/linux to bring the most recent job to foreground.
 fg n1 ► use this command in unix/linux to bring job n1 to the foreground.

Unix/Linux system info commands guide

This section will serve as a 5 minute guide or tutorial to learn/revisit basic unix or linux
commands frequently used while working with system. Unix/Linux command is given along
with their usage or description.

 cal ► use this command in unix/linux to show current months calendar.

 date ► use this command in unix/linux to show current date and time.
 w ► use this command in unix/linux to see who all are currently logged in to the
system.
 whoami ► use this command in unix/linux to see who you are currently logged in as
in the system.
 uname -a ► use this command in unix/linux to see kernel information.
 finger user ► use this command in unix/linux to display information about user.
 man command ► use this command in unix/linux to show the manual for command.
 free ► use this command in unix/linux to show memory and swap usage.
 df ► use this command in unix/linux to see the disk usage.
 du ► use this command in unix/linux to see the directory space usage.
 whereis app ► use this command in unix/linux to show possible location of app.
 which app ► use this command in unix/linux to show which application will be run
by default.

89 | P a g e
Version control
Git GitHub Pages
Create a New Repository
Start by signing in to GitHub. GitHub pages need a special name and setup to work, so we
start by creating a new repository:

This repository needs a special name to function as a GitHub page. It needs to be your
GitHub username, followed by .github.io:

90 | P a g e
Push Local Repository to GitHub Pages
We add this new repository as a remote for our local repository, we are calling it gh-page (for
GitHub Pages).

Copy the URL from here:

And add it as a new remote:

Example
git remote addgh-page https://github.com/w3schools-test/w3schools-test.github.io.git

Make sure you are on the masterbranch, then push the masterbranch to the new remote:

Example
git push gh-page master
Enumerating objects: 33, done.
Counting objects: 100% (33/33), done.
Delta compression using up to 16 threads
Compressing objects: 100% (33/33), done.
Writing objects: 100% (33/33), 94.79 KiB | 15.80 MiB/s, done.
Total 33 (delta 18), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (18/18), done.
To https://github.com/w3schools-test/w3schools-test.github.io.git
* [new branch] master -> master

Note: If this is the first time you are connecting to GitHub, you will get some kind of
notification to authenticate this connection.

Check that the new repository has received all the files:

91 | P a g e
Check Out Your Own GitHub Page
That looks good, now click the Settings menu and navigate to the Pages tab:

The GitHub page is created, and you can click the URL to view the result!

Git Tutorial
Learning by Examples
In this tutorial, we will show you Git commands like this:

Example
git --version
git version 2.30.2.windows.1

For new users, using the terminal view can seem a bit complicated. Don't worry! We will
keep it really simple, and learning this way gives you a good grasp of how Git works.

In the code above, you can see commands (input) and output.

Lines like this are commands we input:

Example
git --version

Lines like this are the output/response to our commands:

Example
git version 2.30.2.windows.1

92 | P a g e
In general, lines with $ in front of it is input. These are the commands you can copy and run
in your terminal.

Git and Remote Repositories

Git and GitHub are different things.

In this tutorial you will understand what Git is and how to use it on the remote repository
platforms, like GitHub.

You can choose, and change, which platform to focus on by clicking in the menu on the right:

Git Exercises
Test Yourself With Exercises
Exercise:
Insert the missing part of the command to check which version of Git (if any) is installed.

git

What is Git?
Git is a popular version control system. It was created by Linus Torvalds in 2005, and has
been maintained by Junio Hamano since then.

It is used for:

 Tracking code changes

 Tracking who made changes
 Coding collaboration

What does Git do?

 Manage projects with Repositories

 Clone a project to work on a local copy
 Control and track changes with Staging and Committing
 Branch and Merge to allow for work on different parts and versions of a project
 Pull the latest version of the project to a local copy
 Push local updates to the main project

Working with Git

 Initialize Git on a folder, making it a Repository

 Git now creates a hidden folder to keep track of changes in that folder

93 | P a g e
  When a file is changed, added or deleted, it is considered modified
 You select the modified files you want to Stage
 The Staged files are Committed, which prompts Git to store a permanent snapshot of the
files
 Git allows you to see the full history of every commit.
 You can revert back to any previous commit.
 Git does not store a separate copy of every file in every commit, but keeps track of changes
made in each commit!

Why Git?

 Over 70% of developers use Git!

 Developers can work together from anywhere in the world.
 Developers can see the full history of the project.
 Developers can revert to earlier versions of a project.

What is GitHub?

 Git is not the same as GitHub.

 GitHub makes tools that use Git.
 GitHub is the largest host of source code in the world, and has been owned by Microsoft since
2018.
 In this tutorial, we will focus on using Git with GitHub.

Git Install
You can download Git for free from the following website: https://www.git-scm.com/

Using Git with Command Line

To start using Git, we are first going to open up our Command shell.

For Windows, you can use Git bash, which comes included in Git for Windows. For Mac and
Linux you can use the built-in terminal.

The first thing we need to do, is to check if Git is properly installed:

Example
git --version
git version 2.30.2.windows.1

If Git is installed, it should show something like git version X.Y

Configure Git
94 | P a g e
Now let Git know who you are. This is important for version control systems, as each Git
commit uses this information:

Example
git config --global user.name "w3schools-test"
git config --global user.email"test@w3schools.com"

Change the user name and e-mail address to your own. You will probably also want to use
this when registering to GitHub later on.

Note: Use global to set the username and e-mail for every repository on your computer.

If you want to set the username/e-mail for just the current repo, you can remove global

Creating Git Folder

Now, let's create a new folder for our project:

Example
mkdirmyproject
cdmyproject

mkdirmakes a new directory.

cdchanges the current working directory.

Now that we are in the correct directory. We can start by initializing Git!

Note: If you already have a folder/directory you would like to use for Git:

Navigate to it in command line, or open it in your file explorer, right-click and select "Git
Bash here"

Initialize Git
Once you have navigated to the correct folder, you can initialize Git on that folder:

Example
gitinit
Initialized empty Git repository in /Users/user/myproject/.git/

You just created your first Git Repository!

Note: Git now knows that it should watch the folder you initiated it on.

Git creates a hidden folder to keep track of changes.

95 | P a g e
Git Adding New Files
You just created your first local Git repo. But it is empty.

So let's add some files, or create a new file using your favourite text editor. Then save or
move it to the folder you just created.

If you want to learn how to create a new file using a text editor, you can visit our HTML
tutorial:
HTML Editors

For this example, I am going to use a simple HTML file like this:

Example
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>

<h1>Hello world!</h1>
<p>This is the first file in my new Git Repo.</p>

</body>
</html>

And save it to our new folder as index.html.

Let's go back to the terminal and list the files in our current working directory:

Example
ls
index.html

ls will list the files in the directory. We can see that index.html is there.

Then we check the Git status and see if it is a part of our repo:

Example
git status
On branch master

No commits yet

Untracked files:
(use "git add ..." to include in what will be committed)
index.html

nothing added to commit but untracked files present (use "git add" to track)

96 | P a g e
Now Git is aware of the file, but has not added it to our repository!

Files in your Git repository folder can be in one of 2 states:

 Tracked - files that Git knows about and are added to the repository
 Untracked - files that are in your working directory, but not added to the repository

When you first add files to an empty repository, they are all untracked. To get Git to track
them, you need to stage them, or add them to the staging environment.

Git Staging Environment

One of the core functions of Git is the concepts of the Staging Environment, and the Commit.

As you are working, you may be adding, editing and removing files. But whenever you hit a
milestone or finish a part of the work, you should add the files to a Staging Environment.

Staged files are files that are ready to be committed to the repository you are working on.
You will learn more about commit shortly.

For now, we are done working with index.html. So we can add it to the Staging Environment:

Example
gitadd index.html

The file should be Staged. Let's check the status::

Example
git status
On branch master

No commits yet

Changes to be committed:
(use "git rm --cached ..." to unstage)
new file: index.html

Now the file has been added to the Staging Environment.

Git Add More than One File

You can also stage more than one file at a time. Let's add 2 more files to our working folder.
Use the text editor again.

A README.md file that describes the repository (recommended for all repositories):

97 | P a g e
Example
# hello-world
Hello World repository for Git tutorial
This is an example repository for the Git tutoial on https://www.w3schools.com

This repository is built step by step in the tutorial.

A basic external style sheet (bluestyle.css):

Example
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

And update index.html to include the stylesheet:

Example
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<linkrel="stylesheet"href="bluestyle.css">
</head>
<body>

<h1>Hello world!</h1>
<p>This is the first file in my new Git Repo.</p>

</body>
</html>

Now add all files in the current directory to the Staging Environment:

Example
gitadd --all

Using --all instead of individual filenames will stage all changes (new, modified, and deleted)
files.

Example
git status
On branch master

No commits yet

Changes to be committed:

98 | P a g e
 (use "git rm --cached ..." to unstage)
new file: README.md
new file: bluestyle.css
new file: index.html

Now all 3 files are added to the Staging Environment, and we are ready to do our first commit.

Git Commit
Since we have finished our work, we are ready move from stage to commit for our repo.

Adding commits keep track of our progress and changes as we work. Git considers each
commit change point or "save point". It is a point in the project you can go back to if you find
a bug, or want to make a change.

When we commit, we should always include a message.

By adding clear messages to each commit, it is easy for yourself (and others) to see what has
changed and when.

Example
git commit -m "First release of Hello World!"
[master (root-commit) 221ec6e] First release of Hello World!
3 files changed, 26 insertions(+)
create mode 100644 README.md
create mode 100644 bluestyle.css
create mode 100644 index.html

The commit command performs a commit, and the -m "message" adds a message.

The Staging Environment has been committed to our repo, with the message:
"First release of Hello World!"

Git Commit without Stage

Sometimes, when you make small changes, using the staging environment seems like a waste
of time. It is possible to commit changes directly, skipping the staging environment. The -a
option will automatically stage every changed, already tracked file.

Let's add a small update to index.html:

Example
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<linkrel="stylesheet"href="bluestyle.css">
</head>
<body>

99 | P a g e
<h1>Hello world!</h1>
<p>This is the first file in my new Git Repo.</p>
<p>A new line in our file!</p>

</body>
</html>

And check the status of our repository. But this time, we will use the --short option to see the
changes in a more compact way:

Example
git status --short
M index.html

Git Help
If you are having trouble remembering commands or options for commands, you can use Git
help.

There are a couple of different ways you can use the help command in command line:

 git command -help- See all the available options for the specific command
 git help --all- See all possible commands

Let's go over the different commands.

Git -help See Options for a Specific Command

Any time you need some help remembering the specific option for a command, you can use
git command -help:

Example
git commit -help
usage: git commit [] [--] ...

-q, --quiet suppress summary after successful commit

-v, --verbose show diff in commit message template

Commit message options

-F, --file read message from file
--author override author for commit
--date override date for commit
-m, --message
commit message
-c, --reedit-message
reuse and edit message from specified commit
-C, --reuse-message
reuse message from specified commit
--fixup use autosquash formatted message to fixup specified commit

100 | P a g e
 --squash use autosquash formatted message to squash specified commit
--reset-author the commit is authored by me now (used with -C/-c/--amend)
-s, --signoff add a Signed-off-by trailer
-t, --template
use specified template file
-e, --edit force edit of commit
--cleanup how to strip spaces and #comments from message
--status include status in commit message template
-S, --gpg-sign[=]
GPG sign commit

Commit contents options

-a, --all commit all changed files
-i, --include add specified files to index for commit
--interactive interactively add files
-p, --patch interactively add changes
-o, --only commit only specified files
-n, --no-verify bypass pre-commit and commit-msg hooks
--dry-run show what would be committed
--short show status concisely
--branch show branch information
--ahead-behind compute full ahead/behind values
--porcelain machine-readable output
--long show status in long format (default)
-z, --null terminate entries with NUL
--amend amend previous commit
--no-post-rewrite bypass post-rewrite hook
-u, --untracked-files[=]
show untracked files, optional modes: all, normal, no. (Default: all)
--pathspec-from-file
read pathspec from file
--pathspec-file-nul with --pathspec-from-file, pathspec elements are separated with NUL character

Note: You can also use --help instead of -help to open the relevant Git manual page

Git help --all See All Possible Commands

To list all possible commands, use the help --all command:

Warning: This will display a very long list of commands

Example
$ githelp --all
See 'git help ' to read about a specific subcommand

Main Porcelain Commands

add Add file contents to the index
am Apply a series of patches from a mailbox
archive Create an archive of files from a named tree
bisect Use binary search to find the commit that introduced a bug
branch List, create, or delete branches
bundle Move objects and refs by archive
checkout Switch branches or restore working tree files

101 | P a g e
 cherry-pick Apply the changes introduced by some existing commits
citool Graphical alternative to git-commit
clean Remove untracked files from the working tree
clone Clone a repository into a new directory
commit Record changes to the repository
describe Give an object a human readable name based on an available ref
diff Show changes between commits, commit and working tree, etc
fetch Download objects and refs from another repository
format-patch Prepare patches for e-mail submission
gcCleanup unnecessary files and optimize the local repository
gitk The Git repository browser
grep Print lines matching a pattern
gui A portable graphical interface to Git
init Create an empty Git repository or reinitialize an existing one
log Show commit logs
maintenance Run tasks to optimize Git repository data
merge Join two or more development histories together
mv Move or rename a file, a directory, or a symlink
notes Add or inspect object notes
pull Fetch from and integrate with another repository or a local branch
push Update remote refs along with associated objects
range-diff Compare two commit ranges (e.g. two versions of a branch)
rebase Reapply commits on top of another base tip
reset Reset current HEAD to the specified state
restore Restore working tree files
revert Revert some existing commits
rm Remove files from the working tree and from the index
shortlog Summarize 'git log' output
show Show various types of objects
sparse-checkout Initialize and modify the sparse-checkout
stash Stash the changes in a dirty working directory away
status Show the working tree status
submodule Initialize, update or inspect submodules
switch Switch branches
tag Create, list, delete or verify a tag object signed with GPG
worktree Manage multiple working trees

Ancillary Commands / Manipulators

config Get and set repository or global options
fast-export Git data exporter
fast-import Backend for fast Git data importers
filter-branch Rewrite branches
mergetool Run merge conflict resolution tools to resolve merge conflicts
pack-refs Pack heads and tags for efficient repository access
prune Prune all unreachable objects from the object database
reflog Manage reflog information
remote Manage set of tracked repositories
repack Pack unpacked objects in a repository
replace Create, list, delete refs to replace objects

Ancillary Commands / Interrogators

annotate Annotate file lines with commit information
blame Show what revision and author last modified each line of a file
bugreport Collect information for user to file a bug report
count-objects Count unpacked number of objects and their disk consumption
difftool Show changes using common diff tools
fsck Verifies the connectivity and validity of the objects in the database
gitweb Git web interface (web frontend to Git repositories)
help Display help information about Git
instaweb Instantly browse your working repository in gitweb

102 | P a g e
 merge-tree Show three-way merge without touching index
rerere Reuse recorded resolution of conflicted merges
show-branch Show branches and their commits
verify-commit Check the GPG signature of commits
verify-tag Check the GPG signature of tags
whatchanged Show logs with difference each commit introduces

Interacting with Others

archimport Import a GNU Arch repository into Git
cvsexportcommit Export a single commit to a CVS checkout
cvsimport Salvage your data out of another SCM people love to hate
cvsserver A CVS server emulator for Git
imap-send Send a collection of patches from stdin to an IMAP folder
p4 Import from and submit to Perforce repositories
quiltimport Applies a quilt patchset onto the current branch
request-pull Generates a summary of pending changes
send-email Send a collection of patches as emails
svn Bidirectional operation between a Subversion repository and Git

Low-level Commands / Manipulators

apply Apply a patch to files and/or to the index
checkout-index Copy files from the index to the working tree
commit-graph Write and verify Git commit-graph files
commit-tree Create a new commit object
hash-object Compute object ID and optionally creates a blob from a file
index-pack Build pack index file for an existing packed archive
merge-file Run a three-way file merge
merge-index Run a merge for files needing merging
mktag Creates a tag object
mktree Build a tree-object from ls-tree formatted text
multi-pack-index Write and verify multi-pack-indexes
pack-objects Create a packed archive of objects
prune-packed Remove extra objects that are already in pack files
read-tree Reads tree information into the index
symbolic-ref Read, modify and delete symbolic refs
unpack-objects Unpack objects from a packed archive
update-index Register file contents in the working tree to the index
update-ref Update the object name stored in a ref safely
write-tree Create a tree object from the current index

Low-level Commands / Interrogators

cat-file Provide content or type and size information for repository objects
cherry Find commits yet to be applied to upstream
diff-files Compares files in the working tree and the index
diff-index Compare a tree to the working tree or index
diff-tree Compares the content and mode of blobs found via two tree objects
for-each-ref Output information on each ref
for-each-repo Run a Git command on a list of repositories
get-tar-commit-id Extract commit ID from an archive created using git-archive
ls-files Show information about files in the index and the working tree
ls-remote List references in a remote repository
ls-tree List the contents of a tree object
merge-base Find as good common ancestors as possible for a merge
name-rev Find symbolic names for given revs
pack-redundant Find redundant pack files
rev-list Lists commit objects in reverse chronological order
rev-parse Pick out and massage parameters
show-index Show packed archive index
show-ref List references in a local repository
unpack-file Creates a temporary file with a blob's contents

103 | P a g e
 var Show a Git logical variable
verify-pack Validate packed Git archive files

Low-level Commands / Syncing Repositories

daemon A really simple server for Git repositories
fetch-pack Receive missing objects from another repository
http-backend Server side implementation of Git over HTTP
send-pack Push objects over Git protocol to another repository
update-server-info Update auxiliary info file to help dumb servers

Low-level Commands / Internal Helpers

check-attr Display gitattributes information
check-ignore Debug gitignore / exclude files
check-mailmap Show canonical names and email addresses of contacts
check-ref-format Ensures that a reference name is well formed
column Display data in columns
credential Retrieve and store user credentials
credential-cache Helper to temporarily store passwords in memory
credential-store Helper to store credentials on disk
fmt-merge-msg Produce a merge commit message
interpret-trailers Add or parse structured information in commit messages
mailinfo Extracts patch and authorship from a single e-mail message
mailsplit Simple UNIX mbox splitter program
merge-one-file The standard helper program to use with git-merge-index
patch-id Compute unique ID for a patch
sh-i18n Git's i18n setup code for shell scripts
sh-setup Common Git shell script setup code
stripspace Remove unnecessary whitespace

External commands
askyesno
credential-helper-selector
flow
lfs

Note: If you find yourself stuck in the list view, SHIFT + G to jump the end of the list, then q
to exit the view.

Git GitHub Getting Started

Edit Code in GitHub
In addition to being a host for Git content, GitHub has a very good code editor.

Let's try to edit the README.md file in GitHub. Just click the edit button:

104 | P a g e
Add some changes to the code, and then commit the changes. For now, we will "Commit
directly to the master branch".

Remember to add a description for the commit:

That is how you edit code directly in GitHub!

105 | P a g e
Pulling to Keep up-to-date with Changes
When working as a team on a project, it is important that everyone stays up to date.

Any time you start working on a project, you should get the most recent changes to your local
copy.

With Git, you can do that with pull.

pull is a combination of 2 different commands:

 fetch
 merge

Let's take a closer look into how fetch, merge, and pull works.

Git Fetch
fetch gets all the change history of a tracked branch/repo.

So, on your local Git, fetch updates to see what has changed on GitHub:

Example
git fetch origin
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 733 bytes | 3.00 KiB/s, done.
From https://github.com/w3schools-test/hello-world
e0b6038..d29d69f master -> origin/master

Now that we have the recent changes, we can check our status:

Example
git status
On branch master
Your branch is behind 'origin/master' by 1 commit, and can be fast-forwarded.
(use "git pull" to update your local branch)

nothing to commit, working tree clean

We are behind the origin/master by 1 commit. That should be the updated README.md, but lets
double check by viewing the log:

Example
git log origin/master
commit d29d69ffe2ee9e6df6fa0d313bb0592b50f3b853 (origin/master)

106 | P a g e
Author: w3schools-test <77673807+w3schools-test@users.noreply.github.com>
Date: Fri Mar 26 14:59:14 2021 +0100

Updated README.md with a line about GitHub

commit e0b6038b1345e50aca8885d8fd322fc0e5765c3b (HEAD -> master)

Merge: dfa79db 1f1584e
Author: w3schools-test
Date: Fri Mar 26 12:42:56 2021 +0100

merged with hello-world-images after fixing conflicts

...
...

That looks as expected, but we can also verify by showing the differences between our local
master and origin/master:

Example
gitdiff origin/master
diff --git a/README.md b/README.md
index 23a0122..a980c39 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,4 @@
Hello World repository for Git tutorial
This is an example repository for the Git tutoial on https://www.w3schools.com

-This repository is built step by step in the tutorial.

-
-It now includes steps for GitHub
+This repository is built step by step in the tutorial.
\ No newline at end of file

That looks precisely as expected! Now we can safely merge.

Git Merge
merge combines the current branch, with a specified branch.

We have confirmed that the updates are as expected, and we can merge our current branch
(master) with origin/master:

Example
git merge origin/master
Updating e0b6038..d29d69f
Fast-forward
README.md | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)

Check our status again to confirm we are up to date:

107 | P a g e
Example
git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

There! Your local git is up to date!

Git Pull
But what if you just want to update your local repository, without going through all those
steps?

pull is a combination of fetch and merge. It is used to pull all changes from a remote repository
into the branch you are working on.

Make another change to the Readme.md file on GitHub.

Use pull to update our local Git:

Example
git pull origin
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 794 bytes | 1024 bytes/s, done.
From https://github.com/w3schools-test/hello-world
a7cdd4b..ab6b4ed master -> origin/master
Updating a7cdd4b..ab6b4ed
Fast-forward

108 | P a g e
README.md | 2 ++
1 file changed, 2 insertions(+)

That is how you keep your local Git up to date from a remote repository. In the next chapter,
we will look closer at how push works on GitHub.

Git Push to GitHub

Push Changes to GitHub
Let's try making some changes to our local git and pushing them to GitHub.

Example
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" href="bluestyle.css">
</head>
<body>

<h1>Hello world!</h1>
<div><imgsrc="img_hello_world.jpg" alt="Hello World from Space" style="width:100%;max-
width:640px"></div>
<p>This is the first file in my new Git Repo.</p>
<p>This line is here to show how merging works.</p>
<div><imgsrc="img_hello_git.jpg" alt="Hello Git" style="width:100%;max-width:640px"></div>

</body>
</html>

Commit the changes:

Example
git commit -a -m "Updated index.html. Resized image"
[master e7de78f] Updated index.html. Resized image
1 file changed, 1 insertion(+), 1 deletion(-)

And check the status:

Example
git status
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
(use "git push" to publish your local commits)

nothing to commit, working tree clean

Now push our changes to our remote origin:

109 | P a g e
Example
git push origin
Enumerating objects: 9, done.
Counting objects: 100% (8/8), done.
Delta compression using up to 16 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 578 bytes | 578.00 KiB/s, done.
Total 5 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/w3schools-test/hello-world.git
5a04b6f..facaeae master -> master

Go to GitHub, and confirm that the repository has a new commit:

Now, we are going to start working on branches on GitHub.

Git GitHub Branch

Create a New Branch on GitHub
On GitHub, access your repository and click the "master" branch button.

There you can create a new Branch. Type in a descriptive name, and click Create branch:

110 | P a g e
The branch should now be created and active. You can confirm which branch you are working
on by looking at the branch button. See that it now says "html-skeleton" instead of "main"?

Start working on an existing file in this branch. Click the "index.html" file and start editing:

111 | P a g e
After you have finished editing the file, you can click the "Preview changes" tab to see the
changes you made highlighted:

If you are happy with the change, add a comment that explains what you did, and click
Commit changes.

112 | P a g e
Git Pull Branch from GitHub
Pulling a Branch from GitHub
Now continue working on our new branch in our local Git.

Letspull from our GitHub repository again so that our code is up-to-date:

Example
gitpull
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 851 bytes | 9.00 KiB/s, done.
From https://github.com/w3schools-test/hello-world
* [new branch] html-skeleton -> origin/html-skeleton
Already up to date.

Now our main branch is up todate. And we can see that there is a new branch available on
GitHub.

Do a quick status check:

Example
git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

And confirm which branches we have, and where we are working at the moment:

Example
git branch
* master

So, we do not have the new branch on our local Git. But we know it is available on GitHub. So
we can use the -a option to see all local and remote branches:

Example
git branch -a
* master
remotes/origin/html-skeleton
remotes/origin/master

Note:branch -r is for remote branches only.

We see that the branch html-skeleton is available remotely, but not on our local git. Lets check
it out:

113 | P a g e
Example
git checkout html-skeleton
Switched to a new branch 'html-skeleton'
Branch 'html-skeleton' set up to track remote branch 'html-skeleton' from 'origin'.

And check if it is all up to date:

Example
gitpull
Already up to date.

Which branches do we have now, and where are we working from?

Example
git branch
* html-skeleton
master

Now, open your favourite editor and confirm that the changes from the GitHub branch
carried over.

That is how you pull a GitHub branch to your local Git.

Git Push Branch to GitHub

Push a Branch to GitHub
Let's try to create a new local branch, and push that to GitHub.

Start by creating a branch, like we did earlier:

Example
git checkout -b update-readme
Switched to a new branch 'update-readme'

And we make some changes to the README.md file. Just add a new line.

So now we check the status of the current branch.

Example
git status
On branch update-readme
Changes not staged for commit:
(use "git add ..." to update what will be committed)
(use "git restore ..." to discard changes in working directory)
modified: README.md

no changes added to commit (use "git add" and/or "git commit -a")

114 | P a g e
We see that README.md is modified but not added to the Staging Environment:

Example
gitadd README.md

Check the status of the branch:

Example
git status
On branch update-readme
Changes to be committed:
(use "git restore --staged ..." to unstage)
modified: README.md

We are happy with our changes. So we will commit them to the branch:

Example
git commit -m "Updated readme for GitHub Branches"
[update-readme 836e5bf] Updated readme for GitHub Branches
1 file changed, 1 insertion(+)

Now push the branch from our local Git repository, to GitHub, where everyone can see the
changes:

Example
git push origin update-readme
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 16 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 366 bytes | 366.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
remote:
remote: Create a pull request for 'update-readme' on GitHub by visiting:
remote: https://github.com/w3schools-test/hello-world/pull/new/update-readme
remote:
To https://github.com/w3schools-test/hello-world.git
* [new branch] update-readme -> update-readme

Go to GitHub, and confirm that the repository has a new branch:

115 | P a g e
In GitHub, we can now see the changes and merge them into the master branch if we approve
it.

If you click the "Compare & pull request", you can go through the changes made and new
files added:

116 | P a g e
Note: This comparison shows both the changes from update-readme and html-skeleton because
we created the new branch FROM html-skeleton.

If the changes look good, you can go forward, creating a pull request:

117 | P a g e
A pull request is how you propose changes. You can ask some to review your changes or pull
your contribution and merge it into their branch.

Since this is your own repository, you can merge your pull request yourself:

118 | P a g e
The pull request will record the changes, which means you can go through them later to
figure out the changes made.

The result should be something like this:

119 | P a g e
To keep the repo from getting overly complicated, you can delete the now unused branch by
clicking "Delete branch".

An after you confirm that the changes from the previous branch were included, delete that as
well:

120 | P a g e
CSS Tutorial
CSS tutorial or CSS 3 tutorial provides basic and advanced concepts of CSS technology.
Our CSS tutorial is developed for beginners and professionals. The major points of CSS are
given below:

 CSS stands for Cascading Style Sheet.

 CSS is used to design HTML tags.
 CSS is a widely used language on the web.
 HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.

CSS Example with CSS Editor

In this tutorial, you will get a lot of CSS examples, you can edit and run these examples with
our online CSS editor tool.

1. <!DOCTYPE>
2. <html>
3. <head>
4. <style>
5. h1{
6. color:white;
7. background-color:red;
8. padding:5px;
9. }
10. p{
11. color:blue;
12. }
13. </style>
14. </head>

121 | P a g e
 15. <body>
16. <h1>Write Your First CSS Example</h1>
17. <p>This is Paragraph.</p>
18. </body>
19. </html>

Test it Now

Output:

Write Your First CSS Example

This is Paragraph.

What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
the look and formatting of a document written in markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user
interfaces. It can also be used with any kind of XML documents including plain XML, SVG
and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for
web applications and user interfaces for many mobile applications.

What does CSS do

 You can add new looks to your old HTML documents.
 You can completely change the look of your website with only a few changes in CSS
code.

Why use CSS

These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size had
to be repeated on every web page. This was a very long process. For example: If you are
developing a large website where fonts and color information are added on every single page,
it will be become a long and expensive process. CSS was created to solve this problem. It
was a W3C recommendation.

122 | P a g e
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.

CSS Syntax
A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations separated by
a semicolon. For the above example, there are two declarations:

1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.

Selector{Property1: value1; Property2: val

ue2; ..........;} CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS

123 | P a g e
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.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p>This style will be applied on every paragraph.</p>
13. <p id="para1">Me too!</p>
14. <p>And me!</p>
15. </body>
16. </html>

Test it Now

Output:

This style will be applied on every paragraph.

Me too!

And me!

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.

124 | P a g e
Let?s take an example with the id "para1".

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. #para1 {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <p id="para1">Hello Javatpoint.com</p>
13. <p>This paragraph will not be affected.</p>
14. </body>
15. </html>

Test it Now

Output:

Hello Javatpoint.com

This paragraph will not be affected.

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.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is blue and center-aligned.</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>

125 | P a g e
 14. </body>
15. </html>

Test it Now

Output:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.

Let's see an example.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.center {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1 class="center">This heading is not affected</h1>
13. <p class="center">This paragraph is blue and center-aligned.</p>
14. </body>
15. </html>

Test it Now

Output:

This heading is not affected

This paragraph is blue and center-aligned.

4) CSS Universal Selector

126 | P a g e
The universal selector is used as a wildcard character. It selects all the elements on the pages.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. * {
6. color: green;
7. font-size: 20px;
8. }
9. </style>
10. </head>
11. <body>
12. <h2>This is heading</h2>
13. <p>This style will be applied on every paragraph.</p>
14. <p id="para1">Me too!</p>
15. <p>And me!</p>
16. </body>
17. </html>

Test it Now

Output:

This is heading

This style will be applied on every paragraph.

Me too!

And me!

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.

1. h1 {
2. text-align: center;
3. color: blue;
4. }
5. h2 {
6. text-align: center;

127 | P a g e
 7. color: blue;
8. }
9. p {
10. text-align: center;
11. color: blue;
12. }

As you can see, you need to define CSS properties for all the elements. It can be grouped in
following ways:

1. h1,h2,p {
2. text-align: center;
3. color: blue;
4. }

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

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1, h2, p {
6. text-align: center;
7. color: blue;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. <h2>Hello Javatpoint.com (In smaller font)</h2>
14. <p>This is a paragraph.</p>
15. </body>
16. </html>

Output:

Hello Javatpoint.com
Hello Javatpoint.com (In smaller font)

This is a paragraph.

How to add CSS

CSS is added to HTML pages to format the document according to information in the style
sheet. There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS

128 | P a g e
 3. External CSS

1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.

For example:

1. <p style="color:blue">Hello CSS</p>

For more visit here: Inline CSS

2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements
of the page. It is written inside the style tag within head section of html.

For example:

1. <style>
2. p{color:blue}
3. </style>

For more visit here: Internal CSS

3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS
code in a css file. Its extension must be .css for example style.css.

For example:

1. p{color:blue}

You need to link this style.css file to your html pages like this:

1. <link rel="stylesheet" type="text/css" href="style.css">

The link tag must be used inside head section of html.

129 | P a g e
Inline CSS
We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method
mitigates some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Syntax:

1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>

Example:

1. <h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>

2. <p>This paragraph is not affected.</p>

Output:

Inline CSS is applied on this heading.

This paragraph is not affected.

Disadvantages of Inline CSS

 You cannot use quotations within inline CSS. If you use quotations the browser will
interpret this as an end of your style value.
 These styles cannot be reused anywhere else.
 These styles are tough to be edited because they are not stored at a single place.
 It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
 Inline CSS does not provide browser cache advantages.

Internal CSS
The internal style sheet is used to add a unique style for a single document. It is defined in
<head> section of the HTML page inside the <style> tag.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {

130 | P a g e
 6. background-color: linen;
7. }
8. h1 {
9. color: red;
10. margin-left: 80px;
11. }
12. </style>
13. </head>
14. <body>
15. <h1>The internal style sheet is applied on this heading.</h1>
16. <p>This paragraph will not be affected.</p>
17. </body>
18. </html>

External CSS
The external style sheet is generally used when you want to make changes on multiple pages.
It is ideal for this condition because it facilitates you to change the look of the entire web site
by changing just one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

Example:

1. <head>
2. <link rel="stylesheet" type="text/css" href="mystyle.css">
3. </head>

The external style sheet may be written in any text editor but must be saved with a .css
extension. This file should not contain HTML elements.

Let's take an example of a style sheet file named "mystyle.css".

File: mystyle.css

1. body {
2. background-color: lightblue;
3. }
4. h1 {
5. color: navy;
6. margin-left: 20px;
7. }

Note: You should not use a space between the property value and the unit. For example: It
should be margin-left:20px not margin-left:20 px.

CSS Comments
131 | P a g e
CSS comments are generally written to explain your code. It is very helpful for the users who
reads your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*............*/ .

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. color: blue;
7. /* This is a single-line comment */
8. text-align: center;
9. }
10. /* This is
11. a multi-line
12. comment */
13. </style>
14. </head>
15. <body>
16. <p>Hello Javatpoint.com</p>
17. <p>This statement is styled with CSS.</p>
18. <p>CSS comments are ignored by the browsers and not shown in the output.</p>
19. </body>
20. </html>

Output:

Hello Javatpoint.com

This statement is styled with CSS.

CSS comments are ignored by the browsers and not shown in the output.

CSS Background
CSS background property is used to define the background effects on element. There are 5
CSS background properties that affects the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

132 | P a g e
1) CSS background-color
The background-color property is used to specify the background color of the element.

You can set the background color like this:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h2,p{
6. background-color: #b0d4de;
7. }
8. </style>
9. </head>
10. <body>
11. <h2>My first CSS page.</h2>
12. <p>Hello Javatpoint. This is an example of CSS background-color.</p>
13. </body>
14. </html>

Output:

My first CSS page.

Hello Javatpoint. This is an example of CSS background-color.

2) CSS background-image
The background-image property is used to set an image as a background of an element. By
default the image covers the entire element. You can set the background image for a page like
this.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("paper1.gif");
7. margin-left:100px;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>

133 | P a g e
 13. </body>
14. </html>

Note: The background image should be chosen according to text color. The bad combination
of text and background image may be a cause of poor designed and not readable webpage.

3) CSS background-repeat
By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated only horizontally or vertically.

The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-x;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

background-repeat: repeat-y;

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. body {
6. background-image: url("gradient_bg.png");
7. background-repeat: repeat-y;
8. }
9. </style>
10. </head>
11. <body>
12. <h1>Hello Javatpoint.com</h1>
13. </body>
14. </html>

134 | P a g e
4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or
scroll with the rest of the page in browser window. If you set fixed the background image
then the image will not move during scrolling in the browser. Let?s take an example with
fixed background image.

1. background: white url('bbb.gif');

2. background-repeat: no-repeat;
3. background-attachment: fixed;

5) CSS background-position
The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right

1. background: white url('good-morning.jpg');

2. background-repeat: no-repeat;
3. background-attachment: fixed;
4. background-position: center;

CSS Border
The CSS border is a shorthand property used to set the border on an element.

The CSS border properties are use to specify the style, color and size of the border of an
element. The CSS border properties are given below

 border-style
 border-color
 border-width
 border-radius

1) CSS border-style

135 | P a g e
The Border style property is used to specify the border type which you want to display on the
web page.

There are some border style values which are used with border-style property to define a
border.

Value Description

none It doesn't define any border.

dotted It is used to define a dotted border.

dashed It is used to define a dashed border.

solid It is used to define a solid border.

double It defines two borders wIth the same border-width value.

groove It defines a 3d grooved border. effect is generated according to border-color value.

ridge It defines a 3d ridged border. effect is generated according to border-color value.

inset It defines a 3d inset border. effect is generated according to border-color value.

outset It defines a 3d outset border. effect is generated according to border-color value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.none {border-style: none;}
6. p.dotted {border-style: dotted;}
7. p.dashed {border-style: dashed;}
8. p.solid {border-style: solid;}
9. p.double {border-style: double;}
10. p.groove {border-style: groove;}
11. p.ridge {border-style: ridge;}
12. p.inset {border-style: inset;}
13. p.outset {border-style: outset;}
14. p.hidden {border-style: hidden;}
15. </style>
16. </head>
17. <body>
18. <p class="none">No border.</p>
19. <p class="dotted">A dotted border.</p>
20. <p class="dashed">A dashed border.</p>
21. <p class="solid">A solid border.</p>
22. <p class="double">A double border.</p>
23. <p class="groove">A groove border.</p>
24. <p class="ridge">A ridge border.</p>
25. <p class="inset">An inset border.</p>
26. <p class="outset">An outset border.</p>

136 | P a g e
 27. <p class="hidden">A hidden border.</p>
28. </body>
29. </html>

Output:

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.

2) CSS border-width
The border-width property is used to set the border's width. It is set in pixels. You can also
use the one of the three pre-defined values, thin, medium or thick to set the width of the
border.

Note: The border-width property is not used alone. It is always used with other border properties like
"border-style" property to set the border first otherwise it will not work.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.one {
6. border-style: solid;
7. border-width: 5px;
8. }
9. p.two {
10. border-style: solid;
11. border-width: medium;

137 | P a g e
 12. }
13. p.three {
14. border-style: solid;
15. border-width: 1px;
16. }
17. </style>
18. </head>
19. <body>
20. <p class="one">Write your text here.</p>
21. <p class="two">Write your text here.</p>
22. <p class="three">Write your text here.</p>
23. </body>
24. </html>

3) CSS border-color
There are three methods to set the color of the border.

 Name: It specifies the color name. For example: "red".

 RGB: It specifies the RGB value of the color. For example: "rgb(255,0,0)".
 Hex: It specifies the hex value of the color. For example: "#ff0000".

There is also a border color named "transparent". If the border color is not set it is inherited
from the color property of the element.

Note: The border-color property is not used alone. It is always used with other border properties like
"border-style" property to set the border first otherwise it will not work.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.one {
6. border-style: solid;
7. border-color: red;
8. }
9. p.two {
10. border-style: solid;
11. border-color: #98bf21;
12. }
13. </style>
14. </head>
15. <body>
16. <p class="one">This is a solid red border</p>
17. <p class="two">This is a solid green border</p>
18. </body>
19. </html>

CSS border-collapse property

138 | P a g e
This CSS property is used to set the border of the table cells and specifies whether the table
cells share the separate or common border.

This property has two main values that are separate and collapse. When it is set to the value
separate, the distance between the cells can be defined using the border-spacing property.
When the border-collapse is set to the value collapse, then the inset value of border-style
property behaves like groove, and the outset value behaves like ridge.

Syntax

1. border-collapse: separate | collapse | initial | inherit;

The values of this CSS property are defined as follows.

Property Values

separate: It is the default value that separates the border of the table cell. Using this value,
each cell will display its own border.

collapse: This value is used to collapse the borders into a single border. Using this, two
adjacent table cells will share a border. When this value is applied, the border-spacing
property does not affect.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's understand this CSS property by using some examples. In the first example, we are
using the separate value of the border-collapse property. In the second example, we are
using the collapse value of the border-collapse property.

Example - Using separate value

With this value, we can use the border-spacing property to set the distance between the
adjacent table cells.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> border-collapse property </title>
6. <style>
7. table{
8. border: 2px solid blue;
9. text-align: center;
10. font-size: 20px;
11. width: 80%;
12. height: 50%;
13. }
14. th{

139 | P a g e
 15. border: 5px solid red;
16. background-color: yellow;
17. }
18. td{
19. border: 5px solid violet;
20. background-color: cyan;
21. }
22. #t1 {
23. border-collapse: separate;
24. }
25. </style>
26. </head>
27.
28. <body>
29.
30. <h1> The border-collapse Property </h1>
31. <h2> border-collapse: separate; </h2>
32. <table id = "t1">
33. <tr>
34. <th> First_Name </th>
35. <th> Last_Name </th>
36. <th> Subject </th>
37. <th> Marks </th>
38. </tr>
39. <tr>
40. <td> James </td>
41. <td> Gosling </td>
42. <td> Maths </td>
43. <td> 92 </td>
44. </tr>
45. <tr>
46. <td> Alan </td>
47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
52. <td> Sam </td>
53. <td> Mendes </td>
54. <td> Maths </td>
55. <td> 82 </td>
56. </tr>
57. </table>
58. </body>
59.
60. </html>

Test it Now

Output

140 | P a g e
Example - Using collapse property

The border-spacing and border-radius properties cannot be used with this value.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> border-collapse property </title>
6. <style>
7. table{
8. border: 2px solid blue;
9. text-align: center;
10. font-size: 20px;
11. width: 80%;
12. height: 50%;
13. }
14. th{
15. border: 5px solid red;
16. background-color: yellow;
17. }
18. td{
19. border: 5px solid violet;
20. background-color: cyan;
21. }
22. #t1{
23. border-collapse: collapse;
24. }
25. </style>
26. </head>
27.
28. <body>
29.
30. <h1> The border-collapse Property </h1>
31. <h2> border-collapse: collapse; </h2>
32. <table id = "t1">
33. <tr>
34. <th> First_Name </th>
35. <th> Last_Name </th>
36. <th> Subject </th>
37. <th> Marks </th>
38. </tr>
39. <tr>
40. <td> James </td>
41. <td> Gosling </td>
42. <td> Maths </td>
43. <td> 92 </td>
44. </tr>
45. <tr>
46. <td> Alan </td>

141 | P a g e
 47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
52. <td> Sam </td>
53. <td> Mendes </td>
54. <td> Maths </td>
55. <td> 82 </td>
56. </tr>
57. </table>
58. </body>
59. </html>

Test it Now

Output

CSS border-spacing property

This CSS property is used to set the distance between the borders of the adjacent cells in the
table. It applies only when the border-collapse property is set to separate. There will not be
any space between the borders if the border-collapse is set to collapse.

It can be defined as one or two values for determining the vertical and horizontal spacing.

 When only one value is specified, then it sets both horizontal and vertical spacing.
 When we use the two-value syntax, then the first one is used to set the horizontal spacing (i.e.,
the space between the adjacent columns), and the second value sets the vertical spacing (i.e.,
the space between the adjacent rows).

Syntax

1. border-spacing: length | initial | inherit;

Property Values

The values of this CSS property are defined as follows.

length: This value sets the distance between the borders of the adjacent table cells in px, cm,
pt, etc. Negative values are not allowed.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Let's understand this CSS property by using some examples. In the first example, we are
using the single value of the border-spacing property, and in the second example, we are

142 | P a g e
using two values of the border-spacing property.

Example

Here, we are using the single value of the border-spacing property. The border-collapse
property is set to separate, and the value of the border-spacing is set to 45px.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> border-spacing property </title>
6. <style>
7. table{
8. border: 2px solid blue;
9. text-align: center;
10. font-size: 20px;
11. background-color: lightgreen;
12. }
13. th{
14. border: 5px solid red;
15. background-color: yellow;
16. }
17. td{
18. border: 5px solid violet;
19. background-color: cyan;
20. }
21. #space{
22. border-collapse: separate;
23. border-spacing: 45px;
24. }
25. </style>
26. </head>
27.
28. <body>
29.
30. <h1> The border-spacing Property </h1>
31. <h2> border-spacing: 45px; </h2>
32. <table id = "space">
33. <tr>
34. <th> First_Name </th>
35. <th> Last_Name </th>
36. <th> Subject </th>
37. <th> Marks </th>
38. </tr>
39. <tr>
40. <td> James </td>
41. <td> Gosling </td>
42. <td> Maths </td>
43. <td> 92 </td>
44. </tr>
45. <tr>

143 | P a g e
 46. <td> Alan </td>
47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
52. <td> Sam </td>
53. <td> Mendes </td>
54. <td> Maths </td>
55. <td> 82 </td>
56. </tr>
57. </table>
58. </body>
59.
60. </html>

Output

Example

Here, we are using two values of the border-spacing property. The border-collapse property
is set to separate, and the value of the border-spacing is set to 20pt 1em. The first value,
i.e., 20pt sets the horizontal spacing, and the value 1em set the vertical spacing.

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title> border-spacing property </title>
6. <style>
7. table{
8. border: 2px solid blue;
9. text-align: center;
10. font-size: 20px;
11. background-color: lightgreen;
12. }
13. th{
14. border: 5px solid red;
15. background-color: yellow;
16. }
17. td{
18. border: 5px solid violet;
19. background-color: cyan;
20. }
21. #space{
22. border-collapse: separate;
23. border-spacing: 20pt 1em;
24. }
25. </style>
26. </head>

144 | P a g e
 27.
28. <body>
29.
30. <h1> The border-spacing Property </h1>
31. <h2> border-spacing: 20pt 1em; </h2>
32. <table id = "space">
33. <tr>
34. <th> First_Name </th>
35. <th> Last_Name </th>
36. <th> Subject </th>
37. <th> Marks </th>
38. </tr>
39. <tr>
40. <td> James </td>
41. <td> Gosling </td>
42. <td> Maths </td>
43. <td> 92 </td>
44. </tr>
45. <tr>
46. <td> Alan </td>
47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
52. <td> Sam </td>
53. <td> Mendes </td>
54. <td> Maths </td>
55. <td> 82 </td>
56. </tr>
57. </table>
58. </body>
59.
60. </html>

CSS Display
CSS display is the most important property of CSS which is used to control the layout of the
element. It specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the
webpage is a rectangular box and the CSS property defines the behavior of that rectangular
box.

CSS Display default properties

default value inline
inherited no
animation supporting no

145 | P a g e
version css1
javascript syntax object.style.display="none"

Syntax
1. display:value;

CSS display values

There are following CSS display values which are commonly used.

1. display: inline;
2. display: inline-block;
3. display: block;
4. display: run-in;
5. display: none;

1) CSS display inline

The inline element takes the required width only. It doesn't force the line break so the flow of
text doesn't break in inline example.

The inline elements are:

 <span>
 <a>
 <em>
 <b> etc.

Let's see an example of CSS display inline.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello Javatpoint.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>

146 | P a g e
 16. </body>
17. </html>

Output:

Hello Javatpoint.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

2) CSS display inline-block

The CSS display inline-block element is very similar to inline element but the difference is
that you are able to set the width and height.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: inline-block;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello Javatpoint.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello Javatpoint.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

3) CSS display block

The CSS display block element takes as much as horizontal space as they can. Means the
block element takes the full available width. They make a line break before and after them.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p{
6. display: block;

147 | P a g e
 7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello Javatpoint.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>
14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello Javatpoint.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

4) CSS display run-in

This property doesn't work in Mozilla Firefox. These elements don't produce a specific box
by themselves.

 If the run-in box contains a bock box, it will be same as block.

 If the block box follows the run-in box, the run-in box becomes the first inline box of
the block box.
 If the inline box follows the run-in box, the run-in box becomes a block box.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. display: run-in;
7. }
8. </style>
9. </head>
10. <body>
11. <p>Hello Javatpoint.com</p>
12. <p>Java Tutorial.</p>
13. <p>SQL Tutorial.</p>

148 | P a g e
 14. <p>HTML Tutorial.</p>
15. <p>CSS Tutorial.</p>
16. </body>
17. </html>

Output:

Hello Javatpoint.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

5) CSS display none

The "none" value totally removes the element from the page. It will not take any space.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h1.hidden {
6. display: none;
7. }
8. </style>
9. </head>
10. <body>
11. <h1>This heading is visible.</h1>
12. <h1 class="hidden">This is not visible.</h1>
13. <p>You can see that the hidden heading does not contain any space.</p>
14. </body>
15. </html>

Output:

This heading is visible.

You can see that the hidden heading does not contain any space.

Other CSS display values

149 | P a g e
 Property-value Description
It is used to display an element as an block-level flex container. It is new
flex
in css3.
It is used to display an element as an inline-level flex container. It is new
inline-flex
in css3.
inline-table It displays an element as an inline-level table.
list-Item It makes the element behave like a <li> element.
table It makes the element behave like a <table> element.
table-caption It makes the element behave like a <caption> element.
table-column-
It makes the element behave like a <colgroup> element.
group
table-header-
It makes the element behave like a <thead> element.
group
table-footer-group It makes the element behave like a <tfoot> element.
table-row-group It makes the element behave like a <tbody> element.
table-cell It makes the element behave like a <td> element.
table-row It makes the element behave like a <tr> element.
table-column It makes the element behave like a <col> element.

CSS Cursor
It is used to define the type of mouse cursor when the mouse pointer is on the element. It
allows us to specify the cursor type, which will be displayed to the user. When a user hovers
on the link, then by default, the cursor transforms into the hand from a pointer.

Let's understand the property values of the cursor.

Values Usage
It is used to display the indication of the cursor of something that is to be
alias
created.
auto It is the default property in which the browser sets the cursor.
all-scroll It indicates the scrolling.
col-resize Using it, the cursor will represent that the column can be horizontally resized.
cell The cursor will represent that a cell or the collection of cells is selected.
context-
It indicates the availability of the context menu.
menu
default It indicates an arrow, which is the default cursor.
copy It is used to indicate that something is copied.
crosshair In it, the cursor changes to the crosshair or the plus sign.
It represents the east direction and indicates that the edge of the box is to be
e-resize
shifted towards right.
ew-resize It represents the east/west direction and indicates a bidirectional resize cursor.
n-resize It represents the north direction that indicates that the edge of the box is to be

150 | P a g e
 shifted to up.
It represents the north/east direction and indicates that the edge of the box is to
ne-resize
be shifted towards up and right.
move It indicates that something is to be shifted.
It is in the form of a question mark or ballon, which represents that help is
help
available.
None It is used to indicate that no cursor is rendered for the element.
No-drop It is used to represent that the dragged item cannot be dropped here.
s-resize It indicates an edge box is to be moved down. It indicates the south direction.
Row-resize It is used to indicate that the row can be vertically resized.
It represents the south/east direction, which indicates that an edge box is to be
Se-resize
moved down and right.
It represents south/west direction and indicates that an edge of the box is to be
Sw-resize
shifted towards down and left.
Wait It represents an hourglass.
<url> It indicates the source of the cursor image file.
It indicates the west direction and represents that the edge of the box is to be
w-resize
shifted left.
Zoom-in It is used to indicate that something can be zoomed in.
Zoom-out It is used to indicate that something can be zoomed out.

The illustration of using the above values of cursor property is given below:

Example

1. <html>
2. <head>
3. </head>
4. <style>
5. body{
6. background-color: lightblue;
7. color:green;
8. text-align: center;
9. font-size: 20px;
10. }
11.
12. </style>
13.
14. <body>
15. <p>Move your mouse over the below words for the cursor change.</p>
16. <div style = "cursor:alias">alias Value</div>
17. <div style = "cursor:auto">auto Value</div>
18. <div style = "cursor:all-scroll">all-scroll value</div>
19. <div style = "cursor:col-resize">col-resize value</div>
20. <div style = "cursor:crosshair">Crosshair</div>
21. <div style = "cursor:default">Default value</div>

151 | P a g e
 22. <div style = "cursor:copy">copy value</div>
23. <div style = "cursor:pointer">Pointer</div>
24. <div style = "cursor:move">Move</div>
25. <div style = "cursor:e-resize">e-resize</div>
26. <div style = "cursor:ew-resize">ew-resize</div>
27. <div style = "cursor:ne-resize">ne-resize</div>
28. <div style = "cursor:nw-resize">nw-resize</div>
29. <div style = "cursor:n-resize">n-resize</div>
30. <div style = "cursor:se-resize">se-resize</div>
31. <div style = "cursor:sw-resize">sw-resize</div>
32. <div style = "cursor:s-resize">s-resize</div>
33. <div style = "cursor:w-resize">w-resize</div>
34. <div style = "cursor:text">text</div>
35. <div style = "cursor:wait">wait</div>
36. <div style = "cursor:help">help</div>
37. <div style = "cursor:progress">Progress</div>
38. <div style = "cursor:no-drop">no-drop</div>
39. <div style = "cursor:not-allowed">not-allowed</div>
40. <div style = "cursor:vertical-text">vertical-text</div>
41. <div style = "cursor:zoom-in">Zoom-in</div>
42. <div style = "cursor:zoom-out">Zoom-out</div>
43. </body>
44. </html>

CSS Buttons
In HTML, we use the button tag to create a button, but by using CSS properties, we can style
the buttons. Buttons help us to create user interaction and event processing. They are one of
the widely used elements of web pages.

During the form submission, to view or to get some information, we generally use buttons.

Let's see the basic styling in buttons.

Basic styling in Buttons

There are multiple properties available that are used to style the button element. Let's discuss
them one by one.

background-color
As we have discussed earlier, this property is used for setting the background color of the
button element.

Syntax

1. element {
2. // background-color style

152 | P a g e
 3. }

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1 {
18. background-color: red;
19. }
20. .b2 {
21. background-color: blue;
22. }
23. .b3 {
24. background-color: violet;
25. }
26. </style>
27. </head>
28.
29. <body>
30. <h1>The background-color property.</h1>
31. <button class="b1">Red color button</button>
32. <button class="b2">Blue color button</button>
33. <button class="b3">Violet color button</button>
34. </body>
35. </html>

border
It is used to set the border of the button. It is the shorthand property for border-width,
border-color, and border-style.

Syntax

1. element {
2. // border style

153 | P a g e
 3. }

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1 {
18. background-color: red;
19. border:none;
20. }
21. .b2 {
22. background-color: blue;
23. border:5px brown solid;
24. }
25. .b3 {
26. background-color: yellow;
27. color:black;
28. border:5px red groove;
29. }
30. .b4{
31. background-color:orange;
32. border: 5px red dashed;
33. }
34. .b5{
35. background-color: gray;
36. border: 5px black dotted;
37. }
38. .b6{
39. background-color: lightblue;
40. border:5px blue double;
41. }
42. </style>
43. </head>
44.
45. <body>
46. <h1>The border property</h1>

154 | P a g e
 47. <button class="b1">none</button>
48. <button class="b2">solid</button>
49. <button class="b3">groove</button>
50. <button class="b4">dashed</button>
51. <button class="b5">dotted</button>
52. <button class="b6">double</button>
53.
54. </body>
55. </html>

border-radius
It is used to make the rounded corners of the button. It sets the border radius of the button.

Syntax

1. element {
2. // border-radius property
3. }

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1 {
18. background-color: red;
19. border:none;
20. }
21. .b2 {
22. background-color: blue;
23. border:5px brown solid;
24. border-radius: 7px;
25. }
26. .b3 {
27. background-color: yellow;

155 | P a g e
 28. color:black;
29. border:5px red groove;
30. border-radius: 10px;
31. }
32. .b4{
33. background-color:orange;
34. border: 5px red dashed;
35. border-radius: 20px;
36. }
37. .b5{
38. background-color: gray;
39. border: 5px black dotted;
40. border-radius: 30px;
41. }
42. .b6{
43. background-color: lightblue;
44. border:5px blue double;
45. border-radius: 25px;
46. }
47. </style>
48. </head>
49.
50. <body>
51. <h1>The border-radius property</h1>
52. <h2>Below there is the border name and border-radius</h2>
53. <button class="b1">none</button>
54. <button class="b2">solid 7px</button>
55. <button class="b3">groove 10px</button>
56. <button class="b4">dashed 20px</button>
57. <button class="b5">dotted 30px</button>
58. <button class="b6">double 25px</button>
59.
60. </body>
61. </html>

box-shadow
As its name implies, it is used to create the shadow of the button box. It is used to add the
shadow to the button. We can also create a shadow during the hover on the button.

Syntax

1. box-shadow: [horizontal offset] [vertical offset] [blur radius]

2. [optional spread radius] [color];

Example

1. <!DOCTYPE html>
2. <html>

156 | P a g e
 3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1{
18. background-color: lightblue;
19. border:5px red double;
20. border-radius: 25px;
21. color:black;
22. box-shadow : 0 8px 16px 0 black,
23. 0 6px 20px 0 rgba(0, 0, 0, 0.19);
24. }
25. .b2{
26. background-color: lightblue;
27. border:5px red dotted;
28. color:black;
29. border-radius: 25px;
30. }
31. .b2:hover{
32. box-shadow : 0 8px 16px 0 black,
33. 0 6px 20px 0 rgba(0, 0, 0, 0.19);
34. }
35. </style>
36. </head>
37.
38. <body>
39. <button class="b1">Shadow on button</button>
40. <button class="b2">Box-shadow on hover</button>
41. </body>
42. </html>

padding
It is used to set the button padding.

Syntax

1. element {
2. // padding style

157 | P a g e
 3. }

Let's understand it using an illustration.

Example

1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5. <title>
6. button background Color
7. </title>
8.
9. <style>
10. body{
11. text-align: center;
12. }
13. button {
14. color:lightgoldenrodyellow;
15. font-size: 30px;
16. }
17. .b1 {
18. background-color: red;
19. border:none;
20. padding: 16px;
21. }
22. .b2 {
23. background-color: blue;
24. border:5px brown solid;
25. padding:15px 30px 25px 40px;
26. }
27. .b3 {
28. background-color: yellow;
29. color:black;
30. border:5px red groove;
31. padding-top:30px;
32. }
33. .b4{
34. background-color:orange;
35. border: 5px red dashed;
36. padding-bottom:40px;
37. }
38. .b5{
39. background-color: gray;
40. border: 5px black dotted;
41. padding-left: 40px;
42. }
43. .b6{
44. background-color: lightblue;

158 | P a g e
 45. border:5px blue double;
46. padding-right: 40px;;
47. }
48. </style>
49. </head>
50.
51. <body>
52. <h1>The padding property</h1>
53. <button class="b1">none</button>
54. <button class="b2">solid</button>
55. <button class="b3">groove</button>
56. <button class="b4">dashed</button>
57. <button class="b5">dotted</button>
58. <button class="b6">double</button>
59.
60. </body>
61. </html>

CSS Line Height

The CSS line height property is used to define the minimal height of line boxes within the
element. It sets the differences between two lines of your content.

It defines the amount of space above and below inline elements. It allows you to set the
height of a line of independently from the font size.

CSS line-height values

There are some property values which are used with CSS line-height property.

value description
normal This is a default value. it specifies a normal line height.
It specifies a number that is multiplied with the current font size to set the line
number
height.
length It is used to set the line height in px, pt,cm,etc.
% It specifies the line height in percent of the current font.
initial It sets this property to its default value.
inherit It inherits this property from its parent element.

CSS line-height example

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. h3.small {

159 | P a g e
 6. line-height: 70%;
7. }
8. h3.big {
9. line-height: 200%;
10. }
11. </style>
12. </head>
13. <body>
14. <h3>
15. This is a heading with a standard line-height.<br>
16. This is a heading with a standard line-height.<br>
17. The default line height in most browsers is about 110% to 120%.<br>
18. </h3>
19. <h3 class="small">
20. This is a heading with a smaller line-height.<br>
21. This is a heading with a smaller line-height.<br>
22. This is a heading with a smaller line-height.<br>
23. This is a heading with a smaller line-height.<br>
24. </h3>
25. <h3 class="big">
26. This is a heading with a bigger line-height.<br>
27. This is a heading with a bigger line-height.<br>
28. This is a heading with a bigger line-height.<br>
29. This is a heading with a bigger line-height.<br>
30. </h3>
31. </body>
32. </html>

CSS Margin
CSS Margin property is used to define the space around elements. It is completely transparent
and doesn't have any background color. It clears an area around the element.

Top, bottom, left and right margin can be changed independently using separate properties.
You can also change all properties at once by using shorthand margin property.

There are following CSS margin properties:

CSS Margin Properties

Property Description

margin This property is used to set all the properties in one declaration.

margin-left it is used to set left margin of an element.

margin-right It is used to set right margin of an element.

160 | P a g e
margin-top It is used to set top margin of an element.

margin-bottom It is used to set bottom margin of an element.

CSS Margin Values

These are some possible values for margin property.

Value Description

auto This is used to let the browser calculate a margin.

length It is used to specify a margin pt, px, cm, etc. its default value is 0px.

% It is used to define a margin in percent of the width of containing element.

inherit It is used to inherit margin from parent element.

Note: You can also use negative values to overlap content.

CSS margin Example

You can define different margin for different sides for an element.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin-top: 50px;
10. margin-bottom: 50px;
11. margin-right: 100px;
12. margin-left: 100px;
13. }
14. </style>
15. </head>
16. <body>
17. <p>This paragraph is not displayed with specified margin. </p>
18. <p class="ex">This paragraph is displayed with specified margin.</p>
19. </body>
20. </html>

Output:

This paragraph is not displayed with specified margin.

161 | P a g e
 This paragraph is displayed with specified margin.

Margin: Shorthand Property

CSS shorthand property is used to shorten the code. It specifies all the margin properties in
one property.

There are four types to specify the margin property. You can use one of them.

1. margin: 50px 100px 150px 200px;

2. margin: 50px 100px 150px;
3. margin: 50px 100px;
4. margin 50px;

1) margin: 50px 100px 150px 200px;

It identifies that:

top margin value is 50px

right margin value is 100px

bottom margin value is 150px

left margin value is 200px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin: 50px 100px 150px 200px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>

162 | P a g e
 17. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified

margin.

2) margin: 50px 100px 150px;

It identifies that:

top margin value is 50px

left and right margin values are 100px

bottom margin value is 150px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin: 50px 100px 150px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>
17. </html>

Output:

163 | P a g e
This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

3) margin: 50px 100px;

It identifies that:

top and bottom margin values are 50px

left and right margin values are 100px

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p {
6. background-color: pink;
7. }
8. p.ex {
9. margin: 50px 100px;
10. }
11. </style>
12. </head>
13. <body>
14. <p>This paragraph is not displayed with specified margin. </p>
15. <p class="ex">This paragraph is displayed with specified margin.</p>
16. </body>
17. </html>

Output:

This paragraph is not displayed with specified margin.

This paragraph is displayed with specified margin.

164 | P a g e
UNIT-II
Frontend Development
Javascript basics

Learn JavaScript Tutorial

Our JavaScript Tutorial is designed for beginners and professionals both. JavaScript is used
to create client-side dynamic pages.

JavaScript is an object-based scripting language which is lightweight and cross-platform.

JavaScript is not a compiled language, but it is a translated language. The JavaScript

Translator (embedded in the browser) is responsible for translating the JavaScript code for
the web browser.

165 | P a g e
What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser. Since then, it has been adopted by all other graphical web
browsers. With JavaScript, users can build modern web applications to interact directly
without reloading the page every time. The traditional website uses js to provide several
forms of interactivity and simplicity.

Although, JavaScript has no connectivity with Java programming language. The name was
suggested and provided in the times when Java was gaining popularity in the market. In
addition to web browsers, databases such as CouchDB and MongoDB uses JavaScript as their
scripting and query language.

Features of JavaScript
There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending on
the operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than using
classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

History of JavaScript
In 1993, Mosaic, the first popular web browser, came into existence. In the year 1994,
Netscape was founded by Marc Andreessen. He realized that the web needed to become
more dynamic. Thus, a 'glue language' was believed to be provided to HTML to make web
designing easy for designers and part-time programmers. Consequently, in 1995, the
company recruited Brendan Eich intending to implement and embed Scheme programming
language to the browser. But, before Brendan could start, the company merged with Sun
Microsystems for adding Java into its Navigator so that it could compete with Microsoft over
the web technologies and platforms. Now, two languages were there: Java and the scripting
language. Further, Netscape decided to give a similar name to the scripting language as
Java's. It led to 'Javascript'. Finally, in May 1995, Marc Andreessen coined the first code of
Javascript named 'Mocha'. Later, the marketing team replaced the name with 'LiveScript'.
But, due to trademark reasons and certain other reasons, in December 1995, the language was
finally renamed to 'JavaScript'. From then, JavaScript came into existence.

Application of JavaScript
166 | P a g e
JavaScript is used to create interactive websites. It is mainly used for:

 Client-side validation,
 Dynamic drop-down menus,
 Displaying date and time,
 Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box
and prompt dialog box),
 Displaying clocks etc.

JavaScript Example

1. <script>
2. document.write("Hello JavaScript by JavaScript");
3. </script>

JavaScript Example
Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code:
within body tag, within head tag and external JavaScript file.

Let’s create the first JavaScript example.

1. <script type="text/javascript">
2. document.write("JavaScript is a simple language for javatpoint learners");
3. </script>

Test it Now

The script tag specifies that we are using JavaScript.

The text/javascript is the content type that provides information to the browser about the
data.

The document.write() function is used to display dynamic content through JavaScript. We

will learn about document object in detail later.

3 Places to put JavaScript code

1. Between the body tag of html
2. Between the head tag of html
3. In .js file (external javaScript)

1) JavaScript Example : code between the body tag

167 | P a g e
In the above example, we have displayed the dynamic content using JavaScript. Let’s see the
simple example of JavaScript that displays alert dialog box.

1. <script type="text/javascript">
2. alert("Hello Javatpoint");
3. </script>

2) JavaScript Example : code between the head tag

Let’s see the same example of displaying alert dialog box of JavaScript that is contained
inside the head tag.

In this example, we are creating a function msg(). To create function in JavaScript, you need
to write function with function_name as given below.

To call function, you need to work on event. Here we are using onclick event to call msg()
function.

1. <html>
2. <head>
3. <script type="text/javascript">
4. function msg(){
5. alert("Hello Javatpoint");
6. }
7. </script>
8. </head>
9. <body>
10. <p>Welcome to JavaScript</p>
11. <form>
12. <input type="button" value="click" onclick="msg()"/>
13. </form>
14. </body>
15. </html>

External JavaScript file

We can create external JavaScript file and embed it in many html page.

It provides code re usability because single JavaScript file can be used in several html pages.

An external JavaScript file must be saved by .js extension. It is recommended to embed all
JavaScript files into a single file. It increases the speed of the webpage.

Let's create an external JavaScript file that prints Hello Javatpoint in a alert dialog box.

message.js

168 | P a g e
 1. function msg(){
2. alert("Hello Javatpoint");
3. }

Let's include the JavaScript file into html page. It calls the JavaScript function on button
click.

index.html

1. <html>
2. <head>
3. <script type="text/javascript" src="message.js"></script>
4. </head>
5. <body>
6. <p>Welcome to JavaScript</p>
7. <form>
8. <input type="button" value="click" onclick="msg()"/>
9. </form>
10. </body>
11. </html>

Advantages of External JavaScript

There will be following benefits if a user creates an external javascript:

1. It helps in the reusability of code in more than one HTML file.

2. It allows easy code readability.
3. It is time-efficient as web browsers cache the external js files, which further reduces
the page loading time.
4. It enables both web designers and coders to work with html and js files parallelly and
separately, i.e., without facing any code conflictions.
5. The length of the code reduces as only we need to specify the location of the js file.

Disadvantages of External JavaScript

There are the following disadvantages of external files:

1. The stealer may download the coder's code using the url of the js file.
2. If two js files are dependent on one another, then a failure in one file may affect the
execution of the other dependent file.
3. The web browser needs to make an additional http request to get the js code.
4. A tiny to a large change in the js code may cause unexpected results in all its
dependent files.
5. We need to check each file that depends on the commonly created external javascript
file.
6. If it is a few lines of code, then better to implement the internal javascript code.

JavaScript Comment
169 | P a g e
 1. JavaScript comments
2. Advantage of javaScript comments
3. Single-line and Multi-line comments

The JavaScript comments are meaningful way to deliver message. It is used to add
information about the code, warnings or suggestions so that end user can easily interpret the
code.

The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the browser.

Advantages of JavaScript comments

There are mainly two advantages of JavaScript comments.

1. To make code easy to understand It can be used to elaborate the code so that end user can
easily understand the code.
2. To avoid the unnecessary code It can also be used to avoid the code being executed.
Sometimes, we add the code to perform some action. But after sometime, there may be need
to disable the code. In such case, it is better to use comments.

Types of JavaScript Comments

There are two types of comments in JavaScript.

1. Single-line Comment
2. Multi-line Comment

JavaScript Single line Comment

It is represented by double forward slashes (//). It can be used before and after the statement.

Let’s see the example of single-line comment i.e. added before the statement.

1. <script>
2. // It is single line comment
3. document.write("hello javascript");
4. </script>

Test it Now

Let’s see the example of single-line comment i.e. added after the statement.

1. <script>
2. var a=10;
3. var b=20;
4. var c=a+b;//It adds values of a and b variable

170 | P a g e
 5. document.write(c);//prints sum of 10 and 20
6. </script>

JavaScript Multi line Comment

It can be used to add single as well as multi line comments. So, it is more convenient.

It is represented by forward slash with asterisk then asterisk with forward slash. For example:

1. /* your code here */

It can be used before, after and middle of the statement.

1. <script>
2. /* It is multi line comment.
3. It will not be displayed */
4. document.write("example of javascript multiline comment");
5. </script>

javaScript Variable
A JavaScript variable is simply a name of storage location. There are two types of variables
in JavaScript : local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.

2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.

Correct JavaScript variables

1. var x = 10;
2. var _value="sonoo";

Incorrect JavaScript variables

1. var 123=30;
2. var *aa=320;

171 | P a g e
Example of JavaScript variable
Let’s see a simple example of JavaScript variable.

1. <script>
2. var x = 10;
3. var y = 20;
4. var z=x+y;
5. document.write(z);
6. </script>

Output of the above example

30

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible within the
function or block only. For example:

1. <script>
2. function abc(){
3. var x=10;//local variable
4. }
5. </script>

Or,

1. <script>
2. If(10<13){
3. var y=20;//JavaScript local variable
4. }
5. </script>

JavaScript global variable

A JavaScript global variable is accessible from any function. A variable i.e. declared
outside the function or declared with window object is known as global variable. For
example:

1. <script>
2. var data=200;//gloabal variable
3. function a(){
4. document.writeln(data);
5. }

172 | P a g e
 6. function b(){
7. document.writeln(data);
8. }
9. a();//calling JavaScript function
10. b();
11. </script>

JavaScript Global Variable

A JavaScript global variable is declared outside the function or declared with window
object. It can be accessed from any function.

Let’s see the simple example of global variable in JavaScript.

1. <script>
2. var value=50;//global variable
3. function a(){
4. alert(value);
5. }
6. function b(){
7. alert(value);
8. }
9. </script>

Declaring JavaScript global variable within function

To declare JavaScript global variables inside function, you need to use window object. For
example:

1. window.value=90;

Now it can be declared inside any function and can be accessed from any function. For
example:

1. function m(){
2. window.value=100;//declaring global variable by window object
3. }
4. function n(){
5. alert(window.value);//accessing global variable from other function
6. }

Internals of global variable in JavaScript

When you declare a variable outside the function, it is added in the window object internally.
You can access it through window object also. For example:

1. var value=50;

173 | P a g e
 2. function a(){
3. alert(window.value);//accessing global variable
4. }

OOPS ASPECTS IN JAVASCRIPT

What Is Object-oriented Programming?

Object-oriented Programming treats data as a crucial element in program development and
doesn't allow it to flow freely around the system. It ties data more securely to the function
that operates on it and protects it from accidental modification from an outside function. OOP
breaks down a problem into several entities called objects and builds data and functions
around these objects.

Basic concepts of Object-oriented Programming

Objects

Objects are the basic run-time bodies in an object-oriented framework. They may represent a
place, a person, an account, a table of data, or anything that the program needs to handle.
Objects can also represent user-defined data such as vectors, time, and lists.

Consider two objects, “customer” and “account” in a program. The customer object may send
a message requesting the bank balance.

Classes

We know that objects hold the data and the functions to manipulate the data. However, the
two can be bound together in a user-defined data type with the help of classes. Any number
of objects can be created in a class. Each object is associated with the data of type class. A
class is therefore a collection of objects of similar types.

For example, consider the class “Fruits”. We can create multiple objects for this class -

Fruit Mango;

This will create an object mango belonging to the class fruit.

Encapsulation

Encapsulation is the wrapping up/binding of data and function into a single unit called class.
Data encapsulation is the most prominent feature of a class wherein the data is not accessible
to the outside world, and only those functions wrapped inside the class can access it. These
functions serve as the interface between the object’s data and the program.

Inheritance

174 | P a g e
The phenomenon where objects of one class acquire the properties of objects of another class
is called Inheritance. It supports the concept of hierarchical classification. Consider the object
“car” that falls in the class “Vehicles” and “Light Weight Vehicles”.

In OOP, the concept of inheritance ensures reusability. This means that additional features
can be added to an existing class without modifying it. This is made possible by deriving a
new class from the existing one.

OOP Concepts in JavaScript

Now that you are familiar with OOP concepts, this section will show you how JavaScript
implements them.

Creating Objects in JavaScript

 We can create an object using the string literal in JavaScript.

var student = {

name: "pp",

age: 21,

studies: "Computer Science",

};

document.getElementById("demo").innerHTML = student.name + " of the age " +

student.age + " studies " + student.studies;

 Creating objects using the new keyword.

var student = new Object();

student.name = "pp",

student.age=21,

student.studies = "Computer Science";

document.getElementById("demo").innerHTML = student.name + " of the age " +

student.age + " studies " + student.studies;

 Creating an object using the object constructor.

function stud(name, age, studies){

this.name = name;

175 | P a g e
 this.age = age;

this.studies = studies;

var student = stud("Chris", 21, "Computer Science");

document.getElementById("demo").innerHTML = student.name + " of the age " +

student.age + " studies " + student.studies;

Class Implementation in JavaScript

JavaScript uses the ES6 standard to define classes. Consider the following example.

class Cars {

constructor(name, maker, price) {

this.name = name;

this.maker = maker;

this.price = price;

getDetails(){

return (`The name of the car is ${this.name}.`)

let car1 = new Cars('Rolls Royce Ghost', 'Rolls Royce', '$315K');

let car2 = new Cars('Mercedes AMG One', 'Mercedes', '$2700K');

console.log(car1.name);

console.log(car2.maker);

console.log(car1.getDetails());

The output of the above code is

176 | P a g e
Encapsulation in JavaScript
Encapsulation includes wrapping the property and the function within a single unit. Consider
the following example:

class Emp_details{

constructor(name,id){

this.name = name;

this.id = id;

add_Address(add){

this.add = add;

getDetails(){

console.log(`Employee Name: ${this.name}, Address: ${this.add}`);

let person1 = new Emp_details('Anand',27);

person1.add_Address('Bangalore');

person1.getDetails();

Here, the class holds the data variables name and id along with the functions add_Address
and getDetails. All are encapsulated within the class Emp_details.

177 | P a g e
Memory Management in JavaScript
Memory management is an essential task when writing a good and effective program in some
programming languages. This article will help you to understand different concepts of
memory management in JavaScript. In low-level languages like C and C++, programmers
should care about the usage of memory in some manual fashion. On the other hand,
Javascript automatically allocates memory when objects are created into the environment and
also it cleans the memory when an object is destroyed. JavaScript can manage all of these on
its own but this does not imply that the developers do not need to worry about the memory
management in JavaScript.

Memory management in any programming language involves three important phases, termed
as memory life-cycle −

 Allocating the memory which is required in our program.

 Utilize the allocated memory unit.
 After completion, clear the memory block.

Different Strategies to Allocate Memory in JavaScript

Allocating by value initialization

In JavaScript, we do not need to care about allocating memory for simple variables. We can
directly assign values to some variables and it will allocate necessary memory on its own.

Syntax
var variable1 = <value>
var variable2 = <value>
Example

For simple allocation by values, see the following example.

Source Code
<head>
<title>HTML Console</title>
</head>
<body>
<h3> Output Console </h3>
<p> Output:</p>
<div id="output">
</div>
<div id="opError" style="color : #ff0000">
</div>
<script>
var content =''
var error =''
varopDiv=document.querySelector('#output')
varopErrDiv=document.querySelector('#opError')

// actual javascript code

try{

178 | P a g e
var number =52;
varst='my_string';
var student ={
name:'Smith',
roll:5,
age:23,
};
vararr=[15,null,'another_string'];
content +="Allocated memory for number: "+JSON.stringify(number)+'<br>'
content +="Allocated memory for string: "+JSON.stringify(st)+'<br>'
content +="Allocated memory for student: "+JSON.stringify(student)+'<br>'
content +="Allocated memory for array: "+JSON.stringify(arr)+'<br>'
}catch(err){
error += err
}finally{

// display on output console

opDiv.innerHTML= content
opErrDiv.innerHTML= error
}
</script>
</body>
</html>

From the above example, it is clear that numbers and strings are single values, and allocation
is also simple. But for objects and arrays, JavaScript can also easily allocate the memory
based on their values.

Allocating by Function Call

Like variable value assignment, we can also create some memory blocks by calling some
functions. For example, when a function returns a separate object it will automatically assign
a new memory block to the system.

Syntax
Memory_reference = <function call which returns any value>
Examples

The following example uses a function that works on an HTML document. So this program
will run on a browser or HTML editor.

Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<script>
var e =document.createElement('div');
e.innerHTML="<h1> Header from JavaScript </h1>"
document.body.appendChild(e);
</script>
</body>
</html>

179 | P a g e
In this example, the JavaScript code is present inside the <script> tag in HTML. Please
notice, in this case, initially, the document does not have any <div> block inside <body>. The
JavaScript creates a new component by calling createElement(), and then a new div block is
created. This block allocates the memory but only when a function is called. After that, the
new component is added as a child of the body tag to use this inside the HTML document.

Using previously Allocated Memory in JavaScript

Using previously allocated memory is just reading or writing values from some variables
which are assigned previously. We can update its existing value with some other values. See
the following example for a better understanding−

Example

Initially allocating memory for a variable, then reading the value from it. Writing a new value
and again reading from it.

Source Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Console</title>
</head>
<body>
<h3> Output Console </h3>
<p> Output:</p>
<div id="output">
</div>
<div id="opError" style="color : #ff0000">
</div>
<script>
var content =''
var error =''
opDiv=document.querySelector('#output')
varopErrDiv=document.querySelector('#opError')

// actual javascript code

try{
var a =52;// allocate memory
content +="Reading value of variable a: "+JSON.stringify(a)+'<br>'
a =100
content +="Reading value of variable a: "+JSON.stringify(a)+'<br>'
}
catch(err){
error += err
}
finally{

// display on output console

opDiv.innerHTML= content
opErrDiv.innerHTML= error
}
</script>
</body>

180 | P a g e
</html>

Deallocating memory blocks in JavaScript

When our purpose is served, we can remove the allocated memory block. In some low-level
languages, this is a necessary step, otherwise, it may occupy memory spaces over time and
the total system may crash. JavaScript also has native support of Garbage Collector, which
cleans unnecessary memory blocks and cleans up the memory. But sometimes the compiler
cannot understand whether a block will be used in later cases or not. In such cases, the
Garbage Collector does not clean up that memory. To manually remove allocated locations,
we can use the ‘delete’ keyword before the variable name.

Syntax
delete <variable_name>

The variable must be allocated beforehand, otherwise, it will raise an error while trying to
delete that variable. Let us see one example to understand this concept clearly.

Example
Source Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Console</title>
</head>
<body>
<h3> Output Console </h3>
<p> Output:</p>
<div id="output">
</div>
<div id="opError" style="color : #ff0000">
</div>
<script>
var content =''
var error =''
varopDiv=document.querySelector('#output')
varopErrDiv=document.querySelector('#opError')

// actual javascript code

try{
a ="a simple variable";// allocate memory
content +="Reading value of variable a: "+JSON.stringify(a)+'<br>'
delete a
content +="Reading value of variable a: "+JSON.stringify(a)+'<br>'
}
catch(err){
error += err
}
finally{

// display on output console

opDiv.innerHTML= content
opErrDiv.innerHTML= error
}
</script>

181 | P a g e
</body>
</html>

Note − The ‘delete’ keyword will only work when the variable is allocated directly (without
using the var or let keyword).

Conclusion
Working with any programming language, the programmer should know the overall concept
in depth. Memory management is one of the concerning issues, in which developers should
properly manage the memory otherwise it will occupy unnecessary memory blocks and create
major problems in the environment. JavaScript provides an additional garbage collector tool
that automatically cleans the unused memory blocks. However, we can also deallocate
memory by using the ‘delete’ keyword just before the variable name

AJAX for data exchange with server jQuery Framework

Short Description of AJAX

Ajax is only a name given to a set of tools that were previously existing.

The main part is XMLHttpRequest, a server-side object usable in JavaScript, that was
implemented in Internet Explorer since the 4.0 version.

To get data on the server, XMLHttpRequestprovides two methods:

1. open: Creates a connection

2. send: Sends a request to the server

Data furnished by the server will be found in the attributes of the XMLHttpRequestobject:

1. responseXmlfor an XML file, or

2. responseTextfor a plain text

Take note that a new XMLHttpRequestobject has to be created for each new data request.

We have to wait for the data to be available to process it, and in this purpose, the state of
availability of data is given by the readyStateattribute of XMLHttpRequest.

Attributes of XMLHttpRequest Class

1. readyState: The code successively changes value from 0 to 4

0: Not initialized

182 | P a g e
 1: Connection established
2: Request received
3: Answer in process
4: Finished

2. status: 200 is OK

404 if the page is not found

3. responseText: Holds loaded data as a string of characters.

4. responseXml: Holds an XML loaded file, DOM's method allows to extract data.
5. onreadystatechange: Property that takes a function as value that is invoked when the
readystatechangeevent is dispatched.

Methods of XMLHttpRequest Class

1. open(mode, url,boolean) : mode: type of request, GET or POST

url: the location of the file, with a path

boolean: true (asynchronous) / false (synchronous)
optionally, a login and a password may be added to arguments

2. send("string"): string: POST data, null for a GET command

3. abort() : Cancels the current HTTP request
4. getAllResponseHeaders(): Retrieves the values of all the HTTP headers
5. getResponseHeader(string): Retrieves the value of an HTTP header from the response body
string: name of http header
6. setRequestHeader(name,value): Adds a new http header in the request
name: name/identifier of the header
value: value of the header

Using the Code

Here is a simple function 'AjaxRequest' which is implemented to perform the AJAX requests.

JavaScript
Shrink ▲
functionAjaxRequest(ReadyHandler,URL,Method,Params,QueryString,HttpHeaders) {
if (URL == null) { alert("Request URL is Empty"); }
else {

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = newXMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = newActiveXObject("Microsoft.XMLHTTP");
}

//An anonymous function is assigned to the event indicator.

xmlhttp.onreadystatechange = function() {

//200 status means ok, otherwise some error code is returned, 404 for example

183 | P a g e
//The 4 state means for the response is ready and sent by the server.
if (xmlhttp.readyState == 4&&xmlhttp.status == 200) {
ResponseText = xmlhttp.responseText; //get text data in the response
ResponseXML = xmlhttp.responseXML; //get xml data in the response
ResponseHeaderJSON = xmlhttp.getResponseHeader
("CustomHeaderJSON"); // Extract Data in http header
ResponseHeaders = xmlhttp.getAllResponseHeaders(); //Get a string
//containing all http headers returned by server

// Make all the results available in the ReadyHandler via prototyping.

ReadyHandler.prototype.ResponseText = ResponseText;
ReadyHandler.prototype.ResponseHeaderJSON = ResponseHeaderJSON;
ReadyHandler.prototype.ResponseXML = ResponseXML;
ReadyHandler.prototype.ResponseHeaders = ResponseHeaders;
// Execute function passed as ReadyHandelr
ReadyHandler();
}
}

//If querystring is provided Attach it to the url

if (QueryString != "") {
varQueryStringData = "";
for (QueryStringAttributeinQueryString) {
QueryStringData = QueryStringAttribute + "=" +
QueryString[QueryStringAttribute] + "&" + QueryStringData;
}
QueryStringData = QueryStringData.substring(0,
QueryStringData.lastIndexOf('&'));
URL = URL + "?" + escape(QueryStringData); //Here is where the
//query string ia attached to the request url.
}

//POST or GET URL of the script to execute.true for asynchronous

//(false for synchronous).
xmlhttp.open(Method, URL, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if (HttpHeaders != "") {
varHttpHeadersData = "";
for (HttpHeaderNameinHttpHeaders) {
xmlhttp.setRequestHeader(HttpHeaderName,
HttpHeaders[HttpHeaderName]); // Here the custom headers are added
}
}

//Post data provided then assemble it into single string to be posted to server
if (Params != "") {
varParamsData = "";
for (ParamNamein Params) {
ParamsData = ParamName + "=" + Params[ParamName] + "&" + ParamsData;
}
ParamsData = ParamsData.substring(0, ParamsData.lastIndexOf('&'));
}

xmlhttp.send(ParamsData); //Send the request with the post data

}
}

[You can find the complete implementation with sufficient comments in the source code.]

184 | P a g e
It can give a more clear idea of using AJAX in your applications.

In the demo application, you can test the 'AjaxRequest' function by changing the parameters
that are passed to it.

Actually all the code that is typed in the text box is executed as JavaScript code on click of
'Execute' button.This is done using the eval() function.

JavaScript
FunctionCall = document.getElementById('FunctionCode').value;
eval(FunctionCall);
Function Usage
JavaScript
functionAjaxRequest(ReadyHandler,URL,Method,Params,QueryString,HttpHeaders)
Description

->ReadyHandler: Function to be called after successful completion of the AJAX request

Note: On successful completion of the request, the result of the request will be available in the
function passed as ReadyHandler.
The result of request will be in 4 variables, namely:

 ResponseText: Text response from server

 ResponseHeaderJSON: Custom HTTP Header String value

This header string may contain a single string value or a you can also use a JSON format for
multiple values which then can be parsed in ReadyHandler(as shown in the example).

 ResponseHeaders: String containing all Response HTTP Headers

 ResponseXML: XML response from server (XML object available only when the Response
contains a proper XML)

185 | P a g e
->URL: This parameter takes the URL to which the request is to be sent

->Method: Method of request "GET"/"POST"

->Params: POST data to be sent to server. Expects a JSON formatted name value pairs

->QueryString: Data to be sent to the server as QueryString. Expects a JSON formatted name
value pairs

->HttpHeaders: Data to be sent as HTTP Headers. Expects JSON formatted name value pairs

Note: While sending the data in headers, you have to take care only ASCII characters where charCode
ranging from 32 to 126 are sent or you may get unexpected results. See RFC documentation for
HTTP.

The ReadyHandlercan contain the code which will dynamically change the contents of the
webpage based on the response data.

For example, in the demo application, I have used ' ProcessRequest()' as the Ready handler
which sets the response in the respective <Div>.

JavaScript
functionProcessRequest() {

// // Assign the content to the form

document.getElementById('ResponseTextDiv').innerHTML = ResponseText;

document.getElementById('ResponseXMLDiv').innerHTML = ResponseHeaders;
eval("var CustomHeaders = { " + ResponseHeaderJSON + "};");
var header;
varallHeaders = "<br/>";
if (CustomHeaders != "") {
for (header inCustomHeaders) {
allHeaders = allHeaders + CustomHeaders[header] + "<br/>"
}
}
document.getElementById('ResponseHeadersDiv').innerHTML = allHeaders;
}

Example:

JavaScript
AjaxRequest(ProcessRequest, 'Handler.ashx','POST',
{ Param1: 'Param1Value', Param2: 'Param2Value', Param3: 'Param3Value' },
{ Query1: 'Q1', Query2: 'Q2', Query3: 'Q3' },
{ Header1: 'H1', Header2: 'H2', Header3: 'H3' }
);

For handling the client request, I have implemented a simple Generic Handler (.ashx).

You can access all the data (query string + Post Data + HTTP Headers) that is sent by the
client browser in AJAX request.

186 | P a g e
In the Generic handler, the data is accessible via the context.Requestobject.

Though you can access all the data together in context.Request.Params[], you can access the data
separately as follows:

 Query String: context.Request.QueryString[[index/string]]

 Http Headers: context.Request.Headers[[index/string]]

In the example application, what I have done is just echo back the data which is received in
the request along with a custom HTTP header added.

JavaScript
foreach(string Param incontext.Request.Params)
{
ParamsData ="<br/>" + Param + " : " +
context.Request.Params[Param].ToString() + ParamsData;
}
context.Response.Write(ParamsData);

The above lines capture the data in the request and send it back in the response.

For adding an extra custom HTTP header in response:

C#
context.Response.AddHeader("CustomHeaderJSON", CustomHeaderJSON);

As you see, the context.Responseobject is used to assemble the response which is to be sent
back to the browser.

Different methods of context.Response can be used to do this.

'CustomHeaderJSON' can contain a string , but I have created a JSON format string for
supporting multiple values.The values are then parsed at client side using JavaScript.

I have just used string concatenate for creating it, but you can also use different JSON
parsers/Encoders available at http://www.json.org/.

You can also use JSON strings to exchange data through AJAX. It is sometimes better to use
JSON than XML. Using JSON results in less bytes transferred than XML.

Points of Interest
This is a basic implementation of AJAX and the function can be tuned and modified
according to needs and reconfigurability.

Here is how the request and response looks like [HTTP request in Fiddler]:

187 | P a g e
jQuery Events
jQuery events are the actions that can be detected by your web application. They are used to
create dynamic web pages. An event shows the exact moment when something happens.

These are some examples of events.

 A mouse click
 An HTML form submission
 A web page loading
 A keystroke on the keyboard
 Scrolling of the web page etc.

These events can be categorized on the basis their types:

Mouse Events
 click
 dblclick
 mouseenter
 mouseleave

Keyboard Events
 keyup
 keydown
 keypress

188 | P a g e
Form Events
 submit
 change
 blur
 focus

Document/Window Events
 load
 unload
 scroll
 resize

Note: A term "fires" is generally used with events. For example: The click event fires in the moment
you press a key.

Syntax for event methods

Most of the DOM events have an equivalent jQuery method. To assign a click events to all
paragraph on a page, do this:

1. $("p").click ();

The next step defines what should happen when the event fires. You must pass a function to
the event.

UNIT – III

REACT JS

React Introduction
ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI
components. It is an open-source, component-based front end library responsible only for the
view layer of the application. It was created by Jordan Walke, who was a software engineer
at Facebook. It was initially developed and maintained by Facebook and was later used in its
products like WhatsApp&Instagram. Facebook developed ReactJS in 2011 in its newsfeed
section, but it was released to the public in the month of May 2013.

Today, most of the websites are built using MVC (model view controller) architecture. In
MVC architecture, React is the 'V' which stands for view, whereas the architecture is
provided by the Redux or Flux.

189 | P a g e
A ReactJS application is made up of multiple components, each component responsible for
outputting a small, reusable piece of HTML code. The components are the heart of all React
applications. These Components can be nested with other components to allow complex
applications to be built of simple building blocks. ReactJS uses virtual DOM based
mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes
individual DOM elements instead of reloading complete DOM every time.

To create React app, we write React components that correspond to various elements. We
organize these components inside higher level components which define the application
structure. For example, we take a form that consists of many elements like input fields,
labels, or buttons. We can write each element of the form as React components, and then we
combine it into a higher-level component, i.e., the form component itself. The form
components would specify the structure of the form along with elements inside of it.

Why learn ReactJS?

Today, many JavaScript frameworks are available in the market(like angular, node), but still,
React came into the market and gained popularity amongst them. The previous frameworks
follow the traditional data flow structure, which uses the DOM (Document Object Model).
DOM is an object which is created by the browser each time a web page is loaded. It
dynamically adds or removes the data at the back end and when any modifications were done,
then each time a new DOM is created for the same page. This repeated creation of DOM
makes unnecessary memory wastage and reduces the performance of the application.

Therefore, a new technology ReactJS framework invented which remove this drawback.
ReactJS allows you to divide your entire application into various components. ReactJS still
used the same traditional data flow, but it is not directly operating on the browser's Document
Object Model (DOM) immediately; instead, it operates on a virtual DOM. It means rather
than manipulating the document in a browser after changes to our data, it resolves changes on
a DOM built and run entirely in memory. After the virtual DOM has been updated, React
determines what changes made to the actual browser's DOM. The React Virtual DOM exists
entirely in memory and is a representation of the web browser's DOM. Due to this, when we
write a React component, we did not write directly to the DOM; instead, we are writing
virtual components that react will turn into the DOM.

React Router and Single Page Applications

Preparing the React App

Installing the create-react-app Package

If you've ever had the chance to try React, you've probably heard about the create-react-app
package, which makes it super easy to start with a React development environment.

In this tutorial, we will use this package to initiate our React app.

So, first of all, make sure you have Node.js installed on your computer. It will also install

190 | P a g e
npm for you.

In your terminal, run npm install -g create-react-app. This will globally install create-react-app
on your computer.

Once it is done, you can verify whether it is there by typing create-react-app -V.

Creating the React Project

Now it's time to build our React project. Just run create-react-app multi-page-app. You can, of
course, replace multi-page-app with anything you want.

Now, create-react-app will create a folder named multi-page-app. Just type cd multi-page-app
to change directory, and now run npm start to initialize a local server.

That's all. You have a React app running on your local server.

Now it's time to clean the default files and prepare our application.

In your src folder, delete everything but App.js and index.js. Then open index.js and replace the
content with the code below.

import React from'react';

importReactDOMfrom'react-dom';

import App from'./App';

ReactDOM.render(<App />, document.getElementById('root'));

I basically deleted the registerServiceWorker related lines and also the import './index.css'; line.

Also, replace your App.js file with the code below.

import React, { Component } from'react';

class App extends Component {

render() {

191 | P a g e
return (

<div className="App">

</div>

);

exportdefault App;

Now we will install the required modules.

In your terminal, type the following commands to install the react-router and react-
transition-group modules respectively.

npm install react-router-dom --save

npm install react-transition-group@1.x --save

After installing the packages, you can check the package.json file inside your main project
directory to verify that the modules are included under dependencies.

Router Components
There are basically two different router options: HashRouter and BrowserRouter.

As the name implies, HashRouter uses hashes to keep track of your links, and it is suitable
for static servers. On the other hand, if you have a dynamic server, it is a better option to
use BrowserRouter, considering the fact that your URLs will be prettier.

Once you decide which one you should use, just go ahead and add the component to
your index.js file.

import { HashRouter } from 'react-router-dom'

The next thing is to wrap our <App> component with the router component.

192 | P a g e
So your final index.js file should look like this:

import React from'react';

importReactDOMfrom'react-dom';

import{ HashRouter } from'react-router-dom'

import App from'./App';

ReactDOM.render(<HashRouter><App/></HashRouter>, document.getElementById('root'));

If you're using a dynamic server and prefer to use BrowserRouter, the only difference would
be importing the BrowserRouter and using it to wrap the <App> component.

By wrapping our <App> component, we are serving the history object to our application, and
thus other react-router components can communicate with each other.

Inside <App/> Component

Inside our <App> component, we will have two components named <Menu> and <Content>. As
the names imply, they will hold the navigation menu and displayed content respectively.

Create a folder named "components" in your src directory, and then create the Menu.js
and Content.js files.

Menu.js

Let's fill in our Menu.js component.

It will be a stateless functional component since we don't need states and life-cycle hooks.

import React from'react'

const Menu = () =>{

return(

193 | P a g e
<ul>

<li>Home</li>

<li>Works</li>

<li>About</li>

</ul>

exportdefault Menu

Here we have a <ul> tag with <li> tags, which will be our links.

Now add the following line to your Menu component.

import { Link } from 'react-router-dom'

And then wrap the content of the <li> tags with the <Link> component.

The <Link> component is essentially a react-router component acting like an <a> tag, but it
does not reload your page with a new target link.

Also, if you style your a tag in CSS, you will notice that the <Link> component gets the same
styling.

Note that there is a more advanced version of the <Link> component, which is <NavLink>. This
offers you extra features so that you can style the active links.

Now we need to define where each link will navigate. For this purpose, the <Link> component
has a to prop.

import React from'react'

194 | P a g e
import{ Link } from'react-router-dom'

const Menu = () =>{

return(

<ul>

<li><Link to="/">Home</Link></li>

<li><Link to="/works">Works</Link></li>

<li><Link to="/about">About</Link></li>

</ul>

exportdefault Menu

Content.js

Inside our <Content> component, we will define the Routes to match the Links.

We need the Switch and Route components from react-router-dom. So, first of all, import
them.

import { Switch, Route } from 'react-router-dom'

Second of all, import the components that we want to route to. These are the Home, Works
and About components for our example. Assuming you have already created those
components inside the components folder, we also need to import them.

195 | P a g e
import Home from './Home'

import Works from './Works'

import About from './About'

Those components can be anything. I just defined them as stateless functional components
with minimum content. An example template is below. You can use this for all three
components, but just don't forget to change the names accordingly.

import React from'react'

const Home = () =>{

return(

<div>

Home

</div>

exportdefault Home

Switch

We use the <Switch> component to group our <Route> components. Switch looks for all
the Routes and then returns the first matching one.

Route

Routes are components calling your target component if it matches the path prop.

The final version of our Content.js file looks like this:

196 | P a g e
import React from'react'

import{ Switch, Route } from'react-router-dom'

import Home from'./Home'

import Works from'./Works'

import About from'./About'

const Content = () =>{

return(

<Switch>

<Route exact path="/" component={Home}/>

<Route path="/works" component={Works}/>

<Route path="/about" component={About}/>

</Switch>

exportdefault Content

197 | P a g e
Notice that the extra exact prop is required for the Home component, which is the main
directory. Using exactforces the Route to match the exact pathname. If it's not used, other
pathnames starting with / would also be matched by the Home component, and for each link,
it would only display the Home component.

Now when you click the menu links, your app should be switching the content.

Animating the Route Transitions

So far, we have a working router system. Now we will animate the route transitions. In order
to achieve this, we will use the react-transition-group module.

We will be animating the mounting state of each component. When you route different
components with the Route component inside Switch, you are essentially mounting and
unmounting different components accordingly.

We will use react-transition-group in each component we want to animate. So you can have
a different mounting animation for each component. I will only use one animation for all of
them.

As an example, let's use the <Home> component.

First, we need to import CSSTransitionGroup.

import { CSSTransitionGroup } from 'react-transition-group'

Then you need to wrap your content with it.

Since we are dealing with the mounting state of the component, we enable transitionAppear and
set a timeout for it. We also disable transitionEnter and transitionLeave, since these are only valid
once the component is mounted. If you are planning to animate any children of the
component, you have to use them.

Lastly, add the specific transitionName so that we can refer to it inside the CSS file.

import React from'react'

import{ CSSTransitionGroup } from'react-transition-group'

import'../styles/homeStyle.css'

const Home = () =>{

198 | P a g e
return(

<CSSTransitionGroup

transitionName="homeTransition"

transitionAppear={true}

transitionAppearTimeout={500}

transitionEnter={false}

transitionLeave={false}>

<div>

Home

</div>

</CSSTransitionGroup>

exportdefault Home

We also imported a CSS file, where we define the CSS transitions.

.homeTransition-appear{

199 | P a g e
opacity: 0;

.homeTransition-appear.homeTransition-appear-active{

opacity: 1;

transition: all .5s ease-in-out;

If you refresh the page, you should see the fade-in effect of the Home component.

If you apply the same procedure to all the other routed components, you will see their
individual animations when you change the content with your Menu.

Conclusion
In this tutorial, we covered the react-router-dom and react-transition-group modules.
However, there's more to both modules than we covered in this tutorial. Here is a working
demo of what was covered.

So, to learn more features, always go through the documentation of the modules you are
using.

Over the last couple of years, React has grown in popularity. In fact, we have a number of
items in the marketplace that are available for purchase, review, implementation, and so on. If
you’re looking for additional resources around React, don’t hesitate to check them out.

React Forms

HTML form elements work a bit differently from other DOM elements in React, because
form elements naturally keep some internal state. For example, this form in plain HTML
accepts a single name:

<form>
<label>
Name:
<input type="text" name="name" />

200 | P a g e
</label>
<input type="submit" value="Submit" />
</form>

This form has the default HTML form behavior of browsing to a new page when the user
submits the form. If you want this behavior in React, it just works. But in most cases, it’s
convenient to have a JavaScript function that handles the submission of the form and has
access to the data that the user entered into the form. The standard way to achieve this is with
a technique called “controlled components”.

Controlled Components
In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own
state and update it based on user input. In React, mutable state is typically kept in the state
property of components, and only updated with setState().

We can combine the two by making the React state be the “single source of truth”. Then the
React component that renders a form also controls what happens in that form on subsequent
user input. An input form element whose value is controlled by React in this way is called a
“controlled component”.

For example, if we want to make the previous example log the name when it is submitted, we
can write the form as a controlled component:

classNameFormextendsReact.Component{
constructor(props){
super(props);
this.state={value:''};
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}

handleChange(event){this.setState({value:event.target.value});}
handleSubmit(event){
alert('A name was submitted: '+this.state.value);
event.preventDefault();
}

render(){
return(
<form onSubmit={this.handleSubmit}><label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} /></label>
<input type="submit" value="Submit" />
</form>
);
}
}

Try it on CodePen

Since the value attribute is set on our form element, the displayed value will always be
this.state.value, making the React state the source of truth. Since handleChange runs on every
keystroke to update the React state, the displayed value will update as the user types.

201 | P a g e
With a controlled component, the input’s value is always driven by the React state. While this
means you have to type a bit more code, you can now pass the value to other UI elements too,
or reset it from other event handlers.

The textarea Tag

In HTML, a <textarea> element defines its text by its children:

<textarea>
Hello there, this is some text in a text area
</textarea>

In React, a <textarea> uses a value attribute instead. This way, a form using a <textarea> can be
written very similarly to a form that uses a single-line input:

classEssayFormextendsReact.Component{
constructor(props){
super(props);
this.state={value:'Please write an essay about your favorite DOM element.'};
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}

handleChange(event){this.setState({value:event.target.value});}
handleSubmit(event){
alert('An essay was submitted: '+this.state.value);
event.preventDefault();
}

render(){
return(
<form onSubmit={this.handleSubmit}>
<label>
Essay:
<textarea value={this.state.value} onChange={this.handleChange} /></label>
<input type="submit" value="Submit" />
</form>
);
}
}

Notice that this.state.value is initialized in the constructor, so that the text area starts off with
some text in it.

The select Tag

In HTML, <select> creates a drop-down list. For example, this HTML creates a drop-down list
of flavors:

<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>

202 | P a g e
</select>

Note that the Coconut option is initially selected, because of the selected attribute. React,
instead of using this selected attribute, uses a value attribute on the root select tag. This is more
convenient in a controlled component because you only need to update it in one place. For
example:

classFlavorFormextendsReact.Component{
constructor(props){
super(props);
this.state={value:'coconut'};
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
}

handleChange(event){this.setState({value:event.target.value});}
handleSubmit(event){
alert('Your favoriteflavor is: '+this.state.value);
event.preventDefault();
}

render(){
return(
<form onSubmit={this.handleSubmit}>
<label>
Pick your favoriteflavor:
<select value={this.state.value} onChange={this.handleChange}><option
value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

Try it on CodePen

Overall, this makes it so that <input type="text">, <textarea>, and <select> all work very similarly -
they all accept a value attribute that you can use to implement a controlled component.

Note

You can pass an array into the value attribute, allowing you to select multiple options in a
select tag:

<select multiple={true} value={['B', 'C']}>

The file input Tag

In HTML, an <input type="file"> lets the user choose one or more files from their device storage
to be uploaded to a server or manipulated by JavaScript via the File API.

203 | P a g e
<input type="file" />

Because its value is read-only, it is an uncontrolled component in React. It is discussed

together with other uncontrolled components later in the documentation.

Handling Multiple Inputs

When you need to handle multiple controlled input elements, you can add a name attribute to
each element and let the handler function choose what to do based on the value of
event.target.name.

For example:

classReservationextendsReact.Component{
constructor(props){
super(props);
this.state={
isGoing:true,
numberOfGuests:2
};

this.handleInputChange=this.handleInputChange.bind(this);
}

handleInputChange(event){
const target =event.target;
const value =target.type==='checkbox'?target.checked:target.value;
const name = target.name;
this.setState({
[name]: value});
}

render(){
return(
<form>
<label>
Is going:
<input
name="isGoing" type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests" type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}

Try it on CodePen

204 | P a g e
Note how we used the ES6 computed property name syntax to update the state key
corresponding to the given input name:

this.setState({
[name]: value});

It is equivalent to this ES5 code:

varpartialState={};
partialState[name]=value;this.setState(partialState);

Also, since setState() automatically merges a partial state into the current state, we only needed
to call it with the changed parts.

Controlled Input Null Value

Specifying the value prop on a controlled component prevents the user from changing the
input unless you desire so. If you’ve specified a value but the input is still editable, you may
have accidentally set value to undefined or null.

The following code demonstrates this. (The input is locked at first but becomes editable after
a short delay.)

ReactDOM.createRoot(mountNode).render(<input value="hi" />);

setTimeout(function(){
ReactDOM.createRoot(mountNode).render(<input value={null} />);
},1000);

Alternatives to Controlled Components

It can sometimes be tedious to use controlled components, because you need to write an event
handler for every way your data can change and pipe all of the input state through a React
component. This can become particularly annoying when you are converting a preexisting
codebase to React, or integrating a React application with a non-React library. In these
situations, you might want to check out uncontrolled components, an alternative technique for
implementing input forms.

Introduction to Redux
Redux Toolkit

Redux Toolkit is our official recommended approach for writing Redux logic. It wraps
around the Redux core, and contains packages and functions that we think are essential for
building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most
Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

RTK includes utilities that help simplify many common use cases, including store setup,
creating reducers and writing immutable update logic, and even creating entire "slices" of
state at once.

205 | P a g e
Whether you're a brand new Redux user setting up your first project, or an experienced user
who wants to simplify an existing application, Redux Toolkit can help you make your Redux
code better.

Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node
application:

# NPM
npminstall @reduxjs/toolkit

# Yarn
yarnadd @reduxjs/toolkit
Create a React Redux App

The recommended way to start new apps with React and Redux is by using the official
Redux+JS template or Redux+TS template for Create React App, which takes advantage of
Redux Toolkit and React Redux's integration with React components.

# Redux + Plain JS template

npx create-react-app my-app --template redux

# Redux + TypeScript template

npx create-react-app my-app --template redux-typescript
Redux Core

The Redux core library is available as a package on NPM for use with a module bundler or in
a Node application:

# NPM
npminstall redux

# Yarn
yarnadd redux

It is also available as a precompiled UMD package that defines a window.Redux global

variable. The UMD package can be used as a <script> tag directly.

For more details, see the Installation page.

Basic Example
The whole global state of your app is stored in an object tree inside a single store. The only
way to change the state tree is to create an action, an object describing what happened, and
dispatch it to the store. To specify how state gets updated in response to an action, you write
pure reducer functions that calculate a new state based on the old state and the action.

import{ createStore } from'redux'

/**
* This is a reducer - a function that takes a current state value and an
* action object describing "what happened", and returns a new state value.
* A reducer's function signature is: (state, action) =>newState

206 | P a g e
 *
* The Redux state should contain only plain JS objects, arrays, and primitives.
* The root state value is usually an object. It's important that you should
* not mutate the state object, but return a new object if the state changes.
*
* You can use any conditional logic you want in a reducer. In this example,
* we use a switch statement, but it's not required.
*/
functioncounterReducer(state = { value: 0 }, action) {
switch (action.type) {
case'counter/incremented':
return { value: state.value + 1 }
case'counter/decremented':
return { value: state.value - 1 }
default:
return state
}
}

// Create a Redux store holding the state of your app.

// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.

// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// There may be additional use cases where it's helpful to subscribe as well.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.

// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

Instead of mutating the state directly, you specify the mutations you want to happen with
plain objects called actions. Then you write a special function called a reducer to decide how
every action transforms the entire application's state.

In a typical Redux app, there is just a single store with a single root reducing function. As
your app grows, you split the root reducer into smaller reducers independently operating on
the different parts of the state tree. This is exactly like how there is just one root component
in a React app, but it is composed out of many small components.

This architecture might seem like a lot for a counter app, but the beauty of this pattern is how
well it scales to large and complex apps. It also enables very powerful developer tools,
because it is possible to trace every mutation to the action that caused it. You can record user
sessions and reproduce them just by replaying every action.

Redux Toolkit Example

Redux Toolkit simplifies the process of writing Redux logic and setting up the store. With
Redux Toolkit, that same logic looks like:

207 | P a g e
import{ createSlice, configureStore } from'@reduxjs/toolkit'

constcounterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
incremented: state => {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
state.value += 1
},
decremented: state => {
state.value -= 1
}
}
})

exportconst { incremented, decremented } = counterSlice.actions

const store = configureStore({

reducer: counterSlice.reducer
})

// Can still subscribe to the store

store.subscribe(() => console.log(store.getState()))

// Still pass action objects to `dispatch`, but they're created for us

store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}

Redux Toolkit allows us to write shorter logic that's easier to read, while still following the
same Redux behavior and data flow.

Learn Redux
We have a variety of resources available to help you learn Redux.

Redux Essentials Tutorial

The Redux Essentials tutorial is a "top-down" tutorial that teaches "how to use Redux the
right way", using our latest recommended APIs and best practices. We recommend starting
there.

Redux Fundamentals Tutorial

The Redux Fundamentals tutorial is a "bottom-up" tutorial that teaches "how Redux
works" from first principles and without any abstractions, and why standard Redux usage

208 | P a g e
patterns exist.

Redux - Data Flow

Redux - Data Flow
Redux follows the unidirectional data flow. It means that your application data will follow in
one-way binding data flow. As the application grows & becomes complex, it is hard to
reproduce issues and add new features if you have no control over the state of your
application.

Redux reduces the complexity of the code, by enforcing the restriction on how and when state
update can happen. This way, managing updated states is easy. We already know about the
restrictions as the three principles of Redux. Following diagram will help you understand
Redux data flow better −

 An action is dispatched when a user interacts with the application.

 The root reducer function is called with the current state and the dispatched action.
The root reducer may divide the task among smaller reducer functions, which
ultimately returns a new state.
 The store notifies the view by executing their callback functions.
 The view can retrieve updated state and re-render again.

Client-Server Communication

209 | P a g e
Let's expand the application so that the notes are stored in the backend. We'll use json-server,
familiar from part 2.

The initial state of the database is stored in the file db.json, which is placed in the root of the
project:

{
"notes": [
{
"content": "the app state is in redux store",
"important": true,
"id": 1
},
{
"content": "state changes are made with actions",
"important": false,
"id": 2
}
]
}

We'll install json-server for the project...

npm install json-server --save-dev

and add the following line to the scripts part of the file package.json

"scripts": {
"server": "json-server -p3001 --watch db.json",
// ...
}

Now let's launch json-server with the command npm run server.

Next, we'll create a method into the file services/notes.js, which uses axios to fetch data from
the backend

import axios from 'axios'

constbaseUrl = 'http://localhost:3001/notes'

constgetAll = async () => {

const response = await axios.get(baseUrl)
return response.data
}

export default { getAll }

We'll add axios to the project

npm install axios

We'll change the initialization of the state in noteReducer, so that by default there are no
notes:

210 | P a g e
constnoteSlice = createSlice({
name: 'notes',
initialState: [], // ...
})

Let's also add a new action appendNote for adding a note object:

constnoteSlice = createSlice({
name: 'notes',
initialState: [],
reducers: {
createNote(state, action) {
const content = action.payload

state.push({
content,
important: false,
id: generateId(),
})
},
toggleImportanceOf(state, action) {
const id = action.payload

constnoteToChange = state.find(n => n.id === id)

constchangedNote = {
...noteToChange,
important: !noteToChange.important
}

return state.map(note =>

note.id !== id ? note : changedNote
)
},
appendNote(state, action) { state.push(action.payload) } },
})

export const{ createNote, toggleImportanceOf, appendNote } = noteSlice.actions

export default noteSlice.reducer

A quick way to initialize the notes state based on the data received from the server is to fetch
the notes in the index.js file and dispatch an action using the appendNote action creator for
each individual note object:

// ...
import noteService from './services/notes'importnoteReducer, { appendNote } from './reducers/noteReducer'
const store = configureStore({
reducer: {
notes: noteReducer,
filter: filterReducer,
}
})

noteService.getAll().then(notes =>notes.forEach(note => { store.dispatch(appendNote(note)) }))

// ...

Dispatching multiple actions seems a bit impractical. Let's add an action creator setNotes
which can be used to directly replace the notes array. We'll get the action creator from the

211 | P a g e
createSlice function by implementing the setNotes action:

// ...

constnoteSlice = createSlice({
name: 'notes',
initialState: [],
reducers: {
createNote(state, action) {
const content = action.payload

state.push({
content,
important: false,
id: generateId(),
})
},
toggleImportanceOf(state, action) {
const id = action.payload

constnoteToChange = state.find(n => n.id === id)

constchangedNote = {
...noteToChange,
important: !noteToChange.important
}

return state.map(note =>

note.id !== id ? note : changedNote
)
},
appendNote(state, action) {
state.push(action.payload)
},
setNotes(state, action) { return action.payload } },
})

export const{ createNote, toggleImportanceOf, appendNote, setNotes } = noteSlice.actions

export default noteSlice.reducer

Now, the code in the index.js file looks a lot better:

// ...
import noteService from './services/notes'
import noteReducer, { setNotes } from './reducers/noteReducer'
const store = configureStore({
reducer: {
notes: noteReducer,
filter: filterReducer,
}
})

noteService.getAll().then(notes =>
store.dispatch(setNotes(notes)))

NB: why didn't we use await in place of promises and event handlers (registered to then-
methods)?

212 | P a g e
Await only works inside async functions, and the code in index.js is not inside a function, so
due to the simple nature of the operation, we'll abstain from using async this time.

We do, however, decide to move the initialization of the notes into the App component, and,
as usual, when fetching data from a server, we'll use the effect hook.

import { useEffect } from 'react'importNewNote from './components/NewNote'

import Notes from './components/Notes'
import VisibilityFilter from './components/VisibilityFilter'
import noteService from './services/notes'import { setNotes } from './reducers/noteReducer'import { useDispatch
} from 'react-redux'
const App = () => {
const dispatch = useDispatch() useEffect(() => { noteService .getAll().then(notes =>
dispatch(setNotes(notes))) }, [])
return (
<div>
<NewNote />
<VisibilityFilter />
<Notes />
</div>
)
}

export default App

Using the useEffect hook causes an eslint warning:

We can get rid of it by doing the following:

const App = () => {

const dispatch = useDispatch()
useEffect(() => {
noteService
.getAll().then(notes => dispatch(setNotes(notes)))
}, [dispatch])
// ...
}

Now the variable dispatch we define in the App component, which practically is the dispatch
function of the redux store, has been added to the array useEffect receives as a parameter. If
the value of the dispatch variable would change during runtime, the effect would be executed
again. This however cannot happen in our application, so the warning is unnecessary.

213 | P a g e
Another way to get rid of the warning would be to disable ESlint on that line:

const App = () => {

const dispatch = useDispatch()
useEffect(() => {
noteService
.getAll().then(notes => dispatch(setNotes(notes)))
}, []) // eslint-disable-line react-hooks/exhaustive-deps
// ...
}

Generally disabling ESlint when it throws a warning is not a good idea. Even though the
ESlint rule in question has caused some arguments, we will use the first solution.

More about the need to define the hooks dependencies in the react documentation.

We can do the same thing when it comes to creating a new note. Let's expand the code
communicating with the server as follows:

constbaseUrl = 'http://localhost:3001/notes'

constgetAll = async () => {

const response = await axios.get(baseUrl)
return response.data
}

constcreateNew = async (content) =>{ const object = { content, important: false } const response = await
axios.post(baseUrl, object) return response.data}
export default {
getAll,
createNew,
}

The method addNote of the component NewNote changes slightly:

import { useDispatch } from 'react-redux'

import { createNote } from '../reducers/noteReducer'
import noteService from '../services/notes'
constNewNote = (props) => {
const dispatch = useDispatch()

constaddNote = async (event) =>{ event.preventDefault()

const content = event.target.note.value
event.target.note.value = ''
constnewNote = await noteService.createNew(content) dispatch(createNote(newNote)) }

return (
<form onSubmit={addNote}>
<input name="note" />
<button type="submit">add</button>
</form>
)
}

export default NewNote

Because the backend generates ids for the notes, we'll change the action creator createNote

214 | P a g e
accordingly:

createNote(state, action) {
state.push(action.payload)
}

Changing the importance of notes could be implemented using the same principle, by making
an asynchronous method call to the server and then dispatching an appropriate action.

UNIT – IV

Java Web Development

Web development is known as website development or web application development. The
web development creates, maintains, and updates web development applications using a
browser. This web development requires web designing, backend programming, and database
management. The development process requires software technology.

Web development creates web applications using servers. We can use a web server or
machine server like a CPU. The Web server or virtual server requires web application using
technology. Web development requires server-side programming language or technology.
Mostly Java, PHP, and other server-side languages require for web development.

Java web development creates a server-side website and web application. The majority of
Java web apps do not execute on the server directly. A web container on the server hosts Java
web applications.

For Java web applications, the container acts as a runtime environment. What the Java Virtual
Machine is for locally running Java applications, the container is for Java web applications.
JVM is used to run the container itself.

Java distinguishes between two types of containers: web and Java EE. Additional
functionality, such as server load distribution, can be supported by a container. A web
container supports Java servlets and JSP ( JavaServer Pages ). In Java technology, Tomcat is
a common web container.

A web container is usually a minimal need for web frameworks. GWT, Struts, JavaServer
Faces, and the Spring framework are common Java web frameworks. Servlets are at the heart
of most modern Java web frameworks.

215 | P a g e
Functions of Java Web Development
Java web development creates applications and websites using static and dynamic resources.
The static resource refers to HTML pages with images, and a dynamic resource refers to
classes, jars, Servlet, and JSP. Java web development uses several packages, files, and online
links. Java web development requires web archive files known as a WAR files.

Java web development works on three main factors. These development factors show below.

 Front-end web development using Java technology.

 Backend web development using Java server technology.
 Database management using Java database driver.

The above three factors create, update, remove, display and operate data or information.

Front-end web development: The front-end technology interacts with the user and Java
interface. It helps to insert and submit data. Java web development uses JavaServer Pages or
JSP for the front-end form or table.

Backend web development: The backend technology maintains and updates data of the
database. Java uses Servlet, spring, and other advanced technology.

Database management handles or fetches data from the database using the Java database
driver. The Java technology uses JDBC, Hibernate to handle the database.

Types of the Java Web Technologies

 Servlet API
 JSP (JavaServer page)
 JDBC Driver
 JAVA Persistence
 JavaServer Faces (JSF)
 JSTL
 JAVA Message Service API

216 | P a g e
Servlet API (JAVA Web application programming interface)

Servlet, filter, filter chain, servlet config, and other interfaces are available in the javax.
Servlet package. The capabilities of servers that host apps are increased by using Servlet.

The request-response model is used in web development applications written with Java
servlets. From initialization to garbage collection, a servlet has a life cycle.

Servlets are useful for various tasks, including collecting data via web page forms, presenting
data from a database or any other third-party source, etc.

Servlets are Java programs that run on a web application and send client requests to databases
or servers. After talking with the database, the servlets help process the client's request and
provide results.

JSP (JavaServer Page Web application programming technology)

Developers employ JavaServer Pages or JSP technology to quickly produce platform- and
server-independent online content. Normally, the developer works on separate Common
Gateway Interface files to embed dynamic elements in HTML pages. Java JSP technology
can be used, as it has access to the whole Java API family.

The JSP technology pieces code to control web information and moves dynamically. A JSP
page comprises static data written in HTML, WML, XML, and other markup languages.
Special JSP tags simplify Java code into HTML pages, making web development user-
friendly.

The JSP technology allows embedding bits of servlet code in a text-based document. JSP is a
popular Java EE technology that allows programmers to create complex dynamic web pages
quickly.

JDBC Driver or Java Database Connectivity

JDBC Driver is a connector between database and Java web application. Java database

217 | P a g e
connectivity helps to update and modify data using queries. The jdbc driver is an essential
part of Java web development. This driver helps to send data to the database and retrieve data
from the database.

Within a Java program, the JDBC driver allows to perform the following tasks:

 Make a data source connection

 To the data source, send queries and update statements
 Displays require data from a database.
 Organize application information.

JDBC is a set of methods and queries for accessing databases written in Java. Clients can use
web applications using JDBC drivers to update any information in the database.

JDBC drivers connect to databases in four ways: JDBC-ODBC Bridge Driver, Network
Protocol Driver, Native Driver, and Thin Driver.

Persistence API for Java

For web development, the Java Persistence API employs object-relational mapping. This
mapping connects a database to an object-oriented model. Java Persistence makes it simple to
manage relational data in Java web applications. The Java Persistence API aids in database
data management. This API sends data to a database and retrieves data from it regularly.

Large amounts of code, proprietary frameworks, and other files are not required. JPA gives a
straightforward technique of database communication. A database is an object-relational
approach for interacting with Java web development. JPA is a set of lightweight classes and
methods for interacting with databases.

Technology of the JavaServer Faces

JavaServer Faces is called a JSF Technology. This technology provides a framework for
developing web-based interfaces. JSF provides a simple model for components in various
scripting or markup languages.

The data sources and server-side event handlers are coupled to the User Interface widgets.
JSF aids in the creation and maintenance of web applications by minimizing the time and
effort required.

 Construct Java web development pages.

 Drop components on a web page by adding component tags to a web page.
 Connect Java web development page components to server-side data.
 Connect component-generated events to application code running on the server.
 Extend the life of server requests by storing and restoring the application state.

Standard Tag Library for JavaServer Pages (JSTL)

The JavaServer Pages Standard Tag Library or JSTL abstracts common functionality of JSP-
based applications. We use a single standard set of tags to incorporate tags from various
vendors into web applications. This standardization enables the establishment of Java

218 | P a g e
applications on any JSP container. It supports JSTL and increases the tags to optimize during
implementation.

JSTL includes iterator and conditional tags for controlling flow. These tags work for
manipulating XML documents and tags for internationalization. This JSTL is also used for
SQL database access and tags for frequently used functions.

API for Java Message Service

Messaging is a way for software components or apps to communicate with one another. A
messaging system is a type of peer-to-peer network. In other words, a messaging client can
communicate with and be communicated with by any other client.

Each client establishes a connection with a messaging agent, facilitating the creation,
transmission, receipt, and reading of messages.

The Java Message Service (JMS) API provides a strong tool for resolving enterprise
computing problems by integrating Java technology and enterprise messaging.

Enterprise messaging enables the secure and flexible sharing of business data. The JMS API
extends this by providing a uniform API and provider framework that facilitates the building
of portable message-based Java applications.

Special Features of the Java web development

 Java is a mature, versatile, and powerful programming language.
 Additionally, it is popular, which means that tools and assistance for Java web development
are readily available.
 Java's platform freedom is one of its strongest characteristics. Java code can be executed on
any platform, including a Mac or a Windows computer. On any operating system, we can run
a Java web application.
 Java is also capable of running mobile applications on smartphones and tablets.
 Java web development does not require additional effort to design and run web apps across
several platforms.
 Java also includes an enormous standard library. This library readily works with common
tasks such as input and output, networking, and graphic user interfaces. It provides tools to
help web application developers.

Conclusion
Java programming language is easy to handle and programmer's first choice for web
development. Java web development has basic rules apart from operating data. This
technology does not need an extra operation or advanced programming.

Java web development creates multiple web applications using a single type of code on
multiple pages. If we know the working procedure, then JAVA technology develops any
application.

JAVA PROGRAMMING BASICS

219 | P a g e
What is Java?
Java is a high-level, general-purpose, object-oriented, and secure programming language
developed by James Gosling at Sun Microsystems, Inc. in 1991. It is formally known as
OAK. In 1995, Sun Microsystem changed the name to Java. In 2009, Sun Microsystem
takeover by Oracle Corporation.

Editions of Java
Each edition of Java has different capabilities. There are three editions of Java:

 Java Standard Editions (JSE): It is used to create programs for a desktop computer.
 Java Enterprise Edition (JEE): It is used to create large programs that run on the
server and manages heavy traffic and complex transactions.
 Java Micro Edition (JME): It is used to develop applications for small devices such
as set-top boxes, phone, and appliances.

Types of Java Applications

There are four types of Java applications that can be created using Java programming:

 Standalone Applications: Java standalone applications uses GUI components such

as AWT, Swing, and JavaFX. These components contain buttons, list, menu, scroll
panel, etc. It is also known as desktop alienations.
 Enterprise Applications: An application which is distributed in nature is called
enterprise applications.
 Web Applications: An applications that run on the server is called web applications.
We use JSP, Servlet, Spring, and Hibernate technologies for creating web
applications.
 Mobile Applications: Java ME is a cross-platform to develop mobile applications
which run across smartphones. Java is a platform for App Development in Android.

Java Platform
Java Platform is a collection of programs. It helps to develop and run a program written in the
Java programming language. Java Platform includes an execution engine, a compiler and set
of libraries. Java is a platform-independent language.

Features of Java
 Simple: Java is a simple language because its syntax is simple, clean, and easy to
understand. Complex and ambiguous concepts of C++ are either eliminated or re-
implemented in Java. For example, pointer and operator overloading are not used in
Java.
 Object-Oriented: In Java, everything is in the form of the object. It means it has
some data and behavior. A program must have at least one class and object.
 Robust: Java makes an effort to check error at run time and compile time. It uses a

220 | P a g e
 strong memory management system called garbage collector. Exception handling and
garbage collection features make it strong.
 Secure: Java is a secure programming language because it has no explicit pointer and
programs runs in the virtual machine. Java contains a security manager that defines
the access of Java classes.
 Platform-Independent: Java provides a guarantee that code writes once and run
anywhere. This byte code is platform-independent and can be run on any machine.

 Portable: Java Byte code can be carried to any platform. No implementation-

dependent features. Everything related to storage is predefined, for example, the size
of primitive data types.
 High Performance: Java is an interpreted language. Java enables high performance
with the use of the Just-In-Time compiler.
 Distributed: Java also has networking facilities. It is designed for the distributed
environment of the internet because it supports TCP/IP protocol. It can run over the
internet. EJB and RMI are used to create a distributed system.
 Multi-threaded: Java also supports multi-threading. It means to handle more than
one job a time.

OOPs (Object Oriented Programming System)

Object-oriented programming is a way of solving a complex problem by breaking them into a
small sub-problem. An object is a real-world entity. It is easier to develop a program by using
an object. In OOPs, we create programs using class and object in a structured manner.

Class: A class is a template or blueprint or prototype that defines data members and methods
of an object. An object is the instance of the class. We can define a class by using the class
keyword.

Object: An object is a real-world entity that can be identified distinctly. For example, a desk,
a circle can be considered as objects. An object has a unique behavior, identity, and state.
Data fields with their current values represent the state of an object (also known as its
properties or attributes).

Abstraction: An abstraction is a method of hiding irrelevant information from the user. For
example, the driver only knows how to drive a car; there is no need to know how does the car
run. We can make a class abstract by using the keyword abstract. In Java, we use abstract
class and interface to achieve abstraction.

Encapsulation: An encapsulation is the process of binding data and functions into a single
unit. A class is an example of encapsulation. In Java, Java bean is a fully encapsulated class.

221 | P a g e
Inheritance: Inheritance is the mechanism in which one class acquire all the features of
another class. We can achieve inheritance by using the extends keyword. It facilitates the
reusability of the code.

Polymorphism: The polymorphism is the ability to appear in many forms. In other words,
single action in different ways. For example, a boy in the classroom behaves like a student, in
house behaves like a son. There are two types of polymorphism: run time polymorphism and
compile-time polymorphism.

Java Variables
A variable is a container which holds the value while the Java program is executed. A
variable is assigned with a data type.

Variable is a name of memory location. There are three types of variables in java: local,
instance and static.

There are two types of data types in Java: primitive and non-primitive.

Variable
A variable is the name of a reserved area allocated in memory. In other words, it is a name of
the memory location. It is a combination of "vary + able" which means its value can be
changed.

1. int data=50;//Here data is variable

Types of Variables

222 | P a g e
There are three types of variables in Java:

 local variable
 instance variable
 static variable

1) Local Variable

A variable declared inside the body of the method is called local variable. You can use this
variable only within that method and the other methods in the class aren't even aware that the
variable exists.

A local variable cannot be defined with "static" keyword.

2) Instance Variable

A variable declared inside the class but outside the body of the method, is called an instance
variable. It is not declared as static.

It is called an instance variable because its value is instance-specific and is not shared among

223 | P a g e
instances.

3) Static variable

A variable that is declared as static is called a static variable. It cannot be local. You can
create a single copy of the static variable and share it among all the instances of the class.
Memory allocation for static variables happens only once when the class is loaded in the
memory.

Example to understand the types of variables in java

1. public class A
2. {
3. static int m=100;//static variable
4. void method()
5. {
6. int n=90;//local variable
7. }
8. public static void main(String args[])
9. {
10. int data=50;//instance variable
11. }
12. }//end of class

Java Variable Example: Add Two Numbers

1. public class Simple{

2. public static void main(String[] args){
3. int a=10;
4. int b=10;
5. int c=a+b;
6. System.out.println(c);
7. }
8. }

Output:

20
Java Variable Example: Widening

1. public class Simple{

2. public static void main(String[] args){
3. int a=10;
4. float f=a;
5. System.out.println(a);
6. System.out.println(f);
7. }}

Output:

10

224 | P a g e
10.0
Java Variable Example: Narrowing (Typecasting)

1. public class Simple{

2. public static void main(String[] args){
3. float f=10.5f;
4. //int a=f;//Compile time error
5. int a=(int)f;
6. System.out.println(f);
7. System.out.println(a);
8. }}

Output:

10.5
10
Java Variable Example: Overflow

1. class Simple{
2. public static void main(String[] args){
3. //Overflow
4. int a=130;
5. byte b=(byte)a;
6. System.out.println(a);
7. System.out.println(b);
8. }}

Output:

130
-126
Java Variable Example: Adding Lower Type

1. class Simple{
2. public static void main(String[] args){
3. byte a=10;
4. byte b=10;
5. //byte c=a+b;//Compile Time Error: because a+b=20 will be int
6. byte c=(byte)(a+b);
7. System.out.println(c);
8. }}

Output:

20

Java OOPs Concepts

1. Object-Oriented Programming
2. Advantage of OOPs over Procedure-oriented programming language

225 | P a g e
 3. Difference between Object-oriented and Object-based programming language.

In this page, we will learn about the basics of OOPs. Object-Oriented Programming is a
paradigm that provides many concepts, such as inheritance, data binding, polymorphism,
etc.

Simula is considered the first object-oriented programming language. The programming

paradigm where everything is represented as an object is known as a truly object-oriented
programming language.

Smalltalk is considered the first truly object-oriented programming language.

The popular object-oriented languages are Java, C#, PHP, Python, C++, etc.

The main aim of object-oriented programming is to implement real-world entities, for

example, object, classes, abstraction, inheritance, polymorphism, etc.

OOPs (Object-Oriented Programming System)

Object means a real-world entity such as a pen, chair, table, computer, watch, etc. Object-
Oriented Programming is a methodology or paradigm to design a program using classes
and objects. It simplifies software development and maintenance by providing some
concepts:

 Object
 Class
 Inheritance
 Polymorphism
 Abstraction
 Encapsulation

Apart from these concepts, there are some other terms which are used in Object-Oriented
design:

 Coupling
 Cohesion
 Association
 Aggregation
 Composition

226 | P a g e
Object

Any entity that has state and behavior is known as an object. For example, a chair, pen, table,
keyboard, bike, etc. It can be physical or logical.

An Object can be defined as an instance of a class. An object contains an address and takes

227 | P a g e
up some space in memory. Objects can communicate without knowing the details of each
other's data or code. The only necessary thing is the type of message accepted and the type of
response returned by the objects.

Example: A dog is an object because it has states like color, name, breed, etc. as well as
behaviors like wagging the tail, barking, eating, etc.

Class
Collection of objects is called class. It is a logical entity.

A class can also be defined as a blueprint from which you can create an individual object.
Class doesn't consume any space.

Inheritance

When one object acquires all the properties and behaviors of a parent object, it is known as
inheritance. It provides code reusability. It is used to achieve runtime polymorphism.

Polymorphism

If one task is performed in different ways, it is known as polymorphism. For example: to

convince the customer differently, to draw something, for example, shape, triangle, rectangle,
etc.

In Java, we use method overloading and method overriding to achieve polymorphism.

Another example can be to speak something; for example, a cat speaks meow, dog barks
woof, etc.

Abstraction

Hiding internal details and showing functionality is known as abstraction. For example phone
call, we don't know the internal processing.

228 | P a g e
In Java, we use abstract class and interface to achieve abstraction.

Encapsulation

Binding (or wrapping) code and data together into a single unit are known as encapsulation.
For example, a capsule, it is wrapped with different medicines.

A java class is the example of encapsulation. Java bean is the fully encapsulated class
because all the data members are private here.

Coupling

Coupling refers to the knowledge or information or dependency of another class. It arises

when classes are aware of each other. If a class has the details information of another class,
there is strong coupling. In Java, we use private, protected, and public modifiers to display
the visibility level of a class, method, and field. You can use interfaces for the weaker
coupling because there is no concrete implementation.

Cohesion

Cohesion refers to the level of a component which performs a single well-defined task. A
single well-defined task is done by a highly cohesive method. The weakly cohesive method
will split the task into separate parts. The java.io package is a highly cohesive package
because it has I/O related classes and interface. However, the java.util package is a weakly
cohesive package because it has unrelated classes and interfaces.

Association

Association represents the relationship between the objects. Here, one object can be
associated with one object or many objects. There can be four types of association between
the objects:

 One to One
 One to Many
 Many to One, and
 Many to Many

Let's understand the relationship with real-time examples. For example, One country can
have one prime minister (one to one), and a prime minister can have many ministers (one to
many). Also, many MP's can have one prime minister (many to one), and many ministers can
have many departments (many to many).

Association can be undirectional or bidirectional.

229 | P a g e
Aggregation

Aggregation is a way to achieve Association. Aggregation represents the relationship where

one object contains other objects as a part of its state. It represents the weak relationship
between objects. It is also termed as a has-a relationship in Java. Like, inheritance represents
the is-a relationship. It is another way to reuse objects.

Composition

The composition is also a way to achieve Association. The composition represents the
relationship where one object contains other objects as a part of its state. There is a strong
relationship between the containing object and the dependent object. It is the state where
containing objects do not have an independent existence. If you delete the parent object, all
the child objects will be deleted automatically.

Advantage of OOPs over Procedure-oriented

programming language
1) OOPs makes development and maintenance easier, whereas, in a procedure-oriented
programming language, it is not easy to manage if code grows as project size increases.

2) OOPs provides data hiding, whereas, in a procedure-oriented programming language,

global data can be accessed from anywhere.

Figure: Data Representation in Procedure-Oriented Programming

230 | P a g e
Figure: Data Representation in Object-Oriented Programming

3) OOPs provides the ability to simulate real-world event much more effectively. We can
provide the solution of real word problem if we are using the Object-Oriented Programming
language.

What is the difference between an object-oriented

programming language and object-based programming
language?
Object-based programming language follows all the features of OOPs except Inheritance.
JavaScript and VBScript are examples of object-based programming languages.

MVC Architecture in Java

The Model-View-Controller (MVC) is a well-known design pattern in the web development
field. It is way to organize our code. It specifies that a program or application shall consist of
data model, presentation information and control information. The MVC pattern needs all
these components to be separated as different objects.

In this section, we will discuss the MVC Architecture in Java, alongwith its advantages and
disadvantages and examples to understand the implementation of MVC in Java.

What is MVC architecture in Java?

The model designs based on the MVC architecture follow MVC design pattern. The
application logic is separated from the user interface while designing the software using
model designs.

231 | P a g e
The MVC pattern architecture consists of three layers:

 Model: It represents the business layer of application. It is an object to carry the data that can
also contain the logic to update controller if data is changed.
 View: It represents the presentation layer of application. It is used to visualize the data that
the model contains.
 Controller: It works on both the model and view. It is used to manage the flow of
application, i.e. data flow in the model object and to update the view whenever data is
changed.

In Java Programming, the Model contains the simple Java classes, the View used to display
the data and the Controller contains the servlets. Due to this separation the user requests are
processed as follows:

1. A client (browser) sends a request to the controller on the server side, for a page.
2. The controller then calls the model. It gathers the requested data.
3. Then the controller transfers the data retrieved to the view layer.
4. Now the result is sent back to the browser (client) by the view.

Advantages of MVC Architecture

The advantages of MVC architecture are as follows:

 MVC has the feature of scalability that in turn helps the growth of application.
 The components are easy to maintain because there is less dependency.
 A model can be reused by multiple views that provides reusability of code.
 The developers can work with the three layers (Model, View, and Controller) simultaneously.
 Using MVC, the application becomes more understandable.
 Using MVC, each layer is maintained separately therefore we do not require to deal with
massive code.
 The extending and testing of application is easier.

Implementation of MVC using Java

To implement MVC pattern in Java, we are required to create the following three classes.

232 | P a g e
  Employee Class, will act as model layer
 EmployeeView Class, will act as a view layer
 EmployeeContoller Class, will act a controller layer

MVC Architecture Layers

Model Layer

The Model in the MVC design pattern acts as a data layer for the application. It represents the
business logic for application and also the state of application. The model object fetch and
store the model state in the database. Using the model layer, rules are applied to the data that
represents the concepts of application.

Let's consider the following code snippet that creates a which is also the first step to
implement MVC pattern.

Employee.java

1. // class that represents model

2. public class Employee {
3.
4. // declaring the variables
5. private String EmployeeName;
6. private String EmployeeId;
7. private String EmployeeDepartment;
8.
9. // defining getter and setter methods
10. public String getId() {
11. return EmployeeId;
12. }
13.
14. public void setId(String id) {
15. this.EmployeeId = id;
16. }
17.
18. public String getName() {
19. return EmployeeName;
20. }
21.
22. public void setName(String name) {
23. this.EmployeeName = name;
24. }
25.
26. public String getDepartment() {
27. return EmployeeDepartment;
28. }
29.
30. public void setDepartment(String Department) {
31. this.EmployeeDepartment = Department;
32. }
33.

233 | P a g e
 34. }

The above code simply consists of getter and setter methods to the Employee class.

View Layer

As the name depicts, view represents the visualization of data received from the model. The
view layer consists of output of application or user interface. It sends the requested data to the
client, that is fetched from model layer by controller.

Let's take an example where we create a view using the EmployeeView class.

EmployeeView.java

1. // class which represents the view

2. public class EmployeeView {
3.
4. // method to display the Employee details
5. public void printEmployeeDetails (String EmployeeName, String EmployeeId, String
EmployeeDepartment){
6. System.out.println("Employee Details: ");
7. System.out.println("Name: " + EmployeeName);
8. System.out.println("Employee ID: " + EmployeeId);
9. System.out.println("Employee Department: " + EmployeeDepartment);
10. }
11. }

Controller Layer

The controller layer gets the user requests from the view layer and processes them, with the
necessary validations. It acts as an interface between Model and View. The requests are then
sent to model for data processing. Once they are processed, the data is sent back to the
controller and then displayed on the view.

Let's consider the following code snippet that creates the controller using the
EmployeeController class.

EmployeeController.java

1. // class which represent the controller

2. public class EmployeeController {
3.
4. // declaring the variables model and view
5. private Employee model;
6. private EmployeeView view;
7.
8. // constructor to initialize
9. public EmployeeController(Employee model, EmployeeView view) {
10. this.model = model;
11. this.view = view;
12. }

234 | P a g e
 13.
14. // getter and setter methods
15. public void setEmployeeName(String name){
16. model.setName(name);
17. }
18.
19. public String getEmployeeName(){
20. return model.getName();
21. }
22.
23. public void setEmployeeId(String id){
24. model.setId(id);
25. }
26.
27. public String getEmployeeId(){
28. return model.getId();
29. }
30.
31. public void setEmployeeDepartment(String Department){
32. model.setDepartment(Department);
33. }
34.
35. public String getEmployeeDepartment(){
36. return model.getDepartment();
37. }
38.
39. // method to update view
40. public void updateView() {
41. view.printEmployeeDetails(model.getName(), model.getId(), model.getDepart
ment());
42. }
43. }

Main Class Java file

The following example displays the main file to implement the MVC architecture. Here, we
are using the MVCMain class.

MVCMain.java

1. // main class
2. public class MVCMain {
3. public static void main(String[] args) {
4.
5. // fetching the employee record based on the employee_id from the database
6. Employee model = retriveEmployeeFromDatabase();
7.
8. // creating a view to write Employee details on console
9. EmployeeView view = new EmployeeView();
10.
11. EmployeeController controller = new EmployeeController(model, view);

235 | P a g e
 12.
13. controller.updateView();
14.
15. //updating the model data
16. controller.setEmployeeName("Nirnay");
17. System.out.println("\n Employee Details after updating: ");
18.
19. controller.updateView();
20. }
21.
22. private static Employee retriveEmployeeFromDatabase(){
23. Employee Employee = new Employee();
24. Employee.setName("Anu");
25. Employee.setId("11");
26. Employee.setDepartment("Salesforce");
27. return Employee;
28. }
29. }

The MVCMain class fetches the employee data from the method where we have entered the
values. Then it pushes those values in the model. After that, it initializes the view
(EmployeeView.java). When view is initialized, the Controller (EmployeeController.java) is
invoked and bind it to Employee class and EmployeeView class. At last the updateView()
method (method of controller) update the employee details to be printed to the console.

Output:

Employee Details:
Name: Anu
Employee ID: 11
Employee Department: Salesforce

Employee Details after updating:

Name: Nirnay
Employee ID: 11
Employee Department: Salesforce

In this way, we have learned about MVC Architecture, significance of each layer and its
implementation in Java.

Spring MVC Tutorial

A Spring MVC is a Java framework which is used to build web applications. It follows the
Model-View-Controller design pattern. It implements all the basic features of a core spring
framework like Inversion of Control, Dependency Injection.

A Spring MVC provides an elegant solution to use MVC in spring framework by the help of
DispatcherServlet. Here, DispatcherServlet is a class that receives the incoming request
and maps it to the right resource such as controllers, models, and views.

236 | P a g e
Spring Web Model-View-Controller

 Model - A model contains the data of the application. A data can be a single object or a
collection of objects.
 Controller - A controller contains the business logic of an application. Here, the @Controller
annotation is used to mark the class as the controller.
 View - A view represents the provided information in a particular format. Generally,
JSP+JSTL is used to create a view page. Although spring also supports other view
technologies such as Apache Velocity, Thymeleaf and FreeMarker.
 Front Controller - In Spring Web MVC, the DispatcherServlet class works as the front
controller. It is responsible to manage the flow of the Spring MVC application.

Understanding the flow of Spring Web MVC

237 | P a g e
  As displayed in the figure, all the incoming request is intercepted by the DispatcherServlet
that works as the front controller.
 The DispatcherServlet gets an entry of handler mapping from the XML file and forwards the
request to the controller.
 The controller returns an object of ModelAndView.
 The DispatcherServlet checks the entry of view resolver in the XML file and invokes the
specified view component.

Advantages of Spring MVC Framework

Let's see some of the advantages of Spring MVC Framework:-

 Separate roles - The Spring MVC separates each role, where the model object, controller,
command object, view resolver, DispatcherServlet, validator, etc. can be fulfilled by a
specialized object.
 Light-weight - It uses light-weight servlet container to develop and deploy your application.
 Powerful Configuration - It provides a robust configuration for both framework and
application classes that includes easy referencing across contexts, such as from web
controllers to business objects and validators.
 Rapid development - The Spring MVC facilitates fast and parallel development.
 Reusable business code - Instead of creating new objects, it allows us to use the existing
business objects.
 Easy to test - In Spring, generally we create JavaBeans classes that enable you to inject test
data using the setter methods.
 Flexible Mapping - It provides the specific annotations that easily redirect the page.

Spring Web MVC Framework Example

Let's see the simple example of a Spring Web MVC framework. The steps are as follows:

 Load the spring jar files or add dependencies in the case of Maven
 Create the controller class
 Provide the entry of controller in the web.xml file
 Define the bean in the separate XML file
 Display the message in the JSP page
 Start the server and deploy the project

Directory Structure of Spring MVC

238 | P a g e
Directory Structure of Spring MVC using Maven

Required Jar files or Maven Dependency

To run this example, you need to load:

 Spring Core jar files

239 | P a g e
  Spring Web jar files
 JSP + JSTL jar files (If you are using any another view technology then load the
corresponding jar files).

Download Link:Download all the jar files for spring including JSP and JSTL.

If you are using Maven, you don't need to add jar files. Now, you need to add maven
dependency to the pom.xml file.

1. Provide project information and configuration in the pom.xml file.

pom.xml

1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org

/2001/XMLSchema-instance"
2. xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-
v4_0_0.xsd">
3. <modelVersion>4.0.0</modelVersion>
4. <groupId>com.javatpoint</groupId>
5. <artifactId>SpringMVC</artifactId>
6. <packaging>war</packaging>
7. <version>0.0.1-SNAPSHOT</version>
8. <name>SpringMVC Maven Webapp</name>
9. <url>http://maven.apache.org</url>
10. <dependencies>
11. <dependency>
12. <groupId>junit</groupId>
13. <artifactId>junit</artifactId>
14. <version>3.8.1</version>
15. <scope>test</scope>
16. </dependency>
17.
18. <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
19. <dependency>
20. <groupId>org.springframework</groupId>
21. <artifactId>spring-webmvc</artifactId>
22. <version>5.1.1.RELEASE</version>
23. </dependency>
24.
25. <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
26. <dependency>
27. <groupId>javax.servlet</groupId>
28. <artifactId>servlet-api</artifactId>
29. <version>3.0-alpha-1</version>
30. </dependency>
31.
32. </dependencies>
33. <build>
34. <finalName>SpringMVC</finalName>
35. </build>
36. </project>

240 | P a g e
2. Create the controller class

To create the controller class, we are using two annotations @Controller and
@RequestMapping.

The @Controller annotation marks this class as Controller.

The @Requestmapping annotation is used to map the class with the specified URL name.

HelloController.java

1. package com.javatpoint;
2. import org.springframework.stereotype.Controller;
3. import org.springframework.web.bind.annotation.RequestMapping;
4. @Controller
5. public class HelloController {
6. @RequestMapping("/")
7. public String display()
8. {
9. return "index";
10. }
11. }

3. Provide the entry of controller in the web.xml file

In this xml file, we are specifying the servlet class DispatcherServlet that acts as the front
controller in Spring Web MVC. All the incoming request for the html file will be forwarded
to the DispatcherServlet.

web.xml

1. <?xml version="1.0" encoding="UTF-8"?>

2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.co
m/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-
app_3_0.xsd" id="WebApp_ID" version="3.0">
3. <display-name>SpringMVC</display-name>
4. <servlet>
5. <servlet-name>spring</servlet-name>
6. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
7. <load-on-startup>1</load-on-startup>
8. </servlet>
9. <servlet-mapping>
10. <servlet-name>spring</servlet-name>
11. <url-pattern>/</url-pattern>
12. </servlet-mapping>
13. </web-app>

4. Define the bean in the xml file

This is the important configuration file where we need to specify the View components.

241 | P a g e
The context:component-scan element defines the base-package where DispatcherServlet will
search the controller class.

This xml file should be located inside the WEB-INF directory.

spring-servlet.xml

1. <?xml version="1.0" encoding="UTF-8"?>

2. <beans xmlns="http://www.springframework.org/schema/beans"
3. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4. xmlns:context="http://www.springframework.org/schema/context"
5. xmlns:mvc="http://www.springframework.org/schema/mvc"
6. xsi:schemaLocation="
7. http://www.springframework.org/schema/beans
8. http://www.springframework.org/schema/beans/spring-beans.xsd
9. http://www.springframework.org/schema/context
10. http://www.springframework.org/schema/context/spring-context.xsd
11. http://www.springframework.org/schema/mvc
12. http://www.springframework.org/schema/mvc/spring-mvc.xsd">
13.
14. <!-- Provide support for component scanning -->
15. <context:component-scan base-package="com.javatpoint" />
16.
17. <!--Provide support for conversion, formatting and validation -->
18. <mvc:annotation-driven/>
19.
20. </beans>

5. Display the message in the JSP page

This is the simple JSP page, displaying the message returned by the Controller.

index.jsp

1. <html>
2. <body>
3. <p>Welcome to Spring MVC Tutorial</p>
4. </body>
5. </html>

Output:

242 | P a g e
RESTful API using Spring Framework

Building REST services with Spring

REST has quickly become the de-facto standard for building web services on the web
because they’re easy to build and easy to consume.

There’s a much larger discussion to be had about how REST fits in the world of
microservices, but — for this tutorial — let’s just look at building RESTful services.

Why REST? REST embraces the precepts of the web, including its architecture, benefits, and
everything else. This is no surprise given its author, Roy Fielding, was involved in probably a
dozen specs which govern how the web operates.

What benefits? The web and its core protocol, HTTP, provide a stack of features:

 Suitable actions (GET, POST, PUT, DELETE, …)

 Caching
 Redirection and forwarding
 Security (encryption and authentication)

These are all critical factors on building resilient services. But that is not all. The web is built
out of lots of tiny specs, hence it’s been able to evolve easily, without getting bogged down in
"standards wars".

Developers are able to draw upon 3rd party toolkits that implement these diverse specs and

243 | P a g e
instantly have both client and server technology at their fingertips.

By building on top of HTTP, REST APIs provide the means to build:

 Backwards compatible APIs

 Evolvable APIs
 Scaleable services
 Securable services
 A spectrum of stateless to stateful services

What’s important to realize is that REST, however ubiquitous, is not a standard, per se, but
an approach, a style, a set of constraints on your architecture that can help you build web-
scale systems. In this tutorial we will use the Spring portfolio to build a RESTful service
while leveraging the stackless features of REST.

Getting Started
As we work through this tutorial, we’ll use Spring Boot. Go to Spring Initializr and add the
following dependencies to a project:

 Web
 JPA
 H2

Change the Name to "Payroll" and then choose "Generate Project". A .zip will download.
Unzip it. Inside you’ll find a simple, Maven-based project including a pom.xml build file
(NOTE: You can use Gradle. The examples in this tutorial will be Maven-based.)

Spring Boot can work with any IDE. You can use Eclipse, IntelliJ IDEA, Netbeans, etc. The
Spring Tool Suite is an open-source, Eclipse-based IDE distribution that provides a superset
of the Java EE distribution of Eclipse. It includes features that make working with Spring
applications even easier. It is, by no means, required. But consider it if you want that extra
oomph for your keystrokes. Here’s a video demonstrating how to get started with STS and
Spring Boot. This is a general introduction to familiarize you with the tools.

The Story so Far…

Let’s start off with the simplest thing we can construct. In fact, to make it as simple as
possible, we can even leave out the concepts of REST. (Later on, we’ll add REST to
understand the difference.)

Big picture: We’re going to create a simple payroll service that manages the employees of a
company. We’ll store employee objects in a (H2 in-memory) database, and access them (via
something called JPA). Then we’ll wrap that with something that will allow access over the
internet (called the Spring MVC layer).

The following code defines an Employee in our system.

244 | P a g e
nonrest/src/main/java/payroll/Employee.java
package payroll;

importjava.util.Objects;

importjavax.persistence.Entity;
importjavax.persistence.GeneratedValue;
importjavax.persistence.Id;

@Entity
classEmployee{

private@Id@GeneratedValueLong id;
privateString name;
privateString role;

Employee(){}

Employee(String name,String role){

this.name = name;
this.role= role;
}

publicLonggetId(){
returnthis.id;
}

publicStringgetName(){
returnthis.name;
}

publicStringgetRole(){
returnthis.role;
}

publicvoidsetId(Long id){
this.id = id;
}

publicvoidsetName(String name){
this.name = name;
}

publicvoidsetRole(String role){
this.role= role;
}

@Override
publicbooleanequals(Object o){

if(this== o)
returntrue;
if(!(o instanceofEmployee))
returnfalse;
Employeeemployee=(Employee) o;
returnObjects.equals(this.id, employee.id)&&Objects.equals(this.name, employee.name)
&&Objects.equals(this.role,employee.role);
}

245 | P a g e
@Override
publicinthashCode(){
returnObjects.hash(this.id,this.name,this.role);
}

@Override
publicStringtoString(){
return"Employee{"+"id="+this.id +", name='"+this.name +'\''+", role='"+this.role+'\''+'}';
}
}

Despite being small, this Java class contains much:

 @Entity is a JPA annotation to make this object ready for storage in a JPA-based data
store.
 id, name, and role are attributes of our Employee domain object. id is marked with more
JPA annotations to indicate it’s the primary key and automatically populated by the
JPA provider.
 a custom constructor is created when we need to create a new instance, but don’t yet
have an id.

With this domain object definition, we can now turn to Spring Data JPA to handle the tedious
database interactions.

Spring Data JPA repositories are interfaces with methods supporting creating, reading,
updating, and deleting records against a back end data store. Some repositories also support
data paging, and sorting, where appropriate. Spring Data synthesizes implementations based
on conventions found in the naming of the methods in the interface.

There are multiple repository implementations besides JPA. You can use Spring Data MongoDB,
Spring Data GemFire, Spring Data Cassandra, etc. For this tutorial, we’ll stick with JPA.

Spring makes accessing data easy. By simply declaring the following EmployeeRepository
interface we automatically will be able to

 Create new Employees

 Update existing ones
 Delete Employees
 Find Employees (one, all, or search by simple or complex properties)

nonrest/src/main/java/payroll/EmployeeRepository.java
package payroll;

importorg.springframework.data.jpa.repository.JpaRepository;

interfaceEmployeeRepositoryextendsJpaRepository<Employee,Long>{

To get all this free functionality, all we had to do was declare an interface which extends

246 | P a g e
Spring Data JPA’s JpaRepository, specifying the domain type as Employee and the id type as
Long.

Spring Data’s repository solution makes it possible to sidestep data store specifics and instead
solve a majority of problems using domain-specific terminology.

Believe it or not, this is enough to launch an application! A Spring Boot application is, at a
minimum, a public static void main entry-point and the @SpringBootApplication annotation. This
tells Spring Boot to help out, wherever possible.

nonrest/src/main/java/payroll/PayrollApplication.java
package payroll;

importorg.springframework.boot.SpringApplication;
importorg.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
publicclassPayrollApplication{

publicstaticvoidmain(String...args){
SpringApplication.run(PayrollApplication.class,args);
}
}

@SpringBootApplication is a meta-annotation that pulls in component scanning,

autoconfiguration, and property support. We won’t dive into the details of Spring Boot in
this tutorial, but in essence, it will fire up a servlet container and serve up our service.

Nevertheless, an application with no data isn’t very interesting, so let’s preload it. The
following class will get loaded automatically by Spring:

nonrest/src/main/java/payroll/LoadDatabase.java
package payroll;

importorg.slf4j.Logger;
importorg.slf4j.LoggerFactory;
importorg.springframework.boot.CommandLineRunner;
importorg.springframework.context.annotation.Bean;
importorg.springframework.context.annotation.Configuration;

@Configuration
classLoadDatabase{

privatestaticfinalLogger log =LoggerFactory.getLogger(LoadDatabase.class);

@Bean
CommandLineRunnerinitDatabase(EmployeeRepository repository){

returnargs->{
log.info("Preloading "+repository.save(newEmployee("Bilbo Baggins","burglar")));
log.info("Preloading "+repository.save(newEmployee("Frodo Baggins","thief")));
};
}
}

247 | P a g e
What happens when it gets loaded?

 Spring Boot will run ALL CommandLineRunner beans once the application context is
loaded.
 This runner will request a copy of the EmployeeRepository you just created.
 Using it, it will create two entities and store them.

Right-click and RunPayRollApplication, and this is what you get:

Fragment of console output showing preloading of data

...
2018-08-09 11:36:26.169 INFO 74611 --- [main] payroll.LoadDatabase : Preloading Employee(id=1,
name=Bilbo Baggins, role=burglar)
2018-08-09 11:36:26.174 INFO 74611 --- [main] payroll.LoadDatabase : Preloading Employee(id=2,
name=Frodo Baggins, role=thief)
...

This isn’t the whole log, but just the key bits of preloading data. (Indeed, check out the whole
console. It’s glorious.)

HTTP is the Platform

To wrap your repository with a web layer, you must turn to Spring MVC. Thanks to Spring
Boot, there is little in infrastructure to code. Instead, we can focus on actions:

nonrest/src/main/java/payroll/EmployeeController.java
package payroll;

importjava.util.List;

importorg.springframework.web.bind.annotation.DeleteMapping;
importorg.springframework.web.bind.annotation.GetMapping;
importorg.springframework.web.bind.annotation.PathVariable;
importorg.springframework.web.bind.annotation.PostMapping;
importorg.springframework.web.bind.annotation.PutMapping;
importorg.springframework.web.bind.annotation.RequestBody;
importorg.springframework.web.bind.annotation.RestController;

@RestController
classEmployeeController{

privatefinalEmployeeRepository repository;

EmployeeController(EmployeeRepository repository){
this.repository= repository;
}

// Aggregate root
// tag::get-aggregate-root[]
@GetMapping("/employees")
List<Employee>all(){
returnrepository.findAll();

248 | P a g e
}
// end::get-aggregate-root[]

@PostMapping("/employees")
EmployeenewEmployee(@RequestBodyEmployeenewEmployee){
returnrepository.save(newEmployee);
}

// Single item

@GetMapping("/employees/{id}")
Employeeone(@PathVariableLong id){

returnrepository.findById(id)
.orElseThrow(()->newEmployeeNotFoundException(id));
}

@PutMapping("/employees/{id}")
EmployeereplaceEmployee(@RequestBodyEmployeenewEmployee,@PathVariableLong id){

returnrepository.findById(id)
.map(employee ->{
employee.setName(newEmployee.getName());
employee.setRole(newEmployee.getRole());
returnrepository.save(employee);
})
.orElseGet(()->{
newEmployee.setId(id);
returnrepository.save(newEmployee);
});
}

@DeleteMapping("/employees/{id}")
voiddeleteEmployee(@PathVariableLong id){
repository.deleteById(id);
}
}

 @RestController indicates that the data returned by each method will be written straight
into the response body instead of rendering a template.
 An EmployeeRepository is injected by constructor into the controller.
 We have routes for each operation (@GetMapping, @PostMapping, @PutMapping and
@DeleteMapping, corresponding to HTTP GET, POST, PUT, and DELETE calls). (NOTE:
It’s useful to read each method and understand what they do.)
 EmployeeNotFoundException is an exception used to indicate when an employee is looked
up but not found.

nonrest/src/main/java/payroll/EmployeeNotFoundException.java
package payroll;

classEmployeeNotFoundExceptionextendsRuntimeException{

EmployeeNotFoundException(Long id){
super("Could not find employee "+ id);
}
}

249 | P a g e
When an EmployeeNotFoundException is thrown, this extra tidbit of Spring MVC configuration is
used to render an HTTP 404:

nonrest/src/main/java/payroll/EmployeeNotFoundAdvice.java
package payroll;

importorg.springframework.http.HttpStatus;
importorg.springframework.web.bind.annotation.ControllerAdvice;
importorg.springframework.web.bind.annotation.ExceptionHandler;
importorg.springframework.web.bind.annotation.ResponseBody;
importorg.springframework.web.bind.annotation.ResponseStatus;

@ControllerAdvice
classEmployeeNotFoundAdvice{

@ResponseBody
@ExceptionHandler(EmployeeNotFoundException.class)
@ResponseStatus(HttpStatus.NOT_FOUND)
StringemployeeNotFoundHandler(EmployeeNotFoundException ex){
returnex.getMessage();
}
}

 @ResponseBody signals that this advice is rendered straight into the response body.
 @ExceptionHandler configures the advice to only respond if an EmployeeNotFoundException
is thrown.
 @ResponseStatus says to issue an HttpStatus.NOT_FOUND, i.e. an HTTP 404.
 The body of the advice generates the content. In this case, it gives the message of the
exception.

To launch the application, either right-click the public static void main in PayRollApplication and
select Run from your IDE, or:

Spring Initializr uses maven wrapper so type this:

$ ./mvnw clean spring-boot:run

Alternatively using your installed maven version type this:

$ mvn clean spring-boot:run

When the app starts, we can immediately interrogate it.

$ curl -v localhost:8080/employees

This will yield:

* Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET /employees HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.54.0

250 | P a g e
> Accept: */*
>
< HTTP/1.1 200
< Content-Type: application/json;charset=UTF-8
< Transfer-Encoding: chunked
< Date: Thu, 09 Aug 2018 17:58:00 GMT
<
* Connection #0 to host localhost left intact
[{"id":1,"name":"Bilbo Baggins","role":"burglar"},{"id":2,"name":"Frodo Baggins","role":"thief"}]

Here you can see the pre-loaded data, in a compacted format.

If you try and query a user that doesn’t exist…

$ curl -v localhost:8080/employees/99

You get…

* Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 8080 (#0)
> GET /employees/99 HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.54.0
> Accept: */*
>
< HTTP/1.1 404
< Content-Type: text/plain;charset=UTF-8
< Content-Length: 26
< Date: Thu, 09 Aug 2018 18:00:56 GMT
<
* Connection #0 to host localhost left intact
Could not find employee 99

This message nicely shows an HTTP 404 error with the custom message Could not find
employee 99.

It’s not hard to show the currently coded interactions…

If you are using Windows Command Prompt to issue cURL commands, chances are the
below command won’t work properly. You must either pick a terminal that support single
quoted arguments, or use double quotes and then escape the ones inside the JSON.

To create a new Employee record we use the following command in a terminal—the $ at the
beginning signifies that what follows it is a terminal command:

$ curl -X POST localhost:8080/employees -H 'Content-type:application/json' -d '{"name": "Samwise Gamgee",

"role": "gardener"}'

Then it stores newly created employee and sends it back to us:

{"id":3,"name":"Samwise Gamgee","role":"gardener"}

251 | P a g e
You can update the user. Let’s change his role.

$ curl -X PUT localhost:8080/employees/3 -H 'Content-type:application/json' -d '{"name": "Samwise Gamgee",

"role": "ring bearer"}'

And we can see the change reflected in the output.

{"id":3,"name":"Samwise Gamgee","role":"ring bearer"}

The way you construct your service can have significant impacts. In this situation, we said update,
but replace is a better description. For example, if the name was NOT provided, it would instead get
nulled out.

Finally, you can delete users like this:

$ curl -X DELETE localhost:8080/employees/3

# Now if we look again, it's gone

$ curl localhost:8080/employees/3
Could not find employee 3

This is all well and good, but do we have a RESTful service yet? (If you didn’t catch the hint,
the answer is no.)

What’s missing?

What makes something RESTful?

So far, you have a web-based service that handles the core operations involving employee
data. But that’s not enough to make things "RESTful".

 Pretty URLs like /employees/3 aren’t REST.

 Merely using GET, POST, etc. isn’t REST.
 Having all the CRUD operations laid out isn’t REST.

In fact, what we have built so far is better described as RPC (Remote Procedure Call).
That’s because there is no way to know how to interact with this service. If you published this
today, you’d also have to write a document or host a developer’s portal somewhere with all
the details.

This statement of Roy Fielding’s may further lend a clue to the difference between REST
and RPC:

I am getting frustrated by the number of people calling any HTTP-based interface a REST
API. Today’s example is the SocialSite REST API. That is RPC. It screams RPC. There is so
much coupling on display that it should be given an X rating.

What needs to be done to make the REST architectural style clear on the notion that hypertext
is a constraint? In other words, if the engine of application state (and hence the API) is not
being driven by hypertext, then it cannot be RESTful and cannot be a REST API. Period. Is

252 | P a g e
there some broken manual somewhere that needs to be fixed?

— Roy Fielding
https://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven

The side effect of NOT including hypermedia in our representations is that clients MUST
hard code URIs to navigate the API. This leads to the same brittle nature that predated the
rise of e-commerce on the web. It’s a signal that our JSON output needs a little help.

Introducing Spring HATEOAS, a Spring project aimed at helping you write hypermedia-
driven outputs. To upgrade your service to being RESTful, add this to your build:

Adding Spring HATEOAS to dependencies section of pom.xml

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-hateoas</artifactId>
</dependency>

This tiny library will give us the constructs to define a RESTful service and then render it in
an acceptable format for client consumption.

A critical ingredient to any RESTful service is adding links to relevant operations. To make
your controller more RESTful, add links like this:

Getting a single item resource

@GetMapping("/employees/{id}")
EntityModel<Employee>one(@PathVariableLong id){

Employeeemployee=repository.findById(id)//
.orElseThrow(()->newEmployeeNotFoundException(id));

returnEntityModel.of(employee,//
linkTo(methodOn(EmployeeController.class).one(id)).withSelfRel(),
linkTo(methodOn(EmployeeController.class).all()).withRel("employees"));
}
This tutorial is based on Spring MVC and uses the static helper methods from
WebMvcLinkBuilder to build these links. If you are using Spring WebFlux in your project, you
must instead use WebFluxLinkBuilder.

This is very similar to what we had before, but a few things have changed:

 The return type of the method has changed from Employee to EntityModel<Employee>.
EntityModel<T> is a generic container from Spring HATEOAS that includes not only
the data but a collection of links.
 linkTo(methodOn(EmployeeController.class).one(id)).withSelfRel() asks that Spring HATEOAS
build a link to the EmployeeController 's one() method, and flag it as a self link.
 linkTo(methodOn(EmployeeController.class).all()).withRel("employees") asks Spring HATEOAS
to build a link to the aggregate root, all(), and call it "employees".

What do we mean by "build a link"? One of Spring HATEOAS’s core types is Link. It
includes a URI and a rel (relation). Links are what empower the web. Before the World Wide

253 | P a g e
Web, other document systems would render information or links, but it was the linking of
documents WITH this kind of relationship metadata that stitched the web together.

Roy Fielding encourages building APIs with the same techniques that made the web
successful, and links are one of them.

If you restart the application and query the employee record of Bilbo, you’ll get a slightly
different response than earlier:

Curling prettier

When your curl output gets more complex it can become hard to read. Use this or other tips
to prettify the json returned by curl:

# The indicated part pipes the output to json_pp and asks it to make your JSON pretty. (Or use whatever tool
you like!)
# v------------------v
curl -v localhost:8080/employees/1 | json_pp
RESTful representation of a single employee
{
"id":1,
"name":"Bilbo Baggins",
"role":"burglar",
"_links":{
"self":{
"href":"http://localhost:8080/employees/1"
},
"employees":{
"href":"http://localhost:8080/employees"
}
}
}

This decompressed output shows not only the data elements you saw earlier ( id, name and
role), but also a _links entry containing two URIs. This entire document is formatted using
HAL.

HAL is a lightweight mediatype that allows encoding not just data but also hypermedia
controls, alerting consumers to other parts of the API they can navigate toward. In this case,
there is a "self" link (kind of like a this statement in code) along with a link back to the
aggregate root.

To make the aggregate root ALSO more RESTful, you want to include top level links while
ALSO including any RESTful components within.

So we turn this

Getting an aggregate root

@GetMapping("/employees")
List<Employee>all(){
returnrepository.findAll();
}

254 | P a g e
into this

Getting an aggregate root resource

@GetMapping("/employees")
CollectionModel<EntityModel<Employee>>all(){

List<EntityModel<Employee>> employees =repository.findAll().stream()

.map(employee ->EntityModel.of(employee,
linkTo(methodOn(EmployeeController.class).one(employee.getId())).withSelfRel(),
linkTo(methodOn(EmployeeController.class).all()).withRel("employees")))
.collect(Collectors.toList());

returnCollectionModel.of(employees,linkTo(methodOn(EmployeeController.class).all()).withSelfRel());
}

Wow! That method, which used to just be repository.findAll(), is all grown up! Not to worry.
Let’s unpack it.

CollectionModel<> is another Spring HATEOAS container; it’s aimed at en

Building an application usingMaven

Maven is one of the open-source Java build tools developed by Apache Software Foundation.
It can compile, test, and package a java program into .jar or .war format.

Maven makes use of the pom.xml file to build java projects.

Project Object Model (POM) is an XML file that contains the java project details,
configurations, and settings required for maven to build the project.

The pom.xml file is present in the root of the java project directory. Primarily it contains the
project dependencies.

For example, when a developer wants to implement a PostgreSQL database connectivity

functionality, he will make use of the PostgreSQL JDBC Driver dependency from the maven
repository by adding it to the pom.xml file.

So when you build the code with maven, it reads the pom.xml file and downloads all the
dependencies from the maven repository. Dependencies could be third-party libraries from
the public Maven Repository or common libraries hosted within an organization’s private
maven repository. You can compare it with Python pip, Nodejs npm, or Ruby gems

Commonly organizations use Sonatyope nexus as a private hosted maven repository.

By default, maven uses the public repository but if you have in-house private maven
repositories, you configure custom maven repository URLs in settings.xml maven configuration
present in the maven installation directory. for example, /opt/apache-maven-3.8.6/conf/settings.xml

255 | P a g e
Maven Prerequisites
For maven to work you need the following installed on your system

1. Java JDK
2. Maven

To install and configure JDK and maven, follow the maven installation guide.

Build Java Application Using Maven

For this example, we will be using the open-source java spring boot application named pet-
clinic.

First, clone the application to your development machine or server.

git clone https://github.com/spring-projects/spring-petclinic.git

The code base has the following important folders and files. It is common in real-time project
code as well.

1. /src folder: This folder contains the source code based on the java spring framework.
2. /src/tests folder: This folder contains the unit tests & integration tests of the code under the
tests folder.
3. pom.xml file: It contains all the dependencies required for the pet-clinic applications. As it is
an open-source application, all the dependencies are from the public maven repository.

To build the project, cd into the project root directory. In my case its spring-petclinic. It should
contain the pom.xml file

cd spring-petclinic

From a CI perspective, we just have to build, test, and package the project to create a
deployable artifact(jar file)

So commonly in the CI process, we build and package the java projects using the following
maven command. It compiles the code, tests it, package it as a jar file in the target folder, and
will also install(copy) the jar package in the local .m2 repository.

mvn clean install

After executing the above command, you will see a folder named target in the root directory.
Inside the target directory, you will see the packaged jar file as shown below. We call it a
deployable artifact.

256 | P a g e
Even time you run mvn clean install, it deletes target directory and packages from the local .m2
repository and replaces it with the latest build files and packages.

If you want to skip the test during build, you can add the -Dmaven.test.skip=true parameter as
shown below.

mvn clean install -Dmaven.test.skip=true

Now that you have understood how to build a java project using maven, let’s look into the
maven lifecycle. Few commands we don’t have to use in the CI pipelines. However, it is
good to know about the maven lifecycle commands and you can use them depending on your
CI pipeline requirement.

Maven Lifecycle Explained

Let’s take a look at each maven lifecycle phase in order. Each phase executes all the phases
before it. For example, if you execute the third phase, one, two, and three get executed.

1. Maven Validate (mvn validate)

mvn validate validates the maven project. It downloads all the required dependencies to the

257 | P a g e
local .m2 repository.

2. Maven Compile (mvn compile)

mvn compile compiles the java project. It runs validate first and then compiles the code.

3. Maven Test (mvn test)

mvn test command runs the unit test that is part of the code. You can test classes individually,
methods individually, or add patterns to run tests on all methods that match the pattern.

4. Maven Package (mvn package)

mvn package commands compile the code, test it and finally package it in the required format
(jar or war)

5. Maven Verify (mvn verify)

mvn verify command runs all the phases explained before in order and runs checks on
integration tests and checkstyles if they are defined in the project.

6. Maven Install (mvn install)

mvn install command installs the packaged code in the local maven repository.

7. Maven Deploy (mvn deploy)

mvn deploy command, deploys the package to the remote maven repository. When you run
deploy, it first runs validate, compile, test, package, verify, install, and then finally deploys
the package to the remote maven repository.

Possible Maven Build Errors

java.lang.IllegalStateException: Unable to load cache item

If maven doesn’t support the Java version, you will get the above error.

To rectify it, install the latest maven version that supports the installed Java version.

If you try to execute the maven command from the location where there is no pom.xml file,

258 | P a g e
you will get the following error.

The goal you specified requires a project to execute but there is no POM in this directory

To rectify this, execute the maven command from the folder that has the pom.xml file.

Maven Build FAQs

Does mvn package run tests?

Yes. By default, the mvn package command runs the test. However, you can add the flag -
Dmaven.test.skip to skip the tests.

What does Maven test do?

mvn test runs all the unit tests for the java project.

Conclusion
As a Devops engineer, it is very important to understand the java build process if you are
working on deploying java projects.

259 | P a g e
 UNIT – V
Databases & Deployment

Functional dependency defines the relationship of two or more attributes, typically between
the primary key and non-key attributes of another table. It is also defined by the relation of
one attribute to another attribute in DBMS.

empId → { empName, skill, dependent, contract, project}, → Here, empId can determine or
defines the values of fields empName, dependent, contract and employee project

Username Tables:

userName → dateCreate here if we can know the userName like we have email account if
we know the email Id of user then there is possibility to find the date when account was
created.

Multivalued Dependency:

Multivalency Dependency occurs in such a condition or time when two or more attributes in
table are independent to each other but, both of them depend upon the third attributes.

Employee Table:

The attributes like empName, skill, dependent, contract, project all are independent of each
other means not depends on one another but depends upon empId example empName can
determine skill, or any other employee attribute because there can be or even more than one
employee with same name or constraints.

empId->skill empId-> contract empId-> project empId-> dependent

These all of the columns is the multivalued dependency on the empId

Username Table:

We only have two attributes here, but there are no multiple attributes that are independent of
each other but rely solely on the third variable.

userName → dateCreate here dateCreate is an attribute that depends or relate upon

the userName only dateCreate when there is not sufficient to find anything. b)

Minimal key is the minimum no of attributes which can find out other attributes of a table

260 | P a g e
i.e., a primary key or the candidate key. In the Context of Employee Table:

empId → { empName, skill, dependent, contract, project}

In the Context of Username Table:

userName → dateCreate

In the Context of Subject Table:

Consider Subject table which has sub_Code, subName sub_Code->subName

In the Context of Enrollment Table:

Considering the enrollment table which has the attributes like: enrollment Id, Name of
employee, field in which employee enrolled and date

c)

We have the following Employee and Username Tables:

In Context of Employee Table:

Employee table is not in normalize or the normal forms. Because the Attributes in it like:
Skill, project, contract and dependent attributes might have one or more values. According
to the 1NF principle every field must contain the atomic values if they don’t have the atomic
value. There is need to decompose the table since the table should have the 1 value in each
field.

In the Context of Username Table:

It is normalizing one Since it has two fields[UserName and dateCreate] in which both have
atomic values or data , is fully functional dependent, no transition dependency etc.

d)

Normalization, Decomposition process will be done.

Normalization is a process or technique of organizing or collecting the data in database. It is

mainly done for two purposes: Eliminating the redundancy or even the useless data

In 1st NF:

Every field must contain the single atomic value and the attribute like: skill, project, contract
and dependent attribute has one or more than the decompose table so that the each and every
field has atomic value which will increase the number of tuples in the table name
“employee”.

In the 2nd NF:

261 | P a g e
Each table should be at 1st NF.

 There should not be any functional dependency. So, in this case, after it is in 1 st NF
table is in 2nd NF Since the empId can find out all the attributes of the employees.

In 3rd NF:

 Table should be at 2nd NF Form.

 There should not be any transitive dependency in the table in which the non-primitive
attribute can find another non-primitive attribute i.e., empName, skill, dependent,
project is the non-primitive attribute and they cannot find the each other but the main
prime attribute can or able to find all of them.

In BCNF:

 Table should be at 3rd NF.

 The LHS Side of attribute should have the candidate key or the super key. • So, In this
case empId → { empName, skill, dependent, contract, project}, The attribute empId
is a primary key and can find out all other attributes.

In the 4th NF:

Table should be at BCNF Form.

There should not be any multivalued Dependency.

So, in current Employee Table context, Employee might contain the multivalued dependency
I.e.: skills, projects [0 or more], dependency [0 or more] and contract [1 or more]. So, there
is lots of multivalued attributes or dependency on the empId which might increase the no of
entries in the table which might increase the no of entries in the table after making it to
1stNF.

In the case of making the Employee table in 4th NF, it will decompose the employee table
into following tables: empId → { empName, skill, dependent, contract, project}

EmployeeSkils

empId, empName,

skill

EmployeeDependency empId, empName, dependent EmployeeContract empId,

empName,

contract

EmployeeProject empId, empName,

project

262 | P a g e
There is no need to change the Username Table since it is already on 4th NF.

Structured Query Language

SQL Tutorial

SQL tutorial provides basic and advanced concepts of SQL. Our SQL tutorial is designed for
both beginners and professionals.

SQL (Structured Query Language) is used to perform operations on the records stored in the
database, such as updating records, inserting records, deleting records, creating and
modifying database tables, views, etc.

SQL is not a database system, but it is a query language.

Suppose you want to perform the queries of SQL language on the stored data in the database.
You are required to install any database management system in your systems, for example,
Oracle, MySQL, MongoDB, PostgreSQL, SQL Server, DB2, etc.

What is SQL?
SQL is a short-form of the structured query language, and it is pronounced as S-Q-L or
sometimes as See-Quell.

This database language is mainly designed for maintaining the data in relational database
management systems. It is a special tool used by data professionals for handling structured
data (data which is stored in the form of tables). It is also designed for stream processing in
RDSMS.

You can easily create and manipulate the database, access and modify the table rows and
columns, etc. This query language became the standard of ANSI in the year of 1986 and ISO
in the year of 1987.

If you want to get a job in the field of data science, then it is the most important query
language to learn. Big enterprises like Facebook, Instagram, and LinkedIn, use SQL for
storing the data in the back-end.

Why SQL?
Nowadays, SQL is widely used in data science and analytics. Following are the reasons
which explain why it is widely used:

 The basic use of SQL for data professionals and SQL users is to insert, update, and delete the
data from the relational database.
 SQL allows the data professionals and users to retrieve the data from the relational database

263 | P a g e
 management systems.
 It also helps them to describe the structured data.
 It allows SQL users to create, drop, and manipulate the database and its tables.
 It also helps in creating the view, stored procedure, and functions in the relational database.
 It allows you to define the data and modify that stored data in the relational database.
 It also allows SQL users to set the permissions or constraints on table columns, views, and
stored procedures.

History of SQL
"A Relational Model of Data for Large Shared Data Banks" was a paper which was published
by the great computer scientist "E.F. Codd" in 1970.

The IBM researchers Raymond Boyce and Donald Chamberlin originally developed the
SEQUEL (Structured English Query Language) after learning from the paper given by E.F.
Codd. They both developed the SQL at the San Jose Research laboratory of IBM Corporation
in 1970.

At the end of the 1970s, relational software Inc. developed their own first SQL using the
concepts of E.F. Codd, Raymond Boyce, and Donald Chamberlin. This SQL was totally
based on RDBMS. Relational Software Inc., which is now known as Oracle Corporation,
introduced the Oracle V2 in June 1979, which is the first implementation of SQL language.
This Oracle V2 version operates on VAX computers.

Process of SQL
When we are executing the command of SQL on any Relational database management
system, then the system automatically finds the best routine to carry out our request, and the
SQL engine determines how to interpret that particular command.

Structured Query Language contains the following four components in its process:

 Query Dispatcher
 Optimization Engines
 Classic Query Engine
 SQL Query Engine, etc.

A classic query engine allows data professionals and users to maintain non-SQL queries. The
architecture of SQL is shown in the following diagram:

264 | P a g e
Some SQL Commands
The SQL commands help in creating and managing the database. The most common SQL
commands which are highly used are mentioned below:

1. CREATE command
2. UPDATE command
3. DELETE command
4. SELECT command
5. DROP command
6. INSERT command

CREATE Command

This command helps in creating the new database, new table, table view, and other objects of
the database.

UPDATE Command

This command helps in updating or changing the stored data in the database.

DELETE Command

This command helps in removing or erasing the saved records from the database tables. It
erases single or multiple tuples from the tables of the database.

SELECT Command

265 | P a g e
This command helps in accessing the single or multiple rows from one or multiple tables of
the database. We can also use this command with the WHERE clause.

DROP Command

This command helps in deleting the entire table, table view, and other objects from the
database.

INSERT Command

This command helps in inserting the data or records into the database tables. We can easily
insert the records in single as well as multiple rows of the table.

SQL vs No-SQL

The following table describes the differences between the SQL and NoSQL, which are
necessary to understand:

SQL No-SQL

1. SQL is a relational database management 1. While No-SQL is a non-relational or distributed

system. database management system.

2. The query language used in this database 2. The query language used in the No-SQL database
system is a structured query language. systems is a non-declarative query language.

3. The schema of SQL databases is predefined, 3. The schema of No-SQL databases is a dynamic
fixed, and static. schema for unstructured data.

4. These databases are vertically scalable. 4. These databases are horizontally scalable.

5. The database type of SQL is in the form of 5. The database type of No-SQL is in the form of
tables, i.e., in the form of rows and columns. documents, key-value, and graphs.

6. It follows the ACID model. 6. It follows the BASE model.

266 | P a g e
7. Complex queries are easily managed in the
7. NoSQL databases cannot handle complex queries.
SQL database.

8. This database is not the best choice for 8. While No-SQL database is a perfect option for
storing hierarchical data. storing hierarchical data.

9. All SQL databases require object-relational 9. Many No-SQL databases do not require object-
mapping. relational mapping.

10. Gauges, CircleCI, Hootsuite, etc., are the

10. Airbnb, Uber, and Kickstarter are the top
top enterprises that are using this query
enterprises that are using this query language.
language.

11. SQLite, Ms-SQL, Oracle, PostgreSQL, and 11. Redis, MongoDB, Hbase, BigTable, CouchDB,
MySQL are examples of SQL database and Cassandra are examples of NoSQL database
systems. systems.

Advantages of SQL
SQL provides various advantages which make it more popular in the field of data science. It
is a perfect query language which allows data professionals and users to communicate with
the database. Following are the best advantages or benefits of Structured Query Language:

1. No programming needed

SQL does not require a large number of coding lines for managing the database systems. We
can easily access and maintain the database by using simple SQL syntactical rules. These
simple rules make the SQL user-friendly.

2. High-Speed Query Processing

A large amount of data is accessed quickly and efficiently from the database by using SQL
queries. Insertion, deletion, and updation operations on data are also performed in less time.

3. Standardized Language

SQL follows the long-established standards of ISO and ANSI, which offer a uniform
platform across the globe to all its users.

4. Portability

The structured query language can be easily used in desktop computers, laptops, tablets, and
even smartphones. It can also be used with other applications according to the user's
requirements.

5. Interactive language

We can easily learn and understand the SQL language. We can also use this language for
communicating with the database because it is a simple query language. This language is also

267 | P a g e
used for receiving the answers to complex queries in a few seconds.

6. More than one Data View

The SQL language also helps in making the multiple views of the database structure for the
different database users.

Disadvantages of SQL
With the advantages of SQL, it also has some disadvantages, which are as follows:

1. Cost

The operation cost of some SQL versions is high. That's why some programmers cannot use
the Structured Query Language.

2. Interface is Complex

Another big disadvantage is that the interface of Structured query language is difficult, which
makes it difficult for SQL users to use and manage it.

3. Partial Database control

The business rules are hidden. So, the data professionals and users who are using this query
language cannot have full database control.

Data persistence using Spring

I'm used to using Spring Roo to generate my entities and having it handle injecting the
entityManager as well as the persist and other methods via AspectJ classes. Now I'm trying to
use Spring Boot to do something simple that will write things to the database ...

@Entity
@Table(name = "account")
publicclassAccount {

transientEntityManagerentityManager;

@Id
@GeneratedValue
privateLong id;

@Column(name = "username", nullable = false, unique = true)

private String username;

@Column(name = "password", nullable = false)

private String password;

... getters and setters

@Transactional
publicvoidpersist() {

268 | P a g e
if (this.entityManager == null) this.entityManager = entityManager();
this.entityManager.persist(this);
}

@Transactional
public Account merge() {
if (this.entityManager == null) this.entityManager = entityManager();
Accountmerged=this.entityManager.merge(this);
this.entityManager.flush();
return merged;
}

When I'm calling persist or merge, entityManager is obviously null.

I've also tried adding implements CrudRepository<Account, Long> to the Account class to see it'll
give me that functionality via a Default Implementation, but what I'm getting is simply empty
classes that needs to be filled in.

I've had a look at the Spring Boot docs, they cover it very briefly omitting just enough detail
to so that it's not obvious what I'm missing.

I have an Application class that bootstraps the application:

@Configuration
@ComponentScan
@EnableAutoConfiguration
publicclassApplication {

publicstaticvoidmain(String[] args)throws Exception {

SpringApplication.run(Application.class, args);
}

My properties file looks like this:

spring.application.name: Test Application

spring.datasource.url: jdbc:mysql://localhost/test
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update

This database is automatically being created thanks to the ddl-auto=update property

What is the correct way to persist entities in Spring Boot + JPA and if what I've done is
correct so far, how do I "autowire" or auto-create the entityManager?

269 | P a g e
JDBC Agile development principles

What are the Agile Principles?

There are 12 agile principles outlined in The Agile Manifesto in addition to the 4 agile
values. These 12 principles for agile software development help establish the tenets of the
agile mindset. They are not a set of rules for practicing agile, but a handful of principles to
help instill agile thinking.

Below we will review each of the 12 agile principles and describe how they may be
practiced.

Agile Principle 1
“Our highest priority is to satisfy the customer through early and continuous delivery of
valuable software.”

The best ways to ensure you make customers happy while continuously delivering valuable
software are to ship early, iterate frequently, and listen to your market continually.

Unlike traditional approaches to product development, which have notoriously long

development cycles, agile principles encourage minimizing the time between ideation and
launch. The idea is to get a working product in the hands of customers as soon as possible.
Doing this successfully means product managers are able to quickly get a minimum viable
product (MVP) out and into the world and use it to get feedback from real customers. This
feedback is then fed back into the product development process and used to inform future
releases.

How it looks in practice:

 Product teams use minimum viable products and rapid experimentation to test hypothesis and
validate ideas.
 Frequent releases help fuel a continuous feedback cycle between customer and product.
 Shipped and done are not the same thing. Instead of releasing a “finished” product, iterations
continue to make incremental improvements to product based on customer and market
feedback.

Agile Principle 2
“Welcome changing requirements, even late in development. Agile processes harness change
for the customer’s competitive advantage.”

In the world around us, change is the only constant. Agile principles and values support
responding to these changes rather than moving forward in spite of them. Previous
approaches to product development were often change adverse; detailed, well-documented

270 | P a g e
plans were made before development began and were set in stone regardless of new findings.
Agile principles support observing changing markets, customer needs, and competitive
threats and changing course when necessary.

How it looks in practice:

 Product teams are guided by high-level strategic goals and perhaps even themes below those
goals. The product department’s success is measured against progress toward those strategic
goals rather than by delivery of a predefined feature set.
 Product constantly has its ear to the ground monitoring the market, customer feedback, and
other factors which could influence product direction. When actionable insight is uncovered,
plans are adjusted to better serve customer and business needs.
 Product strategy and tactical plans are reviewed, adjusted, and shared on a regular cadence to
reflect changes and new findings. As such, product needs to manage the expectations of
executive stakeholders appropriately and ensure they understand the why behind changes.

Agile Principle 3
“Deliver working software frequently, from a couple of weeks to a couple of months, with a
preference to the shorter timescale.”

Agile philosophy favors breaking a product’s development into smaller components and
“shipping” those components frequently. Using an agile approach, therefore — and building
in more frequent mini-releases of your product— can speed the product’s overall
development.

This agile approach, with short-term development cycles of smaller portions of the product,
results in less time spent drafting and poring over the large amounts of documentation that
characterizes Waterfall product development. More importantly, this frequent-release
approach creates more opportunities for you and your teams to validate your product ideas
and strategies from the qualified constituencies who see each new release.

How it looks in practice:

 Agile development cycles, often called “sprints” or “iterations” break down product
initiatives into smaller chunks that can be completed in a set timeframe. Often this timeframe
is between 2 and 4 weeks which truly is a sprint if you consider the marathon-like
development cycles waterfall teams often follow.
 Another popular alternative to agile sprints is continuous deployment. This method of
shipping software frequently works less in terms of predetermined time boxes and more in
terms of simply deciding what to do and doing it.

Agile Principle 4
“Business people and developers must work together daily throughout the project.”

Communication is a critical component of any project or team’s success, and agile principles
essentially mandate that it’s a daily event. It takes a village to raise a child they say, and that
applies to product as well.

271 | P a g e
A successful product requires insight from the business and technical sides of an organization
which can only happen if these two teams work together consistently. Regular
communication between business people and developers helps improve alignment across the
organization by building trust and transparency.

How it looks in practice:

 Cross-functional agile product development teams include product people. This means that
product is represented on the development team and bridges the gap between technical and
business aspects of the product.
 Daily update meetings, or standups, are one technique many agile shops use to put this
principle in practice and keep everyone connected.

Agile Principle 5
“Build projects around motivated individuals. Give them the environment and support they
need, and trust them to get the job done.”

A key part of the agile philosophy is empowering individuals and teams through trust and
autonomy. The agile team needs to be carefully built to include the right people and skill sets
to get the job done, and responsibilities need to be clearly defined before the beginning of a
project. Once the work has begun, however, there’s no place in agile for micromanagement
or hand holding.

How it looks in practice:

 Product must clearly ensure engineering understands strategy and requirements before
development starts. This means not only sharing user stories with the cross-functional team
but also the bigger picture outlined in the product roadmap.
 Product is not responsible for explaining “how” something should be built. They need to
share what and why, but it’s the delivery team’s job to determine the how. Furthermore,
during sprints product does not micromanage outcome, instead they make themselves
available to answer questions and provide support as needed.

Agile Principle 6
“The most efficient and effective method of conveying information to and within a
development team is face-to-face conversation.”

With so many distributed or remote development teams these days, this principle gets a bit of
critique. But at the root of it, effective communication with developers means getting these
conversations out of Slack and email and favoring more human interaction (even if done by
video conference calls). The overall objective behind this principle is to encourage product
people and developers to truly communicate in real time about the product, requirements, and
the high-level strategy driving those things.

272 | P a g e
How it looks in practice:

 Daily standup meetings

 Collaborative backlog grooming sessions
 Sprint planning meetings
 Frequent demos
 Pair-programming

Agile Principle 7
“Working software is the primary measure of progress.”

Proponents of the agile philosophy are quick to remind us that we’re in the business of
building software, and that’s where our time should be spent. Perfect, detailed documentation
is secondary to working software. This mentality pushes to get products to the market quickly
rather than let documentation or an “it’s not done until it’s perfect” mentality become a
bottleneck. The ultimate measure for success is a working product that customers love.

How it looks in practice:

 Designing and releasing “Minimum Viable Features” rather than fully-developed feature sets
means thinking first and foremost about the smallest things we can ship to start getting
customer feedback and validate as we continue to build software.
 A fail fast mentality means moving forward even in times of uncertainty and testing ideas
rapidly.
 Ship software often: a useful product now is better than a perfect one later.

Agile Principle 8
“Agile processes promote sustainable development. The sponsors, developers, and users
should be able to maintain a constant pace indefinitely.”

Keeping up with a demanding, rapid release schedule can be taxing on a team. Especially if
expectations are set too high. Agile principles encourage us to be mindful of this and set
realistic, clear expectations. The idea is to keep morale high and improve work-life balance to
prevent burnout and turnover among members of cross functional teams.

How it looks in practice:

 Before every sprint, careful consideration of the amount of work that can be committed to is
made. Development teams don’t over promise on what they can and cannot deliver. Effort
estimations are a common practice in setting output expectations for development teams.
 Everyone agrees on what will get done during a sprint. Once a sprint has begun, no additional
tasks are to be added except in rare cases.
 Product managers should act as gatekeepers to reduce the noise from other stakeholders and
to avoid squeezing in additional unplanned work during an ongoing sprint.
 Product people should do their part in promoting a sense of psychological safety across the
cross-functional team that encourages open communication and freely flowing feedback.

Agile Principle 9
273 | P a g e
“Continuous attention to technical excellence and good design enhances agility.”

While the agile philosophy encourages shorter cycles and frequent releases, it also puts
emphasis on the importance of keeping things neat and tidy so they don’t cause problems in
the future. Product managers often forget about this aspect of development because they
mostly don’t spend their days wading through their products’ codebases, but it is still of the
utmost importance to them.

How it looks in practice:

 The team needs to be cognizant of technical debt and the technical debt implications of any
new features or initiatives added to the backlog. Developers and product need to work
together to understand if and when technical debt is acceptable.
 On a regular basis, product will need to allocate development resources to refactoring efforts.
Refactoring cannot be an afterthought, it needs to be an ongoing consideration.

Agile Principle 10
“Simplicity—the art of maximizing the amount of work not done—is essential.”

You’ve probably heard of the 80/20 rule—the concept that you can usually get 80% of your
intended results with just 20% of the work. Agile principles encourage thinking this way;
doing the things that can have the most impact. In a product management context this means
having a laser sharp focus on organizational objectives and making some cutthroat
prioritization decisions. Agile principles discourage building merely for the sake of building
by emphasizing the importance of being strategic and building with purpose.

How it looks in practice:

 Product managers need to make very focused product decisions and closely align product
strategy with organizational goals while being extremely picky about what user stories and
features actually make the cut. Using prioritization techniques to prioritize initiatives by effort
and predicted impact is one way product teams can apply this agile principle to product
development.
 The short sprints that agile is characterized by present many opportunities for rapid testing
and experimentation which can help reduce uncertainty around whether initiatives will truly
have the predicted impact. Using experiments to validate ideas before building them up to
spec is a great way to weed out bad ideas and identify good ones.

Agile Principle 11
“The best architectures, requirements, and designs emerge from self-organizing teams.”

In traditional software development methodologies, you’ll often see pyramid shaped teams
where management makes key decisions for contributors. Agile principles suggest the use of
self-organizing teams which work with a more “flat” management style where decisions are
made as a group rather than by a singular manager or management team. The concept ties
into agile’s value of teams and interactions over processes and tools, and the intent behind the
concept is to empower teams to work together as they need to.

274 | P a g e
How it looks in practice:

 Self-organizing teams are autonomous groups within the organization who take control and
responsibility over their respective projects and have ownership of those areas. Different
organizations practice this principle differently. Spotify, for example uses “product squads” to
practice this.

Learn more about managing complex requirements in an agile world in the webinar below.

deploying applicationin Cloud

About Deploying Oracle Agile PLM on Cloud
If your organization wants to develop, deploy, and/or update parts of an Agile Product
Lifecycle Management (PLM) application in a faster, more agile way, instead of investing in
building on-premise implementations, then deploy Agile PLM on Oracle Cloud
Infrastructure.

By using Agile PLM on Oracle Cloud, replication from on-premise to cloud and cloud-to-cloud
platforms can easily be established and managed. You can also gain the benefits of faster
infrastructure updates, easier scaling up (and down), lower capital expenditure, and fewer personnel
dedicated to basic infrastructure maintenance.

Key Workload Requirements

The architectures that Oracle provides help you address these requirements:

 Designing for high availability and disaster recovery

 Deploying a secure architecture.
 Matching your high-performance and highly isolated network model.
 Deploying your application and database environments into the cloud.
 Maintaining visibility over costs and usage.
 Monitoring infrastructure health and performance.

Architecture for Deploying Agile PLM on Cloud

You can deploy Agile PLM in a single availability domain while ensuring high availability.
Use this architecture when you want to ensure that your application is available even when an
application instance goes down. The other available application instances in the availability
domain continue to process the requests.

Oracle Agile PLM can be deployed on cloud in a multi-tiered architecture. The architecture
consists of a virtual cloud network (VCN) with the bastion host, load balancer tier,
application tier, and database tier. The tiers are placed in separate subnets of the VCN in a
single availability domain.

275 | P a g e
Description of the illustration agile_plm_reference_architecture_high_availability.png

The Agile PLM application server can be set up in a standalone or clustered configuration. In
the image shown, a standalone server is considered, which has only one Oracle WebLogic
Server instance. All client servers and users connect to the application server either directly

276 | P a g e
or indirectly. To permit traffic to the web server from the internet, you can create load
balancers in the public subnet. You can access Oracle Cloud instances in the private subnet
from your data centers by connecting through the dynamic routing gateway (DRG). The DRG
is the gateway that connects your on premise network to your cloud network and you can
enable communication between the two using VPN. You’ll also have to update the route table
to enable traffic to and from the DRG.

The load balancer receives requests from users, and then routes these requests to the
application tier. You can allow for redundancy (and scalability) by configuring multiple
instances of the WebLogic server for the core application, Tomcat for File Manager, and
RAC for database. You can augment redundancy through the use of fault domains so that you
can continue accessing the application even if an instance goes down. All instances are active
and receive traffic from the load balancer.

There's a private Load Balancer between File Manager and Application Server to distribute
traffic to your application instances within a VCN. This service provides a primary and a
standby instance of the load balancer to ensure that if the primary load balancer becomes
unavailable, the standby load balancer forwards the requests. The load balancer ensures that
requests are routed to the healthy application instances. If there’s a problem with an
application instance, then the load balancer removes that instance and starts routing requests
to the remaining healthy application instances.

The database server stores all product content and system settings and is placed in the private
subnet. This database is accessed only by the application server. For performance and high
availability requirements, Oracle recommends that you use two-node Oracle Real Application
Clusters (Oracle RAC) database systems in Oracle Cloud Infrastructure.

Architecture of Agile PLM Disaster Recovery

Oracle Cloud provides Agile PLM implementations that ensure you can build disaster
recovery (DR) into your deployment in unforeseen events that would require you to failover
and still keep Agile PLM up and running.

The following image illustrates the reference architecture for deploying Agile PLM in
multiple regions with high availability and disaster recovery.

277 | P a g e
Description of the illustration
agile_plm_reference_architecture_high_availability_and_dr.png

Oracle Data Guard protects your database tier by replicating data across availability domains.

278 | P a g e