By
Avinash Malhotra
Learn Web Designing Online
CONTENT
 Introduction.
 What's so great about HTML5.
 New Schematic Tags in HTML5.
 New Vs Old Tags.
 HTML5 Form.
 A...
INTRODUCTION
HTML5 is the latest version of Hypertext Markup
Language, the code that describes web pages. It's
actually th...
WHAT'S SO GREAT ABOUT HTML5?
 HTML5 has been designed to deliver almost everything
you'd want to do online without requir...
Element Level Purpose
<article> <Block> Independent content such as a blog post or article.
<aside> <Block> Content Slight...
NEW TAGS VS OLD
Old Tags New Tags
 <input type=”text” autocomplete=”on” required />
 <input type=”email” required
placeholder=you@domain.com />
 <input t...
 <audio src=“ song.mp3” controls autoplay></audio>
Click Here For Link audio.html
 <video width=“500px” src=“video.mp4 c...
Background: -webkit-linear-gradient(left, red,
#83F59E)
Background:-webkit-radial-gradient(center, red,
#83F59E);
Background: -webkit-gradient(radial, center center, 0,
center center, 460, from(#1A82F7), to(#2F2727))
 SVG: Scalable Vector Graphics.
We can create rectangle & Circle using SVG.
For Rectangle;
<svg width=“500” height=“300”>...
For Circle
<svg width="500" height="300">
<circle cx="300" cy="70" r="40"
stroke="black"
stroke-width="2" fill="red" />
</...
 The HTML5 <canvas> element is used to draw
graphics, on the fly, via scripting (usually
JavaScript).
 The <canvas> elem...
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
Your browser does not support the HTML5
...
ANIMATION
 -webkit-transition( property time, )
For Chrome and Safari
 -moz-transition( property time,)
For Mozila
 -o-...
Learn Complete Web Designing Online
Learn HTML5 Online
Upcoming SlideShare
Loading in...5
×

HTML5 Tutorial

342

Published on

HTML5 Introduction.Learn HTML5, the latest and and smartest version oh HTMl so far.

Published in: Education, Technology
1 Comment
0 Likes
Statistics
Notes
  • hello, my name is miss lynda i am a single girl i like to make new friends please contact me by my Email address > weahlynda@hotmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
342
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Tutorial

  1. 1. By Avinash Malhotra Learn Web Designing Online
  2. 2. CONTENT  Introduction.  What's so great about HTML5.  New Schematic Tags in HTML5.  New Vs Old Tags.  HTML5 Form.  Audio & Video Tags.  Linear & Radial Gradients in CSS3.  SVG Elements.  Canvas Intro.  Animation in CSS3.
  3. 3. INTRODUCTION HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It's actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen HTML + CSS + JavaScript = HTML 5
  4. 4. WHAT'S SO GREAT ABOUT HTML5?  HTML5 has been designed to deliver almost everything you'd want to do online without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build incredibly complicated applications that run in your browser.  There's more. HTML5 isn't proprietary, so you don't need to pay royalties to use it. It's also cross-platform, which means it doesn't care whether you're using a tablet or a smartphone, a netbook, notebook or ultrabook or a Smart TV: if your browser supports HTML5, it should work flawlessly. Inevitably, it's a bit more complicated than that. More about that in a moment.
  5. 5. Element Level Purpose <article> <Block> Independent content such as a blog post or article. <aside> <Block> Content Slightly related to primary content on page. <figure> <Block> Grouping stand-alone content, such as video or image. <figcaption> <Text> For use with <figure>, (optionally) used to provide caption. <footer> <Block> Providing author, copyright data etc. <header> <Block> Introductory heading, could include navigation. <hgroup> <Block> For grouping <h1> to <h6> <nav> <Block> Navigation – typically site level. <mark> <Text> Text to be referenced or highlited. <section> <Block> Grouping of content usually with a heading, similar to chapters. <time> <Text> For date and/or time representation.
  6. 6. NEW TAGS VS OLD Old Tags New Tags
  7. 7.  <input type=”text” autocomplete=”on” required />  <input type=”email” required placeholder=you@domain.com />  <input type=”url” placeholder=http://www.you.com/>  <input type=”phone” pattern=”ddd=dddd” />  <input type=”tel”/>  <input type="text" id="speechInput" x-webkit-speech placeholder="Speak Now....." />  <input type="search" results="10" placeholder="Search..." />
  8. 8.  <audio src=“ song.mp3” controls autoplay></audio> Click Here For Link audio.html  <video width=“500px” src=“video.mp4 controls” autoplay controls></video> Click Here For Link video.html
  9. 9. Background: -webkit-linear-gradient(left, red, #83F59E)
  10. 10. Background:-webkit-radial-gradient(center, red, #83F59E);
  11. 11. Background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1A82F7), to(#2F2727))
  12. 12.  SVG: Scalable Vector Graphics. We can create rectangle & Circle using SVG. For Rectangle; <svg width=“500” height=“300”> <rect x=“” y=“” width=“” height=“” fill=“” stroke=“” stroke-width=“”/> </svg> Click Here For Results
  13. 13. For Circle <svg width="500" height="300"> <circle cx="300" cy="70" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> Click Here For Results.
  14. 14.  The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).  The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
  15. 15. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas> Click Here For Demo Click Here For more Canvas Examples
  16. 16. ANIMATION  -webkit-transition( property time, ) For Chrome and Safari  -moz-transition( property time,) For Mozila  -o-transition( property time,) For Opera.
  17. 17. Learn Complete Web Designing Online Learn HTML5 Online
  1. A particular slide catching your eye?

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

×