ความหมายและชนิดของแฟ้มภาพ

การ ใส่รูปภาพลงในเว็บเพจ เป็นอีกวิธีหนึ่งที่จะทำให้เว็บเพจดูสวยงามขึ้น โดยนำรูปภาพมาใส่ในเว็บเพจร่วมกับข้อความได้ แต่ขอแนะนำว่าหากต้องการที่จะใส่รุปภาพใดในเว็บเพจให้ทำการคัดลอกรูปภาพนั้น มาเก็บไว้ในโฟล์เดอร์เดียวกับเว็บเพจเสียก่อนเพื่อให้ง่ายต่อการจัดการและ การเคลื่อนย้าย ส่วนภาพที่นำมาใส่ในเอกสารควรมี ขนาดของไฟล์ภาพไม่เกิน 40 kb  เพราะถ้าใหญ่เกินกว่านี้จะทำให้การโหลดข้อมูลช้า ทำให้ผู้เข้ามาดูเว็บเพจต้องคอยนาน รูปภาพที่นิยมนำมาลงในหน้าเว็บเพจจะมีอยู่ 2 ชนิด  คือ

1.  รูปภาพชนิด Graphics Interchange Format  (GIF)  เป็นไฟล์รูปภาพที่มีการบีบข้อมูลทำให้ประหยัดเนื้อที่ สามารถแสดงความละเอียดของภาพได้สูงสุด 256 สี ส่วนมากจะเป็นพวกรูปภาพการ์ตูนต่าง ๆ ที่ไม่ต้องการความละเอียดของภาพมากนัก
2.  รูปภาพชนิด Joint Photographic Experts Group (JPEG หรือ JPG) เป็นไฟล์รูปภาพที่มีการบีบข้อมูลเหมือนกัน  ทำให้ไฟล์มีขนาดเล็กแต่ไฟล์รูปแบบ JPG  จะสามารถแสดงความละเอียดของสีได้สูงถึง 16 ล้านสี ซึ่งจะทำให้ภาพมีความคมชัดมากกว่า  ส่วนมากจะใช้กับพวกภาพถ่ายต่าง ๆ

                    คำสั่งที่ใช้ในการใส่แฟ้มภาพลงเว็บเพจ (Web Page)

คำสั่ง <IMG SRC> (Image Source)  เป็นคำสั่งที่ใช้สำหรับใส่รูปภาพลงในเอกสาร HTML  โดยที่ไฟล์รูปภาพต่าง ๆ ที่ต้องการนำมาใส่ในเอกสาร HTML  นั้น  จะต้องถูกเก็บอยู่ในโฟลเดอร์เดียวกันกับเอกสาร HTML เท่านั้น  แต่ถ้าอยู่คนละแห่งก็สามารถนำมาใส่ได้   โดยการกำหนดไดร์ฟและโฟลเดอร์ของไฟล์ที่รูปภาพนั้นอยู่ไว้ด้วย    มีรูปแบบการใช้คำสั่งดังนี้

< img src=”ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg” >

                                      ตัวอย่างการใช้คำสั่ง

                                                                      ผลลัพธ์

                        คำสั่งพิเศษที่ใช้สำหรับจัดการกับรูปภาพ

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

 1.  คำสั่ง ALIGN  เป็นคำสั่งที่ใช้กำหนดตำแหน่งในการจัดวางรูปภาพ มีรูปแบบการใช้งานดังนี้

<IMG SRC  =  ” n ” ALIGN =  n1 >

* n คือไฟล์ชื่อและนามสกุลของรูปภาพ

*n1 คือตำแหน่งการวางภาพมีรายละเอียดดังนี้

– TOP  วางข้อความระดับบนรูปภาพ

– MIDDLE วางข้อความระดับกลางรูปภาพ

– BOTTOM วางข้อความระดับล่างรูปภาพ

– LEFT วางรูปภาพทางซ้ายของข้อความ

  ตัวอย่างการจัดวางตำแหน่งของรูปภาพ ALIGN=RIGHT

                                                                    ผลลัพธ์

 2.  คำสั่ง WIDTH เป็นคำสั่งที่ใช้กำหนดความกว้างของรูปภาพ มีรูปแบบการใช้งานดังนี้

<IMG SRC  =  “n” WIDTH =n1>

* n คือไฟล์ชื่อและนามสกุลของรูปภาพ

*n1  คือความกว้างของรูปภาพมีหน่วยเป็น Pixels

3.  คำสั่ง HEIGHT   เป็นคำสั่งที่ใช้กำหนดความสูงของรูปภาพ มีรูปแบบการใช้งานดังนี้

<IMG SRC  =  “n” HEIGHT = n1>

* n คือไฟล์ชื่อและนามสกุลของรูปภาพ

*n1  คือความสูงของรูปภาพมีหน่วยเป็น Pixels

                                        4.  คำสั่ง BORDER   เป็นคำสั่งสร้างกรอบให้กับรูปภาพ สีของกรอบรูปภาพจะมีสีเดียวกับสีตัวอักษร  มีรูปแบบการใช้งานดังนี้

     <IMG SRC  =  “n” BORDER =n1>

* n คือไฟล์ชื่อและนามสกุลของรูปภาพ

*n1  คือความหนาของกรอบรูปภาพ

                                                                   ตัวอย่าง

                                                                     ผลลัพธ์

                                     5.  คำสั่ง HSPACE   เป็นคำสั่งที่ใช้กำหนดช่องว่างแนวนอน ซ้ายขวาระหว่างรูปภาพกับข้อความ   มีรูปแบบการใช้งานดังนี้

<IMG SRC  =  “n” HSPACE = n1>

* n คือไฟล์ชื่อและนามสกุลของรูปภาพ
*n1  คือตัวเลขช่องว่างแนวนอนซ้าย-ขวา ระหว่างรูปภาพกับข้อความ มีหน่วยเป็น Pixels

                                      6.  คำสั่ง VSPACE  เป็นคำสั่งที่ใช้กำหนดช่องว่างแนวตั้งด้านบน ล่างระหว่างรูปภาพกับข้อความ   มีรูปแบบการใช้งานดังนี้

       <IMG SRC  =  “n” VSPACE = n1>

* n คือไฟล์ชื่อและนามสกุลของรูปภาพ
*n1  คือตัวเลขช่องว่างแนวตั้งบน-ล่าง ระหว่างรูปภาพกับข้อความ มีหน่วยเป็น Pixels

                        คำสั่งที่ใช้ในการนำแฟ้มภาพมาทำเป็นภาพพื้นหลังของเว็บเพจ (Web Page)

<body background=”ชื่อรูปภาพที่มีนามสกุลเป็น .gif หรือ .jpg” bgproperties=fixed>

·       background = กำหนดรูปภาพ

·       bgproperties = fixed การกำหนดให้รูปภาพคงที่ จะทำให้รูปภาพไม่มีการเคลื่อนที่ตามเมื่อเลื่อนสกอรบาร์

                                                  ตัวอย่าง

                                                     ผลลัพธ์

—————————————————————

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s