This document provides an introduction to HTML5. It explains that HTML5 is the latest version of HTML that combines technologies like CSS3 and JavaScript. It introduces several new elements in HTML5 like video, audio, canvas, drag and drop capabilities, local storage, geolocation, and improved form handling. It provides examples of how to use new semantic elements like header, footer, aside, and nav. It also compares HTML5 to HTML4, noting newer features in HTML5 like embedded video/audio, canvas drawing, and local storage support.
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Introduction to HTML 5 Key Features
1.
2. 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
4. 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
5. 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.
6. Key features in HTML5
Semantics Video
Audio Canvas
Drag & Drop Local Storage
Geolocation
Form
elements
7. 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">
8. 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>
9. 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.
11. 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>
12. New in HTML5 — <Video>
• videos can be played back on the latest mobile devices and even on older browsers that
require Flash.
13. HTML5 VIDEO
How can we use it??
<video src="C:UsersshaniDownloadsVideovideo1.mp4"
width="320" height="240" controls="controls">
</video>
14. HTML5 Drag and Drop
Drag and drop the items from one location to another location on the same webpage.
15. New in HTML5 — Geolocation
Now visitors can choose to share their physical location with
your web application
16. 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
17. 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.
19. 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.
20. 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
21. 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