หน้าแรก
 คำแนะนำการใช้บทเรียน
 ข้อมูลรายวิชา
 Notepad
 แบบทดสอบก่อนเรียน
 แบบทดสอบหลังเรียน
 1 รู้จัก HTML5
 2 โครงสร้างพื้นฐาน HTML5
 3 รู้จัก CSS3
   จุดประสงค์การเรียนรู้
   เกี่ยวกับ CSS3
   การจัดรูปแบบข้อความ
   รูปภาพ
   มัลติมีเดีย
   ลองทำดู รู้ปฏิบัติ
   แบบฝึกหัดที่ 3
 4 การเชื่อมโยง
 5 การสร้างตาราง
 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

     <img>

 แท็กสำหรับแสดงรูปภาพ โดยมีแอตทริบิวต์ที่สำคัญ ดังนี้

  • src ใช้กำหนดตำแหน่งและชื่อของภาพ เช่น img src= “butterfly.jpg”    

  • title กำหนดข้อความ หรือ ชื่อภาพที่จะแสดงแบบ tooltip เมื่อนำเมาส์มาวางเหนือภาพ

  • width ความกว้างของภาพ กำหนดเป็นตัวเลขพร้อมหน่วย เช่น width=“50px”

  • height ความสูงของภาพ กำหนดเป็นตัวเลขพร้อมหน่วย เช่น height=“70px”

 

 

      การกำหนดตำแหน่งของไฟล์รูปภาพ

     แอตทริบิวต์ที่สำคัญของแท็ก <img> คือ src ซึ่งใช้กำหนดตำแหน่งของภาพที่จะนำมาแสดง มีหลักการ ดังนี้
      ถ้าภาพและเพจที่จะแสดงภาพอยู่ในไดเร็กทอรีเดียวกัน อาจจะระบุเพียงแค่ชื่อภาพก็ได้
         เช่น <img src= “bird.jpg”>
      ถ้าภาพอยู่ในระดับไดเร็กทอรย่อยที่ลึกกว่าของเพจ ให้ระบุไดเร็กทอรีไล่ไปตามลำดับ
         เช่น <img src= “images/flowers/rose.png”>
      ถ้าภาพอยู่ในระดับไดเร็กทอรีชั้นนอกหรือสูงกว่าของเพจให้แทนไดเร็กทอรีชั้นนอกด้วยสัญลักษณ์ “..”
         ต่อ 1 ระดับ เช่น <img src= “../html5/logo.png”>
      กรณีที่ภาพอยู่ในเว็บไซต์อื่นๆ หรืออยู่ในเว็บไซต์เดียวกัน และไม่แน่ใจในการไล่ระดับไดเร็กทอรี
         สามารถกำหนดตำแหน่งภาพเป็น URL แบบเต็มได้
         เช่น <img src=http://www.developerthai.com/books/html5-cover.gif>