[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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Document</title>
</head>
<body>

</body>
</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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Semantic Markup Demo: Cross Browser</title>
<link rel="stylesheet" href="html5reset.css" type="text/css" />
<link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<article>
<header>
<h1>Article Heading</h1>
<time datetime="2010-05-05" pubdate>May 5th, 2010</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<section>
<header>
<h1>Section Heading</h1>
</header>
<p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
<footer>
<p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
</footer>
</section>
<section>
<header>
<h1>Section Heading</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<figure>
<img src="item-1.png" alt="Club">
<img src="item-2.png" alt="Heart">
<img src="item-3.png" alt="Spade">
<img src="item-4.png" alt="Diamond">
<figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
</figure>
<p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
<footer>
<p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
</footer>
</section>
<footer>
Article Footer
</footer>
</article>

<aside>
<header>
<h1>Siderbar Heading</h1>
</header>
<p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>

</aside>

<footer>
Page Footer
</footer>

</body>
</html>

จะเห็นได้ว่าไม่มีการใช้แท็ก <div> เลยแม้แต่แท็กเดียว ทำให้โค้ดมีความ Semantic มากขึ้น

โดยเมื่อเรนเดอร์ในบราวเซอร์แล้วจะได้ผลลัพธ์ดังรูปนี้ครับ ตัวอย่างโค้ดและหน้าตาที่แสดงผลในบราวเซอร์ สามารถดูได้ด้านล่างนี้เลยครับ

1723

สำหรับการ Validate HTML5 นั้น สามารถใช้ HTML5 Validator ได้เลยครับ

###########################################

เนื่องจากบทความนี้ยาวมาก สำหรับตอนที่ 1 ก็ขอจบลงเพียงเท่านี้ก่อนนะครับ ต่อไปจะมาพูดเรื่องการใช้เสียงและวีดิโอใน HTML5 ครับ

หากมีคำถาม สามารถโพสทิ้งไว้ได้เลยครับผม จะตอบทุกคอมเม้นท์ให้เร็วที่สุดครับ

อ่านบทความตอนที่ 2 กันได้เลยครับ: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2)


* สำหรับท่านที่เป็นมือใหม่ และต้องการเรียนรู้ HTML5 และ CSS3 แบบรวดเร็ว และเข้าใจง่าย ขณะนี้ทาง Designil School ยินดีมอบส่วนลด คอร์สวีดิโอ Basic HTML5 & CSS3 ให้ท่านที่อ่านบทความนี้ในเดือนนี้ครับ สามารถคลิก รับส่วนลดคอร์ส 15% ได้เลย




About Author

63 Comments

  • DominixZ
    Posted May 27, 2010 5:03 pm 0Likes

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

    • Designil
      Posted May 28, 2010 12:09 am 0Likes

      ขอบคุณสำหรับ RT คร้าบ

  • Half
    Posted May 27, 2010 5:17 pm 0Likes

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

  • NaiTan
    Posted May 28, 2010 8:28 am 0Likes

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

    • Designil
      Posted May 28, 2010 4:53 pm 0Likes

      ขอบคุณที่แวะมาอ่านครับ

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

  • LuviKunG
    Posted May 28, 2010 11:04 am 0Likes

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

    • Designil
      Posted May 28, 2010 4:51 pm 0Likes

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

  • zickr
    Posted May 28, 2010 11:50 am 0Likes

    [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนà. https://www.designil.com/html5-tips-tricks-techniques-1.html

  • thepowerstorm
    Posted May 28, 2010 12:04 pm 0Likes

    RT @zickr: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนà. https://www.designil.com/html5-tips-tricks-techniques-1.html

  • Woratana Perth
    Posted May 28, 2010 12:20 pm 0Likes

    RT @designil: ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! [บทความภาษาไทย] https://bit.ly/b3I6GR

  • BTHOEN
    Posted May 28, 2010 12:39 pm 0Likes

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

  • designbyarm
    Posted May 28, 2010 1:16 pm 0Likes

    RT @designil: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1) https://bit.ly/b3CiBC

  • iMenn
    Posted May 28, 2010 2:01 pm 0Likes

    HTML5 ขยันเขียนดีมากเลยครับ นับถือๆ https://bit.ly/d1HRwv @woraperth

  • ifew
    Posted May 28, 2010 2:02 pm 0Likes

    RT @iMenn: HTML5 ขยันเขียนดีมากเลยครับ นับถือๆ https://bit.ly/d1HRwv @woraperth

  • iMenn
    Posted May 28, 2010 9:01 pm 0Likes

    โอ้ ขยันเขียนดีมากเลยครับ ขอบคุณมากๆ สำหรับความรู้ครับ 😀

    • DesignIL
      Posted May 28, 2010 10:46 pm 0Likes

      ขอบคุณที่แวะมานะคร้าบพี่เม่น ^^

  • suckoja
    Posted May 28, 2010 9:51 pm 0Likes

    ขอบคุณมากครับ : ) (ตาม @iMenn มาอ่าน)

    • DesignIL
      Posted May 28, 2010 10:46 pm 0Likes

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

  • iake
    Posted May 28, 2010 10:37 pm 0Likes

    ในหัวข้อ “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=’https://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
      Posted May 28, 2010 10:52 pm 0Likes

      HTML5 นั้นพัฒนาต่อมาจาก HTML4 + XHTML 2 ครับผม (อ้างอิงจาก wiki)

      เพราะงั้นผมเชื่อว่าการเขียนแบบเปรียบเทียบ HTML5 กับทั้ง XHTML และ HTML ก็ไม่ผิดนะครับ หรือการมองแบบคุณก็ไม่ผิดเช่นกันนะครับ

      ขอบคุณที่มาแชร์ข้อมูลกันครับ

      • iake
        Posted May 28, 2010 11:06 pm 0Likes

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

      • DesignIL
        Posted May 28, 2010 11:15 pm 0Likes

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

      • iake
        Posted May 28, 2010 11:24 pm 0Likes

        ขอบคุณอีกครั้งครับ

        อย่างนี้ แท็กใหม่ที่จะมาใน xhtml 2 ก็ตัดไปเยอะเลย แถมเรื่องที่ใช้ไฮเปอร์ลิงค์ได้ในทุกเอลิเมนท์ด้วย(ทำเสียของมาก)

        ป.ล. อันนี้ตั้งใจจะขอบคุณกลับยังความเห็น #comment-289 แต่ไม่เห็นปุ่ม reply ขึ้นครับ ^ ^

      • DesignIL
        Posted May 28, 2010 11:28 pm 0Likes

        อ้อ พอดีผมตั้ง thread comment ไว้แค่ 3 ระดับน่ะครับ

        ความกว้างบลอคไม่ค่อยเยอะอยู่ กลัวที่ไม่พอครับ หุหุ

  • LuviKunG
    Posted May 29, 2010 3:30 pm 0Likes

    บทความท่านวอร่านี่ฮิตจริงๆ ฮ่าๆๆ

  • gd_ab
    Posted May 29, 2010 9:19 pm 0Likes

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

    • DesignIL
      Posted May 30, 2010 12:39 pm 0Likes

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

  • gd_ab
    Posted May 29, 2010 9:20 pm 0Likes

    retweet ให้แล้วนะครับ

    • Designil
      Posted May 30, 2010 11:49 am 0Likes

      ขอบคุณมากครับผม ^^

  • DooPro
    Posted May 30, 2010 2:44 pm 0Likes

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

    • DesignIL
      Posted May 30, 2010 7:20 pm 0Likes

      ขอบคุณคร้าบ ^^

  • kosate
    Posted June 4, 2010 11:26 pm 0Likes

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

    เป็นกำลังใจต่อไปเรื่อยๆครับ ขอบคุณสำหรับข้อมูลที่เป็นประโยช์ครับ

    • Designil
      Posted June 7, 2010 11:43 pm 0Likes

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

  • Nongoff
    Posted June 7, 2010 8:58 pm 0Likes

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

    • Designil
      Posted June 7, 2010 11:42 pm 0Likes

      ขอบคุณคร้าบ แวะมาบ่อย ๆ นะครับ ^^

  • koh chang resorts
    Posted June 8, 2010 1:54 pm 0Likes

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

  • watana-design
    Posted June 8, 2010 2:03 pm 0Likes

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

  • Wisdominside.org
    Posted June 30, 2010 11:08 am 0Likes

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

  • taiki
    Posted February 8, 2011 2:35 am 0Likes

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

    • Designil
      Posted February 8, 2011 4:39 am 0Likes

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

      ถ้าเริ่มเรียน HTML5 จาก 0 เลยมันก็เหมือนเรียน HTML4 ไปในตัวนั่นแหละครับผม 😉

      • taiki
        Posted February 8, 2011 11:30 pm 0Likes

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

        • Designil
          Posted February 9, 2011 4:43 pm 0Likes

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

          ถ้าสงสัยอะไรยังไงก็สอบถามได้เลยครับ จะพยายามตอบให้ครับผม

          เคยคิดว่าจะเปิดสอนแต่อันนั้นเป็นแพลนในอนาคตครับ 🙂

  • SEO
    Posted March 22, 2011 4:16 am 0Likes

    สุดยอดครับ ขอบคุณคร๊าฟฟฟ

  • SEO
    Posted March 22, 2011 4:18 am 0Likes

    HTML 5 เป็น ยังงี้ นิ เอง ขอบคุณ คร๊าฟฟฟฟฟ

  • Nin Nin
    Posted June 8, 2011 5:44 am 0Likes

    ดีจ้า

    • Hanaoki_m
      Posted September 15, 2011 6:12 pm 0Likes

      HTML5 อย่างเดียวไม่พอหรอก ครับ ต้องเขียน JavaScript + JQuery UI Widget การเขียน JavaScript มั่วไม่ได้

  • Yapara
    Posted July 3, 2011 3:29 am 0Likes

    เจ๋งมากมาย HTML5

  • Weera Wd
    Posted September 26, 2011 2:39 pm 0Likes

    น่าสนใจมากครับ

  • Kopetprapai
    Posted October 8, 2011 3:33 pm 0Likes

    แบ่งปัน

  • Jiwjalaen_8
    Posted October 18, 2011 6:51 am 0Likes

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

  • Ae_yotin
    Posted October 23, 2011 2:52 am 0Likes

    ขอบคุณครับท่าน

  • Modroo
    Posted November 17, 2011 11:12 am 0Likes

    ขอบคูณมากครับ

  • Hanaoki_m
    Posted November 22, 2011 12:39 pm 0Likes

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

    https://silk.codeplex.com/

  • Hanaok_m
    Posted November 22, 2011 12:45 pm 0Likes

    ต้อง 5 ดาว เหมือน thaicarrot  เพ้ เอง https://www.silverlight.net/community/hall-of-fame

  • Bb
    Posted December 1, 2011 4:44 am 0Likes

    ..

  • gameyims kuanha
    Posted September 9, 2012 7:08 am 0Likes

    ขอบคุณคร้าบบบบ

  • Lotto Ninninny
    Posted September 25, 2012 6:32 am 0Likes

    ขอบคุณมากเลยจ่ะ

  • Lotto Ninninny
    Posted September 25, 2012 6:33 am 0Likes

    ขอบคุณมากเลยจ่ะ

  • พีคุงมาม่ะ แชร์ยอง
    Posted October 10, 2012 2:56 am 0Likes

    ขอบคุณมากเลยได้ความรู้เยอะเลย

  • Sitti
    Posted January 10, 2013 1:22 am 0Likes

    อ่านง่าย สบายตา เข้าใจทันที ขอบคุณมากๆ ครับ

  • Devil
    Posted January 13, 2013 7:12 pm 0Likes

    พอมีวิธีทำให้เสียงเล่นต่อกันไหมครับ

  • De
    Posted January 23, 2013 8:27 am 0Likes

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

Leave a comment