:: เมนูหลัก
 แบบทดสอบก่อนเรียน
 หน่วยที่ 1 โลกของเว็บเพจและเว็บไซต์
 หน่วยที่ 2 เริ่มต้นกับ HTML
 หน่วยที่ 3 การจัดการข้อความ
 หน่วยที่ 4 การใช้ลิสต์สร้างรายการ
 หน่วยที่ 5 การแทรกภาพ
 แบบทดสอบก่อนเรียน
รู้จักกับภาพกราฟิกชนิดต่าง ๆ
 การแทรกภาพบนเว็บเพจ
 การใส่ข้อความกำกับภาพ
 การปรับขนาดภาพบนเว็บเพจ
 การจัดรูปภาพร่วมกับข้อความ 
 การใส่ภาพพื้นหลังให้กับเว็บเพจ
 แบบฝึกหัด
 แบบทดสอบหลังเรียน
 หน่วยที่ 6 การสร้างตาราง
 หน่วยที่ 7 การเชื่อมโยงเว็บเพจด้วยลิงค์
หน่วยที่ 8 การใช้งานไฟล์วีดีโอและเสียง
 หน่วยที่ 9 การสร้างฟอร์ม
 แบบทดสอบหลังเรียนเรียน
:: หน่วยที่ 5 การแทรกภาพ
การแทรกภาพบนเว็บเพจ


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

คำสั่ง (Tag)

Tag
ชื่อแท็ก img
ตำแหน่งแท็ก <body>...</body>
รูปแบบการใช้แท็ก <img src="url">
แอตทริบิวต์ src
ค่า value url            ตำแหน่งของรูปภาพ
                - ตำแหน่งที่อยู่ภายในเว็บไซต์
                  (src="image.gif")
                - ตำแหน่งรูปภาพที่อยู่เว็บไซต์อื่น
                  (src="http://www.example.com/image.gif")

 

ตัวอย่างการใช้งาน
<body>
<h2><p align="center">การแทรกภาพบนเว็บเพจ</p></h2>
<img src="smile.png">

</body>

การแสดงผล

จากตัวอย่างในการกำหนดตำแหน่งของรูปภาพ จะเป็นการกำหนดตำแ่หน่งของภาพที่อยู่ภายในเว็บไซต์ และซึ่งไฟล์เว็บเพจกับไฟล์รูปภาพอยู่ในไดเร็กทอรี่ี่เดียวกัน ซึ่งจะกำหนดด้วย (ชื่อภาพ.นามสกุลภาพ)


Tip

URL ย่อมาจากคำว่า Uniform Resource Locator คือ ที่อยู่ (Address) ของข้อมูลต่างๆในInternet เช่น ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเตอร์เน็ต



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

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



ตัวอย่างการใช้งาน
<body>
<h2><p align="center">การแทรกภาพบนเว็บเพจ</p></h2>
<p>การแทรกรูปภาพที่ไฟล์เว็บเพจและไฟล์รูปภาพอยู่ ไม่ได้อยู่ในไดเร็กทรอรี่เดียวกัน</p>
<img src="images/smile.png">
</body>

การแสดงผล

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



วีดีโอ