Introduction to HTML 5 Key Features

Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd

Shanibam
shanisoftech@gmail.com
www.facebook.com/shanimanjara
twitter.com/username
in.linkedin.com/in/shaniba
Introduction to HTML 5

What is HTML?
• Hypertext Markup Language
• HTML elements form the building blocks of all websites
• Several HTML 4.01 elements are never used or never used the way
they were intended

What is html5?
• Latest version of html
• Combines several technology
• CSS3,javascript,jquery etc..
• Backward compatible
• HTML5 brings new changes: which include; New elements for
drawing graphics, adding media content, better page structure,
better form handling, several APIs to drag/drop elements, and find
Geolocation, include web storage, application cache etc.

Key features in HTML5
Semantics Video
Audio Canvas
Drag & Drop Local Storage
Geolocation
Form
elements

New in HTML5 — Semantics
<nav>
Semantic elements: header, footer, section, article etc.
replace contains HTML code like this: <div id="nav">, <div class="header">, or <div id="footer">

New Markup elements
<HEADER>
 Specifies a group of navigation elements for the
document.
 All major browsers support <Header> Tag.
How <Header> works??
<Header>
<h1>Welcome to my website</h1>
<p>This is just an example</p>
</Header>

New Markup elements
<FOOTER>
 All major browsers support <FOOTER> Tag.
 defines the footer of a section or document.
 contains the name of the author, the date the
document was written and/or contact
information.

New Markup elements
How <Footer> works:-
<!DOCTYPE HTML>
<html>
<body>
<footer><p>This document was written in 2013</p>
<p> all copyright reserved © shan</p>
</footer>
</body></html>

New Markup elements
<ASIDE>
 Defines some content aside from the content it is placed in.
 The aside content should be related to the surrounding
content.
 All major browsers support <Aside> Tag.
How <Aside> works:-
<p>Govt Engg college Idukki is situated in painavu,the major
town in Idukki district.</p>
<aside>
<h4>Idukki Dam</h4>
Asia’s largest arch dam. Just 3km away from GECI .
</aside>

New in HTML5 — <Video>
• videos can be played back on the latest mobile devices and even on older browsers that
require Flash.

HTML5 VIDEO
How can we use it??
<video src="C:UsersshaniDownloadsVideovideo1.mp4"
width="320" height="240" controls="controls">
</video>

HTML5 Drag and Drop
Drag and drop the items from one location to another location on the same webpage.

New in HTML5 — Geolocation
Now visitors can choose to share their physical location with
your web application

HTML5 vs HTML4
1. HTML5 uses new
structures such as drag,
drop and much more.
2.HTML 5 can contain
embedded video and
audio without using flash
player.
3.HTML 5 is capable of
handling inaccurate syntax
1.HTML 4 uses common
structures like headers ,
footers.
2.HTML 4 cannot embed
video or audio directly and
makes use of flash player
for it.
3. HTML 4 cannot handle
inaccurate syntax

4. HTML 5 introduced canvas
for drawing paths of
rectangle, arcs, lines,images
5. In HTML 5, new tags and
new features like local
storage are enhanced.
4. HTML 4 has traditional API’s
which does not include
canvas.
5. In HTML 4, local storage is
not possible and tags that
can handle only one
dimension are present.

Want to learn more about programming or Looking to become a good programmer?
Are you wasting time on searching so many contents online?
Do you want to learn things quickly?
Tired of spending huge amount of money to become a Software professional?
Do an online course
@ baabtra.com
We put industry standards to practice. Our structured, activity based courses are so designed
to make a quick, good software professional out of anybody who holds a passion for coding.

Follow us @ twitter.com/baabtra
Like us @ facebook.com/baabtra
Subscribe to us @ youtube.com/baabtra
Become a follower @ slideshare.net/BaabtraMentoringPartner
Connect to us @ in.linkedin.com/in/baabtra
Give a feedback @ massbaab.com/baabtra
Thanks in advance
www.baabtra.com | www.massbaab.com |www.baabte.com

Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Cafit Square,
Hilite Business Park,
Near Pantheerankavu,
Kozhikode
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com
Contact Us

Introduction to HTML 5 Key Features

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Introduction to HTML 5 Key Features

Ähnlich wie Introduction to HTML 5 Key Features (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to HTML 5 Key Features