HTML - รูปภาพ

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

แทรกรูปภาพ

คุณสามารถแทรกรูปภาพใดก็ได้ในหน้าเว็บของคุณโดยใช้ <img>แท็ก ต่อไปนี้เป็นไวยากรณ์ง่ายๆในการใช้แท็กนี้

<img src = "Image URL" ... attributes-list/>

แท็ก <img> เป็นแท็กว่างซึ่งหมายความว่าสามารถมีได้เฉพาะรายการแอตทริบิวต์และไม่มีแท็กปิด

ตัวอย่าง

หากต้องการลองทำตัวอย่างต่อไปนี้ให้เก็บไฟล์ HTML test.htm และไฟล์รูปภาพ test.png ไว้ในไดเร็กทอรีเดียวกัน -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

คุณสามารถใช้ไฟล์ภาพ PNG JPEG หรือ GIF ได้ตามความสะดวกของคุณ แต่ต้องแน่ใจว่าคุณระบุชื่อไฟล์ภาพที่ถูกต้องในรูปแบบ srcแอตทริบิวต์ ชื่อรูปภาพจะต้องตรงตามตัวพิมพ์เล็กและใหญ่เสมอ

alt แอตทริบิวต์เป็นแอตทริบิวต์บังคับซึ่งระบุข้อความทางเลือกสำหรับรูปภาพหากไม่สามารถแสดงรูปภาพได้

ตั้งค่าตำแหน่งภาพ

โดยปกติเราจะเก็บภาพทั้งหมดไว้ในไดเร็กทอรีแยกต่างหาก ลองเก็บไฟล์ HTML test.htm ไว้ในโฮมไดเร็กทอรีของเราและสร้างไดเร็กทอรีย่อยimages ภายในโฮมไดเร็กทอรีที่เราจะเก็บ image test.png

ตัวอย่าง

สมมติว่าตำแหน่งรูปภาพของเราคือ "image / test.png" ให้ลองใช้ตัวอย่างต่อไปนี้ -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าความกว้าง / ความสูงของภาพ

คุณสามารถตั้งค่าความกว้างและความสูงของภาพตามความต้องการของคุณโดยใช้ width และ heightคุณลักษณะ. คุณสามารถระบุความกว้างและความสูงของรูปภาพในรูปของพิกเซลหรือเปอร์เซ็นต์ของขนาดจริง

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าเส้นขอบภาพ

ตามค่าเริ่มต้นรูปภาพจะมีเส้นขอบล้อมรอบคุณสามารถระบุความหนาของขอบในรูปของพิกเซลโดยใช้แอตทริบิวต์ border ความหนา 0 หมายถึงไม่มีเส้นขอบรอบภาพ

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าการจัดแนวภาพ

ตามค่าเริ่มต้นรูปภาพจะจัดแนวที่ด้านซ้ายของหน้า แต่คุณสามารถใช้ได้ align เพื่อตั้งค่าไว้ตรงกลางหรือด้านขวา

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

กราฟิกเว็บฟรี

สำหรับกราฟิกเว็บฟรีรวมถึงรูปแบบคุณสามารถดูกราฟิกเว็บฟรี