1
2
Agenda:
• HTML
• XHTML
• HTML5
3
HTML Evolution:
4
HTML
• HyperText Markup Language
• Set of Text commands that can be used to
format how a web is displayed.
5
Tags:
• Keywords surrounded by angular brackets.
• Not case sensitive
• No space allowed in between Eg: <h e a d>
• Eg: <head></head> <p>
• Two types of tags:
• Container tags: <title></title>
• Empty tags: <br><hr>
• Comments are put inside <!--………..-->
6
Some major Tags:
Tags Description
<!DOCTYPE...> defines the document type and HTML version.
<html> encloses the complete HTML document and mainly comprises
of the <head>..</head> and <body>….</body>
<head> represents the document's header which can keep other HTML
tags like <title>, <link> etc.
<title> used inside the <head> tag to mention the document title.
<body> represents the document's body which keeps other HTML tags
like <h1>, <div>, <p> etc.
<br> Used to break the line
<p> Used to create a paragraph in the webpage
<hr> Used to draw horizontal line across the page
7
Some Basic Tags:
Tags Description
<h1>…<h6> Heading tags: used to set different headings on the document.
<b> Used to set the text in boldface.
<i> Used to set the text in italic format.
<u> Used to underline the text
<sup> Used to convert the text in superscript like a2, b2
<sub> Used to convert the text in subscript like a2, b2
<img> Used to insert images
<table> Used to create table
8
Attributes:
• Provide additional information to describe the
content of tags.
• Always in the start tag.
• Eg: <body bgcolor =“green”>
9
Basic structure of HTML document:
10
HTML Editors
• Web pages can be created and modified by using professional HTML
editors( Example: Visual Studio Code (VS Code) and Adobe Dreamweaver)
• A simple text editor is all you need to learn HTML.
Step 1: Open Notepad (PC)
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML code into Notepad:
11
HTML Editors
Step 3: Save the HTML Page
• Save the file on your computer. Select File > Save as in the Notepad
menu.
• Name the file "[Link]" and set the encoding to UTF-8 (which is
the preferred encoding for HTML files).
Tip: You can use either .htm or .html as file extension. There is no difference; it is up to you.
12
HTML Editors
Step 4: View the HTML Page in Your Browser:
• Open the saved HTML file in your favorite browser (double click on
the file, or right-click - and choose "Open with").
13
Sample:
14
HTML Tags and Elements:
Tags are enclosed in angle brackets < >
– For Eg.: <html> Opening Tag, </html> Closing Tag.
Element is the combination of (opening & closing Tags and the
content between them).
For Eg.:
<p>Part of this text is <b>bold</b>. </p> is a PARAGRAPH
element that contains a BOLD element
<head> and <body> Elements 15
▪ The <head> element is where you include a <title> element (that appears in the
title bar of the browser).
▪ You can also include lots of other type of information in the <head> element.
▪ Cascading Style sheet information, or a link to an external style sheet (or
several).
▪ “Meta” data, such as who authored the page, the type of content, and clues
that search engines may (or may not) use to help categorize your page.
▪ JavaScript code.
▪ The <body> element contains the main bulk of the material to be displayed on the
webpage.
▪ Paragraphs.
▪ Tables and lists.
▪ Images.
▪ JavaScript code.
▪ PHP code can be included here too (if passed through a PHP parser before
being served to the client’s browser).
▪ Other embedded objects (videos, etc).
A. <head> Elements
Meta tags
The <meta> tag provides metadata about the HTML document.
Meta elements are typically used to specify page description, keywords,
author of the document, last modified, and other metadata.
Some examples –
Example 1 - Define keywords for search engines:
<meta name="keywords, description " content="HTML,
CSS, XML, XHTML, JavaScript">
Example 3 - Define the author of a page:
<meta name="author" content="Hege Refsnes">
Example 4 - Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
A. <head> Elements (Cont.)
Title Tag
The <title> tag is required in all HTML documents and it defines the title of
the document.
The <title> element: Defines a title in the browser toolbar.
Provides a title for the page when it is added to favorites.
Displays a title for the page in search-engine results.
Eg.:
A. <head> Elements (Cont.)
Link Tag
The <link> tag defines a link between a document and an external resource.
In HTML the <link> tag has no end tag.
Some Imp. Attributes – charset, - To know browser, which character encoding is
used.
href, - hyperlink.
rel, - Relation between linked document.
target. – It specifies where to open the linked document.
Example –
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
A. <head> Elements (Cont.)
Script Tags
The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements, or it points to an external
script file through the src attribute.
Example -
<html>
Hello JavaScript!
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p id="demo"></p>
<script>[Link]("demo").innerHTML =
"Hello JavaScript!"; </script>
</body>
</html>
A. <head> Elements (Cont.)
Style Tag
The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a
browser.
Example-
<html> This is a heading
<head>
h1 {color:red;} This is a paragraph.
p {color:blue;}
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
B. Elements for the BODY section
Block-level elements
The BODY of a document consists of multiple block elements. If plain text is
found inside the body, it is assumed to be inside a paragraph P. See the syntax rules
for an explanation of the syntax used in the overview.
Headings Text containers Lists Others
H1 - Level 1 header P - Paragraph UL - Unordered list DIV - Logical division
H2 - Level 2 header PRE - Preformatted text OL - Ordered list CENTER - Centered division
BLOCKQUOTE - Large quotation DIR - Directory list FORM - Input form
H3 - Level 3 header ADDRESS - Address information MENU - Menu item list HR - Horizontal rule
H4 - Level 4 header LI - List item TABLE - Tables
H5 - Level 5 header Text Level Elements DL - Definition list
H6 - Level 6 header Logical Markups DT - Definition term
Physical Markups DD- Definition
Special Markups
B. Elements for the BODY section
Headings
There are 6 types of heading tags.
Eg.: –
This is heading 1
<html>
<body> This is heading 2
<h1>This is heading 1</h1>
This is heading 3
<h2>This is heading 2</h2>
<h3>This is heading 3</h3> This is heading 4
<h4>This is heading 4</h4> This is heading 5
<h5>This is heading 5</h5>
This is heading 6
<h6>This is heading 6</h6>
Tip: Use h1 to h6 elements only for headings. Do not
<p><b>Tip:</b> Use h1 to h6 elements only use them just to make text bold or big. Use other
for headings. Do not use them just to make text tags for that.
bold or big. Use other tags for that.</p>
</body>
</html>
B. Elements for the BODY section (Cont.)
<p> - Paragraph Tag and <pre> - Preformatted Tag
<p> Tag - Another way to structure your text in paragraph forms.
<Pre> Tag - is used to apply structural exactness.
Eg.:
<html> This is a paragraph of text.
<body>
<p>This is a paragraph of text.</p> This is a second paragraph of text.
<p>This is a second paragraph of
text.</p> This is preformatted text with exact
space,
<pre>This is preformatted text with line and breaks.
exact space,
line and breaks.</pre>
</body>
</html>
B. Elements for the BODY section (Cont.)
<blockquote> Tag and <address> Tag
Blockquote Tag - Indicates that the enclosed text is an extended quotation.
Address Tag - Address Information of the Author/Owner.
Eg.:
<html> This is a quotation taken from
<body> the People Strategists.
<blockquotecite="[Link]
<p>This is a quotation taken from the People Strategists.</p>
Written by People Strategists.
</blockquote>
Visit us at:
<address> [Link]
Written by L8, Tower1, Umiya Business Bay,
<a href="[Link] Outer ring road, Bangalore.
Strategists</a>.<br>
Visit us at:<br>
[Link]<br>
L8, Tower1, Umiya Business Bay,<br>
Outer Ring Road, Bangalore.
</address>
</body>
</html>
B. Elements for the BODY section (Cont.)
Text Formatting Elements
Physical markup Logical markup Special markup
TT - Teletype EM - Emphasized text A - Anchor
I - Italics STRONG - Strongly IMG - Image
B - Bold emphasized BASEFONT - Default font size
U - Underline DFN - Definition of a term APPLET - Java applet
STRIKE - Strikeout CODE - Code fragment PARAM - Parameters for Java applet
BIG - Larger text SAMP - Sample text FONT - Font modification
SMALL - Smaller text KBD - Keyboard input BR - Line break
SUB - Subscript VAR - Variable MAP - Client-side imagemap
SUP - Superscript CITE - Short citation AREA - Hotzone in imagemap
B. Elements for the BODY section (Cont.)
Text Formatting Elements (Physical Markup)
Tag Description
<b>….</b> - bold.
<i>……</i> - italic.
<u>….</u> - underline.
<strike>…</strike> - strikethrough.
<sub>….</sub> - subscript.
<sup>….</sup> - superscript.
<big>….</big> - bigger font (one font size bigger).
<small>….</small> - small font (one font size smaller).
<tt>….</tt> - typewriter (monospaced).
B. Elements for the BODY section (Cont.)
Text Formatting Elements (Physical Markup)
<html>
Snapdeal Academy.
<body>
Java Training.
<b> Snapdeal Academy. </b> <br> Powered by - PeopleStrategists.
Text.
<i> Java Training. </i> <br> Copyright © Jasper Infotech
[Link]. Subscipt.
Superscript.
<u> Powered by - PeopleStrategists. </u> <br>
<strike> Text. </strike> <br>
<small> Copyright © Jasper Infotech [Link].
</small>
<sub> Subscipt. </sub>
<sup> Superscript. </sup>
</body>
</html>
B. Elements for the BODY section (Cont.)
Text Formatting Elements (Logical Markup)
Tag Description
<em> - Emphasized
<strong> - Strongly emphasized
<dfn> - A definition
<code> - Represents computer code
<kbd> - keyboard characters
<var> - Program variable
<cite> - A citation
B. Elements for the BODY section (Cont.)
Text Formatting Elements (Logical Markup)
<html>
<body>
<em> Snapdeal Academy. </em> <br>
Snapdeal Academy.
<strong> Java Training. </strong > Java Training.
Powered by - PeopleStrategists.
<br>
Text.
<dfn> Powered by - PeopleStrategists. Subscipt. Superscript. Superscript.
</dfn > <br>
<code> Text. </code> <br>
<kbd> Subscipt. </kbd>
<var> Superscript. </var>
<cite> Superscript. </cite>
</body>
</html>
B. Elements for the BODY section (Cont.)
Text Formatting Elements (Special markup)
Links and Navigation
Anchor Element-
An anchor can be used to create a link to another document (with the href
attribute).
Types –
External : <a href=“[Link] to
PeopleStrategists</a>
Internal : <a href=“\[Link]”>contact</a>
Image Tag-
The syntax for the tag to insert image into the webpage is-
<img src=“url” alt=“alternate text”>
Eg.: <img src=“\images\[Link]” alt=“Snapdeal Academy”>
Elements for the BODY section (Cont.)
Unordered List and Odered Lists
Unordered Lists - <ul> tag. Item lists in <li> tag. The list items will be marked with bullets.
Ordered Lists - <ol> tag. Item lists in <li> tag. . The list items will be marked with numbers.
Eg.:
<html> Unordered List
<body>
<h2>Unordered List </h2> • Java
<ul> • Python
<li>Java</li> • Ruby
<li>Python</li>
<li>Ruby</li>
</ul> Ordered List
<h2>Ordered List </h2>
<ol> 1. Java
<li>Java</li> 2. Python
<li>Python</li> 3. Ruby
<li>Ruby</li>
</ol>
</body>
</html>
B. Elements for the BODY section (Cont.) 32
The listing tags
• HTML supports three types of Lists:
1. Ordered or Numbered List
<OL> tag
2. Unordered List
<UL> tag
3. Definition List
<DL> tag
The item of the list are inserted using <LI> tag
33
The listing tags:
Elements for the BODY section (Cont.)
Div Tag
<div> tag – Used to defines a division or a section in an HTML document. And to group block-
elements to format them with CSS.
Eg.:
<html> Snapdeal Academy
<body>
<div style="color:#00FF00"> Welcome to Java Training.
<h2>Snapdeal Academy</h2>
<p>Welcome to Java Training</p>
</div>
</body>
</html>
B. Elements for the BODY section (Cont.) 35
The Table tag:
• <table> …..</table>
• Used for making table
• <th> table used for table heading
• <tr> tag used for table row
• <td> tag used for cell of a table
36
The Table tag:
B. Elements for the BODY section (Cont.)
Form Elements
• A form is container that holds multiple controls.
• Forms collect data from site visitor and post it back to back-end
application.
<form> - It is a method of accepting inputs from user. A form is an area that
can contain form elements.
Eg.:
<form name=“form1” action="[Link]" method=get>
<!- form elements -->
</forms>
Name- is used for future manipulation of data by scripting language.
Action- indicates a program on the server that will be executed when this form is
submitted. Mostly it will be an ASP or a CGI script.
Method- indicates the way the form is submitted to the server - popular options are
GET/POST.
B. Elements for the BODY section (Cont.) 38
Input Elements:
Input type Syntax Description
Text <input type="text"> defines a one-line text input field
Password <input defines a password field
type="password">
Submit <input defines a button for submitting form data to
type="submit"> a form-handler.
Reset <input type="reset"> defines a reset button that will reset all form
values to their default values.
Radio <input type="radio"> defines a radio button. Radio buttons lets user
select ONLY ONE of a limited number of
choices.
Checkbox <input defines a checkbox.
type="checkbox"> Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
Button <input defines a button.
type="button">
B. Elements for the BODY section (Cont.) 39
Input Attributes:
Attributes Description Example
value the initial value for an input field. <input type="text" name="firstname"
value=“Hari"
name Used to give a name to the control <input type="text" name="firstname"
which is sent to the server to be value=“Hari"
recognized and get the value.
size specifies the size (in characters) for <input type="text" name="firstname"
the input field: value="John" size="40">
maxlength specifies the maximum allowed <input type="text" name="firstname"
length for the input field maxlength="10">
readonly specifies that the input field is read <input type="text" name="firstname"
only (cannot be changed) value=“Hari" readonly>
disabled specifies that the input field is <input type="text" name="firstname"
disabled. Its value will not be sent value=“Hari" disabled>
when submitting the form:
B. Elements for the BODY section (Cont.) 40
A simple login form
B. Elements for the BODY section (Cont.)
Form Elements
<html>
<body>
<form name=“frm”>
Enter Your Login ID : <input
type=textsize=20><br>
Enter Your Pass Word : <input type=Password
maxlength=8 size=20><br>
<select name=combo1>
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select> <br><br><br>
<select name=combo1 multiple>
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select><br><br>
Select Gender
<input type=Radio value=Male
name=Checked>Male
<input type=Radio value=Female
name=Checked>Female <br>
Select Hobbies
<input type= Checkbox >Cricket
<input type= Checkbox > Reading
<input type= Checkbox > Watching TV<br><br>
<input type=submit value="Load Data">
<input type=button value="Update Data">
</form>
</body>
</html>
B. Elements for the BODY section (Cont.)
Character Entities
Some characters like the < character, have a special meaning in HTML, and therefore
cannot be used in the text. The most common character entities:
Result Description Entity Name
non-breaking space
< less than <
> greater than >
& ampersand &
“ quotation mark "
‘ apostrophe '
Some Other Commonly Used Character Entities
© copyright ©
® registered trademark ®
£ pound £
¥ yen ¥
Some Important Attributes 43
Attribute Options Function
title User Defined "Pop-up" title of the elements.
href User Defined The link address is specified in the href attribute
opens.
class User Defined Classifies an element for use with Cascading Style
Sheets.
id User Defined Names an element for use with Cascading Style
Sheets.
bgcolor numeric, hexidecimal, RGB Places a background color behind an element
values
background URL Places a background image behind an element
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML element.
width Numeric Value Specifies the width of tables, images, or table
cells.
height Numeric Value Specifies the height of tables, images, or table
cells.
44
XHTML
• XHTML:
EXtensible HyperText Markup Language
• almost identical to HTML
• stricter than HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
• was developed by combining the strengths of
HTML and XML.
45
Why XHTML ?
• The reason for XHTML to be developed was
convoluted browser specific tags. Pages coded
in HTML appeared different in different
browsers.
• To solve some cross-browser compatibility
issues
46
The Most Important Differences from HTML:
1. Document Structure
– XHTML DOCTYPE is mandatory
– The xmlns attribute in <html> is mandatory
– <html>, <head>, <title>, and <body>
are mandatory
47
The Most Important Differences from HTML:
2. XHTML Elements
– XHTML elements must be properly nested
– XHTML elements must always be closed
– XHTML elements must be in lowercase
– XHTML documents must have one root element
48
The Most Important Differences from HTML:
Restriction Valid in HTML Valid in XHTML
XHTML Elements Must <b><i>This text is bold and <b><i>This text is bold and
Be Properly Nested italic</b></i> italic</i></b>
XHTML Elements Must <p>This is a paragraph <p>This is a paragraph</p>
Always Be Closed <p>This is another paragraph <p>This is another
paragraph</p>
XHTML Elements Must <BODY> <body>
Be In Lower Case <P>This is a paragraph</P> <p>This is a paragraph</p>
</BODY> </body>
Empty Elements Must A break: <br> A break: <br />
Also Be Closed A horizontal rule: <hr> A horizontal rule: <hr />
An An
image: <img src="[Link]" alt=" image: <img src="[Link]"
Happy face"> alt="Happy face" />
49
The Most Important Differences from HTML:
3. XHTML Attributes
– Attribute names must be in lower case
– Attribute values must be quoted
– Attribute minimization is forbidden
50
The Most Important Differences from HTML:
Restriction Valid in HTML Valid in XHTML
XHTML Elements Must <BODY> <body>
Be In Lower Case <P>This is a paragraph</P> <p>This is a paragraph</p>
</BODY> </body>
XHTML Attribute Names <table WIDTH="100%"> <table width="100%">
Must Be In Lower Case
Attribute Values Must <table width=100%> <table width="100%">
Be Quoted
51
HTML 5
• The newest version of HTML, only recently
gaining partial support by the makers of web
browsers.
• Incorporates all features from earlier versions
of HTML, including the stricter XHTML.
• Adds a diverse set of new tools for the web
developer to use.
• It is still a work in progress. No browsers have
full HTML5 support.
52
Goals of HTML5
• Support all existing web pages.
• Reduce the need for external plugins and
scripts to show website content.
• Improve the semantic definition (i.e. meaning
and purpose) of page elements.
• Make the rendering of web content universal
and independent of the device being used.
• Handle web documents errors in a better and
more consistent fashion
53
Some New Elements in HTML5
Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
54
New features in HTML 5
• Built-in audio and video support (without plugins)
• Vector graphics and animation
• Enhanced form controls and attributes
• The Canvas (a way to draw directly on a web
page)
• Drag and Drop functionality
• Support for CSS3 (the newer and more powerful
version of CSS)
• More advanced features for web developers, such
as data storage and offline applications.
55
Advantages of HTML 5
1) Cleaner markup/ Improved code:
enable web designers to use cleaner, neater code. We can remove div tags and
replace them with semantic HTML5 elements.
2) Elegant forms:
enables designer to use fancier forms. There will be different type of inputs,
search and different fields for different purpose.
3) Consistency:
As websites will adopt the new HTML5 elements for consistency. This will make
it much easier for designers and developers to immediately understand how a
web page is created.
4) Supports rich media elements:
HTML5 has an inbuilt capability to play audio and video eliminating the plugin
tags.
5) Offline Application Cache:
HTML5 offers an offline application cache facility which will load the page the
user has visited even if the user is temporarily offline. This feature will help the
files to load much faster and reduces load on server
56
XHTML vs HTML5
The DOCTYPE declaration
It tells the browser which type and version of document to expect.
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
HTML5
<!DOCTYPE html>
57
XHTML vs HTML5
<head> section
XHTML
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>
HTML5
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="[Link]">
</head>
58
Add-Subtract Calculator
(HTML code):
59
Add-Subtract Calculator
(JavaScript & CSS):
60
Add-Subtract Calculator
(Result)