6. HTML5 gives us new standards for how we can
create web applications, with powerful APIs for
things such as canvas for drawing, drag and
drop, offline storage, and native video in the
browser.
7. When Will HTML5 Be Ready for Use?
2022
Do I Have to Wait Until 2022 ?
NO
8. New Structural Elements in HTML5
●
Old Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
●
Old Character Encoding
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
●
Old JavaScript and CSS Links
●
New Doctype
<!DOCTYPE html>
●
New Character Encoding
<meta charset="utf-8" />
●
New JavaScript and CSS Links
<script type="text/javascript" src="script.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="style.css"/>
14. Article Markup
<article>
<header>
<h1>title</h1> <p>14nd Feb 2014</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde
omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</article>
15. Section Markup
<section>
<h1> heading </h2>
<section>
<h3> title </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</section>
18. Details Markup
<details open>
<summary>details 1</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </p>
</details>
<details>
<summary>details 2</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </p>
</details>
19. Order list Markup
<ol reversed>
<li>Red</li> <li>Green</li> <li>Blue</li>
</ol>
<ol start="2" type="I">
<li>Red</li> <li>Green</li> <li>Blue</li>
</ol>
type="1" = 1, 2, 3,4, 5
type="a" = a, b, c, d, e
type="A" = A, B, C, D, E
type="i" = i, ii, iii, iv, v
type="I" = I, II, III, IV, V
27. Progress & Meter Markup
Progress
<p>You are downloading a very important file, please wait.</p>
<progress value="45" max="100"></progress><span> 45% complete</span>
Meter
<meter value="10" min="0" max="100" low="40" high="90" optimum="100"></meter>
<meter value="80" min="0" max="100" low="40" high="90" optimum="100"></meter>
<meter value="100" min="0" max="100" low="40" high="90" optimum="100"></meter>
28. Intro to the DOM
What's DOM ?
Why I should know it ?
How I use it ?
29. What's Next ?
HTML5 developing doesn't need more than a text editor and a latest
browser ,
So , I advise you to use one from this list as a text editor :
Sublime text 2 , Bracket , Adobe Edge Code , Adobe DreamWeaver .
And use chrome (canary) or firefox (Nightly) as a browser