0
Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
docu...
HTML 5
Jaseena A P
jsnp65@gmail.com
www.facebook.com/Jaseena
Muhammed A P
twitter.com/username
in.linkedin.com/in/profilen...
What is HTML 5
 HTML5 is the standard for HTML
 Use of internet changed a lot since HTML 4.01 (1999)
 Several HTML 4.01...
How Did HTML5 Get Started?
 Cooperation between World Wide Web
Consortium (W3C) and Web Hypertext Application
Technology ...
Some rules of HTML5 ….
New features should be based on HTML, CSS, DOM, and
JavaScript
Reduce the need for external plugi...
New features in HTML5:
The canvas element for drawing
The video and audio elements for media playback
Better support fo...
New Markup elements
<HEADER>
 Specifies a group of navigation elements for the
document.
 All major browsers support <He...
New Markup elements
<FOOTER>
 All major browsers support <FOOTER> Tag.
 defines the footer of a section or document.
 c...
New Markup elements
How <Footer> works:-
<!DOCTYPE HTML>
<html>
<body>
<footer><p>This document was written in 2013</p>
<...
New Markup elements
<ARTICLE>
 An article should make sense on its own and it should
be possible to distribute.
 Example...
New Markup elements
How <Article> works:-
<article>
if I don't initialize a variable with DEFAULT or SET, then it's
NULL...
New Markup elements
<ASIDE>
 Defines some content aside from the content it is placed in.
 The aside content should be r...
New Markup elements
<SECTION>
 Defines sections in a document like :-
Chapters.
 All major browsers support <Section> T...
HTML5 VIDEO
Video on the Web:-
 Until now, there has never been a standard for showing video on a
web page.
 Today, mos...
HTML5 VIDEO
How can we use it??
<video src="C:UsersJaseenaDownloadsVideovideo1.mp4"
width="320" height="240" controls="co...
HTML5 VIDEO
All <video> Attributes:-
ValueAttribute
mutedaudio
autoplayautoplay
controlscontrols
pixelsheight
looploop
ur...
HTML5 AUDIO
Audio on the Web:-
 Until now, there has never been a standard for playing
audio on a web page.
 Today, mos...
HTML5 AUDIO
How can we use it??
<audio src="C:UsersJaseenaDownloadsMusicsong1.mp3“
controls="controls">
</audio>
HTML5 AUDIO
All <audio> Attributes:-
ValueAttribute
auto playauto play
controlscontrols
looploop
preloadpreload
urlsrc
HTML CANVAS
What is Canvas??
<canvas> tag is used to display graphics.
it is only a container for graphics, we must use...
HTML CANVAS
How <Canvas> works:-
<canvas id="myCanvas">your browser does not support the
canvas tag </canvas>
<script typ...
HTML5 INPUT TYPES
 HTML5 has several new input types for forms. These new
features allow better input control and validat...
HTML5 FORM ELEMENTS
HTML5 has the following new form elements:
- <datalist>
- <keygen>
- <output>
HTML5 FORM ELEMENTS
<datalist>
 The <datalist> element specifies a list of pre-defined
options for an <input> element.
...
HTML5 FORM ELEMENTS
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Fir...
HTML5 FORM ELEMENTS
 <keygen>
 The purpose of the <keygen> element is to provide a
secure way to authenticate users.
 T...
HTML5 FORM ELEMENTS
<form action=“ " method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name=...
HTML5 FORM ELEMENTS
 <output>
The <output> element represents the result of a calculation
(like one performed by a script...
HTML5 FORM ELEMENTS
THANK YOU
If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.co...
Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, N...
Html5
Html5
Upcoming SlideShare
Loading in...5
×

Html5

709

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
709
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Html5"

  1. 1. 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
  2. 2. HTML 5 Jaseena A P jsnp65@gmail.com www.facebook.com/Jaseena Muhammed A P twitter.com/username in.linkedin.com/in/profilena me 9539443588
  3. 3. What is HTML 5  HTML5 is the standard for HTML  Use of internet changed a lot since HTML 4.01 (1999)  Several HTML 4.01 elements are never used or never used the way they were intended  To better handle todays internet, HTML5 brings new changes: New elements for drawing graphics, adding media content, better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web storage, application cache, web workers, etc.
  4. 4. How Did HTML5 Get Started?  Cooperation between World Wide Web Consortium (W3C) and Web Hypertext Application Technology Working Group (WHATWG)
  5. 5. Some rules of HTML5 …. New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public.
  6. 6. New features in HTML5: The canvas element for drawing The video and audio elements for media playback Better support for local offline storage New content specific elements, like article, footer, header, nav, section New form controls, like calendar, date, time, email, url.
  7. 7. 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>
  8. 8. 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.
  9. 9. New Markup elements How <Footer> works:- <!DOCTYPE HTML> <html> <body> <footer><p>This document was written in 2013</p> <p> all copyright reserved &copy; Jaseena ap</p> </footer> </body></html>
  10. 10. New Markup elements <ARTICLE>  An article should make sense on its own and it should be possible to distribute.  Examples of possible articles: forum post newspaper article blog entry  All major browsers support <Article> Tag.
  11. 11. New Markup elements How <Article> works:- <article> if I don't initialize a variable with DEFAULT or SET, then it's NULL, and adding 1 to NULL always yields NULL. </article>
  12. 12. 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>
  13. 13. New Markup elements <SECTION>  Defines sections in a document like :- Chapters.  All major browsers support <Section> Tag
  14. 14. HTML5 VIDEO Video on the Web:-  Until now, there has never been a standard for showing video on a web page.  Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.  HTML5 specifies a standard way to include video, with the video element. Video Formats:- (Ogg , MPEG 4 , WebM).
  15. 15. HTML5 VIDEO How can we use it?? <video src="C:UsersJaseenaDownloadsVideovideo1.mp4" width="320" height="240" controls="controls"> </video>
  16. 16. HTML5 VIDEO All <video> Attributes:- ValueAttribute mutedaudio autoplayautoplay controlscontrols pixelsheight looploop urlposter preloadpreload urlsrc pixelswidth
  17. 17. HTML5 AUDIO Audio on the Web:-  Until now, there has never been a standard for playing audio on a web page.  Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins.  HTML5 specifies a standard way to include audio, with the audio element.  The audio element can play sound files, or an audio stream. Audio Formats:- (Ogg Vorbis, MP3, Wav).
  18. 18. HTML5 AUDIO How can we use it?? <audio src="C:UsersJaseenaDownloadsMusicsong1.mp3“ controls="controls"> </audio>
  19. 19. HTML5 AUDIO All <audio> Attributes:- ValueAttribute auto playauto play controlscontrols looploop preloadpreload urlsrc
  20. 20. HTML CANVAS What is Canvas?? <canvas> tag is used to display graphics. it is only a container for graphics, we must use a script to actually paint graphics. All major browsers support <Canvas> Tag.
  21. 21. HTML CANVAS How <Canvas> works:- <canvas id="myCanvas">your browser does not support the canvas tag </canvas> <script type="text/javascript"> varcanvas=document.getElementById('myCanv'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> ValueAttribute pixelsheight pixelswidth
  22. 22. HTML5 INPUT TYPES  HTML5 has several new input types for forms. These new features allow better input control and validation.  color  date  datetime  datetime-local  email  month  number  range  search  tel  time  url  week
  23. 23. HTML5 FORM ELEMENTS HTML5 has the following new form elements: - <datalist> - <keygen> - <output>
  24. 24. HTML5 FORM ELEMENTS <datalist>  The <datalist> element specifies a list of pre-defined options for an <input> element.  The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.  Use the <input> element's list attribute to bind it together with a <datalist> element.
  25. 25. HTML5 FORM ELEMENTS <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
  26. 26. HTML5 FORM ELEMENTS  <keygen>  The purpose of the <keygen> element is to provide a secure way to authenticate users.  The <keygen> tag specifies a key-pair generator field in a form.  When the form is submitted, two keys are generated, one private and one public.  The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
  27. 27. HTML5 FORM ELEMENTS <form action=“ " method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>
  28. 28. HTML5 FORM ELEMENTS  <output> The <output> element represents the result of a calculation (like one performed by a script). <form oninput="x.value=parseInt(a.value)+parseInt (b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>
  29. 29. HTML5 FORM ELEMENTS
  30. 30. THANK YOU
  31. 31. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  32. 32. Contact Us 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 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×