Web Development Practical
Uploaded by
James BatistaWeb Development Practical
Uploaded by
James BatistaWEB
DEVELOPMENT
Practical note
UNIT-II - HTML
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>
1 | MonTech Heart of Experience# Vo1
<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.
2 | MonTech Heart of Experience# Vo1
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.
3 | MonTech Heart of Experience# Vo1
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.
Step 1: Open Notepad (Windows)
Step 2: Write code in HTML
4 | MonTech Heart of Experience# Vo1
Step 3: Save the HTML file with .htm or .html extension.
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
5 | MonTech Heart of Experience# Vo1
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):
To open Sublime Text editor go to Start screen type Sublime Text Open it. To open a
new page press CTRL+N.
6 | MonTech Heart of Experience# Vo1
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
7 | MonTech Heart of Experience# Vo1
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.
8 | MonTech Heart of Experience# Vo1
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.
9 | MonTech Heart of Experience# Vo1
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
10 | MonTech Heart of Experience# Vo1
HTML Tags
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.
11 | MonTech Heart of Experience# Vo1
<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.
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
12 | MonTech Heart of Experience# Vo1
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:
13 | MonTech Heart of Experience# Vo1
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>
14 | MonTech Heart of Experience# Vo1
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>
15 | MonTech Heart of Experience# Vo1
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:
16 | MonTech Heart of Experience# Vo1
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.
17 | MonTech Heart of Experience# Vo1
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.
18 | MonTech Heart of Experience# Vo1
Nested HTML Elements: HTML can be nested, which means an element can contain
another element.
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:
19 | MonTech Heart of Experience# Vo1
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:
20 | MonTech Heart of Experience# Vo1
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.
<sub> It displays the content slightly below the normal line.
21 | MonTech Heart of Experience# Vo1
<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>
22 | MonTech Heart of Experience# Vo1
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:
1. <h2> I want to put a <mark> Mark</mark> on your face</h2>
23 | MonTech Heart of Experience# Vo1
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:
1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
24 | MonTech Heart of Experience# Vo1
Output:
Hello Write Your First Paragraph in monospaced font.
7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in superscript; means
it is displayed half a character's height above the other characters.
See this example:
1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your First Paragraph in superscript.
8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in subscript ; means it
is displayed half a character's height below the other characters.
See this example:
1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></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.
Headings in HTML helps the search engine to understand and index the structure of
web page.
25 | MonTech Heart of Experience# Vo1
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 subheading with their
paragraphs if
14. required.
15. </p>
16. </body>
17. </html>
26 | MonTech Heart of Experience# Vo1
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.
27 | MonTech Heart of Experience# Vo1
Space inside HTML Paragraph
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>
28 | MonTech Heart of Experience# Vo1
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,
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:
29 | MonTech Heart of Experience# Vo1
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>
30 | MonTech Heart of Experience# Vo1
5. </head>
6. <body>
7. <p>Click on <a href="https://www.javatpoint.com/" target="_blank"> thislink
</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"/>
Output:
31 | MonTech Heart of Experience# Vo1
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.
Example:
32 | MonTech Heart of Experience# Vo1
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:
33 | MonTech Heart of Experience# Vo1
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-isrobotics"><img
src="robot.jpg" height="100" width="100"></a>
Output:
34 | MonTech Heart of Experience# Vo1
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.
35 | MonTech Heart of Experience# Vo1
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
36 | MonTech Heart of Experience# Vo1
3. Leo
4. Oracle
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>
37 | MonTech Heart of Experience# Vo1
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd> 8. <dt>Oracle</dt>
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>
38 | MonTech Heart of Experience# Vo1
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
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:
39 | MonTech Heart of Experience# Vo1
HTML Ordered List | HTML Numbered List
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
40 | MonTech Heart of Experience# Vo1
ol type="I"
Let's see the example to display list in roman number uppercase.
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="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>
41 | MonTech Heart of Experience# Vo1
5. <li>SQL</li>
6. </ol>
Output:
A. HTML
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">
42 | MonTech Heart of Experience# Vo1
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Output:
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.
43 | MonTech Heart of Experience# Vo1
<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.
<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>
44 | MonTech Heart of Experience# Vo1
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:
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:
45 | MonTech Heart of Experience# Vo1
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>
46 | MonTech Heart of Experience# Vo1
Output:
Label Tag in Form
It is considered better to have label in form. As it makes the code parser/browser/user
friendly.
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>
47 | MonTech Heart of Experience# Vo1
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:
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>
48 | MonTech Heart of Experience# Vo1
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:
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/>
49 | MonTech Heart of Experience# Vo1
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:
50 | MonTech Heart of Experience# Vo1
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:
51 | MonTech Heart of Experience# Vo1
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>
52 | MonTech Heart of Experience# Vo1
Output:
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>
53 | MonTech Heart of Experience# Vo1
Output:
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.
54 | MonTech Heart of Experience# Vo1
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
Enter last name
Note:The default maximum cahracterlenght is 20.
55 | MonTech Heart of Experience# Vo1
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">
7. </form> Output:
56 | MonTech Heart of Experience# Vo1
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>
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>
57 | MonTech Heart of Experience# Vo1
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
Registration Form
Enter your Name:
58 | MonTech Heart of Experience# Vo1
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>
59 | MonTech Heart of Experience# Vo1
3.
4.
5.
<input type="file" name="newfile">
<input type="submit" value="submit">
</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.
60 | MonTech Heart of Experience# Vo1
3.
4.
5.
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>
<input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>
<input type="color" name="downclick" value="#f5f5dc"> Downclick
</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:
61 | MonTech Heart of Experience# Vo1
3.
4.
5.
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>
Select the meeting schedule: <br><br>
Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>
</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:
62 | MonTech Heart of Experience# Vo1
3.
4.
5.
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
63 | MonTech Heart of Experience# Vo1
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>
64 | P a g e
Output:
Demo of action attribute of form element
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:
65 | MonTech Heart of Experience# Vo1
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.
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-
formurlencoded" >
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.
66 | MonTech Heart of Experience# Vo1
Example:
1. <form action="action.html" method="post" enctype="text/plain" >
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:
67 | MonTech Heart of Experience# Vo1
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
68 | MonTech Heart of Experience# Vo1
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>
69 | MonTech Heart of Experience# Vo1
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>
Output:
70 | MonTech Heart of Experience# Vo1
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.
Example:
71 | MonTech Heart of Experience# Vo1
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,
bordercolor, 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; fontstyle: 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:
72 | MonTech Heart of Experience# Vo1
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:
73 | MonTech Heart of Experience# Vo1
1. <!DOCTYPE html>
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:
74 | MonTech Heart of Experience# Vo1
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <link rel="stylesheet" type="text/css" href="style.css">
5. </head>
6. <body>
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.
75 | MonTech Heart of Experience# Vo1
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.
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>
76 | MonTech Heart of Experience# Vo1
10. </head>
11. <body>
12. <h1 class="headings">This is first heading</h1>
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>
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>
77 | MonTech Heart of Experience# Vo1
2. <html> 3. <body>
4.
5. <h2>Class Attribute with JavaScript</h2>
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.
78 | MonTech Heart of Experience# Vo1
10. .center {
11. text-align: center;
12. }
13. </style>
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>
79 | MonTech Heart of Experience# Vo1
HTML 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.
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:
80 | MonTech Heart of Experience# Vo1
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>
81 | MonTech Heart of Experience# Vo1
21. <h2 id="demo"> </h2>
22. </body>
23. </html>
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>
82 | MonTech Heart of Experience# Vo1
Examples:
Example 1: Consider the below example that creates a simple list box.
1. <!DOCTYPE html>
2. <html>
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.
83 | MonTech Heart of Experience# Vo1
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"/>
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:
84 | MonTech Heart of Experience# Vo1
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>
15. <body>
16. <h1>Write Your First CSS Example</h1>
17. <p>This is Paragraph.</p>
18. </body>
19. </html>
Output:
Write Your First CSS Example
This is Paragraph.
85 | MonTech Heart of Experience# Vo1
Unit II – CSS
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.
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.
86 | MonTech Heart of Experience# Vo1
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
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
87 | MonTech Heart of Experience# Vo1
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.
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. }
88 | MonTech Heart of Experience# Vo1
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>
14. </body>
15. </html> Test it Now
Output:
This heading is blue and center-aligned.
This paragraph is blue and center-aligned.
89 | MonTech Heart of Experience# Vo1
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
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>
90 | MonTech Heart of Experience# Vo1
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;
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:
91 | MonTech Heart of Experience# Vo1
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
3. External CSS
1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.
92 | MonTech Heart of Experience# Vo1
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.
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:
93 | MonTech Heart of Experience# Vo1
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 {
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>
94 | MonTech Heart of Experience# Vo1
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
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>
95 | MonTech Heart of Experience# Vo1
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
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>
96 | MonTech Heart of Experience# Vo1
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>
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.
97 | MonTech Heart of Experience# Vo1
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>
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.
98 | MonTech Heart of Experience# Vo1
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
The Border style property is used to specify the border type which you want to display on the
web page.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. p.none {border-style: none;}
6. p.dotted {border-style: dotted;}
99 | MonTech Heart of Experience# Vo1
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>
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.
100 | MonTech Heart of Experience# Vo1
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;
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>
101 | MonTech Heart of Experience# Vo1
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
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
102 | MonTech Heart of Experience# Vo1
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{
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. }
103 | MonTech Heart of Experience# Vo1
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
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>
104 | MonTech Heart of Experience# Vo1
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>
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>
105 | MonTech Heart of Experience# Vo1
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
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>
106 | MonTech Heart of Experience# Vo1
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>
46. <td> Alan </td>
47. <td> Rickman </td>
48. <td> Maths </td>
49. <td> 89 </td>
50. </tr>
51. <tr>
107 | MonTech Heart of Experience# Vo1
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>
27.
28. <body> 29.
30. <h1> The border-spacing Property </h1>
108 | MonTech Heart of Experience# Vo1
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
version css1
javascript syntax object.style.display="none"
109 | MonTech Heart of Experience# Vo1
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>
16. </body>
17. </html>
110 | MonTech Heart of Experience# Vo1
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;
111 | MonTech Heart of Experience# Vo1
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>
112 | MonTech Heart of Experience# Vo1
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.
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.
113 | MonTech Heart of Experience# Vo1
Other CSS display values
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
inline-flex
new 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-columngroup
It makes the element behave like a <colgroup> element.
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.
contextmenu
It indicates the availability of the context 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.
114 | MonTech Heart of Experience# Vo1
n-resize It represents the north direction that indicates that the edge of
the box is to be shifted to up.
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>
115 | MonTech Heart of Experience# Vo1
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
116 | MonTech Heart of Experience# Vo1
1. element {
2. // background-color style
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
117 | MonTech Heart of Experience# Vo1
1. element {
2. // border style
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>
118 | MonTech Heart of Experience# Vo1
43. </head>
44.
45. <body>
46. <h1>The border property</h1>
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;
119 | MonTech Heart of Experience# Vo1
24. border-radius: 7px;
25. }
26. .b3 {
27. background-color: yellow;
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
120 | MonTech Heart of Experience# Vo1
1. box-shadow: [horizontal offset] [vertical offset] [blur radius]
2. [optional spread radius] [color];
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: 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>
121 | MonTech Heart of Experience# Vo1
padding
It is used to set the button padding.
Syntax
1. element {
2. // padding style
3. }
Let's understand it using an illustration.
Example
1. <!DOCTYPE html>
2. <html> 3.
4. <head>
5. <title> button background Color </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;
122 | MonTech Heart of Experience# Vo1
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;
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
123 | MonTech Heart of Experience# Vo1
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 {
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.
124 | MonTech Heart of Experience# Vo1
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.
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;
125 | MonTech Heart of Experience# Vo1
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.
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>
126 | MonTech Heart of Experience# Vo1
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>
17. </html>
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>
127 | MonTech Heart of Experience# Vo1
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>
UNIT-III – JavaScript
Javascript basics
Learn JavaScript Tutorial
128 | MonTech Heart of Experience# Vo1
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.
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
129 | MonTech Heart of Experience# Vo1
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
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.
130 | MonTech Heart of Experience# Vo1
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
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>
131 | MonTech Heart of Experience# Vo1
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
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.
132 | MonTech Heart of Experience# Vo1
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
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
133 | MonTech Heart of Experience# Vo1
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
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.
134 | MonTech Heart of Experience# Vo1
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;
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,
135 | MonTech Heart of Experience# Vo1
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. }
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
136 | MonTech Heart of Experience# Vo1
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;
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.
137 | MonTech Heart of Experience# Vo1
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
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",
138 | MonTech Heart of Experience# Vo1
};
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;
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}.`)
139 | MonTech Heart of Experience# Vo1
}
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
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();
140 | MonTech Heart of Experience# Vo1
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.
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')
141 | MonTech Heart of Experience# Vo1
varopErrDiv=document.querySelector('#opError')
// actual javascript code
try{
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');
142 | MonTech Heart of Experience# Vo1
e.innerHTML="<h1> Header from JavaScript </h1>" document.body.appendChild(e);
</script>
</body>
</html>
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
}
143 | MonTech Heart of Experience# Vo1
</script>
</body>
</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
144 | MonTech Heart of Experience# Vo1
}
</script>
</body>
</html>
Unit IV – PHP
PHP Introduction
What is PHP?
• PHP stands for PHP: Hypertext Preprocessor
• PHP is a server-side scripting language, like ASP
• PHP scripts are executed on the server
• PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL,
Generic ODBC, etc.)
• PHP is an open source software
• PHP is free to download and use
What is a PHP File?
• PHP files can contain text, HTML tags and scripts
• PHP files are returned to the browser as plain HTML
• PHP files have a file extension of ".php", ".php3", or ".phtml"
What is MySQL?
• MySQL is a database server
• MySQL is ideal for both small and large applications
• MySQL supports standard SQL
• MySQL compiles on a number of platforms
• MySQL is free to download and use
PHP + MySQL
• PHP combined with MySQL are cross-platform (you can develop in Windows and
serve on a
Unix platform)
Why PHP?
• PHP runs on different platforms (Windows, Linux, Unix, etc.)
• PHP is compatible with almost all servers used today (Apache, IIS, etc.)
• PHP is FREE to download from the official PHP resource: www.php.net
145 | MonTech Heart of Experience# Vo1
• PHP is easy to learn and runs efficiently on the server side
Where to Start?
To get access to a web server with PHP support, you can:
• Install Apache (or IIS) on your own server, install PHP, and MySQL Or find a
web hosting plan with PHP and MySQL support
PHP Syntax
PHP code is executed on the server, and the plain HTML result is sent to the browser.
Basic PHP Syntax
A PHP scripting block always starts with <?php and ends with ?>. A PHP scripting block
can be placed anywhere in the document.
On servers with shorthand support enabled you can start a scripting block with <? and end
with ?>.
For maximum compatibility, we recommend that you use the standard form (<?php) rather
than the shorthand form.
<?php
?>
A PHP file normally contains HTML tags, just like an HTML file, and some PHP scripting
code.
Below, we have an example of a simple PHP script which sends the text "Hello World" to the
browser:
<html>
<body>
<?php
echo "Hello World";
?>
</body>
</html>
146 | MonTech Heart of Experience# Vo1
Each code line in PHP must end with a semicolon. The semicolon is a separator and is used to
distinguish one set of instructions from another.
There are two basic statements to output text with PHP: echo and print. In the example
above we have used the echo statement to output the text "Hello World".
Note: The file must have a .php extension. If the file has a .html extension, the PHP code
will not be executed.
Comments in PHP
In PHP, we use // to make a single-line comment or /* and */ to make a large comment block.
<html>
<body>
<?php
//This is a comment
/*
This is
a
comment
block */
?>
</body>
</html>
PHP Variables
A variable is used to store information.
Variables in PHP
Variables are used for storing values, like text strings, numbers or arrays.
When a variable is declared, it can be used over and over again in your script.
All variables in PHP start with a $ sign symbol.
The correct way of declaring a variable in PHP:
$var_name = value;
New PHP programmers often forget the $ sign at the beginning of the variable. In that case it
will not work.
Let's try creating a variable containing a string, and a variable containing a number:
147 | MonTech Heart of Experience# Vo1
< ?php
$txt="Hello Worl
d!";
$x=16;
?>
PHP is a Loosely Typed Language
In PHP, a variable does not need to be declared before adding a value to it.
In the example above, you see that you do not have to tell PHP which data type the variable
is.
PHP automatically converts the variable to the correct data type, depending on its value.
In a strongly typed programming language, you have to declare (define) the type and name of
the variable before using it.
In PHP, the variable is declared automatically when you use it.
Naming Rules for Variables
• A variable name must start with a letter or an underscore "_"
• A variable name can only contain alpha-numeric characters and underscores (a-z, A-Z,
0-9, and _ )
• A variable name should not contain spaces. If a variable name is more than one word,
it should be separated with an underscore ($my_string), or with capitalization
($myString)
PHP String Variables
A string variable is used to store and manipulate text.
String Variables in PHP
String variables are used for values that contain characters.
In this chapter we are going to look at the most common functions and operators used to
manipulate strings in PHP.
After we create a string we can manipulate it. A string can be used directly in a function or it
can be stored in a variable.
Below, the PHP script assigns the text "Hello World" to a string variable called $txt:
<?php
$txt="Hello World"; echo $txt; ?>
148 | MonTech Heart of Experience# Vo1
The output of the code above will be:
Hello World
Now, lets try to use some different functions and operators to manipulate the string.
The Concatenation Operator
There is only one string operator in PHP.
The concatenation operator (.) is used to put two string values together.
To concatenate two string variables together, use the concatenation operator:
<?php
$txt1="Hello World!"; $txt2="What a nice day!"; echo
$txt1 . " " . $txt2; ?>
The output of the code above will be:
Hello World! What a nice day!
If we look at the code above you see that we used the concatenation operator two times. This
is because we had to insert a third string (a space character), to separate the two strings.
The strlen() function
The strlen() function is used to return the length of a string.
Let's find the length of a string:
<?php
echo strlen("Hello world!");
?>
The output of the code above will be:
12
149 | MonTech Heart of Experience# Vo1
The length of a string is often used in loops or other functions, when it is important to know
when the string ends. (i.e. in a loop, we would want to stop the loop after the last character in
the string).
The strpos() function
The strpos() function is used to search for a character/text within a string.
If a match is found, this function will return the character position of the first match. If no
match is found, it will return FALSE.
Let's see if we can find the string "world" in our string:
<?php
echo strpos("Hello world!","world"); ?>
The output of the code above will be:
The position of the string "world" in the example above is 6. The reason that it is 6 (and not
7), is that the first character position in the string is 0, and not 1.
Complete PHP String Reference
For a complete reference of all string functions, go to our complete PHP String Reference.
The reference contains a brief description, and examples of use, for each function!
PHP Operators
Operators are used to operate on values.
PHP Operators
This section lists the different operators used in PHP.
150 | MonTech Heart of Experience# Vo1
Arithmetic Operators
Operator Description Example Result
+ Addition x=2 4
x+2
- Subtraction x=2 5- 3
x
* Multiplication x=4 20
x*5
/ Division 15/5 3
5/2 2.5
% Modulus (division remainder) 5%2 1
10%8 2
10%2 0
++ Increment x=5 x++ x=6
-- Decrement x=5 x=4
x--
Assignment Operators
Operator Example Is The Same As
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
.= x.=y x=x.y
%= x%=y x=x%y
Comparison Operators
Operator Description Example
== is equal to 5==8 returns false
!= is not equal 5!=8 returns true
<> is not equal 5<>8 returns true
> is greater than 5>8 returns false
< is less than 5<8 returns true
>= is greater than or equal to 5>=8 returns false
<= is less than or equal to 5<=8 returns true
151 | MonTech Heart of Experience# Vo1
Logical Operators
Operator Description Example
&& and x=6
y=3
(x < 10 && y > 1) returns true
|| or x=6
y=3
(x==5 || y==5) returns false
! not x=6
y=3
!(x==y) returns true
PHP If…Else Statements
Conditional statements are used to perform different actions based on different conditions.
Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In PHP we have the following conditional statements:
• if statement - use this statement to execute some code only if a specified
condition is true
• if...else statement - use this statement to execute some code if a condition is
true and another code if the condition is false
• if...elseif....else statement - use this statement to select one of several
blocks of code to be executed
• switch statement - use this statement to select one of many blocks of code to
be executed
The if Statement
Use the if statement to execute some code only if a specified condition is true.
Syntax
if (condition) code to be executed if condition is true;
152 | MonTech Heart of Experience# Vo1
The following example will output "Have a nice weekend!" if the current day is Friday:
<html>
<body>
<?php $d=date("D"); if ($d=="Fri") echo "Have a nice weekend!";
?>
</body>
</html>
Notice that there is no ..else.. in this syntax. The code is executed only if the specified
condition is true.
The if...else Statement
Use the if....else statement to execute some code if a condition is true and another code if a
condition is false.
Syntax
if (condition) code to be executed if condition is
true; else
code to be executed if condition is false;
Example
The following example will output "Have a nice weekend!" if the current day is Friday,
otherwise it will output "Have a nice day!":
<html>
<body>
<?php
$d=date("D"); if ($d=="Fri") echo "Have a nice weekend!"; else echo "Have a nice day!";
?>
</body>
</html>
153 | MonTech Heart of Experience# Vo1
If more than one line should be executed if a condition is true/false, the lines should be
enclosed within curly braces:
< html>
< body>
< ?php
$d=date("D");
if ($d=="Fri")
{
echo "Hello!<br />";
echo "Have a nice weekend!";
echo "See you on Monday!";
}
?>
< /body>
< /html>
The if...elseif....else Statement
Use the if....elseif...else statement to select one of several blocks of code to be executed.
Syntax
if (condition) code to be executed if condition is
true; elseif (condition) code to be executed if
condition is true; else
code to be executed if condition is false;
Example
The following example will output "Have a nice weekend!" if the current day is Friday, and
"Have a nice Sunday!" if the current day is Sunday. Otherwise it will output "Have a nice
day!":
<html>
<body>
<?php
$d=date("D"); if ($d=="Fri") echo "Have a nice weekend!"; elseif ($d=="Sun") echo "Have
a nice Sunday!"; else echo "Have a nice day!";
154 | MonTech Heart of Experience# Vo1
?>
</body>
</html>
PHP Looping – While Loops
Loops execute a block of code a specified number of times, or while a specified condition is
true.
PHP Loops
Often when you write code, you want the same block of code to run over and over again in a
row.
Instead of adding several almost equal lines in a script we can use loops to perform a task like
this.
In PHP, we have the following looping statements:
• while - loops through a block of code while a specified condition is true
• do...while - loops through a block of code once, and then repeats the loop as long
as a specified condition is true
• for - loops through a block of code a specified number of times
• foreach - loops through a block of code for each element in an array
The while Loop
The while loop executes a block of code while a condition is true.
Syntax
while (condition)
{ code to be executed; }
Example
The example below defines a loop that starts with i=1. The loop will continue to run as long
as i is less than, or equal to 5. i will increase by 1 each time the loop runs:
<html>
<body>
155 | MonTech Heart of Experience# Vo1
<?php $i=1; while($i<=5)
{
echo "The number is " . $i . "<br />";
$i++;
}
?>
</body>
</html>
Output:
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The do...while Statement
The do...while statement will always execute the block of code once, it will then check the
condition, and repeat the loop while the condition is true.
Syntax
do
{ code to be
executed;
} while
(condition);
Example
The example below defines a loop that starts with i=1. It will then increment i with 1, and
write some output. Then the condition is checked, and the loop will continue to run as long as
i is less than, or equal to 5:
156 | MonTech Heart of Experience# Vo1
<html>
<body>
<?php
$i=1;
do
{
$i++; echo "The number is " . $i .
"<br />";
} while ($i<=5);
?>
</body>
</html>
Output:
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The for loop and the foreach loop will be explained in the next chapter.
PHP Looping – For Loops
Loops execute a block of code a specified number of times, or while a specified condition is
true.
The for Loop
The for loop is used when you know in advance how many times the script should run.
Syntax
for (init; condition; increment)
{ code to be
executed;
157 | MonTech Heart of Experience# Vo1
}
Parameters:
• init: Mostly used to set a counter (but can be any code to be executed once at the
beginning of the loop)
• condition: Evaluated for each loop iteration. If it evaluates to TRUE, the loop
continues. If it evaluates to FALSE, the loop ends.
• increment: Mostly used to increment a counter (but can be any code to be executed
at the end of the loop)
Note: Each of the parameters above can be empty, or have multiple expressions (separated
by commas).
Example
The example below defines a loop that starts with i=1. The loop will continue to run as long
as i is less than, or equal to 5. i will increase by 1 each time the loop runs:
<html>
<body>
<?php for ($i=1;
$i<=5; $i++)
{ echo "The number is " . $i . "<br
/>";
}
?>
</body>
</html>
Output:
The number is 1
The number is 2
The number si 3
The number is 4
The number is 5
The foreach Loop
The foreach loop is used to loop through arrays.
158 | MonTech Heart of Experience# Vo1
Syntax
foreach ($array as $value)
{ code to be
executed;
}
For every loop iteration, the value of the current array element is assigned to $value (and the
array pointer is moved by one) - so on the next loop iteration, you'll be looking at the next
array value.
Example
The following example demonstrates a loop that will print the values of the given array:
<html>
<body>
<?php
$x=array("one","two","three");
foreach ($x as $value)
{ echo $value . "<br
/>";
}
?>
</body>
</html>
PHP Database Connectivity
PHP and MySQL: Introduction
mySQL is the most popular open-source database system.
What is MySQL?
MySQL is a database.
The data in MySQL is stored in database objects called tables.
A table is a collection of related data entries and it consists of columns and rows.
Databases are useful when storing information categorically. A company may have a database
with the following tables: "Employees", "Products", "Customers" and "Orders".
159 | MonTech Heart of Experience# Vo1
Database Tables
A database most often contains one or more tables. Each table is identified by a name (e.g.
"Customers" or "Orders"). Tables contain records (rows) with data.
Below is an example of a table called "Persons":
LastName FirstName Address City
Hansen Ola Timoteivn 10 Sandnes
Svendson Tove Borgvn 23 Sandnes
Pettersen Kari Storgt 20 Stavanger
The table above contains three records (one for each person) and four columns (LastName,
FirstName, Address, and City).
Queries
A query is a question or a request.
With MySQL, we can query a database for specific information and have a recordset returned.
Look at the following query:
SELECT LastName FROM Persons
The query above selects all the data in the "LastName" column from the "Persons" table, and
will return a recordset like this:
LastNam
e
Hansen
Svendson
Pettersen
PHP and MySQL: Connect to a Database
Create a Connection to a MySQL Database
Before you can access data in a database, you must create a connection to the database.
In PHP, this is done with the mysql_connect() function.
160 | MonTech Heart of Experience# Vo1
Syntax
mysql_connect(servername,username,password);
Parameter Description
servername Optional. Specifies the server to connect to. Default value is
"localhost:3306"
username Optional. Specifies the username to log in with. Default value is the name of
the user that owns the server process
password Optional. Specifies the password to log in with. Default is ""
Note: There are more available parameters, but the ones listed above are the most
important. Visit our full PHP MySQL Reference for more details.
Example
In the following example we store the connection in a variable ($con) for later use in the
script. The "die" part will be executed if the connection fails:
< ?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die(“*** Connection FAILED***”);
} else {echo “*** Connection Succeeded ***";}
// some code
?>
Closing a Connection
The connection will be closed automatically when the script ends. To close the connection
before, use the mysql_close() function:
161 | MonTech Heart of Experience# Vo1
<?php
$con =
mysql_connect("localhost","root",""); if
(!$con)
{ die(“*** Connection
FAILED***”);
} else {echo "*** Connection Succeeded ***";}
// some code
mysql_close($con);
?>
PHP and MySQL: Create a Database and Tables
A database holds one or multiple tables.
Create a Database
The CREATE DATABASE statement is used to create a database in MySQL.
Syntax
CREATE DATABASE database_name
To learn more about SQL, please visit our SQL tutorial.
To get PHP to execute the statement above we must use the mysql_query() function. This
function is used to send a query or command to a MySQL connection.
Example
The following example creates a database called "my_db":
162 | MonTech Heart of Experience# Vo1
< ?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
if (mysql_query("CREATE DATABASE my_db",$con))
{
echo "Database created";
}
else
{
echo "Error creating database: " . mysql_error();
}
mysql_close($con);
?>
Create a Table
The CREATE TABLE statement is used to create a table in MySQL.
Syntax
CREATE TABLE table_name
(
column_name1 data_type, column_name2 data_type, column_name3 data_type,
....
)
To learn more about SQL, please visit our SQL tutorial.
We must add the CREATE TABLE statement to the mysql_query() function to execute the
command.
Example
The following example creates a table named "Persons", with three columns. The column
names will be "FirstName", "LastName" and "Age":
163 | MonTech Heart of Experience# Vo1
<?php
$con =
mysql_connect("localhost","root",""); if
(!$con)
{ die('Could not connect: ' .
mysql_error());
}
// Create database if (mysql_query("CREATE
DATABASE my_db",$con))
{ echo "Database
created";
} else { echo "Error creating database: " .
mysql_error(); }
// Create table
mysql_select_db("my_db", $con);
$sql = "CREATE TABLE Persons
(
FirstName varchar(15),
LastName varchar(15),
Age int
)";
// Execute query
mysql_query($sql,$con);
mysql_close($con);
?>
Important: A database must be selected before a table can be created. The database is
selected with the mysql_select_db() function.
Note: When you create a database field of type varchar, you must specify the maximum
length of the field, e.g. varchar(15).
The data type specifies what type of data the column can hold. For a complete reference of all
the data types available in MySQL, go to our complete Data Types reference.
Primary Keys and Auto Increment Fields
Each table should have a primary key field.
A primary key is used to uniquely identify the rows in a table. Each primary key value must
be unique within the table. Furthermore, the primary key field cannot be null because the
database engine requires a value to locate the record.
164 | MonTech Heart of Experience# Vo1
The following example sets the personID field as the primary key field. The primary key field
is often an ID number, and is often used with the AUTO_INCREMENT setting.
AUTO_INCREMENT automatically increases the value of the field by 1 each time a new
record is added. To ensure that the primary key field cannot be null, we must add the NOT
NULL setting to the field.
Example
$sql = "CREATE TABLE Persons
(
personID int NOT NULL AUTO_INCREMENT,
PRIMARY KEY(personID),
FirstName varchar(15),
LastName varchar(15),
Age int
)";
mysql_query($sql,$con);
PHP and MySQL: Insert Into to a Database
The INSERT INTO statement is used to insert new records in a table.
Insert Data Into a Database Table
The INSERT INTO statement is used to add new records to a database table.
Syntax
It is possible to write the INSERT INTO statement in two forms.
The first form doesn't specify the column names where the data will be inserted, only their
values:
INSERT INTO table_name
VALUES (value1, value2, value3,...)
The second form specifies both the column names and the values to be inserted:
INSERT INTO table_name (column1, column2, column3,...)
VALUES (value1, value2, value3,...)
To learn more about SQL, please visit our SQL tutorial.
165 | MonTech Heart of Experience# Vo1
To get PHP to execute the statements above we must use the mysql_query() function. This
function is used to send a query or command to a MySQL connection.
Example
In the previous chapter we created a table named "Persons", with three columns; "Firstname",
"Lastname" and "Age". We will use the same table in this example. The following example
adds two new records to the "Persons" table:
<?php
$con =
mysql_connect("localhost","root",""); if
(!$con)
{ die('Could not connect: ' .
mysql_error());
}
mysql_select_db("my_db", $con);
mysql_query("INSERT INTO Persons (FirstName, LastName, Age)
VALUES ('Peter', 'Griffin', '35')");
mysql_query("INSERT INTO Persons (FirstName, LastName, Age)
VALUES ('Glenn', 'Quagmire', '33')");
mysql_close($con);
?>
Insert Data From a Form Into a Database
Now we will create an HTML form that can be used to add new records to the "Persons"
table.
Here is the HTML form:
<html>
<body>
<form action="insert.php" method="post">
Firstname: <input type="text" name="firstname" />
Lastname: <input type="text" name="lastname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
166 | MonTech Heart of Experience# Vo1
</body>
</html>
When a user clicks the submit button in the HTML form in the example above, the form data
is sent to "insert.php".
The "insert.php" file connects to a database, and retrieves the values from the form with the
PHP $_POST variables.
Then, the mysql_query() function executes the INSERT INTO statement, and a new record
will be added to the "Persons" table.
Here is the "insert.php" page:
< ?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$sql="INSERT INTO Persons (FirstName, LastName, Age)
VALUES
('$_POST[firstname]','$_POST[lastname]','$_POST[age]'
)";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "1 record added";
mysql_close($con)
?>
PHP and MySQL: Select data from a Database
The SELECT statement is used to select data from a database.
Syntax
SELECT column_name(s)
FROM table_name
167 | MonTech Heart of Experience# Vo1
To learn more about SQL, please visit our SQL tutorial.
To get PHP to execute the statement above we must use the mysql_query() function. This
function is used to send a query or command to a MySQL connection.
Example
The following example selects all the data stored in the "Persons" table (The * character
selects all the data in the table):
<?php
$con =
mysql_connect("localhost","root",""); if
(!$con)
{ die('Could not connect: ' .
mysql_error());
}
mysql_select_db("my_db", $con);
$result = mysql_query("SELECT * FROM Persons");
while($row = mysql_fetch_array($result))
{ echo $row['FirstName'] . " " .
$row['LastName']; echo "<br />";
}
mysql_close($con);
?>
The example above stores the data returned by the mysql_query() function in the $result
variable.
Next, we use the mysql_fetch_array() function to return the first row from the recordset as an
array. Each call to mysql_fetch_array() returns the next row in the recordset. The while loop
loops through all the records in the recordset. To print the value of each row, we use the PHP
$row variable ($row['FirstName'] and $row['LastName']).
The output of the code above will be:
Peter Griffin
Glenn Quagmire
Display the Result in an HTML Table
The following example selects the same data as the example above, but will display the data
in an HTML table:
168 | MonTech Heart of Experience# Vo1
<?php
$con =
mysql_connect("localhost","root",""); if
(!$con)
{ die('Could not connect: ' .
mysql_error());
}
mysql_select_db("my_db", $con);
$result = mysql_query("SELECT * FROM Persons");
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>";
while($row = mysql_fetch_array($result))
{ echo "<tr>"; echo "<td>" .
$row['FirstName'] . "</td>"; echo "<td>"
. $row['LastName'] . "</td>"; echo
"</tr>";
} echo
"</table>";
mysql_close($con);
?>
Prepared by:
Mr. James Batista A. L
Jamesbatista2012@gmail.com
ICT Instructor: DBVTC
Juba South Sudan
169 | MonTech Heart of Experience# Vo1
You might also like
- Learning Web Component Development - Sample ChapterNo ratings yetLearning Web Component Development - Sample Chapter60 pages
- NareshIT PHP Training Notes03 SwamyNaiduNo ratings yetNareshIT PHP Training Notes03 SwamyNaidu100 pages
- The Practical Programmer's Guide To HTML & CSSNo ratings yetThe Practical Programmer's Guide To HTML & CSS128 pages
- Work With Strings With Stringr::: Cheat SheetNo ratings yetWork With Strings With Stringr::: Cheat Sheet2 pages
- DB Campus Drive Preparation Materials Geeks4GeeksNo ratings yetDB Campus Drive Preparation Materials Geeks4Geeks14 pages
- Beginning Modern Javascript a Step by Step Gentle Guide to LearnNo ratings yetBeginning Modern Javascript a Step by Step Gentle Guide to Learn186 pages
- Illustrator JavaScript Scripting ReferenceNo ratings yetIllustrator JavaScript Scripting Reference255 pages
- Beginner Interview CheatSheet_ 300+ Javascript Interview Q&ANo ratings yetBeginner Interview CheatSheet_ 300+ Javascript Interview Q&A306 pages
- Web Page Scripting Techniques Javascript VBScript and Advanced HTML100% (1)Web Page Scripting Techniques Javascript VBScript and Advanced HTML512 pages
- MG-Develop A Backend Application Using Node JsNo ratings yetMG-Develop A Backend Application Using Node Js16 pages
- 30 Top HTML Interview Questions and Answers (2022 LIST)No ratings yet30 Top HTML Interview Questions and Answers (2022 LIST)20 pages
- HTML5 Elements: Web Technology Assignment - 1947234100% (2)HTML5 Elements: Web Technology Assignment - 194723458 pages
- Company Result - (:companyname) : FreecodecampNo ratings yetCompany Result - (:companyname) : Freecodecamp10 pages
- Core Web Programming - Chapter 23: Document Object Model DOMNo ratings yetCore Web Programming - Chapter 23: Document Object Model DOM34 pages
- ColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification ReviewFrom EverandColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification ReviewNo ratings yet
- Relational Database Index Design and the Optimizers: DB2, Oracle, SQL Server, et al.From EverandRelational Database Index Design and the Optimizers: DB2, Oracle, SQL Server, et al.5/5 (1)
- Software - Engineer, Divx Technopark, Kerala, India Mob: +91-9895227675No ratings yetSoftware - Engineer, Divx Technopark, Kerala, India Mob: +91-989522767526 pages
- Industrial: The Aspect Object ArchitectureNo ratings yetIndustrial: The Aspect Object Architecture28 pages
- PowerPoint 2016 Module 1 PPT PresentationNo ratings yetPowerPoint 2016 Module 1 PPT Presentation20 pages
- Color IDs - Official ARK Survival Evolved Wiki PDFNo ratings yetColor IDs - Official ARK Survival Evolved Wiki PDF1 page
- Office 365 Installation Guide: Welcome To TheNo ratings yetOffice 365 Installation Guide: Welcome To The10 pages
- Lecture - 2 - Understanding Software QualityNo ratings yetLecture - 2 - Understanding Software Quality31 pages
- OpenText Brava! 16.6.3 - Brava! Enterprise Administration Guide English (CLBRVW160603-ABE-En-01)No ratings yetOpenText Brava! 16.6.3 - Brava! Enterprise Administration Guide English (CLBRVW160603-ABE-En-01)124 pages
- Third Edition: For Software Versions LA12 Replaces C0240103-07-15-ENNo ratings yetThird Edition: For Software Versions LA12 Replaces C0240103-07-15-EN65 pages
- Machining Simulation Software User ManualNo ratings yetMachining Simulation Software User Manual89 pages
- Adc Compact Annotation Software: User ManualNo ratings yetAdc Compact Annotation Software: User Manual22 pages
- Information and Communications Technology 8 Quarter 1 - Module 1: Lesson 1 Title:History of Programming LanguageNo ratings yetInformation and Communications Technology 8 Quarter 1 - Module 1: Lesson 1 Title:History of Programming Language18 pages
- AVEVA™ E3D Structural Design 3.2.2.1 Fix Full Fix Release 53102 Windows 10No ratings yetAVEVA™ E3D Structural Design 3.2.2.1 Fix Full Fix Release 53102 Windows 108 pages
- Touchpad Plus Ver. 4.0 Class 4: Windows 10 & MS Office 2019From EverandTouchpad Plus Ver. 4.0 Class 4: Windows 10 & MS Office 2019
- Learning Web Component Development - Sample ChapterLearning Web Component Development - Sample Chapter
- Beginning Modern Javascript a Step by Step Gentle Guide to LearnBeginning Modern Javascript a Step by Step Gentle Guide to Learn
- Beginner Interview CheatSheet_ 300+ Javascript Interview Q&ABeginner Interview CheatSheet_ 300+ Javascript Interview Q&A
- Web Page Scripting Techniques Javascript VBScript and Advanced HTMLWeb Page Scripting Techniques Javascript VBScript and Advanced HTML
- 30 Top HTML Interview Questions and Answers (2022 LIST)30 Top HTML Interview Questions and Answers (2022 LIST)
- HTML5 Elements: Web Technology Assignment - 1947234HTML5 Elements: Web Technology Assignment - 1947234
- Core Web Programming - Chapter 23: Document Object Model DOMCore Web Programming - Chapter 23: Document Object Model DOM
- ColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification ReviewFrom EverandColdFusion Interview Questions, Answers, and Explanations: ColdFusion Certification Review
- Relational Database Index Design and the Optimizers: DB2, Oracle, SQL Server, et al.From EverandRelational Database Index Design and the Optimizers: DB2, Oracle, SQL Server, et al.
- Building Websites with VB.NET and DotNetNuke 4From EverandBuilding Websites with VB.NET and DotNetNuke 4
- Software - Engineer, Divx Technopark, Kerala, India Mob: +91-9895227675Software - Engineer, Divx Technopark, Kerala, India Mob: +91-9895227675
- Color IDs - Official ARK Survival Evolved Wiki PDFColor IDs - Official ARK Survival Evolved Wiki PDF
- OpenText Brava! 16.6.3 - Brava! Enterprise Administration Guide English (CLBRVW160603-ABE-En-01)OpenText Brava! 16.6.3 - Brava! Enterprise Administration Guide English (CLBRVW160603-ABE-En-01)
- Third Edition: For Software Versions LA12 Replaces C0240103-07-15-ENThird Edition: For Software Versions LA12 Replaces C0240103-07-15-EN
- Information and Communications Technology 8 Quarter 1 - Module 1: Lesson 1 Title:History of Programming LanguageInformation and Communications Technology 8 Quarter 1 - Module 1: Lesson 1 Title:History of Programming Language
- AVEVA™ E3D Structural Design 3.2.2.1 Fix Full Fix Release 53102 Windows 10AVEVA™ E3D Structural Design 3.2.2.1 Fix Full Fix Release 53102 Windows 10