วันพุธที่ 11 กุมภาพันธ์ พ.ศ. 2558

[HTML5 Tutorial] ทุกอย่างที่คุณควรรู้




d27-html5

[HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1)

           
เนื่องจากกระแส HTML5 ตอนนี้มาแรงมากครับ กระแสแรงพอ ๆ กับ CSS3 เลยทีเดียว แต่บางคนอาจเคยได้ยินแต่ชื่อ ไม่รู้ว่า HTML5 มันเอาไว้ทำอะไรกันแน่ ผมก็เลยนำบทความนี้มาฝากกันครับ
บทความนี้นำมาจาก บลอค W3Avenue หากท่านใดชำนาญภาษาอังกฤษ อยากฝึกภาษา ก็สามารถตามลิงค์ไปอ่านบทความต้นฉบับได้เลยครับ
บทความนี้เขียนขึ้นเพื่อแนะนำ HTML5 ให้ผู้ที่ยังไม่เคยใช้มาก่อน รวมถึงสอนการเขียนโค้ด HTML5 เบื้องต้นอีกด้วย หากท่านใดพอจะทราบเรื่อง HTML5 แล้ว ก็จะได้รู้ทิป เทคนิคต่าง ๆ จากบทความนี้ครับ

จุดเด่นของ HTML5

ความสามารถทั้งหมดของ HTML5 สามารถอ่านได้จาก เอกสารอย่างเป็นทางการของ HTML5 (ภาษาอังกฤษ) ครับ หรือถ้าชอบอะไรง่าย ๆ สามารถอ่านได้จาก W3CSchool (ภาษาอังกฤษเช่นกัน แต่เข้าใจง่ายกว่ามาก)
ความสามารถเด่น ๆ ของมันก็คือ:
  • Semantic Markup: โค้ดเป็นระเบียบทำให้ Search Engine เก็บข้อมูลได้ง่าย
  • Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม
  • เสียง / วีดิโอ: หลายคนอาจเคยได้ยินเรื่องที่ว่า HTML5 Video จะมาแทน Flash Video (.flv)
  • Canvas: เอาไว้วาดรูป ตกแต่งรูป ซึ่งว่ากันว่าอาจมาแทนการวาดรูปในแฟลช (Adobe Flash)
  • ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลย
  • Drag and Drop: ลากของมาวาง
  • Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูลเลยทีเดียว

บราวเซอร์ในรองรับ HTML5 บ้าง?

เว็บบราวเซอร์ (เช่น Internet Explorer, Firefox, Chrome etc.) เวอร์ชั่นใหม่ ๆ ได้เริ่มรองรับ HTML5 แล้ว แต่ก็ไม่ได้รองรับความสามารถทั้งหมด ดังนั้นก่อนใช้ความสามารถไหนของ HTML5 แนะนำให้ตรวจสอบจากตารางเปรียบเทียบการรองรับ HTML5 และ CSS3 จากบราวเซอร์ต่าง ๆ
สำหรับท่านที่มีความรู้ด้าน Javascript อยู่แล้ว สามารถใช้ไลบรารี่ Modernizr ในการตรวจสอบว่าบราวเซอร์ซัพพอร์ท HTML5 และ CSS3 หรือไม่
และหากคุณต้องการทราบว่าคุณควรจะทำเว็บไซต์รองรับบราวเซอร์ไหนดี แนะนำให้ลองไปดูที่ Browser Market Share ซึ่งมีข้อมูลเกี่ยวกับว่าในขณะนี้บราวเซอร์ตัวไหนกำลังเป็นที่นิยมมากที่สุด

HTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไร

แน่นอนว่านอกจากจะมีอะไรใหม่ ๆ ใน HTML5 แล้ว ก็มีสิ่งที่เปลี่ยนการเขียนแบบเดิม ๆ ในเวอร์ชั่นเก่าด้วย ซึ่งสิ่งหลัก ๆ ที่เปลี่ยนก็คือ:
  • Doctype เขียนง่ายขึ้น
    ปกติตอนเขียน HTML เวอร์ชั่นเก่าต้องขึ้น <!DOCTYPE แล้วก็ตามด้วยรายละเอียดยาว ๆ แต่พอเป็นHTML5 แล้ว จะเขียนแบบไม่มีกำหนดเวอร์ชั่น เพื่อให้นำไปใช้ได้กับเวอร์ชั่นอื่น ๆ ในอนาคต โดยเขียนแค่สั้น ๆ แบบนี้:
    <!DOCTYPE html>
  • การกำหนดภาษาทำได้ง่ายขึ้น
    เมื่อก่อนจะต้องเขียน xmln หรือ xml:lang ในแท็ก <html> เพื่อกำหนดภาษาของหน้า แต่สำหรับHTML5 จะเหลือแค่นี้:
    <html lang=”en”>
  • การกำหนดชุดตัวอักษรทำได้ง่ายขึ้น
    เมื่อก่อนจะต้องเขียนแท็ก meta ยาว ๆ เพื่อกำหนด Character Set เป็น UTF-8 แต่ตอนนี้เราสามารถกำหนดโดยเขียนแค่นี้:
    <meta charset=”utf-8″ />
  • ไม่ต้องมี “/” สำหรับแท็กเดี่ยวแล้ว
    แท็กเดี่ยว หมายถึงแท็กที่ไม่มีแท็กปิด เช่น <img> <input> <br> ซึ่งจะต่างกับแท็กที่เป็นแท็กเปิดปิดอย่าง <div></div> <strong></strong>
    โดยถ้าเป็นเมื่อก่อน แท็กเดี่ยวจะบังคับให้มี “/” ปิดท้าย เช่น <img /> หรือ <br /> แต่ใน HTML5 นี้แท็กเดี่ยวไม่จำเป็นต้องมี “/” ปิดท้ายแล้ว
  • แท็กบางส่วนจะไม่รองรับใน HTML5 แล้ว
    แท็กเก่า ๆ บางส่วนจะถูกตัดทิ้งไป โดยมีดังนี้ (บางแท็กเรายังไม่เคยใช้กันเลยครับ และบางแท็กสามารถใช้ CSS แทนได้):
    <acronym> <applet> <basefont> <big> <center> <dir> <frame> <frameset> <noframes> <s> <strike> <tt> <u> และ <xmp>
ตัวอย่างโค้ด HTML5
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>HTML5 Document</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>
จะเห็นว่าโค้ดสะอาดตากว่า HTML เวอร์ชั่นเก่ามากเลยครับ

การเขียนแบบ SEMANTIC MARKUP ของ HTML5

อย่างที่บอกไปว่า Semantic Markup เป็นการเขียนให้ Search Engine เข้ามาเก็บข้อมูลได้ง่ายครับ ซึ่งจะทำให้เก็บข้อมูลได้เร็วขึ้น และติดอันดับง่ายขึ้นด้วยครับ
ซึ่งถ้าเป็นเมื่อก่อน เวลาเราจะสร้างกล่องอะไรขึ้นมาสักอัน เราจะใช้แท็ก <div> ใช่มั้ยครับ แต่ตอนนี้พอเป็นHTML5 แล้ว เค้าก็เพิ่มแท็กที่เหมือนกับ <div> ขึ้นมา โดยมีคุณสมบัติเหมือนกัน (ใช้แท็กพวกนี้ ก็เหมือนใช้ <div>) ต่างกันที่แท็กใหม่แต่ละตัวจะบอกความหมายให้ Search Engine รู้ไม่เหมือนกัน เช่น แท็ก <footer></footer> ก็จะบอกว่าอะไรที่ครอบอยู่ในนี้เป็น Footer เว็บไซต์ทั้งหมด
แท็กใหม่ที่เพิ่มเข้ามามีดังนี้: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>,<mark>, <figure>, and <figcaption> (สามารถคลิกเพื่อเข้าไปอ่านว่าแท็กอันนั้นมีหน้าที่อะไร)
ซึ่งเว็บบราวเซอร์ใหม่ ๆ ก็จะรองรับแท็กพวกนี้อยู่แล้ว (Firefox 3+, Safari 3.1+, Chrome 2+, Opera 9.6+) ยกเว้น Internet Explorer ซึ่งวิธีที่จะประกาศแท็กพวกนี้ใน IE แบบง่าย ๆ ก็คือใช้ Javascript อันนี้: document.createElement(tagName)
โดยวิธีใช้คำสั่งด้านบน ก็แทน tagName ด้วยชื่อแท็กที่จะประกาศ เช่น: document.createElement(“footer”); โดยถ้าจะประกาศหลายแท็กก็ต้องใช้คำสั่งนี้หลายรอบ
ถ้าขี้เกียจมานั่งประกาศแท็กทั้งหมด ก็มี สคริปต์ HTML5 Enabling Script กับ IE Print Protector ซึ่งเอาไว้ประกาศ HTML5 แบบรวดเดียวเสร็จใน Internet Explorer
และสำหรับคนที่ใช้ CSS Reset (เป็นไฟล์ CSS เอาไว้รีเซ็ตให้มาตรฐานของแท็กต่าง ๆ ในแต่ละบราวเซอร์ให้เหมือนกัน) ในงานบ่อย ๆ พอมาใช้ HTML5 ก็มี CSS Reset สำหรับ HTML5 ออกมาให้ใช้เหมือนกันครับ โดยมีอีกตัวชื่อ Reset5

ตัวอย่างหน้า HTML5 ที่รองรับ IE

  1. <pre><!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>HTML5 Semantic Markup Demo: Cross Browser</title>
  6. <link rel="stylesheet" href="html5reset.css" type="text/css" />
  7. <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
  8. <!--[if lt IE 9]>
  9. <script src="html5.js"></script>
  10. <![endif]-->
  11. </head>
  12. <body>
  13. <header>
  14. <hgroup>
  15. <h1>Page Header</h1>
  16. <h2>Page Sub Heading</h2>
  17. </hgroup>
  18. </header>
  20. <nav>
  21. <ul>
  22. <li><a href="#">Home</a></li>
  23. <li><a href="#">Projects</a></li>
  24. <li><a href="#">Portfolio</a></li>
  25. <li><a href="#">Profile</a></li>
  26. <li><a href="#">Contact</a></li>
  27. </ul>
  28. </nav>
  30. <article>
  31. <header>
  32. <h1>Article Heading</h1>
  33. <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
  34. </header>
  35. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  36. <section>
  37. <header>
  38. <h1>Section Heading</h1>
  39. </header>
  40. <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
  41. <footer>
  42. <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
  43. </footer>
  44. </section>
  45. <section>
  46. <header>
  47. <h1>Section Heading</h1>
  48. </header>
  49. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  50. <figure>
  51. <img src="item-1.png" alt="Club">
  52. <img src="item-2.png" alt="Heart">
  53. <img src="item-3.png" alt="Spade">
  54. <img src="item-4.png" alt="Diamond">
  55. <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
  56. </figure>
  57. <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
  58. <footer>
  59. <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
  60. </footer>
  61. </section>
  62. <footer>
  63. Article Footer
  64. </footer>
  65. </article>
  67. <aside>
  68. <header>
  69. <h1>Siderbar Heading</h1>
  70. </header>
  71. <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
  73. </aside>
  75. <footer>
  76. Page Footer
  77. </footer>
  79. </body>
  80. </html>
จะเห็นได้ว่าไม่มีการใช้แท็ก <div> เลยแม้แต่แท็กเดียว ทำให้โค้ดมีความ Semantic มากขึ้น
โดยเมื่อเรนเดอร์ในบราวเซอร์แล้วจะได้ผลลัพธ์ดังรูปนี้ครับ สามารถแวะไปดูเดโมของจริงได้ครับ
สำหรับการ Validate HTML5 นั้น สามารถใช้ HTML5 Validator ได้เลยครับ
###########################################
เนื่องจากบทความนี้ยาวมาก สำหรับตอนที่ 1 ก็ขอจบลงเพียงเท่านี้ก่อนนะครับ ต่อไปจะมาพูดเรื่องการใช้เสียงและวีดิโอใน HTML5 ครับ
หากมีคำถาม สามารถโพสทิ้งไว้ได้เลยครับผม จะตอบทุกคอมเม้นท์ให้เร็วที่สุดครับ
อ่านบทความตอนที่ 2 กันได้เลยครับ: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2)
CATEGORIES
CODE TUTORIALSCODINGHTML5RECOMMENDEDTUTORIALSUNCATEGORIZED
TAGGED
DOCTYPEHTML5สอนเว็บดีไซน์ออกแบบเว็บไซด์เว็บดีไซน์
           
ชอบบทความแบบนี้มั้ย ?
มาร่วมเป็นหนึ่งในสมาชิก 1200+ คนของ Designil โดยท่านจะได้รับบทความ เทคนิค ของฟรีดี ๆ เกี่ยวกับการทำเว็บไซต์ HTML5/CSS3 และเว็บดีไซน์ UX UI จากมืออาชีพมากมาย !!
ไม่มีการแสปมแน่นอน 100% ! ข้อมูลของคุณจะถูกใช้สำหรับส่งบทความ ลิงค์ดี ๆ จาก Designil ให้เท่านั้น

RELATED ARTICLES

THERE ARE 82 COMMENTS

ADD YOURS

  1. DOMINIXZ
    Reply
    "RT @designil: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1)http://bit.ly/a9A6HG …" -@woraperth < เขียนแหล่มมาก

  2. HALF
    Reply
    RT @dominixz: "RT @designil: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1) http://bit.ly/a9A6HG …" -@woraperth < เขียนแหล่มมาก

  3. NAITAN
    Reply
    คุณภาพเนื้อหาเยี่ยมมากครับ ไม่มีเปลี่ยนแปลงเลย ช่วงหลังๆนี้ไม่ค่อยได้เรียนรู้อะไรใหม่ๆเลย

    • DESIGNIL
      Reply
      ขอบคุณที่แวะมาอ่านครับ
      ไง ๆ ก็ต้องขอบคุณสำหรับโฮสต์ DesignIL ตั้งแต่เปิดมาด้วยครับ ถ้าไม่มีโฮสต์ Datatan นี่เว็บไซต์นี้ก็ยังเป็นแค่ไอเดียครับ ^^

  4. LUVIKUNG
    Reply
    HTML5 จะยากขึ้นกว่า HTML4 ครัีบ
    ไม่ใช่ยากขึ้นเพราะ code นะครับ แต่ยากขึ้นด้านการจัดเนื้อหา
    ถึงอย่างไรก็ตาม เรายังสามารถเลือกได้อยู่ว่าเราจะใช้แบบ HTML4 หรือ HTML5 ได้ครับ
    หมายความว่าเรายังใช้ code แบบเดิมได้อยู่ครับ

    • DESIGNIL
      Reply
      ใช่ครับ ยังใช้โค้ดแบบเดิมได้อยู่นะ แต่ถ้าอยากใช้ HTML5 แล้วก็ควรจะเขียนโค้ดให้ Semantic ไปเลยนะ

  8. BTHOEN
    Reply
    [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1) เผื่อใครยังไม่ทราบมาก่อนว่า HTML5 คืออะไร .. http://bit.ly/dxOMvx

  13. IMENN
    Reply
    โอ้ ขยันเขียนดีมากเลยครับ ขอบคุณมากๆ สำหรับความรู้ครับ :D

    • DESIGNIL
      Reply
      ขอบคุณคร้าบ อยากอ่านเรื่องอะไรอีกก็บอกได้นะครับ ^^

  15. IAKE
    Reply
    ในหัวข้อ “HTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไร” การบอกว่าเมื่อก่อน…(เขียนอย่างนี้) พอมา html5 เขียนแบบนี้ (โดยเฉพาะที่ quote ข้างล่าง) อ่านแล้วผมรู้สึกว่าผู้เขียนกำลังให้ html5 เป็นรุ่นที่พัฒนาต่อจาก xhtml1.1
    คืออ่านแล้วเหมือนกับว่าหัวข้อเป็น HTML5 แตกต่างจาก XHTML เวอร์ชั่นเก่า อย่างไรมากกว่า
    ซึ่งผมเห็นต่างออกไปว่า html5 นั้นพัฒนาต่อจาก html4 หาใช่ xhtml1.1 ซึ่งมีฐานของการเขียนในแบบ xml ไม่
    ที่รู้สึกเช่นนี้ก็เห็นได้จาก
    การกำหนดภาษาทำได้ง่ายขึ้น
    เมื่อก่อนจะต้องเขียน xmln หรือ xml:lang ในแท็ก เพื่อกำหนดภาษาของหน้า แต่สำหรับ HTML5 จะเหลือแค่นี้:
    <html lang=”en”>
    การใช้ namespace “xml” นั้นมันเป็นรูปแบบการเขียนที่มีในภาษา xml แต่ในภาษา html นั้นไม่ใช้ (เช่นใน xhtml 1.0 xhtml 1.1 ซึ่งสามารถใช้ namespace อื่น ๆ นอกจาก global attributes ได้ เช่น <html xmlns:b=’http://bb.cc/b’> … <b:acronym>abbr</b:acronym> )
    ไม่ต้องมี “/” สำหรับแท็กเดี่ยวแล้ว
    แท็กเดี่ยว หมายถึงแท็กที่ไม่มีแท็กปิด เช่น <img> <input> <br> ซึ่งจะต่างกับแท็กที่เป็นแท็กเปิดปิดอย่าง …
    โดยถ้าเป็นเมื่อก่อน แท็กเดี่ยวจะบังคับให้มี “/” ปิดท้าย เช่น … แต่ใน HTML5 นี้แท็กเดี่ยวไม่จำเป็นต้องมี “/” ปิดท้ายแล้ว
    การต้องปิดแท็กเสมอก็เป็นหลักไวยากรณ์ของ xml อีกเช่นกัน ซึ่ง xhtml บังคับว่าต้องปิดแท็กเสมอ ซึ่ง html ไม่ได้ใช้ไวยากรณ์ของ xml จึงไม่ต้องปิดแท็ก ซึ่ง html5 จะเขียนแบบ xml คือปิดแท็กเสมอก็ได้ ไม่ผิดอะไร และอันนี้ก็ไม่ต่างอะไรกับ html 4.0 คือไม่มีการปิดแท็กใน empty elements แต่อย่างใด
    การใช้ analogy แบบนี้ เห็นว่าเป็นการสับสนระหว่าง xml (ผ่าน xhtml 1.0 และ 1.1) กับ html ถ้าเช่นนั้น การที่ xhtml 1.0 (strict) และ 1.1 ซึ่งไม่อนุญาตให้ใช้บางแท็ก เช่น iframe แต่ใน html 5 ใช้ iframe แบบนี้ก็ก็ต้องบอกว่า html 5 กลับมาใช้แท็ก iframe อีกครั้งด้วยใช่ไหม ซึ่งความจริงแล้วไม่ใช่ เป็นคนละมาตรฐานกัน (คือใน html 4.0 ก็มีใช้)
    ด้วยความเคารพ

    • DESIGNIL
      Reply
      HTML5 นั้นพัฒนาต่อมาจาก HTML4 + XHTML 2 ครับผม (อ้างอิงจาก wiki)
      เพราะงั้นผมเชื่อว่าการเขียนแบบเปรียบเทียบ HTML5 กับทั้ง XHTML และ HTML ก็ไม่ผิดนะครับ หรือการมองแบบคุณก็ไม่ผิดเช่นกันนะครับ
      ขอบคุณที่มาแชร์ข้อมูลกันครับ

      • IAKE
        Reply
        ขอบคุณครับ xhtml 2.0 มันยังร่างอยู่เลยไม่ใช่เหรอครับ

      • DESIGNIL
        Reply
        XHTML 2 ตอนแรกอยู่ในระหว่าง dev ครับ แล้วเข้าใจว่าทีมงานตัดสินใจยุบมารวมกับ HTML5 เลยครับผม

      • IAKE
        Reply
        ขอบคุณอีกครั้งครับ
        อย่างนี้ แท็กใหม่ที่จะมาใน xhtml 2 ก็ตัดไปเยอะเลย แถมเรื่องที่ใช้ไฮเปอร์ลิงค์ได้ในทุกเอลิเมนท์ด้วย(ทำเสียของมาก)
        ป.ล. อันนี้ตั้งใจจะขอบคุณกลับยังความเห็น #comment-289 แต่ไม่เห็นปุ่ม reply ขึ้นครับ ^ ^

      • DESIGNIL
        Reply
        อ้อ พอดีผมตั้ง thread comment ไว้แค่ 3 ระดับน่ะครับ
        ความกว้างบลอคไม่ค่อยเยอะอยู่ กลัวที่ไม่พอครับ หุหุ

  19. GD_AB
    Reply
    เป็นบทควาที่น่าสนใจมากครับ
    แต่ยังมีคำถามที่ว่า “ควร” ที่จะใช้ HTML5 รึยัง?
    เพราะตอนนี้ IE7 กับ IE8 ก็ยังไม่รองรับ HTML5 นะ

    • DESIGNIL
      Reply
      ใช่ครับ แต่ HTML5 ต้องมาในอนาคตแน่นอนครับ ถ้าเริ่มทำตอนนี้ ก็ใช้ Javascript เช็คเพื่อเรียก fallback มาแทนในกรณีผู้ใช้ไม่รองรับ HTML5 ครับ

  21. DOOPRO
    Reply
    ขยันแปลมากเลยนะครับ จะติดตามเรื่อยๆนะครับ อ่านง่ายดี

  22. KOSATE
    Reply
    ขอบคุณมากครับ ขอบคุณสุดๆครับ
    ข้อมูลต่างๆในเว็บมีประโยชน์มากครับ ผมเอาขึ้นเป็น bookmark เลยนะครับเนี่ย
    (ต้องเว็บเด็ดจริงๆเท่านั้นถึงจะเซฟ)
    เป็นกำลังใจต่อไปเรื่อยๆครับ ขอบคุณสำหรับข้อมูลที่เป็นประโยช์ครับ

    • DESIGNIL
      Reply
      มีกำลังใจขึ้นอีกเป็นกองเลยครับ ขอบคุณมาก ๆ นะครับ ^^

  23. NONGOFF
    Reply
    มีประโยชน์มากๆ เลยค่ะ อ่านเข้าใจง่าย และรวบรวมความรู้เอาไว้เยอะมากๆ โดนใจจิงๆค่า

  24. [HTML5 TUTORIAL] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2) | เว็บดีไซน์ สอนออกแบบเว็บไซต์ WEB DESIGN
    Reply
    […] […]

  25. KOH CHANG RESORTS
    Reply
    ขอบคุณมากครับสำหรับข้อมูล กำลังศึกษาอยู่เหมือนกันครับ ยังไงค้นคว้าหาข้อมูลต่อไปนะครับ จะติดตามเรื่อยๆครับ

  26. WATANA-DESIGN
    Reply
    มีประโยชน์มากครับ ทำให้เข้าใจได้ง่ายขึ้นมาก

  28. YOKEKUNG THAILAND
    Reply
    RT @siangchai: HTML5 Tips & Tricks: ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 ! (ตอนที่ 1)http://is.gd/cRdAJ by designil #ittwt

  29. BOGUZZ
    Reply
    RT @yokekung: RT @siangchai: HTML5 Tips & Tricks: ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 ! (ตอนที่ 1) http://is.gd/cRdAJ by designil #ittwt

  31. GANOK_TOR
    Reply
    [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1) | เว็บดีไซน์ สอนออกแบบเว็บไซต์ Web Design http://bit.ly/cV4END

  32. WISDOMINSIDE.ORG
    Reply
    RT @siangchai: Re-tweet: HTML5 Tips: ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 ! (ตอนที่ 1)http://is.gd/cRdAJ by @designil #ittwt

  33. TAIKI
    Reply
    หลังจากอ่านบทความแล้ว ทำให้ยิ่งสนใจใน html5 มากยิ่งขึ้น แต่ไม่ค่อยมีพื้นฐานเลยยังงงนิดหน่อย
    เลยมีเรื่องจะถามค่ะว่า ถ้าเราไม่เคยเรียน html มาเริ่มที่5ได้ไหม หรือไม่ก็แต่เคยทำเวปโดยใช้ตัวทำเวปอื่นมาแล้ว (ดรีมวีเวอร์) มีพื้นทำเวปมาก่อนนิดหน่อย แต่ไม่เปง html นี่จะควรเริ่มต้นยังไง รบกวนช่วยตอบคำถามให้หน่อยนะค่ะ ขอบคุณค่ะ

    • DESIGNIL
      Reply
      ได้ครับ เอาจริง ๆ แล้วการเขียน HTML5 มันก็เหมือน HTML4 อยู่มาก ก็คือถ้าเขียน HTML4 เป็น มาเขียน 5 ก็แค่เรียนรู้แท็กเพิ่มขึ้นแค่นั้นแหละครับ
      ถ้าเริ่มเรียน HTML5 จาก 0 เลยมันก็เหมือนเรียน HTML4 ไปในตัวนั่นแหละครับผม ;)

      • TAIKI
        Reply
        ถ้าเราไม่มีพื้นฐาน html เลยแล้วอยากจะศึกษา html5
        ไม่ทราบว่า ถ้าเราอยากจะเรียนนี่ พอแนะนำได้ไหมค่ะ ว่าที่ไหนมีสอนได้บ้าง
        เพราะบางทีอ่านเองแล้ว ไม่ค่อยเข้าใจค่ะ ขอบคุณค่ะ

        • DESIGNIL
          Reply
          สำหรับที่เรียนนี่ผมไม่ทราบนะครับ เพราะผมอาศัยศึกษาจากหนังสือ แล้วก็เล่นกับ Dreamweaver (โปรแกรมนี้เราสามารถกดดูโค้ดได้นะคร้าบ)
          ถ้าสงสัยอะไรยังไงก็สอบถามได้เลยครับ จะพยายามตอบให้ครับผม
          เคยคิดว่าจะเปิดสอนแต่อันนั้นเป็นแพลนในอนาคตครับ :)

  42. JIWJALAEN_8
    Reply
    เป็น เว็บ design มาต้อง5 ปีแล้ว ถ้ามีตัวนี้เข้า มาคงสะดวกขึ้นเยอะเลย แต่จะแก้นิสัยคนไทยให้ใช้ บราวเซอร์ใหม่ รุ่นใหม่ได้นะ 

  44. [HTML5] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2) | TECHNOLOGY TLCTHAI
    Reply
    […] Semantic Markup ใน HTML5 กันไปแล้ว คราวนี้มาพูดถึง Form […]

  46. HANAOKI_M
    Reply
    ถ้าอยากได้ $45-$80/HR ลองเข้าไปมั่วดูนะครับบบบ อันที่จริงแล้วตอนนี้ HTML กลายเป็น logic แล้ว ไม่ใช่ visual ส่วน visual is CSS.

  49. WEB DEVELOPER กับ WEB DESIGNER ควรเรียนรู้อะไรบ้าง ในปี 2012 | DESIGNIL: WEB DESIGN HTML5 CSS3 TUTORIAL รวมความรู้เว็บดีไซน์ สอนออกแบบเว็
    Reply
    […] HTML5 บ้างครับ แนะนำให้อ่านบทความ ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 […]

  50. FIRST STEP TO HTML5 « VERSATILE
    Reply
    […] สำหรับคนไทยไปตามต่อได้ที่นี้น่ะ : http://www.designil.com/html5-tips-tricks-techniques-1.html […]

  54. ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2) - ::: 9KOH :::
    Reply
    […] […]

  55. พีคุงมาม่ะ แชร์ยอง
    Reply
    ขอบคุณมากเลยได้ความรู้เยอะเลย

  56. MOCKUP-LESS WEB DESIGN ทำเว็บแบบไม่ต้อง MOCKUP ใน PHOTOSHOP | DESIGNIL: ALL ABOUT WEB DESIGN
    Reply
    […] Semantics Tag เป็นยังไง อ่านบทความสอนพื้นฐาน HTML5 ได้เลยครับ) แล้วจัดตำแหน่ง + […]

  58. สรุปความรู้เทพ ๆ จากงาน WORDPRESS DEVELOPER NIGHT 3 !!
    Reply
    […] HTML5 และ CSS3 โดยพี่พร เจ้าของเว็บ […]

  61. DE
    Reply
    Devil คับ หมายถึงให้เสียงเล่นต่อใช้ไหมคับไม่ว่า จะไป อีก page หรือกลับมาอีก
    เท่าที่ผมลองมาคับนะคับไม่ได้ ไปหน้าใหม่โลหดใหม่ เริ่มต้นเพลงใหม่คับ

  62. เรียนภาษาญี่ปุ่น
    Reply
    fantastic points altogether, you simply won a new reader.
    What would you recommend in regards to your submit that you made some days in the past?
    Any certain?

POST A NEW COMMENT


INTERESTING ARTICLES


POPULAR ARTICLES


CATEGORIES

BACK TO TOP


-

กระซิบบอกแอดมินหน่อยครับ ว่าคุณอยากอ่านบทความเรื่องอะไรเป็นพิเศษมั้ย ?

652FLARES×

เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)