Đã đăng vào thg 3 18, 2015 11:55 CH 4 phút đọc

147

HTML5 OVERVIEW

Bài đăng này đã không được cập nhật trong 9 năm

HTML5 Overview

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

The new standard incorporates features like video playback and drag-and-drop that have been

previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight,and Google Gears.

Browser Support:

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

New Features:

HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great features introduced in HTML5.

New Semantic Elements: These are like <header>, <footer>, and <section>. Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.
Persistent Local Storage: To achieve without resorting to third-party plugins.
WebSocket : A a next-generation bidirectional communication technology for web applications.
Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.
Audio & Video: You can embed audio or video on your web pages without resorting to third-party plugins.
Geolocation: Now visitors can choose to share their physical location with your web application.
Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
Drag and drop: Drag and drop the items from one location to another location on a the same webpage.

HTML5 Document:

section: This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.

article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.

aside: This tag represents a piece of content that is only slightly related to the rest of the page.

header: This tag represents the header of a section.

footer: This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.

nav: This tag represents a section of the document intended for navigation

figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

_ The markup for an HTM 5 document would look like the following:_

<!DOCTYPE html>

    <html>

        <head>

            <meta charset=”utf-8″>

            <title>…</title>

        </head>

        <body>

            <header>…</header>

            <nav>…</nav>
            <article>

                <section>

                    …

                </section>

            </article>

            <aside>…</aside>

            <footer>…</footer>

        </body>
    <html>

The `<input>` element in HTML5

Apart from the above mentioned attributes, HTML5 input elements introduced sevral new values for the type attribute. These are listed below.

NOTE: Try all the following example using latest version of Opera browser.

Type	Description
datetime	A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC. right-aligned
datetime-local	A date and time (year, month, day, hour, minute, second, fractions of asecond) encoded according to ISO 8601, with no time zone information.
date	A date (year, month, day) encoded according to ISO 8601.
month	A date consisting of a year and a month encoded according to ISO 8601.
week	A date consisting of a year and a week number encoded according to ISO 8601.
time	A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
number	This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
range	The range type is used for input fields that should contain a value from The range type is used for input fields that should contain a value from.
email	This accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
url	This accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

The placeholder attribute

HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field. The placeholder text must not contain carriage returns or line-feeds.

Here is the simple syntax for placeholder attribute:

<input type=”text” name=”search” placeholder=”search the web”/>

This attribute is supported by latest versions of Mozilla, Safari and Crome browsers only.

The required attribute

Now you do not need to have javascript for client side validations like empty text box would

never be submitted because HTML5 introduced a new attribute called required which would be

used as follows and would insist to have a value:

<input type=”text” name=”search” required/>

This attribute is supported by latest versions of Mozilla, Safari and Crome browsers only.

HTML5 – WebSockets

Web Sockets is a next-generation bidirectional communication technology for web applications which operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers.

Once you get a Web Socket connection with the web server, you can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.

Following is the API which creates a new WebSocket object.

var Socket = new WebSocket(url, [protocal] );

Here first argument, url, specifies the URL to which to connect. The second attribute, protocol is optional, and if present, specifies a sub-protocol that the server must support for the connection to be successful.

WebSocket Attributes:

Socket.readyState : The readonly attribute readyState represents the state of the connection. It can have the following values:

A value of 0 indicates that the connection has not yet been established.
A value of 1 indicates that the connection is established and communication is possible.
A value of 2 indicates that the connection is going through the closing handshake.
A value of 3 indicates that the connection has been closed or could not be opened.

Socket.bufferedAmount

The readonly attribute bufferedAmount represents the number of bytes of UTF-8 text that have been queued using send() method.

WebSocket Events:

Event	Event Handler	Description
open	`Socket.onopen`	This event occurs when socket connection is established.
message	`Socket.onmessage`	This event occurs when client receives data from server.
error	`Socket.onerror`	This event occurs when there is any error in communication.
close	`Socket.onclose`	This event occurs when connection is closed.

WebSocket Methods:

Method	Description
`Socket.send()`	The `send(data)` method transmits data using theonnectionconnection.
`Socket.close()`	The `close()` method would be used to terminate any existing connection

HTML5 – Canvas

HTML5 element <canvas> gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.

Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name and class etc.

<canvas id=”mycanvas” width=”100″ height=”100″></canvas>

You can easily find that <canvas> element in the DOM using getElementById() method as follows:

var canvas = document.getElementById(“mycanvas”);

Let us see a simple example on using <canvas> element in HTML5 document.

<!DOCTYPE HTML>

    <html>

        <head>

            <style>

                #mycanvas{

                    border:1px solid red;

                }

            </style>

        </head>

        <body>

            <canvas id=”mycanvas” width=”100″ height=”100″></canvas>

        </body>

    </html>

The Rendering Context:

The <canvas> is initially blank, and to display something, a script first needs to access the rendering context and draw on it.

The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d.

Following is the code to get required context along with a check if your browser supports

<canvas> element:

var canvas = document.getElementById(“mycanvas”);

if (canvas.getContext){
    var ctx = canvas.getContext(’2d’);
        // drawing code here
    } else {
        // canvas-unsupported code here
    }
}

Tài liệu tham khảo:

https://www.udemy.com/learn-html5-programming-from-scratch/
http://www.html-5-tutorial.com/map-and-area-elements.htm
http://www.html-5-tutorial.com/
Book: HTML5 Overview and HTML5 Tutorial

HTML