html5 project.pptx

Introduction Of HTML And HTML5
DY Patil University Pune, Ambi
MCA Department
Subject :- Essentials Of IT

Introduction To HTML
HTML was originally developed at CERN (Conseil Européen pour
la Recherche Nucleaire (European Organization for Nuclear Research) by
Tim Berners-Lee in 1991.

HTML is not a programming language. It's a markup language. In fact,
that is the technology's name: Hyper Text Markup Language.
Hypertext defines the link between the web pages. A markup language
is used to define the text document within tag which defines the
structure of web pages.
HTML stands for Hyper Text Mark-up Language. HTML is the standard mark-
up language for creating Web pages. HTML describes the structure of a Web
page. HTML consists of a series of elements,HTML elements tell the browser
how to display the content HTML elements label pieces of content such as
"this is a heading", "this is a paragraph", "this is a link", etc.

Example Explained :-
The <!DOCTYPE html> declaration defines that this document is an HTML5
document The <html> element is the root element of an HTML page The
<head> element contains meta information about the HTML page The <title>
element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)The <body> element defines the document's
body, and is a container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc. The <h1> element defines a
large heading. The <p> element defines a paragraph
What is WWW :-
The World Wide Web (WWW) is a network of online content that is
formatted in HTML and accessed via HTTP. The term refers to all the
interlinked HTML pages that can be accessed over the Internet.
All HTML documents must start with a document type declaration:
<!DOCTYPE html>.The HTML document itself begins with <html> and
ends with </html>.The visible part of the HTML document is between
<body> and </body>
Common HTML:-

W3C
WWW (World Wide Web) :-
WWW is a huge collection of pages of information link with each
other around the globe. Every page is a combination of text, pictures,
audios, videos, animation and hyperlink etc.
Tim Berners Lee is a father of www.
W3C (World Wide Web Consortium) :-
1) Consortium is a community or a type of organization in which many
companies come together and work on www.
2) W3C do not have a single headquarter.

Institutes of W3C :-
1) MIT in Cambridge, USA
2) Keio University in Tokyo, Japan
3) ERCIUM in France
4) Beijing University in Beijing, China
Invention :-
1) Tim Berners Lee had invented the web.
2) He put a proposal to www in 1989.
3) He proposed to put some protocols on the www for the security, development and
growth.
Characteristics of W3C :-
1) Ensures the growth and development of website.
2) Develop standard for web scripting web application and other dynamics.
3) W3C uses the principle of simplicity, modularity and extensibility designing the
web protocols.

Introduction To HTML5
HTML is Designed By Time Berners Lee in 1991.
HTML is Maintained By W3C (WORLD WIDE WEB CONSORTISM).
From 1991 to 1999 Many HTML Specification Were Released By W3C From HTML 1 to
HTML 4.
In 2004 WHATWG (WEB Hypertext Application Technology Working Group) a Group
Of Experts started Observation on “how Web Designers or Developers are Developing
Web Sites”.
They Observed:
Pattern Of Using Tags, Attributes ,Styles ,Class Value ,etc.
Based On The Observation In 2008 WHATWG Released First Public Working Group.
This Specification Defines New Features, New Tags, Removed Tags, Deprecated Tags /
Attributes in Fifth Version Of HTML.
In Model HTML Everything Should Be Syntactically and Semantically Meaningful To
The Users and User Agents.

What Is HTML5
HTML Stands For (HYPERTEXT MARKUP LANGUAGE).and Then What
Is HTML5 ? HTML5 Is Latest Specification Of HTML We Known That
HTML Is Designed By Time Berners Lee In 1991. & HTML Maintained By
W3C.
Some New Deprecated Tags :-
<header><nav><section><article><aside><footer><figcaption><figure><progress><c
anvas><audio><source><track><video><hgroup>
Remove Tags From HTML5:-
<frameset> <big> <center> <strike> <No frame> <dir>
Note :-
HTML5 is a Latest Revision Or Latest Specification Of HTML.
In 2014 HTML5 Is Released as Stable W3C Recommendation.
1. HTML5 Emphasizes On Creating Web Pages and Web Application , Which
are Syntactically and Semantically Consistent and Meaningful To Users(Web
Designers & Developers) As Well User Agents(Web Browsers).
2. HTML5 is still in the development phase; therefore, it might appear that a few
features that worked before are not working now. Thus developers need to stay updated
while using HTML5.

Features Of HTML5
With Audio and Video tags, developers can embed videos or audio into
their websites. For styling the video tag, developers can use CSS and
CSS3.
1) Audio & Video Tags :-
Example :-

2) Header :- The <header> element in HTML5 contains introductory content. It
can include a set of introductory or navigational support on a website. Typically,
the header element contains heading elements, logo or icons, a search form,
author’s information, etc.
Example:-
3) Footer :- The <footer> tag defines the footer of a document or a section.
Typically, the footer contains information related to the author, copyright,
contact information, sitemap, related documents, back to top links, etc. There
can be more than one footer element in one document.

Example:-
4) Canvas Tag :- The canvas tag in HTML5 helps users draw graphics or
images on the fly using JavaScript. We can use it for drawing paths, boxes,
circles, adding images, etc. The canvas tag has two attributes: width and
height for setting the width and height of the canvas.
Example :-

5) Mark :- The <mark> element highlights a particular text that is of special
interest to the user in an HTML document.
Example:-
6) Main Tag :- This tag defines the important content of the <body> of a d
document.
Example:-

7) Progress Tag :- The progress tag helps users check the progress of a task
during the execution. Users will need to define the dynamically changing
values of the progress bar with the scripts (JavaScript).
Example:-
8) Section Tag :- The <section> element defines specific sections and subsections
in the document.
Example:-

Introduction Of Web 2.0 And Web 3.0
Introduced in 2003-04 which is commaly used to encompass various novel
phenomena on the world wide web.
web 2.0 are popular type site allow its user to create their pages with a
unique URL
Website with interaction :- A website that communicate and allows for
interaction with users.
Read and write web :- The read/write web means that ordinary people can
easily published their 2cents to the world wide web.
Social web :- Blogs, wikis, Social Media, Video .
Web 2.0

Advantages :-
1) Available at anytime any place
2) Variety of media
3) Easy to use
4) Dynamic
5) Real-time discussion
Disadvantages :-
1) Information overload Too much information is daily posted by
many people with different thoughts
2) Too many fake ids and spammers
3) Hackers commit crimes

The term web3.0 was coined by Polka dot founder & Ethereum Co-founder
Gavin wood in 2014, referring to a "decentralized online ecosystem based on
block chain.
Web 3.0
Read write execute :-
It is a version of web that gives users . The power to create & execute tools
& Software rather than depending on other People for software.
Semantic Web:-
The term "semantic web" refers to WBC's Vision of the web of linked data
Semantic web technologies enable people to Create data stores on the web, &
write rules for handling data.
Computer Can interpret information like human.
Semantic searching knowledge Bases Artificial al intelligence, machine learning
& machine to machine communication.

Crypto Currency :-
Web 3.0 crypto coins are Cryptocurrencies that secure blockchain
project that run on smart contracts over the internet.
Ethereum slowly becoming the foundation of web 3. There is no possibility of
web 3 without Ethereum...
Ethereum is the base layer or Code that allows web 3 to function as Java
script or HTML is for web 2.0

3) Transparency :- The decentralized web will enable int users to track their
data & look over the source code of platforms they decide to utilize. You will
not need to rely on d middle man for access to this data.
4) Personalized web surfing experience! it will offer a more personalized
internet Surfing experience as website will be better able to recognize our
preferences web appl analyze our internet usage & habits to custo-mize
themselves to fit best to our device, location etc.
2) Fewer Intermediaries :- Block chain based web s will connect Companies
directly with customers. While the need fox adequate rules & regulations to
monitor fairness will be there, we will see a Shift towards trustless &
decentralized network, instead of centralized institution.
1) Data Ownership :- You will able to choose what information you want to
share with business & advertising companies & make money from it
Advantage :-
How if Ethereum related to Web 3?
Ethereum, refers to decentralized apps that gun on the blockchain apps that run on the
blockchain. These apps that allow anyone to participate without monetizing their
Personal data..

Disadvantage :-
1) It may be a bit Complicated to understand for beginners.
2) Difficult To Regulate :-
Some experts also believe that decentralization will lead to difficulties in
monitoring & regulating web 3. As a result, we could See arise in cybercrimes
3) Various technologies such as blockchain AI, and machine learning power
Web 3. it will make Use of semantic data, 3d graphics & more likely less
advanced devices will not be able to handle web 3.
4) Easy access to user's personal and public data webs is huge &
interconnected, which is why it is easier for anyone to gain access to the
public & private data that you share online.

What is the WHATWG
The Web Hypertext Application Technology Working Group
(WHATWG) is a community of people interested in evolving HTML and
related technologies. The WHATWG was founded by individuals from Apple
Inc., the Mozilla Foundation and Opera Software, leading Web browser
vendors, in 2004.
The central organizational membership and control of
WHATWG today – its "Steering Group" – consists of Apple, Mozilla, Google,
and Microsoft. WHATWG community members work with the editor of the
specifications to ensure correct implementation.

On the HTML document you have often seen that there is a
<!DOCTYPE html> declaration before the <html> tag. HTML
<!DOCTYPE> tag is used to inform the browser about the version of
HTML used in the document. It is called as the document type declaration
(DTD).
Technically <!DOCTYPE > is not a tag/element, it just an
instruction to the browser about the document type. It is a null element
which does not contain the closing tag, and must not include any content
within it.
HTML <!DOCTYPE>
Supporting Browsers :-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The syntax in HTML 4.01 Transitional is :-

Getting Started With HTML5
In this tutorial you will learn how easy it is to create an HTML
document or a web page
Creating Your First HTML Document :-
Let’s walk through the following steps:-
Step 1: Creating The HTML file :-
Open your computer visual studio code editor and create a new file.
Step 2: Start with an empty window and type the following code :-
Step 3: Saving the file :-
Now save the file on your desktop as “filename.html”.

Support For Legacy Browsers
Legacy browsers, by which we usually mean older versions
of Internet Explorer , don't support HTML5 and therefore are unable
to understand any of the HTML5 code in the previous examples. In
order to serve the same audio/video content to these browsers, it is
also possible to provide a fallback such as a third-party plugin (for
example Adobe Flash) or even a simple link to the media file in
question for the user to download:
Older versions of Internet Explorer will simply ignore the
audio and source elements in the example above and only display the
download link. An alternative Flash player could also be provided in
place or in addition to the download link, and this would be used
instead.
What is Legacy Browser Support :-
Legacy Browser Support is a feature in Chrome that can
help you automatically redirect designated legacy sites and
applications that need to be accessed via legacy browsers.

Structure Of Web Page
A basic HTML page starts with the Document Type Declaration or doctype.
That is a way to inform the browser what type of document it is. The doctype
is always the first item at the top of any HTML file. Then sections and
subsections come, each possibly has its heading and subheading. These
heading and sectioning elements help the reader to perceive the content
meaning.

There are generally two types of tags in HTML :-
1.Paired Tags: These tags come in pairs. That is they have both opening(< >)
and closing(</ >) tags.
2.Empty Tags: These tags do not require to be closed.
<html> is a root element of html. It’s a biggest and main element in
complete html language, all the tags , elements and attributes enclosed in it or
we can say wrap init , which is used to structure a web page. <html> tag is parent
tag of <head> and <body> tag, other tags enclosed within <head> and
<body>. In <html > tag we use “lang” attributes to define languages of html
page such as <html lang=”en”> here en represents English language. some of
them are : es = Spanish , zh-Hans = Chinese, fr = French and el = Greek etc.
1) The <html> element :-
Example:-
<!DOCTYPE html>
<html lang="en"> >
<head>
<title> HTML Tag </title>
</head>
<body>
</body>
</html>

2) The <head> section :-
The HTML <head> tag is used for indicating the head section of the HTML
document. The <head> element contains metadata (document title, character set,
styles, links, scripts), specific information about the web page that is not
displayed to the user.
Example:- <meta name="description" content="Free Web tutorials">
<link rel="stylesheet" href="styles.css">
<title>HTML Elements Reference</title>
3) The <body> element :-
HTML <body> tag defines the main content of an HTML document which
displays on the browser. It can contain text content, paragraphs, headings,
images, tables, links, videos, etc. The <body> must be the second element
after the <head> tag or it should be placed between </html> tags. This tag is
required for every HTML document and should only use once in the whole
HTML document. <!DOCTYPE html>
<html>
<head>
<title>Body Tag</title>
</head>
<body>
<h2>Example of body tag</h2>
</body>
</html>
Example:-

Example:-
4) The <header> Element :-
The <header> tag in HTML is used to define the header for a
document or a section as it contains the information related to the title
and heading of the related content. It usually contains introductory
content the main heading of your page or heading on a article of your
page a Logo, Search Bar, Form, Navigation Bar and other element
<!DOCTYPE html>
<html>
<body>
<header>
<h1>A heading here</h1>
<p>Some additional information here</p>
</header>
</body>
</html>
The <h1>-<h6> heading elements are used to give a short description
about the coming section. <h1> is considered to the the most important,
and <h6> the least important one.
5) Headings (h1-h6 Elements) :-

Example:-
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 is used within the body tag. The
<footer> tag is new in the HTML5. The footer elements require a start tag as
well as an end tag.
6) The Footer Element :-
<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
</body>
<html>
<body>
<footer>
<a href="https://www.geeksforgeeks.org/about/">About Us</a>|
<a href="https://www.geeksforgeeks.org/privacy-policy/">Privacy Policy</a>|
<a href="https://www.geeksforgeeks.org/careers/">Careers</a>
<p>Here use footer</p>
</footer>
</body>
</html>
Example:-

The idea behind feature detection is that you can run a test to
determine whether a feature is supported in the current browser, and then
conditionally run code to provide an acceptable experience both in browsers
that do support the feature, and browsers that don't. If you don't do this,
browsers that don't support the features you are using in your code may not
display your sites properly or might fail altogether, creating a bad user
experience.
Feature Detection
If you’re building a Web site, you don’t just want it to look terrific
today. you want it to dazzle for a long time to come. That means your site
has to work not only in today’s browsers, but also in future versions.

At the moment, the best way to detect HTML5 and CSS3 features are by
using 3rd party Javascript libraries such as Modernizr.
Modernizr does not try to detect the browser but it detects certain
features.
You can download Modernizr at http://modernizr.com/download/ and
actually pick and choose what features you want to search for and it will
generate a Javascript file to include in your HTML5 website. Once
implemented you would use simple programming such as the lines
below
if(document.querySelector){
element = document.querySelector(selectors);
}
Modernizr

All you need to do is download the file, include it in your <head> section
and add class="no-js" to your <html> tag
<!DOCTYPE html>
<html class="no-js">
<head><meta charset="utf-8">
<title>HTML 5 and CSS3 Test Page</title> <script
src="modernizr-2.0.6.min.js">
</script>
</head>
How Do We Implement Modernizr?
Modernizr creates properties for all of the features that it tests for. You can
refer to these properties to check whether the browser supports the object and
its properties.Here is an example that checks to see if canvas is supported.
if (Modernizr.canvas) {
// Yes, canvas is supported
}else{
// No, canvas is not supported
}
Testing For Object & Properties

Page Encoding Element
Character Encoding Of HTML :-
Character encoding is a method of converting bytes into
characters. To validate or display an HTML document properly, a program
must choose a proper character encoding.
There are three different Unicode character encodings: UTF-8, UTF-16 and
UTF-32
UTF is stand for Unicode Transformation Format
1) UTF-8 :-
A Unicode Translation Format that comes in 8-bit units that is, it
comes in bytes. A character in UTF8 can be from 1 to 4 bytes long, making
UTF8 variable width.

2) UTF-16 :-
A Unicode Translation Format that comes in 16-bit units that is, it
comes in shorts. It can be 1 or 2 shorts long, making UTF16 variable
width.
3) UTF-32 :-
A Unicode Translation Format that comes in 32-bit units that is,
it comes in longs. It is a fixed-width format and is always 1 "long" in
length.

HTML Elements
An HTML file is made of elements. These elements are responsible for
creating web pages and define content in that webpage. An element in HTML
usually consist of a start tag <tag name>, close tag </tag name> and content
inserted between them. Technically, an element is a collection of start tag,
attributes, end tag, content between them.
For the default display and styling purpose in HTML, all the elements are
divided into two categories :-
 Block-level element
 Inline element
Block-Level Element :-
 These are the elements, which structure main part of web page, by dividing
a page into coherent blocks.
 A block-level element always start with new line and takes the full width of
web page, from left to right.
 These elements can contain block-level as well as inline elements.

Following are the block-level elements in HTML :-
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color: lightblue">This is first div</div>
<div style="background-color: lightgreen">This is second div</div>
<p style="background-color: pink">This is a block level element</p>
</body>
</html>
Output:
In the above example we have used tag, which defines a section in a web page, and takes
full width of page. We have used style attribute which is used to styling the HTML
content, and the background color are showing that it's a block level element.
Example:-

Inline Elements :-
 Inline elements are those elements, which differentiate the part of a given text
and provide it a particular function.
 These elements does not start with new line and take width as per
requirement.
 The Inline elements are mostly used with other elements.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>,
<input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <textarea>, <time>, <tt>, <var>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.javatpoint.com/html-tutorial">Click on link</a>
<p>This will take width of text only</p>
</body>
</html>
Example:-
Output :-

The deprecated tags or attributes are those attributes which are replaced by
some other attributes. The tag or attributes deprecated when the same attributes
is achieved by some other way.
The following elements are not available in HTML5 anymore-
1) <basefont> tag - basefont sets the default font family, font size, and color of all the text
context in an HTML document. It is applied to all of the document’s content.
Eg –
<!DOCTYPE html>
<html>
<head>
<title>Basefont tag</title>
<basefont color="blue" size="5" face="arial">
</head>
<body>
<h2>Example of Basefont tag</h2>
<p>The basefont tag is not supported in HTML5 use CSS to style the document</p>
</body>
</html>
Deprecated elements

2) <blink> tag -The HTML blink tag is a non-standard element of HTML
that helps to flash or gently blink a text or set of text in a web browser.
<html>
<head>
<title> Here is an example of Blink Element of HTML </title>
<style>
blink { color: #2d38be;
font-size: 15px;
font-weight: bold; }
</style>
</head>
<body>
<h1> About HTML BLINK Tag</h1>
<blink> HTML blink tags are not used these days and are not supported by most browsers.
</blink> <p> See the effect above </p>
</body>
</html>
We can use CSS alternative –
<style>
body{
font-family: cursive;
color: green;
font-size: 20px;
}
</style>

!DOCTYPE html>
<html>
<head>
<title>Blinking feature using CSS</title>
<style>
.blink {
animation: blinker 1.5s linear infinite;
color: red;
font-family: sans-serif;
}
</style>
</head>
<body>
<p class="blink"> This is an example of
blinking text using CSS. </p>
</body>
</html>

3) <dir> tag :- The <dir> element was used for listing or wrapping
contents in a directory. It was basically used to contain directory titles. The
items wrapped in <dir> are normally <li> elements.
We can use <ul> or <ol> instead of <dir> tag –
<dir>
<li>I am one</li>
<li>I am two</li> </dir>
<strike>Using the strike element</strike>

<p>Creating same effect with CSS</p>
<style> p{ text-decoration: line-through; }</style>

Deprecated attributes-
1) Bgcolor :- The HTML bgcolor attribute is used to set the background color of
an HTML element. Bgcolor is one of those attributes that has become deprecated
with the implementation of Cascading Style Sheets. This attribute is deprecated
from <body>, <table>, <table> etc.
Eg –
<body text="green" bgcolor="orange">
In HTML5, we use a CSS property called background-color instead of
Bgcolor attribute –
body {background-color: coral;}
2) text :- The HTML <body> text Attribute is used to define a color for the text in the
Document. The <body> text attribute is not supported by HTML5. Instead of using this
attribute, we can use css color property.
Eg- <body text="color_name | rgb_number">
But in HTML5 we can this through CSS
Body{
color:blue;
}
h1{
Color:green;

3) align :-
The align Attribute in HTML is used to specify the alignment of text
content of The Element.
Eg –
<!DOCTYPE html>
<html>
<head>
<title>
HTML p align Attribute
</title>
</head>
<body>
<h2>HTML p align Attribute</h2>
<p align="left"> Left align content </p>
<p align="center"> center align content </p>
<p align="right"> Right align content </p>
</body>
</html>
We can do this through CSS :-
The text-align property in CSS is used for aligning the inner content of a block
element.
p { text-align: center;}

4) Background :-
The background attribute in the HTML document is used to specify the
background image on a web page. You can pass the path of an image as a value
of background attribute to set the image.
Eg –
<body background="Images/mountain.jpg">
In HTML5 it’s done through CSS as –
<style>
body{
background-image : url('Images/mountain.jpg’);
}
</style>

HTML5 features include native audio and video support without the need for
Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a
website. You need to set src attribute to identify the media source and include a
controls attribute so the user can play and pause the media.
Embedding Video :-
Here is the simplest form of embedding a video file in your webpage
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the
<video> element. </video>
The current HTML5 draft specification does not specify which video formats
browsers should support in the video tag. But most commonly used video
formats are :-
 Ogg :- Ogg files with Thedora video codec and Vorbis audio codec.
 mpeg4 :- MPEG4 files with H.264 video codec and AAC audio codec.
The State Of Web Audio And Video

<!DOCTYPE HTML> <html>
<body>
<video width = "300" height = "200" controls
autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg"
/>
<source src = "/html5/foo.mp4" type =
"video/mp4" />
Your browser does not support the <video>
element. </video>
</body>
</html>
Video Attribute Specification :-
The HTML5 video tag can have a number of attributes to control the look and
feel and various functionalities of the control −
You can use <source> tag to specify media along with media type and many
other attributes. A video element allows multiple source elements and
browser will use the first recognized format
Output :-

Sr.No Attribute & Description
1)
Autoplay
This Boolean attribute if specified, the video will automatically
begin to play back as soon as it can do so without stopping to finish
loading the data.
2)
Autobuffer
This Boolean attribute if specified, the video will automatically
begin buffering even if it's not set to automatically play.
3)
Controls
If this attribute is present, it will allow the user to control video
playback, including volume, seeking, and pause/resume playback.
4)
Height
This attribute specifies the height of the video's display area, in CSS
pixels

5)
Loop
This Boolean attribute if specified, will allow video automatically
seek back to the start after reaching at the end
6)
Preload
This attribute specifies that the video will be loaded at page load, and
ready to run. Ignored if autoplay is present.
7)
Poster
This is a URL of an image to show until the user plays or seeks.
8)
SRC
The URL of the video to embed. This is optional; you may instead
use the <source> element within the video block to specify the video
to embed.
9)
Width
This attribute specifies the width of the video's display area, in CSS
pixels

Embedding Audio :-
HTML5 supports <audio> tag which is used to embed sound content in an
HTML or XHTML document as follows.
<audio src = "foo.wav" controls autoplay> Your
browser does not support the
<audio> element. </audio>
The current HTML5 draft specification does not specify which audio
formats browsers should support in the audio tag. But most commonly used
audio formats are ogg, mp3 and wav.
You can use <source&ggt; tag to specify media along with media type and
many other attributes. An audio element allows multiple source elements
and browser will use the first recognized format −
!DOCTYPE HTML> <html> <body> <audio controls autoplay> <source src =
"/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" /> Your browser does
not support the
<audio> element. </audio>
</body>
</html>
Output :-

Audio Attribute Specification :-
The HTML5 audio tag can have a number of attributes to control the look and
feel and various functionalities of the control −
Sr.No Attribute & Description
1)
Autoplay
This Boolean attribute if specified, the audio will automatically begin
to play back as soon as it can do so without stopping to finish loading
the data.
2)
Autobuffer
This Boolean attribute if specified, the audio will automatically begin
buffering even if it's not set to automatically play.
3)
Controls
If this attribute is present, it will allow the user to control audio
playback, including volume, seeking, and pause/resume playback.

4)
Loop
This Boolean attribute if specified, will allow audio automatically
seek back to the start after reaching at the end.
5)
Preload
This attribute specifies that the audio will be loaded at page load,
and ready to run. Ignored if autoplay is present.
6)
SRC
The URL of the audio to embed. This is optional; you may
instead use the <source> element within the video block to
specify the video to embed.

HTML5 element <canvas> gives us an easy and powerful way to draw
graphics using JavaScript. It can be used to draw graphs, make photo
compositions or do simple animations.
Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
Here is a simple <canvas> element which has only two specific attributes
width and height plus all the core HTML5 attributes like id, name etc.
Note: Always specify an id attribute (to be referred to in a script), and a
width and height attribute to define the size of the canvas. To add a border,
use the style attribute.
How to create a HTML canvas?
A canvas is a rectangle like area on an HTML page. It is specified with
canvas element. By default, the <canvas> element has no border and no
content, it is like a container.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
HTML5 CANVAS

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>
Let us see a simple example on using <canvas> element in HTML5
document.

SVG(Scalable vector graphics) :-
 These are images created by a markup language that are reusable, simple, high-
quality standalone images that can be exported and imported as well.
 They are cross-browser friendly and can be used both on the client-side and server-
side of the application.
 They can be manipulated to create animations, hybrid images, etc by editing the
markup language or by editing using a stylesheet.
 Files come with a .svg extension.
PNG (Portable Network Graphics) :-
 They are portable, static and lossless with proper indexed-color control.
 Files come with a .png or .PNG extension.
 Cross-browser friendly and have streaming capabilities.
OVERVIEW OF GRAPHICS IN THE BROWSER

JPG or JPEG (Joint Photographic Experts Group):
 Lossy compressed with an adjustable degree of compression.
 Used mainly with digital photography and can achieve a compression of 10:1.
 Files come with a .jpg or jpeg extension.
 This is a type of language mainly used for designing and HTML and
SVG elements by using code.
 They are scalable and give more space for creativity to the user.
 Files usually come with a .css extension.
CSS (Cascading Style Sheets):

 SVG has better scalability. So it can be
printed with high quality at any
resolution
 SVG gives better performance with
smaller number of objects or larger
surface.
 SVG can be modified through script
and CSS.
 SVG is vector based and composed of
shapes.
 Canvas has poor scalability. Hence it
is not suitable for printing on higher
resolution
 Canvas gives better performance
with smaller surface or larger number
of objects.
 Canvas can be modified through
script only.
 Canvas is raster based and composed
of pixel.
SVG Vs HTML CANVAS
SVG HTML CANVAS

 A canvas is a rectangular area on an HTML page. By default, a canvas has
no border and no content.
<canvas id="myCanvas" width="200" height="100"></canvas>
 To add a border, use the style attribute.
 The HTML <form> element is used to create an HTML form for
user input: <form> Form Elements </form>
 The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
Using A Canvas
The <form> Element :-

• <input type="text"> Displays a single-line text input field
• <input type="radio"> Displays a radio button
• <input type="checkbox"> Displays a checkbox
• <input type="submit"> Displays a submit button
• <input type="button"> Displays a clickable button
The <input type="text"> defines a single-line input field for
text input.
Text Fields :-
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname"
name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname"
name="lname">
</form>
The <input> Element :-
 The HTML <input> element is the most used form element.
 An <input> element can be displayed in many ways, depending
on the type attribute.

Checkboxes :- The <input type="checkbox"> defines a checkbox.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
The Submit Button :-
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The <input type="submit"> defines a button for submitting the form data
to a form-handler.
The form-handler is specified in the form's action attribute

• The canvas paths allow you to draw custom shapes.
• In HTML5 canvas, a path consists of a list of zero or more subpaths.
• Each subpath contains one or more locations connected by
straight lines or curves.
fill(): The fill() method fills the current drawing (path). The default color is
black.
stroke() : The stroke() method actually draws the path.
beginPath() : The beginPath() method begins a path, or resets the current
path.
closePath(): The closePath() method creates a path from the current point
back to the starting point.
Working With Canvas Path

Use beginPath() method to start drawing the path.
Draw the path that makes a shape using lines, curves and other primitives.
After creating the path, call fill() method to fills subpaths by using the current
fill style or stroke() method to render the strokes of the current subpath by
using the current stroke styles. Your shape will not be visible until you call
fill() or stroke() methods.
The following web document uses the beginPath() method to draw two paths
by using different colors. At the end it uses closePath() method to close the
current subpath.
<!DOCTYPE html>
<html>
<head>
<title>Sample arcs example</title>
</head>
<body>
<canvas id="myCanvas" width="300"
height="600"></canvas>
<script>
Now call closePath() method to close the current subpath and starts a new
subpath that has a start point that is equal to the end of the closed subpath

var canvas = document.getElementById("myCanvas");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.beginPath(); // Start a new path.
ctx.lineWidth = "3"; Output
ctx.strokeStyle = "green"; // This path is green.
ctx.moveTo(0, 0);
ctx.lineTo(160, 160);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "blue"; // This path is blue.
ctx.moveTo(0, 0);
ctx.stroke();
ctx.closePath(); // Close the current path
}
</script>
</body>
</html>
A(0,0)

Many updates are come in the html5. In the html5 we draw the straight line.
Drawing Circles or
Arcs. with the help of the canvas our work get easy and we can also save the
lot of time.
With the updated feature of the html5 we can also draw the different type of
the text.
Image etc.with the help of the canvas we can also transformas and translation
rotation scaling.
Now we can see the straight line.
The canvas element (new to HTML5) is used to draw 2D graphics into an
HTML document. Using Javascript you can draw a wide range of objects
into an HTML canvas such as lines, text, images and shapes using several
built in functions
Drawing Straight Lines

The arc() is a method of the canvas 2D API. The arc() method allows you to
draw a circular arc. Syntax Following is the syntax to draw a circle with arc()
in HTML5arc(x, y, radius, start Angle, end Angle)arc(x, y, radius, start Angle,
end Angle, counterclockwise)The arc() method generates a circular arc with a
radius of radius, centered at (x, y). The path moves in the counter clockwise
direction and begins at start Angle and finishes at end Angle (defaulting to
clockwise).Example 1In the following example we are using arc() to draw a
circle on our canvas. for getting full circle we have to mention start angle as
0,end angle as 360.
<!DOCTYPE html>
<html>
<body>
<canvas id="Varma" width="300" height="150"></canvas>
<script>
var c = document.getElementById("Varma");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 360);
ctx.stroke();
</script>
</body>
</html>

1) beginPath() :- This method resets the current path.
2) moveTo(x, y) :- This method creates a new subpath with the given point.
3) closePath() :- This method marks the current subpath as closed, and starts
a new subpath with a point the same as the start and end of the newly closed
subpath.
4) fill() :- This method fills the subpaths with the current fill style.
5) stroke() :- This method strokes the subpaths with the current stroke style.
6) lineTo(x, y) :- This method adds the given point to the current subpath,
connected to the previous one by a straight line.
Line Methods
We require the following methods to draw lines on the canvas :-

<!DOCTYPE HTML>
<html><head><style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type = "text/javascript">
function drawShape() { // get the canvas element using the DOM( Document object model)
var canvas = document.getElementById('mycanvas’); // Make sure we don't execute
when canvas isn't supported
if (canvas.getContext) { // use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d’); // Filled triangle
Live Demo
Example
Following is a simple example which makes use of the above-mentioned methods to
draw a triangle.

ctx.beginPath(); // Stroked triangle
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
} }
</script>
</head>
<body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas>
</body>
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();

Following is an example code which draws a circle using HTML5 canvas.
The functions “context.beginPath()”, “context.arc()”, “context.fill()” and
“context.stroke()” used within a JavaScript function draws a circle filled
with pink color, which was embedded within the canvas element written
within the HTML5 code.
<canvas height="300" id="canvas" width="300">
<b>Canvas Not Supported By This Browser</b>
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.fillStyle="pink";
context.beginPath();
context.arc(150,150,100,0,Math.PI*2,true);
context.fill();
context.stroke();
</script>
DRAWING CIRCLE USING HTML5 CANVAS

In the Html5 , canvas element endorses basics text rendering on a line- by line
basics. The canvas text rendering framework provides two methods fillText()
and strockText() to draw text on canvas.
we can use front property (type :string) to identify several text settings such as size
font style and wight. The style can be italic bold and normal.
FillText() :-
The fillText() technique is used to render fill the text to the canvas by using the
existing fill style and
Font.
The text is the rendered using the font and text layout design as defined by the font
,textAlign,
textBaseline, and direction properties.
Drawing Text

In the html5 we use drawImage() method for the drawing an image
On the canvas. This method also draws parts of an image and increase
or decrease the size.
Drawing Images

The transform() method is used to alter the transformation matrix of the present
context. This process shifts the transformation matrix to use the matrix provided
by the arguments.
Syntax:-
Context.transform(a,b,c,d,e,f);
Understanding Transforms

Translation
Translate() transform method is use to translate the html5 canvas
context. Html5 canvas offers translate (x,y) process to move the canvas
and its origin to a distinct point in the grid
The translate () method remaps the (0,0) position on the canvas.
Rotation
The rotate() method rotates the present drawing .
We can use the rotate()transform technique to route the drawing . HTML5
canvas offers
Route (angle)process to route the canvas around the exiting origin.
Syntax-context.rotate(angel);

SCALING
Canvas scale used to scale the current drawing and draw enlarged shapes or
scaled down shapes and bitmaps.
Html5 canvas offer scale (x.,y) method to decrease the units in a canvas grid.
This process brings two parameters (x,y) where x is the scale factor in the
horizontal way and y is the scale factor in the vertical way These two parameter
should be positive number.
Syntax-
Context.scale(scalewidth, scaleheight);

html5 project.pptx

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie html5 project.pptx

Ähnlich wie html5 project.pptx (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

html5 project.pptx