HTML5: An introduction to new

The world of the web, in terms of language, has for years been stranded on the old HTML 4, active since 1999, as Wikipedia reports. Finally something has made it more or less standardized modern browsers have begun to support the new HTML5 (first draft published by the W3C on 22 gennaro 2008 still lacks many parts). The latest document on the website

What's new in this language? Mainly to cover some gaps "operational" with new tags aimed at usability and semantics. Beware, though: the HTML 5, as the W3C is still in draft stage (draft).

Compatible browsers

All new generation browser support HTML 5: Chrome, Firefox 3.5, Opera and Safari. Oops I forgot someone? No, IE does not support the HTML 5, evidently expecting that train is called de jure standards ...

For the record, I publicly browser usage statistics, updated in August 2009, source W3Schools:


You can see that the family is the second IE to Firefox!

New tags
Let's start the show the new doctype, finally with a form that requires no memory and even reinforced the violent copy paste. In fact it is simple:

The new tags are divided into Layout, Multimedia, DHTML and other tags.

HTML 5 tag Layout

* Article: the basic content of the page
* Aside: the extra content
* Figures: additional content that needs a note
* Footer: the foot of the page
* Header: the top of the page
* Navigation: Section Navigation
* Section: definition of sections

The use of these layouts can then call them tags "name" in css. For example, if we just redefine the LI tags on the menu navigation program within
Enter a date: <input name="day" required="required" title="Use format yyyy-mm-dd" type="date" />

But not enough, also supports the validation expressions Regular Expression (reg exp): fantastic. See how valid U.S. zip code:

Enter a U.S. ZIP Code or Canadian Postal Code:

<input name="postcode" pattern="([0-9] (5) (- [0-9] (4 })?)|([ AZ] [0-9] [AZ] \ s + [0-9] [AZ] [0-9]) " required="required" title=" U.S.: 99999-1234; Canadian: A1B 2C3 " type=" text " />

Not bad right? But not everything is possible even to determine the min and max for a numeric field. But for reference, I refer you complete the definition of inputs, which are explained attributes autocomplete, list, required, patterns, min, max, step, placeholder, ...

SVG Support

SVG stands for Scalable Vector Graphics, a definition now old, never used, vector images for the web. Finally you can define a nice circle in this way:

Without necessarily using a GIF: Look what a beautiful kitten!


We have already spoken before but it deserves some more line. The new tag can, via javascript, onfly geometric shapes to create and interact with them. For example to create a circle we can write:

var canvas =
document.getElementById ("simpleCanvas");
if (canvas.getContext) (
var ctx = canvas.getContext ("2d");
ctx.beginPath () / / The Circle
ctx.fillStyle = "# ff0000";
ctx.arc (50, 50, 30, 0, 2 * Math.PI, true);
ctx.closePath ();
ctx.fill (); ();

Google HTML Converter

Hackudesign Recent Post

คุณสามารถเลือกอ่านบทความในการสอนทำ blogger จาก ได้ที่บทความนี้ และถ้าหากคุณชอบบทความในบล็อกนี้อยากให้ช่วยกันบอกต่อด้วยนะครับ ขอบคุณครับ


วาง โค้ด AdSense หรือ HTML/ Java สคริปต์ที่นี่



   CSS :: Other Property :: Indexeslink

  display      ใช้กำหนดรูปแบบการจัดวางข้อมูล
  cursor       ใช้กำหนดรูปแบบของเมาส์ เมื่อเมาส์อยู่เหนือ element
  visibility   ใช้กำหนดว่าให้ซ่อนหรือแสดง element
  zoom        ใช้กำหนดการขยายหรือย่อ ขนาดของ element

   CSS :: other property :: displaylink

   value:block, inline, list-item, none, run-in, compact, marker, table, inline-table,
   table-row-group, table-header-group, table-footer-group, table-column-group,
   table-row, table-column, table-cell, table-caption
   example:{ display: block; }

  CSS :: other property :: cursorlink

value:default, auto, crosshair, pointer, move, text, wait, help, hand, n-resize,
ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize
content:ใช้กำหนดรูปแบบของเมาส์ เมื่อเมาส์อยู่เหนือ element
example:{ cursor: crosshair; }

  CSS :: other property :: visibilitylink

value:visible, hidden, collapse
content:ใช้กำหนดว่าให้ซ่อนหรือแสดง element
example:{ visibility: visible; }

  CSS :: other property :: zoomlink

value:normal, เปอร์เซ็นต์, เลขจำนวนจริง
content:ใช้กำหนดการขยายหรือย่อ ขนาดของ element
example:{ zoom: 150%; }