HTML ใส่รูปยังไง พร้อมตัวอย่าง

HTML ใส่รูปยังไง คำตอบคือใช้แท็ก img พร้อมกำหนดที่อยู่ของรูปภาพด้วย src ซึ่งวิธีนี้คือการใช้ HTML และอีกวิธีที่จะแนะนำในบทความนี้คือการใส่รูปลงในเว็บไซต์ HTML โดยใช้ CSS ด้วยคำสั่ง background-image มีรายละเอียดขั้นตอนดังนี้

ตัวอย่าง HTML ใส่รูปด้วยแท็ก img

<img src="images/logo.jpg">

จากตัวอย่างคือการใส่รูปลงในเว็บไซต์ HTML โดยใช้แท็ก img และกำหนดที่อยู่ของรูปภาพผ่าน src ซึ่ง images/logo.jpg คือ รูปภาพชื่อ logo.jpg อยู่ใน folder ชื่อ images

ตัวอย่าง ใส่รูปลงในเว็บไซต์ HTML ด้วย CSS

1. เขียน CSS ลงในแท็ก style โดยแท็กนี้แนะนำให้เขียนในแท็ก head ของ HTML

<style>
	.logo {
    	background-image: url('images/logo.jpg');
    	width: 80px;
    	height: 80px;
	}
</style>

จากโค้ดสร้าง class ชื่อ logo พร้อมกับแสดงรูปภาพด้วยคำสั่ง background-image จาก folder ชื่อ images รูปภาพชื่อ logo.jpg พร้อมกำหนดความกว้างของรูปภาพ (width) เท่ากับ 80px และความสูงของรูปภาพ (height) เท่ากับ 80px

2. นำ class logo ที่เขียนใน CSS ไปแสดงในเว็บไซต์ HTML

<div class="logo"></div>

จากโค้ดคือการเรียกใช้ class ชื่อ logo ที่เขียนใน CSS เพื่อแสดงรูปในเว็บไซต์ HTML

1. การใช้แท็ก img ของ HTML ข้อดีคือ ง่าย ไม่ซับซ้อน

2. การเขียน CSS และเรียกใช้ใน HTML ข้อดีคือ เขียนโค้ดเรียกรูปภาพจากจุดเดียว ทำให้สามารถนำไปใช้กับหลายๆ หน้าของเว็บไซต์ได้ ง่ายต่อการบำรุงรักษาโค้ด แต่จะซับซ้อนกว่าวิธีที่ 1