Introduction to HTML5

Version 1.11

Samsung Smart TV
@Samsung Electronics Copyright All Rights Reserved
1

Introduction to HTML5
PREFACE .......................................................................................................................................................................... 3 PURPOSE OF DOCUMENT ........................................................................................................................................... 3 TARGET READERS ........................................................................................................................................................ 3 1. INTRODUCTION TO HTML5 ............................................................................................................................... 4 1.1. 1.2. 1.3. 1.4. 1.5. 2. HTML5 ............................................................................................................................................................... 4 BACKWARD COMPATIBILITY WITH HTML4 ......................................................................................................... 4 SUPPORT FOR HTML5 ......................................................................................................................................... 4 MARKUP .............................................................................................................................................................. 5 HTML5 APIS ...................................................................................................................................................... 5

HTML5 AND SAMSUNG SMART TV SDK ......................................................................................................... 5 2.1. 2.2. 2.3. CANVAS TAG........................................................................................................................................................ 5 AUDIO TAG .......................................................................................................................................................... 6 VIDEO TAG .......................................................................................................................................................... 6

3.

CONCLUSION ......................................................................................................................................................... 7

@Samsung Electronics Copyright All Rights Reserved

2

Introduction to HTML5

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.

@Samsung Electronics Copyright All Rights Reserved

3

Introduction to HTML5

1. Introduction to HTML5
1.1. 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. 1.2. 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 email input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that dont support the email input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. 1.3. 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.

@Samsung Electronics Copyright All Rights Reserved

4

Introduction to HTML5 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>. 1.5. 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. 2.1. 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);

@Samsung Electronics Copyright All Rights Reserved

5

Introduction to HTML5 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 Autoplay Loop Preload Value autoplay loop auto metadata none url Description If present, the audio will start playing as soon as it is ready. If present, the audio will start over again, every time it is finished. Specifies if the audio should be loaded when the page loads. Ignored if autoplay is present. Defines the URL of the audio to play

Src 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 Ogg MPEG 4

IE 8 No No

Firefox 3.5 Yes No

Opera 10.5 Yes No

Chrome 3.0 Yes Yes

Safari 3.0 No 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

@Samsung Electronics Copyright All Rights Reserved

6

Introduction to HTML5 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 autoplay controls Height Loop Preload Value autoplay controls pixels loop preload Description Specifies that the video will start playing as soon as it is ready Specifies that controls will be displayed, such as a play button. Specifies the height of the video player Specifies that the media file will start over again, every time it is finished. Specifies that the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present. Specifies that the URL of the video to play Specifies the width of the video player

Src Width

url pixels

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.

@Samsung Electronics Copyright All Rights Reserved

7