Html5 shubelal


Published on

HTML5 CSS3 Tutorial

Published in: Design, 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
  • The DOCTYPE tag always begins with an exclamation point and is always placed at thebeginning of the document, before any other tag. Most HTML tags are not case-sensitive,but the word DOCTYPE should always be uppercase.Using the DOCTYPE tag is like signing a contract. It is an optional tag, but when you useit, you are promising that your coding will conform to certain standards. When a Webbrowser encounters a DOCTYPE tag, it processes the page in standards mode. When itdoesn’t encounter the DOCTYPE tag, it assumes that there is something quirky about thepage, and processes the page in quirks mode. When the browser sees the tag <!DOCTYPEhtml>, it assumes you are using HTML5.
  • Html5 shubelal

    1. 1. HTML5By: Shubelal kumar
    2. 2. Agenda• HTML• HTML versions• HTML5• How Did HTML5 Get Started?• Rules For HTML5• HTML5 Less Header Code• No need for type attribute• More Semantic HTML Tags• Media Tags• Canvas• Web storage
    3. 3. HTML• Hyper Text Markup Language is thelanguage for specifying the static contentof Web pages.• Hyper Text refers to the fact that Webpages are more than just text.• can contain multimedia, provide links for jumpingwithin & without.
    4. 4. HTML• Markup refers to the fact that it works byaugmenting text with special symbols (tags) thatidentify structure and content type.• There are many versions of HTML
    5. 5. HTML Versions• HTML 2.0 November 24, 1995• HTML 3.2 January 1997• HTML 4.0 December 1997• HTML 4.0 April 1998was reissued with minor edits withoutincrementing the version number.
    6. 6. HTML Versions• HTML 4.01 December 1999• HTML5 January 2008was published
    7. 7. HTML5• HTML5 will be the newstandard for HTML, XHTML• The previous version ofHTML came in 1999. Theweb has changed a lot sincethen.
    8. 8. HTML5• HTML5 is still a work inprogress.• However, most modernbrowsers have someHTML5 support.
    9. 9. How Did HTML5 Get Started?• HTML5 is the cooperation between theWorld Wide Web Consortium (W3C)and the Web Hypertext ApplicationTechnology Working Group (WHATWG).
    10. 10. How Did HTML5 Get Started?• WHATWG was working with web formsand applications, and W3C was workingwith XHTML 2.0. In 2006, they decided tocooperate and create a new version ofHTML
    11. 11. Rules For HTML5• New features should be based on HTML,CSS and JavaScript.• Reduce the need for external plugins (likeFlash)
    12. 12. Rules For HTML5• Better error handling.• More markup to replace scripting.• HTML5 should be device independent.
    13. 13. HTML5
    14. 14. Less Header Code• With HTML5<!DOCTYPE HTML><html><head><meta charset=”utf-8”><title>MSP</title></head>
    15. 15. Less Header Code• Pre HTML5<!DOCTYPE HTML PUBLIC "-//W3C//DtdHTML 4.01 Transitional//EN" ""><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>MSP</title></head>
    16. 16. No need for type attribute• With HTML5<script src=”MSP.js”></script><link href=”MSP.css”></link>
    17. 17. No need for type attribute• Pre HTML5<script type=”text/javascript” src=”script.js”></script><link type=”text/css” href=”style.css”></link>
    18. 18. More Semantic HTML Tags• Output<output name="result"></output> Attributeso Nameo For
    19. 19. More Semantic HTML Tags• progress<progress id="p"max=100><span>0</span>%</progress> Attributeso Valueo Max
    20. 20. More Semantic HTML Tags• Meter<meter min="0“ max="100“value="75"></meter>• Attributeso Valueo Maxo Mino Higho Lowo Form
    21. 21. More Semantic HTML Tags• Details and Summary The content of a <details> element shouldnot be visible unless the open attribute isset. User can show the content
    22. 22. More Semantic HTML Tags<details><summary>coping 1999-2010</summary><p> - by Refsnes Data. All Rights Reserved.</p><p>All content and graphics on this web siteare the property of the company RefsnesData.</p></details> Attributeso Open
    23. 23. More Semantic HTML Tags• Address• The <address> tag defines the contactinformation for the author/owner of adocument or an article.• If the <address> element is inside the<body> element, it represents contactinformation for the document.
    24. 24. More Semantic HTML Tags• Address• If the <address> element is inside an<article> element, it represents contactinformation for that article.• The text in the <address> element usuallyrenders in italic. Most browsers will add aline break before and after the addresselement.
    25. 25. More Semantic HTML Tags• Ex :<address>Written by <ahref="">JonDoe</a>.<br />Visit us at:<br /><br />Box 564, Disneyland<br />USA</address>
    26. 26. More Semantic HTML Tags• Figure<figure><img src=“MSP.jpg" alt=“MSP"><figcaption>Microsoft studentpartner</figcaption></figure>
    27. 27. More Semantic HTML Tags• Hgroup<!DOCTYPE html><html><body><hgroup><h1>Welcome to my WWF</h1><h2>For a living planet</h2></hgroup></body></html>
    28. 28. More Semantic HTML Tags• ArticleExamples of possible articles:forum postnewspaper articleblog entryuser comment
    29. 29. More Semantic HTML Tags• Section• The <section> tag defines sections in adocument. Such aschapters, headers, footers, or any othersections of the document.
    30. 30. More Semantic HTML Tags• <article>• <hgroup>• <h1>Mobile Phones</h1>• <h2>Different Smart Phones</h2>• </hgroup>• <p>Some of the more popular mobile smart phones</p>• <section>• <h1>Apple iPhone</h1>• <p>A popular smart phone from Apple.</p>• </section>• <section>• <h1>Android-based Phones</h1>• <p>A series of smart phones that use the Google Android operatingsystem.</p>• </section>• </article>
    31. 31. More Semantic HTML Tags• There are a lot of new tags at HTML5which we used them a lot.
    32. 32. Media Tags• Video• Today, most videos are shown through a plug-in (likeflash). However, different browsers may have differentplug-ins.• HTML5 defines a new element which specifies astandard way to embed a video/movie on a web page
    33. 33. Media Tags• <video width="320" height="240"controls="controls"><source src="movie.mp4" type="video/mp4" /><source src="movie.ogg" type="video/ogg" />Your browser does not support the video tag.</video>• The control attribute adds video controls, likeplay, pause, and volume.
    34. 34. Media TagsBrowser MP4 WebM OggInternetExplorer 9YES NO NOFirefox 4.0 NO YES YESGoogleChrome 6YES YES YESApple Safari 5 YES NO NOOpera 10.6 NO YES YESCurrently, there are 3 supported video formats forthe <video> element: MP4, WebM, and Ogg:•MP4 = MPEG 4 files with H264 video codec and AAC audio codec•WebM = WebM files with VP8 video codec and Vorbis audio codec•Ogg = Ogg files with Theora video codec and Vorbis audio codec
    35. 35. Media Tags• Video/Dom• The HTML5 <video> element also hasmethods, properties, and events.• There are methods for playing, pausing, andloading, for example. There are properties(e.g. duration, volume, seeking) that you canread or set. There are also DOM events thatcan notify you, for example, when the<video> element begins to play, is paused, isended, etc
    36. 36. Media TagsMethods Properties Eventsplay() currentSrc playpause() currentTime pauseload() videoWidth progresscanPlayType videoHeight errorduration timeupdateended endederror abortpaused emptymuted emptiedseeking waitingvolume loadedmetadataheightwidth
    37. 37. Media Tags• There is an Example for video/Dom
    38. 38. Media Tags• Audio• Today, most audio files are played through a plug-in (likeflash). However, different browsers may have differentplug-ins.• HTML5 defines a new element which specifies astandard way to embed an audio file on a web page: the<audio> element
    39. 39. Media Tags• <audio controls="controls">• <source src="song.ogg" type="audio/ogg" />• <source src="song.mp3" type="audio/mpeg" />• Your browser does not support the audio element.• </audio>• The control attribute adds audio controls, likeplay, pause, and volume.
    40. 40. Media TagsBrowser MP3 Wav OggInternetExplorer 9YES NO NOFirefox 4.0 NO YES YESGoogleChrome 6YES YES YESApple Safari 5 YES YES NOOpera 10.6 NO YES YESCurrently, there are 3 supported file formats forthe <audio> element: MP3, Wav, and Ogg:
    41. 41. Canvas• What is Canvas?• The HTML5 canvas element usesJavaScript to draw graphics on a webpage.
    42. 42. Canvas• A canvas is a rectangular area, and youcontrol every pixel of it.• The canvas element has several methodsfor drawingpaths, boxes, circles, characters, andadding images.
    43. 43. Canvas• Create a Canvas Element• <canvas id="myCanvas" width="200"height="100"></canvas>
    44. 44. Canvas• Draw With JavaScript• <script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>
    45. 45. Web Storage• HTML5 offers two new objects for storingdata on the client:localStorage - stores data with no timelimitsessionStorage - stores data for onesession
    46. 46. Web Storage• Earlier, this was done with cookies.Cookies are not suitable for large amountsof data, because they are passed on byEVERY request to the server, making itvery slow and in-effective.
    47. 47. Web Storage• In HTML5, the data is NOT passed on byevery server request, but used ONLYwhen asked for. It is possible to store largeamounts of data without affecting thewebsites performance.
    48. 48. Web Storage• The data is stored in different areas fordifferent websites, and a website can onlyaccess data stored by itself.• HTML5 uses JavaScript to store andaccess the data
    49. 49. The localStorage Object• The localStorage object stores the datawith no time limit. The data will beavailable the next day, week, or year.
    50. 50. The localStorage Object• How to create and access a localStorage:<script type="text/javascript">localStorage.lastname="Smith";document.write("Last name: " +localStorage.lastname);</script></body>
    51. 51. The sessionStorage Object• The sessionStorage object stores the datafor one session. The data is deleted whenthe user closes the browser window.
    52. 52. The sessionStorage Object• How to create and access asessionStorage:<script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>
    53. 53. Review• HTML• HTML5• How Did HTML5 Get Started?• RulesFor HTML5• HTML5 Less Header Code• No need for type attribute• More Semantic HTML Tags• Media Tags• Canvas• Web storage
    54. 54. Questions?
    55. 55. Thank you