วันเสาร์ที่ 4 สิงหาคม พ.ศ. 2555

HTML - ใส่สี และภาพให้พื้นหลังของเว็บเพจ

การใส่พื้นหลังนั้นจะใส่ในส่วนของแท็ก <body> โดยใช้ส่วนขยายที่เรียกว่า Attribute ของแท็ก <body> โดยจะมีรูปแบบดังนี้

ใส่สีให้พื้นหลัง


         มีรูปแบบคือ <body bgcolor = "ชื่อสี" หรือ "#รหัสสี"> ... </body>


ใส่ภาพให้พื้นหลัง


         มีรูปแบบคือ <body background = "ชื่อภาพ.นามสกุลภาพ" bgproperties="fixed"> ... </body>

bgproperties="fixed" ถ้าใส่ค่านี้ จะเป็นการกำหนดให้รูปภาพคงที่ จะไม่มีการเคลื่อนที่เมื่อเลื่อนสกรอบาร์ เมื่อข้อมูลมีความยาวมากกว่า 1 หน้าจอ

การใส่ค่าสี


         การใส่ค่าสี สามารถใส่ค่าได้ 2 แบบ คือ แบบใช้ชื่อสีเป็นภาษาอังกฤษ เช่น red green blue และอีกรูปแบบหนึ่ง คือการใส่ค่าสีเป็นรหัสสี ซึ่งอยู่ในรูปแบบของเลขฐาน 16 ได้แก่ 1-9 และ E-F โดยใส่เป็นรหัสสี 6 หลัก ซึ่งมีตั้งแต่รหัส 000000 - FFFFFF จะได้สีทั้งหมดประมาณ 16.7 ล้านสี

         รหัสสี 6 หลักนี้ จะมีความหมายแบ่งเป็น 3 สีหลัก เป็นแม่สี สองหลักแรก คือสีแดง และ 2 หลักกลางคือสีเขียว และ 2 หลักสุดท้ายคือสีน้ำเงิน เรียกว่า RGB  (Red Green Blue) โดยแม่สีสามตัวหลักนี้ เขียนอยู่ในรูปแบบรหัสสีได้ดังนี้
               - สีแดง      #FF0000
               - สีเขียว     #00FF00
               - สีน้ำเงิน   #0000FF

และมีสีหลักอีก 2 สี คือ
               - สีดำ        #000000
               - สีขาว      #FFFFFF

ชนิดของไฟล์ภาพที่สามารถนำมาใส่ในเว็บ


1. GIF (Graphic Intechange Format)

         ไฟล์ภาพชนิดนี้ มีค่าสีสูงสุดเพียง 256 สี ใช้สำหรับภาพที่เป็นลักษณะลายเล้น ข้อความตัวอักษร หรือภาพการ์ตูนต่าง ๆ ซึ่งมีสีไม่มากนัก ทำให้ภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก ข้อดีของไฟล์ประเภทนี้คือ สามารถสร้างและเซฟภาพประเภทนี้ให้มีลักษณะพื้นหลังโปร่งใส (Transparent) ซึ่งสามารถนำภาพเหล่านี้ไปใช้กับพื้นหลังสีอะไรก็ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .gif

2. JPG (Joint Photographic Expert Group)

         ไฟล์ภาพชนิดนี้สามารถแสดงผลของสีได้สูงสุดถึง 16.7 ล้านสี จึงเหมาะสำหรับภาพที่มีเฉดสีเยอะ เช่น ภาพถ่ายต่าง ๆ นอกจากนี้ยังสามารถเลือกที่จะบีบอัดไฟล์ภาพให้มีขนาดเล็กลงได้ แต่คุณภาพจะลดลง และไฟล์ประเภทนี้ไม่สามารถทำเป็นแบบพื้นหลังโปร่งใส่ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .jpg และ .jpeg

3. PNG (Portable Network Graphic)

         ไฟล์ประเภทนี้จะมี 2 แบบคือ แบบ PNG-8 ซึ่งสามารถแสดงผลสีได้สูงสุด 256 สี และยังสามารถเซฟเป็นแบบ PNG-24 ซึ่งสามารถแสดงผลสีได้สูงสุดถึง 16.7 ล้านสีเหมือนไฟล์ JPG นอกจากนี้ยังสามารถทำเป็นภาพพื้นหลังโปร่งใส เหมือนกับ GIF ได้ด้วย ไฟล์ภาพประเภทนี้จะมีขนาดไฟล์ใหญ่กว่าภาพ JPG มาก ดังนั้นจึงมักใช้เซฟภาพซึ่งมีขนาดเล็ก ๆ แต่มีการใช้สีมาก เช่น ภาพไอคอน ต่าง ๆ ไฟล์ประเภทนี้มีนามสกุล .png

หมายเหตุ การใส่ภาพให้พื้นหลัง ในการกำหนดชื่อรูปจะต้องมีรูปภาพเตรียมไว้ด้วย และจะต้องระบุเส้นทางการเข้าถึงไฟล์ภาพนั้น ๆ ให้ถูกต้อง ในกรณีที่เซฟรูปภาพอยู่ที่เดียวกันกับไฟล์ HTML ให้ใส่ชื่อรูปภาพไปได้เลย แต่หากเซฟภาพไว้คนล่ะที่ก็ต้องระบุเส้นทางการเข้าถึงไฟล์ภาพ เช่น สร้างโฟลเดอร์ชื่อ images ไว้เก็บรูป โค้ดก็จะต้องระบุดังนี้ <body background = " images/simple.jpg">


ตอนต่อไป -> การจัดการตัวอักษร



ไม่มีความคิดเห็น: