จัดหน้าเนื้อหา HTML ตอนที่ 1
ห่างหายจากการเขียนบล็อกไปยาวนานมาก (เกือบๆจะสองเดือนได้) อันเนื่องมาจากชีวิตที่ยุ่งๆวุ่นๆ และมีเรื่องให้ใช้หัวเยอะมากไปหน่อย จนไม่มีเวลามาเขียนบล็อกแห่งนี้เลย รวมทั้งหาเรื่องที่น่าสนใจมาเขียนลงบล็อกไม่ได้ด้วย (หรือผมหมดกิเลสไปเยอะก็ไม่ทราบเหมือนกัน)
เอาเถอะ วันนี้ผมจะเริ่มซีรี่ย์ของบทความบนบล็อก (ซึ่งได้ข่าวว่าซีรี่ย์เก่าที่เริ่มไว้ก็ยังไม่ได้ทำต่อ) ว่าด้วยการจัดหน้าและตกแต่งเนื้อหาบนหน้าเว็บด้วย HTML
หลายคนอาจจะคิดว่าการทำเรื่องพวกนี้อาจจะไม่จำเป็น เพราะปัจจุบันเราใช้ CMS สำเร็จรูป (เช่น WordPress) กันแทบทั้งนั้น การจัดหน้าและตกแต่งเนื้อหาก็ใช้ RTE ที่มากับ CMS เอา (หรืออย่าง Drupal ก็อาจจะใช้ markdown ได้) แล้วการจัดหน้าเองนั้นจำเป็นอย่างไร?
ผมคงตอบคำถามนี้ด้วยคำตอบสวยหรูที่อ้างอิงเหตุการณ์สมมติไม่ได้ ซึ่งผมจะตอบว่าเพราะ RTE มันจัดหน้าได้ไม่ได้ดั่งใจของผม ก็แค่นั้นแหละ (อ้อ แล้วผมยังใช้มันเวลาทำ static page เ้องด้วยนะ)
ก่อนจะเริ่มบทความชุดนี้ ผมขอบอกเอาไว้ก่อนว่าเนื้อหามันไม่ได้อ้างอิงจากตำรามหาเทพที่ไหนทั้งสิ้น ทั้งหมดผมถ่ายทอดมาจากที่ผมทำและเคยชิน ความเป็นระเบียบของโค๊ด ไม่มีบรรทัดฐานใดๆมากำหนด นอกจากผมบอกว่ามันเป็นระเบียบ โอเค? ถ้าทำใจยอมรับข้อนี้ได้ ก็เริ่มอ่านกันได้เลยครับ
แท็กที่ใช้บ่อย
ในการจัดหน้า เราจะต้องใช้แท็กต่างๆของ HTML เพื่อจะให้ได้เนื้อหาที่มีการจัดหน้าได้อย่างที่เราต้องการ และสามารถแก้ไขได้อย่างถูกต้องเมื่อพบว่ามันแสดงผลไม่ได้ดั่งใจ ซึ่งตัวผมใช้อยู่เพียงแค่ไม่กี่แท็กเท่านั้น ดังนี้ครับ
- <div> หลักๆคือใช้กำหนดเป็นพื้นที่ทั้งหมดของเนื้อหา และใช้ในการหุ้มออพเจ็กท์บางอย่างในเนื้อหาด้วย (เช่นภาพหรือวิดีโอ) และในบางกรณี ก็ใช้สำหรับการทำเนื้อหาที่มีหลายคอลัมน์ด้วย
- <p> แท็ก p นั้นหมายถึง paragraph หรือย่อหน้า ในแท็ก p นี้หลักๆผมจะใช้กำหนดความสูงของบรรทัดและระยะห่างระหว่างย่อหน้า
- <h1> – <h6> เป็นแท็กที่ใช้กำหนดหัวเรื่อง (เช่นตรง “แท็กที่ใช้บ่อย” ซึ่งผมกำหนดเป็น h2 เอาไว้) ซึ่งโดยปกติมันจะเรียงขนาดจากใหญ่สุด (h1) ไปหาเล็กสุด (h6) ซึ่งนั่นหมายถึงระดับความสำคัญของหัวเรื่องจากมากไปน้อยนั่นเอง
- <hr>?มีไว้เพื่อขีดเส้นคั่นหน้า (บางคนก็เอาไว้แยกระหว่างเนื้อหาและแหล่งอ้างอิง)
- <b> หรือ <strong> เป็นแท็กที่ใช้ทำให้ตัวหนังสือแสดงผลเป็นตัวหนา จะถามว่า p และ strong นั้นต่างกันอย่างไร คือ strong นั้นจะใช้เน้นเข้มในกรณีที่ต้องการสื่อความหมายที่สำคัญกว่าปกติทั่วไป ส่วน b นั้นใช้ในกรณีตกแต่งเสียมากกว่า แต่เอาเข้าจริงใช้อันไหนมันก็เหมือนๆกันแหละครับ
- <i> หรือ <em> เป็นแท็กที่ใช้ทำให้ตัวหนังสือแสดงผลเป็นตัวเอียง ควารมต่างของมันเหมือนกับ b และ strong นั่นแหละ
- <u> เป็นแท็กสำหรับขีดเส้นใต้ให้ข้อความ
- <span> ใช้หุ้มข้อความในส่วนที่เราจะทำอะไรพิเศษให้มัน เช่นไฮไลต์ เปลี่ยนสีตัวอักษร ลงเงา บลาๆๆ
- <blockquote>?ใช้ในการอ้างอิงคำพูด (สมัยก่อนผมใช้ div เอาดิบๆเลย ฮา)
แท็กที่กล่าวมานี้คือแท็กที่ใช้บ่อยๆครับ ซึ่งในนี้จะมีแท็ก div, p, และ span ที่มักจะใช้ร่วมกับ CSS ในการแต่งหน้าทาปากให้มันด้วย (เช่นที่บอกไว้คือกำหนดระยะห่างย่อหน้า ความสูงบรรทัด ไฮไลต์ ลงเงา และอื่นๆ)
อันที่จริงยังมีแท็กอื่นๆที่ใช้ในการตกแต่งและจัดหน้าข้อความอีก และบางทีก็ออกจะซ้ำๆกับข้างบนนั่น เช่น <cite> ที่ออกมาเป็นตัวเอียง หรือ <ins> ที่ออกมาเป็นขีดเส้นใต้ (ซึ่งมันใช้ร่วมกับ <del> เพื่อขีดฆ่า แล้วใช้ <ins> เน้นคำที่แก้ลงไปแทน) หรือ <abbr> ที่ใช้กำหนดคำเต็มของตัวย่อ (ซึ่งจะคล้ายกับ <acronym> ที่ใช้กำหนดคำเต็มเช่นกัน แต่กรณี acronym จะใช้กำหนดให้คำที่ออกเสียงได้ เช่น ASAP หรือ NATO ในขณะที่ abbr จะใช้กับตัวย่อที่ไม่มีการออกเสียง เช่น BKK) หรืออย่างเช่น <sub> และ <sup> ที่ใชำเขียนตัวห้อย (เช่นเลขฐาน) หรือตัวยก (เช่นเลขชี้กำลัง)
โครงสร้างเนื้อหา
ในการจัดหน้าเนื้อหาบนหน้าเว็บ โครงสร้างของโค๊ดถือว่าเป็นส่วนที่มีความสำคัญมากส่วนหนึ่งครับ ประโยชน์ของมันมีหลายอย่างเลย เช่นการอำนวยความสะดวกให้กับบรรดาโปรแกรมจำพวก screen reader ทั้งหลาย ที่จะอ่านแต่ละส่วนได้ถูกต้องมากขึ้น หรือระบบ Search Engine ที่จะเข้าใจส่วนต่างๆของหน้าเว็บเราได้ง่ายขึ้น หรือแม้กระทั้งคนอื่นๆที่ทำเว็บกับเรา จะได้อ่านโค๊ดและตามแก้ไขแต่ละส่วนได้ง่ายขึ้นนั่นเอง
สำหรับโครงสร้างเนื้อหาที่ผมมองว่ามันเป็นระัเบียบ จะเป็นประมาณนี้ครับ
<div> <h1>Content title</h1> <p> ... </p> <p> ... </p> <hr /> <h1>Content title 2</h1> <p> ... </p> <p> ... </p> </div>
จากตัวอย่าง ผมได้กำหนดให้ div เป็นพื้นที่ของเนื้อหาทั้งหมด กำหนดให้ h1 เป็นหัวข้อเนื้อหา กำหนดให้ p เป็นเนื้อหาแต่ละย่อหน้า และให้ hr เป็นตัวเส้นขีดแยกเนื้อหาสองส่วนออกจากกัน
ซึ่งโค๊ดตัวอย่างด้านบน เมื่อนำเนื้อหามาใส่แล้ว จะออกมาเป็นอย่างตัวอย่างนี้ครับ example01.html
การเลือกใช้แท็ก
อีกเรื่องที่ค่อนข้างสำคัญ (ในสายตาของผม) คือการเลือกใช้แท็กให้เหมาะสมกับเนื้อหาจุดนั้นๆ
ในสายตาปกติของเรา อาจจะแยกความต่างของข้อความที่ครอบด้วย <strong> กับการครอบด้วย <span> ที่ใช้ CSS ทำตัวหนาไม่ออก แต่ว่าโปรแกรมจำพวก Screen Reader (ซึ่งเป็นโปรแกรมที่ผู้พิการทางสายตาใช้อ่านเว็บ) และบรรดา Search Engine ทั้งหลาย จะสัมผัสได้ในความต่างครับ
อันที่จริงในบางกรณี เรื่องพวกนี้คงไม่สำคัญ (เช่นการทำเว็บส่งครู) แต่ถ้าในกรณีที่ทำเว็บจริง และผู้ทำคำนึงถึงเรื่อง Web Accesibilities ค่อนข้างมาก ก็แนะนำให้ใช้แท็กที่ถูกต้องกับส่วนนั้นๆของเนื้อหานะครับ (เดี๋ยวเรื่องนี้ผมจะเขียนเป็นลิสต์ให้ยาวๆเป็นภาคผนวกของซีรี่ย์นี้ ว่าแท็กอะไรเหมาะกับอะไรมั่ง)
ส่งท้ายตอนแรก
ในตอนแรกผมคงขอจบเนื้อหาเอาไว้ที่เท่านี้ก่อนนะครับ คิดว่าคงพอรู้และเริ่มเตรียมตัวถูกว่าในการจัดหน้าเนื้อหานั้นมันใช้อะไรเป็นพื้นฐานบ้าง ซึ่งดูๆไปมันก็เป้นการทบทวนเบสิคการเขียน HTML นั่นแหละ
ในตอนต่อไป ผมจะเขียนเกี่ยวกับการจัดการเนื้อหาต่างๆด้วยแท็กอื่นๆเพิ่มเติม และการตกแต่งเนื้อหาต่างๆด้วย CSS นะครับ (แต่ถ้าเรื่องการจัดการมันยาว ผมอาจจะตัดเรื่องการตกแต่งไปตอนที่สามนะครับ)
อย่าลืมติดตามกันนะครับ สวัสดีครับ
ปล.บทความนี้เขียนเรื่อยๆ ไม่มีจำนวนตอนที่ชัดเจนครับ
