![[MS-HTML5]: Microsoft Edge / Internet Explorer …MS-HTML5].pdfMicrosoft Edge / Internet Explorer HTML5 ... Microsoft Edge / Internet Explorer HTML5 ... Microsoft Edge / Internet Explorer](https://static.fdocuments.in/doc/165x107/5ad35ecf7f8b9aff738de6d3/ms-html5-microsoft-edge-internet-explorer-ms-html5pdfmicrosoft-edge-.jpg)
HTML5
11
Introduction with Examples HTML5 ttp://msitrsu.somee.com
description
HTML5. http://msitrsu.somee.com. Introduction with Examples. S lides http://slides.html5rocks.com G et Location http://html5demos.com/geo I mage Gallery http://www.apple.com/html5/showcase/gallery More: http://www.apple.com/html5 - PowerPoint PPT Presentation
Transcript of HTML5
Introduction with Examples
HTML5http://msitrsu.somee.com
HTML5 Examples
• Slides http://slides.html5rocks.com
• Get Location http://html5demos.com/geo
• Image Gallery http://www.apple.com/html5/showcase/galleryMore: http://www.apple.com/html5
• Canvas Video http://craftymind.com/factory/html5video/CanvasVideo.html
• Animation http://mrdoob.com/91/Ball_Pool
• Game http://www.kesiev.com/akihabara/demo/game-capman.html
• Interactive Comic http://www.nevermindthebullets.com
แหล่�งเรี�ยนรี� �ศึ�กษา HTML5 ด้�วยตั�วเอง• ข้�อมู�ล่ Webbrowser ที่��รี �น HTML5ได้�• http://www.html5.in.th• เรี��มูตั�น เข้�ยน HTML5• http://www.blognone.com/topics/html5• http://html5demos.com/• เรี��มูตั�น เข้�ยน HTML5 ด้�วย DreamweaverCS5• HTMLStandard• http://www.w3schools.com/html5/html5_reference.asp• http://www.designil.com• http://html5inth.com/
Click for Reference
<div id=“header”>
<div id=“nav”>
<div id=“article”>
<div id=“footer”>
<div id=“aside”><div id=“section”>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><body><div id=“header”><h1>header</h1></div><div id=“header”><ahref=“home.html”>Home</a><ahref=“about.html”>About</a></div><div id=“article”><h1>Articletitle..</h1><p>Text…..</p></div><div id=“section”><p>Section1</p></div><div id=“aside”><p>Aboutus…<p></div><div id=“footer”><p>Allrightsreceived</p></div></body></html>
HTML4 Page layout:
<header> Defines a header for a section or page
<nav> Defines navigation links
<aside> Defines content aside from the page content
<article> Defines an article
<section> Definesasection
<footer> Defines a footer for a section or page
<header>
<nav>
<article>
<footer>
<aside><section>
<!DOCTYPE HTML><html><body><header><h1>Title</h1></header><nav><ahref=“home.html”>Home</a><ahref=“about.html”>About</a></nav><article><h1>Articletitle..</h1><p>Text…..</p></article><section><p>Section1</p></section><aside><p>Aboutus…<p></aside><footer><p>Allrightsreceived</p></footer></body></html>
HTML5 Page layout:
HTML5 Code วี�ดี�โอ<videoid="video"src="http://www.teerapuch.com/demo/HTML5/videotag/song.mp4"autoplaycontrols></video>
Audio + Video เล่�นเสี�ยง แล่ะ สีดีงวี�ดี�โอ
HTML5 Code เสี�ยง<audioid="audio"src="http://slides.html5rocks.com/src/rushus-modal_blues.mp3"controls></audio>
JavaScript Code
<script>varfiles=document.querySelectorAll('.dragout');for(vari=0,file;file=files[i];++i){file.addEventListener('dragstart',function(e){e.dataTransfer.setData('DownloadURL',this.dataset.downloadurl);},false);}</script>
Drag File to Desktop ดี�งไฟล่�จากเวี�บมาไวี�ในเครื่��อง
HTML5 Code<ahref="http://slides.html5rocks.com/src/star.mp3"draggable="true"class="dragout"data-downloadurl="audio/mpeg:star.mp3:http://slides.html5rocks.com/src/star.mp3">.mp3file</a>
Canvas Element ใช้�ในการื่วีาดีภาพ เช้�น สี��เหล่��ยม ทรื่งกล่ม
HTML5 Code<canvasid="myCanvas"width="200"height="100"></canvas>
JavaScript Code ทรื่งกล่ม<script>varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.beginPath();ctx.arc(70,18,15,0,Math.PI*2,true);ctx.closePath();ctx.fill();</script>
JavaScript Code สี��เหล่��ยม
<script>varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>
ContentEditable แก�ไข Content โดียการื่คล่&กท��ข�อควีาม แล่ะสีามารื่ถแก�ไขแล่�วี save ท(นท�HTML5 Code
<section id="editable" contenteditable="true"> <p>Testing ContentEditable </p></section>
JavaScript Code<script>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');}</script>
Possibly!.. Because:1. isnotcompleted.2. Notfullybrowsersupport.
How can we move forward ?• Itisagoodtimeforlearning.• BuildwebpagesHTML4/XHTML+html5+JS• Buildingbrowser-specificapps.• Focusingonthemobile.
Is it possible to build sites on HTML5 now?
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://static.fdocuments.in/doc/165x107/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://static.fdocuments.in/doc/165x107/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
