เค้าโครงเนื้อหา  

  [..กลับไปหน้าหลัก..]

4.1 การใส่รูปภาพ
4.2 คุณสมบัติการนำเสนอรูปภาพ

 

 
บทเรียน

หน่วยการเรียนที่ 1
ความรู้พื้นฐานทาง HTML

หน่วยการเรียนที่ 2
การจัดรูปแบบตัวอักษร

หน่วยการเรียนที่ 3
การจัดรูปแบบเอกสาร
หน่วยการเรียนที่ 4
การใส่รูปภาพ
หน่วยการเรียนที่ 5
การกำหนดพื้นหลัง
หน่วยการเรียนที่ 6
การเชื่อมโยงข้อมูล

หน่วยการเรียนที่ 7
การสร้างตาราง

หน่วยการเรียนที่ 8
การ Upload ข้อมูล

 

 
หน้าที่ 1/2
 back : next
 

4.1 การใส่รูปภาพ

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

<img src="ชื่อไฟล์รูปภาพ" หรือ ชื่อ "path(ที่เก็บรูปภาพ)/ชื่อไฟล์"

หรือ "image URL">

        การใส่รูปภาพ นั้น การระบุตำแหน่งที่เก็บรูปภาพ (folder) นี้ เป็นจุดสำคัญมาก ถ้าระบุที่เก็บ (path)ผิด รูปภาพจำไม่ปรากฎขึ้น จะแสดงผลเป็นกรอบรูปภาพเล็ก ๆ  แล้วมีเครื่องหมายกากบาท (x)หรือ ? กำกับ (ดูตัวอย่าง)

        สังเกตที่ path จะใช้เครื่องหมาย สแลช (/)  ถ้าใส่เครื่องหมายผิดก็จะไม่แสดงภาพเช่นกัน เพราะอ้างอิงผิดนั่นเอง ดังตัวอย่าง

        ถ้าต้องการใส่รูปภาพชื่อไฟล์ flowers.gif" ซึ่งเก็บอยู่ใน folder images จะกำหนดได้ ดังนี้


<img src="flowers.gif">
อ้าง path ผิด
Flowers
<img src="images/flowers.gif ">
อ้าง path ถูกต้อง

      ทดสอบการใส่รูปภาพ      

 
 

      ข้อควรระวัง คือ เรื่องของที่เก็บภาพ (path)  ตรวจสอบได้ดังนี้

  1. ถ้าที่เก็บรูปภาพอยู่ใน folder เดียวกับไฟล์ HTML ที่ต้องการใส่รูปภาพนั้น ไม่ต้องระบุ path ก็ได้

  2. ถ้าไฟล์ HTML อยู่ใน folder ชื่อ homepage ที่มีภาพอยู่ใน folder ชื่อ image เมื่อจะใช้คำสั่งใส่ภาพออกมา ต้องใส่ path ให้ถูกต้อง คือ <img src="image/ชื่อภาพ"> 

 

หมายเหตุ ใน tag คำสั่ง ไม่ต้องใส่ เครื่องหมาย  "...." ก็ได้

หน้าที่ 1/2
 back : next

กลับไปหน้าแรก I แนะนำรายวิชา I วิธีการเรียน I เนื้อหาบทเรียน I แบบฝึกหัด I ติดต่อผู้สอน