Monday, August 29, 2011

HTML5 [An Emerging Markup Language]

Description:
                              HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard (originally created in 1990 and most recently standardized as HTML4 in 1997[1]) and as of August 2011 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.).  

html5 implementation

"New In HTML5"

New Input types in HTML5:
  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

Browser Support

Input typeIEFirefoxOperaChromeSafari
emailNo4.09.010.0No
urlNo4.09.010.0No
numberNoNo9.07.0No
rangeNoNo9.04.04.0
Date pickersNoNo9.010.05.1
searchNo4.011.010.0No
colorNoNo11.012No


New Tags in HTML5

<article>       :For an article
<aside>        :For content aside from the page content   
<audio>        :For sound content
<nav>            :For navigation links
<header>      :Defines a header for a section or page    
<footer>        :Defines a footer for a section or page
<hgroup>     :Defines information about a section in a document
<figure>        :For a group of media content, and their caption
<autput>       :Defines some types of output
<progress>  :progress of a task
<section>     :For a section
<saurce>      :For media resources
<summary>:For the header of a "detail" element
<time>           :For a date/time
<video>        :For  a video
<wbr>           :For a possible line-break
<mark>         :For marked text
<embed>      :For external interactive content or plugin
<details>      :For details of an element
<datalist>     :Defines a dropdown list
<meter>        :For measurement within a predefined range 
<meter>        :For a command button 

New Attributes in HTML5

contenteditable  :(T/F) Check user is allowed to edit the content or not
contextmenu        :Specifies the context menu for an element
draggable                :(T/F/auto) Check user is allowed to drag an element
hidden                      : Hidden elements are not displayed
spellcheck             :(T/F) element must have its spelling and grammar checked


                  "A  Simple Example"

<!doctype html>
<html>
<head>
          <title>Page title</title>
</head>
<body>
         <header>
                <h1>Page title</h1>
         </header>
         <nav>
                  <!-- Navigation -->
         </nav>
        <section id="intro">
                     <!-- Introduction -->
         </section>
         <section>
                     <!-- Main content area -->
         </section>
         <aside>
                      <!-- Sidebar -->
          </aside>
         <footer>
                    <!-- Footer -->
          </footer>
      </body>
</html>
  

                  "Styling with CSS3"
  1. body
    {
      margin:0 auto;
      width:940px;
      font:13px/22px Helvetica,Arial, sans-serif;  
      background: #f0f0f0;  
    }

    {  
     margin: 0;  
     padding: 0;  
    }   
      
    header, footer, aside, nav, article 
    {  
     display: block;  

    h2 
    {  
     font-size: 28px;  
     line-height: 44px;  
     padding: 22px 0;  
    }  

    h3 
    {  
     font-size: 18px;  
     line-height: 22px;  
     padding: 11px 0;  
    }
      
    {  
     padding-bottom: 22px;  
    }    
 

                  "Supported By Famous Venders"

Supported by Apple's products:
                                                                      Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser supports web standards including HTML5, CSS3, along with JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions.

Supported by LinkedIn:
                                              Professional networking platform LinkedIn is launching redesigned versions of its mobile applications for Apple's (NASDAQ:AAPL) iOS and Google's (NASDAQ:GOOG) Android, concurrently introducing a new HTML5-based web app optimized for all current mobile browsers.

Supported by Box.net:
                                          Box updated its Android app to support tablets, introduced a new app for RIM's Playbook, and revised its mobile website with HTML5 features

1 comments:

Anonymous said...

Have you ever thought about including a little bit
more than just your articles? I mean, what you say is fundamental and
everything. However think about if you added some great photos or video clips
to give your posts more, "pop"! Your content is excellent but with
pics and video clips, this website could certainly be one of
the best in its field. Great blog!
Here is my web blog : Google optimization

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Code Imagine