HTML5 Input Types

HTML5 has several new input types for forms. These new features allow for better input control and validation.
This chapter covers the new input types:

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

HTML 5 Basics

The declaration must be the very first thing in your HTML5 document, before the tag. This tag tells the browser which HTML specification the document uses.
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The DOCTYPE declaration is and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. 

HTML5is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:

• New features should be based on HTML, CSS, DOM, and JavaScript
• Reduce the need for external plugins (like Flash)
• Better error handling
• More markup to replace scripting
• HTML5 should be device independent
• The development process should be visible to the public

New Features

Some of the most interesting new features in HTML5:

• The canvas element for drawing
• The video and audio elements for media playback
• 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

Browser Support

The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features. Internet Explorer 9 will support some HTML5 features.

Best Free Image Hosts (HotLinking allowed, No Bandwidth Limits)

Whether you’re looking for a free way to cut down on bandwidth costs or need an easy-to-use and powerful image hosting service to manage your pictures on (myspace, ebay, etc) than this is for you. Ranked by popularity, I’ve listed below some of the coolest free image hosts on the web along with their main features.

1. ImageShack

Features:

* Upload options: from file, from URL, by email or directly from mobile
* Supported formats: .JPG, .JPEG, .PNG, .GIF, BMP, TIF, TIFF and SWF
* Max. file size: 1.5 MB
* no bandwidth or storage restrictions [update: ImageShack has 100 MB/hour bandwidth limit]
* Resize upon uploading
* Extras: Browser toolbar(IE, Firefox), Mac widget, Mac Uploader(for multiple uploads), Image tracking and more

2. AllYouCanUpload

Features:

* Upload options: from file
* Supported formats: .GIF and .JPEG
* multiple image uploads(up to 3 images simultaneously)
* different resizing option for each uploaded image
* registration is not required
* no restrictions on file size, bandwidth or storage period and amount

3. Photobucket

Features:

* Upload options: from file, from URL, by email or mobile
* Max. file size: free accounts users limited to 1MB file size and max. resoltion of 1024 x 768
* unrestricted multiple image upload
* mass image resizing upon upload
* individual image editing from account menu
* 10 GB monthly bandwidth limit and 1GB storage limit
* group images into albums, share albums and create slideshows
* also lets you host videos

4. ImageVenue

Features:

* Upload options: from file
* Max. file size: 1.5 MB
* Supported image formats: .JPEG and .JPG
* mass image upload(up to 10)
* unlimited storage, hosting period and bandwidth
* registration is not required

5. TinyPic


Features:

* Upload options: from file
* registration is not required
* unlimited storage, hosting period and bandwidth
* no restrictions on file size or image formats
* also lets you host videos

6. FreeImageHosting


Features:

* Upload Options: from file
* Supported image formats: .JPG, .JPEG, .PNG and .GIF
* Max. file size: 3,000 KB
* no storage, bandwidth or hosting period limit
* registration is not required

7. imgPlace

Features:

* Upload Options: from file
* Max. file size: 1.5MB
* Supported image formats: .JPG, .JPEG, .PNG, .GIF, BMP, TIF and TIFF
* mass image uploads(up to 10)
* image resizing for single uploads
* no bandwidth, storage or storage duration limits
* registration is not required

CSS Tips

Styling Links

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */


List

In HTML, there are two types of lists:

    * unordered lists - the list items are marked with bullets
    * ordered lists - the list items are marked with numbers or letters

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Table Borders

table, th, td
{
border: 1px solid black;
}

JQUERY, Warning Users that IE6 For Browser Rejection

Copy this and save it to jquery.ie6.js

(function($){
$(function(){
var message = "This site does not support Internet Explorer 6. Please consider downloading a newer browser.",
div = $('

').html(message).css({
'height': '50px',
'line-height': '50px',
'background-color':'#f9db17',
'text-align':'center',
'font-family':'Arial, Helvetica, sans-serif',
'font-size':'12pt',
'font-weight':'bold',
'color':'black'
}).hide().find('a').css({color:'#333'}).end();
div.prependTo(document.body).slideDown(500);
});
})(jQuery);

And then put this in the head (after the inclusion of jQuery of course) of your page:

Validation in HTML

What is validation ?
According to the W3c, Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc.



Specify a DOCTYPE and namespace
Include a DOCTYPE at the top of your page and specify the namespace

For XHTML1.0 Strict


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"


For XHTML1.0 Transitional


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"


For XHTML1.0 Frameset


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
html xmlns="http://www.w3.org/1999/xhtml"

Wordpress plugin -Shyam

WP To Top is a Wordpress plugin that adds a "Back to top" link in your blog without modifying your template files. This is useful especially if you have long posts or long pages. You will have a nice "Back to top" or whatever-text-you-want link floating at the bottom right/left of your page.
Features

* Smooth scrolling animation and fade in, fade out effect, powered by the YUI library
* Customizable options via the admin panel, from the text to the position of the link
* Works on almost all browsers including IE6 (yes!)

Installation

* Extract wptotop.zip in the "/wp-content/plugins/" directory
* Activate the plugin through the "Plugins" menu in WordPress
* Go to "Settings" and then "WP To Top" to configure the plugin. The options are self explanatory and easy to understand.

Enjoy...
Shyam-D Man U Love-