Html5 101


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html5 101

  1. 1. HTML5 101
  2. 2. THE INTRO
  3. 3. THE INTRO •HTML4 •XHTML •WHATWG (Web Hypertext Application Technology Working Group) •W3C adopte HTML5 •XHTML 2 versus HTML5/HTML 5 •in 2009 HTML5 had “won.”
  4. 4. THE INTRO HTML5 = HTML 5 + CSS3 + JS Content Presentation Script
  5. 5. HTML5 technologies: •Device Access •3D, Graphics & Effects •CSS3 •Semantics •Multimedia •Connectivity •Performance & Integration •Offline & Storage
  6. 6. HTML5 gives us new standards for how we can create web
  7. 7. When Will HTML5 Be Ready for Use? 2022 Do I Have to Wait Until 2022 ? NO
  8. 8. New Structural Elements in HTML5 New Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ”"> <!DOCTYPE html>  Old Character Encoding  New Character Encoding <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" />  Old JavaScript and CSS Links <script type="text/javascript" src="script.js"></script>  New JavaScript and CSS Links <link rel="stylesheet" type="text/css" href="style.css"/> Old Doctype   <script src="script.js"></script> <link rel="stylesheet" href="style.css"/>
  9. 9. New Structural Elements in HTML5
  10. 10. HTML5 Starting Page <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>page title</title> <script src="my-script.js"></script> <link rel="stylesheet" href="my-css.css" /> </head> <body> <!-- add your HTML5 here :) -->
  11. 11. Header Markup <header> <img alt="my logo" src="logo.png" /> <h1><a href="#">my site</a></h1> </header>
  12. 12. Navigation Markup <nav> <ul> <li><a <li><a <li><a <li><a </ul> </nav> href="#">Home</a></li> href="#">About</a></li> href="#">News</a></li> href="#">Contact</a></li>
  13. 13. Multi Navigation Markup <nav> <h2>title 1</h2> <ul> <li><a href="#">menu <li><a href="#">menu </ul> <h2>title 2</h2> <ul> <li><a href="#">menu <li><a href="#">menu </ul> </nav> 1</a></li> 2</a></li> 3</a></li> 4</a></li>
  14. 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 incidi </article>
  15. 15. Section Markup <section> <h1> heading </h2> <section> <h3> title </h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid </section> </section>
  16. 16. Aside Markup <aside> <h2>links</h2> <nav> <ul> <li><a href="#">10 things about HTML5</a></li> <li><a href="#">10 things about CSS3</a></li> <li><a href="#">10 things about JavaScript</a></li> </ul> </nav> </aside>
  17. 17. Footer Markup <footer> <p>This article was published on <time>13 FEB 2014</time></p> <small>&copy; Copyright HTML5 101</small> </footer>
  18. 18. Details Markup <details open> <summary>details 1</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi </details> <details> <summary>details 2</summary> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi </details>
  19. 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" type="a" type="A" type="i" type="I" = = = = = 1, a, A, i, I, 2, 3,4, 5 b, c, d, e B, C, D, E ii, iii, iv, v II, III, IV, V
  20. 20. Definition list Markup <h1>course infos</h1> <dl> <dt>Title:</dt> <dd>HTML5 ISI</dd> <dt>cover:</dt> <dd>HTML5</dd> <dd>CSS3</dd> <dd>JS</dd> <dt>Club:</dt> <dd>Creative Lab</dd> </dl>
  21. 21. Form Markup <form><fieldset> <legend>Fieldset legend </legend> <label for="date">What date do you leave?</label> <input required type="date" id="date" name="date" /> <textarea id="textarea" rows="5" cols="40">This is a textarea</textarea> <select id="select"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> </fieldset></form>
  22. 22. Input type Markup <input <input <input <input <input <input <input <input <input <input <input <input <input type="text" /> type="date" /> type="checkbox" /> type="radio" /> type="file" /> type="password" /> type="email" /> type="tel" /> type="url"/> type="search" /> type="color"> type="number" /> type="range" />
  23. 23. Input attributes Required Input  <input required type="****" /> Autofocus  <input autofocus type="****" /> Placeholder  <input type="****" placeholder="sample text" /> Multiple File Uploads  <input multiple type="file" id="upload" name="upload" /> Value , id , class ...
  24. 24. Input & Datalist Markup <label for="sport">What's your favourite sport?</label> <input list="sportlist" type="text" id="sport" name="sport" /> <datalist id="sportlist"> <option label="Basketball" value="Basketball" /> <option label="Football " value="Football" /> <option label="Handball" value="Handball" /> </datalist>
  25. 25. Video Markup <video src="movie.mp4"></video> OR <video src="movie.mp4" /> OR <video width="320" height="240" controls > <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <p>Sorry, your browser is really old. Please upgrade.</p> </video> Option attributes: preload, autoplay, poster="img.jpg", loop, audio="muted"
  26. 26. Audio Markup <audio src="music.mp3" controls /> OR <audio controls> <source src="music.mp3" type="audio/mp3" /> <source src="music.ogg" type="audio/ogg" /> </audio> Option attributes: controls, preload, autoplay, loop
  27. 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. 28. Intro to the DOM What's DOM ? Why I should know it ? How I use it ?
  29. 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
  30. 30. THANK YOU