____4.2 คุณสมบัติการนำเสนอรูปภาพ

                 สำหรับการใส่รูปภาพ ในเอกสาร HTML ยังสามารถกำหนดคุณสมบัติการนำเสนอรูปภาพได้  ซึ่งในการกำหนดคุณสมบัติ (attribute) ที่จะใช้กำหนดคุณสมบัติในคำสั่ง <img src> เพื่อที่จะทำให้รูปภาพที่นำเสนอน่าสนใจ และสามารถบอกวัตถุประสงค์ของเว็บเพจได้ดียิ่งขึ้น ดังนี้

                การใส่รูปภาพ ถ้าไฟล์รูปภาพมีขนาดใหญ่ การแสดงผลอาจทำได้ช้า ดังนั้นควรใส่คำอธิบายภาพไว้ด้วย โดยการเติมคำ alt= "ชื่อภาพ" หรือคำอธิบายรูปภาพ ไว้ต่อจากชื่อภาพใน <img src> ซึ่งเว็บบราวเซอร์จะแสดงคำอธิบายภาพก่อนที่จะโหลดภาพจริงเสร็จสิ้น

                การใส่รูปภาพ สามารถกำหนดขนาดของภาพที่ต้องการให้แสดงผล ได้ด้วยการกำหนดตัวเลขบอกความกว้าง x ยาว ในหน่วย pixels เช่น
<img src="images/flowers.gif " alt="Flowers" width="100" hight="70">

                ระบุตำแหน่งการวางรูปภาพในเว็บเพจ โดยสามรถวาง ด้านซ้าย (left) ด้านขวา (right) และ กึ่งกลาง (center) โดยใช้ attribute align="ตำแหน่ง" เช่น
<img src="images/flowers.gif " alt="Flowers" align="center">

                สามารถกำหนดเส้นขอบของรูปภาพ โดยใช้ attribute border="ค่าตัวเลข" เช่น
<img src="flowers.gif " alt="Flowers" align="center" border="2">

             สำหรับการใส่เส้นขอบให้กับรูปภาพหากไม่กำหนดค่า แสดงว่าไม่มีเส้นขอบ หรือ border="0" 
<img src="itgreat.gif" alt="สวัสดครับ (ภาพขนาด 100X180)"  align="center" border="2" width="100" height="180">


       
      ทดสอบการกำหนดคุณสมบัติรูปภาพ




สรุปคำสั่งกำหนดคุณสมบัติของรูปภาพ
                                                                                                      
  • alt       = เป็นการกำหนดข้อความอธิบาย จะปรากฏเมื่อนำเมาส์ชี้ที่รูปภาพ
  • align    = "center" เป็นการกำหนดรูปภาพให้อยู่ตรงกลาง
  • align    = "left" เป็นการกำหนดรูปภาพให้อยู่ด้านขวา
  • align    = "right" เป็นการกำหนดรูปภาพให้อยู่ด้านซ้าย
  • width   = การกำหนดขนาดความกว้างของรูปภาพ
  • height  = การกำหนดขนาดความสงของรูปภาพ
  • border = เป็นการกำหนดเส้นกรอบของรูปภาพ


<<-- ก่อนหน้านี้  

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

  1. power reserve Rolex Replica Watches of 70 hours minimum. One thing to note is that even though the watch is water resistant TAG Heuer Replica Watches it is better not to submerge it (See manual). Breitling for Bentley Collection by Breitling Replica Handbags Coach is a collection of masterpieces that defines luxury and performance. The Replica Chloe Handbags collection has many timepieces such as the Bentley B06, the Bentley B06S, Bentley Swiss Replica Watches UK B05 Unitime.

    ตอบลบ