Introduction to HTML5

Transcription

1 Version 1.11 Samsung Smart TV 1

2 PREFACE... 3 PURPOSE OF DOCUMENT... 3 TARGET READERS INTRODUCTION TO HTML HTML BACKWARD COMPATIBILITY WITH HTML SUPPORT FOR HTML MARKUP HTML5 APIS HTML5 AND SAMSUNG SMART TV SDK CANVAS TAG AUDIO TAG VIDEO TAG CONCLUSION

3 Preface Purpose of Document The purpose of this document is to introduce HTML5 and some tags associated with it. The Samsung Smart TV SDK provides support for HTML5. Hence this document attempts to explain HTML5 along with some tags. The document also contains some sample applications which the user can refer to. Target Readers This document targets the first time users of Samsung Smart TV SDK. However, the reader is expected to have basic knowledge about Java Scripting, CSS and HTML. The document explains only the use of Samsung Smart TV SDK and its features. There are no explanations provided about the programming syntax and conventions of the scripting language and the programming language used. 3

4 1. Introduction to HTML HTML5 HTML5 is the next major revision of the HTML standard, currently under development. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web is a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, together with many syntax errors in existing web documents. It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and APIs for complex web applications Backward Compatibility with HTML4 There is no need to throw away your existing markup. All application working on HTML4 will work on HTML5. HTML5 supports all the form controls from HTML 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type addresses. Older browsers that don t support the input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks Support for HTML5 Most of the new features of HTML5 are well supported by comman browsers like Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Mobile Browsers etc. 4

5 1.4. Markup HTML5 introduces a number of new elements and attributes. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block), <footer> (usually referring to bottom of web page or to last lines of HTML code), or <audio> and <video> instead of <object> HTML5 APIs In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs). Existing document object model (DOM) interfaces are extended and defacto features documented. 2. HTML5 and Samsung Smart TV SDK As Samsung Smart TV SDK supports HTML5 we will be discussing a few tags like canvas, video and audio tags Canvas Tag The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bit map and does not have a built in scene graph. Example The following code creates a Canvas element in an HTML page: <canvas id="example" width="200" height="200"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> You can write text inside the start and end canvas tags, to show older browser that they do not support this tag. Using JavaScript, you can draw on the canvas: var example = document.getelementbyid('example'); var context = example.getcontext('2d'); context.fillstyle = "rgb(255,0,0)"; context.fillrect(30, 30, 50, 50); 5

6 2.2. Audio Tag The <audio> tag deines sound, such as music or other audio streams. Example <audio src="horse.mp4"> Your browser does not support the audio element. </audio> You can write text inside the start and end audio tags, to show older browser that they do not support this tag. New Attributes of <audio> tag in HTML5 Attribute Value Description Autoplay autoplay If present, the audio will start playing as soon as it is ready. Loop loop If present, the audio will start over again, every time it is finished. Preload auto metadata Specifies if the audio should be loaded when the page loads. Ignored if autoplay is present. none Src url Defines the URL of the audio to play 2.3. Video Tag Until now, there has never been a standard for showing video on a web page/app. Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.html5 specifies a standard way to include video, with the video element. Video Formats Currently, there are 2 supported video formats for the video element: Format IE 8 Firefox Opera Chrome Safari Ogg No Yes Yes Yes No MPEG 4 No No No Yes Yes Ogg = Ogg files with Thedora video codec and Vorbis audio codec MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec Example The control attribute is for adding play, pause, and volume controls.it is also always a good idea 6

7 to include the width and height attributes.insert content between the <video> and </video> tags for browsers that do not support the video element: <video src="movie.mp4" width="320" height="240"> Your browser does not support the video tag. </video> All <video> Attributes Attribute Value Description autoplay autoplay Specifies that the video will start playing as soon as it is ready controls controls Specifies that controls will be displayed, such as a play button. Height pixels Specifies the height of the video player Loop loop Specifies that the media file will start over again, every time it is finished. Preload preload Specifies that the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present. Src url Specifies that the URL of the video to play Width pixels Specifies the width of the video player 3. Conclusion We have seen how we can easily use HTML5 tags during App creation.also provided with the document are some sample Apps which can be used as reference to create more Apps utilizing the benefits of HTML5. 7