Web Technology PP T

HTML5 Application Fundamentals
Introduction to Html
🠶 HTML5 is a markup language, has been come into existence around January 2008.
🠶 The two major organizations have been involved in developing of HTML5 is W3C (World
Wide Web Consortium) and WHATWG (Web Hypertext Application Technology Working
Group).
🠶 HTML5 is the newest version of Hyper Text Markup Language. The first web browser was
introduced in 1993 called MOSAIC.
🠶 MOSAIC was developed by NCSA (National Center for Supercomputing Applications).
Later it was discontinued to development on 7th of January 1997.
HTML History
🠶 In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed
a system for CERN researchers.
🠶 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.
What is Html5 ?
🠶 HTml stands for HyperText Markup Language.

🠶 HTML is used to create web pages and web applications.
🠶 HTML is widely used langauge on the web.
🠶 We can create satic website using HTML.
🠶 HTML is a Markup Language rathern than a programming language.
What is Html5 ?
Hyper Text
🠶 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.
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.
Versions of HTML
Version 🠶 Version
Year
HTML 1.0 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
HTML5 2008
Features of HTML
🠶 It is a very easy and simple language. It can be easily understood and modified.
🠶 It is very easy to make effective presentation with HTML because it has a lot
of formatting tags.
🠶 It is a markup language so it provides a flexible way to design web pages along with the
text.
🠶 It facilitates programmers to add link on the web pages (by html anchor tag) , so it
enhances the interest of browsing of the user.
🠶 It is platform-independent because it can be displayed on any platform like Windows,
Linux and Macintosh etc.
🠶 It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
🠶 HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.
Supporting Browsers
Element Chrome IE Firefox Opera Safari

HTML5 Tags Yes Yes Yes Yes Yes
HTML EXAMPLE
<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body> DOCTYPE: It defines the document type.
html : Text between html tag describes the
</html> web document.
body : Text between body tag describes the
body content of the page that is visible to the
end user.
h1 : Text between h1 tag describes the
heading of the webpage.
p : Text between p tag describes the
paragraph of the webpage.
HTML 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.
🠶 we will use Notepad and sublime text editor. Following are ways to create your first web page with Notepad,
and sublime text.
HTML code with Notepad
🠶 Step 1: Open Notepad
🠶 Step 2: Write HTML Code

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

🠶 Step 4: Open the HTML page in your web browser.

HTML code with Sublime Text-editor.
🠶 Step 1: Open Sublime Text editor

HTML code with Sublime Text-editor
🠶 Step 2: Save the page before writing any code.

🠶 Step 3: Write the code in Sublime Text editor

🠶 Step 4: Open the HTML page in your Browser

<
The DOCTYPE
🠶 DOCTYPEs in older versions of HTML were longer because the HTML language was SGML
based and therefore required a reference to a DTD.
🠶 HTML 5 authors would use simple syntax to specify DOCTYPE as follows −
<!DOCTYPE html>
🠶 Character Encoding
meta charset="UTF-8">
🠶 The <script> tag
<script type="text/javascript" src="scriptfile.js"></script>
<script src="scriptfile.js"></script>
🠶 The <link> tag
<link rel="stylesheet" type="text/css" href="stylefile.css">
<link rel="stylesheet" href="stylefile.css">
🠶 HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle
brackets with the tag name in between.
🠶 <p>...</p>
HTML BUILDING BLOCKS
🠶 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.
🠶 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.
Syntax
🠶 <tag name attribute_name= " attr_value"> content </ tag name>
HTML BUILDING BLOCKS
<!DOCTYPE html>
<html>
<head>
<title>The basic building blocks of HTML</title>
</head>
<body>
<h2>The building blocks</h2>
<p>This is a paragraph tag</p>
<p style="color: red">The style is attribute of paragraph tag</p>
<span>The element contains tag, attribute and content</span>
</body>
</html>
HTML Tags
🠶 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>
Syntax
🠶 <tag> content </tag>
<!DOCTYPE>
<html>
<body>
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
</body>
</html>
HTML 5 Tags-complete
Tag Description
 Specifies a comment
<!DOCTYPE> Specifies the document type
<a> Specifies an anchor
<abbr> Specifies an abbreviation
<acronym> Deprecated:Specifies an acronym
<address> Specifies an address element
<applet> Deprecated: Specifies an applet
<area> Specifies an area inside an image map
<article> New Tag: Specifies an independent piece
of content of a document, such as a blog
entry or newspaper article
Tag Description
<aside> New Tag:Specifies a piece of content that
is only slightly related to the rest of the
page.
<audio> New Tag:Specifies an audio file.
<base> Specifies a base URL for all the links in a
page
<basefont> Deprecated: Specifies a base font
<bdo> Specifies the direction of text display
<bgsound> Specifies the background music
<blink> Specifies a text which blinks
<blockquote> Specifies a long quotation
<body> Specifies the body element
<br> Inserts a single line break
Tag Description
<button> Specifies a push button
<canvas> New Tag:This is used for rendering
dynamic bitmap graphics on the fly, such
as graphs or games.
<caption> Specifies a table caption
<center> Deprecated: Specifies centered text
<col> Specifies attributes for table columns
<colgroup> Specifies groups of table columns
<command> New Tag:Specifies a command the user
can invoke.
<comment> Puts a comment in the document
<datalist> New Tag:Together with the a new list
attribute for input can be used to make
comboboxes
<dd> Specifies a definition description
Tag Description
<del> Specifies deleted text
<details> New Tag:Specifies additional information
or controls which the user can obtain on
demand.
<dir> Deprecated: Specifies a directory list
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<embed> New Tag:Defines external interactive
content or plugin.
<fieldset> Specifies a fieldset
<figure> New Tag:Specifies a piece of self-
contained flow content, typically
referenced as a single unit from the main
flow of the document.
<b> Specifies bold text
Tag Description
<big> Deprecated:Specifies big text
<i> Specifies italic text
<small> Specifies small text
<tt> Deprecated:Specifies teletype text
<font> Deprecated: Specifies text font, size, and
color
<footer> New Tag:Specifies a footer for a section
and can contain information about the
author, copyright information, et cetera.
<form> Specifies a form
<frame> Deprecated:Specifies a sub window (a
frame)
<frameset> Deprecated:Specifies a set of frames
<head> Specifies information about the document
Tag Description
<header> New Tag:Specifies a group of introductory
or navigational aids.
<hgroup> New Tag:Specifies the header of a section.
<h1> to <h6> Specifies header 1 to header 6
<hr> Specifies a horizontal rule
<html> Specifies an html document
<isindex> Deprecated: Specifies a single-line input
field
<iframe> Specifies an inline sub window (frame)
<ilayer> Specifies an inline layer
<img> Specifies an image
<input> Specifies an input field
Tag Description
<ins> Specifies inserted text
<keygen> New Tag:Specifies control for key pair
generation.
<keygen> Generate key information in a form
<label> Specifies a label for a form control
<layer> Specifies a layer
<legend> Specifies a title in a fieldset
<li> Specifies a list item
<link> Specifies a resource reference
<map> Specifies an image map
<mark> New Tag:Specifies a run of text in one
document marked or highlighted for
reference purposes, due to its relevance in
another context.
Tag Description
<marquee> Create a scrolling-text marquee
<menu> Deprecated: Specifies a menu list
<meta> Specifies meta information
<meter> New Tag:Specifies a measurement, such
as disk usage.
<multicol> Specifies a multicolumn text flow
<nav> New Tag:Specifies a section of the
document intended for navigation.
<nobr> No breaks allowed in the enclosed text
<noembed> Specifies content to be presented by
browsers that do not support the
<embed>tag
<noframes> Deprecated:Specifies a noframe section
<noscript> Specifies a noscript section
Tag Description
<object> Specifies an embedded object
<ol> Specifies an ordered list
<optgroup> Specifies an option group
<option> Specifies an option in a drop-down list
<output> New Tag:Specifies some type of output,
such as from a calculation done through
scripting.
<p> Specifies a paragraph
<param> Specifies a parameter for an object
<cite> Specifies a citation
<code> Specifies computer code text
<dfn> Specifies a definition term
<em> Specifies emphasized text
Tag Description
<kbd> Specifies keyboard text
<samp> Specifies sample computer code
<strong> Specifies strong text
<var> Specifies a variable
<plaintext> Deprecated: Render the raminder of the
document as preformatted plain text
<pre> Specifies preformatted text
<progress> New Tag:Specifies a completion of a task,
such as downloading or when performing
a series of expensive operations.
<q> Specifies a short quotation
<ruby> New Tag:Together with <rt> and <rp> allow
for marking up ruby annotations.
<script> Specifies a script
Tag Description
<section> New Tag:Represents a generic document
or application section.
<select> Specifies a selectable list
<spacer> Specifies a white space
<span> Specifies a section in a document
<s> Deprecated: Specifies strikethrough text
<strike> Deprecated: Specifies strikethrough text
<style> Specifies a style definition
<sub> Specifies subscripted text
<sup> Specifies superscripted text
<table> Specifies a table
<tbody> Specifies a table body
Tag Description
<td> Specifies a table cell
<textarea> Specifies a text area
<tfoot> Specifies a table footer
<th> Specifies a table header
<thead> Specifies a table header
<time> New Tag:Specifies a date and/or time.
<title> Specifies the document title
<tr> Specifies a table row
<u> Deprecated: Specifies underlined text
<ul> Specifies an unordered list
<video> New Tag:Specifies a video file.
<wbr> New Tag:Specifies a line break
opportunity.
<wbr> Indicate a potential word break point within
a <nobr> section
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
🠶 <element attribute_name="value">content</element>
HTML Attribute
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add s
tyle property in element</p>
<p style="color: red">It will change the color of
content</p>
</body>
</html>
The title attribute in HTML
🠶 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.
Example
With <h1> tag:
<h1 title="This is heading tag">Example of title attribute</h1>
<!DOCTYPE🠶html>
<html>
<head>
</head>
<body>
<h1 title="This is heading tag">Example of title attribute</

h1>
<p title="This is paragraph tag">Move the cursor over the hea
ding and paragraph, and you will see a description as a tooltip</
p>
</body>
</html>
The href attribute in HTML
🠶 he 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
🠶 <a href="">This is a link</a>
🠶 <a href="https://www.raghuenggcollege.com/">REC</a>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Display of href attribute</h1>
<p>Below is the link of anchor tag, click the link and see the next
page</p>
<a href="https://www.raghuenggcollege.com/">This is a link</a>
</body>
</html>
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
🠶 <img src="whitepeacock.jpg" height="400" width="600">
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1> My College</h1>
<p>Raghu Engineering College</p>
<img src="C:\Users\USER\Pictures\shine-green.png">
</body>
</html>
Quotes: single quotes or double quotes?
🠶 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.
🠶 Example:
<a href="https://www.raghuenggcollege.com/">This is a link</a>
<a href=‘https://www.raghuenggcollege.com/’>This is a link</a>
🠶 IN HTML5, you can also omit use of quotes around attribute values.
<a href=https://www.raghuenggcollege.com/>This is a link</a>
HTML ELEMENT
🠶 HTML element is a collection of start tag, attributes, end tag, content between them.
🠶 Ex: <p> Hello world!!! </p>
🠶 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.
🠶 Ex : <br> , <hr>
Block-level and Inline HTML elements
🠶 For 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.
🠶 <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>.
Block-level and Inline HTML elements
<DOCTYPE html>
<html>
<head>
</head> ! Block level element
<body>
<div style="background-color: lightblue">This is first div</div>
<div style="background-color: lightgreen">This is second
div</div>
<p style="background-color: pink">This is a block level
element</p>
</body>
</html>
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>.
Inline Elements
<!DOCTYPE html>
<html>
<head> Inline element
</head>
<body>
<a href="https://www.amazon.in">Click here</a>
<span style="background-
color: lightblue">this is inline element</span>
<p>This will take width of text only</p>
</body>
</html>
HTML FORMATING
🠶 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.
🠶 we are going to learn 14 HTML formatting tags. .
HTML FORMATING
Element name Description

<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)
<strike> This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.
HTML Formatting
🠶 Bold
<p> <b>Write Your First Paragraph in bold text.</b></p>
🠶 Strong
<p><strong>This is an important content</strong>, and this is normal content</p>
🠶 Italic
<p> <i>Write Your First Paragraph in italic text.</i></p>
🠶 em
<p><em>This is an important content</em>, which displayed in italic font.</p>
🠶 Marked /HighlightingFormatting
<h2> I want to put a <mark> Mark</mark> on your face</h2>
🠶 Underlined Text
<p> <u>Write Your First Paragraph in underlined text.</u></p>
🠶 Strike Text
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
HTML Formatting
🠶 Monospaced Font(same width)
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
🠶 Superscript Text
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
🠶 Subscript Text
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
🠶 Deleted Text (Displayed as Deleted Text)
<p>Hello <del>Delete your first paragraph.</del></p>
🠶 Inserted Text (Displayed as Inserted Text)
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
🠶 Larger Text
<p>Hello <big>Write the paragraph in larger font.</big></p>
🠶 Smaller Text
<p>Hello <small>Write the paragraph in smaller font.</small></p>
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.
🠶 There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest
level h1 to the least level h6.
🠶 h1 is the largest heading tag and h6 is the smallest one.
🠶 Example:
<h1>Heading no. 1</h1>
Break and Horizontal line Tag
🠶 <br> tag is used for line break.

🠶 <hr> tag is used to apply a horizontal line between two statements or two paragraphs.
🠶 Example :
🠶 <p><br>A paragraph is a series of related sentences developing a central idea, called the
topic. <br>Try to think about paragraphs in terms of thematic unity: ,<br>a paragraph is a
sentence or a group of sentences that supports one central, unified idea. <br>Paragraphs
add one idea at a time to your broader argument.
🠶 <hr> it will start a new paragraph. </p>
HTML Phrase tag
🠶 The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of
text or semantics of text.
🠶 Following is the list of phrase tags:
🠶 Abbreviation tag : <abbr>
🠶 Strong tag:<strong>
🠶 Definition tag: <dfn>
🠶 Quoting tag: <blockquote>
🠶 Short quote tag : <q>
🠶 Code tag: <code>
🠶 Keyboard tag: <kbd>
🠶 Address tag: <address>
HTML Phrase tag
Text Abbreviation tag (Abbrivate the text)
🠶 <p>An <abbr title = "Hypertext Markup language">HTML </abbr>language is used to create web pages. </p>
Strong Text (Display the important text)
🠶 <p>In HTML it is recommended to use <strong>lower-case</strong>, while writing a code. </p>
Definition tag: (specify the keyword of the content)
🠶 <p><dfn>HTML </dfn> is a markup language. </p>
Quoting Text: The HTML <blockquote> element shows that the enclosed content is quoted from another source and text representation
of source can display using <cite> ..... </cite>element.
🠶 <blockquote cite="https://www.keepinspiring.me/famous-quotes/"><p>?
The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.?</p></
blockquote>
🠶 <cite>-Mark Caine</cite>
HTML Phrase tag
Short Quotation: used to define a short quotation.
🠶 <p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About,
You Don?t Have To Be Pushed. The Vision Pulls You.</q>?</p> \
Code Tag: To Display the part of the computer code.
🠶 <p>First Java program</p>
🠶 <p><code>class Simple{ public static void main(String args[]){
🠶 System.out.println("Hello Java"); }} </code>
🠶 </p>
Keyboard Tag: indicates that a section of content is a user input from keyboard.
🠶 <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></
kbd> to restore page on chrome.</p>
HTML Phrase tag
Address tag
🠶 Defines the contact information about the author of the content.
🠶 it will be displayed in italic font.
🠶 Example:
🠶 <address> For queries contact on <a href="">raaki@raakesh.com</a>
🠶 <br> You can visit at: <br>Mithilapuri Vuda Colony,Madhurawada,Visakhapatnam
530041.
🠶 </address>
HTML Anchor
🠶 HTML anchor tag defines a hyperlink that links one page to another page.
🠶 Syntax
<a href = "..........."> Link Text </a>
🠶 Example
<a href="second.html">Click for Second Page</a>
🠶 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.

<h2>HTML Image Example</h2>
<img src="good_morning.jpg" alt="Good Morning Friends"/>
<img src="animal.jpg" height="180" width="300" alt="animal image">
🠶 Attributes of HTML img tag

Src
Alt
Width
height
<img src="E:/images/animal.png" height="180" width="300" alt="animal image">
HTML Table
🠶 HTML table tag is used to display data in tabular form (row * column). There can be
many columns in a row.
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.
It specifies a group of one or more columns in a table for
<colgroup>
formatting.
It is used with <colgroup> element to specify column
<col>
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
HTML Table Example
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Raakesh</td><td>Kumar</td><td>60</td></tr>
<tr><td>Naveen</td><td>Kumar</td><td>80</td></tr>
<tr><td>Payal</td><td>Vinaychandra</td><td>82</td></tr>
<tr><td>Lakshman</td><td>Koushik</td><td>72</td></tr>
</table>
HTML Table with Border
🠶 you can use border attribute of table tag in HTML to specify border.
<table border="1">
<tr><td>Raakesh</td><td>Kumar</td><td>60</td></tr>
<tr><td>Ramya</td><td>Krishnan</td><td>80</td></tr>
<tr><td>Swati</td><td>Ram</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
HTML Table with colspan
🠶 If you want to make a cell span more than one column, you can use the colspan attribute.
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Ranjit Nayak</td>
<td>7503560901</td>
<td>9555578195</td>
</tr>
</table>
HTML Table with rowspan
🠶 If you want to make a cell span more than one row, you can use the rowspan attribute.
<table>
<tr><th>Name</th><td>Ranjith Roy</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7503520801</
td></tr>
<tr><td>9555879135</td></tr>
</table>
HTML table with caption
🠶 HTML caption is diplayed above the table. It must be used after table tag only.
<table>
<caption>Student Records</caption>
<tr><td>Vimal</td><td>Kumar</td><td>70</td></tr>
<tr><td>Mike</td><td>Tison</td><td>60</td></tr>
<tr><td>Sri</td><td>Sai</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>
HTML <tbod> tag
🠶 HTML <tbody> tag is used to group the table rows (<tr>) together, which indicates that
this is body part of a table (<table>).
🠶 The <tbody> tag must be a child of <table> element.
<!DOCTYPE html> <tbody>
<html> <tr>
<td>121</td>
<head> <td>John</td>
<title>HTML tbody tag</title> <td>john123@gmail.com</td>
</tr>
</head>
<tr>
<body> <td>122</td>
<h2>Example of the tbody tag</h2> <td>William </td>
<td>william56@gmail.com</td>
<table border="1" bgcolor="#98f5ff"> </tr>
<thead> <tr>
<tr> <td>123</td>
<td>Amit</td>
<th>EmpId</th> <td>amitk98@gmail.com</td>
<th>Name</th> </tr>
</tbody>
<th>Email-Id</th> </table>
</body>
</tr> </html>
</thead>
HTML TEXTAREA
❏ The HTML <textarea> tag is used to define a multi-line text input control.
❏ The size of the HTML textarea is defined by <cols> and <rows> attribute.
Example:
<textarea rows="9" cols="70">
It can hold unlimited number of characters and the texts are displayed in a fixed-width font.
</textarea>
HTML <tfoot> tag
HTML <tfoot> tag is used to define the set of rows which represents footer of an HTML table.
The <tfoot> tag must contain one or more <tr> element.
The <tfoot> tag is used as a child element of HTML table.
<html> <html> <tbody><tbody>
<head> <head> <tr> <tr>
<title>HTML tfoot Tag</title>
<title>HTML tfoot Tag</title> <td>Books</td>
<td>Books</td>
</head> <td>5</td> <td>5</td>
</head> <body> <td>1500</td>
<body> <h1>Example of tfoot tag</h1>
<td>1500</td>
</tr>
<h1>Example of tfoot tag</h1>
<table border="1" > </tr> <tr>
<table border="1" > <thead> <tr> <td>Drawing-Paper</td>
<thead> <tr> <td>Drawing-Paper</td>
<td>50</td>
<th>Items</th> <td>50</td><td>800</td>
<tr> <th>Quantity</th> </tr>
<th>Items</th> <td>800</td>
<th>Expenditure</th> <tr>
<th>Quantity</th> </tr> </tr> <td>Marker</td>
<th>Expenditure</th></thead> <tr> <td>35</td>
</tr> <tfoot> <td>Marker</td>
<td>1875</td>
<tr> </tr>
<td>35</td>
</thead> <th>Total</th> </tbody>
<tfoot> <td>1875</td>
<th>90</th> </table>
<tr> <th>4175</th> </tr> </body>
<th>Total</th> </tr> </tbody></html>
</tfoot>
<th>90</th>
<th>4175</th> </table>
HTML Time Tag
HTML <time> tag is used to define date and time. It displays time value in a 24 hour clock or
a precise date in a Gregorian calendar in HTML.
Syntax:
<time>Define Time and Date here</time>
Example:
<p>We open our shop at <time>09:00</time> am.</p>
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:
🠶 Ordered List or Numbered List (ol)
🠶 Unordered List or Bulleted List (ul)
🠶 Description List or Definition List (dl)
HTML Unordered List
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
HTML Description List or Definition List
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
HTML Ordered List
🠶 HTML Ordered List or Numbered List displays elements in numbered format. The
HTML ol tag is used for ordered list. 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)
Marquee HTML
🠶 The Marquee HTML tag is a non-standard HTML element which is used to scroll a image
or text horizontally or vertically.
Attribute Description
behavior It facilitates user to set the

behavior of the marquee to one
of the three different types:
scroll, slide and alternate.
direction defines direction for scrolling
content. It may be left, right, up
and down.
width defines width of marquee in
pixels or %.
height defines height of marquee in
pixels or %.
hspace defines horizontal space in pixels
around the marquee.
Marquee HTML
vspace defines vertical space in pixels

around the marquee.
scrolldelay defines scroll delay in seconds.
scrollamount defines scroll amount in number.
loop defines loop for marquee content in
number.
bgcolor defines background color. It is
now deprecated.
Marquee HTML
🠶 HTML Scroll Marquee

<marquee>This is an example of html marquee </marquee>
🠶 HTML Slide Marquee
<marquee width="100%" behavior="slide" bgcolor="pink">
This is an example of a slide marquee...
</marquee>
🠶 HTML Alternate Marquee

<marquee width="100%" behavior="alternate" bgcolor="pink">
This is an example of a alternate marquee...
</marquee>
Marquee HTML
🠶 Direction in HTML marquee

<marquee width="100%" direction="right">
This is an example of a right direction marquee...
</marquee>
🠶 Nested marquee example

<marquee width="400px" height="100px" behavior="alternate" style="border:2px solid red">
<marquee behavior="alternate">
Nested marquee...
</marquee>
</marquee>
Marquee HTML
🠶 Disadvantages HTML marquee

Marquee may be distracting because human eyes are attracted towards movement and marquee text
constantly.
Since Marquee text moves, so it is more difficult to click static text, depending on the scrolling speed.
It is a non-standard HTML element.
It draws user's attention needlessly and makes the text harder to read.
HTML Quotes
🠶 HTML quotes are used to put a short quotation on your website.

<p> Great quote on love and life.</p>
<p> Dr. Seuss once said : <q>Reality is finally better than your dreams.</q></p>
🠶 HTML blockquote tag

<p> Read this inspirational story.</p>
<blockquote>
According to scientists, the bumblebee's body is too heavy and its wing span too small.
Aerodynamically, the bumblebee cannot fly. But the bumblebee doesn't know that and it keeps flying.
When you don't know your limitations, you go out and surprise yourself. In hindsight,you
wonder if you had any limitations. The only limitations a person has are those that are self-
imposed. Don't let education put limitations on you.
</blockquote>
HTML Style
🠶 HTML Style
🠶 HTML Style is used to change or add the style on existing HTML elements. There is a
default style for every HTML element e.g. background color is white, text color is black
etc.
<h3 style="color:green">This is Green Color</h3>
<h3 style="color:red">This is Red Color</h3>
🠶 HTML Style background-color

<h3 style="background-color:yellow;">This is yellow background</h3>
<h3 style="background-color:red;color:white">This is red background</h3>
HTML Style
🠶 HTML Style font-family
<h3 style="font-family:times new roman">This is times new roman font family</h3>
<p style="font-family:arial">This is arial font family</p>
🠶 HTML Style font-size

<h3 style="font-size:200%">This is 200% h3 tag</h3>
<p style="font-size:200%">This is 200% p tag</p>
🠶 HTML Style text-align

<h3 style="text-align:right;background- color:pink;">This text is located at right side</h3>
<p style="text-align:center;background-color:pink;">This text is located at center side</p>

HTML Title
🠶 HTML title tag is used to provide a title name for your webpage. It is necessary for
Search Engine Optimization (SEO).
<!DOCTYPE html>
<html>
<head>
<title>First web page.</title>
</head>
<body>
<p>Welcome to my first web page.</p>
</body>
</html>
Doctype HTML
🠶 <!DOCTYPE html> declaration before the <html> tag. This <!DOCTYPE html>
declaration is not an HTML tag. It is used to instruct the web browser about the HTML
page.
🠶 DTD defines the rules for the markup languages so that the browsers recognize the
content correctly.
🠶 <!DOCTYPE html>
HTML Div Tag
🠶 The HTML <div> tag is used to group the large section of HTML elements together.
🠶 <div> tag is just like a container unit which is used to encapsulate other page elements and
divides the HTML documents into sections.
🠶 Example
<div style="border:1px solid pink;padding:20px;font-size:20px">
<p>Welcome to Javatpoint.com, Here you get tutorials on latest technologies.</p>
<p>This is second paragraph</p>
</div>
HTML pre tag
🠶 The HTML <pre> tag is used to specify pre formatted texts. Texts within <pre>.......</pre> tag is displayed in
a fixed-width font. Usually it is displayed in Courier font. It maintains both space and line break.
<pre>
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
</pre>
<pre>
package com.thub;
public class FirstJava{
public static void main(String args[]){
System.out.println("hello java");
}
}
</pre>
HTML code tag
🠶 HTML <code> tag is used to represent computer code. It is a phrase tag which defines a
piece of computer code. By default, it is displayed in the browser's default monospace font
(also known as fixed-width font).
<em>It is inside em tag.</em><br>
<strong>It is inside strong tag.</strong><br>
<dfn>It is inside dfn tag.</dfn><br>
<code>It is inside code tag.</code><br>
<samp>It is inside samp tag.</samp><br>
<kbd>It is inside kbd tag.</kbd><br>
<var>It is inside var tag.</var>
HTML hr tag
🠶 HTML <hr> tag is used to specify a paragraph-level thematic break in HTML document. It
is used when you abruptly change your topic in your HTML document. It draw a
horizontal line between them. It is also called a Horizontal Rule in HTML.
<h2>HTML</h2>
<p>HTML is a language for describing web pages.</p>
<hr/>
<h2>HR Tag </h2>
<p> HR tag is used to draw a horizontal line within the texts to sepate content.<p>
HTML br tag
🠶 HTML <br> tag or element is used to break line in a paragraph.

🠶 Example:
🠶 <p>If you want to break line<br>in a paragraph,<br>use the br element.</p>
HTML Script Tag
🠶 HTML script tag is used to specify client-side script such as JavaScript. It facilitate you to place a
script within your HTML document.
🠶 Example :
<script type="text/javascript">
document.write("JavaScript is a simple language for javatpoint learners")
</script>
Example 2:
function msg(){
alert("Hello Javatpoint");
}
</script>
HTML NoScript Tag
🠶 HTML <noscript> tag is used to define an alternate content for the users who have
disabled scripting from the browser and want to access the web page.
🠶 Example:
<script>
document.write("Welcome to JavaTpoint")
</script>
<noscript>Sorry! Your browser does not support JavaScript.!</noscript>
HTML bold tag
🠶 HTML bold tag is represented by <b> tag.

🠶 HTML <b> tag is used to display the written text in bold format. It is strictly a
presentational element. If you want to show your text in bold letters and not have real
semantic meaning, then put it within <b>.......</b> tag.
🠶 Example :
🠶 <p> Hello guys, <b>this is the method to write bold text.</b></p>
HTML Form
🠶 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.
🠶 Why use HTML Form
🠶 HTML forms are required if you want to collect some data from of the site visitor.
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML Form
🠶 HTML Form Tags
Tag Description
<form> It defines an HTML form to enter inputs by the used

side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<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
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 TextField Control
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
HTML Label Tag
🠶 The <label> tag is used to specify a label for an <input> element. It adds a label to a form
control such as text, email, password, textarea etc.
<form>
<label for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
HTML Input Tag
🠶 HTML <input> tag is used to represent a form input control in HTML document.
<form action="#">
First name: <input type="text" name="FirstName" placeholder="enter firstname..."><br>
Last name: <input type="text" name="LastName" placeholder="enter lastname..."><br>
<input type="submit" value="Submit">
</form>
HTML Password Field Control
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
HTML 5 Email Field Control
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
Checkbox Control
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
Radio Button Control
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>
HTML Button Tag
🠶 The <button> tag is used to create a clickable button within HTML form on your webpage.
You can put content like text or image within the <button>........</button> tag.
🠶 Example
<button name="button" type="button">Click Here</button>
🠶 Example 2:
<button name="button" value="OK" type="button" onclick="hello()">Click Here</button>
<script>
function hello(){
alert("hello javatscript user");
}
</script>
HTML Textarea
🠶 The HTML <textarea> tag is used to define a multi-line text input control.
🠶 The size of the HTML textarea is defined by <cols> and <rows> attribute.
<textarea rows="9" cols="70">
JavaTpoint textarea tag example with rows and columns.
</textarea>
autofocus It specifies that a text area should be automatically get

focused when the page is loaded.
form It specifies one or more forms the textarea belongs to.
maxlength It specifies the maximum number of characters allowed
in the text area.
placeholder It specifies a short hint that describes the expected
value of a textarea.
required It specifies that textarea must be filled out.
wrap It specifies that how the texts in the textarea are
wrapped at the time of the submission of the form.
HTML Textarea
<form action=“https://www.amazon.in" id="usrform">

Name: <input type="text" name="usrname">
<input type="submit">
</form>
<br>
<textarea rows="9" cols="70" name="comment" form="usrform">
Enter text here...</textarea>
<p>The text area above is outside the form element, but should still be a part
of the form.</p>
<p><b>Note:</b> The form attribute is not supported in Internet
Explorer.</p>
HTML Form Example
<form action="#">
<table>
<tr>
<td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
<td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>
<td><input type="password" name="password" id="register_password" style="width:160px"/></td>
</tr>
<tr>
<td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
<td
><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
</tr>
HTML Form Example
<tr>
<td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></
td>
<td>
<input type="radio" name="gender" id="register_gendermale" value="male"/>
<label for="register_gendermale">male</label>
<input type="radio" name="gender" id="register_genderfemale" value="female"/>
<label for="register_genderfemale">female</label>
</td>
</tr>
HTML Form Example
<tr>
<td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
<td><select name="country" id="register_country" style="width:160px">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</td>
</tr>
HTML Form Example
<tr>
<td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>
</div></td>
</tr>
</table>
</form>
HTML Audio Tag
🠶 HTML audio tag is used to define sounds such as music and other audio clips. Currently
there are three supported file format for HTML 5 audio tag.
mp3
wav
ogg
Browser mp3 wav ogg
Internet yes no no
Explorer
Google Chrome yes yes yes
Mozilla Firefox yes* yes yes
Opera no yes yes
Apple Safari yes yes no
HTML Audio Tag
<!DOCTYPE>
<html>
<body>
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
The html audio tag.
</audio>
</body>
</html>
HTML Video Tag
🠶 HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files
such as a movie clip, song clip on the web page.
🠶 Currently, there are three video formats supported for HTML video tag:
mp4
webM
Ogg
<video controls>
<source src="movie.mp4" type="video/mp4">
The html video tag.
</video>
HTML Canvas Tag
🠶 The HTML canvas element provides HTML a bitmapped surface to work with. It is used
to draw graphics on the web page.
🠶 The HTML 5 <canvas> tag is used to draw graphics using scripting language like
JavaScript.
🠶 <canvas id = "mycanvas" width ="200" height ="100"> </canvas>
<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">
The HTML5 canvas tag.
</canvas>
HTML Canvas Tag
<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;">

Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var cctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,200,100);
</script>
HTML Progress Tag
🠶 HTML <progress> tag is used to display the progress of a task. It provides an easy way
for web developers to create progress bar on the website. It is mostly used to show the
progress of a file uploading on the web page.
<!DOCTYPE>
<html>
<body>
<progress value="43" max="100"></progress>
</body>
</html>
HTML Meter Tag
🠶 HTML <meter> tag is used to measure data within a given range. It defines a scalar
measurement with range. It is also known as a gause.
🠶 It should be used to display disk usage, voting population etc.
<!DOCTYPE html>
<html>
<body>
<p>Display a gauge:</p>
<meter value="30" min="1" max="100">30 out of 100</meter><br>
<meter value="0.8">80%</meter>
</body>
</html>
HTML Data Tag
🠶 The HTML <data> tag is used to provide a machine readable version of its own contents. It displays the data
in a special format. It is useful in the case where your data needs to be in a certain format because it may be
processed by a script, but this might not be the format that you'd like your users to see.
<!DOCTYPE>
<html>
<body>
<ul>
<li><data value="101">CSS </data></li>
<li><data value="111">JS </data></li>
<li><data value="121">HTML </data></li>
</ul>
</body>
</html>
HTML Datalist Tag
🠶 The HTML <datalist> tag is is used to provide an auto complete feature on form element.
It provides a list of predefined options to the users to select data.
🠶 The datalist tag is introduced in HTML5.
🠶 The <datalist> tag should be used with an <input< element that contains a "list" attribute.
The value of "list" attribute is linked with the datalist id.
HTML figure tag
🠶 HTML <figure> tag is used to mark up a photo in the document on a web page.
🠶 As we know image tag is already available in HTML to display the pictures on web pages. But HTML 5
<figure> tag is used to handle the group of diagrams, photos, code listing etc. with some embedded
content. You can also add a caption for the photo with the help of <figcaption> tag.
<!DOCTYPE>
<html>
<body>
<p>The Taj Mahal is widely recognized as "the jewel of Muslim art in India and
one of the universally admired masterpieces of the world's heritage". It is regarded
by many as the finest example of Mughal architecture, a style that combines elements
from Islamic, Persian, Ottoman, Turkish and Indian architectural styles.</p>
<figure>
<img src="/htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
</figure>
</body>
</html>
HTML figcaption tag
🠶 The <figcaption> element is used to provide a caption to an image.
🠶 It is an optional tag and can appear before or after the content within the <figure> tag.
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
<figcaption>Fig.1.1 - A front view of the great Taj Mahal in Agra.</figcaption>
</figure>
HTML Article Tag
🠶 The HTML <article> tag defines an independent self-contained content in a document, page, application or a site.
🠶 The article tag content makes sense on its own. It is independent and complete from other content shown on the page. This tag is
generally used on Forum post, Blog post, News story, comment etc.
<!DOCTYPE>
<html>
<body>
<article>
<h2>Narendra Modi</h2>
<i>(Naam to suna hi hoga) </i>
<p>Narendra DamodarDas Modi is the 15th and current Prime Minister of India,
Modi, a leader of the Bharatiya Janata Party (BJP), previously served as the Chief Minister
of Gujarat state from 2001 to 2014. He is currently the Member of Parliament (MP) from Varanasi. </p>
</article>
</body>
</html>
HTML Aside Tag
🠶 The HTML <aside> tag provides information about the main content. According to W3C
definition, the <aside> element represents content that forms the main textual flow of a
document.
<p>I don't want to live in Ghaziabad, I wish; I could buy a flat in New Delhi.</p>
<aside>
<h3>New Delhi</h3>
<p>New Delhi is the capital of India.</p>
</aside>
HTML Dialog Tag
🠶 HTML <dialog> tagto create a new popup dialog on a web page. This tag represents a dialog box or other interactive component like window.
🠶 The <dialog> element uses a boolean attribute called open that activate element and facilitate user to interact with it.
🠶 <!DOCTYPE>
🠶 <html>
🠶 <body>
🠶 <div>
🠶 <dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
🠶 <p><q>I am so clever that sometimes I don't understand a single word of what I am saying.
🠶 </q> - <cite>Oscar Wilde</cite></p>
🠶 <button id="hide">Close</button>
🠶 </dialog>
🠶 <button id="show">Show Dialog</button>
🠶 </div>
🠶
🠶 
🠶 <script type="text/JavaScript">
🠶 (function() {
🠶 var dialog = document.getElementById('myFirstDialog');
🠶 document.getElementById('show').onclick = function() {
🠶 dialog.show();
🠶 };
HTML Details Tag
🠶 HTML <details> tag is used to specify the additional details on the web page that the user
can view or hide on demand.
🠶 According to W3C HTML specification, it is used as a disclosure widget from which user
can retrieve additional information or control.
<details>
<summary>Copyright 2011-2014.</summary>
<p> - by GG. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of GG</p>
</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome, and in Safari 6.</
p>
HTML Section Tag
🠶 The HTML <section> tag is used to define sections in a document. When you put your content on a web page, it may contains
many chapters, headers, footers, or other sections on a web page that is why HTML <section> tag is used.
<h2> Indian Leader</h2>
<section>
<h3> Jawaharlal Nehru </h3>
<p> Jawaharlal Nehru was the first Prime Minister of India and a central figure in
Indian politics for much of the 20th century. He emerged as the paramount leader of the Indian
independence movement under the tutelage of Mahatma Gandhi. -Source Wikipedia </p>
</section>
<section>
<h3>Subhas Chandra Bose </h3>
<p>Subhas Chandra Bose was an Indian nationalist whose attempt during World War II to rid India of
British rule with the help of Nazi Germany and Japan left a troubled legacy.
The honorific Netaji (Hindustani language: "Respected Leader"), first applied to Bose in Germany,
by the Indian soldiers of the Indische Legion and by the German and Indian officials
in the Special Bureau for India in Berlin, in early 1942, is now used widely throughout India. -source Wikipedia</p>
</section>
HTML Iframes
🠶 An iframe is used to display a web page within a web page.

🠶 Example:
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
CSS
Introduction to CSS
🠶 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
<!DOCTYPE> </style>
<html> </head>
<head> <body>
<style> <h1>Write Your First CSS Example</h1>
h1{ <p>This is Paragraph.</p>
color:white; </body>
background-color:red; </html>
padding:5px;
}
p{
color:blue;
}
What is CSS?
🠶 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.
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
🠶 Solves a big problem

🠶 Saves a lot of time
🠶 Provide more attributes
CSS Syntax
🠶 A CSS rule set contains a selector and a declaration block.

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.
🠶 CSS Element Selector
🠶 CSS Id Selector
🠶 CSS Class Selector
🠶 CSS Universal Selector
🠶 CSS Group Selector
CSS Element Selector
🠶 The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatscript.com</p>
<p>Welcome to CSS</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
CSS Class Selector for specific element
🠶 Only one specific HTML element should be affected use the element name with class selector.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">Welcome to CSS</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
CSS Universal Selector
🠶 The universal selector is used as a wildcard character. It selects all the elements on the pages.
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatsript.com</h1>
<h2>Hello Javatscript.com (In smaller font)</h2>
<p>This is a test Page.</p>
</body>
</html>
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.
🠶 Inline CSS
🠶 Internal CSS
🠶 External CSS
CSS
🠶 Inline CSS is used to apply CSS on a single line or element.
<p style="color:blue">Hello CSS</p>
🠶 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.
<style>
p{color:blue}
</style>
🠶 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.
css
🠶 p{color:blue}
🠶 <link rel="stylesheet" type="text/css" href="style.css">
Disadvantages of Inline CSS
🠶 ou 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
🠶 Internal style sheet is used to add a unique style for a single document. It is defined .
<!DOCTYPE html> h1 {
color: red;
<html> margin-left: 80px;
<head> }
</style>
<style> </head>
body { <body>
<h1>The internal style sheet is applied on this
background-color: linen; heading.</h1>
} <p>This paragraph will not be affected.</p>
</body>
</html> n <head> section of the HTML page
inside the <style> tag
External CSS
🠶 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.
🠶 uses <link> tag on every pages and the <link> tag should be put inside the head section.
Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
🠶 The external style sheet may be written in any text editor but must be saved with .css
extension. This file should not contain HTML elements.
External CSS
🠶 mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
CSS Comments
🠶 C SS comments are generally written to explain the code. It is very helpful for the users who reads the
code so that they can easily understand the code. Comments are ignored by browsers.
🠶 Comments are single or multiple lines statement and written within /*............*/ .
* This is
<!DOCTYPE html> a multi-line
<html> comment */
<head> </style>
<style> </head>
p{ <body>
color: blue; <p>Hello Javatpoint.com</p>
/* This is a single-line <p>This statement is styled with CSS.</p>
comment */ <p>CSS comments are ignored by the browsers and
text-align: center; not shown in the output.</p>
} </body>
</html>
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:
▪ background-color
▪ background-image
▪ background-repeat
▪ background-attachment
▪ background-position
CSS Background
🠶 CSS background-color
❖ The background-color property is used to specify the background color of the element. You can set the
background color:
<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My ultimate CSS page.</h2>
<p>Hello Web Designer This is an CSS background-color example.</p>
</body>
</html>
CSS Background
🠶 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:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("lily.jpg");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello Web Designer</h1>
</body>
</html>
CSS Background
🠶 CSS background-repeat
🠶 By default, the background-image property repeats the background image horizontally and
vertically. Some images are repeated horizontally or vertically. The background looks better if
the image repeated horizontally.
background-repeat: repeat-x;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("rose.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello Web Developer</h1>
</body>
</html>
CSS Background
🠶 background-repeat: repeat-y;
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello Developer</h1>
</body>
</html>
CSS Background
🠶 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 the image as fixed the background image will not move
during scrolling in the browser.
🠶 Example:
background: white url('border.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
CSS Background
🠶 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:
🠶 center
🠶 top background: white url('good-morning.jpg');
🠶 bottom background-repeat: no-repeat;
background-attachment: fixed;
🠶 left background-position: center;
🠶 right
CSS Border
🠶 The CSS border is a shorthand property used to set the border on an element.
🠶 he 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
CSS Border
🠶 CSS border-style
🠶 This property is used to specify the border type which you want to display on the web
page. There are some border style values which are used with border-style property to
define a border.
Value Description
none It doesn't define any border.
dotted It is used to define a dotted border.
dashed It is used to define a dashed border.
solid It is used to define a solid border.
double It defines two borders wIth the same border-width value.
It defines a 3d grooved border. effect is generated according to
groove
border-color value.
It defines a 3d ridged border. effect is generated according to
ridge
border-color value.
It defines a 3d inset border. effect is generated according to border-
inset
color value.
It defines a 3d outset border. effect is generated according to
outset
border-color value.
CSS Border
<!DOCTYPE html> <p class="none">No border.</p>
<html> <p class="dotted">A dotted border.</p>
<head> <p class="dashed">A dashed border.</p>
<style> <p class="solid">A solid border.</p>
p.none {border-style: none;} <p class="double">A double border.</p>
p.dotted {border-style: dotted;} <p class="groove">A groove border.</p>
p.dashed {border-style: dashed;} <p class="ridge">A ridge border.</p>
p.solid {border-style: solid;} <p class="inset">An inset border.</p>
p.double {border-style: double;} <p class="outset">An outset border.</p>
p.groove {border-style: groove;} <p class="hidden">A hidden border.</p>
p.ridge {border-style: ridge;} </body>
p.inset {border-style: inset;} </html>
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
CSS Border
🠶 CSS border-width
🠶 CSS 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.
<!DOCTYPE html>
<html> <body>
<head> <p class="one">Write your text
<style> here.</p>
p.one { <p class="two">Write your text
border-style: solid; here.</p>
border-width: 5px; <p class="three">Write your text
} here.</p>
p.two { </body>
border-style: solid; </html>
border-width: medium;
}
p.three {
border-style: solid;
border-width: 1px;
}
</style>
</head>
CSS Border
🠶 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.
p.two {
<!DOCTYPE html>
<html>
border-color: #98bf21;
<head>
}
<style>
</style>
p.one {
</head>
<body>
border-color: red;
<p class="one">This is a solid red border</p>
}
<p class="two">This is a solid green
border</p>
</body>
</html>
CSS Display
🠶 It 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 on the webpage is a rectangular box and the CSS property defines the behavior
of that rectangular box.
🠶 CSS display values
🠶 There are following CSS display values which are commonly used.
❑ display: inline;
❑ display: inline-block;
❑ display: block;
❑ display: run-in;
❑ display: none;
CSS Display
🠶 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>
<!DOCTYPE html> <body>
<html> <p>Hello ENGINEERS</p>
<head> <p>Java </p>
<style> <p>SQL</p>
p{ <p>HTML</p>
display: inline; <p>CSS</p>
} </body>
</style> </html>
</head>
CSS Display
🠶 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.

<head> <p>Java </p>
<style> <p>SQL</p>
p{ <p>HTML</p>
display: inline-block; <p>CSS</p>
} </body>
</style> </html>
</head>
CSS Display
🠶 CSS display block
🠶 CSS display block element takes as much as horizontal space as they can. The block element
takes the full available width. They make a line break before and after them

<head> <p>Java </p>
<style> <p>SQL</p>
p{ <p>HTML</p>
display: block; <p>CSS</p>
} </body>
</style> </html>
</head>
CSS Display
🠶 CSS display run-in
🠶 Displays an element as either block or inline, depending on context

<head> <p>Java </p>
<style> <p>SQL</p>
p{ <p>HTML</p>
display: run-in; <p>CSS</p>
} </body>
</style> </html>
</head>
CSS Display
🠶 CSS display none

🠶 The "none" value totally removes the element from the page. It will not take any space.
<!DOCTYPE html>
<html> <body>
<head> <h1>Hello ENGINEERS</h1>
<style> <h1 class=“hidden”>Java </p>
h1 { <p>SQL</p>
display: none; <p>HTML</p>
} <p>CSS</p>
</style> </body>
</head> </html>
CSS Float
🠶 The CSS float property is a positioning property. It is used to push an element to the left or right, allowing other element to wrap around it. It
is generally used with images and layouts.
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style
<b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<img src="good-morning.jpg" alt="Good Morning Friends"/>
The display property affects the most basic presentation of an element, effectively classing the element as a certain type of element. The
rendering of the element may depend heavily on its display type, and certain properties will only work on elements that have specific display
values.
</p>
</body>
</html>
CSS Font
🠶 CSS Font property is used to control the look of texts. By the use of CSS font property you
can change the text size, color, style. Also we can resize the font using percentage.
🠶 CSS Font color: This property is used to change the color of the text. (standalone attribute)
🠶 CSS Font family: This property is used to change the face of the font.
🠶 CSS Font size: This property is used to increase or decrease the size of the font.
🠶 CSS Font style: This property is used to make the font bold, italic or oblique.
🠶 CSS Font variant: This property creates a small-caps effect.
🠶 CSS Font weight: This property is used to increase or decrease the boldness and lightness of the
font.
CSS Font
🠶 CSS Font Color

🠶 CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS
fonts. It is used to change the color of the text.
🠶 There are three different formats to define a color:
🠶 By a color name
🠶 By hexadecimal value
🠶 By RGB
CSS Font
<html> <h1>This is heading 1</h1>
<head> <h2>This is heading 2</h2>
<style> <p>This is a paragraph.</p>
body { </body>
font-size: 100%; </html>
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
CSS Font
🠶 CSS Font Family
🠶 CSS font family can be divided in two types:
🠶 Generic family: It includes Serif, Sans-serif, and Monospace.
🠶 Font family: It specifies the font family name like Arial, New Times Roman etc.
🠶 Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new roman,
Georgia etc.
🠶 Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of Sans-
serif: Arial, Verdana etc.
CSS Font

<html> <h1>This heading is shown in sans-
<head> serif.</h1>
<style> <h2>This heading is shown in
body { serif.</h2>
font-size: 100%; <p>This paragraph is written in
} monospace.</p>
h1 { font-family: sans-serif; } </body>
h2 { font-family: serif; } </html>
p { font-family: monospace; }
}
</style>
</head>
CSS Font
🠶 CSS Font Size
🠶 CSS font size property is used to change the size of the font.
Font Size Value Description
xx-small used to display the extremely small text size.
x-small used to display the extra small text size.
small used to display small text size.
medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text size.
used to display comparatively smaller text
smaller
size.
used to display comparatively larger text
larger
size.
size in pixels or % used to set value in percentage or in pixels.
CSS Font
CSS Font Size
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;">This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;">This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;">This font size is extra large. </p>
<p style="font-size:xx-large;">This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels.
</p>
</body>
</html>
CSS Font
🠶 CSS Font Style
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
CSS Font
🠶 CSS Font Variant
🠶 CSS font variant property specifies how to set font variant of an element. It may be normal and small-caps.
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>
CSS Font
🠶 CSS Font Weight
🠶 CSS font weight property defines the weight of the font and specify that how bold a font is. The possible values of font weight may be normal,
bold, bolder, lighter or number (100, 200..... upto 900).
<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
</body>
</html>
CSS Line Height
🠶 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.
value description
This is a default value. it specifies a
normal
normal line height.
It specifies a number that is multiplied
number with the current font size to set the
line height.
It is used to set the line height in px,
length
pt,cm,etc.
It specifies the line height in percent
%
of the current font.
It sets this property to its default
initial
value.
It inherits this property from its parent
inherit
element.
CSS Line Height
<!DOCTYPE html> <h3 class="small">
<html>
This is a heading with a smaller line-height.<br>
<head>
<style> This is a heading with a smaller line-height.<br>
h3.small { This is a heading with a smaller line-height.<br>
line-height: 70%;
This is a heading with a smaller line-height.<br>
}
</h3>
h3.big {
line-height: 200%; <h3 class="big">
} This is a heading with a bigger line-height.<br>
</style>
This is a heading with a bigger line-height.<br>
</head>
<body> This is a heading with a bigger line-height.<br>
<h3> This is a heading with a bigger line-height.<br>
This is a heading with a standard line-height.<br>
</h3>
This is a heading with a standard line-height.<br>
</body>
The default line height in most browsers is about 110%
to 120%.<br> </html>
</h3>
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.
Property Description
This property is used to set all the
margin
properties in one declaration.
it is used to set left margin of an
margin-left
element.
It is used to set right margin of an
margin-right
element.
It is used to set top margin of an
margin-top
element.
It is used to set bottom margin of an
margin-bottom
element.
CSS Margin
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: pink;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
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.
🠶 margin: 50px 100px 150px 200px;
🠶 margin: 50px 100px 150px;
🠶 margin: 50px 100px;
🠶 margin 50px;
THE BOX MODEL
The box model is a fundamental concept in CSS that describes how HTML elements are
represented as rectangular boxes on a web page. The box model consists of four parts:
 Content: This is the actual content of the element, such as text or an image.
 Padding: This is the space between the content and the border of the element. Padding
can be set for each side of the element using the padding property.
 Border: This is the line that surrounds the padding and content of the element. Borders
can be set for each side of the element using the border property.
 Margin: This is the space between the border of the element and other elements on the
page. Margins can be set for each side of the element using the margin property.
 Certainly, here's a diagram of the box model in CSS:
THE BOX MODEL
THE BOX MODEL
 This diagram shows the four components of the box model (margin, border, padding, and content), with the
content in the center and each subsequent layer surrounding it.
 The margin is the outermost layer, followed by the border, padding, and content.
 The width of an element is the sum of the content width, padding, border, and margin.
Here is an example of how the box model works:
<div class="box">
This is some content.
</div>
.box {
padding: 20px;
border: 1px solid black;
margin: 10px;
}
THE BOX MODEL
• In this example, the div element is given a class of "box" and is styled using
CSS.
• The padding property sets 20 pixels of space between the content and the border
of the element. The border property sets a 1-pixel-thick black border around the
element.
• The margin property sets 10 pixels of space between the border of the element
and other elements on the page.
• The total width of the element in this example would be the sum of the content
width (which is determined by the size of the text), the left and right padding
(20px each), the left and right border (1px each), and the left and right margin
(10px each).
CONFLICT RESOLUTION
 In CSS, conflicts can arise when two or more styles are applied to the same element and the styles
have conflicting values. For example, if one style sets the font size to 16px and another style sets
the font size to 14px, there is a conflict and the browser needs to decide which style to apply.
 To resolve conflicts in CSS, the following rules are applied:
 Specificity: Styles with a more specific selector take precedence over less specific selectors. For
example, a style with an ID selector (#example) is more specific than a style with a class selector
(.example).
 Order of Appearance: If two styles have the same specificity, the one that appears later in the code
takes precedence. So if two styles have the same specificity and apply to the same element, the
one that appears last in the CSS file will be applied.
 Importance: You can use the !important declaration to give a style precedence over other styles,
regardless of specificity or order of appearance. This should be used sparingly, as it can make
your code difficult to maintain.
CONFLICT RESOLUTION
🠶 <div id="example" class="container">
This is some text.
</div>
#example {
color: red;
}
.container {
color: blue;
}
CONFLICT RESOLUTION
 In this example, the div element has an ID of "example"

and a class of "container".
 The first style rule sets the color of the text inside the div
to red, while the second style rulesets the color to blue.
 Because the id selector has a higher specificity than the
class selector, the color of the text will be red, even
though the second style rule comes after the first rule in
the CSS file.
Java Script Fundamentals
Java Script Introduction
🠶 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.
Features of JavaScript
🠶 All popular web browsers support JavaScript as they provide built-in execution environments.
🠶 JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
🠶 JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the
operation).
🠶 JavaScript is an object-oriented programming language that uses prototypes rather than using
classes for inheritance.
🠶 It is a light-weighted and interpreted language.
🠶 It is a case-sensitive language.
🠶 JavaScript is supportable in several operating systems including, Windows, macOS, etc.
🠶 It provides good control to the users over the web browsers.
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.
My First Java Script Program
<!DOCTYPE html>
<html>
<head>
<title></title>
document.write("JavaScript is a simple language");
</script>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
Include Javascript
🠶 Include java script in 3 places.

🠶 Between body tag of html
🠶 Between head tag of html
🠶 In .js file(external javaScript)
Java Script embedded in body
<html>
<body>
alert("Hello World");
</script>
</body>
</html>
Java script embedded in head
<!DOCTYPE html>
<html>
<head>
<title></title>
alert("Hello JavaScript");
</script>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
Java script external file
<html> Message.js
<head> function msg(){
<script type="text/javascript" src="message.js"></script>
alert("Hello Javatscript");
</head>
}
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Advantages of External Java script
🠶 It helps in the reusability of code in more than one HTML file.

🠶 It allows easy code readability.
🠶 It is time-efficient as web browsers cache the external js files, which further reduces the
page loading time.
🠶 It enables both web designers and coders to work with html and js files parallel and
separately, i.e., without facing any code conflictions.
🠶 The length of the code reduces as only we need to specify the location of the js file.
Disadvantages of External java script
🠶 The stealer may download the coder's code using the url of the js file.
🠶 If two js files are dependent on one another, then a failure in one file may affect the
execution of the other dependent file.
🠶 The web browser needs to make an additional http request to get the js code.
🠶 A large change in the js code may cause unexpected results in all its dependent files.
🠶 We need to check each file that depends on the commonly created external javascript file.
🠶 If it is a few lines of code, then better to implement the internal javascript code.
Java Script 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.
🠶 Types of Java Script Comments
🠶 Single-line Comment
🠶 Multi-line Comment
🠶 Single Line comment

🠶 It is represented by double forward slashes (//). It can be used before and after the statement.
🠶 Ex:
<script>
// It is single line comment
document.write("hello javascript");
</script>
Java Script Comments
🠶 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.
🠶 <script>
🠶 /* It is multi line comment.
🠶 It will not be displayed */
🠶 document.write("example of javascript multiline comment");
🠶 </script>
Java Script Variables
🠶 A JavaScript variable is simply a name of storage location. There are two types of variables in
JavaScript : local variable and global variable.
Ex:
🠶 var x = 10;
🠶 var name=“Raaki";
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
🠶 Local Variable
🠶 A JavaScript local variable is declared inside block or function. It is accessible within the
function or block only.
🠶 Ex:
🠶 <script>
🠶 function abc(){
🠶 var x=10;//local variable
🠶 }
🠶 </script>
🠶 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.
🠶 Ex:
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
Java Script Data types
🠶 JavaScript provides different data types to hold different types of values. There are two types of data
types in JavaScript.
🠶 Primitive data type
🠶 Non-primitive (reference) data type
🠶 JavaScript is a dynamic type language, means you don't need to specify type of the variable because
it is dynamically used by JavaScript engine. You need to use var here to specify the data type. It can
hold any type of values such as numbers, strings etc.
Ex:
🠶 var a=16;//holding number
🠶 var b="Raaki";//holding string
Primitive Data type
There are five types of primitive data types in JavaScript. They are as follows:
Data Type Description

String represents sequence of characters e.g.
"hello"
Number represents numeric values e.g. 100
Boolean represents boolean value either false or
true
Undefined represents undefined value
Null represents null i.e. no value at all
Non Primitive Data types
Data Type Description

Object represents instance through which we can
access members
Array represents group of similar values
RegExp represents regular expression
Java Script Operator
🠶 JavaScript operators are symbols that are used to perform operations on operands.
Ex: var sum=10+20;
🠶 There are following types of operators in JavaScript.
🠶 Arithmetic Operators
🠶 Comparison (Relational) Operators
🠶 Bitwise Operators
🠶 Logical Operators
🠶 Assignment Operators
🠶 Special Operators
Arithmetic Operators
Operator Description Example

+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus (Remainder) 20%10 = 0
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9
Comparison Operator

== Is equal to 10==20 = false
=== Identical (equal and of same 10==20 = false
type)
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false
Bitwise And

& Bitwise AND (10==20 & 20==33) = false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with (10>>>2) = 2
Zero
Logical Operator

&& Logical AND (10==20 && 20==33) =
false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true
Assignment Operator

= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a =
30
-= Subtract and assign var a=20; a-=10; Now a =
10
*= Multiply and assign var a=10; a*=20; Now a =
200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0
Special Operators
Operator Description
(?:) Conditional Operator returns value based
on the condition. It is like if-else.
, Comma Operator allows multiple
expressions to be evaluated as single
statement.
delete Delete Operator deletes a property from
the object.
in In Operator checks if object has the given
property
instanceof checks if the object is an instance of
given type
new creates an instance (object)
typeof checks the type of object.
void it discards the expression's return value.
yield checks what is returned in a generator by

the generator's iterator.
Java Script If-else
🠶 The JavaScript if-else statement is used to execute the code whether condition is true or
false. There are three forms of if statement in JavaScript.
🠶 If Statement
🠶 If else statement
🠶 if else if statement
Syntax:
🠶 if(expression){
🠶 //content to be evaluated
🠶 }
Java Script If-else
🠶 <script>
🠶 var age=19;
🠶 if(age>=18){
🠶 document.write(“You are eligible for voting");
🠶 }
🠶 </script>
JavaScript If...else Statement
🠶 It evaluates the content whether condition is true of false. The syntax of JavaScript if-else
statement is given below.
Syntax:
🠶 if(expression){
🠶 //content to be evaluated if condition is true
🠶 }
🠶 else{
🠶 //content to be evaluated if condition is false
🠶 }
Example
🠶 <script>
🠶 var a=20;
🠶 if(a%2==0){
🠶 document.write("a is even number");
🠶 }
🠶 else{
🠶 document.write("a is odd number");
🠶 }
🠶 </script>
If – else Statement
Syntax:
🠶 f(expression1){ <script>
🠶 //content to be evaluated if expression1 is true var a=20;
🠶 } if(a==10){
document.write("a is equal to 10");
🠶 else if(expression2){
}
🠶 //content to be evaluated if expression2 is true
else if(a==15){
🠶 }
document.write("a is equal to 15");
🠶 else if(expression3){ }
🠶 //content to be evaluated if expression3 is true else if(a==20){
🠶 } document.write("a is equal to 20");
🠶 else{ }
else{
🠶 //content to be evaluated if no expression is true
document.write("a is not equal to 10, 15 or 20");
🠶 }
}
</script>
Java Script Switch
🠶 The JavaScript switch statement is used to execute one code from multiple expressions.
result="B Grade";
<script> break;
var grade='B'; case 'C':
var result; result="C Grade";
switch(grade){ break;
case 'A': default:
result="A Grade"; result="No Grade";
break; }
document.write(result);
case 'B':
</script>
Java Script Loop
🠶 The JavaScript loops are used to iterate the piece of code using for, while, do while or
for-in loops. It makes the code compact. It is mostly used in array.
🠶 There are four types of loops in JavaScript.
🠶 for loop
🠶 while loop
🠶 do-while loop
🠶 for-in loop
JavaScript while loop
🠶 The JavaScript while loop iterates the elements for the infinite number of times. It
should be used if number of iteration is not known. The syntax of while loop is given
below.
Syntax:
<script>
🠶 while (condition)
var i=11;
🠶 { while (i<=15)
{
🠶 code to be executed
document.write(i + "<br/
🠶 } >");
i++;
}
</script>
JavaScript do while loop
🠶 The JavaScript do while loop iterates the elements for the infinite number of times like
while loop. But, code is executed at least once whether condition is true or false. The
syntax of do while loop is given below.
Syntax:
🠶 do{ script>
var i=21;
🠶 code to be executed do{
🠶 }while (condition); document.write(i + "<b
r/>");
i++;
}while (i<=25);
</script>
JavaScript For loop
🠶 The JavaScript for loop iterates the elements for the fixed number of times. It should be
used if number of iteration is known. The syntax of for loop is given below.
Syntax:
🠶 for (initialization; condition; increment) <script>
🠶 { for (i=1; i<=5; i++)
🠶 code to be executed {
document.write(i + "<br/
🠶 }
>")
}
</script>
Java Script Functions
🠶 JavaScript functions are used to perform operations. We can call JavaScript function
many times to reuse the code.
🠶 Advantage of JavaScript function
🠶 There are mainly two advantages of JavaScript functions.
🠶 Code reusability: We can call a function several times so it save coding.
🠶 Less coding: It makes our program compact. We don’t need to write many lines of code each time
to perform a common task.
Syntax:
🠶 function functionName([arg1, arg2, ...argN]){
🠶 //code to be executed
🠶 }
Example 1
<!DOCTYPE html>
<body>
<html>
<h1>Welcome</h1>
<head>
<title></title> <form>
<script type="text/javascript"> <input type="button" value="click"
onclick="msg()"/>
function msg()
{ </form>
alert("Hello! New to Java Script"); </body>
} </html>
</script>
</head>
External Java Script File
<!DOCTYPE html>
function msg()
<html>
<head> {
<title></title>
alert("Welcome Java Script
<script type="text/javascript" src="welcome.js">
Learner");
</script>
</head> }
<body>
<h1>Welcome</h1>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
JavaScript Function Argument
<html>
<body>
<script>
function getInfo(){
return "hello javascript Developers! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>
</body>
</html>
Function Example
🠶 The purpose of Function <html>

constructor is to create a new <body>
Function object. It executes the <script>

var add=new Function("num1","num2","return
code globally. However, if we call num1+num2");
the constructor directly, a function document.writeln(add(2,5));
</script>
is created dynamically but in an
</body>
unsecured way. </html>
🠶
JavaScript Classes
 In JavaScript, classes are the special type of functions. We can define the class just like
function declarations and function expressions.
 The JavaScript class contains various class members within a body including methods or
constructor. The class is executed in strict mode. So, the code containing the silent error
or mistake throws an error.
 The class syntax contains two components:
• Class declarations
• Class expressions
Class Declarations
 A class can be defined by using a class declaration. A class keyword is used to declare a
class with any particular name. According to JavaScript naming conventions, the name of
the class always starts with an uppercase letter.
JavaScript Classes
//Declaring method
<!DOCTYPE html> detail()
<html> {
<body> document.writeln(this.id+"
"+this.name+"<br>")
<script>
}
//Declaring class }
class Employee //passing object to a variable
{ var e1=new Employee(101,"Martin Roy");
//Initializing an object var e2=new Employee(102,"Duke William");
constructor(id,name) e1.detail(); //calling method
e2.detail();
{
</script>
this.id=id;
this.name=name; </body>
} </html>
Class expressions
• Another way to define a class is by using a class

expression.
• Here, it is not mandatory to assign the name of the class.
So, the class expression can be named or unnamed.
• The class expression allows us to fetch the class name.
However, this will not be possible with class declaration.
Class expressions
<!DOCTYPE html> document.writeln(emp.name);

<html> </script>
<body>
</body>
<script>
</html>
var emp = class {
constructor(id, name) {
this.id = id;
this.name = name;
}
};
Java Script Object
• JavaScript object is an entity having state and behaviour (properties and
method)
• JavaScript is an object-based language. Everything is an object in JavaScript.
• JavaScript is template based not class based. Here, we don't create class to
get the object. But, we direct create objects.
• Example: Table, chair, car, bike So on….
• Creating objects in Java Script:
• By object literal
• By creating instance of Object directly (using new keyword)
• By using an object constructor (using new keyword)
JavaScript Object by object literal
<html>
<body>
<script>
emp={id:102,name:“Rakesh Kumar",salary:100000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
By creating instance of Object
<html>
<body>
<script>
var emp=new Object();
emp.id=101;
emp.name=“Ramachandaran";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
By using an Object constructor
<html>
<body> e=new emp(1007,“Raakesh Kumar",50000);
<script> document.write(e.id+" "+e.name+" "+e.salary);
function emp(id,name,salary){
this.id=id; e.changeSalary(45000);
this.name=name;
document.write("<br>"+e.id+" "+e.name+"
this.salary=salary; "+e.salary);
</script>
this.changeSalary=changeSalary;
</body>
function changeSalary(otherSalary){
this.salary=otherSalary;
</html>
}
}
JavaScript Prototype Object
 JavaScript is a prototype-based language that facilitates

the objects to acquire properties and features from one
another. Here, each object contains a prototype object.
 In JavaScript, whenever a function is created the
prototype property is added to that function automatically.
This property is a prototype object that holds a
constructor property.
JavaScript Prototype Object
<!DOCTYPE html> Employee.prototype.fullName=function()

{
<html>
return this.firstName+" "+this.lastName;
<body>
}
<script> var employee1=new Employee("Martin","Roy");

function Employee(firstName,lastName) var employee2=new Employee("Duke", "William");
{ document.writeln(employee1.fullName()+"<br>");
document.writeln(employee2.fullName());
this.firstName=firstName;
</script>
this.lastName=lastName;
}
</body>
</html>
JavaScript Array
🠶 Java Script arreay literal
🠶 JavaScript array is an object that represents a Syntax:
collection of similar type of elements.
var arrayName =[value1,valuew,value3….];
🠶 There are 3 ways to construct array in JavaScript Example:
🠶 By array literal <html>
🠶 By creating instance of Array directly (using new <body>
keyword)
<script>
🠶 By using an Array constructor (using new keyword)
var emp=[“Raaki","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
</body>
</html>
Java Script Array directly (new Keyword)
<html> for (i=0;i<emp.length;i++){

<body> document.write(emp[i] + "<br>");
<script> }
var i; </script>
var emp = new Array(); </body>
emp[0] = "Arun"; </html>
emp[1] = "Varun";
emp[2] = "Tharun";
Java script array constructor
<html>
<body>
<script>
var emp=new Array("Jai",“Raaki","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
</body>
</html>
JavaScript Constructor Method
A JavaScript constructor method is a <!DOCTYPE html>
special type of method which is used to <html>
<body>
initialize and create an object. It is called
when memory is allocated for an object. <script>
class Employee {
Points to remember constructor() {
• The constructor keyword is used to this.id=101;
this.name = "Martin Roy";
declare a constructor method. }
• The class can contain one constructor }
method only. var emp = new Employee();
document.writeln(emp.id+"
• JavaScript allows us to use parent class "+emp.name);
constructor through super keyword. </script>
</body>
</html>
Constructor Method Example: super keyword
 The super keyword is used to call the parent class constructor. Let's
see an example.
• The constructor keyword is used to declare a constructor method.
• The class can contain one constructor method only.
• JavaScript allows us to use parent class constructor through super
keyword.
<!DOCTYPE html> class Employee extends CompanyName {
<html> constructor(id,name) {
super();
<body>
this.id=id;
<script>
this.name=name;
class CompanyName
}
{ }
constructor() var emp = new Employee(1,"John");
{ document.writeln(emp.id+" "+emp.name+"
"+emp.company);
this.company="Javatpoint";
</script>
}
} </body>
</html>
JavaScript Regular Expressions
 A regular expression is a sequence of characters that forms a search
pattern.
 When you search for data in a text, you can use this search pattern to
describe what you are searching for.
 A regular expression can be a single character, or a more complicated
pattern.
 Regular expressions can be used to perform all types of text
search and text replace operations.
JavaScript Regular Expressions
 Syntax
 /pattern/modifiers;
🠶 Example
🠶 /iWaveLabs/i;
🠶 Example explained:
🠶 /iWaveLabs/i is a regular expression.
🠶 iWaveLabs is a pattern (to be used in a search).
🠶 i is a modifier (modifies the search to be case-insensitive).
Using String Methods
 In JavaScript, regular expressions are often used with the
two string methods: search() and replace().
 The search() method uses an expression to search for a
match, and returns the position of the match.
 The replace() method returns a modified string where the
pattern is replaced.
Using String search() With a String
 The search() method searches a string for a specified value and returns the position of the match:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Search a string for "iWaveLabs", and display the position of the match:</p>
<p id="demo"></p>
<script>
let text = "Visit iWaveLabs!";
let n = text.search("iWaveLabs");
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>
Using String replace() With a String
🠶 The replace() method replaces a specified value with another value in a string:
🠶 <!DOCTYPE html>
🠶 <html>
🠶 <body>
🠶 <h1>JavaScript String Methods</h1>
🠶 <p>Replace "Microsoft" with "iWaveLabs" in the paragraph below:</p>
🠶 <button onclick="myFunction()">Try it</button>
🠶 <p id="demo">Please visit Microsoft!</p>
🠶 <script>
🠶 function myFunction() {
🠶 let text = document.getElementById("demo").innerHTML;
🠶 document.getElementById("demo").innerHTML =
🠶 text.replace("Microsoft","iWaveLabs");
🠶 }
🠶 </script>
🠶 </body>
Regular Expression Modifiers
 Modifiers can be used to perform case-insensitive more global searches:
Modifier Description
i Perform case-insensitive matching
g Perform a global match (find all)
m Perform multiline matching
d Perform start and end matching (New in

ES2022)
Regular Expression Modifiers
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a case-insensitive search for "iwaveLabs" in a string:</p>
<p id="demo"></p>
<script>
let text = "Visit iWaveLabs";
let result = text.match(/iwaveLabs/i);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Regular Expression Patterns
 Brackets are used to find a range of characters:
Expression Description
[abc] Find any of the characters between the brackets
[0-9] Find any of the digits between the brackets
(x|y) Find any of the alternatives separated with |
Regular Expression Patterns
 <!DOCTYPE html>
 <html>
 <body>
 <h2>JavaScript Regular Expressions</h2>
 <p>Do a global search for the character "h" in a string:</p>
 <p id="demo"></p>
 <script>
 let text = "Is this all there is?";
 let result = text.match(/[h]/g);
 document.getElementById("demo").innerHTML = result;
 </script>
 </body>
 </html>
DHTML
 DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic

HTML.
 Dynamic HTML is not a markup or programming language but it is a term that
combines the features of various web development technologies for creating
the web pages dynamic and interactive.
 The DHTML application was introduced by Microsoft with the release of the
4th version of IE (Internet Explorer) in 1997.
Components of Dynamic HTML
 DHTML consists of the following four components or
languages:
 HTML 4.0
 CSS
 JavaScript
 DOM.
Components of Dynamic HTML
HTML 4.0
 HTML is a client-side markup language, which is a core component of the DHTML. It defines the
structure of a web page with various defined basic elements or tags.
CSS
 CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling the style
and layout of the HTML elements on the web pages.
JavaScript
 JavaScript is a scripting language which is done on a client-side. The various browser supports JavaScript
technology. DHTML uses the JavaScript technology for accessing, controlling, and manipulating the
HTML elements. The statements in JavaScript are the commands which tell the browser for performing
an action.
DOM
 DOM is the document object model. It is a w3c standard, which is a standard interface of programming
for HTML. It is mainly used for defining the objects and properties of all elements in HTML.
Uses of DHTML
 Following are the uses of DHTML (Dynamic HTML):
 It is used for designing the animated and interactive web pages that are developed in real-
time.
 DHTML helps users by animating the text and images in their documents.
 It allows the authors for adding the effects on their pages.
 It also allows the page authors for including the drop-down menus or rollover buttons.
 This term is also used to create various browser-based action games.
 It is also used to add the ticker on various websites, which needs to refresh their content
automatically.
Features of DHTML
 Following are the various characteristics or features of DHTML (Dynamic HTML):
 Its simplest and main feature is that we can create the web page dynamically.
 Dynamic Style is a feature, that allows the users to alter the font, size, color, and content of a web page.
 It provides the facility for using the events, methods, and properties. And, also provides the feature of
code reusability.
 It also provides the feature in browsers for data binding.
 Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
 With the help of DHTML, users can easily change the tags and their properties.
 The web page functionality is enhanced because the DHTML uses low-bandwidth effect.
Difference between HTML and DHTML
HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup language)
1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of

technologies of web development.
2. It is used for developing and creating web pages. 2. It is used for creating and designing the animated and
interactive web sites or pages.
3. This markup language creates static web pages. 3. This concept creates dynamic web pages.
4. It does not contain any server-side scripting code. 4. It may contain the code of server-side scripting.
5. The files of HTML are stored with the .html or .htm 5. The files of DHTML are stored with the .dhtm
extension in a system. extension in a system.
6. A simple page which is created by a user without 6. A page which is created by a user using the HTML,
using the scripts or styles called as an HTML page. CSS, DOM, and JavaScript technologies called a
DHTML page.
7. This markup language does not need database 7. This concept needs database connectivity because it
connectivity. interacts with users.
DHTML position Property
• The position property sets or returns the type of positioning method used for an element
(static, relative, absolute or fixed).
🠶 Example
<!DOCTYPE html> <button onclick="myFunction()">Try it</button>

<html>
<head> <div id="myDIV">
<style> <p>This DIV element is placed 20 pixels from the top of its
#myDIV { original position.</p>
border: 1px solid black; <p>Click the button to set the position property to "absolute"
background-color: lightblue; and see what happens.</p>
width: 300px; <p>It will then be placed 20 pixels from the top the page.</p>
height: 300px; </div>
position: relative;
top: 20px; <script>
} function myFunction() {
</style> document.getElementById("myDIV").style.position =
</head> "absolute";
<body> }
<p>Click the "Try it" button to change the position property of the </script>
DIV element:</p> </body>
</html>
JavaScript String
Example:
🠶 The JavaScript string is an object that
represents a sequence of characters. <html>
🠶 There are 2 ways to create string in JavaScript
<body>
🠶 By string literal
🠶 By string object (using new keyword) <script>
🠶 By String literal var str="This is string literal";
The string literal is created using double
quotes. document.write(str);
Syntax: </script>
var stringname="string value";
</body>
</html>
By String Object
Syntax
var stringname=new String("string literal");
🠶 Java Script String Method:
Example:
<html>
<html>
<body>
<body>
<script>
<script>
var str="javascript";
var stringname=new String("hello javascript string");
document.write(str.charAt(2));
document.write(stringname);
</script>
</script>
</body>
</body>
</html>
</html>
StringMethods
🠶 Concatenate 🠶 IndexOf()
<html> 🠶 <html>
<body> 🠶 <body>
<script> 🠶 <script>
var s1="javascript "; 🠶 var s1="javascript from iWavelLabs
var s2="concat example"; indexof";
var s3=s1+s2; 🠶 var n=s1.indexOf("from");

document.write(s3); 🠶 document.write(n);
</script> 🠶 </script>
</body> 🠶 </body>
</html> 🠶 </html>
Javascript String Methods
🠶 lastIndexOf 🠶 toLowerOf()
<html> <html>
<body> <body>
<script> <script>
var s1="javascript from java99 indexof"; var s1="JavaScript toLowerCase Example";
var n=s1.lastIndexOf("java"); var s2=s1.toLowerCase();
document.write(n); document.write(s2);
</script> </script>
</body> </body>
</html> </html>
Javascript string methods
🠶 toUpperCase() 🠶 Slice()
<html>
<html>
<body>
<body>
<script>
<script>
var s1="abcdefgh";
var s1="JavaScript toUpperCase Example"; var s2=s1.slice(2,5);
var s2=s1.toUpperCase(); document.write(s2);
document.write(s2); </script>
</body>
</script>
</html>
</body>
</html>
Java Script String Method
🠶 Trim() 🠶 Split
<html> <html>
<body> <body>
<script> <script>
var s1=" javascript trim "; var str="This is Javascript Language";
var s2=s1.trim(); document.write(str.split(" "));
document.write(s2); </script>
</script> </body>
</body> </html>
</html>
Java Script Date Object
🠶 The JavaScript date object can be used to get year, month and day. You can display a
timer on the webpage by the help of JavaScript date object.
🠶 You can use different Date constructors to create date object. It provides methods to get
and set day, month, year, hour, minute and seconds.
🠶 Constructor
🠶 Date()
🠶 Date(milliseconds)
🠶 Date(dateString)
🠶 Date(year, month, day, hours, minutes, seconds, milliseconds)
Java Script Date Example
<html>
<body>
Current Date and Time: <span id="txt"></span>
<script>
var today=new Date();
document.getElementById('txt').innerHTML=today;
</script>
</body>
</html>
Java Script Date
<html>
<body>
<script>
var date=new Date();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
document.write("<br>Date is: "+day+"/"+month+"/"+year);
</script>
</body>
</html>
Jave Script Time
<html>
<body>
Current Time: <span id="txt"></span>
<script>
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
</script>
</body>
</html>
Java Script Math
 The JavaScript math object provides several constants and methods to perform mathematical operation.
Unlike date object, it doesn't have constructors.
<!DOCTYPE html>
<html>
<body>
Square Root of 17 is: <span id="p1"></span>
<script>
document.getElementById('p1').innerHTML=Math.sqrt(17);
</script>
</body>
</html>
Math.random()
<!DOCTYPE html>
<html>
<body>
Random Number is: <span id="p2"></span>

<script>
document.getElementById('p2').innerHTML=Math.random();
</script>
</body>
</html>
Math Methods
🠶 Math.pow(m,n) 🠶 Math.floor(n)
<!DOCTYPE html>
🠶 The JavaScript math.floor(n) method
<html>
returns the lowest integer for the given
<body> number. For example 3 for 3.7, 5 for
5.9 etc.
3 to the power of 4 is: <span id="p3"></span>
Example:
<script>
document.getElementById('p3').innerHTML=Math.pow Floor of 4.6 is: <span id="p4"></span>
(3,4);
<script>
</script>
document.getElementById('p4').innerHTM
L=Math.floor(4.6);
</body>
</html> </script>
Java Script Method
Round()
<!DOCTYPE html>
<html>
🠶 The JavaScript math.ceil(n) method returns the
<body>
largest integer for the given number. For example
4 for 3.7, 6 for 5.9 etc.
<html> Round of 4.3 is: <span id="p6"></span><br>
<body> Round of 4.7 is: <span id="p7"></span>
Ceil of 4.6 is: <span id="p5"></span> <script>
<script> document.getElementById('p6').innerHTML=Math.roun
d(4.3);
document.getElementById('p5').innerHTML=Mat
document.getElementById('p7').innerHTML=Math.roun
h.ceil(4.6);
d(4.7);
</script>
</script>
</body> </body>
</html> </html>
JavaScript Method
🠶 Math.abs(n)
🠶 The JavaScript math.abs(n) method returns the absolute value for the given number. For
example 4 for -4, 6.6 for -6.6 etc.
Example:
🠶 Absolute value of -4 is: <span id="p8"></span>
🠶 <script>
🠶 document.getElementById('p8').innerHTML=Math.abs(-4);
🠶 </script>
JavaScript Number Object
• The JavaScript number object enables you to represent a numeric value. It may be integer
or floating-point. JavaScript number object follows IEEE standard to represent the
floating-point numbers.
• By the help of Number() constructor, you can create number object in JavaScript. For
example:
• var n=new Number(value);
• If value can't be converted to number, it returns NaN(Not a Number) that can be checked
by isNaN() method.
Number Methods
<!DOCTYPE html>
<html>
<body>
<script>
var x=102;//integer value
var y=102.7;//floating point value
var z=13e4;//exponent value, output: 130000
var n=new Number(16);//integer value by number object
document.write(x+" "+y+" "+z+" "+n);
</script>
</body>
</html>
Output:
102 102.7 130000 16
JavaScript Number Constants
Constant Description
MIN_VALUE returns the largest minimum value.
MAX_VALUE returns the largest maximum value.
POSITIVE_INFINITY returns positive infinity, overflow value.
NEGATIVE_INFINITY returns negative infinity, overflow value.
NaN represents "Not a Number" value.
Number isInteger()
<!DOCTYPE html> document.writeln(Number.isInteger(x));

<html> document.writeln(Number.isInteger(y));
<body> document.writeln(Number.isInteger(z));
<script> </script>
var x=0; </body>
var y=1; </html>
var z=-1; Output
true true true
isInteger Method
<!DOCTYPE html> document.writeln(Number.isInteger(chec

<html> k(12,2)));
<body> document.writeln(Number.isInteger(chec
k(12,5)));
<script>
</script>
function check(x,y)
</body>
{
</html>
return x/y;
true false
}
Java Script Form Validation
JavaScript provides facility to validate the form on the client-side so data processing will be
faster than server-side validation. Most of the web developers prefer JavaScript form
validation.
JavaScript Form Validation Example
<html>
<body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
Java Script Form validation
<body>
<form name="myform" method="post" action="http://www.amazon.in" onsubmit="return
validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
Number Validation
<body>
<form name="myform" action="http://www.amazonin" onsubmit="return validate()"
>
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
</body>
</html>
Form Validation Example
<html>
<head>
<script>
function validate() {
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var what = document.forms["RegForm"]["Subject"];
var password = document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];
Form Validation Example
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
if (address.value == "") {
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email.value == "") {
window.alert(
"Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "") {
window.alert(
"Please enter your telephone number.");
phone.focus();
return false;
}
if (password.value == "") {
window.alert("Please enter your password");
password.focus();
return false;
}
if (what.selectedIndex < 1) {
alert("Please enter your course.");
what.focus();
return false;
}
return true;
}
</script>
Java Script form Validation
<style>
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">REGISTRATION FORM</h1>
<form name="RegForm" onsubmit="return validate()" method="post">
<p>Name: <input type="text“ size="65" name="Name" /></p>
<br />
<p>Address: <input type="text“ size="65" name="Address" />
</p>
<br />
<p>E-mail Address: <input type="text“ size="65" name="EMail" /></p>

<br />
<p>Password: <input type="text“ size="65" name="Password" /></p>
<br />
<p>Telephone: <input type="text“ size="65" name="Telephone" /></p>
<br />
<p>
SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
<option>GEEKFORGEEKS</option>
</select>
</p>
<br />
<br />
<p>Comments: <textarea cols="55“ name="Comment"> </textarea></p>

<p>
<input type="submit“ value="send" name="Submit" />
<input type="reset“ value="Reset" name="Reset" />
</p>
</form>
</body>
</html>

Web Technology PP T

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology PP T

Uploaded by

Copyright:

Available Formats

HTML5 Application Fundamentals

🠶 HTml stands for HyperText Markup Language.

Element Chrome IE Firefox Opera Safari

🠶 Step 2: Write HTML Code

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

🠶 Step 4: Open the HTML page in your web browser.

🠶 Step 1: Open Sublime Text editor

🠶 Step 2: Save the page before writing any code.

🠶 Step 3: Write the code in Sublime Text editor

🠶 Step 4: Open the HTML page in your Browser

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

🠶 In HTML the formatting tags are divided into two categories:

Element name Description

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

<mark> This tag is used to highlight text.

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

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

<sub> It displays the content slightly below the normal line.

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

<ins> This tag displays the content which is added

🠶 <br> tag is used for line break.

🠶 An unvisited link is displayed underlined and blue.

🠶 HTML img tag is used to display image on the web page.

🠶 Attributes of HTML img tag

behavior It facilitates user to set the

vspace defines vertical space in pixels

🠶 HTML Scroll Marquee

🠶 HTML Alternate Marquee

🠶 Direction in HTML marquee

🠶 Nested marquee example

🠶 Disadvantages HTML marquee

🠶 HTML quotes are used to put a short quotation on your website.

🠶 HTML blockquote tag

🠶 HTML Style background-color

🠶 HTML Style font-size

🠶 HTML Style text-align

<p style="text-align:center;background-color:pink;">This text is located at center side</p>

🠶 HTML <br> tag or element is used to break line in a paragraph.

🠶 HTML bold tag is represented by <b> tag.

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

<datalist> It specifies a list of pre-defined

HTML TextField Control

autofocus It specifies that a text area should be automatically get

<form action=“https://www.amazon.in" id="usrform">

Browser mp3 wav ogg

<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3;">

🠶 An iframe is used to display a web page within a web page.

🠶 CSS stands for Cascading Style Sheet.

<style> <h1>Write Your First CSS Example</h1>

h1{ <p>This is Paragraph.</p>

🠶 You can add new looks to your old HTML documents.

🠶 Solves a big problem

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

<!DOCTYPE html> <body>

<!DOCTYPE html> <body>

<!DOCTYPE html> <body>

🠶 CSS display none

🠶 CSS Font Color

<!DOCTYPE html> <body>

 In this example, the div element has an ID of "example"

🠶 JavaScript (js) is a light-weight object-oriented programming language which is

🠶 Include java script in 3 places.

🠶 It helps in the reusability of code in more than one HTML file.