Scribd
Upload
21 views

chap 1 HTML5

Uploaded by

Shikha Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

chap 1 HTML5

Uploaded by

Shikha Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 110

SY - BSC.

CS SEM III

WEB PROGRAMMING
UNIT 1
Chap 1 HTML5
-Ms. Pratiksha Harwalkar
Introduction to HTML5
What is HTML?
 HTML stands for HyperText Markup Language. HTML
is the basic building block of World Wide Web.
 A markup language is a computer language that
uses tags to define elements within a document. It
is human-readable, meaning markup files contain
standard words.
 HTML is the main markup language for describing
the structure of web pages.
 HTML5 is a next version of HTML. Here, you will get
some brand new features which will make HTML
much easier.
 These new introducing features make your website
layout clearer to both website designers and users.
There are some elements like <header>, <footer>,
<nav> and <article> that define the layout of a
website.
Basic Structure of an HTML
A well-structured HTML document will have below
three sections.
1. A html is the root element of an HTML page.
2. A head that identifies a document as HTML and
establishes its title.
3. A body that contains the content for a Web page.
This part holds all displayed text on a page
Fundamental Elements of HTML
 An HTML element usually consists of a start tag
and end tag, with the content inserted in between
the tags:
Syntax:
<tagname>Content goes here...</tagname>

 The HTML element is everything from the start tag


to the end tag:
1. <!DOCTYPE> element:
 HTML file optionally can start with an <!
DOCTYPE> declaration. It is highly recommended to
add this element to make user understand the
version of html your webpage is using.
 <!DOCTYPE> doesn’t require and closing tag and
also it is not case sensitive.
2. <HTML> Element :
 HTML document starts and ends with
an <HTML> tag. Once you open an <HTML> tag you
are expected to close it by calling </HTML> tag.
2. <HEAD> Element :
 This element defines certain information about an
HTML document, such as what its title is, who the
author is, and reference information about the
document, etc.
 To create a head element, start with <HEAD> tag,
then include all of the elements you want in your
head section, then end the head element with
a </HEAD> tag.
3. <TITLE> Element :
 Also known as Document Title. This tag sets a Title
that appears in Browser header and on bookmark
lists.
3. <BODY> Element :
 The real content for any HTML document occurs in
the body section, which is enclosed
between <BODY> and </BODY> tags.
 Two Categories of Body Elements There are two
basic categories of HTML elements used in the body
section:
1. Block-Level Elements
2. Text-Level Elements
1. Block level elements
 Block-level elements are used to define groups of
text for a specific role. They include tags that
position text on the page, begin new paragraphs, set
heading levels and create lists. Some commonly
used block-level elements and their tags are:
i. Paragraph: < P> and </P>
ii. Heading, level one: < H1 > and </H1 >
iii. Heading, level two: <H2> and </H2>
upto <H6> and </H6>
iv. Horizontal rule: <HR>
v. Centering: <CENTER>
2. Text level Elements
 Text-level elements are for markup bits of text,
including creating links, inserting things like images
or sounds, and changing the appearance of text.
Some commonly used text-level elements are:
i. Bold: <B> and </B>
ii. Italic: <I> and </I>
iii. Line-break: < BR>
iv. Link anchor: <A HREF = “URL”> and </A>
v. Image: <IMG SRC = “URL”>
Example : A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Explaination of the code :
 The <!DOCTYPE html> declaration defines this
document to be HTML5
 The <html> element is the root element of an HTML
page
 The <head> element contains meta information
about the document
 The <title> element specifies a title for the
document
 The <body> element contains the visible page
content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
OUTPUT:
My First Heading
My first paragraph
HTML Page Structure
• Below is a visualization of an HTML page structure:
Formatting text in html
 HTML Formatting is a process of formatting text for
better look and feel. There are many formatting tags
in HTML. These tags are used to make text bold,
italicized, or underlined.
1. Bold Text using <b>:
 If you write anything within <b>............</b>
element, is shown in bold letters.
Example :
<p>
<b>The paragraph in bold text.</b>
</p>
Output:
The paragraph in bold text.

2. Italic Text using <i> :


If you write anything within <i>............</i> element, is
shown in italic letters.
Example:
<p>
<i>The paragraph in italic text.</i>
</p>
Output:
The paragraph in italic text
3. Underlined Text using <u> :
 If you write anything within <u>.........</u>
element, is shown in underlined text.
Example:
<p>
<u>The paragraph in underlined text. </u>
</p>
Output:
The paragraph in underlined text.
4. HTML Marked formatting using <mark> :
 If you want to mark or highlight a text, you should
write the content within <mark>.........</mark>.
Example:
<h2> I want to put a <mark> Mark</mark> on your
face</h2>
Output:
I want to put a Mark on your face
5. Strike Text using <strike> :
 Anything written within
<strike>.......................</strike> element is
displayed with strikethrough. It is a thin line which
cross the statement.
Example:
<p>
<strike>The paragraph with strikethrough</strike>
</p>
Output:
The paragraph with strikethrough
6. Subscript Text <sub> :
 If you put the content within <sub>..............</sub>
element, is shown in subscript ; means it is displayed
half a character's height below the other characters.
Example:
<p> Hello <sub>The paragraph in subscript.</sub>
</p>
Output:
Hello
The paragraph in subscript
7. Superscript Text using <sup> :
 If you put the content within <sup>..............</sup>
element, is shown in superscript; means it is
displayed half a character's height above the other
characters.
Example:
<p> Hello <sup>The paragraph in superscript.</sup>
</p>
Output:
The paragraph in superscript.
Hello
8. Larger Text using <big> :
 If you want to put your font size larger than the rest
of the text then put the content within
<big>.........</big>.
 It increase one font size larger than the previous
one.
Example:
<p>Hello, <big> The paragraph in larger font. </big>
</p>
Output:
Hello, The paragraph in larger font.
9. Smaller Text using <small> :
 If you want to put your font size smaller than the rest
of the text then put the content within
<small>.........</small>tag. I
 It reduces one font size than the previous one.
Example:
<p>Hello, <small> the paragraph in smaller
font.</small></p>
Output:
Hello, the paragraph in larger font.
Summary:
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an
element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like:
attribute_name=“value”
 Following are some attributes described:
1. The href Attribute
 HTML links are defined with the Anchor <a> tag. The link
address is specified in the href attribute
 Syntax :
<a href=“URL”>link name</a>
 Example :
<a href="https://www.wikipedia.com">This is a link</a>

2. The src Attribute


 HTML images are defined with the <img> tag.
 The filename of the image source is specified in
the src attribute:
Syntax:
<img src=“image_name_with_an_extension”>
Example:
<img src="img_girl.jpg">

3. The width and height Attributes:


 Images in HTML have a set of size attributes, which
specifies the width and height of the image
 Syntax :
<img src=“image_name_with_an_extension” width =“size”
height =“size”>
 Example:
<img src="img_girl.jpg“ width=“500” height=“500”>
 The image size is specified in pixels: width="500"
means 500 pixels wide.
4. The alt Attribute:
 The alt attribute specifies an alternative text to be
used, when an image cannot be displayed.
 The value of the attribute can be read by screen
readers. This way, someone "listening" to the
webpage, e.g. a vision impaired person, can "hear"
the element.
 Syntax:
<img src=“img_name" alt=“alternative_text">
 Example:
<img src="img_girl.jpg" alt="Girl with a jacket">
5. The style Attribute:
 The style attribute is used to specify the styling of an
element, like color, font, size etc.
 Syntax:
<p style=“attribute_name:value">I am a paragraph</p>
 Example:
<p style="color:red">I am a paragraph</p>

6. The lang Attribute:


 The language of the document can be declared in
the <html> tag.
 The language is declared with the lang attribute.
Example:
<!DOCTYPE html>
<html lang="en">
<body>
.........
</body>
</html>
7. The title Attribute:
 Here, a title attribute is added to the <p> element. The
value of the title attribute will be displayed as a tooltip
when you mouse over the paragraph:
 Example:
<p title="I'm a tooltip">
This is a paragraph.
Summary
 All HTML elements can have attributes
 The title attribute provides additional "tool-tip"
information
 The href attribute provides address information
for links
 The width and height attributes provide size
information for images
 The alt attribute provides text for screen readers
Attribute Description
alt Specifies an alternative text for an image,
when the image cannot be displayed
href Specifies the URL (web address) for a link

id Specifies a unique id for an element

src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element


(displayed as a tool tip)
A. Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, Vertically aligns tags
bottom within an HTML
element.
bgcolor numeric, Places a background
hexidecimal, RGB color behind an
values element
background URL Places a background
image behind an
element
Id User Defined Names an element for
use with Cascading
Style Sheets.
class User Defined Classifies an element for use
with Cascading Style Sheets.
width Numeric Value Specifies the width of tables,
images, or table cells.
height Numeric Value Specifies the height of tables,
images, or table cells.

title User Defined "Pop-up" title of the elements.


HTML - Comments
 Comment is a piece of code which is ignored by any
web browser. It is a good practice to add comments
into your HTML code, especially in complex
documents, to indicate sections of a document, and
any other notes to anyone looking at the code.
Comments help you and others understand your
code and increases code readability.
 HTML comments are placed in between
<!-- ... --> tags.
 So, any content placed with-in <!-- ... --> tags will be
treated as comment and will be completely ignored
by the browser.
Example:
<!DOCTYPE html>
<html>
<head>
<!-- Document Header Starts -->
<title>This is document title</title>
</head>
<!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
This will produce the following result without displaying
the content given as a part of comments −

OUTPUT:
Document content goes here.....
Organizing Text in HTML
 In a Web page, the content is organized into the
different formats, such as layers, paragraphs, lines,
tables, and divisions that we have already learned.
 Organizing text refers to the proper placement of all the
HTML tags and their content in a Web page. By default,
a Web browser wraps text in a Web page and displays
the enclosed text in a single block by avoiding the line
and paragraph breaks Now, if the content of a page is
not separated by any line or paragraph breaks, it
becomes very tedious for the readers to understand
the given information.
 If text in the Web page is not arranged then the readers
will find difficulty in reading the desired information.
 To overcome this problem, you can arrange the text
in different ways, such as paragraphs, lines, and
tables. HTML provides a number of tags to arrange
text into paragraphs and tables.
 For instance, you can display the text on the Web
page as paragraphs by using the P tag, or display a
horizontal line in a Web page representing a break in
the text. HTML also allows you to change to format
of a specific text using the SPAN tag.
Links and URL’s in HTML
 HTML links are hyperlinks.
 It Defines a link to an external resource or document.
 Hyperlinks is one of the very core features of HTML, it
enables you to jump from one webpage to another.
 The very idea of World Wide Web is built around
Hyper-links. All day to day activities like Browsing,
Surfing, Downloads depends upon links.
 Any text can be transformed into a hyperlink by
encapsulating it within anchor tag <a>
 The attribute href contains the URL of the web
document, to which the clickable text links.
Note: A link does not have to be text. It can be an
image or any other HTML element.

Types of Links
 There are mainly two types of Links:
1. Header Links
2. Anchor Links

1. Hearder Links:
using <link> element within the <head> element.
2. Anchor Links:
using anchor element<a> , within <body> element
Syntax:
<a href="url"> Link_text </a>
Example:
<a href="https://www.google.com/"> Click Here </a>

Code Explaination :
 The href attribute specifies the destination address
(https://www.google.com/) of the link.
 The Link_text is the visible part (Click Here).
 Clicking on the link text will send you to the
specified address.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.google.com"
target = "_self">Click Here</a>
</body>
</html>
This will produce the result, where we can click on
the link generated to reach to the home page of
Google (in this example).

The target Attribute


 Target attribute is used to specify the location
where linked document is opened.
 Following are the possible options −
Sr.No Option & Description
1 _blank
Opens the linked document in a new window or tab.

2 _self
Opens the linked document in the same frame.

3 _parent
Opens the linked document in the parent frame. Frames
are deprecated in HTML5.

4 _top
Opens the linked document in the full body of the
window. Frames are deprecated in HTML5.
5 targetframe
Opens the linked document in a named targetframe.
Frames are deprecated in HTML5.
 Try following example to understand basic difference in few
options given for target attribute
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.google.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "https://www.google.com/" target = "_blank">Opens
in New</a> |
<a href = "https://www.google.com/" target = "_self">Opens in
Self</a> |
<a href = "https://www.google.com/" target = "_parent">Opens in
Parent</a> |
<a href "https://www.google.com/" target = "_top">Opens in
Body</a>
</body>
</html>

OUTPUT :
Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body

This will produce the following result, where you can click on
different links to understand the difference between various
options given for target attribute.
Use of Base Path
 When we link HTML documents related to the same
website, it is not required to give a complete URL for
every link.
 We can get rid of it if you use <base>tag in your
HTML document header. This tag is used to give a
base path for all the links.
 So the browser will concatenate given relative path
to this base path and will make a complete URL.
Example:
 Following example makes use of <base> tag to specify base URL and
later we can use relative path to all the links instead of giving
complete URL for every link.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://wikipedia.org/">
</head>
<body>
<p>Click following link</p>
<a href = "/wiki/Main_Page/" target = "_blank">
Wikipedia </a>
</body>
</html>
OUTPUT :
Click following link
Wikipedia

 This will produce the following result, where you can


click on the link generated Wikipedia to reach to the
Wikipedia Website.
 Now given URL <a href = "/wiki/Main_Page/" is
being considered as <a href =
“https://en.wikipedia.org/wiki/Main_Page/”
Setting Link Colors
 We can set colors of your links, active links and
visited links using link, alink and vlink attributes of
<body> tag.
Example:
• Save the following in test.html and open it in any
web browser to see
how link, alink and vlink attributes work.
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://wikipedia.org/">
</head>
<body alink = "#54A250" link = "#040404" vlink =
"#F40633">
<p>Click following link</p>
<a href = "/wiki/Main_Page/" target = “_blank”>
HTML Tutorial</a>
</body>
</html>
OUTPUT :
Click following link
HTML Tutorial

 This will produce the following result. Just check


color of the link before clicking on it, next check its
color when you activate it and when the link has
been visited.
HTML - Images
Images on a webpage
 Images on a webpage are shown using image tag
<img>
 Images are not technically inserted into an HTML
page, images are linked to HTML pages.
 The <img> tag creates a holding space for the
referenced image.
How to link an image?
 We can link any image by using <img> tag. Following is
the simple syntax to use this tag.
Syntax:
<img src = "Image URL" ... attributes-list/>

NOTE : The <img> tag is an empty tag, which means that, it


can contain only list of attributes and it has no closing tag.
Example :
 To try following example, let's keep our HTML file
test.htm and image file test.png in the same directory −
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src ="pic1.jpg" alt = "Test Image" />
</body>
</html>

 This will produce an image as an output.


Set Image Width/Height, border and align
 We can set image width and height based on your
requirement using width and height attributes. You
can specify width and height of the image in terms of
either pixels or percentage of its actual size.
 By default, image will have a border around it, you
can specify border thickness in terms of pixels using
border attribute. A thickness of 0 means, no border
around the picture.
 By default, image will align at the left side of the
page, but you can use align attribute to set it in the
center or right.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "pic1.jpg" alt = "Test Image" width =
"400" height = "300“ border=“3” align=“right”/>
</body>
</html>
Defining a Map
 An image map is a graphic image defined so that a
user can click on different areas of the image and be
linked to different destinations.
 You make an image map by defining each of the
sensitive areas in terms of their x and y coordinates.
 With each set of coordinates, you specify a Uniform
Resource Locator or Web address that will be linked
to when the user clicks on that area.
 The X and Y coordinates are expressed in pixel’s
either in a separate file called a map file or in the
same HTML file that contains the link to the image
map.
 Image Maps are of two types Client Side and Server Side.
 Client-side image map can be created using two elements
<map> and <area>.
 Here, <map> acts as container for image map, and <area>
defines specific clickable regions. A given <map> element
can contain multiple <area> element within it.
HTML Elements Used to Create Image Maps
 There are three HTML elements used to create image
maps:
1. img: specifies the location of the image to be included
in the map.
2. map: is used to create the map of clickable areas.
3. area: is used within the map element to define the
clickable areas.
Syntax:
<img alt="Your Image Map" src="maps.png"
usemap="#map_name" />
<map name="map_name">
<area attributes=“value” />
…………
</map>
Syntax Explaination:
(Explaination of <imp>, <map> and <area> tags,
Ref HTML Elements Used to Create Image Maps
)
Example:
<html>
<head>
<title>Image Map Demo</title>
</head>
<body>
<img src="rect.jpg" width="500" height="500" alt="Image Map"
usemap="#image_map">
<map name="image_map">
<area shape="rect" coords="29,76,290,175"
href="https://www.google.com" alt ="Google">
<area shape="circle" coords="188,283,94"
href="https://www.yahoo.com" alt ="Yahoo">
<area shape="poly" coords="68,92,97,91,91,144,86,144"
href="https://www.bing.com" alt="Bing">
</map>
</body>
OUTPUT of the above example will have 3 shapes
Rectangle, Circle and Polygon. When user tries to click on
those areas, it will be navigated to the URL specified in the
program.

Code Explaination:
aValue Description
Top-left, bottom- Specifies the coordinates of the top-left and
right bottom-right corner of the rectangle
(x1,y1,x2,y2) (shape="rect")

Center,radius Specifies the coordinates of the circle center and


(x,y,radius) the radius (shape="circle")

Top-left,top- Specifies the coordinates of the edges of the


right,bottom- polygon. If the first and last coordinate pairs are
right,bottom-left not the same, the browser will add the last
coordinate pair to close the polygon
(x1,y1,x2,y2,..,xn (shape="poly")
,yn)
Colors
 Colors are very important to give a good look and
feel to your website. We can specify colors on page
level using <body> tag or you can set colors for
individual tags using bgcolor attribute.
 The <body> tag has following attributes which can
be used to set different colors:
1. bgcolor: sets a color for the background of the page.
2. text: sets a color for the body text.  alink - sets a
color for active links or selected links.  link - sets a
color for linked text.
3. vlink: sets a color for visited links - that is, for linked text
that you have already clicked on.
Tables in HTML
 The HTML tables allow web authors to arrange data
like text, images, links, other tables, etc. into rows
and columns of cells.
 The HTML tables are created using the <table> tag in
which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The
elements under <td> are regular and left aligned by
default.
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for
formatting.
<col> It is used with <colgroup> element to specify column
properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td> <td>Row 1, Column
2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
OUTPUT:
• Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Table Heading
 Table heading can be defined using <th> tag. This tag
will be put to replace <td> tag, which is used to
represent actual data cell.
 Normally we will put the top row as table heading as
shown below, otherwise we can use <th> element in
any row. Headings, which are defined in <th> tag are
centered and bold by default.
Example :
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
This will produce the following result −

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes


 There are two attributes
called cellpadding and cellspacing which you will use
to adjust the white space in your table cells. The
cellspacing attribute defines space between table
cells, while cellpadding represents the distance
between cell borders and the content within a cell.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing =
"5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Colspan and Rowspan Attributes
 You will use colspan attribute if you want to merge
two or more columns into a single column. Similar
way you will use rowspan if you want to merge two
or more rows.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Table Header, Body, and Footer
 Tables can be divided into three portions − a header, a
body, and a foot. The head and foot are rather similar to
headers and footers in a word-processed document that
remain the same for every page, while the body is the main
content holder of the table.
 The three elements for separating the head, body, and foot
of a table are −
1. <thead> − to create a separate table header.
2. <tbody> − to indicate the main body of the table.
3. <tfoot> − to create a separate table footer.
 A table may contain several <tbody> elements to
indicate different pages or groups of data. But it is notable
that <thead> and <tfoot> tags should appear before
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the
table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot
of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody> </table> </body></html>
OUTPUT:
HTML Forms
 Forms are required when you want to collect
some data from the site visitor.
 For example during user registration you would
like to collect information such as name, email
address, credit card, etc. Forms allows the user
to fill in data that can be used to send data or to
receive responses to queries.
 In Real world we see forms everywhere. The
Search Engines(Google,Bing..),Social Networks
(facebook, twitter, Google+.) all make extensive
usage of Forms in one form or another.
 Forms contain special elements called controls like
inputbox, checkboxes, radio-buttons, submit
buttons, etc.
 Users generally complete a form by modifying its
controls e.g. entering text, selecting items, etc.
and submitting this form to a web server for
processing.
 The <form> tag is used to create an HTML form.
The HTML <form> tag is used to create an HTML form
and it has following

SYNTAX −
<form action = "Script URL" method = "GET|POST">
<!--form elements like input, textarea etc. -->
</form>
Interactive Form Controls
Following are different types of controls that you can
use in your form:
The <input> Element
 The <input> element is the most important form
element.
 The <input> element can be displayed in several
ways, depending on the type attribute.
Different types of Input control are as following :
Type Description
<input type="text"> Defines a one-line text input
field (also called as single-line
text input control)
<input type="radio"> Defines a radio button (for
selecting one of many choices)
<input type="submit"> Defines a submit button (for
submitting the form)

<input type=“password”> Defines a password input field.


(also called as single-line text
input control)
1.Text Input:
<input type="text"> defines a one-line input field for text
input:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<form>
First name:<br>
<input type="text" name="firstname"> <br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not
visible.</p>
<p>Also note that the default width of a text
input field is 20 characters.</p>
</body>
</html>
OUTPUT:
Text Input
First name:

Last name:

Note that the form itself is not visible.


Also note that the default width of a text input field is 20
characters.
2. Radio Button Input
 <input type="radio"> defines a radio button.
 Radio buttons let a user select ONE of a limited number
of choices:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<input type="radio" name="gender" value="male"
checked>
Male<br>
<input type="radio" name="gender"
value="female">
Female<br>
<input type="radio" name="gender“
value="other">
Other <br>
</form>
</body>
</html>
OUTPUT:
Radio Buttons
• Male
o Female
3. The Submit Button :
 <input type="submit"> defines a button
for submitting the form data to a form-handler.
 The form-handler is typically a server page with a
script for processing input data.
 The form-handler is specified in the
form's action attribute.
 Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/div.html">
First name:<br>
<input type="text" name="firstname" value="Mickey"> <br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a
page called "/div.html".</p>
</body>
</html>
OUTPUT:
HTML Forms
First name:
Mikey
Last name:
Mouse
Submit
If you click the "Submit" button, the form-data will be
sent to a page called "/action_page.php".
4. Password input controls
 This is also a single-line text input but it masks the
character as soon as a user enters it.
 It is also created using HTML <input>tag but type
attribute is set to password.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form action=“test.html”>
User ID : <input type = "text" name = "user_id" /> <br>
Password : <input type = "password" name =
"password" /> <br>
<input type=“submit” value=“Submit”>
</form>
</body>
</html>
OUTPUT:
User ID :
Password :

Submit
The Action Attribute
 The action attribute defines the action to be
performed when the form is submitted.
 Normally, the form data is sent to a web page on the
server when the user clicks on the submit button.
 In the example above, the form data is sent to a page
on the server called "/div.html".
 If the action attribute is omitted, the action is set to the
current page.
The Method Attribute
 The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the form
data:
<form action="/action_page.php" method="get">
OR
<form action="/action_page.php" method="post">
When to Use GET?
 The default method when submitting form data is
GET.
 However, when GET is used, the submitted form data
will be visible in the page address field:
e.g
/action_page.php?firstname=Mickey&lastname=Mouse

When to Use POST?


 Always use POST if the form data contains sensitive or
personal information. The POST method does not
display the submitted form data in the page address
field.
Working with Multimedia
 Multimedia comes in many different formats. It can be
almost anything you can hear or see.
 Examples: Images, music, sound, videos, records, films,
animations, and more.
 Web pages often contain multimedia elements of
different types and formats.
 With the audio element, you can add audio directly to a
web page. The audio element can be controlled with
HTML or Javascript and styled with CSS.
 HTML5 allows you to embed the video element directly
onto a web page. Like the audio element, the video
element can be controlled with HTML or Javascript and
styled with CSS.
Inserting audio and video
Audio :
 HTML5 new specifications enables users to have a far
more control over audio on web pages.
 A feature which earlier required support from Adobe
Flash.
 It allows users and developers to control features like
start, stop , Volume control etc.  The < audio > element
enables you to embed(or add) audio files on Webpages.
 Currently there are three supported file format for
HTML 5 audio tag.
• mp3
• wav
• ogg
Syntax:-
<audio>
<source src="Audio_Source.mp3"
type=“audio/mpeg>
<source src =“Audio_Source.ogg”
type=“audio/ogg>
</audio>
Syntax Explanation:
 The <audio> element specifies a standard way to
embed a audio in a web page.
 The <source> element allows you to specify
alternative video files which the browser may
choose from.
Attributes of HTML <Audio> tag:
Attribute Description
controls It defines the audio controls which is
displayed with play/pause buttons.

autoplay It specifies that the audio will start playing


as soon as it is ready.

loop It specifies that the audio file will start over


again, every time when it is completed.

muted It is used to mute the audio output.

preload It specifies the author view to upload audio


file when the page loads.

src It specifies the source URL of the audio file.


Example:
<!DOCTYPE html>
<html>
<body>
---Play the audio--- <br><br>
<audio controls loop autoplay>
<source src="m.mp3"
type="audio/mpeg" height="40" width="40">
</audio>
</body>
</html>
Video
 Before HTML5, a video could only be played in a
browser with a plug-in (like flash).
 The HTML5 <video> element specifies a standard
way to embed a video in a web page.
 The <video> element enables you to embed(or add)
video files on Webpages.
Syntax:
<video src=”video.mp4” controls>
</video>
Example:
<!DOCTYPE html>
<html>
<body>
--Play the Video-----<br><br>
<video width="320" height="240" controls>
<source src="ogg1.ogg" type="video/ogg">
<source src="vid.mp4" type="video/mp4">
</video>
</body>
</html>
 The controls attribute adds video controls, like play,
pause, and volume.
 It is a good idea to always
include width and height attributes. If height and
width are not set, the page might flicker while the
video loads.
 The <source> element allows you to specify
alternative video files which the browser may choose
from. The browser will use the first recognized
format.
HTML Video-Brower Support:
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

HTML Audio- Browser Support:


Browser MP3 WAV OGG
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

You might also like