สำหรับมือใหม่ อิเฎลต้องขออนุญาตแนะนำว่า CSS คืออะไร และ HTML คืออะไร **ไม่อนุญาตให้นำบทความ Tutorial นี้ไปใช้ในเว็บไซต์อื่น หรือเพื่อการค้าใด ๆ HTML เป็นภาษาพื้นฐานสำหรับการทำเว็บไซต์อย่างง่าย สังเกตุได้โดยเราจะเห็น <….> หรือ </….> ทั่ว ๆ ไปหลาย ๆ ที่ เช่น จะเห็นได้ว่า ทุกครั้งที่มีการกำหนดค่า สี และ ขนาด หรือขึ้นย่อหน้าใหม่ ภาษา HTML จะเริ่มด้วยคำสั่งในวงเล็บ <….> และเมื่อสิ้นสุดคำสั่งนั้น ต้องใส่ </….> เพราะถ้าไม่ใส่ สิ่งที่เกิดขึ้นก็มีเช่น เราอยากให้ตัวอักษรหนาแค่หัวข้อ แต่พอไม่ได้ใส่ </b> มันก็จะกลายเป็นตัวหนาทั้งหน้ากระดาษ CSS คือภาษาที่ใช้ตกแต่งตัวอักษร ข้อความ จนกระทั่งขนาดของรูปภาพ ที่สวอิเฎลชอบคือมันสามารถทำให้รูปหรือข้อความใหญ่ขึ้นได้เมื่อเอา mouse ลากผ่าน (Roll Over) ข้อสังเกตุของการเขียนภาษานี้คือ จะมี Class หรือ ID อยู่ข้องหน้าวงเล็บ {….} เช่น Class จะมีลักษณะ .classname {….} และ ID จะมีลักษณะ #IDname {….} แต่ถ้าเป็นคำสั่งของภาษา HTML อยู่แล้ว จะไม่มีเครื่องหมาย . หรือ # อยู่ข้างหน้า เช่น body {….} ใช้สื่อสารกับ <body> ในหน้า HTML เป็นต้น ใน code ของหน้า HTML ซึ่งมีภาษา CSS ไว้ตกแต่ง อิเฎลสามารถทำให้ CSS เป็นส่วนหนึ่งของภาษา HTML ได้โดยใส่ภาษา CSS ไว้ระหว่าง <style> และ </style> เช่น กล่าวคือคำว่า <style> และ </style> เป็นภาษา HTML และสิ่งที่อยู่ระหว่าง <style> และ </style> คือภาษา CSS เมื่อรู้ว่าการใช้ CSS นั้นง่ายนิดเดียว สวอิเฎลจึงชวนให้ดูการแยก file นามสกุล CSS ออกจาก HTML แต่ยังคงมีการเชื่อมกันอยู่ พูดอีกอย่างหนึ่งคือ อิเฎลมี CSS อยู่ไฟล์หนึ่ง และ HTML อีกหลาย ๆ ไฟล์ แต่ หน้าตาเว็บเพจ HTML มีสี, ลักษณะตัวอักษร, ลักษณะตาราง เป็นไปตามการกำหนดค่าจาก CSS ไฟล์เดียว ประโยชน์ของมันคือ เราสามารถควบคุมลักษณะของหน้าเว็บ HTML เป็นร้อย เป็นพันหน้า ด้วย CSS เพียง file เดียว เช่น ถ้าจะเปลี่ยนสีพื้นหนัง หรือขนาดตัวหนังสือ เราก็สามารถเปลี่ยนที่ CSS โดยไม่จะเป็นต้องไปตามแก้ไขใน HTML ทุก ๆ ไฟล์ สมมุติว่าตอนนี้เรามีหน้าเว็บ HTML ที่มีภาษา CSS ปนอยู่ เมื่อเปิดดู code ใน Notepad หรือ Dreamweaver จะเห็นเป็น หมายเหตุ: เวลาแก้ไข HTML กับ CSS สามารถใช้ Dreamweaver หรือ Notepad ก็ได้ คือคลิกขวาที่ไฟล์ แล้ว Open With > Notepad ขั้นตอนที่ 1 อิเฎลจะแยกภาษา CSS ออกจากหน้า HTML ขั้นตอนที่ 2
ตั้งไฟล์ CSS ใหม่ ขั้นตอนที่
3 เชื่อมไฟล์ CSS เข้าสู่ HTML ตัวเดิม จะเห็นเป็น เสร็จละ |
การเซฟไฟล์ HTML ต้องใส่จุดนามสกุลว่าอะไร
กระทู้ที่เกี่ยวข้อง
ลิขสิทธิ์ © 2024 berikutyang Inc.
