จะดีกว่าไหม ถ้าเราเขียนบทความเกี่ยวกับอาหาร แล้วมีภาพประกอบด้วย ขั้นตอนการแทรกภาพทำได้ง่ายนิดเดียว ด้วยแท็ก <img> ดูตัวอย่างกันเลย
<!DOCTYPE html>
<html>
<body>
<h1>บทความที่ 1</h1>
<p>อากาศร้อน ๆ แบบนี้อยากกินส้มตำเผ็ด ๆ กับคนรู้ใจ</p>
<img src="papaya.jpg" alt="ส้มตำ" width="200" height="150">
</body>
</html>ดูผลลัพธ์
อธิบายเพิ่มเติม
<img src=”papaya.jpg” alt=”ส้มตำ” width=”200″ height=”150″>
ในการแทรกภาพเราจะใช้แท็ก <img> ซึ่งในแท็กจะประกอบไปด้วยแอททริบิวต์ (Attribute) เช่น src, alt มีไว้เพื่อบอกว่าแท็กนั้น ๆ มีคุณสมบัติอะไรบ้าง ดูความหมายของแอททริบิวต์ ต่าง ๆ
- src คือ ตำแหน่งที่อยู่ของภาพ สามารถแทรกในรูปแบบของลิงก์ออนไลน์ได้ หรือจะชี้ตำแหน่งโดยตรงในเครื่อง เช่น ใน D:\img\papaya.jpg เป็นต้น (อย่าลืมใส่นามสกุลภาพให้ถูกต้องด้วยนะ)
- alt คือ ข้อความสำรองสำหรับรูปภาพ
- width คือ ความกว้าง ถ้าภาพมีขนาดที่เหมาะสมแล้ว ไม่จำเป็นต้องใส่ก็ได้
- height คือ ความสูง ถ้าภาพมีขนาดที่เหมาะสมแล้ว ไม่จำเป็นต้องใส่ก็ได้
การใส่แอททริบิวต์จะต้องขึ้นต้นด้วย ชื่อแอททริบิวต์ เครื่องหมายเท่ากับ และค่าของแอทริบิวต์นั้น ๆ เช่น width=”200″ แน่นอนว่า with คือแอททริบิวต์ ส่วน 200 คือค่าของแอททริบิวต์นั่นเอง ในแต่ละแท็กก็จะมีแอททริบิวต์ที่แตกต่างกันออกไป ค่อย ๆ เรียนรู้ไปเดี๋ยวก็จำได้เอง ไม่งงนะ 😀