การปรับแต่งเอกสาร HTML

Written on February 15, 2010 – 8:42 pm | by ikapeng |

การปรับแต่งเอกสาร HTML คือ การใส่สีสันให้กับเอกสาร HTML ในส่วนของการใส่พื้นหลัง (Background) ให้โฮมเพจของเรามีสีสันเพิ่มขึ้น ซึ่งการใส่พื้นหลังให้โฮมเพจสามารถใส่ได้ 2 แบบ คือ การใส่สีให้พื้นหลัง และการใส่ภาพให้พื้นหลัง
ในการใส่รูปแบบนั้นจะใส่ในส่วนของแท็กเปิด ของแท็ก เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก นั้นเอง โดยจะมีรูปแบบดังนี้

1. แบบใส่สีให้พื้นหลัง bgcolor = “ชื่อสี” หรือ bgcolor = “#รหัสสี”
2. แบบใส่ภาพให้พื้นหลัง background = “ชื่อภาพ”

รูปแบบการใส่สีพื้นหลัง


<html>
<head><title> ....การใส่สีให้พื้นหลังเป็นสีน้ำเงิน....</title></head>
<body bgcolor = "blue">
</body>
</html>

รูปแบบการใส่ภาพพื้นหลัง


<html>
<head><title> ....การใส่ภาพให้พื้นหลัง....</title></head>
<body background = "lilies.jpg">
</body>
</html>

Tips

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

ในรหัสสี 6 หลักนี้ มีความหมายเกี่ยวการผสมสีอยู่ โดยแบ่งเป็น 3 สีหลัก หรือจะเรียกว่าแม่สีก็ได้คือ สองหลักแรก คือสีแดง และ 2 หลักกลางคือสีเขียว และ 2 หลักสุดท้ายคือสีน้ำเงิน ซึ่งเราจะเรียกว่า RGB  (Red Green Blue) โดยแม่สีสามตัวหลักนี้ เขียนอยู่ในรูปแบบรหัสสีสำหรับใช้กับภาษา HTML ได้ดังนี้

- รหัสสีแดง      #FF0000
– รหัสสีเขียว     #00FF00
- รหัสสีน้ำเงิน   #0000FF

นอกจากนี้ก็มีสีหลักอีก 2 สี ซึ่งก็คือ
- รหัสสีดำ        #000000
- รหัสสีขาว      #FFFFFF

หลักการของสีทางคอมพิวเตอร์เราจะเรียกว่าสีทางแสง ซึ่งจะมีความแตกต่างจากสีทางวัตถุอยู่บ้าง นั้นก็คือ หากเป็นสีในทางวัตถุเมื่อเราผสมสี แดง เขียว น้ำเงิน เข้าด้วยกันจะได้ผลลัพธ์เป็นสีดำ แต่สำหรับสีทางแสง เมื่อผสมสีีทั้ง 3 นี้เข้าด้วยกันจะได้เป็นสีขาว ดังเช่นเมื่อเรา เราเอารหัสสี แดง เขียว น้ำเงิน ซึ่งก็คือ #FF0000 #00FF00 และ #0000FF รวมกันจะได้รหัสสีของสีขาว #FFFFFF

การใส่ภาพในเอกสาร HTML
ในบทความตอนนี้มีส่วนที่เกี่ยวข้องกับการใช้ภาพ ดังนี้จึงขอให้ความรู้เกี่ยวกับเรื่องของภาพที่จะนำมาใช้ทำเว็บกันซะเลย ซึ่งไฟล์ภาพที่เป็นมาตรฐานที่สามารถนำำมาใส่ในเว็บมีอยู่ด้วยกัน 3 ชนิด โดยแต่ละภาพก็มีลักษณะการนำมาใช้ที่แตกต่างกัน ดังนี้

1. GIF (Graphic Intechange Format)
ไฟล์ภาพชนิดนี้ นิยมใช้สำหรับภาพกราฟิคที่เป็นลักษณะลายเส้น ข้อความตัวอักษร หรือภาพการ์ตูนต่าง ๆ ซึ่งมีสีไม่มากนัก เพราะไฟล์ GIF มีค่าสีสูงสุด 256 สี จึงทำให้ภาพกราฟิคที่เป็นไฟล์ประเภท GIF เป็นภาพที่มีลักษณะทึบ และไม่สามารถไล่เฉดสีได้มากนัก แต่มีข้อดีคือ สามารถสร้างและเซฟภาพประเภทนี้ให้มีลักษณะพื้นหลังโปร่งใส (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

Tags: , , , , ,

Post a Comment

Spam protection by WP Captcha-Free

Find entries :

About Me

สวัสดีครับ ยินดีต้อนรับทุกท่านที่แวะผ่านเข้ามาเยี่ยมชม บล็อก...เว็บ...หรือว่าเว็บบล็อกมั้ง ที่ที่นี้ทำไว้ทำไมก็ไม่รู้นะ แต่ที่แน่ๆก็น่าจะทำไว้เฉยๆ อ่าาา เอาเป็นว่าเว็บบล็อกนี้ทำไว้เก็บข้อมูลที่น่าสนใจ น่าอ่านทั้งที่เป็นประโยชน์ หรือไร้สาระบ้างผมก็จะเอามาโพสต์เก็บไว้อ่านเองบ้าง หรือใครจะมาอ่านด้วยก็ตามสบายเลยนะครับ เผื่อว่ามันจะมีประโยชน์บ้าง เชิญอ่านให้สนุกเลยละกันครับ..:). More

Want to subscribe?

 Subscribe in a reader Or, subscribe via email:

Enter your email address:
Delivered by FeedBurner