HTML Wipro Notes
Uploaded by
THARUN KUMAR M 21AD069HTML Wipro Notes
Uploaded by
THARUN KUMAR M 21AD069Contents
1. Introduction to HTML····························································································································· 2
2. LayoutTags_SemanticTags·················································································································14
3. Table_Form_Frames··························································································································· 42
4. Style_Div············································································································································· 66
5. Introduction to HTML5························································································································· 77
Introduction
to HTML
4
Objectives
At the end of this module, you will be able to:
Web Architecture
Introduction to HTML
Describe the various HTML tags and their usage
WEB Architecture
WEB SERVER
WEB Page (Home)
WEB SITE
© 2017 Wipro wipro.com confidential 5
WEB Architecture
WEB SERVER: A computer, including software package, that provides a specific kind of service
to client software running on other computers. A system which accepts web page requests from the
client machines and redirect the request to the machine which holds the relevant website containing
the webpage.
WEBSITE: A homogenous collection of Web Pages.
WEB PAGE: A consolidated page designed and developed with an intention of displaying
information.
© 2017 Wipro wipro.com confidential 6
Client-Side Programming
Client-side programs gets executed in the client machines or browsers.
These scripts are written in the webpage itself and gets executed in the browser
Some of the client-side scripting languages are:
• JavaScript
• VBScript
• AJAX
• JQuery
© 2017 Wipro wipro.com confidential 7
Client-side Programming
Uses of Client-Side Programming:
To create interactive web pages
Work as an interface between user interface and server
Interact with local storage
To retrieve data from the server
© 2017 Wipro wipro.com confidential 8
Introduction to HTML
The Problem
To publish information for global distribution, one needs a universally understood language, a kind
of publishing mother tongue that all computers may potentially understand.
The Solution:
The publishing language used by the World Wide Web is HTML. It is a special kind of text
document that is used by Web browsers to present text and graphics. HTML documents are often
referred to as "Web pages". The browser retrieves Web pages from Web servers.
HTML - Stands for Hyper Text Markup Language.
Special text documents used by web browsers to present text and graphics.
© 2017 Wipro wipro.com confidential 9
Features of HTML
1. Publish online documents with headings, text, tables, lists, photos, etc.
2. Retrieve online information via hypertext links, at the click of a button.
3. Design forms for conducting transactions with remote services, for use in searching for
information, making reservations, ordering products, etc.
4. Include spread-sheets, video clips, sound clips, and other applications directly in their
documents.
© 2017 Wipro wipro.com confidential 10
Features of HTML
HTML is case insensitive i.e. the case used to open and close the tag is not strictly
monitored.
<HTML></html> will have the same effect.
HTML Provides a pre-defined set of tags that can be used to present any kind of data and
information.
Most of the tags that are used in coding the HTML document are easily parsed by any kind
of browsers (There are certain exceptions such as Column, Blink tag does not show any
effect in the MSIE)
© 2017 Wipro wipro.com confidential 11
HTML Tag
1. It is a markup - inserted into an HTML document to provide information about a unit of
content.
2. Identify a page element's type, format, and appearance.
3. All HTML tags are enclosed in brackets (i.e. <table>).
4. Some tags require closing tags - Though all tags must have a closing it is not strictly
checked in normal web page. But for some tags (Like Textarea) the Closing tags are
mandatory.
© 2017 Wipro wipro.com confidential 12
Types of HTML Tags
1. Layout Tags 3. Application Tags
Basic Tags Forms
Structural Tags Tables
Frames
2. Semantic Tags 4. Logical Tags
Presentation Tags Emphasized Tag
Links & Graphics. Strong Tag
Lists. Code Tag
Dividers
Backgrounds and Colors.
Special Characters.
© 2017 Wipro wipro.com confidential 13
Types of HTML Tags
LAYOUT TAGS:
• Define the appearance of the webpage. It talks about the overall look of the webpage where
which text should appear where and which image should appear where is decided.
SEMANTIC TAGS:
• On contrary to Layout Tags which define where the text/image is to be displayed the semantic
tags define how they should be displayed. They define the format in which the text/image
should be displayed.
APPLICATION TAGS:
• These tags are used for creating advanced and complex arrangements of webpage's (Ex.
Frames) and also to provide a base for user interaction.
© 2017 Wipro wipro.com confidential 14
Objectives
At the end of this module, you will be able to:
Layout Tags
Semantic Tags
© 2017 Wipro wipro.com confidential 3
Layout Tags
© 2017 Wipro wipro.com confidential 4
Layout Tags
Defines the layout of the WEB Page.
Defines what text goes where and is displayed where.
A Typical HTML page starts and ends with <HTML> tags
The entire page is divided into two logical sections the Head and the Body
© 2017 Wipro wipro.com confidential 5
Layout Tags
The Head Section is enclosed by <HEAD>Content</HEAD>, generally contains information
recurring in more than one page e.g. Company Logo. The Head also includes the Title Section
enclosed by <TITLE></TITLE> and text between this tag is displayed in the title bar of the
browser. The Body section is enclosed by <BODY>Content</BODY>, generally contains
information that is normally not repeated.
BASIC Tags:
<HTML></HTML> Defines Start and end of Web page
<HEAD></HEAD> Defines the Header section of the Web Page
<TITLE></TITLE> Defines the Title of the web page displayed on the title bar
<BODY></BODY> Defines the body / content of the page.
© 2017 Wipro wipro.com confidential 6
Layout Tags
STRUCTURAL Tags:
<H?></H?> Heading tags. ‘?’ Ranges from 1 to 6, defines heading
<PRE></PRE>Preformatted Text
HEADING TAGS: used to display headings; enclosed in <H>heading</H>. For content enclosed
by the Heading tags a default format is applied which is defined by the tag.
PREFORMATED TAGS: used to apply structural exactness to that of the text in the editor.
Eg.
<PRE> the text will be displayed to the right of the browser
at the same distance as it is now in the editor.
</PRE>
© 2017 Wipro wipro.com confidential 7
Semantic Tags
© 2017 Wipro wipro.com confidential 8
Semantic Tags
1. Presentation Tags
a. These tags are used to present text on the web page.
b. Example: <B> for bold, <I> for Italicizing the text.
2. Links & Graphics
a. These tags are used to link text from one page to another or on the same page.
b.HyperLinks and Bookmarks are the Links that are used.
3. Lists
a. Used to display items in form of la list of terms (with and without definition).
b.Examples are Ordered list, Unordered List and Glossary List.
© 2017 Wipro wipro.com confidential 9
Semantic Tags
4. Dividers
Used to make a clear differentiation between text.
Example: Paragraph, Line dividers
5. Backgrounds and Colors
Used to change the Background colors or images.
6. Special Characters
© 2017 Wipro wipro.com confidential 10
Example
<HTML>
<HEAD></HEAD>
<BODY>
This the default text format<BR>
<FONT NAME=“IMPACT” SIZE=“12” COLOR=“Red”>This the from Font Tag
</FONT><Br>
<B>This is a Bold Text, </B><BR>
<I>This is a italicised text</I><BR>
<U>This is underlined text</U><BR>
Text like date requires to be super scripted like this
12<SUP>th</SUP>.<BR>
and when writhing chemical formulas like that of water
H<SUB>2</SUB>O<BR>
</BODY>
</HTML>
© 2017 Wipro wipro.com confidential 11
Semantic Tags: Presentation Tags
Bold <B>Text</B> Superscript <SUP></SUP>
Italic <I>Text</I> Subscript <SUB></SUB>
Underline <U>Text</U>
FONT SETTINGS:
<FONT
SIZE=“12”
COLOR=“#FFOO00”
Attribute set
FACE=“Times” >
</FONT>
© 2017 Wipro wipro.com confidential 12
Semantic Tags: Links & Graphics
Anchor: <A>
The word hyper stands for “Without limits” i.e. there is no boundary. The Anchor (<A>) tag is used to
hook a link in one place which links that point to a point which can exists any where in the Internet.
An anchor can be used to create a link to another document (with the href attribute) or to create a
bookmark inside a document (with the name attribute).
Syntax:
<A HREF=“URL”>Display Text</A>
© 2017 Wipro wipro.com confidential 13
Links & Graphics
Types of Links:
1. Internal Links - Internal links again are of two types one links a point form one page to another page in
the same website and the other links a point from a page to another point in the same page (Bookmark).
2. External Links - External links are most similar to that of first type of Internal links only difference is
that the link is pointing to an external page (out of the scope of the current existing page. Ex. A news
link in the yahoo website)
© 2017 Wipro wipro.com confidential 14
Links & Graphics (Contd.).
External Links:
<A HREF=“https://webmail.wipro.com”>Webmail</A>
Internal Links:
<A HREF=“\JSP\Register.jsp”>Register</A>
© 2017 Wipro wipro.com confidential 15
Links & Graphics (Contd.).
Hyper Link: A Hyperlink can be created with the following:
< A HREF=“URL” TARGET=“FRAME”>Display text</A>
It has major two attributes “HREf” stands for Hyper reference and target.
The Target attribute tells the browser regarding where it has to open the newly requested page.
The various values that the TARGET attribute can take are:
“_main” to open in the same window
“_blank” to open in a new window
“_parent” to open the same window (regardless of frames in the window)
“Frame name” in case of Frame pages a custom defined frame name.
© 2017 Wipro wipro.com confidential 16
Links & Graphics (Contd.).
BookMark:
Create a book mark for whom a link can be created.
<A NAME=“Bookmark_Name”>Display Book Mark Title</A>
Creating a link to already created book mark
<A HREF=“# Bookmark_Name”>Dispay link to book mark</A>
You can see that the only difference between the a hyper link and a bookmark link is that the Hyper
reference start with “#” (HASH) symbol.
Create bookmark
<A NAME=“Book”>Bookmark</A>
Create a link to bookmark
<A HREF=“#Book”>Go to Bookmark</A>
© 2017 Wipro wipro.com confidential 17
Links & Graphics (Contd.).
Image:
<IMG SRC=“URL” ALT=“Alternate Text”>
Example:
<IMG SRC=“\images\wipro.jpg” ALT=“Alternate Text”>
“SRC” Attribute: used to mention the path where the image file is stored and the image file name.
“ALT” Attribute: used to display an alternate text in case the image file could not be loaded.
© 2017 Wipro wipro.com confidential 18
Semantic Tags: List
Provides the Author with feature of displaying text in hierarchical or tree structure format.
Allows the developer to list out the terms and important statements. There are three types of List’s
available.
© 2017 Wipro wipro.com confidential 19
List
Three types of List
i. Glossary List- If the terms are displayed in the form of Subtitle followed by a description then
the list is called as a Glossary list. The entire text on this particular page can be treated as a
Glossary list.
ii. Unordered List- If the sequence of the terms is not of much importance then the terms are
listed under Unordered list where the terms are listed with the help of bullets.
iii. Ordered List- the sequence is of much more importance or the number of terms, they are listed
with the help of numbering sequence.
© 2017 Wipro wipro.com confidential 20
List: Glossary List
Used to display a list of alternating term with definition paragraphs.
DL Definition List, DT Term, DD Data
Definition List (DL):
Signifies the beginning and closing of the Glossary list. The entire Glossary list is enclosed between <DL>
</DL> tags
Definition Term (DT):
Signifies the term that is to be defined (The title/term). It is enclosed between <DT></DT> tags.
Example:
<DL>
<DT>Coffee</DT>
<DD>Black hot drink</DD>
</DL>
Output:
Coffee
Black hot drink
© 2017 Wipro wipro.com confidential 21
List: Ordered List
An ordered list is a list of items. Here the sequence is of much more importance or the number or
terms. The list is displayed and listed with help of numbers or clearly identifiable symbols which are
of incremental nature.
The Ordered list is defined with the help of the <OL></OL> tags. It has TYPE attribute which is used
to mention what type of sequence will be used to display the terms. It can take the values such as “1”,
“A”, “I”, etc to display relevant sequence.
The List is generated with the help of <LI>term</LI> tags.
© 2017 Wipro wipro.com confidential 22
Ordered List : Example
Example:
<OL TYPE=“A”>
<LI>Country</LI>
<OL TYPE=“1”>
<LI>India</LI>
</OL>
</OL>
Output:
A. Country
1. India
© 2017 Wipro wipro.com confidential 23
List: Un-Ordered List
An unordered list is a list of items. Here the sequence is not of much importance or the number or
terms. The list is displayed and listed with help of bullets.
The Unordered list is defined with the help of the <UL></UL> tags. It has TYPE attribute which is
used to mention what type of bullet will be used to display the terms. It can take the values such as
“Circle”, “Disc”, “Square” to display relevant bullet.
The List is generated with the help of <LI>term</LI> tags.
Example:
<UL TYPE=“Square / Circle / Disc”>
<LI>Country</LI>
<UL TYPE=“”>
<LI>India</LI>
</UL>
</UL>
© 2017 Wipro wipro.com confidential 24
Semantic Tags: Dividers
Paragraph: <P></P> tags are used to divide the entire text into paragraph. This makes it easier to apply
universal formatting styles (Achieved by Style-Sheets).
<p align=“Left/center/right/justify”>Text</p>
LineBreak: In case a line break is to be inserted the <BR> tag is used which works similar to carriage
return, i.e. breaks the line and starts printing from the next line.
<BR/> gives a single carriage return.
© 2017 Wipro wipro.com confidential 25
Semantic Tags: Dividers
Horizontal Rule: <HR> is used to include a horizontal line wherever necessary. It has two attributes Align
and size to mention the alignment and the size of the line. It also has color attribute to mention the color
for the line. It is basically used to mark a clear differentiation between two texts.
<HR ALIGN=“left/center/right” SIZE=“” WIDTH=“” color=“”/>
© 2017 Wipro wipro.com confidential 26
Semantic Tags: Background and Colors
The Background plays an important role in the presentation of information. There is a feature to add
colors and images as background. It can be achieved by two attributes “BACKGROUND” and
“BGCOLOR”
The “BACKGROUND” attribute can be used to display an image as background. The value for this
attribute will the path to the file which is to be displayed as background.
The “BGCOLOR” attribute helps in displaying a color as background.
To change background Image
<BODY BACKGROUND=“URL”>
To change background color
<BODY BGCOLOR= “COLOR” >
© 2017 Wipro wipro.com confidential 27
Semantic Tags: Special Characters
There are certain characters that cannot be directly displayed on the screen, For example Copyright,
blank space.
To display these kind of characters HTML provides a unique way. i.e. Use of ampersand symbol and
the character code or a specific code Defined in HTML.
Syntax:
&#char code; or &code;
© 2017 Wipro wipro.com confidential 28
Semantic Tags: Special Characters
Example:
< &th;
> >
& &
“ "
Registered Trade ® or ®
mark
Copyright © or ©
Non-Breaking space
© 2017 Wipro wipro.com confidential 29
Quiz
1.Which of the following is correct?
a. <b>Click Here<b>
b. <strong>Click Here<strong>
c. <b>Click Here</b>
d. </strong>Click Here</strong> <b>Click Here</b>
2. H1 is the smallest header tag.
a. True
False
b. False
© 2017 Wipro wipro.com confidential 30
Objectives
At the end of this module, you will be able to:
Table creation
Form creation
Frames and usage
© 2017 Wipro wipro.com confidential 3
Application Tags
1. Table
2. Form
3. Frames
© 2017 Wipro wipro.com confidential 4
Table
© 2017 Wipro wipro.com confidential 5
Application Tags: Tables
Tables are used to display text / Information in tabular format. I.e. in the from of rows and
columns.
Tags Purpose
<TABLE> Begins the table definition
<TR> Defines a new row
<TD> Defines a single cell
<TH> Defines header cell
© 2017 Wipro wipro.com confidential 6
Tables: Table Attributes
ALIGNMENT Left / center / right
BORDER Defines the border
WIDTH Defines the width of the table
CELLSPACING Space between the cells
CELLPADDING Space between the text and cell border
EXAMPLE:
<TABLE ALIGNMENT=“center” BORDER=“0” WIDTH=“100%”
CELLSPACING=“2” CELLPADDING=“4”>
© 2017 Wipro wipro.com confidential 7
Tables: Merging Cells
1. ROWSPAN
Used to merge cells in rows
<TD ROWSPAN=“2”> two cells in consecutive columns are merged
2. COLSPAN
Used to merge cells in Columns
<TD COLSPAN=“2”> two cells in consecutive rows are merged
© 2017 Wipro wipro.com confidential 8
Demonstration
Demonstration of creating different tables that use the following attributes :
cellspacing
cellpadding
rowspan
colspan
table border
© 2017 Wipro wipro.com confidential 9
Example
EXAMPLE:
<TABLE BORDER="7" CELLPADDING="7" CELLSPACING="10">
<TR BGCOLOR="#00FF00">
<TD>A green row.</TD>
<TD BGCOLOR="#FFFF00">This cell should be yellow, overriding the
row color.</TD> <TD>Back to the row color.</TD>
<TR BGCOLOR="#0000FF">
<TD>A blue row.</TD>
<TD><PRE> </PRE></TD>
<TD ROWSPAN="2">This cell takes the color of the topmost row that
it spans</TD>
</TR>
<TR BGCOLOR=“#FF0000">
<TD colspan=“2” align=“center” >A red row.</TD>
</TR>
</TABLE>
© 2017 Wipro wipro.com confidential 10
Quiz
1. What are the two table dimension tags?
a. <TL> and TW>
b. <TR> and <TD>
c. <TD> and <RD>
<TR> and <TD>
2. What does this line of HTML <td height="38"></td> do?
a. Sets the height of the table to 38 pixels
b. Sets the height of the cell to 38 pixels
c. It's not valid
Sets the height of the cell to 38 pixels
© 2017 Wipro wipro.com confidential 11
Forms
© 2017 Wipro wipro.com confidential 12
Application Tags: Forms
Mode of accepting input from user
Container: Form
<FORM NAME=“” ACTION=“” METHOD=“”></FORM>
Components: Form Elements
These are the data fields in the form, such as text fields and checkboxes
The <INPUT> tag can be used to create:
Text boxes - Radio buttons
Check boxes - Submit buttons
Reset buttons - Password
Generic buttons
There are other tags like TEXTAREA and SELECT for other purposes.
© 2017 Wipro wipro.com confidential 13
Application Tags: Forms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.) in a form.
It has three main attributes:
1)NAME: used to identify the form.
2)ACTION: points towards which page the data is to be sent.
3)METHOD: takes one the two values GET/POST. Defines what kind of action is to be performed.
© 2017 Wipro wipro.com confidential 14
Forms: Input Tag
1. The most used form tag is the <input> tag.
2. Is a single tag option for gathering information
3. The type of input is specified with the type attribute.
4. Contains all of the other options for acquiring information, including simple text fields, password
fields, radio buttons, check boxes, and the buttons to submit and reset the form
5. <INPUT TYPE = “ * ” > * can take the following values
Text TextField
Radio Radio Button
Checkbox Checkbox
Password Password TextField
© 2017 Wipro wipro.com confidential 15
Forms: Input Tag
Text Fields:
Text fields are used when you want the user to type letters, numbers, etc. in a form
Radio Buttons:
Radio Buttons are used when you want the user to select one of a limited number of choices.
Checkboxes:
Checkboxes are used when you want the user to select one or more options of a imited number of choices.
© 2017 Wipro wipro.com confidential 16
Input Tag: Text Area
This component allows to enter a multiline text. For example address.
It has three attributes:
NAME: name of the component
ROWS: Number of rows
COLS: Number of columns
<TEXTAREA NAME=“” ROWS=“” COLS=“”>
Text to be displayed in the Text Area
</TEXTAREA>
EXAMPLE:
<TEXTAREA NAME="addressbox" ROWS="5" COLS="20 “align="center">
This is an example for multilined text box (TEXTAREA)
</TEXTAREA>
© 2017 Wipro wipro.com confidential 17
Select
Select option is used to display multiple options to the user in a restricted amount of space.
It is also enforced to restrict the user in selecting a minimum/maximum number of options from the
available list.
<SELECT NAME=“” MULTIPLE>
<OPTION VALUE=“taken value”>Display text</OPTION>
</SELECT>
<SELECT> is used to define the List.
It has a NAME attribute which is used to name the component.
<OPTION> tag is used to add items to the list.
The VALUE attribute is used to assign the value to the component.
The text in-between the <OPTION></OPTION> tag is only to display but actually the value attribute
is responsible for assigning the value to the component.
© 2017 Wipro wipro.com confidential 18
Select Example
EXAMPLE:
<select name="locations" align="center">
<option value="EC1">EC1</option>
<option value="EC2">EC2</option>
<option value="EC3">EC3</option>
<option value="EC4">EC4</option>
</select>
© 2017 Wipro wipro.com confidential 19
Quiz
1. Which of the following is a valid value for the form's action attribute?
a. GET
b. POST
c. Both a and b are valid
Both a and b are valid
d. None of the above
2. Which of the following is most appropriate to accept password value from the user?
a. <input type="text" name="pwd" value="">
b. <input type="password" name="pwd" value="">
c. <textarea cols="50" rows="6"> </textarea>
d. None of the above <input type="password" name="pwd" value="">
© 2017 Wipro wipro.com confidential 20
Frames
© 2017 Wipro wipro.com confidential 21
Application Tags: Frames
HTML frames allow developers to present documents in multiple views, which may be independent
windows or subwindows. Multiple views offer designers a way to keep certain information visible,
while other views are scrolled or replaced. For example, within the same window, one frame might
display a static banner, a second a navigation menu, and a third the main document that can be scrolled
through or replaced by navigating in the second frame.
© 2017 Wipro wipro.com confidential 22
Frames
FRAMESET:
HTML Defines a Framepage layout called as FRAMESET which defines how many Frames are
present in the page and how they are aligned. The FrameSet is defined with the
<FRAMESET></FRAMESET> tags. It has two attributes “ROWS” and “COLS” which defined
whether the frame is divided into rows or cols.
FRAME:
Once the layout is defined it’s the frames. Frames are the webpage that will be loaded in the
different segments created by the FrameSet. Each frame should be given a name which will be used
by the Hyper link as target values.
© 2017 Wipro wipro.com confidential 23
Application Tags: Frames (Contd.).
<FRAMESET COLS="25%,*">
<FRAME SRC=“left.htm“ NAME=“left”>
<FRAME SRC=“right.htm“ NAME=“right”>
</FRAMESET>
<FRAMESET COLS="25%,*">
<FRAME SRC=“top.htm“ NAME=“header”>
<FRAME SRC=“body.htm“ NAME=“body”>
</FRAMESET>
© 2017 Wipro wipro.com confidential 24
Nested Frames
<FRAMESET ROWS="25%,75%">
<FRAME SRC="top.htm" NAME="left"/>
<FRAMESET COLS="25%,75%">
<FRAME SRC="left.htm" NAME="left"/>
<FRAME SRC="right.htm" NAME="right"/>
</FRAMESET>
</FRAMESET>
© 2017 Wipro wipro.com confidential 25
Quiz
1. Which attribute do you use to specify the URL location of the frame in a <FRAME> tag?
a. URL
b. HREF
c. SRC SRC
2. What would the following <FRAMESET cols="30%,70%"> do?
a. Sets up two frames
b. Sets up one frame taking 30% of the page
c. Sets up two frames, split horizontally Sets up two frames
© 2017 Wipro wipro.com confidential 26
Objectives
At the end of this module, you will be able to:
Usage of Style in HTML
Usage of Div tag in HTML
© 2017 Wipro wipro.com confidential 3
Style & Div
© 2017 Wipro wipro.com confidential 4
HTML Style
Cascading Style Sheets(CSS) are used to style HTML documents
CSS, is a standard for formatting Web pages that goes well beyond the limitations of HTML
CSS extends HTML with more than 70 style properties that can be applied to HTML tags
© 2017 Wipro wipro.com confidential 5
Example on Style
We can have style attribute with body to define the background color of the html document, while
the background color of the paragraph is red.
<html>
<body style="background-color:yellow;">
<h3>
<p style="background-color:red;">We are learning how to apply
style attribute in an HTML document</p>
</h3>
</body>
</html>
© 2017 Wipro wipro.com confidential 6
Font color and size using Style
We can define the font color and size using Style
<html>
<body>
<h1 style="font-family:Times New Roman;">Demonstration</h1>
<p style="font-family:arial;color:blue;font-size:30px;">Style is
used here for specifying font color and size</p>
</body>
</html>
© 2017 Wipro wipro.com confidential 7
Text alignments using Style
The example below demonstrates how to apply text alignments using Style
<html>
<body>
<h1 style="text-align:center;">Wipro Technologies</h1>
<p>The campus is located at Electronics City, Bangalore</p>
</body>
</html>
© 2017 Wipro wipro.com confidential 8
Specifying Height and Width for a paragraph
We can specify height and width for a paragraph with style
<html>
<p style="background-color:cyan;text-align:left;width:500;
height:200;font- family:arial;color:red;font-size:25px;">
This is a demonstration of<br>
style attribute applied with paragraph tag.<br>
<br>
We are learning how to make use of style attribute in an HTML
document.<br>
</p>
</html>
© 2017 Wipro wipro.com confidential 9
Div tag
The <div> tag can be considered as a container that holds other page elements and it is used to
divide the HTML document into sections
We can use this element to group together HTML elements and apply CSS styles for these elements
© 2017 Wipro wipro.com confidential 10
Example on div tag
<div style="color:#00FF00;background-color:blue;text-
align:left;width:500;height:200">
<h1> Personal Information</h1>
<form name=f1 >
<table>
<tr><td>Enter name : </td><td><input type=text /></td>
<tr><td>Enter age : </td><td><input type=text /></td>
</table>
</div>
<br><br><br>
© 2017 Wipro wipro.com confidential 11
Example on div tag (Contd.).
<div style="color:red;background-color:cyan; text-
align:left;width:500;height:200">
<h1> Family Background</h1>
<form name=f2 >
<table>
<tr><td>Father’s Name: </td><td><input type=text /></td>
<tr><td>Mother’s Name: </td><td><input type=text /></td>
</table>
</div>
© 2017 Wipro wipro.com confidential 12
Quiz
1. <div id="left"></div> In this id="left", is used to:
a. indent the column to the left
b. name the division or column "left"
c. align the text in the column to the left
Name the division or column “left”
© 2017 Wipro wipro.com confidential 13
Introduction
to
HTML5
© 2017 Wipro wipro.com confidential 3
Objectives
At the end of this module, you will be able to :
Understand HTML 5
Different browser support for HTML 5
Different HTML 5 elements
© 2017 Wipro wipro.com confidential 4
What Is HTML 5 ?
The new version of HTML
A new and emerging set of web standards and specifications
HTML5 is HTML + CSS3 + JavaScript APIs
© 2017 Wipro wipro.com confidential 5
What Is HTML 5? (Contd.).
HTML5 allows for the creation of better web applications and websites.
Using HTML5, web developers can expose graphics and multimedia to webpages with no need for
plugins, use advanced JavaScript APIs such as client-side storages, arrange their webpages with a
more meaningful structure and embed semantics in their content.
In 1991, the first HTML specifications were published.
The second release of HTML (HTML2) was published in 1995, introducing form based file uploads,
tables and more.
In early 1997, a new and improved HTML specification (HTML3) was published as a W3C recomme
ndation.
Note: Most of the changes in this version were the adoption of the visual markup tags of Netscape.
© 2017 Wipro wipro.com confidential 6
What Is HTML 5 (Contd.).
In late 1997, the last HTML specification(HTML4) was released. This version has changed a little
over time but remained in use until 2007, when the W3C and WHATWG began work on HTML5.
Note: WHATWG is the Web Hypertext Application Technology Working Group. It is a working
group separated from W3C and its main issue is web forms.
HTML5 is product of two different groups that were working on separate but related efforts:
• W3C-was working on HTML4
• WHATWG- was working on web forms and web applications.
These groups began to co-operate in 2006 to create a better web experience. The product of their co-
operation in HTML5. HTML5 is a new set of standards and specifications that try to fix some
problems with the previous version of HTML, such as lack of guidelines, the loose structure, the lack
of flexibility and more
© 2017 Wipro wipro.com confidential 7
What is HTML 5 (Contd.).
HTML5 is the next generation of HTML
It will be the new standard for HTML,XHTML, and HTML DOM
HTML5 work is still in progress and most modern browsers have some HTML5 support
It is a co-operation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHTWG)
WHATWG was working with web forms and applications, and W3C
was working with XHTML 2.0
In 2006, they decided to collaborate and create a new version of HTML
© 2017 Wipro wipro.com confidential 8
What is HTML 5 (Contd.).
It is a language for structuring and presenting content for the WWW
It is a core technology of the Internet originally proposed by Opera Software
The core aim of HTML5 is
Is to improve the language with support for multimedia
Easily read by humans
Understood by computers and devices
The HTML5 working group includes Apple, Google, AOL, IBM,Microsoft, Mozilla, Nokia, Opera
and many hundreds of other vendors.
© 2017 Wipro wipro.com confidential 9
Rules for HTML 5
New features should be based on HTML, CSS, DOM, and JavaScript
Usage of external plug-ins (like Flash) should be reduced
Strict parsing rules are introduced to handle any errors.
More markup to replace scripting
Device independence should be there
© 2017 Wipro wipro.com confidential 10
HTML5 and the Open Web Platform
The Open Web Platform (OWP) is a collection of web technologies
It is developed by W3C and other web standardization bodies
HTML5 is part of the OWP
© 2017 Wipro wipro.com confidential 11
The New Elements in HTML5
HTML5 includes many new elements and features. There are approximately 1000 different working
groups that write its specifications and this mass of groups produces a lot of changes.
The following list describes some of the new elements of HTML5:
• Canvas—A drawing surface that enables drawing 2D graphics with JavaScript API.
• Video and Audio—elements that enable the inclusion of multimedia in webpages without
the need for plug-ins such as Flash. They also expose a JavaScript application
programming interface (API) that allows you to interact with them programmatically.
New content-specific elements—Semantic elements such as article, footer, header and nav enable
the developer to organize content with more expressive elements.
New form controls: New types of input elements were introduced. These elements make it the
browser’s responsibility to implement the behavior of calendars, dates and email addresses freeing
developers from having to create the behavior themselves.
© 2017 Wipro wipro.com confidential 12
The New Elements in HTML5(Contd.).
These new elements come with many new JavaScript APIs that enable browser functionality
that was not available before HTML5.
This includes determining the location of the browser by using the Geolocation API, the use of
files through the File API and more.
© 2017 Wipro wipro.com confidential 13
The Doctype Element
A declaration of document type must be provided by any HTML document
Defines the rendering mode of the browser
Was created to enable HTML parsing and validation
<!DOCTYPE html>
<html>
© 2017 Wipro wipro.com confidential 14
Browser Support
No browsers have full HTML5 support as HTML 5 is yet not an official standard
But all major browsers (Chrome, Safari, Firefox, Opera, Internet
Explorer) continue to add new HTML5 features to their latest versions
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <video> element.
Note: Internet Explorer 8 and earlier versions, do not support the <video> element.
© 2017 Wipro wipro.com confidential 15
Summary
In this module, you were able to :
Understand HTML 5
Different browser support for HTML 5
Different HTML 5 elements
© 2017 Wipro wipro.com confidential 16
Creating Form
Input and
Validation
© 2017 Wipro wipro.com confidential 17
Objectives
At the end of this module, you will be able to :
Describe the new HTML5 input types
Apply date pickers on webpages
Use the new text box types on webpages
Use the new interactive text box types on webpages
© 2017 Wipro wipro.com confidential 18
Challenges with HTML 4.0 Forms
The HTML 4 form fields are not validated
The validation to the input fields can be done by
Writing JavaScript code in the Client side Code
Or the validation needs to be done at the Server side
Almost every web page has some kind of form with search, email, sign-up etc
It would be great if browsers had built in validation for some of the common data types we
collect
© 2017 Wipro wipro.com confidential 19
HTML – New Input types
HTML 5 has lot of new input types
These new features allow for better input control and validation
email
url
number
range
Date pickers (date, month, week, time, datetime-local)
search
color
© 2017 Wipro wipro.com confidential 20
Input type - email
• It represents a control for editing a list of e-mail addresses given in the element’s value
• HTML email address validation will only work in browsers which have support for it
<input type="email" placeholder="Please enter your email“
required multiple=“multiple”>
• required - specifies that the element is a required part of form submission
• placeholder - a short phrase to help the user when entering data into the control
• multiple - specifies that the element allows multiple values
© 2017 Wipro wipro.com confidential 21
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input-Email</title>
</head>
<body>
<form>
<input type="email" placeholder="Please enter your email" required
multiple="multiple">
<input type="submit">
</form>
</body>
</html>
© 2017 Wipro wipro.com confidential 22
Input type – email (Contd.).
Field is empty The value should be an email
Valid email – with a single email Valid-More than 1 email
© 2017 Wipro wipro.com confidential 23
Input type - url
<input type="url" name="URL">
It is used for input fields that should contain a URL address
The value of the url field is automatically validated when the form is submitted
© 2017 Wipro wipro.com confidential 24
Input type - number
<input type="number" min="0" max="100">
Used to take a number as input
<input type="number" min="0 " max="100" step="3">
step-specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
© 2017 Wipro wipro.com confidential 25
Input type - range
Slider control is a very useful user interface to set a number within a range
<input type="range" name="Range" min="1" max="10" required>
© 2017 Wipro wipro.com confidential 26
Input type – Date pickers - date
Date and time field can be easily found in many web forms
Typical applications are like ticket booking, appointment booking etc
HTML5, the web browser ensures user can only enter a valid date-time string into the input textbox
<input type="date" name="set_date" />
© 2017 Wipro wipro.com confidential 27
Input type – Date pickers – date (Contd.).
<input type="month" name="month" />
Creates a date input control for specifying a particular month in a year
<input type="month" name="month" min="2011-1" max="2011-12"/>
© 2017 Wipro wipro.com confidential 28
Input type – Date pickers – week
<input type="week" name="week" min="2011-W15" max="2011-W50"/>
Allows entry and validation of a week number
© 2017 Wipro wipro.com confidential 29
Input type – Date pickers – time
<input type="time" name="Time" min="11:40" max="18:30">
Allows entry and validation of a valid time
© 2017 Wipro wipro.com confidential 30
Input type – Date pickers – datetime-local
<input type="datetime-local" name="set_date" />
It creates a combined date/time input field
The value is an ISO formatted date and time
© 2017 Wipro wipro.com confidential 31
Input type - Search
<input type="search" name="Search">
• It is used for search fields, like a site search, or Google search
• The difference between search and text type is only stylistic
• It takes the operating system’s default rounded-corners style for search
• Currently Google Chrome does not support this
© 2017 Wipro wipro.com confidential 32
Input type - Color
Color<input type="color" name="Color" required>
• Used to create a color control for selecting a color value
• The Opera browser will allow you to select a color from a color picker
In Opera 11.52 In Google chrome 14.0
© 2017 Wipro wipro.com confidential 33
Input type - Color
<input type=“color” name=“get_color” value=“#000000”>
value attribute of color
-------------------------
value = simple color
A string representing a color.
A string exactly seven characters long, consisting of the following parts, in exactly the following
order:
A "#" character.
Six characters in the range 0–9, a–f, and A–F.
Color keywords (for example, strings such as “red” or “green”) are not allowed
© 2017 Wipro wipro.com confidential 34
list attribute
The list attribute specifies a datalist for an input field
A datalist is a list of options for an input field
Url: <input type="text" list="url_list" name="url" />
<datalist id="url_list">
<option label="gmail" value="http://www.gmail.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
© 2017 Wipro wipro.com confidential 35
Example
<!DOCTYPE html>
<html>
<body>
<form action="color.jsp" method="get">
Url: <input type="text" list="url_list" name="url" />
<datalist id="url_list">
<option label="gmail" value="http://www.gmail.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
</body>
</html>
© 2017 Wipro wipro.com confidential 36
You might also like
- Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSPNo ratings yetWeb Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP98 pages
- Week 6 - Summary Notes On Tags and ExamplesNo ratings yetWeek 6 - Summary Notes On Tags and Examples4 pages
- Web Technology HTML Notes - 48769928 - 2025 - 08 - 01 - 18 - 43No ratings yetWeb Technology HTML Notes - 48769928 - 2025 - 08 - 01 - 18 - 4317 pages
- UECS2094 2194 - Topic 2 - HTML - Jan 2025No ratings yetUECS2094 2194 - Topic 2 - HTML - Jan 202586 pages
- GST Revision and Amendments For June 2022 ExamNo ratings yetGST Revision and Amendments For June 2022 Exam50 pages
- (A) Pengembangan Obat - OBAT BIOLOGI - Ana Indrayati PDFNo ratings yet(A) Pengembangan Obat - OBAT BIOLOGI - Ana Indrayati PDF105 pages
- Adopted Revised Blooms Taxonomy - CognitiveNo ratings yetAdopted Revised Blooms Taxonomy - Cognitive1 page
- Attending Behavior The Skills of ListeningNo ratings yetAttending Behavior The Skills of Listening14 pages
- Project On Parle Agro Company: Parle Products Pvt. LTDNo ratings yetProject On Parle Agro Company: Parle Products Pvt. LTD8 pages
- 2021 OTC Individual Treatment Record ITR FormNo ratings yet2021 OTC Individual Treatment Record ITR Form4 pages
- Shake It Off - Taylor Swift - LyricsTrainingNo ratings yetShake It Off - Taylor Swift - LyricsTraining3 pages
- Canada Digital Adoption Program ProviderNo ratings yetCanada Digital Adoption Program Provider7 pages
