:: àÁ¹ÙËÅÑ¡
 áºº·´Êͺ¡è͹àÃÕ¹
 Ë¹èÇ·Õè 1 âÅ¡¢Í§àÇçºà¾¨áÅÐàÇçºä«µì
 Ë¹èÇ·Õè 2 àÃÔèÁµé¹¡Ñº HTML
 áºº·´Êͺ¡è͹àÃÕ¹
 ·ÓäÁµéͧàÃÕ¹ÃÙé HTML
 HTML ¤×ÍÍÐäÃ
 ÅÑɳТͧÀÒÉÒ HTML
 â¤Ã§ÊÃéÒ§ÀÒÉÒ HTML4
 â¤Ã§ÊÃéÒ§ÀÒÉÒ HTML5
 ÊÔè§ãËÁèæ ã¹ HTML5
 à¤Ã×èͧÁ×Í·ÕèãªéÊÃéÒ§àÍ¡ÊÒà HTML
 ÊÃéÒ§àÇçºà¾¨áá´éÇ HTML5
 áºº½Ö¡ËÑ´
 áºº·´ÊͺËÅѧàÃÕ¹
 Ë¹èÇ·Õè 3 ¡ÒèѴ¡ÒâéͤÇÒÁ
 Ë¹èÇ·Õè 4 ¡ÒÃãªéÅÔʵìÊÃéÒ§ÃÒ¡ÒÃ
 Ë¹èÇ·Õè 5 ¡ÒÃá·Ã¡ÀÒ¾
 Ë¹èÇ·Õè 6 ¡ÒÃÊÃéÒ§µÒÃÒ§
 Ë¹èÇ·Õè 7 ¡ÒÃàª×èÍÁâ§àÇçºà¾¨´éÇÂÅÔ§¤ì
˹èÇ·Õè 8 ¡ÒÃãªé§Ò¹ä¿ÅìÇÕ´ÕâÍáÅÐàÊÕ§
 Ë¹èÇ·Õè 9 ¡ÒÃÊÃéÒ§¿ÍÃìÁ
 áºº·´ÊͺËÅѧàÃÕ¹àÃÕ¹
:: ˹èÇ·Õè 2 àÃÔèÁµé¹¡Ñº HTML5

ÊÔè§ãËÁèæ ã¹ HTML5



ÁÕÍÐäÃãËÁèã¹ HTML5 ºéÒ§?

HTML5 ÁÕ¡ÒÃà¾ÔèÁàµÔÁ¤Ø³ÅѡɳìãËÁèæ à¢éÒÁÒà¾ÔèÁàµÔÁ ¾ÃéÍÁ·Ñé§Â¡àÅÔ¡á·ç¡(Tag) ºÒ§µÑÇ «Öè§à»ç¹¡ÒáàÅÔ¡ÃٻẺ¡ÒÃãªé§Ò¹à´ÔÁºÒ§ÊèǹÍÍ¡ä» ÊÔ觷Õèà¾ÔèÁà¢éÒÁÒã¹ HTML5 ·Õè¹èÒʹã¨àªè¹

  • Audio/Video Support ã¹ HTML5 ¨ÐÃͧÃѺÁÑŵÔÁÕà´ÕÂä´éÍÂèÒ§àµçÁÃٻẺËÃ×ÍÊÁºÙóìÁÒ¡¢Öé¹ â´Âä´éà¾ÔèÁá·ç¡ÊÓËÃѺ¡ÒÃáÊ´§ÀÒ¾áÅÐàÊÕ§â´ÂµÃ§
  • New Form Input à¾ÔèÁÍÔ¹¾Ø· (Input) ª¹Ô´ãËÁèæ à¢éÒÁÒÁÒ¡ÁÒÂà¾×èÍÃѺ¢éÍÁÙÅÃٻẺ¹Ñé¹æ â´ÂµÃ§ àªè¹ email, number, datetime à»ç¹µé¹ ¹Í¡¨Ò¡¨ÐªèÇÂãËéàÃÒä´éÃѺ¢éÍÁÙÅ·Õè¶Ù¡µéͧáÅéÇ ÂѧŴ¢Ñ鹵͹¢Í§¡ÒÃà¢Õ¹ʤÃÔ»µì (JavaScript ËÃ×Í PHP) à¾×è͵ÃǨÊͺ¤ÇÒÁ¶Ù¡µéͧ¢Í§¢éÍÁÙÅ
  • Semantic Markup Page Layout ¨Ñ´à»ç¹¡ÅØèÁá·ç¡·Õèãªé㹡ÒèѴâ¤Ã§ÊÃéÒ§¢Í§à¾¨·ÕèÊ×èͤÇÒÁËÁÒ¢ͧÊèǹµèÒ§æ àªè¹ <header>, <nav>, <article>, <section>, <aside> áÅÐ <footer>

  • <header>
    <nav>
    <article> <aside>
    <section>
    <footer>

  • Canvas Graphics ¨ÐªèÇÂãËéàÃÒÇÒ´ÃÙ»¡ÃÒ¿¿Ô¡ÃٻẺµèÒ§ æ µÒÁ·ÕèàÃÒµéͧ¡Òà º¹Ë¹éÒàÇçºà¾¨ä´é§èÒÂáÅÐÊдǡ¢Öé¹
  • Drag & Drop ã¹ HTML5 ¹Ñé¹ÃͧÃѺ¡Òà Drag & Drop Íͺà¨ç¡µìº¹Ë¹éÒàÇçº â´Âãªé¤ÓÊÑè§ ¨ÒÇÒʤÃÔ» (JavaScript) ¤Çº¤ØÁ¡Ãкǹ¡ÒÃ
  • Web Storage à»ç¹¡Åä¡¡ÒèѴà¡çº¢éÍÁÙŽÑè§àºÃÒà«ÍÃì ẺãËÁè «Öè§ÊÒÁÒö¨Ñ´à¡çº¢éÍÁÙÅẺ«Ñº«é͹ä´é´Õ¡ÇèÒà´ÔÁ·Õè¨Ñ´à¡çºáºº¤Ø¡¡Õé
  • Geolocation à»ç¹¡ÒÃËÒ¤èÒÅеԨٴ áÅÐÅͧµÔ¨Ù´à¾×èÍÃкصÓá˹觺¹¾×é¹âÅ¡

á·ç¡ (Tag) ãËÁèã¹ HTML5

HTML5 ÁÕ¡ÒÃà¾ÔèÁá·ç¡ãËÁèà¢éÒÁÒÍÕ¡¨Ó¹Ç¹Ë¹Öè§ à¾×èÍ¢ÂÒ¢մ¤ÇÒÁÊÒÁÒö㹡ÒÃÊÃÒé§àÇçºä«µì ´Ñ§àªè¹ã¹µÒÃÒ§´éÒ¹ÅèÒ§¹Õé.


<article>, <aside>,<header>, <footer>, <nav>, <section> á·ç¡àËÅèÒ¹Õéãªé㹡ÒèѴ¡ÒÃâ¤Ã§ÊÃéÒ§¢Í§àÍ¡ÊÒ÷Õè«Ñº«é͹ãËé´ÕÂÔ觢Öé¹ ¨Ò¡à´ÔÁ·Õèµéͧãªéà»ç¹µÒÃÒ§
<audio>, <video>, <track>, <source>, <embed> à»ç¹á·ç¡ÊÓËÃѺãªé§Ò¹´éÒ¹ÁÑŵÔÁÕà´ÕÂ
<canvas> ãªéÊÓËÃѺÇÒ´ÀÒ¾ áÅÐáÊ´§¼Å´éÒ¹¡ÃÒ¿¿Ô¡
<mark> ÊÓËÃѺà¹é¹¢éͤÇÒÁâ´Â·ÓäÎäŵì¾×é¹ËÅѧ¢Í§¢éͤÇÒÁ
<meter> ÊÓËÃѺ¡ÒÃÇÑ´¤èÒ
<progress> ÊÓËÃѺ¡ÒÃáÊ´§¤ÇÒÁ¤×ºË¹éҢͧ§Ò¹
<time> ÊÓËÃѺáÊ´§Çѹ·Õè áÅÐàÇÅÒ
<datalist> ÊÓËÃѺáÊ´§ÃÒ¡ÒÃã¹ Dropdown
<hgroup> ÊÓËÃѺ¨Ñ´¡ÅØèÁËÑÇ¢éÍàÍ¡ÊÒÃ
<input type="email"> à»ç¹ªèͧÃѺ¢éÍÁÙŪ¹Ô´ÍÕàÁÅ «Öè§ÊÒÁÒöµÃǨÊͺä´éÇèÒ¢éÍÁÙÅ·ÕèãÊèÁÒ¹Ñ鹵çµÒÁÃٻẺ¢Í§ÍÕàÁÅËÃ×ÍäÁè
<input type="url"> à»ç¹ªèͧÃѺ¢éÍÁÙÅ·Õèà»ç¹ URL à·èÒ¹Ñé¹
<input type="number"> à»ç¹ªèͧÃѺ¢éÍÁÙŪ¹Ô´µÑÇàÅ¢
<input type="range"> à»ç¹ªèͧÃѺ¢éÍÁÙÅ·ÕèµéͧÍÂÙè㹪èǧ·Õè¡Ó˹´à·èÒ¹Ñé¹
<input type="color"> áÊ´§ÃÒ¡ÒÃÊÕãËéàÅ×Í¡
<input type="datetime"> ªèͧÃѺ¢éÍÁÙÅà»ç¹ÇѹàÇÅÒà·èÒ¹Ñé¹

á·ç¡·Õè¶Ù¡Â¡àÅÔ¡ãªé§Ò¹ã¹ HTML5

HTML5 ä´éÁÕ¡ÒáàÅÔ¡¡ÒÃãªé§Ò¹ã¹á·ç¡ºÒ§ÊèǹÍÕ¡´éÇ â´Âá·ç¡·Õè HTML5 äÁèÃͧÃѺáÅéÇ ´Ñ§¹Õé

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

㹺ҧá·ç¡ÍÒ¨äÁèä´é¶Ù¡Â¡àÅÔ¡ áµèÍÒ¨ÁÕ¡ÒÃà»ÅÕè¹á»Å§à¡ÕèÂǡѺ¡ÒáÓ˹´¤èÒ á͵·ÃÔºÔǵì (Attribute) ÍÂèÒ§äáçµÒÁ ¶Ö§áÁé HTML5 ¨Ð¡àÅÔ¡á·ç¡ä»ºÒ§ÃÒ¡Òà áµèàÇ纺ÃÒà«ÍÃì (Web Browse) ÍÒ¨¨ÐÂѧÃͧÃѺ¡ÒÃãªé§Ò¹á·ç¡¹Ñé¹ÍÂÙè áÁèàÃÒ¨Ðãªéá·ç¡·Õè HTML5 äÁèÃͧÃѺáÅéÇ¡çµÒÁ ¡ç¨Ðä´éÃѺ¼ÅÅѾ¸ìµÒÁ»¡µÔ

ËÒ¡àÃÒµÑé§ã¨·Õè¨Ð¡éÒÇÊÙèà·¤â¹âÅÂբͧ HTML5 ¡ç¤ÇÃàÅ×Í¡ãªé੾ÒÐÊÔ觷Õè HTML5 ÃͧÃѺ¨Ð´Õ¡ÇèÒ à¾ÃÒÐã¹Í¹Ò¤µËÒ¡àÇçºàºÃÒà«ÍÃìµèÒ§ æ ÃͧÃѺ HTML5 ÍÂèÒ§àµçÁÃٻẺáÅéÇ ÍÒ¨Ê觼ŵèÍàÇçºä«µì¢Í§àÃÒ·Õèãªéá·ç¡äÁèµÃ§¡ÑºÁÒµÃÒ°Ò¹¢Í§ HTML5