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

HTML5

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

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

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

คราวที่แล้วเราพูดถึงเรื่องการเขียน Semantic Markup ใน HTML5 กันไปแล้ว คราวนี้มาพูดถึง Form (แบบฟอร์มที่กรอก ๆ กันบนหน้าเว็บไซต์นั่นเอง) มาดูกันว่าใน HTML5 ฟอร์มจะเจ๋งขึ้นขนาดไหน

HTML5 Form

ก่อนอื่นต้องขอบอกก่อนว่า ในตอนนี้ (ที่เขียนบทความอยู่) เว็บบราวเซอร์ที่ซัพพอร์ท HTML5 Form ได้ดีที่สุด ก็คือ Opera ครับ เพราะฉะนั้นถ้าอยากเห็นการทำงานจริง ๆ ของมันต้องไป ดาวน์โหลด Opera มาก่อนนะครับ

ความสามารถใหม่ ๆ ของฟอร์ม HTML5

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

เราลองมาดูโค้ดตัวอย่างของการใช้ความสามารถใหม่ ๆ ของ HTML5 กันนะครับ เมื่อแสดงผลในเว็บบราวเซอร์ที่รองรับ HTML5 Form ได้ (ในตอนนี้คือ Opera) ก็จะแสดงผลตามในรูป HTML5 Form Demo Image เลยครับ

ส่วนคนที่อยากลองเทสในบราวเซอร์ตัวเองว่าซัพพอร์ท HTML5 Form ได้ขนาดไหน (ลองเอาไปเปรียบเทียบกับในรูป) ก็เชิญที่ HTML5 Form Demo Page เลยครับ

<form>
<fieldset>
<legend>New Attributes</legend>
<p>
<label>Required:</label>
<input type="text" name="html5requied" required="true">
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>AutoFocus:</label>
<input type="text" name="html5autofocus" autofocus="true">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>PlaceHolder:</label>
<input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
<small>Works in Chrome & Safari</small>
</p>
<p>
<label>Input Pattern:</label>
<input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>Multiple Files:</label>
<input type="file" name="html5multiplefileupload" multiple>
<small>Works in Chrome, Safari & Firefox</small>
</p>
<p>
<label>List:</label>
<input type="text" name="html5textwithdatalist" list="colors">
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Blue">
</datalist>
<small>Works in Opera</small>
</p>
</fieldset>

<fieldset>
<legend>New Input Types</legend>
<p>
<label>Email:</label>
<input type="email" name="html5email">
<small>Works in Opera</small>
</p>
<p>
<label>URL:</label>
<input type="url" name="html5url">
<small>Works in Opera</small>
</p>
<p>
<label>Number:</label>
<input type="number" name="html5number" min="1" max="10" step="1" value="1">
<small>Works in Opera</small>
</p>
<p>
<label>Range:</label>
<input type="range" name="html5range" min="-100" max="100" value="0" step="10">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>Time:</label>
<input type="time" step="900" name="html5time">
<small>Works in Opera</small>
</p>
<p>
<label>Date:</label>
<input type="date" name="html5date">
<small>Works in Opera</small>
</p>
<p>
<label>Month:</label>
<input type="month" name="html5month">
<small>Works in Opera</small>
</p>
<p>
<label>Week:</label>
<input type="week" name="html5week">
<small>Works in Opera</small>
</p>
<p>
<label>DateTime:</label>
<input type="datetime" name="html5datetime">
<small>Works in Opera</small>
</p>
</fieldset>

<div><button>Submit</button></div>
</form>

 

 


HTML5 Audio & Video

หลายคนน่าจะเคยได้ยินกันมาบ้างเรื่องการเล่น Video ของ HTML5 ครับ เพราะเป็นที่ถกเถียงกันพอสมควรกับ Adobe Flash ซึ่งข้อดีของ HTML5 Video ที่มีเหนือ Adobe Flash คือ มันรันได้โดยที่ไม่ต้องใช้ปลั๊กอินอะไรเพิ่มเลย และไม่ต้อง embed โค้ดยาว ๆ แค่ใส่แท็ก HTML5 สั้น ๆ ไปก็เรียบร้อย (ส่วนข้อดีของคนดู คือ จะดูดไฟล์ก็ทำได้ง่าย ๆ ไม่ต้องไปพึ่งเว็บ พึ่งโปรแกรมดูด)

หมายเหตุ: ไฟล์เสียง/วีดิโอพวกนี้ใช้ Firefox ก็รันได้นะครับ ไม่ต้องใช้ Opera อย่างเดียวเหมือน HTML5 Form

ก่อนอื่นมาดูกันว่าไฟล์เสียง/วีดิโอนามสกุลไหนบ้างที่ซัพพอร์ทบนเว็บบราวเซอร์:

เราสามารถตั้งไฟล์ได้มากกว่า 1 นามสกุลในแท็กอันเดียว เพื่อให้บราวเซอร์เลือกไปเล่นไฟล์นามสกุลอื่นกรณีที่ไม่ซัพพอร์ทไฟล์แรกได้อีกด้วย ลองดูตัวอย่างโค้ดสำหรับรันไฟล์เสียงอันนี้:

Audio Player

<audio controls>
<source src="demo-audio.ogg" />
<source src="demo-audio.mp3" />
</audio>

 

จะเห็นได้ชัดว่าโค้ด HTML5 สั้นมาก ๆ และยังรองรับการกำหนดหลายไฟล์อีกด้วย

แจกโค้ด HTML5 เพลง เสียง Audio

ด้านบนนี้เป็นรูปนะครับ สามารถเข้าไปดูของจริงบนบราวเซอร์ได้ที่ HTML5 Audio Demo

Video Player

<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
<source src="demo-video.mp4" type="video/mp4" />
<source src="demo-video.ogv" type="video/ogg" />
</video>

โค้ดสำหรับใส่วีดิโอบนหน้าเว็บไซต์ก็ยาวกว่าเล่นเสียงนิดเดียวเอง โดยหน้าตาของมันเวลาเล่นบนเว็บบราวเซอร์จะเป็นแบบนี้

แจกโค้ด HTML5 Video Audio

โดยถ้าอยากลองทดสอบของจริงบนเว็บบราวเซอร์ของคุณ ก็ลองแวะไป HTML5 Video Demo ได้เลยครับ

นอกจากจะใช้ตัวเล่นเสียง/วีดิโอแบบปกติที่มากับเว็บบราวเซอร์ เราสามารถใช้ Javascript เพื่อเขียนอินเตอร์เฟซของเราเองได้ด้วยครับ ซึ่งอันนี้เอาไว้พูดถึงตอนเขียนลงรายละเอียดกันอีกทีครับ

HTML5 Graphics with Canvas

นอกจากเรื่องของ HTML5 Video ที่โด่งดังแล้ว ความสามารถในการวาดรูปบน HTML5 ก็เป็นที่พูดถึงไม่แพ้กัน โดยเท่าที่ผมลองไปศึกษามาดูนั้น การวาดรูปใน Canvas ต้องใช้ Javascript วาดอีกที เพราะฉะนั้นควรเขียน Javascript พื้นฐานเป็นนิดหน่อย และมีความรู้เรขาคณิตเบื้องต้นครับ

ข้อดีของ Canvas ก็คือ บราวเซอร์ที่รองรับมีเยอะมากครับ (Firefox 3, Safari 3.1, Chrome 2, และ Opera 9.6) ซึ่งสำหรับ Internet Explorer ที่ไม่รองรับ เราสามารถใช้เทคนิค Javascript ที่เรียกว่า ExplorerCanvas ในการแสดงผลบน IE ได้ครับ

เราลองมาดูตัวอย่างโค้ดการใช้ Canvas กันครับ โค้ดจะยาวสักหน่อยครับ:

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Demo</title>
<link rel="stylesheet" href="html5reset.css" type="text/css" />
<link rel="stylesheet" href="html5simple.css" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');

// Draw Rectangle
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect (10, 10, 100, 100);

// Draw Circle
ctx.fillStyle = "rgb(0,255,0)";
ctx.beginPath();
ctx.arc(125,100,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();

// Draw Custom Shape With Lines
ctx.fillStyle = "rgb(0,0,255)";
ctx.beginPath();
ctx.moveTo(125,100);
ctx.lineTo(175,50);
ctx.lineTo(225,150);
ctx.fill();
ctx.closePath();

// Draw Image From External File
var myImage = new Image();
myImage.onload = function(){
ctx.drawImage(myImage, 220, 10);
}
myImage.src = "sample.jpg";

}
}
</script>
<style type="text/css">
canvas {
border: 5px solid #ccc;
background: #000;
}
</style>
</head>
<body onload="draw();">
<header>
<h1>HTML5 Canvas Demo</h1>
</header>

<figure>
<canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
<figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
</figure>
</body>
</html>

เวลาแสดงผลจะออกแบบเป็นแบบนี้รูปด้านล่างนี้ครับ

ตัวอย่างการวาดรูปด้วย HTML5 Canvas

จากโค้ด จะเห็นได้ว่าเราใช้วิธีสร้าง <canvas> ขึ้นมา แล้วเอา Javascript วาดรูปลงไปในแท็ก <canvas> ครับ ใครอยากลองเทสบนบราวเซอร์ตัวเองก็แวะไปที่ HTML5 Canvas Demo นะครับ

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

สงสัย หรือมีความคิดเห็นอะไร เชิญโพสได้ตามสะดวกเลยนะครับ หรือถ้าใครชอบก็รบกวนกด Retweet เพื่อเผยแพร่บทความให้ด้วยครับ ขอบคุณมากครับผม


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







There are 60 comments

Add yours
  1. finzaa

    อยากสอบถามในเรื่องของการใช้ flash ถ้าสมมติว่าผมจะไม่ใช้แฟรชแล้ว
    รูปที่ถูกดราฟมาจากโฟโต้ช๊อป จะมาเล่นทรานซิชั่นและโอพาซิตี้ จะมีโปรแกรมสำเร็จรูปที่มารองรับเรื่องนี้รึป่าว

    • DesignIL

      ไม่ค่อยเข้าใจว่า “เล่นทรานซิชั่นและโอพาซิตี้” คือยังไงเหรอครับ

      หมายถึงทำแบบ jQuery Slide หรือเปล่าเอ่ย?

  2. babyblack

    ขอสอบถามหน่อยครับว่า สามารถพัฒนาร่วมกับ javascript เพื่อวาดกราฟและพล็อตจุด จากนั้นสามารถนำเม้าส์ไปคลิกที่แต่ละจุดเพื่อเปลี่ยนตำแหน่งได้รึเปล่าครับ
    ขอบคุณมากครับ

    • DesignIL

      ผมไม่ชัวร์ว่าหมายถึงยังไงนะครับ แต่ถ้าเป็นแบบที่ผมคิดน่าจะทำได้ครับ

      หรือจะลองใช้ Library สำหรับวาดกราฟใน Javascript โดยเฉพาะอย่าง https://www.jscharts.com/ ดูก็ได้ครับ (มีหลายตัวครับ ลองหา ๆ ดู)

  3. boonp

    ขอบคุณมากครับทีให้ความรู้ได้อย่างมาก
    ผมเพิ่งเริ่มศึกษา html เพื่อเตรียมเขียน website ของตัวเองที่จะมีขึ้น และเริ่มใช้ Homesite 5.5 ซึ่งรองรับแค่ html 4.0 และ xhtml 1.0 และอ่านหนังสือ Brilliant HTML & CSS ของ James A. Brannan ซึ่งจำกัดแค่ html 4.0 กับ CSS เท่านั้น
    ไม่ทราบว่า software และ หนังสือนี้เหมาะใช้ในการเตรียมตัวเบื้องต้น เพื่อก้าวไปสู่การเขียน html5, css3 tag หรือไม่ครับ กลัวว่าจะไปเสียเวลาเรียนรู้กับส่วนที่ล้าสมัยที่ html5 มีอะไรที่มาทดแทนที่ดีกว่า

    ขอคำแนะนำ software และหนังสือ หรือ ข้อมูลในการศึกษาที่เหมาะกว่าด้วยครับ

    • DesignIL

      HTML5, CSS3 ยังเป็นเทรนด์ใหม่ซึ่งยังไม่ได้ถูกใช้อย่างกว้างขวางครับ และบราวเซอร์ก็ยังซัพพอร์ทไม่สมบูรณ์ ในตอนนี้การใข้ HTML 4 หรือ XHTML 1 น่าจะดีกว่าครับ คุณสามารถต่อยอดความรู้ไป HTML5 ในภายหลังได้ถ้าต้องการ

      แนะนำว่าให้ศึกษาของเก่าไปก่อนครับ รอจนบราวเซอร์ต่าง ๆ รอรับเต็มที่ก่อน แล้วค่อยมาศึกษา HTML5 ก็ไม่สาย เอาพื้นฐานให้แน่นก่อนครับผม

  4. ิboonp

    ขอบคุณครับที่กรุณาสละเวลาตอบมา แต่ัคุณสมบัติพิเศษที่พัฒนาขี้นมาจากข้อบกพร่องเดิม เท่าที่ได้อ่านมาจากที่นี่และที่อื่น ดูจะไม่เป็นปัญหาในการนำมาใช้ใช่ไหมครับ เพราะ browser ต่างๆก็ออก version ใหม่กันทั้งสิ้น และให้ฟรีไม่ต้องเสียเงินลงทุน และถ้ามีคนยังใช้ version เก่าอยู่ก็มีทางแก้อย่างที่ได้แนะนำกันนี่ครับ
    ผมจึงคิดจะใช้ software ที่รองรับ HTML5 ไปเลย เพราะจะใช้ Doctype เป็น html5 และตอนนี้หาหนังสือสอน HTML5 ได้แล้วครับ ส่วน sotware จะเลือกเป็น DreamWeaver CS5 หรืออย่างอื่นดีครับ เท่าทีค้นดู มี Aloha, Topstyle เป็นต้น
    และสำหรับท่านไม่ทราบใช้ตัวไหนครับ

    • Designil

      ถ้าบราวเซอร์เวอร์ชั่นเก่าจะใช้วิธีเขียน javascript มารองรับระบบนั้นๆครับ ในกรณีที่เราต้องการให้ทุกบราวเซอร์แสดงผลใกล้เคียงกันมากที่สุด

      แต่ถ้าเป็นระบบไม่สำคัญอะไรก็ไม่ต้องสนใจมากครับ เอาให้แสดงผลแบบอ่านเนื้อหาออกก็พอล่ะ

      ผมชอบเขียนใน text editor เลยน่ะครับ แนะนำ notepad++ สำหรับวินโดว์ และ coda/espresso สำหรับ mac os ครับผม^^

  5. boonp

    ขอบคุณอีกครั้งครับ นี่เลยไปเอา notepad++ มาแล้วครับ ก่อนหน้าก็ไปเอา Netbean 6.9 ซึ่งเป็น freeware ที่มี IDE รวมอยู่ในตัวด้วย ดูจะเจ๋งด้าน Java แต่ยังจะไม่รู้ว่าจะใช้เขียน html tag ยังไงเลยยังไม่ได้ใช้ ไม่ทราบว่ามีความเห็นยังไงในการเอา Netbean มาใช้บ้างครับ

    • DesignIL

      ผมคิดว่า IDE เหมาะกับเอาไว้เขียนโปรแกรมมากกว่าครับ (Java, PHP etc.)

      ถ้าดีไซน์เว็บไซต์ใช้พวก WYSIWYG น่าจะดีกว่า (พวก Dreamweaver) แต่ยังไงผมก็ถนัด Text Editor มากกว่าทั้งโค้ดทั้งดีไซน์อะคร้าบ

  6. p1i3c1h

    ขอถามนิดนึงนะครับตกลง HTML 5 พวก tag ที่ไม่จำเป็นต้องมีแท็กปิด ยังต้องมี / อยู่รึเปล่าครับ

    ผมเห็นตรง *
    ยังมี / อยู่เลยอะครับ

  7. Designil

    ใน HTML5 ไม่จำเป็นแล้วนะครับ

    แต่มีก็ไม่ผิดครับ เพราะคนส่วนใหญ่น่าจะติดมาจากตอนเขียน XHTML

  8. SomjuK Pinsitong

    เอ่อ,,คือว่า หนูลองเขียน htm5 แล้วนะคะ แต่ว่า ทำไมมันไม่แสดงผลภาษาไทยก็ไม่รู้?? มีทริกหรือเทคนิคอะไรไหมคะ,,รบกวนด้วยค่ะ


Post a new comment