Your SlideShare is downloading. ×
0
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Html5 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 101

222

Published on

Creative Lab Club

Creative Lab Club

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 101
  • 2. THE INTRO
  • 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. THE INTRO HTML5 = HTML 5 + CSS3 + JS Content Presentation Script
  • 5. HTML5 technologies: • Device Access • 3D, Graphics & Effects • CSS3 • Semantics • Multimedia • Connectivity • Performance & Integration • Offline & Storage
  • 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"/>
  • 9. New Structural Elements in HTML5
  • 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 :) --> </body>
  • 11. Header Markup <header> <img alt="my logo" src="logo.png" /> <h1><a href="#">my site</a></h1> </header>
  • 12. Navigation Markup <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
  • 13. Multi Navigation Markup <nav> <h2>title 1</h2> <ul> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a></li> </ul> <h2>title 2</h2> <ul> <li><a href="#">menu 3</a></li> <li><a href="#">menu 4</a></li> </ul> </nav>
  • 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>
  • 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. Footer Markup <footer> <p>This article was published on <time>13 FEB 2014</time></p> <small>&copy; Copyright HTML5 101</small> </footer>
  • 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
  • 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. 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. Input type Markup <input type="text" /> <input type="date" /> <input type="checkbox" /> <input type="radio" /> <input type="file" /> <input type="password" /> <input type="email" /> <input type="tel" /> <input type="url"/> <input type="search" /> <input type="color"> <input type="number" /> <input type="range" />
  • 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. 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. 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. 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. 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
  • 30. THANK YOU

×