Introduction with Examples HTML5

HTML5 Examples • Slides • Get Location • Image Gallery More: • Canvas Video • Animation • Game • Interactive Comic

แหล่งเรียนรู้ศึกษา HTML5 ด้วยตัวเอง • ข้อมูล Web browser ที่รัน HTML5 ได้ ข้อมูล Web browser ที่รัน HTML5 ได้ • • เริ่มต้นเขียน HTML5 เริ่มต้นเขียน HTML5 • • • เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5 เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5 • HTML Standard HTML Standard • • • Click for Reference

header Home About Article title.. Text….. Section1 About us… All rights received HTML4 Page layout:

Defines a header for a section or page Defines navigation links Defines content aside from the page content Defines an article Defines a section Defines a footer for a section or page Title Home About Article title.. Text….. Section1 About us… All rights received HTML5 Page layout:

HTML5 Code วีดีโอ Audio + Video เล่นเสียง และ สดงวีดีโอ HTML5 Code เสียง

JavaScript Code var files = document.querySelectorAll('.dragout'); for (var i = 0, file; file = files[i]; ++i) { file.addEventListener('dragstart', function (e) { e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl); }, false); } Drag File to Desktop ดึงไฟล์จากเว็บมาไว้ในเครื่อง HTML5 Code.mp3 file

Canvas Element ใช้ในการวาดภาพ เช่น สี่เหลี่ยม ทรงกลม HTML5 Code JavaScript Code ทรงกลม var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.beginPath(); ctx.arc(70,18,15,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); JavaScript Code สี่เหลี่ยม var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle= "#FF0000" ; cxt.fillRect(0,0,150,75);

ContentEditable แก้ไข Content โดยการคลิกที่ข้อความ และสามารถแก้ไขแล้ว save ทันที HTML5 Code Testing ContentEditable JavaScript Code var editable = document.getElementById('editable'); addEvent(editable, 'blur', function () { localStorage.setItem('contenteditable', this.innerHTML); document.designMode = 'off'; }); addEvent(editable, 'focus', function () { document.designMode = 'on'; }); addEvent(document.getElementById('clear'), 'click', function () { localStorage.clear(); window.location = window.location; // refresh }); if (localStorage.getItem('contenteditable')) { editable.innerHTML = localStorage.getItem('contenteditable'); }

Possibly!.. Because: 1.is not completed. 2.Not fully browser support. How can we move forward ? • It is a good time for learning. • Build web pages HTML4/XHTML + html5 + JS • Building browser-specific apps. • Focusing on the mobile. Is it possible to build sites on HTML5 now?