Module 1

Web browsers
• A web browser is a type of software that allows you to find
and view websites on the Internet.
• There are many different web browsers, but some of the most
common ones include Google Chrome, Safari, and Mozilla
Firefox.
Web servers
Web pages are a collection of data, including images, text files, hyperlinks,
database files all located on some computer (also known as server space) on
the Internet.
• A web server is dedicated software that runs on the server-side.
When any user requests their web browser to run any web page,
the webserver places all the data materials together into an organized web
page and forwards them back to the web browser with the help of the Internet.
Therefore, we can conclude that: -
“A web server is a dedicated computer responsible for running websites
sitting out on those computers somewhere on the Internet. They are
specialized programs that circulate web pages as summoned by the user. The
primary objective of
any web server is to collect, process and provide web pages to the users.”
Web pages can contain any of the following list:
 text that is formatted, colored, and structured •
 still images in any graphics format
sound –
 typically as WAV or AU files
 MIDI files - CD quality audio stored in MPEG compressed format
 moving images
animated GIFs –
 QuickTime movies made using Apple technology .
 MPEG compressed video –
Shockwave movies created using Director from Macromedia
• files for download using file transfer protocol
• Java applets

How, then, does the browser recognize the type of data it is

receiving, and having recognized it how does it process the data
correctly?
The answer is MIME.
Multipurpose Internet Mail
Extensions
• MIME (Multipurpose Internet Mail Extensions) is an extension of the original
Simple Mail Transport Protocol (SMTP) email protocol. It lets users exchange
different kinds of data files, including audio, video, images and application
programs, over email.
MIME simplifies the process.
• The formatted file is attached to the e-mail and when the server transmits
the message it also sends information about the type of the attached file.
The receiving software uses this type information to handle the
attachment.
• For instance if the attachment was compressed using GNU-zip, the mail
program would launch GNU-zip to uncompress the message.
• Web browsers do exactly the same thing.
• When they get a MIME-compliant file they decode the MIME
information and use it either to process the file themselves or to launch
an external application to process the data for them.
Helper Applications
• The actual Web browser can process only a limited range of data
types. It can display images in GIF, JPG, PNG, or XBM formats,
cannot process sound, and has no compression utilities.
• Therefore to process almost any multimedia data the browser needs
some help.
• This is provided by helper applications and plug-ins. Helper
applications are ordinary programs such as PKZIP or the Microsoft
Windows media player which the browser can call upon for help.
• Plug-ins are small applications which handle specific data types and
which may either run as stand-alone applications or embedded within
the browser.
HTTP
• HTTP stands for HyperText Transfer Protocol.
• It is a protocol used to access the data on the World
Wide Web (www).
• The HTTP protocol can be used to transfer the data in
the form of plain text, hypertext, audio, video, and so
on.
• This protocol is known as HyperText Transfer Protocol
because of its efficiency that allows us to use in a
hypertext environment where there are rapid jumps
from one document to another document
Uniform Resource Locator (URL)

• A client that wants to access the document in an

internet needs an address and to facilitate the access of
documents, the HTTP uses the concept of Uniform
Resource Locator (URL).
• The URL defines four parts: method, host computer,
port, and path.
• Method: The method is the protocol used to retrieve the
document from a server. For example, HTTP.
• Host: The host is the computer where the information is
stored, and the computer is given an alias name
• Port: The URL can also contain the port number of the
server, but it's an optional field.
• If the port number is included, then it must come
between the host and path and it should be separated
from the host by a colon.
• Path: Path is the pathname of the file where the
information is stored. The path itself contain slashes that
separate the directories from the subdirectories and files.
HTML5 − OVERVIEW
• HTML5 is a standard for structuring and presenting content on the World
Wide Web.
• It provides new elements , such as AUDIO, VIDEO and CANVAS.
• It includes JavaScript APIs that allow us to perform drawing graphics on the
web page, storing data offline, and dragging and dropping content.
• HTML5 is an advanced version of HTML.
• It contains all the features of HTML along with new tags
like <video> , <audio> and <canvas>.
• There are also tags for including semantics, and these tags
are <article>, <header>, <footer> etc.
• HTML5 improves the HTML to support the latest multimedia and new
features, including graphics, music, etc.
Browser Support:
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox,
and Opera all support many HTML5 features and Internet Explorer 9.0
will also have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and
Android phones all have excellent support for HTML5.
Exploring New features of HTML5
• New elements • New selectors

• New attributes • Client side storage

• Link relations • Web sockets

• Microdata • Web workers
• Web forms 2.0 • Notifications
• Multimedia • Drag and drop API

• 2D and 3D drawing support. • Geolocation

• Offline web applications • Modernizr

• CSS Enhancements
Syntax and structure
HTML5 comes with a lot of flexibility and it supports the following
features
• Uppercase tag names.
• Quotes are optional for attributes.
• Attribute values are optional.
• Closing empty elements are optional.
• An HTML document is created by using elements and attributes and has
.html extension.
• The first element of HTML5 is DOCTYPE which specifies the DTD
definition .
• A DTD is a Document Type Definition.
• A DTD defines the structure and the legal elements and attributes of an
XML document.
• The browser checks the code of the document according to the rules in
the <!DOCTYPE> declaration.

<!DOCTYPE html>
The above syntax is case-insensitive.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>

</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
• Elements provide information to a browser specifying how to display the HTML
document.
• HTML5 elements are marked up using start tags and end tags.
• Tags are delimited using angle brackets with the tag name in between.
• The difference between start tags and end tags is that the latter includes a slash
before the tag name.
Syntax:
<element-name attribute-name=“attribute value”>content</element-name>
Example :
<p>...</p>
Elements and attributes are not case sensitive.
HTML tags, elements , attributes are collectively known as HTML
Markup.
On the basis of opening and closing tags, elements are divided into
following two categories:
Container elements or tags
Empty elements or tags.
Container tags
• Container tags are generally divided into three parts, i.e., opening tag,
content(which will display on the browser), and closing tag.
• In the content part, they can also contain some other tags. These opening and
closing tags are used in pairs which are start tag and end tag,
• If you forget to close the container tag, the browser applies the effect of the
opening tag until the end of the page.

Syntax:
<tag_name> …</tag_name>
 Empty Tags
• The tags that do not contain any closing tags are known as empty tags. Empty
tags contain only the opening tag but they perform some action in the webpage.

<tag_name>

Ex:Some commonly used empty tags are:

1.<br>: Inserts a line break in a webpage wherever needed.
2.<hr>: Inserts a horizontal line wherever needed in the webpage.
3.<img>: This tag is used to display the images on the webpage which were given
in the src attribute of the tag.
4.<input>: This is mainly used with forms to take the input from the user and we
can also define the type of the input.
1.<link>: When we store our CSS in an external file this can be used to
link external files and documents to the webpage and it is mainly used
to link CSS files.
2.<meta>: Contains all metadata of the webpage. Metadata is the data
about data and is described in the head tag.
3.<source>: When an external media source is needed to be included in
the webpage. source tag is used to insert any media source like audio,
video etc… in our webpage.
Understanding the elements
• Root
• Metadata
• Section
• Heading
• Flow
• Phrasing
• Embedded
• Interactive
Root elements
• This represent the main or the starting element that should be
present in all html document.
• HTML element is the first element. This will specify the document
type to the browser.
Metadata Elements
• Metadata elements are used to set the presentation or behavior of the remaining
document.
• It is also used to set the relationship of a document with other documents.
• Some of them are
Title
 base
Link
Command
Meta
Noscript
Script
Style
TITLE element

• This element contains the title of the HTML document , which appears in the
title bar of the web browsers.
• Each HEAD element should contain a TITLE element .
• Better to keep the title text short because some browsers may find it difficult to
handle titles longer than 256 characters.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Elements Reference</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Base element
• Base element is used to specify a default URL and target for all the
links in an HTML document.
• You can set a base URL for all the links once at the top of the
document by using the base element.
• This element appears within the HEAD element of the document and
should be used as the first element in the HEAD element .
• This enables the other elements in the head section to use the
information of the BASE element .
<!DOCTYPE HTML>
<HTML>
<HEAD>
<BASE href=“url” target=“value”/>
</HEAD>
</HTML>
LINK element
• Link element is used to link an HTML document to other html
document .
<head>
<LINK href=“file_name.html” rel=“stylesheet”>
</head>
Meta element
• Meta element is used to provide information about HTML document
such as page description and keywords.
• It appears inside head element and has following attributes.
<head>
<META name=“keywords” contents=“some keyword”/>
</head>
COMMAND element
• It is used to execute command when an event is fired by a form
control, such as radio button or checkbox.
• We can use it either in context menu or toolbar.
<MENU label=“cars”>
<COMMAND type=“radio” radiogroup=“cars” label=“ferrari”>
<COMMAND type=“radio” radiogroup=“cars” label=“lamborgini”>
</MENU>
SCRIPT AND NOSCRIPT element
• This element is used to display the alternate content on the web
browser that either does not support javascript or has javascript
disabled.
<SCRIPT type=“text/javascript”>
document.write(“have a good day”)
</SCRIPT>
<NOSCRIPT>
javascript is disabled
</NOSCRIPT>
STYLE element
• Style element is used to declare the stylesheets within the document.
• Generally style is placed inside the HEAD element but it can be placed
inside the body with the help of scoped attribute of STYLE element.
<HEAD>
<STYLE type=“text/css”>
style code here
</STYLE>
</HEAD>
SECTION elements
• BODY
• SECTION
• NAV
• ARTICLE
• ASIDE
• HEADER
• FOOTER
• ADDRESS
BODY element
It contains main content of the document.

SECTION element
It is used to represent the generic section of an HTML document or
application.
This element will group the related contents .
It contains other semantic elements such as header and footer.

<SECTION>
< H1>HTML5</H1>
<P>EXAMPLE </P>
</SECTION>
NAV element
• It is newly introduced in HTML5 and is used to navigate from one page to
another.
• It displays group of links of html document .
<NAV>
<H1>NAVIGATION</H1>
<UL>
<LI><A href=“articles.html”>article</A>
</UL>
</NAV>
ARTICLE element
• It is newly introduced and is used to represent the section that
contains the information, such as its title and date of its creation.

<ARTICLE>
<HEADER>
SOME HEADING CONTENT
</HEADER>
<P>SOME ARTICLE CONTENT</P>
</ARTICLE
ASIDE element
• This element is newly introduced and allows us to create a section that
is used to display information about the content of other elements such
as time and date ,current news, and weather report.
• This can also be used for inserting typographical effects in a document
such as sidebars for advertisements, links, notes, and tips.
<BODY>
<HEADER>
<H1>ARTICLE heading</H1>
<P>ARTICLE content</P>
<ASIDE>
ENTER SOME RELATED DATA
</ASIDE>
</BODY>
HEADER element
• It is newly introduced and is used to provide introductory content to
the HTML page.
• HEADER element can contain headings , paragraphs, links and other
content.
<!DOCTYPE html>
<html>
<body>

<article>
<header>
<h1>VCET</h1>
<p>Department of MCA</p>
<p>Some additional information here</p>
</header>
</article>

</body>
</html>
FOOTER element
• It is used to represent footer which contains various types of information such as
links and copyright data related to a document or a section of the document.
<!DOCTYPE html>
<html>
<body>
<h1>The footer element</h1>
<footer>
<p>Author: Hege Refsnes<br>
<a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</body>
</html>
ADDRESS ELEMENT
• This element is defined at the header or footer of the HTML page and
is used to display contact information for a document or part of
document.
• Such information may include names of documents owners,
maintainers , email address for feedback etc.
• Content of this element appears in italics on the web browser.
<!DOCTYPE html>
<html>
<body>

<h1>The address element</h1>

<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>
HEADING elements
• This element are used to provide different heading levels in the HTML
documents.
• These elements are used to create headlines of text.
• Heading element is defined as <Hn>, where ranges from 1 to 6.
• We can also group all heading elements with help of the HGROUP
element, which has been introduced in HTML5.
<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>
Data types
• Character data type: includes single alphanumeric text which includes
letters, numbers [0-9], symbols, space and punctuations.
• Text data type: stores a string with maximum length.
• Name data type: refers to a name given to any particular
datum( singular form of data), function, or unit of a program in a
programming language.
• Number data type: refers to data type that can store a number with
an accuracy of 15 digits . Arithmetic operations can be performed
with number data types.
Language codes
English En
Hindi Hi
Greek El
German De
irish Ga
Color names
• HTML used to recognize 16 color names
• ("black", "white", "gray", "silver", "maroon", "red",
"purple", "fushsia", "green", "lime", "olive", "yellow",
"navy", "blue", "teal", and "aqua"),
• but new browsers can recognize 147 CSS3 color names.
Understanding Horizontal Rules
• Horizontal rules are used to draw horizontal lines across the browser
window.
• It is used to divide |an HTML page into different horizontal sections.
Horizontal rules are required when you need to display different types
of content in the same HTML page in a distinct manner.
• The HR element is used to represent the horizontal rule. It is an
empty tag; therefore, it does not contain any content in it.
Understanding line breaks
• When we need a break after each line of the content, we use this element.
• Line breaks are not used to create another paragraph.
• They are used to break a continuing line.
• BR element is used to define a line break in HTML document .
Understanding Paragraph
Understanding citations,
quotations and definitions
In HTML, a citation is used to display text in a format that is different
from the normal text.
The text embedded within the citation element is normally displayed in
the italic form.
A citation normally required to quote statements or remarks of an
author.
The citation element is defined by an opening <CITE> tag and a closing
</CITE> tag
• Quotation tag is used to quote certain text within quotation marks
• The quotation tag starts with an <Q> and ends with </Q>.
Understanding comments
• Comment tag is used to insert comment in the code of your
document.
• In html anything written between <!.....>tag is taken as comment.
Formatting text
• Html formatting elements are grouped together in two categories.
• ->Physical style
• ->Logical style
In physical style we have
• B element : Displays text in BOLD
• I element :Displays text in italics
• Small element: Displays text in small font size.
• Sub element : displays as subscript
• Sup element : displays as superscript.
Attributes used:
Logical style elements include
1. ABBR – Displays abbreviation on web page
2. CODE – refers to program code
3. SAMP – displays sample program output on web page
4. KDB- refers to keyboard keys.
5. EM – Emphasizes text
6. STRONG – Emphasizes text by increasing boldness.
7. Q – displays short quotation on web page
8. BLOCKQUOTE- displays long quotations on web page
9. VAR- represents a variable
10. BDO- changes the direction of text
Attributes
• The datetime attribute is used to indicate the time of insertion or
deletion .
Format of this attribute:
• YYYY-MM-DDThh:mm:ssTZD
Defining MARK element
• It is used to mark or highlight the text in HTML document.
• Style attribute is used to set color with which we wanted to highlight
the text.
• Font style and size can also be changed using style attribute.
• Without style attribute , no highlighted text is displayed.
Defining STRONG element
• It is used to emphasize important text.
• This would increase font weight and makes the text appear as bold.
CODE element
• It is used to represent computer code in the document.
SMALL element
• This element is used to display text as side comment or in small print
1)Html used B element to display text in bold format.
<b>…..</b>
2)Html uses I element to display text in italic form.
<i>……</i>
3)Html uses SUB element called as subscripted element.
_……
4)Html uses SUP element as superscript element.
^…..
5)ABBR element is called abbreviation element. It is a shorthand form
of word or phrase.
<abbr>……</abbr>
Arranging the text
• Allowing the word break
• Defining the preformatted text
• Defining DIV element
• Defining the SPAN element
• Formatting text in tables
• Defining ruby text
• HTML uses WBR element to insert word breaks between words or
paragraphs in an document.
• In html we use preformatted element, PRE to instruct a browser that
enclosed text is formatted text and should not be formatted again.
This is commonly used when formatting of the content predefined
such as code snippets and poems.
<!DOCTYPE html>
<html>
<body>

<h1>The pre element</h1>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

</body>
</html>
Defining DIV element.
• This element is used to divide a web page into different divisions or
sections .
• It works as container for other html elements.
• Using DIV we can group html elements in sections and apply css on
them.
• It is a block level element and cannot be used inside P element.
<!DOCTYPE HTML>
<html>
<head>
<title>DIV</title>
<body>
<div style="background-color:red;text-align:left">
<p><b>hello</b></p>
</div>
<div style="border:2px solid black">
<div style="background-color:yellow">
<p><b>navigagtion section</b></p></div>
</div>
</body>
</html>
Span element
• The HTML span element is a generic inline
container for inline elements and content.
• It is used to group elements for styling purposes (by
using the class or id attributes.
Syntax:
<span class="">Some Text</span>
<!DOCTYPE html>
<html>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<p>GeeksforGeeks is a
<span style="color:red; font-weight:bolder“>computer
science</span> portal for
<span style="background-color: lightgreen;">geeks</span>.
</p>
</body>
</html>
Creating ruby text
• A ruby annotation is a small extra text, attached to the main text to indicate the
pronunciation or meaning of the corresponding characters.
• This kind of annotation is often used in Japanese publications.

• Use <ruby> together with <rt> and <rp>:

• The <ruby> element consists of one or more characters that needs an
explanation/pronunciation, and an <rt> element that gives that information, and an
optional <rp> element that defines what to show for browsers that do not support
ruby annotations.
<!doctype html>
<html>
<head>
<title>RUBY element</title>
</head>
<body>
<ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
</body>
</html>
CREATING LIST
• HTML Lists are used to specify lists of information. All
lists may contain one or more list elements. There are
three different types of HTML lists:
1.Ordered List or Numbered List (ol)
2.Unordered List or Bulleted List (ul)
3.Description List or Definition List (dl)
 HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
<!DOCTYPE>
<html>
<body>
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
</body>
</html>
HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with
bullets. It is also known as bulleted list also.
The Unordered list starts with <ul> tag and list items
start with the <li> tag.
We can change the bullet style by using list-style-type
attribute. It takes values like circle, disc, square, none
<!DOCTYPE>
<html>
<body>
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
</body>
</html>
HTML Description List or Definition
List
• HTML Description list is also a list style which is
supported by HTML and XHTML. It is also known as
definition list where entries are listed like a dictionary or
encyclopedia.
• The HTML definition list contains following three tags:
1.<dl> tag defines the start of the list.
2.<dt> tag defines a term.
3.<dd> tag defines the term definition (description).
Working with links and URLs
• In html we can create hyperlink by using the anchor element(A).
• Hyperlink will redirect the users to another html page, image or file.
• A element uses the href attribute to specify the target resource or
document that we want to open.

• <a href=“vcetputtur.ac.in>VCET</a>
Target attribute
• A element uses the target attribute to specify the window where you
want to open a document when hyperlink is clicked.
<!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>
<body>
<a id=“top”></a>
<p>Click on the following link</p>
<a href = " demo.html” target=“_blank”>VCET</a>
</body>

</html>
 The id attribute
• A element uses id attribute to create a fragment identifier within a
document .
• This will specify particular location within document.
• We can navigate to different locations using the id attribute.
• This will take character string as a value which must be unique value.
Example:
<a id=“top”></a> defines a location within document and then
<a href=“#top”>go to top</a> provides reference to that location using
hyperlink containing fragment identifier.
Linking to Mail System
Mail system allow us to send and receive number od mails.
We use href attribute of A element to set email address of the
recipient.
Syntax:
<a href=“mailto:[email protected]”>Email us</a>
Exploring link relations
• Html provides link element to link a web page with an external
resource or document, such as css file or xml file.
• The rel attribute of the link element is used to create relation with
other resources.
• Example:
<body>
<LINK rel=“stylesheet” href=“mystylesheet.cc”/>
</body>
Creating tables
Describing the TABLE Element
syntax:

<TABLE>
the table format
</table>
Other elements of table elements are:
CAPTION
COLGROUP
COL
TBODY
THEAD
TFOOT
TR
TD
TH
The Caption Element
• This element is used to create caption of table .
• A table should have only one caption element and it should be placed
after the starting tag of table element.
• Syntax:
<table>
<caption> good morning</caption>
</table>
COLGROUP element
• This element is used to specify the property like font color, background color
, border, for a group of columns in a table.
• This element should be placed after the CAPTION element and before the
TBODY, THEAD, TFOOT, TR elements.
• Span attribute of COLGROUP element to specify the number of columns on
which we want to apply properties.

<TABLE>
<CAPTION>
GOOD MORNING
</CAPTION>
<COLGROUP SPAN=“3” STYLE=“COLOR:BLUE”>
</COLGROUP>
</TABLE>
The COL element
• COL element is used to define the properties of each column of a
table separately.
• Each col element in colgroup represents a column of the table.
<table>
<col style=“background-color:green”/>
<col style=“background-color:blue”/>
</table>
TBODY element

• The <tbody> tag is used to group the body content in an HTML table.
• The <tbody> element is used in conjunction with the <thead> and <tfoot>
elements to specify each part of a table (body, header, footer).

<TABLE>
<THEAD>…</THEAD>
<TFOOT>….</TFOOT>
<TBODY>
<TR>
<TD>
</TR>
</TBODY>
</TABLE>
Spanning of rows and columns
• Process of combining one or more adjacent cells is know as spanning.
• We can span cells either vertically or horizontally.
• Vertical spanning of cells is called row spanning
• Horizontal spanning of cells is called column spanning.
Inserting images in the web
page
• Images can be inserted in a web page using IMG element.

<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<img src=“C:\Users\DELL\Desktop\VCET_MCA\2022-23\Web Technology\imags.jpeg”/>
</body>
</html>
Using images in table
<!DOCTYPE HTML>
<html>
<head>
<title>TABLE</title>
</head>
<body>
<table border="2">
<caption> good morning everyone</caption>
<tr>
<td><img src="logo.png"/></td>
<td><img src="logo.png"/></td>
</tr>
</table>
</body>
</html>
Using image Maps
• Image map represents an image, which contains sections that work as
hyperlinks.
• When an hyperlink is created on the image, we can open web page
specified by the hyperlink.
Syntax:
• <map name=“name of map”>
• <Area shape=“shape name” cords=“coordinate position” href=“link
name”/>
• </map>
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about
the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.html">
</map>

</body>
Creating advanced tables
To create advanced table, we need elements like
• THEAD
• TFOOT
• TBODY

The THEAD and HFOOT elements occur only once and TBODY can
occur many times in the table for grouping the rows.
Introducing Canvas
• Canvas element is newly introduced element in HTML5 to display 2D
shapes and graphics on a web page.
• This element allows us to use graphics, games and other visuals in
web page.
• We can also make transformations like rotate or blur on an image.
• Height and width are the attributes of CANVAS element.
<canvas id=“canvas” width=“50” height=“100”>
</canvas>
Working with Forms
• Html enables us to add a form in a web page by using FORM element.
Attributes of the FORM element.
Exploring types of Form
elements
• Form consists of various controls such as text box, drop –down list,
checkbox, radio button that enable user to enter information.
• We can create those controls using INPUT element.
• To do this we need to set the TYPE attribute of input element to the
name of the control.
• Ex: <input type =“text”> creates a control of text box type.
Types of INPUT element
• Text and search
• Tel
• url
• Email
• Password
• Datetime-local
• Datetime , date , month , week and time
• Number and range
• File
• Hidden
• Checkbox
• Radio
• Submit
• reset
Describing text and search type
• <input type=“text”>
Other attributes of INPUT element that features the text box are:
Name : provides name to the textbox.
Size : size of the textbox
Maxlength: maximum number of characters the user can enter
Value: default text that want to be displayed in the textbox when form
is loaded.
Describing file type
Attributes
• Size
• Maxlength
• Accept : specifies the type of files that can be submitted through a file
upload.
Hidden type
• Hidden is used to pass variables and values from on form to another,
without forcing the user to re-enter.
• It is not displayed on the browser.
Attributes
Name
Value: specifies the value that is to be displayed by default in hidden
field.
Describing the CHECKBOX type
• It is used to select or deselect one or more items from a given set of
items.
Attributes
Name:
<input type=“checkbox” name =“fruits”>
Value:
<input type=“checkbox” name =“fruits” value=“mango”>
Checked:
<input type=“checkbox” name =“fruits” value=“mango” checked=“yes”>
Describing the radio type
Radio button allows us to create only one item
Name:
<input type=“radio” name =“fruits”>
Value:
<input type=“radio” name =“fruits” value=“mango”>
Checked:
<input type=“radio” name =“fruits” value=“mango” checked=“yes”>
Describing submit type
• When the user click the submit button the , the form is sent to the
address specified by the URL.
Attributes are
• Name
• Value
<input type=“submit” name=“submit” value=“submit”>
Exploring the button type
• Button element is used to add a button to the form.
• It is used to submit or reset the details of the form.
• A button control can be placed on the form using INPUT element, but
the difference is that we do not have scope to change the appearance
of the button control , except changing text on the button.
• Button tags are created using BUTTON element.
• We can add text, image or any multimedia embedded between
opening and closing tags of button element.
• Button element provides type attribute that allows us to create 3
kinds of button controls : submit, reset and normal button
Exploring multiple choice
Elements
• It refers to elements that offer multiple choice to the user in a web
page such as checkbox and radio buttons
• Multiple choice elements such as SELECT, OPTION and OPTGROUP are
used to manage choices.
The select Element
• It allows the user to select single item from number of options.

Attributes Description
Disabled Implies that the drop down list is disabled
Name Name of the drop down list
Size Refers to number of visible option shown in the drop down list
Autofocus Allows button control to get focus as soon the page loads
Form Refers to the Id of the form
multiple Specifies that multiple options can be selected from drop down
list
Option element
• This element refers to the options written within SELECT element.

Attributes Description
Label Heading of several groups
Disabled Disables the OPTION element
Selected Refers to option that is to be displayed as default
value Refers to the value that is sent to the server
OPTGROUP Element
• This element is used to create nested and cascading dropdown list.
• Here related items are grouped under specific headings
Attributes Description
Label Refers to the heading of several groups in the cascading menu
Disabled Disables the OPTGROUP element
Exploring the TEXTAREA
• Text area allows us to enter more than single line as in text box
element.
• We can enter multiple lines of information.
LABEL Elements
• Some controls like textbox, checkbox and radio buttons need
description and it can be provided by adding Label on the form using
LABEL element.

Attributes Description
For Associates the label with specific control.
Value of this attribute must match the id
attribute of its associated control
form Id of the form
Exploring FIELDSET and
LEGEND Element
• Fieldset element is used to group related controls in single box.
• Legend element is used to provide caption for the fieldset element.

Attributes Description
Disabled Disables text area.
Name Refer to name of the text area
form Refers to id of form
Displaying the DATALIST
Element
• It is used to display list of predefined options that the user may want
to select as input.
• This element enables auto complete feature on the forms which
means that when user starts typing in text box, list of predefined
words is dropped down to choose.
• This element is used with INPUT element in which list attribute is
specified.
<input type=“text” list=“name”>
<datalist id=“name”>
<option value=“A”>
<option value=“b”>
<option value=“c”>
</datalist>
KEYGEN Element
• Keygen element is used to generate key pair.
• To secure the content of the form, keygen element is used.
OUTPUT Element
• It is used to display the result of calculation which can be written in
JavaScript
<Form>
<output name=“result”>
</output>
</form>

Attirbutes :
Form : used to specify the name of form in which output is displayed.
Name : used to specify the name of current element
for : is used to specify name of control in which result is displayed .
Describing the progress
element
• This element is used to display the progress of the particular task that
is being performed.
• This element is used in conjuction with javascript .
It has two attributes:
Value: specifies the value of Progress element .
Max: specifies the maximum value of progress element.
<PROGRESS value=“100” max=“500”> </progress>
Describing the METER element
• The <meter> tag defines a scalar measurement within a known range,
or a fractional value.
<meter min=“50” max=“165”>72</meter>
<meter>200 from 500</meter>
Submitting the form
Action Attribute :
It provides the URL of the program in server which receives the
information from the form and processes it.
<FORM action =“……………”>
Method attribute:
It specifies method by which information in the form is sent to the
server for processing.
Two values of method attribute are get and post.
The Get Method
• Get method is the default method for browsers to submit the
information.
• Here the browser connects to the server, which processes the form
and sends information in a single step.
• The data is appended to the forms action URL separated by question
mark.
• <FORM method=get action=“………….”>
Post method
<FORM method=post action=“………………”>
 Describing multimedia elements
Html5 has new introduced 2 multimedia elements such as AUDIO AND VIDEO for
displaying the audio and video stream on web page.

Attributes of Audio element

• ->autoplay: plays the audio files as soon as webpage.
• ->controls: displays controls on web page, such as play and pause Buttons
• ->Loop : replay audio files.
• ->Preload: specifies whether the audio file is preloaded on web page or not.
• ->src: provides location of audio file

Audio element in HTML5 supports only three audio formats: .oog, .mp3, and .wav.
• We can use VIDEO element to display a video file on web page.
• It supports the .ogv and .mp4 file formats.
Attributes are
->audio : controls default state of video’s audio channel.
->autoplay: plays the audio file as soon as page loads.
->controls : displays controls on web page such as play and pause.
->height :
->loop: replays the video file.
->Preload: specifies whether the video file is preloaded on web page or
not.
->Poster : provides image to be displayed when video file is not available.
->Src: provides location of video file.
->Width:
<video src=“video.ogv” autoplay=“true” loop=“3” controls> </video>
Multimedia File using EMBED
Element.
• Html allows you to embed plugins in a web page using EMBED
element.
• This element lets you to embed multimedia in a web page andplay it
while opening page.
• Embed element uses three mandatory attributes , namely src, height ,
and width.
<EMBED src=“music.mp3” width=“600” height=“100”> </embed>
Defining a multimedia file using
object
• This element is used to include objects, such as images, video , audios,
java applets, ActiveX controls, PDF, and flash objects in a web page.
• Object element initializes the objects by passing parameters to the
objects which can be done using PARAM elements.
<object data=“movie.avi” type=“video/quicktime” id=“video” width=“20o”
height=“100”>
<param name=“borderstyle” value =“1”/>
<param name=“autoplay” value=“true”/>
</object>
Exploring Figure and figcaption
element
• It is used to group various diagrams, images, illustrations and code
snippets.
• We can define various elements such as IMG, CODE AND PRE inside
Figure element.
• Figcaption is used inside Figure element to provide the caption to the
content.
<!DOCTYPE html>
<html>
<body>

<h1>The figure and figcaption element</h1>

<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

</body>
</html>
FRAMES
• HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document.
• A collection of frames in the browser window is known as a frameset.
• The window is divided into frames in a similar way the tables are
organized: into rows and columns.
• To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines, how to divide the window into frames.
• The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames.
• Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame.