แทรกภาพด้วย <img src>

การแทรกรูปภาพ <img src=...>

        ก่อนจะทำการแทรกภาพเราควรเตรียมรูปภาพและกำหนดขนาดภาพให้เหมาะสมเสียก่อน และถ้าภาพที่ใช้ไม่ใช่ภาพ      ที่เราสร้างเองแต่เป็นการไป หามาเราจะต้องระบุแหล่งที่มาของภาพด้วยทุกครั้ง แล้วค่อยทำการแทรกภาพลงบนหน้าเว็บเพจโดยสามารถทำได้ดังนี้

  

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

การตั้งค่าให้เครื่องคอมพิวเตอร์แสดงนามสกุลไฟล์

        เราสามารถทำการปรับตั้งค่าให้ Microsoft Windows ให้แสดงนามสกุลไฟล์ประเภทต่างๆได้ดังนี้

        1. วิธีแสดงนามสกุลไฟล์ ของ Microsoft windows 7

            1. ไปที่ Computer > Organize >เมนูบาร์ของหน้าต่างโฟลเดอร์ แล้วเลือก Folder and Search Options

 

            2. จากนั้น เมื่อหน้าต่าง folder option ปรากฏขึ้น ก็คลิ๊กที่แท็บ View และคลิ๊กที่หัวข้อ “Hide extensions for known file types” เพื่อให้เครื่องหมายถูกด้านหน้าหายไป แล้วจากนั้นกด OK

 

 

         2. วิธีแสดงนามสกุลไฟล์ ของ Microsoft windows xp

                1. คลิ๊กที่เมนู Tools ในเมนูบาร์ของโฟลเดอร์ จากนั้นคลิ๊ก Folder Options.

 

                2. คลิ๊กที่แท็บ View และคลิ๊กที่หัวข้อ “Hide extensions for known file types” เพื่อให้เครื่องหมายถูกด้านหน้าหายไป แล้วจากนั้นกด OK.

 

 

                3. จะได้ผลลัพธ์ ดังนี้

 

        ก่อนที่จะทำการแทรกภาพควรนำไฟล์ภาพมาจัดเก็บให้อยู่ในไดเร็กทรอรี่เดียวกันกับไฟล์เว็บเพจเพื่อง่ายต่อการจัดเก็บและการระบุไฟล์ภาพ

การแทรกภาพบนหน้าเว็บเพจ

1. กรณีไฟล์ภาพกับไฟล์เว็บเพจอยู่ในไดเร็กทอรี่เดียวกัน

        รูปแบบการใช้คำสั่ง <img src="ชื่อไฟล์.นามสกุล">

 

2. กรณีไฟล์เว็บเพจกับไฟล์รูปภาพไม่อยู่ในไดเร็กทอรี่ เดียวกัน

        รูปแบบการใช้คำสั่ง <img src="ชื่อforderที่จัดเก็บไฟล์/ ชื่อไฟล์.นามสกุล">

 

        จะเห็นว่าถ้าไฟล์เว็บเพจกับไฟล์รูปภาพไม่อยู่ในไดเร็กทอรี่ เดียวกัน จะต้องระบุชื่อไดเร็กทอรี่ตามด้วยเครื่องหมาย “/” แล้วค่อยระบุชื่อไฟล์และนามสกุลภาพ

ผลลัพธ์ที่ได้