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>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
กราฟิกเว็บฟรี
สำหรับกราฟิกเว็บฟรีรวมถึงรูปแบบคุณสามารถดูกราฟิกเว็บฟรี