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

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

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

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

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

  <html>
  <head><title> ....การใส่สีให้พื้นหลังเป็นสีแดง....</title></head>
       <body bgcolor = "red">       </body>
  </html>
 รูปแบบการใส่ภาพให้ื้พื้นหลัง

  <html>
  <head><title> ....การใส่ภาพให้พื้นหลัง....</title></head>
       <body background = "lilies.jpg">       </body>
  </html>
 Tip HTML
การระบุค่าสีสำำหรับภาษา 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) ซึ่งสามารถนำภาพเหล่านี้ไปใช้กับพื้นหลังสีอะไรก็ได้ ไฟล์ภาพประเภทนี้มีไฟล์นามสกุลเป็น .gif2. 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
** หมายเหตุ จากโค้ด รูปแบบการใส่ภาพให้ื้พื้นหลัง ในการกำหนดชื่อรูปจะต้องมีรูปภาพเตรียมไว้ด้วย และจะต้องระบุเส้นทางการเข้าถึงไฟล์ภาพนั้น ๆ ให้ถูกต้อง ในที่นี้ Webmaster เซฟรูปภาพอยู่ที่เดียวกันกับไฟล์ HTML หากคุณเซฟภาพไว้คนล่ะที่ก็ต้องระบุเส้นทางการเข้าถึงไฟล์ภาพ เช่น หากคุณสร้างโฟลเดอร์ชื่อ images ไว้เก็บรูปโดยเฉพาะอีกที โค้ดก็จะต้องระบุดังนี้   <body background = " images/lilies.jpg">

0 ความคิดเห็น:

แสดงความคิดเห็น

Popular Posts

  • รวมโค้ดสี
  • เริ่มต้น SEO ด้วยการใส่ Meta Tag
    เริ่มต้น SEO ด้วยการใส่ Meta Tag การใส่แท็ก Meta วิธีเริ่มต้นสำหรับการทำ SEO ให้กับเว็บไซต์ ทำได้ง่าย ๆ แค่ใส่แท็ก Meta ให้เว็บไซต์ เว็บไซต์...
  • ทำความรู้จัก Search Engine
    ทำความรู้จัก Search Engine บทที่แล้วได้เกริ่นไปกี่ยวกับ SEO และเมื่อพูดถึง SEO หากจะไม่พูดถึงเรื่องของ Search Engine ก็คงกะไรอยู่ เพราะว่ามี...
  • การใส่สี Background
    การใส่สี Background ให้กับเว็บเพจ บทความนี้เป็นบทความ Basic ของการใช้โปรแกรม Dreamweaver เกี่ยวกับการใส่สีสันให้กับหน้าเว็บเพจ โดยการกำหนดสี...
  • การกำหนดลักษณะีข้อความในเอกสาร HTML
    ::  การกำหนดลักษณะีข้อความในเอกสาร HTML จากในบทที่ 2 เรื่องโครงสร้างภาษา HTML เราได้ทำการใส่ข้อความลงในโฮมเพจแล้ว ในส่วนระหว่างแท็ก <b...
  • Social Bookmark คืออะไร
    Social Bookmark คืออะไร การทำ SEO นั้น เราจะต้องทำทั้งแบบ On Page และ Off Page สำหรับบทความนี้ Webmaster ก็ขอแนะนำช่องทางหนึ่งในการทำ SEO แบ...
  • การใส่ Head และ Bold Text
    การใส่ Head และ Bold Text การปรับแต่งเอกสาร โดยการกำหนด Head และ Bold Text ให้กับ Content เพื่อเพิ่มความสำคัญให้กับส่วนสำคัญของ Content หรื...
  • การตรวจเช็คค่า Google Pagerank (PR)
    การตรวจเช็คค่า Google Pagerank (PR) บทความนี้เราจะมาดูวิธีการเช็คค่า Google Pagerank (PR) ของเว็บไซต์แต่ล่ะเว็บ โดยวิธีการเช็คก็ง่ายแสนง่าย ...
  • การปรับแต่งเอกสาร HTML
    ::  การปรับแต่งเอกสาร HTML การปรับแต่งเอกสารในที่นี้ จะหมายถึงการใส่สีสันให้กับเอกสาร HTML ในส่วนของการใส่พิ้นหลัง (Background) ให้โฮมเพจ...
  • DoFollow, NoFollow
    ความแตกต่างระหว่างการลิงค์แบบ DoFollow, NoFollow และ Redirect ในการโปรโมทเว็บไซต์ ไม่ว่าจะผ่านช่องทางใดก็แล้วแต่ นอกจากการพิจารณาเรื่องปริม...
 
Copyright © 2015 สอนทำเว็บไซต์ ง่ายนิดเดี่ยว