เริ่มต้นกับ css

หลายคนยังสับสนในเรื่องของ css กับ html พอสมควร ดังที่ผมได้พูดคุยแลกเปลี่ยนกันทาง Windows Live Messenger [MSN] ซึ่งทำให้ผมต้องปรับโครงสร้างเว็บใหม่ เพื่อ ทำความเข้าใจกับ CSS ให้มากยิ่งขึ้นครับ และสำหรับผู้เริ่มต้นเลย ไม่รู้จะเอายังไง ก็เชิญแวะมาเลียบๆ เคียงๆ กันทางนี้ก่อนนะครับ

ก่อนอื่นมาแยกกันก่อนว่า แม้เราจะบอกว่า เขียนเว็บ ออกแบบเว็บด้วย css อย่างไรก็ตาม แต่แท้จริงแล้ว หาใช่ css อย่างเดียวไม่ เพราะ css เป็นเพียงแค่ตัวสร้างสีสัน ความสวยงาม จัดการเลย์เอ้าท์ ซึ่งเราต้องเขียนควบคู่ไปกับ [x]html

[X]HTML เป็นส่วนสำคัญของการวางโครงสร้างของข้อมูล ส่วน CSS นั้น เป็นส่วนของการจัดการรูปแบบของโครงสร้างของข้อมูลหรือเรียกง่ายๆ ว่า เป็นส่วนของการออกแบบเลย์เอ้าท์หน้าเว็บนั่นเอง

อย่างไรคือการวางโครงสร้างข้อมูล อย่างไรคือการจัดวางโครงสร้างข้อมูล

การวางโครงสร้างข้อมูลด้วย HTML แต่เดิมทีนั้น อาจจะ เช่น <font></font> หรือ <h1></h1> หรือแม้กระทั้ง table เองก็ตาม

การจัดการรูปแบบของข้อมูลของ html ก็เช่น

<table width=”500” height=”500” bgcolor=”black”></table>

1. <table></table> คือ การวางโครงสร้างของข้อมูล
2. width=500 height=500 bgcolor=black คือการจัดการรูปแบบของโครงสร้างของข้อมูล

ในที่นี้คือให้ตารางนี้มีความกว้าง 500 พิเซล สูง 500 พิกเซล พื้นหลังสีดำ

ด้วยลักษณะของการเขียน โค้ดแบบ html ฝังติดไปในบรรทัดเดียวกัน ทำให้เวลาที่เราจะกลับมาเรียกแก้ไข มันยากต่อการค้นหา และแก้ไขในอนาคต ส่วนนี้เองที่ CSS มีบทบาทเข้ามาเกี่ยวข้อง ซึ่งเรียกว่า การนำข้อมูลมาจัดระเบียบ จัดวางให้เข้าที่เข้าทางในรูปแบบเฉพาะตัวนั่นเอง

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

ข้อดีสำคัญของ CSS

1. ไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะโค้ดน้อยกว่า
2. มีความยืดหยุ่นสูงในการปรับแต่งแก้ไขในอนาคต
3. สามารถควบคุมเว็บหลายๆ หน้าได้ด้วย style sheet เพียงแค่ ไฟล์เดียว
4. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
5. ง่ายในการเรียกดู Source
6. ใช้ดีกับระบบเสิร์ชเอ็นจิน ซึ่ง ระบบเสิร์สเอ็นจิ้นต่างๆ
7. อื่นๆ

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