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