Scribd
Upload
37 views63 pages

WT Unit - 2

Uploaded by

sankalpplays
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views63 pages

WT Unit - 2

Uploaded by

sankalpplays
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 63

UNIT - 2 COMPLETE

What is HTML:
HTML is an acronym which stands for ​Hyper Text Markup Language​ which is used
for creating web pages and web applications.

Static HTML, or HTML, is a collection of Tags.​ Let's see what is meant by Hypertext
Markup Language, and Web page.

HyperText:​ HyperText simply means "Text within Text." A text has a link within it,
is a hypertext. Whenever you click on a link which brings you to a new webpage,
you have clicked on a hypertext. HyperText is a way to link two or more web pages
(HTML documents) with each other.

Markup language:​ A markup language is a computer language that is used to


apply layout and formatting conventions to a text document. Markup language
makes text more interactive and dynamic. It can turn text into images, tables, links,
etc.

Web Page:​ A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A
Web page can be of the static or dynamic type. ​With the help of HTML only, we
can create static web pages​.

Hence, HTML is a markup language which is used for creating attractive web pages
with the help of styling, and which looks in a nice format on a web browser. An
HTML document is made of many HTML tags and each HTML tag contains different
content.

Structure of HTML Document:


Let's see a simple example of HTML.

<!DOCTYPE​>

<html>

<head>

<title>​Web page title​</title>

</head>

<body>

https://cgccollegespace.live/
<h1>​Write Your First Heading​</h1>

<p>​Write Your First Paragraph.​</p>

</body>

</html>

Description of HTML Example


<!DOCTYPE>:​ It defines the document type or it instruct the browser about the
version of HTML.

<html >​ :This tag informs the browser that it is an HTML document. Text between
html tag describes the web document. It is a container for all other elements of
HTML except <!DOCTYPE>

<head>:​ It should be the first element inside the <html> element, which contains
the metadata(information about the document). It must be closed before the body
tag opens.

<title>:​ As its name suggested, it is used to add title of that HTML page which
appears at the top of the browser window. It must be placed inside the head tag and
should close immediately. (Optional)

<body> :​ Text between body tag describes the body content of the page that is
visible to the end user. This tag contains the main content of the HTML document.

<h1>​ : Text between <h1> tag describes the first level heading of the webpage.

<p> ​: Text between <p> tag describes the paragraph of the webpage.

Brief History of HTML


In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN,
proposed a system for CERN researchers. In 1989, he wrote a memo proposing an
internet based hypertext system.

Tim Berners-Lee​ is known as the father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest
version of HTML is HTML5, which we will learn later in this tutorial.

https://cgccollegespace.live/
HTML Versions
Since the time HTML was invented there are lots of HTML versions in market, the
brief introduction about the HTML version is given below:

HTML 1.0:​ The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in1991.

HTML 2.0:​ This was the next version which was released in 1995, and it was
standard language version for website design. HTML 2.0 was able to support extra
features such as form-based file upload, form elements such as text box, option
button, etc.

HTML 3.2:​ HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements.
It can also support a web page with complex mathematical equations. It became an
official standard for any browser till January 1997. Today it is practically supported
by most of the browsers.

HTML 4.01:​ HTML 4.01 version was released in December 1999, and it is a very
stable version of HTML language. This version is the current official standard, and it
provides added support for stylesheets (CSS) and scripting ability for various
multimedia elements.

HTML5 :​ HTML5 is the newest version of HyperText Markup language. The first draft
of this version was announced in January 2008. There are two major organizations
one is W3C (World Wide Web Consortium), and another one is WHATWG( Web
Hypertext Application Technology Working Group) which are involved in the
development of HTML 5 version, and still, it is under development.

Features of HTML
1) It is a very ​easy and simple language​. It can be easily understood and
modified.

2) It is very easy to make an ​effective presentation​ with HTML because it has a


lot of formatting tags.

3) It is a ​markup language​, so it provides a flexible way to design web pages


along with the text.

4) It facilitates programmers to add a ​link​ on the web pages (by html anchor tag),
so it enhances the interest of browsing of the user.

5) It is ​platform-independent​ because it can be displayed on any platform like


Windows, Linux, and Macintosh, etc.

https://cgccollegespace.live/
6) It facilitates the programmer to add ​Graphics, Videos, and Sound​ to the web
pages which makes it more attractive and interactive.

7) HTML is a case-insensitive language, which means we can use tags either in


lower-case or upper-case.

DHTML Tutorial
DHTML​ stands for ​Dynamic Hypertext Markup language​ i.e., ​Dynamic HTML​.

Dynamic HTML is not a markup or programming language but it is a term that


combines the features of various web development technologies for creating the web
pages dynamic and interactive.

Dynamic HTML, or DHTML, is a collection of Technologies, like:

1. HTML (Hypertext Markup Language)

2. CSS (Cascading Style Sheets)

3. JS (JavaScript)

4. DOM (Document Object Model)

5. XHTML (EXtensible HTML)

The DHTML application was introduced by Microsoft with the release of the 4​th
version of IE (Internet Explorer) in 1997.

Components of Dynamic HTML


DHTML consists of the following four components or languages:

● HTML 4.0

● CSS

● JavaScript

● DOM.

HTML 4.0

HTML is a client-side markup language, which is a core component of the DHTML. It


defines the structure of a web page with various defined basic elements or tags.

https://cgccollegespace.live/
CSS

CSS stands for Cascading Style Sheet, which allows the web users or developers for
controlling the style and layout of the HTML elements on the web pages.

JavaScript

JavaScript is a scripting language which is done on a client-side. The various


browser supports JavaScript technology. DHTML uses the JavaScript technology for
accessing, controlling, and manipulating the HTML elements. The statements in
JavaScript are the commands which tell the browser for performing an action.

DOM

DOM is the document object model. It is a w3c standard, which is a standard


interface of programming for HTML. It is mainly used for defining the objects and
properties of all elements in HTML.

Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):

● It is used for designing the animated and interactive web pages that are
developed in real-time.

● DHTML helps users by animating the text and images in their documents.

● It allows the authors for adding the effects on their pages.

● It also allows the page authors for including the drop-down menus or rollover
buttons.

● This term is also used to create various browser-based action games.

● It is also used to add the ticker on various websites, which needs to refresh
their content automatically.

Features of DHTML
Following are the various characteristics or features of DHTML (Dynamic HTML):

● Its simplest and main feature is that we can create the web page
dynamically.

https://cgccollegespace.live/
● Dynamic Style​ is a feature, that allows the users to alter the font, size,
color, and content of a web page.

● It provides the facility for using the events, methods, and properties. And,
also provides the feature of code reusability.

● It also provides the feature in browsers for data binding.

● Using DHTML, users can easily create dynamic fonts for their web sites or web
pages.

● With the help of DHTML, users can easily change the tags and their
properties.

● The web page functionality is enhanced because the DHTML uses


low-bandwidth effect.

Difference between HTML and DHTML


Following table describes the differences between HTML and DHTML:

HTML (Hypertext Markup DHTML (Dynamic Hypertext Markup


language) language)

1. HTML is simply a markup 1. DHTML is not a language, but it is a set

language. of technologies of web development.

2. It is used for developing and 2. It is used for creating and designing the

creating web pages. animated and interactive web sites or

pages.

3. This markup language creates 3. This concept creates dynamic web

static web pages. pages.

4. It does not contain any server-side 4. It may contain the code of server-side

scripting code. scripting.

5. The files of HTML are stored with 5. The files of DHTML are stored with the

the .html or .htm extension in a .dhtm extension in a system.

system.

https://cgccollegespace.live/
6. A simple page which is created by 6. A page which is created by a user using

a user without using the scripts or the HTML, CSS, DOM, and JavaScript

styles called as an HTML page. technologies called a DHTML page.

7. This markup language does not 7. This concept needs database

need database connectivity. connectivity because it interacts with


users.

HTML Document Layout:


HTML has several semantic elements that define the different parts of a web
page:

● <header>​ - Defines a header for a document or


a section
● <nav>​ - Defines a set of navigation links
● <section>​ - Defines a section in a document
● <article>​ - Defines an independent,
self-contained content
● <aside>​ - Defines content aside from the
content (like a sidebar)
● <footer>​ - Defines a footer for a document or a
section
● <details>​ - Defines additional details that the
user can open and close on demand
● <summary>​ - Defines a heading for the
<details>​ element.

https://cgccollegespace.live/
HTML <meta> tag
HTML <meta> tag is used to represent the metadata about the HTML document.
It specifies page description, keywords, copyright, language, author of the
documents, etc.

The metadata does not display on the webpage, but it is used by search engines,

browsers and other web services which scan the site or webpage to know about

the webpage.

With the help of meta tag, you can experiment and preview how your webpage
will render on the browser.

The <meta> tag is placed within the <head> tag, and it can be used more than

one time in a document.

Syntax:
1. <meta​ ​charset​=​"utf-8"​>

Following are some specifications about the HTML <meta> tag

Display None

Start tag/End tag Empty Tag(Only Start tag)

Usage Document Structural

Following are some specific syntaxes of meta tag which shows the different
uses of meta Tag.

1. 1. ​<meta​ ​charset​=​"utf-8"​>

It defines the character encoding. The value of charset is "utf-8" which means it

will support to display any language.

1. 2. ​<meta​ ​name​=​"keywords"​ ​content​=​"HTML, CSS, JavaScript, Tutorials"​>

https://cgccollegespace.live/
It specifies the list of keywords which is used by search engines.

1. 3. ​<meta​ ​name​=​"description"​ ​content​=​"Free Online tutorials"​>

It defines the website description which is useful to provide relevant search

performed by search engines.

1. 4. ​<meta​ ​name​=​"author"​ ​content​=​"thisauthor"​>

It specifies the author of the page. It is useful to extract author information by

Content management system automatically.

1. 5. ​<meta​ ​name​=​"refresh"​ ​content​=​"50"​>

It specifies to provide instruction to the browser to automatically refresh the

content after every 50sec (or any given time).

1. 6. ​<meta​ ​http-equiv​=​"refresh"​ ​content​=​"5;


url=https://www.javatpoint.com/html-tags-list"​>

In the above example we have set a URL with content so it will automatically

redirect to the given page after the provided time.

1. 7. ​<meta​ ​name​=​"viewport"​ ​content​=​"width=device-width,


initial-scale=1.0"​>

It specifies the viewport to control the page dimension and scaling so that our
website looks good on all devices. If this tag is present, it indicates that this page

is mobile device supported.

Example
1. <!DOCTYPE html​>
2. <html>
3. <head>
4. ​<meta​ ​charset​=​"utf-8"​>
5. ​<meta​ ​name​=​"keywords"​ ​content​=​"HTML, CSS, JavaScript, Tutorials"​>
6. ​<meta​ ​name​=​"description"​ ​content​=​"Free Online tutorials"​>
7. ​<meta​ ​name​=​"author"​ ​content​=​"thisauthor"​>

https://cgccollegespace.live/
8. ​<meta​ ​http-equiv​=​"refresh"​ ​content​=​"5;
url=https://www.javatpoint.com/html-tags-list"​>
9. ​<meta​ ​name​=​"viewport"​ ​content​=​"width=device-width,
initial-scale=1.0"​>
10.</head>
11.<body>
12.<h2>​Example of Meta tag​</h2>
13.<p>​This example shows the use of meta tag within an HTML
document​</p>
14.</body>
15.</html>

Attribute:

Tag-specific attributes:

= New in HTML5

Attribut Value Description


e

charset character_set It specifies the character encoding of an

HTML page.

content text It contains the value of the attribute


"name" and "http-equiv" in an HTML

document, depending on context.

http-equiv It specifies the Information given by the


● Content-type
web server about how the web page should
● default-style be served.

● refresh

https://cgccollegespace.live/
name It specifies the name of document-level
● application-n
metadata.
ame

● author

● description

● generator

● keywords

scheme format/URL It specifies the scheme in which metadata


is described. (Not Supported in HTML5)

Global attribute:
The <meta> tag supports the global attributes in HTML

Event attribute:
The <meta> tag supports the event attributes in HTML.

Supporting Browsers
Element Chrome IE Firefox Opera Safari

<meta> Yes Yes Yes Yes Yes

HTML5 | Introduction & Features:


Introduction:​ HTML stands for Hyper Text Markup Language. It is used to
design web pages using markup language. HTML is the combination of
Hypertext and Markup language. Hypertext defines the link between the
web pages. Markup language is used to define the text document within tag
which defines the structure of web pages. HTML 5 is the fifth and current
version of HTML. It has improved the markup available for documents and

https://cgccollegespace.live/
has introduced application programming interfaces(API) and Document
Object Model(DOM).

Features:

● It has introduced new multimedia features which supports audio


and video controls by using <audio> and <video> tags.
● There are new graphics elements including vector graphics and
tags.
● Enrich semantic content by including <header> <footer>,
<article>, <section> and <figure> are added.
● Drag and Drop- The user can grab an object and drag it further
dropping it on a new location.
● Geo-location services- It helps to locate the geographical location
of a client.
● Web storage facility which provides web application methods to
store data on web browser.
● Uses SQL database to store data offline.
● Allows to draw various shapes like triangle, rectangle, circle, etc.
● Capable of handling incorrect syntax.
● Easy DOCTYPE declaration i.e. <!doctype html>
● Easy character encoding i.e. <meta charset=”UTF-8″>

Removed elements from HTML 5:​ There are many elements which are
depreciated from HTML 5 are listed below:

https://cgccollegespace.live/
New Added Elements in HTML 5:

● <article>:​ The <article> tag is used to represent an article. More


specifically, the content within the <article> tag is independent
from the other content of the site (even though it can be related).
● <aside>:​ The <aside> tag is used to describe the main object of
the web page in a shorter way like a highlighter. It basically
identifies the content that is related to the primary content of the
web page but does not constitute the main intent of the primary
page. The <aside> tag contains mainly author information, links,
related content and so on.
● <figcaption>:​ The <figurecaption> tag in HTML is used to set a
caption to the figure element in a document.
● <figure>:​ The <figure> tag in HTML is used to add self-contained
content like illustrations, diagrams, photos or codes listing in a
document. It is related to main flow but it can be used in any
position of a document and the figure goes with the flow of the
document and if remove it then it should not affect the flow of the
document.
● <header>:​ It contains the section heading as well as other
content, such as a navigation links, table of contents, etc.
● <footer>:​ The <footer> tag in HTML is used to define a footer of
HTML document. This section contains the footer information
(author information, copyright information, carriers etc). The footer
tag are used within body tag. The <footer> tag is new in the HTML
5. The footer elements require a start tag as well as an end tag.
● <main>:​ Delineates the main content of the body of a document
or web app.

https://cgccollegespace.live/
● <mark>:​ The <mark> tag in HTML is used to define the marked
text. It is used to highlight the part of the text in the paragraph.
● <nav>:​ The <nav> tag is used to declaring the navigational
section in HTML documents. Websites typically have sections
dedicated to navigational links, which enables user to navigate the
site. These links can be placed inside a nav tag.
● <section>:​ It demarcates a thematic grouping of content.
● <details>:​ The <details> tag is used for the content/information
which is initially hidden but could be displayed if the user wishes
to see it. This tag is used to create interactive widget which user
can open or close it. The content of details tag is visible when
open the set attributes.
● <summary>:​ The <summary> tag in HTML is used to define a
summary for the <details> element. The <summary> element is
used along with the <details> element and provides a summary
visible to the user. When the summary is clicked by the user, the
content placed inside the <details> element becomes visible
which was previously hidden. The <summary> tag was added in
HTMl 5. The <summary> tag requires both starting and ending
tag.
● <time>:​ The <time> tag is used to display the human-readable
data/time. It can also be used to encode dates and times in a
machine-readable form. The main advantage for users is that they
can offer to add birthday reminders or scheduled events in their
calender’s and search engines can produce smarter search
results.
● <bdi>:​ The <bdi> tag refers to the Bi-Directional Isolation. It
differentiate a text from other text that may be formatted in

https://cgccollegespace.live/
different direction. This tag is used when a user generated text
with an unknown directions.
● <wbr>:​ The <wbr> tag in HTML stands for word break opportunity
and is used to define the position within the text which is treated
as a line break by the browser. It is mostly used when the used
word is too long and there are chances that the browser may
break lines at the wrong place for fitting the text.
● <datalist>:​ The <datalist> tag is used to provide autocomplete
feature in the HTML files. It can be used with input tag, so that
users can easily fill the data in the forms using select the data.
● <keygen>:​ The <keygen> tag in HTML is used to specify a
key-pair generator field in a form. The purpose of <keygen>
element is to provide a secure way to authenticate users. When a
from is submitted then two keys are generated, private key and
public key. The private key stored locally, and the public key is
sent to the server. The public key is used to generate client
certificate to authenticate user for future.
● <output>:​ The <output> tag in HTML is used to represent the
result of a calculation performed by the client-side script such as
JavaScript.
● <progress>:​ It is used to represent the progress of a task. It is
also define that how much work is done and how much is left to
download a things. It is not used to represent the disk space or
relevant query.
● <svg>:​ It is the Scalable Vector Graphics.
● <canvas>:​ The <canvas> tag in HTML is used to draw graphics
on web page using JavaScript. It can be used to draw paths,

https://cgccollegespace.live/
boxes, texts, gradient and adding images. By default it does not
contains border and text.
● <audio>:​ It defines the music or audio content.
● <embed>:​ Defines containers for external applications (usually a
video player).
● <source>:​ It defines the sources for <video> and <audio>.
● <track>:​ It defines the tracks for <video> and <audio>.
● <video>:​ It defines the video content.

Advantages:

● All browsers supported.


● More device friendly.
● Easy to use and implement.
● HTML 5 in integration with CSS, JavaScript, etc can help build
beautiful websites.

Disadvantages:

● Long codes have to be written which is time consuming.


● Only modern browsers support it.

Supported Browsers:​ It is supported by all modern browsers. Below


examples illustrate the HTML 5 content.

https://cgccollegespace.live/
HTML Images:

Images can improve the design and the appearance of a web page.

Example

<​img​ src​="pic_trulli.jpg"​ alt​="Italian Trulli">

Example

<​img​ src​="img_girl.jpg"​ alt​="Girl in a jacket">

Example

<​img​ src​="img_chania.jpg"​ alt​="Flowers in Chania">

HTML Images Syntax

The HTML ​<img>​ tag is used to embed an image in a web page.

https://cgccollegespace.live/
Images are not technically inserted into a web page; images are linked to

web pages. The ​<img>​ tag creates a holding space for the referenced image.

The ​<img>​ tag is empty, it contains attributes only, and does not have a

closing tag.

The ​<img>​ tag has two required attributes:

● src - Specifies the path to the image

● alt - Specifies an alternate text for the image

Syntax

​ ​ alt​="​alternatetext"
<​img​ src​="​url" ​ >

The src Attribute

The required ​src​ attribute specifies the path (URL) to the image.

Note: When a web page loads; it is the browser, at that moment, that gets

the image from a web server and inserts it into the page. Therefore, make

sure that the image actually stays in the same spot in relation to the web

page, otherwise your visitors will get a broken link icon. The broken link icon

and the ​alt​ text are shown if the browser cannot find the image.

Example

https://cgccollegespace.live/
<​img​ src​="img_chania.jpg"​ alt​="Flowers in Chania">

The alt Attribute

The required ​alt​ attribute provides an alternate text for an image, if the

user for some reason cannot view it (because of slow connection, an error in

the src attribute, or if the user uses a screen reader).

The value of the ​alt​ attribute should describe the image:

Example

<​img​ src​="img_chania.jpg"​ alt​="Flowers in Chania">

If a browser cannot find an image, it will display the value of the ​alt

attribute:

Example

<​img​ src​="wrongname.gif"​ alt​="Flowers in Chania">

Tip: A screen reader is a software program that reads the HTML code, and allows the
user to "listen" to the content. Screen readers are useful for people who are visually

impaired or learning disabled.

https://cgccollegespace.live/
Image Size - Width and Height

You can use the ​style​ attribute to specify the width and height of an image.

Example

<​img​ src​="img_girl.jpg"​ alt​="Girl in a jacket"


style​="width:500px;height:600px;">

Alternatively, you can use the ​width​ and ​height​ attributes:

Example

<​img​ src​="img_girl.jpg"​ alt​="Girl in a jacket"​ width​="500"


height​="600">

The ​width​ and ​height​ attributes always define the width and height of the

image in pixels.

Note: Always specify the width and height of an image. If width and height are not

specified, the web page might flicker while the image loads.

Width and Height, or Style?

https://cgccollegespace.live/
The ​width​, ​height​, and ​style​ attributes are all valid in HTML.

However, we suggest using the ​style​ attribute. It prevents styles sheets

from changing the size of images:

Example

<​!DOCTYPE​ html​>

<​html​>

<​head​>

<​style​>

img ​{

width​:​ 100%​;

<​/style​>

<​/head​>

<​body​>

<​img​ src​="html5.gif"​ alt​="HTML5 Icon"​ width​="128"​ height​="128">

<​img​ src​="html5.gif"​ alt​="HTML5 Icon"


style​="width:128px;height:128px;">

<​/body​>

https://cgccollegespace.live/
<​/html​>

HTML <link> tag


HTML <link> tag is used to specify the relationship between the current document
and external source.

The <link> tag is commonly used to link the external Stylesheet for the current

document, but it can also use with link site icons. It is placed on the head section of

the document.

Example
1. <link​ ​rel​=​"stylesheet"​ ​type​=​"text/css"​ ​href​=​""​>

Following are some specifications about the HTML <link> tag

Display None

Start tag/End tag Both Start and End tag

Usage textual

Example
1. <!DOCTYPE html​>
2. <html>
3. <head>
4. ​<title>​Link Tag​</title>
5. ​<link​ ​rel​=​"stylesheet"​ ​type​=​"text/css"​ ​href​=​"htmlpages/css/link.css"​>
6. </head>

https://cgccollegespace.live/
7. <body>
8. ​<h2>​Example of Link Tag​</h2>
9. ​<p>​This is paragraph which is styled with external style sheet. ​</p>
10.</body>
11.</html>

CSS

1. body{
2. background-color: #7ac5cd;
3. text-align: center;}
4. h2{
5. color: #006400;}
6.
7. p{
8. color: #cd5c5c;
9. font-size: 25px;
10. font-style: italic;}

Output:

Attribute:

Tag-specific attributes:

Attribute Value Description

https://cgccollegespace.live/
charset char_encoding It defines the character encoding of linked source. (Not
ss supported in HTML5)

href URL It specifies the location of the linked document.

hreflang language_code Specifies the text language of linked source.

media media_query It specifies the media, for which linked source is applied.

rel ● alterna It describes the relationship between the current document an


te nked document. (required)
● author

● dns-pr
efetch

● help

● icon

● license

● next

● pingba
ck

● precon
nect

● prefetc
h

https://cgccollegespace.live/
● preloa
d

● preren
der

● prev

● search

● stylesh
eet

rev reversed It describes the relationship between the linked document and
he current document. (Not supported in HTML5)
relationship

sizes Height* weight It specifies the size of the linked source. It should be only use

ith rel="icon."

target _blank It determines where to load the linked document.

_self

_top

_parent

frame_name

type media_type It specifies the media type of document.

https://cgccollegespace.live/
Global attribute:
The <link> tag supports the global attributes in HTML

Event attribute:
The <link > tag supports the event attributes in HTML.

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<link> Yes Yes Yes Yes Yes

https://cgccollegespace.live/
HTML Audio Tag
HTML audio tag​ is used to define sounds such as music and other audio clips.

Currently there are three supported file format for HTML 5 audio tag.

1. mp3

2. wav

3. ogg

HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar

technologies are used to play the multimedia items.

This table defines that which web browser supports which audio file format.

Browser mp3 wav ogg

Internet Explorer Yes no no

Google Chrome yes yes yes

Mozilla Firefox yes* yes yes

Opera no yes yes

https://cgccollegespace.live/
Apple Safari yes yes no

HTML Audio Tag Example


Let's see the code to play mp3 file using HTML audio tag.

1. <audio​ controls​>
2. ​<source​ ​src​=​"koyal.mp3"​ ​type​=​"audio/mpeg"​>
3. Your browser does not support the html audio tag.
4. </audio>

Output:

Let's see the example to play ogg file using HTML audio tag.

1. <audio​ controls​>
2. ​<source​ ​src​=​"koyal.ogg"​ ​type​=​"audio/ogg"​>
3. Your browser does not support the html audio tag.
4. </audio>

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<audio> Yes Yes Yes Yes Yes

Attributes of HTML Audio Tag


https://cgccollegespace.live/
There is given a list of HTML audio tag.

AttributeDescription

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

ompleted.

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.

HTML Audio Tag Attribute Example


Here we are going to use controls, autoplay, loop and src attributes of HTML audio tag.

1. <audio​ controls autoplay loop​>


2. ​<source​ ​src​=​"koyal.mp3"​ ​type​=​"audio/mpeg"​></audio>

https://cgccollegespace.live/
MIME Types for HTML Audio format
The available MIME type HTML audio tag is given below.

Audio Format MIME Type

mp3 adio/mpeg

ogg audio/ogg

wav audio/wav

HTML Video Tag


HTML 5 supports <video> tag also. The HTML video tag is used for streaming video
files such as a movie clip, song clip on the web page.

Currently, there are three video formats supported for HTML video tag:

1. mp4
2. webM
3. ogg

Let's see the table that defines which web browser supports video file format.

Browser mp4 webM ogg

https://cgccollegespace.live/
Internet Explorer yes no no

Google Chrome yes yes yes

Mozilla Firefox yes yes yes

Opera no yes Yes

Apple Safari yes no no

Android also supports mp4 format.

HTML Video Tag Example


Let's see the code to play mp4 file using HTML video tag.

1. <video​ controls​>
2. ​<source​ ​src​=​"movie.mp4"​ ​type​=​"video/mp4"​>
3. Your browser does not support the html video tag.
4. </video>

Let's see the example to play ogg file using HTML video tag.

1. <video​ controls​>
2. ​<source​ ​src​=​"movie.ogg"​ ​type​=​"video/ogg"​>
3. Your browser does not support the html video tag.

https://cgccollegespace.live/
4. </video>

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<video> Yes Yes Yes Yes Yes

Attributes of HTML Video Tag


Let's see the list of HTML 5 video tag attributes.

Attribute Description

controls It defines the video controls which is displayed with play/pause buttons.

height It is used to set the height of the video player.

width It is used to set the width of the video player.

https://cgccollegespace.live/
poster It specifies the image which is displayed on the screen when the video is

ot played.

autoplay It specifies that the video will start playing as soon as it is ready.

loop It specifies that the video file will start over again, every time when it is

ompleted.

muted It is used to mute the video output.

preload It specifies the author view to upload video file when the page loads.

src It specifies the source URL of the video file.

HTML Video Tag Attribute Example


Let's see the example of video tag in HTML where are using height, width, autoplay,

controls and loop attributes.

1. <video​ ​width​=​"320"​ ​height​=​"240"​ controls autoplay loop​>


2. ​<source​ ​src​=​"movie.mp4"​ ​type​=​"video/mp4"​>
3. Your browser does not support the html video tag.
4. </video>

https://cgccollegespace.live/
MIME Types for HTML Video format
The available MIME type HTML video tag is given below.

Video Format MIME Type

mp4 video/mp4

ogg video/ogg

webM video/webM

HTML Table
HTML table tag​ is used to display data in tabular form (row * column). There can

be many columns in a row.

We can create a table to display data in tabular form, using <table> element, with
the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and

table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section,

navigation bar, body content, footer section etc. But it is recommended to use div
tag over table to manage the layout of the page .

https://cgccollegespace.live/
HTML Table Tags

Tag Description

<table> defines a table.

<tr> defines a row in a table.

<th> defines a header cell in a table.

<td> defines a cell in a table.

<caption> defines the table caption.

<colgroup> specifies a group of one or more columns in a table for formatting.

<col> is used with <colgroup> element to specify column properties for each

olumn.

<tbody> is used to group the body content in a table.

https://cgccollegespace.live/
<thead> is used to group the header content in a table.

<tfooter> is used to group the footer content in a table.

HTML Table Example


Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>​First_Name​</th><th>​Last_Name​</th><th>​Marks​</th></tr
>
3. <tr><td>​Sonoo​</td><td>​Jaiswal​</td><td>​60​</td></tr>
4. <tr><td>​James​</td><td>​William​</td><td>​80​</td></tr>
5. <tr><td>​Swati​</td><td>​Sironi​</td><td>​82​</td></tr>
6. <tr><td>​Chetna​</td><td>​Singh​</td><td>​72​</td></tr>
7. </table>

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

https://cgccollegespace.live/
Swati Sironi 82

Chetna Singh 72

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Table with Border


There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML


2. By border property in CSS

1) HTML Border attribute


You can use border attribute of table tag in HTML to specify border. But it is not

recommended now.

1. <table​ ​border​=​"1"​>
2. <tr><th>​First_Name​</th><th>​Last_Name​</th><th>​Marks​</th></tr
>
3. <tr><td>​Sonoo​</td><td>​Jaiswal​</td><td>​60​</td></tr>
4. <tr><td>​James​</td><td>​William​</td><td>​80​</td></tr>
5. <tr><td>​Swati​</td><td>​Sironi​</td><td>​82​</td></tr>
6. <tr><td>​Chetna​</td><td>​Singh​</td><td>​72​</td></tr>
7. </table>

Output:

https://cgccollegespace.live/
First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

2) CSS Border property


It is now recommended to use border property of CSS to specify border in table.

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>

You can collapse all the borders in one border by border-collapse property. It will

collapse the border into one.

1. <style>
2. table, th, td {
3. border: 2px solid black;

https://cgccollegespace.live/
4. border-collapse: collapse;
5. }
6. </style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table with cell padding


You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML


2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is recommended to


use CSS. So let's see the code of CSS.

https://cgccollegespace.live/
1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

HTML Table width:

https://cgccollegespace.live/
We can specify the HTML table width using the ​CSS width​ property. It can be

specify in pixels or percentage.

We can adjust our table width as per our requirement. Following is the example to

display table with width.

1. table{
2. width: 100%;
3. }

Example:
1. <!DOCTYPE html​>
2. <html>
3. <head>
4. ​<title>​table​</title>
5. ​<style>
6. table{
7. border-collapse: collapse;
8. width: 100%;
9. }
10. th,td{
11. border: 2px solid green;
12. padding: 15px;
13. }
14.
15. ​</style>
16. ​</head>
17.<body>
18. ​<table>
19. ​<tr>
20. ​<th>​1 header​</th>
21. ​<th>​1 header​</th>
22. ​<th>​1 header​</th>
23. ​</tr>
24. ​<tr>

https://cgccollegespace.live/
25. ​<td>​1data​</td>
26. ​<td>​1data​</td>
27. ​<td>​1data​</td>
28. ​</tr>
29. ​<tr>
30. ​<td>​2 data​</td>
31. ​<td>​2 data​</td>
32. ​<td>​2 data​</td>
33. ​</tr>
34. ​<tr>
35. ​<td>​3 data​</td>
36. ​<td>​3 data​</td>
37. ​<td>​3 data​</td>
38. ​</tr>
39.</table>
40.</body>
41.</html>​ ​Output:

HTML Table with colspan


If you want to make a cell span more than one column, you can use the colspan

attribute.

https://cgccollegespace.live/
It will divide one cell/row into multiple columns, and the number of columns depend

on the value of colspan attribute.

Let's see the example that span two columns.

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>

HTML code:

1. <table​ ​style​=​"width:100%"​>
2. ​<tr>
3. ​<th>​Name​</th>
4. ​<th​ ​colspan​=​"2"​>​Mobile No.​</th>
5. ​</tr>
6. ​<tr>
7. ​<td>​Ajeet Maurya​</td>
8. ​<td>​7503520801​</td>
9. ​<td>​9555879135​</td>
10. ​</tr>
11.</table>

Output:

Name Mobile No.

https://cgccollegespace.live/
Ajeet Maurya 7503520801 9555879135

HTML Table with rowspan


If you want to make a cell span more than one row, you can use the rowspan

attribute.

It will divide a cell into multiple rows. The number of divided rows will depend on

rowspan values.

Let's see the example that span two rows.

CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>

HTML code:

1. <table>
2. <tr><th>​Name​</th><td>​Ajeet Maurya​</td></tr>
3. <tr><th​ ​rowspan​=​"2"​>​Mobile No.​</th><td>​7503520801​</td></tr>
4. <tr><td>​9555879135​</td></tr>
5. </table>

Output:

https://cgccollegespace.live/
Name Ajeet Maurya

Mobile No. 7503520801

9555879135

HTML table with caption


HTML caption is diplayed above the table. It must be used after table tag only.

1. <table>
2. <caption>​Student Records​</caption>
3. <tr><th>​First_Name​</th><th>​Last_Name​</th><th>​Marks​</th></tr
>
4. <tr><td>​Vimal​</td><td>​Jaiswal​</td><td>​70​</td></tr>
5. <tr><td>​Mike​</td><td>​Warn​</td><td>​60​</td></tr>
6. <tr><td>​Shane​</td><td>​Warn​</td><td>​42​</td></tr>
7. <tr><td>​Jai​</td><td>​Malhotra​</td><td>​62​</td></tr>
8. </table>

Styling HTML table even and odd cells


CSS code:

1. <style>
2. table, th, td {
3. border: 1px solid black;

https://cgccollegespace.live/
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. table#alter tr:nth-child(even) {
10. background-color: #eee;
11.}
12.table#alter tr:nth-child(odd) {
13. background-color: #fff;
14.}
15.table#alter th {
16. color: white;
17. background-color: gray;
18.}
19.</style>

Output:

NOTE: You can also create various types of tables using different CSS properties in your
table.

https://cgccollegespace.live/
Supporting Browsers

Element Chrome IE Firefox Opera Safari

<table> Yes Yes Yes Yes Yes

HTML Form
An ​HTML form​ is ​a section of a document​ which contains controls such as text

fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the

form such as shipping address and credit/debit card details so that item can be sent

to the given address.

HTML Form Syntax


1. <form​ ​action​=​"server url"​ ​method​=​"get|post"​>
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

https://cgccollegespace.live/
HTML Form Tags
Let's see the list of HTML 5 form tags.

Tag Description

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

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

https://cgccollegespace.live/
<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags


Let's see the list of HTML 5 form tags.

Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element

https://cgccollegespace.live/
The HTML <form> element provide a document section to take input from user. It

provides various interactive controls for submitting information to web server such

as text field, text area, password field, etc.

Note: The <form> element does not itself create a form but it is container to contain all
required form elements, such as <input>, <label>, etc.

Syntax:

1. <form>
2. //Form elements
3. </form>

HTML <input> element


The HTML <input> element is fundamental form element. It is used to create form

fields, to take input from user. We can apply different input filed to gather different

information form user. Following is the example to show the simple text input.

Example:
1. <body>
2. ​<form>
3. Enter your name ​<br>
4. ​<input​ ​type​=​"text"​ ​name​=​"username"​>
5. ​</form>
6. </body>

Output:

https://cgccollegespace.live/
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known as single

line textfield control. The name attribute is optional, but it is required for the server

side component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: ​<input​ ​type​=​"text"​ ​name​=​"firstname"​/>​ ​<br/>
3. Last Name: ​<input​ ​type​=​"text"​ ​name​=​"lastname"​/>​ ​<br/>
4. ​</form>

Output:

https://cgccollegespace.live/
Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.

HTML <textarea> tag in form


The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of

<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

1. <!DOCTYPE html​>
2. <html>
3. <head>
4. ​<title>​Form in HTML​</title>
5. </head>
6. <body>
7. ​<form>
8. Enter your address:​<br>
9. ​<textarea​ ​rows​=​"2"​ ​cols​=​"20"​></textarea>
10. ​</form>
11.</body>
12.</html>

Output:

https://cgccollegespace.live/
Label Tag in Form
It is considered better to have label in form. As it makes the code

parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to
have for attribute in label tag that must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will use it,
then it will provide a focus when you tap or click on label tag. It is more worthy with
touchscreens.

1. <form>
2. ​<label​ ​for​=​"firstname"​>​First Name: ​</label>​ ​<br/>
3. ​<input​ ​type​=​"text"​ ​id​=​"firstname"​ ​name​=​"firstname"​/>​ ​<br/>
4. ​<label​ ​for​=​"lastname"​>​Last Name: ​</label>
5. ​<input​ ​type​=​"text"​ ​id​=​"lastname"​ ​name​=​"lastname"​/>​ ​<br/>
6. ​</form>

Output:

https://cgccollegespace.live/
HTML Password Field Control
The password is not visible to the user in password field control.

1. <form>
2. ​<label​ ​for​=​"password"​>​Password: ​</label>
3. ​<input​ ​type​=​"password"​ ​id​=​"password"​ ​name​=​"password"​/>
<br/>
4. </form>

Output:

HTML 5 Email Field Control

https://cgccollegespace.live/
The email field in new in HTML 5. It validates the text for correct email address. You

must use @ and . in this field.

1. <form>
2. ​<label​ ​for​=​"email"​>​Email: ​</label>
3. ​<input​ ​type​=​"email"​ ​id​=​"email"​ ​name​=​"email"​/>​ ​<br/>
4. </form>

It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

Radio Button Control


https://cgccollegespace.live/
The radio button is used to select one option from multiple options. It is used for

selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected

at a time.

Using radio buttons for multiple options, you can only choose a single option at a

time.

1. <form>
2. ​<label​ ​for​=​"gender"​>​Gender: ​</label>
3. ​<input​ ​type​=​"radio"​ ​id​=​"gender"​ ​name​=​"gender"
value​=​"male"​/>​Male
4. ​<input​ ​type​=​"radio"​ ​id​=​"gender"​ ​name​=​"gender"
value​=​"female"​/>​Female ​<br/>
5. </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1. <form>
2. Hobby:​<br>
3. ​<input​ ​type​=​"checkbox"​ ​id​=​"cricket"​ ​name​=​"cricket"
value​=​"cricket"​/>
4. ​<label​ ​for​=​"cricket"​>​Cricket​</label>​ ​<br>

https://cgccollegespace.live/
5. ​<input​ ​type​=​"checkbox"​ ​id​=​"football"​ ​name​=​"football"
value​=​"football"​/>
6. ​<label​ ​for​=​"football"​>​Football​</label>​ ​<br>
7. ​<input​ ​type​=​"checkbox"​ ​id​=​"hockey"​ ​name​=​"hockey"
value​=​"hockey"​/>
8. ​<label​ ​for​=​"hockey"​>​Hockey​</label>
9. </form>

Note: These are similar to radio button except it can choose multiple options at a time and
radio button can select one button at a time, and its display.

Output:

Submit button control


HTML ​<input type="submit">​ are used to add a submit button on web page.
When user clicks on submit button, then form get submit to the server.

Syntax:

1. <input​ ​type​=​"submit"​ ​value​=​"submit"​>

https://cgccollegespace.live/
The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

1. <form>
2. ​<label​ ​for​=​"name"​>​Enter name​</label><br>
3. ​<input​ ​type​=​"text"​ ​id​=​"name"​ ​name​=​"name"​><br>
4. ​<label​ ​for​=​"pass"​>​Enter Password​</label><br>
5. ​<input​ ​type​=​"Password"​ ​id​=​"pass"​ ​name​=​"pass"​><br>
6. ​<input​ ​type​=​"submit"​ ​value​=​"submit"​>
7. </form>

Output:

HTML <fieldset> element:

https://cgccollegespace.live/
The <fieldset> element in HTML is used to group the related information of a form.

This element is used with <legend> element which provide caption for the grouped

elements.

Example:

1. ​<form>
2. ​<fieldset>
3. ​<legend>​User Information:​</legend>
4. ​<label​ ​for​=​"name"​>​Enter name​</label><br>
5. <input​ ​type​=​"text"​ ​id​=​"name"​ ​name​=​"name"​><br>
6. <label​ ​for​=​"pass"​>​Enter Password​</label><br>
7. <input​ ​type​=​"Password"​ ​id​=​"pass"​ ​name​=​"pass"​><br>
8. <input​ ​type​=​"submit"​ ​value​=​"submit"​>
9. </fieldset>
10.lt;/form​>

Output:

HTML Form Example


Following is the example for a simple form of registration.

1. <!DOCTYPE html​>
2. ​<html>
3. ​<head>
4. ​<title>​Form in HTML​</title>
5. </head>

https://cgccollegespace.live/
6. ​<body>
7. ​<h2>​Registration form​</h2>
8. ​<form>
9. ​<fieldset>
10. ​<legend>​User personal information​</legend>
11. ​<label>​Enter your full name​</label><br>
12. ​<input​ ​type​=​"text"​ ​name​=​"name"​><br>
13. ​<label>​Enter your email​</label><br>
14. ​<input​ ​type​=​"email"​ ​name​=​"email"​><br>
15. ​<label>​Enter your password​</label><br>
16. ​<input​ ​type​=​"password"​ ​name​=​"pass"​><br>
17. ​<label>​confirm your password​</label><br>
18. ​<input​ ​type​=​"password"​ ​name​=​"pass"​><br>
19. ​<br><label>​Enter your gender​</label><br>
20. ​<input​ ​type​=​"radio"​ ​id​=​"gender"​ ​name​=​"gender"
value​=​"male"​/>​Male ​<br>
21. ​<input​ ​type​=​"radio"​ ​id​=​"gender"​ ​name​=​"gender"
value​=​"female"​/>​Female ​<br/>
22. ​<input​ ​type​=​"radio"​ ​id​=​"gender"​ ​name​=​"gender"
value​=​"others"​/>​others ​<br/>
23. ​<br>​Enter your Address:​<br>
24. ​<textarea></textarea><br>
25. ​<input​ ​type​=​"submit"​ ​value​=​"sign-up"​>
26. ​</fieldset>
27. ​</form>
28. ​</body>
29.</html>

Output:

https://cgccollegespace.live/
HTML Form Example
Let's see a simple example of creating HTML form.

1. <form​ ​action​=​"#"​>
2. <table>
3. <tr>
4. ​<td​ ​class​=​"tdLabel"​><label​ ​for​=​"register_name"​ ​class​=​"label"​>​Enter
name:​</label></td>
5. ​<td><input​ ​type​=​"text"​ ​name​=​"name"​ ​value​=​""​ ​id​=​"register_name"
style​=​"width:160px"​/></td>
6. </tr>
7. <tr>
8. ​<td​ ​class​=​"tdLabel"​><label​ ​for​=​"register_password"​ ​class​=​"label"​>​Enter
password:​</label></td>
9. ​<td><input​ ​type​=​"password"​ ​name​=​"password"​ ​id​=​"register_password"
style​=​"width:160px"​/></td>
10.</tr>
11.<tr>
12. ​<td​ ​class​=​"tdLabel"​><label​ ​for​=​"register_email"​ ​class​=​"label"​>​Enter
Email:​</label></td>
13. ​<td

https://cgccollegespace.live/
14.><input​ ​type​=​"email"​ ​name​=​"email"​ ​value​=​""​ ​id​=​"register_email"
style​=​"width:160px"​/></td>
15.</tr>
16.<tr>
17. ​<td​ ​class​=​"tdLabel"​><label​ ​for​=​"register_gender"​ ​class​=​"label"​>​Enter
Gender:​</label></td>
18. ​<td>
19.<input​ ​type​=​"radio"​ ​name​=​"gender"​ ​id​=​"register_gendermale"
value​=​"male"​/>
20.<label​ ​for​=​"register_gendermale"​>​male​</label>
21.<input​ ​type​=​"radio"​ ​name​=​"gender"​ ​id​=​"register_genderfemale"
value​=​"female"​/>
22.<label​ ​for​=​"register_genderfemale"​>​female​</label>
23. ​</td>
24.</tr>
25.<tr>
26. ​<td​ ​class​=​"tdLabel"​><label​ ​for​=​"register_country"​ ​class​=​"label"​>​Select
Country:​</label></td>
27. ​<td><select​ ​name​=​"country"​ ​id​=​"register_country"
style​=​"width:160px"​>
28. ​<option​ ​value​=​"india"​>​india​</option>
29. ​<option​ ​value​=​"pakistan"​>​pakistan​</option>
30. ​<option​ ​value​=​"africa"​>​africa​</option>
31. ​<option​ ​value​=​"china"​>​china​</option>
32. ​<option​ ​value​=​"other"​>​other​</option>
33.</select>
34.</td>
35.</tr>
36.<tr>
37. ​<td​ ​colspan​=​"2"​><div​ ​align​=​"right"​><input​ ​type​=​"submit"
id​=​"register_0"​ ​value​=​"register"​/>
38.</div></td>
39.</tr>
40.</table>
41. </form>

https://cgccollegespace.live/
Supporting Browsers

Element Chrome IE Firefox Opera Safari

<form> Yes Yes Yes Yes Yes

UNIT -2 COMPLETED

https://cgccollegespace.live/

You might also like