1 / 11

HTML5

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

davina
Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 http://msitrsu.somee.com Introduction with Examples

  2. Slideshttp://slides.html5rocks.com • Get Locationhttp://html5demos.com/geo • Image Galleryhttp://www.apple.com/html5/showcase/gallery More: http://www.apple.com/html5 • Canvas Videohttp://craftymind.com/factory/html5video/CanvasVideo.html • Animationhttp://mrdoob.com/91/Ball_Pool • Gamehttp://www.kesiev.com/akihabara/demo/game-capman.html • Interactive Comichttp://www.­nevermindthebull­ets.­com HTML5 Examples

  3. ข้อมูล Web browser ที่รัน HTML5 ได้ • http://www.html5.in.th • เริ่มต้นเขียน HTML5 • http://www.blognone.com/topics/html5 • http://html5demos.com/ • เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5 • HTML Standard • http://www.w3schools.com/html5/html5_reference.asp • http://www.designil.com • http://html5inth.com/  แหล่งเรียนรู้ศึกษา HTML5 ด้วยตัวเอง Click for Reference

  4. <!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”> <a href=“home.html”>Home</a> <a href=“about.html”>About</a> </div> <div id=“article”> <h1>Article title..</h1> <p>Text…..</p> </div> <div id=“section”> <p>Section1</p> </div> <div id=“aside”> <p>About us…<p> </div> <div id=“footer”> <p>All rights received</p> </div> </body> </html> HTML4 Page layout: <div id=“header”> <div id=“nav”> <div id=“article”> <div id=“aside”> <div id=“section”> <div id=“footer”>

  5. <!DOCTYPE HTML> <html> <body> <header> <h1>Title</h1> </header> <nav> <a href=“home.html”>Home</a> <a href=“about.html”>About</a> </nav> <article> <h1>Article title..</h1> <p>Text…..</p> </article> <section> <p>Section1</p> </section> <aside> <p>About us…<p> </aside> <footer> <p>All rights received</p> </footer> </body> </html> HTML5 Page layout: <header> <nav> <article> <aside> <section> <footer>

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

  7. Drag File to Desktop ดึงไฟล์จากเว็บมาไว้ในเครื่อง

  8. Canvas Element ใช้ในการวาดภาพ เช่น สี่เหลี่ยม ทรงกลม

  9. ContentEditableแก้ไข Content โดยการคลิกที่ข้อความ และสามารถแก้ไขแล้ว save ทันที

  10. Is it possible to build sites on HTML5 now? • Possibly!.. Because: • is not completed. • 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.

More Related