ถ้าเราต้องการจะแก้ Web เก่า ๆ ให้ปรับเปลี่ยนหน้าตาได้ง่าย ๆ ควรจะทำอย่างไรก่อน ?

ถ้าย้อนอดีตกลับไปสักยี่สิบปี (โห นานมาก) ในขณะที่เรากำลังเริ่มใช้ WWW กันใหม่ ๆ สิ่งที่บนเวปมีก็คือ กองไฟล์รูป กับ HTML เท่านั้น แต่พอเวลาผ่าน อะไรมันก็เพิ่มเข้ามา ไฟล์วิดีโอเอย ไฟล์เสียงเอย สคริปท์เอย โน่นนั่นนี่เต็มไปหมด แต่แกนกลางของ WWW ก็ยังคงเป็น HTML

หลาย ๆ คนที่เคยทำเว็บไซต์ในช่วงนั้นคงจะจำได้ว่า เวลาทำเว็บจะต้องทำหัวเว็บใหม่ ทำพื้นหลังใหม่ ทำโน่นนั่นนี่ใหม่ ทุกครั้งที่ทำหน้าเว็บขึ้นมาใหม่หนึ่งหน้า เป็นที่น่ารำคาญเล็กน้อย ในตอนนั้นก็มีตัวช่วยเข้ามาอย่างการใช้ frame (ที่ปัจจุบันไม่แนะนำให้ทำกันแล้ว) หรือการใช้ Template ซึ่งก็ผูกกับ Editor ที่เราใช้

พัฒนาการหลังจากนั้นก็คือการแยกเอา Attribute ที่เกี่ยวข้องกับรูปแบบการแสดงผลของ HTML มารวมกันเป็นภาษาใหม่ เรียกว่า Cascading Style Sheet (CSS) ทำให้ส่วนที่อยู่ใน HTML นั้นมีเพียงแต่เนื้อหาเท่านั้น

หลาย ๆ คนในอดีตคงไม่คิดถึงว่า ในอนาคต เราจะมีจอภาพ 4K ขนาด 80″ หรือ จอภาพ 1080p ขนาด 4.6″ เราทำเวปเพื่อหน้าจอขนาดใกล้เคียงกัน ความละเอียดใกล้เคียงกัน ก็คือตามขนาดของหน้าจอคอมพิวเตอร์นั่นเอง (ถึงแม้ว่ามาตรฐานตอนนั้น (15″) กับตอนนี้ (23″) จะต่างกันมากก็ตาม แต่ก็คงเทียบกับ 80″ บนจอทีวีไม่ได้หรอกครับ) การใช้ CSS นั้นดูจะเป็นภาระมากกว่าประโยชน์ เราก็เลยใช้ HTML ในการสร้างโค๊ดสำหรับการแสดงผล

ผมว่าหลายคนคงนึกไม่ออกว่า การใช้ HTML แทน CSS ในการแสดงผลนั้นเป็นยังไง คืออย่างนี้ครับ ผมว่าหลาย ๆ คนคงเคยทำเวปที่มีส่วนหัว (header) ส่วนเนื้อหา (content) และส่วนท้าย (footer) แยกจากกันโดยใช้ Table ใช่ไหมครับ ?

<!doctype html>
<html>
    <table>
        <tr>
            <td>...Header....</td>
        </tr>
        <tr>
            <td>Content Content Content Content Content Content Content </td>
        </tr>
        <tr>
            <td>...Footer....</td>
        </tr>
   <table>
</html>

ถามว่าแสดงผลถูกใหม ? ผมว่าไม่มีปัญหา ทีนี้ถ้าเราต้องการจะแก้ไขให้มันแสดงผลเป็นอีกแบบนึงล่ะ สมมติว่า เฮ้ย ผมอยากทำให้มันแสดงผลในแนวนอนล่ะ ? ทำไงดี ? ถ้าเราใช้วิธีเดียวกันผมก็ต้องแก้ HTML ครับ ก็จะกลายเป็นแบบนี้

<!doctype html>
<html>
    <table>
        <tr>
           <td>...Header....</td>
           <td>Content Content Content Content Content Content Content</td>
           <td>...Footer....</td>
        </tr>
    </table>
</html>

มันก็จะแสดงผลเป็นสามคอลัมภ์ตามแนวนอนอย่างที่เราต้องการเช่นกัน …

ปัญหาจะมาอีตอนที่บอกว่า ผมมีหน้าที่ต้องเปลี่ยน Layout อยู่ 100 หน้า การใช้ HTML ในการกำหนด Layout เป็นการล็อกตายตำแหน่งเนื้อหาไปแล้วเรียบร้อย ดังนั้นผมต้องแก้ไขหมด 100 ไฟล์ ผมคงตายครับแบบนี้ 555 เหนื่อยแย่

ถ้าใช้ HTML + CSS ผมก็จะเปลี่ยนโค๊ดข้างบนเป็น…แบบนี้ ..

<!doctype html>
<div id="header">....Header....</div>
<div id="content">Content Content Content Content Content Content Content</div>
<div id="footer">...Footer....</div>

ร่วมกับ CSS เพื่อจัดให้มันเป็นเนื้อหา 1 คอลัมพ์ 3 แถว หรือ จัดให้เป็น 3 คอลัมภ์ 1 แถว ก็ได้ (หรือจัดให้พิศดารกว่านั้นก็ได้ (ทั้งนี้ถ้าเราไม่ใช้ CSS เลย ตัว Browser จะแสดงออกมาเป็น 1 คอลัมภ์ 3 แถวครับ)

ดังนั้น ถ้าเรามี Web ที่เขียนมาตั้งแต่สมัย HTML4 นู่น ผมว่า ถ้าเราต้องการจะทำให้หน้าตามันดูดีในปัจจุบัน (ไม่นับเรื่องโครงสร้างโปรแกรมข้างหลังนะ) สิ่งแรกที่ควรทำคือ แยกเอา layout ออกมาจาก HTML ไปใส่ใน CSS ให้หมด ส่วน HTML นั้นให้ทำแค่แยกเนื้อหาเป็นชิ้น ๆ รวมกันภายใน div เมื่อทำได้ดังนี้แล้วการจะวาง layout ให้สวยก็ไม่ใช่เรื่องยาก

(ก็ไม่ง่ายหรอก ผมว่าแก้ CSS มันยากกว่าแก้ HTML แต่มันได้ประโยชน์ในระยะยาวนะ)

ในกรณีของ Web Application นั้น ถ้าเกิดว่าเรามีลูกค้าหลายเจ้าที่ต้องการให้แสดงผลไม่เหมือนกันเลย เราสามารถใช้ CSS ในการช่วยให้ลูกค้าแต่ละเจ้าเห็นหน้าตาเว็บไม่เหมือนกันได้ครับ ก็คือให้แต่ละเจ้ามี CSS เป็นของตัวเองไปเลยนั่นเอง (ถ้าเป็นกรณี HTML นั้นตายครับ ต้องมีโค๊ดแยกกันระหว่างลูกค้าแต่ละเจ้า แก้บั๊กกันทีตาเหลือก)

อ้อสำหรับ HTML5 นั้นมีการเพิ่ม Tag เข้ามาในส่วนของ HTML Semantic (ซึ่งช่วยในการแยกแยะประเภทของ Content แต่ละส่วนในหน้า HTML นั้น ๆ ว่าเป็นประเภทใด) ดังนั้นแทนที่เราจะใช้ div อย่างเดียว เราก็สามารถใช้ Semantic Tag ช่วย ทำให้อ่านโค๊ดได้ง่ายขึ้นอีกมากทีเดียว) ซึ่งจากโค๊ด HTML ข้างบนก็สามารถเขียนอยู่ในรูปแบบนี้ได้ครับ

<!doctype html>
<header>....Header....</header>
<article>Content Content Content Content Content Content Content</article>
<footer>...Footer....</footer>

อ่านง่ายกว่าข้างบนไหม บางคนก็คงแย้งว่าไม่ … อืม สมมติว่าส่วน content ผมมีสัก 50 บรรทัดล่ะครับ 🙂 ลองคิดดูนะว่าเราเคยทรมาณกับการนั่งหาว่า ไอ้ </div> เนี่ยมันไปคู่กับ <div> อันไหนกันแน่

ก็ลองดูกันละกันนะครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.