New Structural Elements in HTML 5.....ShYaM..

In HTML 5 the new structural elements has a header denoted by

 div id="header"  a footer

 div id="footer"  some articles wrapped by an area called “content”.

 div id="content" and some navigation wrapped up in an area called “sidebar” .

 div id="sidebar". 

It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and site information as well as site-wide navigation.
Source : http://html5doctor.com/

API's In HTML 5.......ShYaM

HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:

• API for playing of video and audio which can be used with the new video and audio elements.
• An API that enables offline Web applications.
• An API that allows a Web application to register itself for certain protocols or media types.
• Editing API in combination with a new global contenteditable attribute.
• Drag & drop API in combination with a draggable attribute.
• API that exposes the history and allows pages to add to it to prevent breaking the back button. 

  Extensions to HTMLDocument

  HTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of ways. The interface is now implemented on all objects implementing the Document interface so it stays meaningful in a compound document context. It also has several noteworthy new members:
• getElementsByClassName() to select elements by their class name. The way this method is defined will allow it to work for any content with class attributes and a Document object such as SVG and MathML.
• innerHTML as an easy way to parse and serialize an HTML or XML document. This attribute was previously only available on HTMLElement in Web browsers and not part of any standard.
• activeElement and hasFocus to determine which element is currently focused and whether the Document has focus respectively.
• getSelection() which returns an object that represents the current selection(s).
  

  Extensions to HTMLElement

  The HTMLElement interface has also gained several extensions in HTML5:
• getElementsByClassName() which is basically a scoped version of the one found on HTMLDocument.
• innerHTML as found in Web browsers today. It is also defined to work in XML context (when it is used in an XML document).
• classList is a convenient accessor for className. The object it returns, exposes methods (contains(), add(), remove(), and toggle()) for manipulating the element's classes. The a, area and link elements have a similar attribute called relList that provides the same functionality for the rel attribute.
   Source : http://www.w3.org/
  

New Elements in HTML 5 -ShYaM..

The following HTML 5 elements have been introduced for better structure:

• section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
• article represents an independent piece of content of a document, such as a blog entry or newspaper article.
• aside represents a piece of content that is only slightly related to the rest of the page.
• hgroup represents the header of a section.
• header represents a group of introductory or navigational aids.
• footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
• nav represents a section of the document intended for navigation.
  
  
• figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
  

  
   
   
  Example

  figcaption can be used as caption (it is optional).

Then there are several other new elements:

• video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
• embed is used for plugin content.
• mark represents represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
• progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
• meter represents a measurement, such as disk usage.
• time represents a date and/or time.
• ruby, rt and rp allow for marking up ruby annotations.
• wbr represents a line break opportunity.
• canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
• command represents a command the user can invoke.
• details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.
• datalist together with the a new list attribute for input can be used to make comboboxes:
  

• keygen represents control for key pair generation.
• output represents some type of output, such as from a calculation done through scripting.

The input element's type attribute now has the following new values:

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
Source : http://www.w3.org/

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;
}