In html, บทความทั้งหมด

สิ่งแรกที่ทุกคนตั้งคำถามเกี่ยวกับ HTML 5 คือ อะไรคือ HTML 5 และต่างจาก HTML 4.01 อย่างไรคำถามที่ตามมาคือ แล้วมีอะไรใหม่ๆ หรือมีอะไรดีบ้างใน HTML 5 ซึ่งในบทความนี้ ขอกล่าวถึง วิธีจัดโครงสร้างบนเว็บเพจโดยใช้ HTML 5

สิ่งใหม่ๆ ที่พบใน HTML 5

สิ่งแรกที่ทุกคนตั้งคำถามเกี่ยวกับ HTML 5 คือ อะไรคือ HTML 5 และคำถามที่ตามมาคือ แล้วมีอะไรใหม่ๆ หรือมีอะไรดีบ้างใน HTML 5

  • ประการแรกที่เห็นได้ชัดคือ ที่บรรทัดแรกของ HTML จะต้องมีคำว่า  <!DOCTYPE HTML> ซึ่งเป็น DOCTYPE ที่สั้นกว่า HTML เวอร์ชันอื่นๆ การกำหนด <!DOCTYPE HTML> เป็นการบอกให้บราวเซอร์ทำงานแบบ Standard Mode
  • ประการที่สอง รูปแบบของ Character Set ที่ใช้บนเว็บเพจนั้นมีรูปแบบที่สั้นลง โดยกำหนดเพียง <meta charset=‘UTF-8’> ลงในส่วนของแท็ก <head>
  • ประการที่สาม HTML 5 มีการจัดโครงสร้างของเว็บเพจใหม่ โดยจะมีแท็ก ที่ใช้บ่งบอกถึงโครงสร้าง เช่น มีแท็ก <nav> แสดงลิงค์หลักของเว็บไซต์ มีแท็ก <header> สำหรับแสดงข้อมูลในส่วนหัว มีแท็ก <aside> แสดงข้อมูลในส่วนด้านข้าง มีแท็ก <footer> แสดงข้อมูลในส่วนล่างของเว็เบพจ แท็ก <section> สำหรับแบ่งข้อมูลออกเป็นส่วนๆ หรือแท็ก<article> ที่แยกรายละเอียดของข้อมูลที่สนใจ เป็นต้น
  • ประการที่ 4 เพิ่ม Inline Element ใหม่ๆ เช่น แท็ก <time> สำหรับแสดงวันและเวลา แท็ก <mark> แสดงข้อมูลที่เราเน้น หรือสนใจเป็นพิเศษ แท็ก <meter> ใช้สำหรับดูข้อมูลของการใช้งานทั่วไป เช่น การใช้เนื้อที่ในดิสก์ หน่วยความจำ แท็ก <progress> ที่ใช้ดูความก้าวหน้าของคำสั่งตั้งแต่เริ่มต้นจนสำเร็จ
  • ประการที่ 5 เพิ่ม Element ใหม่ๆ ที่จำเป็นต่อการใช้งานในปัจจุบัน ได้แก่

แท็ก <canvas> ใช้สำหรับการวาดรูปในแบบ 2 มิติ บนพื้นที่ที่กำหนด ซึ่งในแท็กนี้ช่วยให้เราสามารถควบคุมจุดพิกเซลบนพื้นที่ที่ต้องการได้ เช่น นำภาพมาวิ่งวนไปมาบนหน้าจอ หรือลากกราฟสดๆ แบบออนไลน์ สร้างเกมบนเว็บเพจ เป็นต้น ซึ่งกรณีของ Canvas เราจะใช้ JavaScript ในการจัดการ Canvas

แท็ก <video>  ใช้สำหรับการเล่นไฟล์วิดีโอ โดยไม่จำเป็นต้องติดตั้ง Plugin ใดๆ เพิ่มเติมเลย ซึ่งในปัจจุบันเราอาจจะต้องติดตั้ง Flash ในการเล่นไฟล์วิดีโอหรือแอนนิเมชันอยู่ เราสามารถใช้ JavaScript ควบคุมการเล่นวิดีโอ หรือแสดงข้อมูลต่างๆ ของวิดีโอ เช่น แสดงเวลาที่เหลือ แสดงเวลาที่ใช้ไป สามารถสร้างปุ่มหยุดชั่วคราว สามารถกำหนดว่าจะให้เล่นวิดีโอเมื่อโหลดเสร็จแล้วเท่านั้น ฯลฯ

แท็ก <audio>  มีลักษณะการใช้งานคล้ายแท็ก <video> คือ ใช้สำหรับการเล่นไฟล์เสียง โดยไม่จำเป็นต้องติดตั้ง Plugin เพิ่ม เรียกได้ว่า หากต้องการนำเสียงไปใส่ไว้บนเว็บเพจ เราสามารถทำได้ง่ายกว่าเดิมมาก

  • ประการที่ 6 ใน HTML 5 สามารถกำหนดเมนู เมื่อมีการคลิกเมาส์ปุ่มขวาได้แล้ว (เรียกว่า Context Menu) ซึ่งเราสามารถกำหนดได้ว่า หากคลิกขวาที่ Element ใด หรือบริเวณที่ต่างกัน ก็จะเกิดเมนูจากการคลิกขวาที่ต่างกันออกไปด้วย
  • ประการที่ 7 มีการปรับปรุง Form โดยเพิ่ม input รูปแบบใหม่ๆ ที่เหมาะกับการใช้งานบนเว็บในปัจจุบัน เช่น ถ้ากำหนด <input type = email>  จะหมายถึงการรับค่าเฉพาะอีเมล์เท่านั้น ซึ่งเราสามารถควบคุมได้ว่า หากกรอกข้อมูลไม่ถูกประเภท ก็จะไม่รับข้อมูลดังกล่าว เป็นต้น โดย input รูปแบบใหม่ๆ ได่แก่ date, month, week, time, range ,email ฯลฯ

HTML 5 กับ CSS

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

หากเราเข้าไปดูใน www.3w.org หรือ www.whatwg.org ก็จะพบว่าการพัฒนา HTML 5 จะมีการอ้างอิงกับ CSS อยู่เสมอ อาจกล่าวได้ว่า HTML 5 ถูกออกแบบมาให้ใช้งานคู่กับ CSS ก็คงไม่ผิดนัก

CSS หรือ Cascading Style Sheet  เป็นมาตรฐานที่กำหนดขึ้นโดย W3C (World Wide Web Consortium) ซึ่งเป็นองค์กรกลางที่คอยกำหนดมาตรฐานเกี่ยวกับอินเทอร์เน็ต โดยต่อไปนี้ Timeline แสดงถึงจุดเริ่มต้นและการปรับปรุง CSS จนมาถึง CSS เวอร์ชันที่กล่าวถึงในหนังสือเล่มนี้ ซึ่งก็คือ CSS3 นั่นเอง

CSS1 (CSS Level 1) เกิดขึ้นในปี 1996 ใช้สำหรับเป็นมาตรฐานในการ ปรับแต่งข้อความ กำหนดฟอนต์ และการกำหนด margin ซึ่งในเวลานั้น Netscape  4 และ Internet Explorer 3 สนับสนุนการทำงานร่วมกับ CSS1

CSS-P (CSS-Positioning) ใช้เพื่อกำหนดให้สามารถแสดง element ต่างๆ บนเว็บเพจให้ตรงตามที่ต้องการ เช่น กำหนดอัตราความโปร่งแสง (Transparency) ได้อย่างถูกต้องตรงกัน เป็นต้น

CSS2 (CSS Level 2) ปรากฏในปี 1998 ซึ่งได้เพิ่มเติมเกี่ยวกับการใช้งานภาษาต่างๆ  จากนั้นในปี 2006 ก็ได้มีการพัฒนาเป็น  CSS2.1 (AKA CSS2) โดยได้แก้ไขปรับปรุงจากเดิม เช่น การกำหนดค่าความกว้างความยาวแม่นยำและถูกต้องยิ่งขึ้น สามารถลิงค์ไปยังไฟล์CSS ภายนอก สนับสนุนการจัดตำแหน่ง element บนเว็บ หรือจัดเลย์เอาท์ด้วยตาราง ฯลฯ ซึ่ง CSS2.1 มีส่วนช่วยให้การแสดงผลบนบราวเซอร์ที่ต่างกันกลายเป็นมาตรฐานเดียวกัน ในปัจจุบันหากมีการอ้างถึง CSS2 จะหมายถึง CSS2.1 ซึ่งถือว่าเป็น CSS รุ่นล่าสุดที่ได้มีการประกาศใช้อย่างเป็นทางการนั่นเอง

CSS3 (CSS Level 3) คือ CSS เวอร์ชันล่าสุด สามารถทำงานได้กับบราวเซอร์ชั้นนำ ไม่ว่าจะเป็น Edge, Firefox, Safari, Chrome หรือ Opera แต่ในบางคุณสมับิติ อาจใช้งานไม่ได้กับบราวเซอร์บางรุ่น บางเวอร์ชัน โดยเฉพาะบราวเซอร์รุ่นเก่าๆ

สำหรับคุณสมบัติใหม่ๆ ของ CSS3 ซึ่งเป็นจุดเด่น ได้แก่

  • การทำแสงและเงาที่ element  (Drop shadows) เช่นการทำงานที่รูปภาพ หรือที่ตัวอักษร
  • สามารถให้รูปเหลี่ยมกลายเป็นขอบมนได้ (Rounded corners) เช่น ทำให้รูปสีเหลี่ยมกลายเป็นขอบโค้งๆ ซึ่งดูสวยงามกว่าขอบเหลี่ยมๆ แบบเดิม
  • สามารถเปลี่ยนภาพพื้นหลัง โดยไม่จำกัดว่าจะแสดงเพียงภาพเดียว (Multiple backgrounds)
  • สามารถกำหนดอัตราความโปร่งแสง (Opacity) โดยสามารถแสดงภาพเป็นแบบจางๆ หรือแบบทึบโดยสามารถปรับค่าได้ตามต้องการ
  • สามารถแก้ไขปรับแต่งรูปภาพได้ เช่น ทำให้ภาพเบลอไม่ชัด ทำให้ภาพคมขึ้น เปลี่ยนสีภาพ เป็นต้น

HTML 5 กับ JavaScript

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

จากที่ผ่านมา จะเห็นได้ว่า HTML 5 ได้เพิ่ม แท็กใหม่ๆ ขึ้นมาพอสมควร ซึ่งแท็กเหล่านั้นช่วยให้ผู้ที่ไม่คุ้นเคยกับ JavaScript สามารถทำงานบางอย่างได้สะดวกขึ้น ตัวอย่างกรณีของการกรอกแบบฟอร์มบนเว็บเพจ เมื่อก่อน เราอาจต้องเขียนโค๊ต JavaScript เพื่อกำหนดว่าช่องนี้สามารถกรอกค่าสูงสุดได้เท่าไหร่ หรือต้องเขียนโค๊ตเพื่อตรวจสอบว่าประเภทของข้อมูลเป็นแบบตัวเลขไม่ใช่ตัวหนังสือ ฯลฯ แต่หากใช้ HTML 5 ก็จะลดขั้นตอนการเขียนโค๊ต JavaScript เหล่านั้นลงได้

แต่ในความเป็นจริงแล้ว แม้ว่า HTML 5 จะได้เตรียมอะไรใหม่มาช่วยอำนวยความสะดวกมากขึ้น แต่การเขียนโค๊ต JavaScript ยังคงเป็นสิ่งคู่กับ HTML 5 อยู่ดี เพราะการควบคุม element ต่างๆ การเขียนแอปพลิเคชัน รวมถึงการใส่ลูกเล่นบนเว็บเพจ ก็ยังต้องอาศัย JavaScript แบบหลีกเลี่ยงไม่ได้เลย

ยิ่งไปกว่านั้นแท็กใหม่ๆ ที่ถูกเพิ่มเข้าไปยัง HTML 5 ก็จะมาพร้อมกับ API ใหม่ๆ ควบคู่กันไปด้วย เช่น แท็ก <canvas>  ที่ใช้สำหรับการวาดพิกเซลลงบนเว็บเพจ จะมาพร้อมกับ API ที่อนุญาตให้เราใช้ JavaScript เขียนโค๊ตสำหรับควบคุมการวาดรูป เช่น วาดเส้นตรง สี่เหลี่ยม วงกลม เส้นโค้งแบบอิสระ เป็นต้น

หรือในกรณีของแท็ก <video>  หรือแท็ก <audio>  เรามักต้องใช้ JavaScript เพื่อเขียนโค๊ตในควบคุมการเล่นไฟล์วิดีโอหรือไฟล์เสียง ไม่ว่าจะเป็นการเล่น หยุดเล่น การกรอไปข้างหน้า การเล่นย้อนกลับ การแสดงภาพตัวอย่างวิดีโอ ฯลฯ

จากเหตุผลดังกล่าว ผู้เขียนจึงได้สรุปใจความสำคัญของ JavaScript มาให้ในหนังสือเล่มนี้ด้วย จุดประสงค์ก็เพื่อเป็นการปูพื้นฐานสำหรับการเขียนโค๊ตในการจัดการ element ต่างๆ ใน HTML 5 ได้นั่นเอง ในทางตรงข้ามหากผู้อ่านไม่คุ้นเคยกับ JavaScript แล้ว ในบทหลังๆ อาจไม่เข้าใจคำสั่งหลายอย่าง ที่เกี่ยวกับ JavaScript ไม่ว่าจะเป็นการควบคุมวีดีโอ ไฟล์เสียง หรือการวาดรูปใน Canvas

ในปัจจุบัน JavaScript ถูกพัฒนาไปมาก มีการปรับปรุงให้เร็วขึ้นกว่าเดิม ด้วยพื้นฐานที่ว่า การถอดโค๊ตคำสั่งของ JavaScript จะทำที่บราวเซอร์ ดังนั้นในแต่ละบราวเซอร์จึงพัฒนาเทคโนโลยีที่เป็น JavaScript engine ของตนโดยเฉพาะ เพื่อช่วยให้การรันคำสั่ง JavaScript ได้อย่างมีประสิทธิภาพมากยิ่งขึ้น ซึ่งผลที่ตามมาก็คือ เว็บเพจก็จะโหลดเร็วยิ่งขึ้นตามไปด้วย

  • Google Chrome จะใช้ JavaScript engine ที่เรียกว่า V8
  • Firefox ก็มีเทคโนโลยี JavaScript engine ของตนเช่นกัน โดยใช้ชื่อว่า Rhino
  • Safari จะใช้ JavaScript engine ที่มีชื่อว่า SquirrelFish
  • Internet Explorer, Microsoft Edge ก็มี JavaScript engine ที่มีชื่อเรียกว่า Chakra
  • Opera จะใช้ JavaScript engine ที่เรียกว่า Carakan

การจัดวางตำแหน่ง Element บนเว็บเพจ

สำหรับท่านที่คุ้นเคยกับ HTML 4 ก็จะพบว่า หากต้องการจัดวางตำแหน่ง Element ต่างๆ บนเว็บเพจ จะเริ่มจากการแบ่งเนื้อหาของเว็บเพจออกเป็นส่วนย่อยๆ ด้วยแท็ก <div> โดยแต่ละส่วนจะต้องกำหนด id หรือ class จากนั้นจึงใช้ CSS เข้ามาช่วยในการตำแหน่ง เช่น กำหนดให้ <div id=header>   อยู่บริเวณด้านบนของเว็บเพจ <div id=footer>  อยู่ที่ด้านล่าง หรือใช้ <div id=main>  เพื่อแสดงส่วนเนื้อหาหลักของเว็บเพจ เป็นต้น นอกจากนั้นในแต่ละส่วนสามารถแยกกำหนดสีพื้น  ฟอนต์ หรืออื่นๆ ได้อย่างง่ายดายด้วย CSS

thaidemy-html-43

รูปแสดงการใช้ <div> จัดโครงสร้างของเว็บเพจ โดยยังไม่ได้ใช้ CSS

thaidemy-html-44

รูปแสดงการใช้ <div> และใช้ CSS ช่วยจัดตำแหน่ง Element บนเว็บเพจ

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

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

thaidemy-html-45

รูปแสดงการใช้แท็กของ HTML 5 ในการจัด Element บนเว็บเพจ

จากรูปข้างบน เราจะพบว่า HTML 5 ได้เตรียมแท็ก <header> เพื่อแสดงข้อมูลในส่วนบนของเว็บเพจ ใช้แท็ก <nav> เพื่อเก็บลิงค์หลักของเว็บไซต์ ใช้แท็ก <article> แสดงข้อมูลหลักบนเว็บเพจ ส่วนแท็ก <aside> ใช้แสดงข้อมูลอื่นที่ไม่ใช่ส่วนหลักของเว็บเพจ อาทิเช่น โฆษณา และใช้แท็ก <footer> ในการแสดงข้อมูลส่วนล่างของเว็บเพจ เป็นต้น

เดิมทีแล้ว การแบ่งระดับของเค้าโครง จะใช้แท็ก <h1> ถึง <h6> เพื่อใช้แสดงว่าส่วนไหนที่เป็นข้อมูลหลักหรือข้อมูลย่อย แต่ใน HTML 5 ได้เปลี่ยนไปใช้แท็กต่างๆ ในการจัดเค้าโครงเอกสารของเว็บเพจ อย่างเช่นแท็ก <header>, <footer>, <section>, <article>, <nav>, <aside>, <h1>, <h2>, <h3>, <h4>, <h5> หรือแท็ก <h6>

Global Attribute ใน HTML 5

ก่อนที่เราจะมาศึกษาเกี่ยวกับการจัดโครงสร้างบนเว็บเพจ เราควรทำความรู้จักกัย Global Attribute ใน HTML กันก่อน Global Attribute คือ Attributeที่สามารถใช้กับ element ทุกๆ ตัวได้ อาทิเช่น accesskey, class, dir, id, lang, style, tabindex, title, contenteditable, contextmenu, data-, draggable, hidden, spellcheck และ subject

สำหรับ Attribute หลักต่อไปนี้ คือ Global Attribute ที่มีใช้งานใน HTML 4 และยังสามารถใช้งานได้ใน HTML 5 ด้วย

  • accesskey ใช้กำหนดคีย์ลัดสำหรับเรียกใช้งาน element ปัจจุบัน เช่น <a href="#" accesskey="h">  หมายถึงสามารถกดคีย์ <alt + h> เพื่อเรียกใช้งานลิงก์นี้ได้
  • class เป็นการกำหนดชื่อ class ให้กับ element ซึ่งเราสามารถกำหนด class ชื่อเดียวกันให้กับ element หลายๆ ตัวได้  โดยสามารถใช้ CSS เพื่ออ้างอิงถึง element ทั้งหมดพร้อมกันได้
  • dir กำหนดทิศทางในการแสดงข้อความใน element ซึ่งปกติอักษรจะแสดงจากซ้ายไปขวา แต่อาจมีบางภาษาที่เริ่มจากขวามาซ้าย เช่น <p dir="ltl">ซ้ายไปขวา</p>  หรือ <p dir="rtl">ขวามาซ้าย</p>
  • id เป็นการกำหนดชื่อ id ให้กับ element ซึ่งแต่ละ id จะต้องไม่ซ้ำ โดยสามารถใช้ CSS เลือก element โดยระบุจากชื่อ id นี้ได้
  • lang เป็นการกำหนดภาษาว่าจะใช้ภาษาใด
  • style เป็นการปรับแต่งรูปแบบการแสดงผล เช่น เปลี่ยนสีตัวอักษร สีพื้น ซึ่งใช้งานในลักษณะเดียวกับ CSS
  • tabindex กำหนดลำดับของการกดคีย์ <tab> เพื่อใช้ในการเลือก element ด้วยคีย์บอร์ด หรือคลิกปุ่ม tab
  • title ใช้กำหนดข้อมูลเพิ่มเติมให้กับ element เช่น ชื่อที่ใช้อธิบาย เป็นต้น

ตัวอย่างการใช้งาน Attribute ตามรายการข้างบน สามารถศึกษาได้จากโค้ตต่อไปนี้

นอกจาก Attribute พื้นฐานที่ดังกล่าวแล้ว HTML 5 ยังได้เพิ่ม Attribute มาตรฐานแบบใหม่ๆ เข้ามาอีกหลายแบบ ดังเช่นรายการต่อไปนี้

  • contenteditable เป็นการอนุญาตให้สามารถแก้ไขข้อมูลใน element นี้ได้หรือไม่
  • contextmenu ให้เพื่อกำหนดเมนูในกรณีที่มีการคลิกเมาส์ปุ่มขวา
  • data-ownAttribute เป็นการกำหนด attribute ส่วนตัวขึ้นมาใช้เอง โดยจะขึ้นต้นด้วย data- แล้วตามด้วยชื่อที่เราตั้งขึ้นมาเอง เช่น data-jeerawuth โดยเราสามารถใช้ JavaScript เพื่อเรียกข้อมูลนี้มาใช้ หรือนำไปเก็บไว้ในฐานข้อมูลก็ได้
  • draggable ใช้เพื่อกำหนดว่าจะให้ element นี้สามารถใช้เมาส์ลากได้หรือไม่
  • dropzone ใช้เพื่อบอกว่าจะมีอะไรเกิดขึ้นหากลากข้อมูล ภาพ หรือ items อื่นๆ มายัง element
  • hidden ใช้สำหรับแสดงหรือซ่อน element บนหน้าจอ ซึ่งเราสามารถใช้ JavaScript สั่งให้แสดงหรือซ่อนแทนก็ได้
  • item ใช้เพื่อรวมกลุ่ม element เข้าด้วยกัน เช่น รวมกลุ่มของ <article> ซึ่งเป็นเนื้อหาหลักของเว็เบเพจ เป็นต้น
  • itemprop ใช้เพื่อรวมกลุ่ม item โดยหากในเว็บเพจมีหลาย item เราสามารถจัดกลุ่ม item บนเว็บเพจได้
  • spellcheck ใช้เพื่อตรวจสอบคำสะกดและไวยากรณ์ของเนื้อหาใน element

ตัวอย่างต่อไปนี้ คือ การใช้แท็ก <section> พร้อมกับ Attribute ที่มีอยู่ใน HTML 5 โดยการกำหนด contenteditable = “true” ซึ่งหมายถึงเราสามารถแก้ไขเนื้อหาใน element นั้นๆ ได้

การจัดตำแหน่งเนื้อหาบนเว็บเพจใน HTML 4

ใน HTML 4 หากเราต้องจัดเลย์เอาท์ของเว็บเพจ เช่น ให้ด้านบนเป็นชื่อและโลโก้ประจำเว็บไซต์ ด้านข้างเป็นลิงค์หลักสำหรับกระโดดไปยังเว็บเพจอื่นๆ ตรงกลางเป็นเนื้อหาหลัก และส่วนล่างแสดงที่อยู่เบอร์โทร เราจะต้องใช้ CSS ช่วยในการจัดเรียง element จากรูปตัวอย่างต่อไปนี้ จะเห็นได้ว่าแม้จะเป็นเพียงการจัดวางง่ายๆ แต่การเขียนโค๊ต CSS ก็มีหลายบรรทัดพอสมควร

thaidemy-html-46

รูปแสดงตัวอย่างการจัดวาง element ใน HTML 4

เริ่มต้นให้เขียนโค๊ตลงในไฟล์ HTML จากตัวอย่างจะแบ่งเป็นส่วน Header, Main และ Footer ซึ่งภายใน Main ก็จะมีการแบ่งย่อยเป็น Sidebar (ที่อยู่ด้านซ้าย) และ Article ที่ใช้แสดงเนื้อหาหลัก (อยู่ทางขวามือ)

สำหรับการเขียน CSS จะเป็นการบังคับให้ element ต่างๆ ไปอยู่ในตำแหน่งที่ต้องการ พร้อมกับกำหนดสี และระยะห่างระหว่าง Element ต่างๆ ด้วย ซึ่งหากท่านใดไม่คุ้นเคยกับ CSS ก็สามารถไปศึกษารายละเอียดในบทความอื่นของ Thiademy ได้ครับ จากนั้นจึงกลับมาดูโค๊ตนี้อีกครั้ง ก็จะเข้าใจในทันที

จากโค๊ต HTML และ CSS ข้างต้น หากเราเข้าไปดูในส่วนของ Outline จะพบว่า การจัดโครงสร้างข้อมูลของ HTML 4  นั้นมีปัญหาอยู่บ้างบางประการ เพราะไม่สามารถทราบได้ว่า อะไรเป็นหัวข้อใหญ่ หัวข้อรอง ซึ่งทำให้คนอื่นที่ไม่ใช่เจ้าของโค๊ตตั้งแต่แรกจะดูโค๊ตลำบาก

การจัดเค้าโครงแบบใหม่ใน HTML 5

ใน HTML 5 ได้มีการปรับปรุงวิธีการจัดวางโครงสร้างหลักบนเว็บเพจให้ง่ายยิ่งขึ้น ดังนี้

  • แท็ก <header>  สำหรับการจัดวางข้อมูลในส่วนบนของเว็บเพจ
  • แท็ก <footer>  สำหรับข้อมูลที่อยู่ด้านล่าง
  • แท็ก   <aside>  สำหรับการวางข้อมูลด้านข้างของเว็บเพจ
  • แท็ก   <nav>  สำหรับการสร้างลิงค์ไปยังเว็บเพจหลัก
  • แท็ก <article>  สำหรับการแสดงข้อมูลหลัก
  • แท็ก  <section>  สำหรับแบ่งเว็บเพจออกเป็นส่วนๆ (แบ่งเป็น section)

ต่อไปนี้คือ รูปตัวอย่างการแสดงเนื้อหา ด้วยแท็ก <header>, <footer>, <nav>, <aside>, <section> และ <article> ซึ่งเป็นแท็กแบบใหม่ที่พบใน HTML5

thaidemy-html-47

เพื่อให้ได้เว็บเพจตามรูปตัวอย่างข้างบน ด้วย HTML 5 ในที่นี้จะใช้แท็ก <header>, <footer> ในการแสดงพื้นที่ด้านบนและด้านล่างของเว็บเพจ  ใช้ <section> เพื่อแสดงเนื้อหาหลักของเว็บเพจ ซึ่งภายใน <section> จะมีแท็ก <aside> และ <article> โดย <aside> ใช้แสดงข้อมูลด้านซ้าย ส่วน <article> ใช้แสดงข้อมูลของเนื้อหาหลักด้านขวา

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

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

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

ตรวจสอบ เค้าโครงบนเว็บเพจ

เนื่องจาก HTML 5 ได้ถูกออกแบบ ที่มีการจัดโครงสร้างการจัดวางข้อมูลใหม่ โดยเพิ่มแท็ก <header>, <footer>, <aside>, <section>, <article>, <hgroup> และแท็ก <nav> เป็นต้น ซึ่งการจะดูว่าเว็บเพจมีการเรียงลำดับโครงสร้างอย่างไร เช่น ส่วนไหนเป็นหัวข้อใหญ่ ส่วนใดเป็นหัวข้อย่อย และมีจัดวางว่า element ไหนมาก่อนมาหลัง ฯลฯ  เพื่อให้ทราบโครงสร้างด้งกล่าวเราสามารถใช้บราวเซอร์ เช่น  Chrome ตรวจสอบได้

thaidemy-html-48

รูปแสดงเว็บเพจเปรียบเทียบกับเค้าโครงเว็บเพจใน HTML 5

เราสามารถตรวจสอบโครงสร้างของเว็บเพจ โดยดูจาก Outline ซึ่งสามารถย่อขยายตรวจสอบ เค้าโครงที่อยู่ในเว็บเพจด้วยการคลิกย่อขยาย เพื่อดูรายละเอียด หรือซ่อนส่วนที่ไม่ต้องการได้

thaidemy-html-50 thaidemy-html-49

ต่อไปนี้คือ ตัวอย่างการใช้ Firefox เพื่อดูเค้าโครงที่อยู่ใน HTML 5

  1. เปิดเว็บเพจที่ต้องการ จากนั้นคลิกขวาบริเวณที่ว่างๆ แล้วเลือก Inspect Element
  2. จะพบเค้าโครงของเว็บเพจตามต้องการ

thaidemy-html-51 thaidemy-html-52

แท็ก <header>

แท็ก <header> เป็น element ของ HTML 5 ซึ่งนิยมใช้เก็บข้อมูลหลักที่พบในทุกๆ เว็บเพจ เช่น รูปภาพโลโก้บริษัท ลิงค์หลักของเว็บไซต์ หรือกล่อง Search สำหรับค้นข้อมูลบนเว็บไซต์ เป็นต้น

จากตัวอย่างจะเห็นว่าภายใน <header> สามารถใส่แท็ก <h1> จนถึง <h6> ลงไปได้ ซึ่งแนะนำว่าควรใส่ เพราะเวลาเราดูที่ Outline ก็จะปรากฏชื่อ title ของ <header> ด้วย ซึ่งถ้าเราไม่ต้องการให้มี <h1> ปรากฏบนหน้าจอก็ใส่ Attribute ว่า hidden=‘true’ เพื่อซ่อน element นี้เอาไว้

นอกจากนั้นภายในเว็บเพจเดียวกัน เราสามารถกำหนดแท็ก <header> ได้หลายแห่ง แท็ก <header> นอกจากอยู่ส่วนหัวของเว็บเพจแล้ว ยังสามารถเข้าไปอยู่ในแท็กอื่นๆ ได้อีกด้วย ไม่ว่าจะเป็นส่วนของ <section>, <nav> หรือ <aside> ดังนี้

ระวัง! อย่าสับสนระหว่าง แท็ก <head> กับแท็ก <header> เพราะแท็ก <head> เป็นแท็กดั่งเดิมของ HTML ที่ใช้เก็บข้อมูลเกี่ยวกับเว็บเพจ ส่วน <header> เป็น element ใหม่ของ HTML5 ที่มักเก็บเนื้อหาที่เป็นส่วนหัวของเว็บเพจ และยังมีคำหนึ่งที่น่าจะช่วยให้สับสนยิ่งขึ้น คือ heading ซึ่งหากกล่าวถึง heading จะหมายถึงแท็ก <h1> จนถึง <h6>

แท็ก <hgroup>

แท็ก <hgroup> ใช้เพื่อรวมกลุ่ม Heading ซึ่งได้แก่ <h1> จนถึง <h6> เปรียบได้กับการซ่อนหัวข้อย่อยๆ ให้แสดงเฉพาะหัวข้อหลัก เช่น รวมหัวข้อที่มีลำดับดับย่อยๆ  1, 1.1, 1.2, 1.2.1, 1.2.2, 1.2.3 ให้เหลือเพียงเลข 1 เป็นต้น การใช้งาน <hgroup> เหมาะสำหรับในเว็บเพจที่มีหลาย Heading แล้วต้องการการยุบรวมหัวข้อเข้าด้วยกัน

จากโค๊ตตัวอย่างด้านบน ได้มีการกำหนด <style> โดยให้แต่ละ Heading มีสีและขนาดตัวอักษรที่ต่างกัน จากนั้นทดลองกำหนด <h1> จนถึง <h3> เพื่อกำหนดให้มีการกำหนดลำดับตัวเลขย่อยๆ ซึ่งเมื่อเปิดดูผลลัพธ์บนเว็บบราวเซอร์ และตรวจดู Outline จะพบว่ามีการจัดเรียงในลำดับหัวข้อย่อยๆ ตามต้องการ

สำหรับกรณีที่เราต้องการรวม Heading เข้าด้วยกัน เป็นการยุบเพื่อให้สามารถดู Outline ได้ง่าย เราก็ทำได้ง่ายๆ โดยการกำหนดแท็ก <hgroup> ครอบในส่วนที่ต้องการซ่อน ดังตัวอย่างต่อไปนี้

แท็ก <aside>

แท็ก <aside> จะมีจุดประสงค์ตรงกันข้ามกับแท็ก <article> กล่าวคือ จะใช้แสดงข้อมูบในส่วนที่ไม่ใช่ประเด็นหลักของเว็บเพจ เช่น ข้อความที่เป็นทิปเทคนิค หรือกรอบข้อความที่เป็นโฆษณา โดยมากแล้ว Element นี้ จะถูกวางอยู่ที่ด้านข้างของเว็บเพจ จะเป็นทางซ้ายหรือทางขวาก็ได้ ซึ่งในตัวอย่างกำหนดให้อยู่ด้านขวาของหน้าจอ

เริ่มจากป้อนโค๊ต HTML ซึ่งจะเห็นได้ว่า ภายในแท็ก <side> อาจเป็นข้อความ เป็นลิงค์ หรือข้อมูลอื่นๆ ที่ไม่ใช่ใจความหลักของเว็บเพจ

ในตัวอย่างจะนำเอาแท็ก <aside> และ <header> ไปอยู่ภายใต้แท็ก <section> จุดประสงค์ก็เพราะ เวลาเราใช้ CSS จัดเรียง element ทั้ง <aside> และ <header> จะอยู่ในแนวเดียวกัน จากนั้น เราก็ใช้ CSS กำหนดให้ <aside> ชิดด้านขวา ซึ่งในที่นี้จะอยู่ชิดด้านขวาของ <div>ไม่ใช่ชิดขวาของหน้าจอ สำหรับโค๊ต CSS ที่ควบคุมตำแหน่งและสีสันของ element ตามข้างต้นมีรายละเอียด ดังนี้

แท็ก <article>

แท็ก <article> ใช้แสดงข้อมูลหลักของเว็บเพจ หมายถึง ส่วนที่เราต้องการให้ผู้เข้าเยี่ยมชมเว็บไซต์สนใจ โดยการกำหนดแท็ก <article> สามารถใช้แสดงข้อมูลที่ไม่เกี่ยวข้อกับส่วนอื่นๆ หรือใช้แสดงเนื้อหาที่มีลักษณะซ้ำๆ เช่น การโพสข้อความในเว็บบอร์ด ข่าวใหม่ๆ ที่มีการเพิ่มเติมทุกวัน หรือนำไปใช้งานร่วมกับหัวข้อข่าวแบบ RSS Feed เป็นต้น

ในส่วนของ CSS ได้มีการกำหนดให้ <article> ชิดซ้าย ซึ่งในที่นี้คือการชิดซ้ายโดยอ้างอิงกับแท็ก <div> (เป็นการอ้างอิงจาก Child Element ไปยัง Parent Element)

จากตัวอย่างข้างต้น จะเห็นได้ว่า ในแท็ก <article> สามารถบรรจุแท็ก <header> หรือ <footer> เข้าไปได้ด้วย ให้ทดลองเปิดบนบราวเซอร์และให้สังเกตการจัดเรียง Outline ประกอบ เพื่อที่เราจะได้ทราบว่า <article> มีผลอะไรกับ Outline ของเว็บเพจบ้าง

แท็ก <section>

แท็ก <section> ใช้เพื่อแบ่งเว็บเพจออกเป็นส่วนๆ เป็นเหมือนการจัดกลุ่ม element เช่น การแบ่งประเภทข่าวออกเป็น ข่าวการเมือง ข่าวกีฬา และข่าวบันเทิง ในกรณีเช่นนี้ เราสามารถกำหนด <article> เพื่อเก็บข้อมูลของแต่ละข่าว แล้วนำเอาข่าวที่เกี่ยวข้องกันไปรวมกันใน <section> ได้

อันที่จริงแล้ว การกำหนด <section> มีจุดประสงค์เกี่ยวกับการจัดโครงสร้าง Outline รวมอยู่ด้วย เราจึงมักกำหนด heading เช่น <h1> ไว้ใน <section> เสมอ เพื่อบอกให้ Outline ทราบว่าส่วนนี้เกี่ยวข้องกับอะไร และที่สำคัญข้อมูลที่อยู่ภายใน <section> ซึ่งจากตัวอย่างคือ ข่าวแต่ละข่าว ก็ควรแสดงอยู่ใน Outline ด้วยเช่นกัน

ให้ทดลองรันโค๊ต HTML กับบราวเซอร์ พร้อมตรวจสอบ Outline ก็จะพบว่า ในแต่ละหัวข้อข่าวที่อยู่ใน <article> จะปรากฏอยู่ในรายการของ <section> ด้วย

thaidemy-html-53

แท็ก <nav>

แท็ก <nav> จะใช้เก็บลิงค์บนเว็บเพจ ซึ่งลักษณะของลิงค์ดังกล่าวนั้น มีอยู่ด้วยกัน 2 แบบ คือ ลิงค์ไปยังเว็บเพจอื่นๆ หรือลิงค์ไปยังตำแหน่งต่างๆ ของเว็บเพจปัจจุบัน โดยจุดประสงค์จริงๆ แล้ว การออกแบบ <nav> จะใช้เก็บลิงค์หลักที่ลิงค์ไปยังเว็บเพจหลักของเว็บไซต์ แต่ก็สามารถใช้ในที่อื่นๆ ได้ด้วย เช่น นำไปใส่ใน <footer> เพื่อใช้สำหรับลิงค์ไปเพื่ออีเมล์ติดต่อกับผู้ดูแลเว็บไซต์ หรือลิงค์ไปยังหน้าเว็บเพจที่แสดงรายละเอียดอื่นๆที่เกียวข้อง สรุปได้ว่า <nav> สามารถกำหนดได้หลายๆ ตำแหน่ง และสามารถกำหนดได้มากกว่า 1 แท็กบนเว็บเพจ  แต่โดยทั่วไปแล้ว <nav> จะอยู่ในส่วนของ <header> เพื่อใช้เป็นลิงค์หลักของเว็บเพจ ดังตัวอย่างโค๊ต HTML ต่อไปนี้

จากข้างต้นหากเราไม่กำหนด CSS ลงค์ที่อยู่ในแท็ก <nav> จะเป็นลิสต์ธรรมดา ดูไม่สวยงาม ดังนั้นเราจึงต้องใช้ CSS ในการกำหนดตำแหน่งให้ลิสต์มาอยู่ในแนวนอน มีการกำหนดระยะห่างที่เหมาะสม มีการเลือกสีอักษร สีพื้น และเลือกว่าเวลาเมาส์ไปวางอยู่บนลิงค์จะเปลี่ยนเป็นสีอะไรด้วย

แท็ก <footer>

จุดประสงค์หลักของแท็ก <footer> คือ ใช้สำหรับแสดงข้อมูลที่ด้านล่างของ element เว็บเพจ ซึ่งใช้แสดงข้อมูลเพิ่มเติม ที่เกี่ยวข้องกับหน้าเว็บเพจนั้นๆ เช่น ข้อมูลเกี่ยวกับเว็บไซต์ ลิงค์ที่เกี่ยวข้องกับเว็บเพจปัจจุบัน ลิงค์สำหรับส่งอีเมล์ไปยังเว็บมาสเตอร์ ฯลฯ

นอกจากนั้นแล้ว <footer> ยังสามารถใส่ลงในแท็กอื่นๆ ได้ เช่น แท้ก <section> แท็ก <article> เป็นต้น เพื่อใช้ใส่ข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลใน element นั้นๆ เช่น หากเราใช้ <article> เป็นหัวข้อข่าว <footer> ที่กำหนดลงในข่าวนี้ ก็อาจเป็นลิงค์ไปยังเจ้าของข่าว แสดงวันที่ หรือข้อมูลอื่นๆ ที่เกี่ยวข้อง

จากตัวอย่างโค๊ต HTML ข้างต้น เราจะเห็นได้ว่า การกำหนด <footer> มีลักษณะเดียวกับ <header> คือสามารถกำหนดในส่วนของ <body>, <section> หรือ <article> ก็ได้ และที่สำคัญ เราควรตรวจสอบดูว่าก่อนและหลังการกำหนด <footer> ปรากฏสิ่งใดๆ บ้างบน Outline

ติดต่อเรา

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

Not readable? Change text. captcha txt
0

Start typing and press Enter to search