Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyHTML5 Tutorial
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyHTML5 TutorialKeyPoints to develop in ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyTo introduce the reader or the learner...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyAfter developing the KeyPoints outline...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology☺ (Section 1) HTML5 Introduction☺ (Sec...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HTML5 Introduction – Summa...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HTML5 Introduction – HighP...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HighPoints – How Did HTML5...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HighPoints – How Did HTML5...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HighPoints – New Features....
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HighPoints – Browser Suppo...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HTML5 New Elements – Summa...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HTML5 New Elements – HighP...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Elements ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Markup El...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Markup El...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Markup El...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Markup El...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Media Ele...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – The Canvas El...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – The Canvas El...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Form Elem...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Input Typ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Input Typ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HTML5 Video – Summary.☺ Ma...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HTML5 Video – HighPoints☺ ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – Video on the ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – Video Formats...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – Video Formats...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – Video Formats...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – All <video> A...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – All <video> A...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HTML5 Audio – Summary☺ HTM...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HTML5 Audio – HighPoints.☺...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – Audio on the ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – Audio Formats...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – Audio Formats...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – Audio Formats...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – All <audio> A...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HTML5 Canvas – Summary.☺ T...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HTML5 Canvas – HighPoints....
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – What is Canva...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – Create a Canv...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – Draw With Jav...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – Draw With Jav...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – Understanding...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas E...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HTML5 Web Storage – Summar...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HTML5 Web Storage – HighPo...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – Storing Data ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – Storing Data ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – The localStor...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – The localStor...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – The sessionSt...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – The sessionSt...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyHTML5 Tutorial – Conclusion.☺ At this ...
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology
Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology
Upcoming SlideShare
Loading in …5
×

HTML5 Tutorial Outline

352
-1

Published on

After developing the KeyPoints outlined in this publication, you should mainly be able:
- To comprehend the new features in HTML5.
- Explore some of the most interesting new features of HTML5.

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

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

No notes for slide

HTML5 Tutorial Outline

  1. 1. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyHTML5 Tutorial
  2. 2. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyHTML5 TutorialKeyPoints to develop in your own time!Introductory concepts in HTML5 @ OxfordCambridge.Org all for free and free for all.The information gathered here are under the format of KeyPoints for readers to develop in their owntime. Some tips on how to proceed, perhaps:- Identify all the Keypoints on which you feel a need to expand your knowledge.- Choose a good book or two or info from Internet and then work towards gaining the needed knowledge.Please Enjoy!
  3. 3. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyTo introduce the reader or the learner tothe next generation of HTML: HTML5.Aim of publication
  4. 4. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyAfter developing the KeyPoints outlined in this publication, you shouldmainly be able:☺ To comprehend the new features in HTML5.☺ Comprehend some of the most interesting new features in HTML5.☺ Explore some of the most interesting new features of HTML5.Learning Objectives
  5. 5. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology☺ (Section 1) HTML5 Introduction☺ (Section 2) HTML5 New Elements☺ (Section 3) HTML5 Video☺ (Section 4) HTML5 Audio☺ (Section 5) HTML5 Canvas☺ (Section 6) HTML5 Web StorageHTML5 Tutorial - Sections List
  6. 6. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HTML5 Introduction – Summary☺ HTML5 will be the new standard for HTML,XHTML, and the HTML DOM.☺ The previous version of HTML came in 1999.☺ The web has changed a lot since then.☺ HTML5 is still a work in progress.☺ However, most modern browsers have someHTML5 support.
  7. 7. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HTML5 Introduction – HighPoints☺ How Did HTML5 Get Started?☺ New Features☺ Browser Support
  8. 8. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HighPoints – How Did HTML5 Get Started?☺ HTML5 is a cooperation between the WorldWide Web Consortium (W3C) and the WebHypertext Application Technology WorkingGroup (WHATWG).☺ WHATWG was working with web forms andapplications, and W3C was working with XHTML2.0.☺ In 2006, they decided to cooperate and createa new version of HTML.
  9. 9. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HighPoints – How Did HTML5 Get Started?☺ Some rules for HTML5 were established:☺ * New features should be based on HTML, CSS,DOM, and JavaScript☺ * Reduce the need for external plugins (likeFlash)☺ * Better error handling☺ * More markup to replace scripting☺ * HTML5 should be device independent☺ * The development process should be visible tothe public.
  10. 10. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HighPoints – New Features.☺ Some of the most interesting new featuresin HTML5:☺ * The canvas element for drawing☺ * The video and audio elements for mediaplayback☺ * Better support for local offline storage☺ * New content specific elements, like article,footer, header, nav, section☺ * New form controls, like calendar, date, time,email, url, search
  11. 11. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 1) HighPoints – Browser Support.☺ HTML5 is not yet an official standard, and nobrowsers have full HTML5 support.☺ But all major browsers (Safari, Chrome,Firefox, Opera, Internet Explorer) continue toadd new HTML5 features to their latestversions.
  12. 12. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HTML5 New Elements – Summary☺ New elements for better structure.☺ HTML5 provides a new standard for mediacontent.☺ The canvas element uses JavaScript to makedrawings on a web page.☺ HTML5 offers more form elements, with morefunctionality.☺ lso, the input elements type attribute hasmany new values, for better input controlbefore sending it to the server.
  13. 13. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HTML5 New Elements – HighPoints☺ New Elements in HTML5☺ New Markup Elements☺ New Media Elements☺ The Canvas Element☺ New Form Elements☺ New Input Type Attribute Values
  14. 14. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Elements in HTML5☺ The internet has changed a lot since HTML 4.01became a standard in 1999.☺ Today, some elements in HTML 4.01 areobsolete, never used, or not used the way theywere intended to.☺ These elements are deleted or re-written inHTML5.☺ To better handle todays internet use, HTML5also includes new elements for betterstructure, drawing, media content, and betterform handling.
  15. 15. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Markup Elements☺ <Tag> Description☺ <article> For external content, like text from anews-article, blog, forum, or any other contentfrom an external source☺ <aside> For content aside from the content itis placed in. The aside content should berelated to the surrounding content☺ <command> A button, or a radiobutton, or acheckbox☺ <details> For describing details about adocument, or parts of a document☺ <summary> A caption, or summary, inside thedetails element
  16. 16. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Markup Elements☺ <Tag> Description☺ <figure> For grouping a section of stand-alonecontent, could be a video.☺ <figcaption> The caption of the figure section.☺ <footer> For a footer of a document or section,could include the name of the author, the dateof the document, contact information, orcopyright information.☺ <header> For an introduction of a document orsection, could include navigation.
  17. 17. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Markup Elements☺ <hgroup> For a section of headings, using <h1>to <h6>, where the largest is the main headingof the section, and the others are sub-headings.☺ <mark> For text that should be highlighted.☺ <meter> For a measurement, used only if themaximum and minimum values are known.☺ <nav> For a section of navigation☺ <progress> The state of a work in progress☺ <ruby> For ruby annotation (Chinese notes orcharacters)
  18. 18. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Markup Elements☺ <Tag> Description☺ <rt> For explanation of the ruby annotation☺ <rp> What to show browsers that do notsupport the ruby element☺ <section> For a section in a document. Such aschapters, headers, footers, or any othersections of the document☺ <time> For defining a time or a date, or both☺ <wbr> Word break. For defining a line-breakopportunity.
  19. 19. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Media Elements☺ HTML5 provides a new standard for mediacontent:☺ <Tag> Description☺ <audio> For multimedia content, sounds, musicor other audio streams☺ <video> For video content, such as a movie clipor other video streams☺ <source> For media resources for mediaelements, defined inside video or audioelements☺ <embed> For embedded content, such as a plug-in.
  20. 20. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – The Canvas Element☺ The canvas element uses JavaScript to makedrawings on a web page.☺ <Tag> Description☺ <canvas> For making graphics with a script.
  21. 21. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – The Canvas Element
  22. 22. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Form Elements☺ HTML5 offers more form elements, with morefunctionality:☺ <Tag> Description☺ <datalist> A list of options for input values☺ <keygen> Generate keys to authenticate users☺ <output> For different types of output, such asoutput written by a script.
  23. 23. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Input Type Attribute Values☺ The input elements type attribute has manynew values, for better input control beforesending it to the server:☺ <Tag> Description☺ tel The input value is of type telephone number☺ Search The input field is a search field☺ url The input value is a URL☺ email The input value is one or more emailaddresses☺ datetime The input value is a date and/or time☺ date The input value is a date
  24. 24. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 2) HighPoints – New Input Type Attribute Values☺ <Tag> Description☺ month The input value is a month☺ week The input value is a week☺ time The input value is of type time☺ datetime-local The input value is a localdate/time☺ number The input value is a number☺ range The input value is a number in a givenrange☺ color The input value is a hexadecimal color,like #FF8800.
  25. 25. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HTML5 Video – Summary.☺ Many modern websites shows videos. HTML5provides a standard for showing them.☺ Until now, there has never been a standard forshowing video on a web page.☺ Currently, with HTML5, there are 3 supportedvideo formats for the video element.
  26. 26. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HTML5 Video – HighPoints☺ Video on the Web☺ Video Formats☺ How It Works☺ All <video> Attributes
  27. 27. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – Video on the Web☺ Until now, there has never been a standard forshowing video on a web page.☺ Today, most videos are shown through a plugin(like flash).☺ However, not all browsers have the sameplugins.☺ HTML5 specifies a standard way to includevideo, with the video element.
  28. 28. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – Video Formats☺ Ogg = Ogg files with Theora video codec andVorbis audio codec.☺ MPEG4 = MPEG 4 files with H.264 video codecand AAC audio codec.☺ WebM = WebM files with VP8 video codec andVorbis audio codec.
  29. 29. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – Video Formats: How It Works☺ To show a video in HTML5, this is all you need:<video src="movie.ogg" controls="controls"></video>☺ The control attribute is for adding play, pause,and volume controls.☺ It is also always a good idea to include thewidth and height attributes.☺ Insert content between the <video> and</video> tags for browsers that do not supportthe video element:☺ Example:☺ <video src="movie.ogg" width="320"height="240" controls="controls">Yourbrowser does not support the videotag.</video>☺ The example above uses an Ogg file, and willwork in Firefox, Opera and Chrome.
  30. 30. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – Video Formats: How It Works☺ To make the video work in Internet Explorer,Safari and future versions of Chrome, we mustadd a MPEG4 and WebM file.☺ The video element allows multiple sourceelements.☺ Source elements can link to different videofiles.☺ The browser will use the first recognizedformat:☺ Example:☺ <video width="320" height="240"controls="controls"> <source src="movie.ogg"type="video/ogg" /> <source src="movie.mp4"type="video/mp4" /> <sourcesrc="movie.webm" type="video/webm" />Your browser does not support the video tag.</video>
  31. 31. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – All <video> Attributes☺ Attribute Value Description☺ audio muted Defining the default state ofthe the audio. Currently, only "muted" isallowed☺ autoplay autoplay If present, then the videowill start playing as soon as it is ready☺ controls controls If present, controls will bedisplayed, such as a play button☺ height pixels Sets the height of the videoplayer☺ loop loop If present, the video will start overagain, every time it is finished
  32. 32. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 3) HighPoints – All <video> Attributes☺ Attribute Value Description☺ poster url Specifies the URL of an imagerepresenting the video☺ preload preload If present, the video will beloaded at page load, and ready to run. Ignoredif "autoplay" is present☺ src url The URL of the video to play☺ width pixels Sets the width of the videoplayer.
  33. 33. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HTML5 Audio – Summary☺ HTML5 provides a standard for playing audio.☺ Until now, there has never been a standard forplaying audio on a web page.☺ Currently, there are 3 supported formats forthe audio element in HTML5.
  34. 34. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HTML5 Audio – HighPoints.☺ Audio on the Web☺ Audio Formats☺ How It Works☺ All <audio> Attributes
  35. 35. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – Audio on the Web☺ Until now, there has never been a standard forplaying audio on a web page.☺ Today, most audio are played through a plugin(like flash).☺ However, not all browsers have the sameplugins.☺ HTML5 specifies a standard way to includeaudio, with the audio element.☺ The audio element can play sound files, or anaudio stream.
  36. 36. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – Audio Formats☺ Currently, there are 3 supported formats forthe audio element:☺ Ogg Vorbis☺ MP3☺ Wav
  37. 37. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – Audio Formats: How It Works☺ To play an audio file in HTML5, this is all youneed:☺ <audio src="song.ogg" controls="controls"></audio>☺ The control attribute is for adding play, pause,and volume controls.☺ Insert content between the <audio> and</audio> tags for browsers that do not supportthe audio element:☺ Example:☺ <audio src="song.ogg" controls="controls">Your browser does not support the audioelement. </audio>☺ The example above uses an Ogg file, and willwork in Firefox, Opera and Chrome.
  38. 38. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – Audio Formats: How It Works☺ To make the audio work in Internet Explorerand Safari, add an audio file of the type MP3.☺ The audio element allows multiple sourceelements.☺ Source elements can link to different audiofiles.☺ The browser will use the first recognizedformat:☺ Example:☺ <audio controls="controls"> <sourcesrc="song.ogg" type="audio/ogg" /> <sourcesrc="song.mp3" type="audio/mpeg" /> Yourbrowser does not support the audio element.</audio>
  39. 39. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 4) HighPoints – All <audio> Attributes☺ attribute Value Description☺ autoplay autoplay Specifies that the audiowill start playing as soon as it is ready.☺ controls controls Specifies thatcontrols will be displayed, such as a play button.☺ loop loop Specifies that the audio will startplaying again (looping) when it reaches the end☺ preload preload Specifies that the audio willbe loaded at page load, and ready to run.Ignored if autoplay is present.☺ src url Specifies the URL of the audio toplay.
  40. 40. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HTML5 Canvas – Summary.☺ The canvas element is used to draw graphics ona web page.☺ The HTML5 canvas element uses JavaScript todraw graphics on a web page.☺ The canvas element has no drawing abilities ofits own.☺ All drawing must be done inside a JavaScript.
  41. 41. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HTML5 Canvas – HighPoints.☺ What is Canvas?☺ Create a Canvas Element☺ Draw With JavaScript☺ Understanding Coordinates☺ More Canvas Examples
  42. 42. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – What is Canvas?☺ The HTML5 canvas element uses JavaScript todraw graphics on a web page.☺ A canvas is a rectangular area, and you controlevery pixel of it.☺ The canvas element has several methods fordrawing paths, boxes, circles, characters, andadding images.
  43. 43. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – Create a Canvas Element☺ Add a canvas element to the HTML5 page.☺ Specify the id, width, and height of theelement:☺ <canvas id="myCanvas" width="200"height="100"></canvas>
  44. 44. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – Draw With JavaScript☺ The canvas element has no drawing abilities ofits own. All drawing must be done inside aJavaScript:☺ Example:☺ <script type="text/javascript"> varc=document.getElementById("myCanvas"); varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75); </script>☺ JavaScript uses the id to find the canvaselement:☺ var c=document.getElementById("myCanvas");
  45. 45. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – Draw With JavaScript☺ Then, create a context object:☺ var cxt=c.getContext("2d");☺ The getContext("2d") object is a built-inHTML5 object, with many methods to drawpaths, boxes, circles, characters, images andmore.☺ The next two lines draws a red rectangle:☺ cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);☺ The fillStyle method makes it red, and thefillRect method specifies the shape, position,and size.
  46. 46. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – Understanding Coordinates☺ The fillRect method above had the parameters(0,0,150,75).☺ This means: Draw a 150x75 rectangle on thecanvas, starting at the top left corner (0,0).☺ The canvas X and Y coordinates are used toposition drawings on the canvas.☺ Mouse over the rectangle below to see thecoordinates:.
  47. 47. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples☺ These are more examples of drawing on thecanvas element:☺ Example – Line: Draw a line by specifying whereto start, and where to stop☺ Example – Circle: Draw a circle by specifyingthe size, color, and position☺ Example – Gradient: Draw a gradientbackground with the colors you specify☺ Example – Image: Put an image on the canvas
  48. 48. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples: Line☺ Example – Line: Draw a line by specifying whereto start, and where to stop☺ <!DOCTYPE HTML>☺ <html>☺ <body>☺ <canvas id="myCanvas" width="200"height="100" style="border:1px solid#c3c3c3;">☺ Your browser does not support the canvaselement.☺ </canvas>
  49. 49. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples: Line☺ <script type="text/javascript">☺ var c=document.getElementById("myCanvas");☺ var cxt=c.getContext("2d");☺ cxt.moveTo(10,10);☺ cxt.lineTo(150,50);☺ cxt.lineTo(10,50);☺ cxt.stroke();☺ </script>☺ </body>☺ </html>
  50. 50. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples: Circle☺ Example – Circle: Draw a circle by specifyingthe size, color, and position☺ <!DOCTYPE HTML>☺ <html>☺ <body>☺ <canvas id="myCanvas" width="200"height="100" style="border:1px solid#c3c3c3;">☺ Your browser does not support the canvaselement.☺ </canvas>
  51. 51. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples: Circle☺ <script type="text/javascript">☺ var c=document.getElementById("myCanvas");☺ var cxt=c.getContext("2d");☺ cxt.fillStyle="#FF0000";☺ cxt.beginPath();☺ cxt.arc(70,18,15,0,Math.PI*2,true);☺ cxt.closePath();☺ cxt.fill();☺ </script>☺ </body>☺ </html>
  52. 52. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples: Gradient☺ Example – Gradient: Draw a gradientbackground with the colors you specify☺ <!DOCTYPE HTML>☺ <html>☺ <body>☺ <canvas id="myCanvas" width="200"height="100" style="border:1px solid#c3c3c3;">☺ Your browser does not support the canvaselement.☺ </canvas>
  53. 53. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples: Gradient☺ <script type="text/javascript">☺ var c=document.getElementById("myCanvas");☺ var cxt=c.getContext("2d");☺ vargrd=cxt.createLinearGradient(0,0,175,50);☺ grd.addColorStop(0,"#FF0000");☺ grd.addColorStop(1,"#00FF00");☺ cxt.fillStyle=grd;☺ cxt.fillRect(0,0,175,50);☺ </script>☺ </body>☺ </html>
  54. 54. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples: Image☺ Example – Image: Put an image on the canvas☺ <!DOCTYPE HTML>☺ <html>☺ <body>☺ <canvas id="myCanvas" width="200"height="100" style="border:1px solid#c3c3c3;">☺ Your browser does not support the canvaselement.☺ </canvas>
  55. 55. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 5) HighPoints – More Canvas Examples: Image☺ <script type="text/javascript">☺ var c=document.getElementById("myCanvas");☺ var cxt=c.getContext("2d");☺ var img=new Image();☺ img.src="img_flwr.png";☺ cxt.drawImage(img,0,0);☺ </script>☺ </body>☺ </html>
  56. 56. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HTML5 Web Storage – Summary☺ HTML5 offers two new objects for storingdata on the client.☺ The localStorage object stores the data withno time limit.☺ The sessionStorage object stores the data forone session.
  57. 57. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HTML5 Web Storage – HighPoints.☺ Storing Data on the Client☺ The localStorage Object☺ The sessionStorage Object
  58. 58. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – Storing Data on the Client☺ HTML5 offers two new objects for storingdata on the client:☺ localStorage - stores data with no time limit☺ sessionStorage - stores data for one session☺ Earlier, this was done with cookies. Cookies arenot suitable for large amounts of data, becausethey are passed on by EVERY request to theserver, making it very slow and in-effective.
  59. 59. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – Storing Data on the Client☺ In HTML5, the data is NOT passed on by everyserver request, but used ONLY when asked for.☺ It is possible to store large amounts of datawithout affecting the websites performance.☺ The data is stored in different areas fordifferent websites, and a website can onlyaccess data stored by itself.☺ HTML5 uses JavaScript to store and accessthe data.
  60. 60. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – The localStorage Object☺ The localStorage object stores the data withno time limit.☺ The data will be available the next day, week, oryear.☺ To create and access a localStorage:☺ Example:☺ <script type="text/javascript">☺ localStorage.lastname="Smith";☺ document.write(localStorage.lastname);☺ </script>
  61. 61. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – The localStorage Object☺ The following example counts the number oftimes a user has visited a page:☺ <script type="text/javascript">☺ if (localStorage.pagecount)☺ {☺ localStorage.pagecount=Number(localStorage.pagecount) +1;☺ }☺ else☺ {☺ localStorage.pagecount=1;☺ }☺ document.write("Visits "+localStorage.pagecount + " time(s).");☺ </script>
  62. 62. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – The sessionStorage Object☺ The sessionStorage object stores the data forone session.☺ The data is deleted when the user closes thebrowser window.☺ How to create and access a sessionStorage:☺ Example:☺ <script type="text/javascript">☺ sessionStorage.lastname="Smith";☺ document.write(sessionStorage.lastname);☺ </script>
  63. 63. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology(Section 6) HighPoints – The sessionStorage Object☺ The following example counts the number of times auser has visited a page, in the current session:☺ <script type="text/javascript">☺ if (sessionStorage.pagecount)☺ {☺ sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;☺ }☺ else☺ {☺ sessionStorage.pagecount=1;☺ }☺ document.write("Visits "+sessionStorage.pagecount+"time(s) this session.");☺ </script>
  64. 64. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation TechnologyHTML5 Tutorial – Conclusion.☺ At this point you should be able to be familiarwith the following:• Understand that HTML5 is the newstandard for HTML• But that HTML5 is still a work in progress• Comprehend its new features• Explore some of the most interesting newfeatures of HTML5
  65. 65. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology
  66. 66. Contact Email Design Copyright 1994-2013 © OxfordCambridge.OrgInformation Technology
  1. A particular slide catching your eye?

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

×