HTML 5
HTML5 is the latest markup technology used to build World Wide Web content. While searching the Internet to learn more about it, I bumped into a lot of examples, animations, games and multimedia content. One of the main advantages of HTML5 is that web developers can create cool and complex animation with few lines of code. In fact, if you try to do some simple HTML5 examples using the current HTML, most probably you will give up at start up.
Will not stress out how important it is to including multimedia objects in our web pages, I think everyone is aware that promoting and marketing goods in an attractive fashion is important. And amongst others, HTML5 was designed for multimedia and animation. In fact, many developers are questioning if HTML5 will replace Flash; I recommend reading some blogs on this matter.
What’s new
In this section, I will describe some new HTML5 features that I tried using Google Chrome.
>> In HTML5, the lengthy and difficult to remember Document type declaration has been simplified in the following lines:
<!DOCTYPE html>
As a matter of fact, HTML5 does not need a document type declaration to work and such declaration is only used by older browsers: that require doctype declaration.
>> Image captions are used with screenshots and figures to provide more information and to ease referencing. In HTML5 you can easily add a caption to an image by adding the figcaption tag as follows:
<figure>
<img src="image path" alt="about image"/>
<figcaption>
<p>This is the image caption</p>
</figcaption>
</figure>
>> When linking to CSS stylesheet, or including a Javascript file in an HTML5 page, the file type can be omitted. HTML5 identifies the file type by processing the file extension.
<link rel="stylesheet" href="CSS path" />
<script src="Javascript path"></script>
>> The contenteditable attribute is used to make a list or a block of text editable. When enabled, this attribute allows users to edit and change the contents of lists and blocks of text. The following is an example:
<ul contenteditable="true">
<li> Create Second life blog </li>
<li> Create HTML5 blog </li>
<li> Start course work 2 </li>
</ul>
>> Email type, is a new attribute of the input field that enables email validation. Without using Javascript and regular expressions, HTML5 can validate an email address with a few lines of code:
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
When an invalid email is entered, a message is displayed as follows:
>> Using the placeholder attribute, HTML5 enables you to add place holder text in input objects.
<input id="email" name="email" type="email" placeholder="<youremail>@inbox.com"/>
>> The required attribute enables you to specify that an input field is required. No Javascripts and validation is required, just adding the attribute to the input box as follows:
<input type="text" name="userName" required="required">
>> The new mark tag enables you to highlight specific text in a paragraph.
<p> My course title is <mark>Client Server Applications</mark></p>
>> With DOM and HTML, in HTML5, developers can easily embed videos, animations and audio.
>> Having a temporary SQL-based database API, in HTML5 developers can store data on the client side. This can be used to store structure data, temporary information, e-mails and shopping details.
>> HTML5 provides a solution that enables developers to store information in the browser’s cache. This enables clients to launch information when offline and load pages faster when online.
Useful links and further information
http://html5test.com/ - This page provides the required tools to test your browser for HTML5 compatibility.
http://webdesignledger.com/inspiration/10-html5-demos-to-make-you-forget-about-flash - Some cool HTML5 demos.
http://www.w3schools.com/html5/default.asp - W3C school HTML5 reference, here you can learn more and try the online tutorials.
Conclusion
The features described in this blog are a small part of the HTML5 capabilities. Lot of features and structure improvements are implemented in HTML5 that hopefully I will try in the future.
I was very impressed with the real time animation and the high quality graphics that can be achieved using HTML5; I think these will impact a bit the popularity of existing animation software like Flash.
I was very impressed with the real time animation and the high quality graphics that can be achieved using HTML5; I think these will impact a bit the popularity of existing animation software like Flash.
Happy scripting...
No comments:
Post a Comment