สำนักวิทยบริการและเทคโนโลยีสารสนเทศ (สวส.)

Office of Academic Resources and Information Technology

เริ่มต้นเรียนรู้ HTML5 อย่างไรดี

HTML5 เชื่อว่าหลายๆ คนคงจะได้ยินคำนี้มาได้สักพักแล้ว ถึงแม้ว่าจะไม่ใช่นักพัฒนาเว็บไซต์ก็ตาม คงจะเคยได้ยินคำนี้มาแน่นอน เพราะด้วยกระแสต่างๆ ที่นำพาให้พวกท่านรู้จักกับ HTML5 โดยไม่ได้ตั้งใจ และเชื่อว่าด้วยกระแสที่มาแรงคงมีหลายคนอยากเรียนรู้ HTML5 ขึ้นมาไม่มากก็น้อย และก็มีแน่นอนที่ไม่รู้ว่าควรจะเริ่มต้นที่อะไรดี หากเป็นนักพัฒนาเดิมๆ ที่อยู่ในวงการพัฒนาเว็บมานาน หรือมีความรู้อยู่บ้างคงไม่มีปัญหานี้แน่นอนครับ แต่ถ้าเป็นผู้เริ่มต้นอันนี้แหละคือประเด็นและอาจจะต้องเหนื่อพอสมควร สำหรับผู้ที่เริ่มต้นใหม่ ก่อนอื่นผมแนะนำอย่าพึ่งไปสนใจกับอดีตตะชาติของมัน อย่ามัวไปเสียเวลาเพื่อศึกษาชีวะประวัติอันเยอะแยะมากมาย ไม่ว่าจะเป็น HTML 4.01 คืออะไร ? แล้ว XHTML 1.0 ละมันอะไร ? Web Application 1.0 (WA1) เป็นยังไง โอ้ยอีกเยอะแยะรับรองได้เลยถ้าไปอ่านพวกนี้ปวดหัวตายครับ เพราะเป็นเนื้อหาที่เยอะ แต่เป็นสิ่งที่นักพัฒนาควรต้องรู้ แต่เราลำดับความสำคัญมันได้ ถ้าเราพัฒนาเป็นแล้วเรื่องทฤษฎีพวกนี้ก็ไม่ยากครับ แต่ก็ไม่ใช่ว่าจะไม่สนใจทฤษฎี เลยในต้นเริ่มต้นมีทฤษฎี 2-3 อย่างที่นักพัฒนาหน้าใหม่ๆ ต้องเรียนรู้และจดจำได้ยิ่งดี ถ้าจะให้แนะนำอย่าไปสนใจ HTML ในเวอร์ชั่นก่อนๆ มาสนใจกับตัวเวอร์ชั่นให้เป้นพอ โดย HTML5 นั้นอย่างที่ทราบกันก็คือเป็นภาษา HTML เวอร์ชั่นที่ 5 ถูกพัฒนาขึ้นเพื่อใช้เป็นภาษามาร์กอัพ สำหรับการพัฒนา Website เวอร์ชั่นล่าสุด (ซึ่งยังไม่ได้ใช้งานจริงจัง) หนึ่งสิ่งที่ควรจะรู้เกี่ยวกับ HTML5 ก็คือ Features ของมันมีอะไรบ้าง
 
HTML5 Features ได้แก่
·         Semantic Markup
·         Form Enhancements
·         Audio/Video
·         Canvas
·         Content Editable
·         Drag and Drop
·         Persistent Data Storage
 
HTML5 มีฟีเจอร์ใหม่หลักๆ ทั้งหมด 7 ฟีเจอร์ด้วยกัน ซึ่งผมเคยเขียนบทความ HTML5 มี Elements อะไรใหม่ๆ เพิ่มขึ้นมาบ้าง ไปแล้ว คราวนี้เรามาดูกันอีกที เพราะมีบางตัวที่ผมยังไม่ได้กล่าวถึงเลย
 
Semantic Markup อย่างที่ผมเคยกล่าวไว้แล้วว่า ตามความเข้าใจของผมมันคือ DIV Element ตัวหนึ่งใน HTML เวอร์ชั่นก่อนๆ มันคือการพัฒนาเว็บไซต์ด้วยโครงสร้าง div ซึ่งเป็นรูปแบบที่เหล่านักพัฒนานิยมใช้กันในการพัฒนาเว็บไซต์ต่างๆ ซึ่ง div นั้นใช้เพื่อแบ่งพื้นที่ให้เป็นสัดเป็นส่วน เพื่อให้เนื้อหาของเว็บไซต์นั้นสวยงามเป็นระเบียบ หรือวางเนื้อหาใว้ตามพื้นที่ที่ต้องการ Semantic Markup นั้นทำให้เรา Element แต่ละตัวนั้นอ่านง่ายมากขึ้น และพัฒนาง่ายขึ้นด้วย และว่ากันว่าทำให้เราสามารถทำ SEO ได้อย่างมีประสิทธิภาพมากยิ่งขึ้นอีกด้วย (อ่านบทความ HTML5 กับ Div Element หรือ Semantic Markup ที่เปลี่ยนไป เพิ่มเติมได้ครับ)
 
Form Enhancements ก็ตรงตามชื่อเลยครับเป็น Form Elements ที่มีการเพิ่มความสามารถเข้ามา ทำให้การใช้งาน Form ต่างๆ นั้นมีประสทิธิภาพขึ้น โดยมี <datalist>, <keygen>, <output> ที่เพิ่มเข้ามา
 
Audio/Video ฟีเจอร์ที่เป้นหนึ่งในหลายๆ ฟีเจอร์ที่เริ่มเห็นมีนำมาใช้การบางแล้ว และก็คงเป้นอีกหนึ่งฟีเจอร์ที่คิดว่าหลายคนคงได้ลองใช้งานกันมา ฟีเจอร์นี้ทำให้เว็บไซต์สามารถเล่นไฟล์วีดีโอ และไฟล์เสียงได้โดยไม่ต้องติดตั้งปลั๊กอินใดๆ เพิ่มเติม
 
Canvas ตัวนี้ถือว่าเป้นอีกหนึ่งฟีเจอร์ที่ทำให้ HTML5 มีความน่าสนใจขึ้นมาเยอะ มันสามารถทำให้คุณสามารถสร้างระบบต่างๆ ที่คุณต้องการขึ้นมา ไม่ว่าจะเป็นระบบเกมส์ หรือโปรแกรมวาดภาพบนเว็บ สามารถอ่านเพิ่มเติมได้ที่บทความ Canvas element ใน HTML5 คืออะไร ? ตอนที่ 1 และ  Canvas element ใน HTML5 คืออะไร ? ตอนที่ 2
 
ContentEditable อันนี้ตรงตัว HTML5 มันทำให้เราสามารถแก้ไขเนื้อหา ได้โดยตรงผ่านทางหน้าเว็บเลย
 
Drag and Drop อันนี้เป็น Event Attributes ซึ่งทำให้เราสามารถสร้าง Event ให้กับ object ใดๆ ได้ ซึ่งจะสามารถตอบสนองกันระหว่างผู้ใช้งานได้ทันที โดยควบคุมผ่านทาง Mouse Events (ondrag, ondrop)
 
Persistent Data Storage เก็บข้อมูลไว้ในเครื่องผู้ใช้งาน
 
เมื่อรู้ว่า HTML5 มี Features มีอะไรบ้างแล้วจากนั้นเราก็ควรศึกษาว่าจะพัฒนาเว็บโดยใช้ HTML5 นั้นควรจะใช้ Tools อะไรในการพัฒนา ซึ่งในตอนนี้ Tool ที่ผมรู้จักและรองรับ HTML5 มีตัวเดียวนั้นก็คือ Dreamweaver CS5 ซึ่งผมเคยเขียนบทความที่ชื่อว่า เริ่มต้นเขียน HTML5 ด้วย Dreamweaver CS5 ลองไปอ่านดูครับ จากนั้นอีก 2 อย่างที่ควรศึกษาไปพร้อมๆ กันกับ HTML5 ก็คือ CSS3 และ Javascript ทั้ง 3 อย่างนี้ควรจะรู้และเข้าใจเป็นอย่างดี จึงจะสามารถทำให้เกิด 1เว็บไซต์ขึ้นมาได้ ไม่ยากและก็คงไม่ง่ายครับ ไว้บทความตอนหน้าผมจะมาอธิบายเพิ่มว่าควรจะเริ่มศึกษาและพัฒนา HTML5 จากตรงไหนก่อน แล้วเจอกันใหม่ครับ
 
credit : http://www.html5.in.th/