พื้นฐาน HTML ตอน รูปภาพ

html-image

เทคนิคการใส่รูปภาพบนเว็บ ในรูปแบบต่างๆ

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

คำสั่งเกี่ยวกับรูปภาพ บน HTML

  • แท็ก <img>
    ตัวอย่างคำสั่ง <img src = “images/myphoto.jpg”>
  • แท็ก <img> เพิ่มด้วยคำสั่งย่อย alt?
    ตัวอย่างคำสั่ง <img src = “images/myphoto.jpg” alt = “รูปภาพของฉัน”>
  • แท็ก <img> เพิ่มด้วยคำสั่งย่อย กำหนดขนาด
    ตัวอย่างคำสั่ง <img src = “images/myphoto.jpg” width = “100” height = “200”>

อธิบายเพิ่มเติมคำสั่ง แท็ก <img>

  • คำสั่ง Img คำสั่งสำหรับแสดงรูปภาพ
  • คำสั่ง src ย่อมาจาก source หมายถึง ตำแหน่่งหรือโฟลเดอร์ที่เก็บไฟล์รูปภาพที่เราอ้างอิง นอกเหนือจากรูปภาพบน server ของเราแล้ว เรายังสามารถอ้างอิงรูปภาพจากเว็บไซต์อื่่นๆ ได้ด้วย โดยการใส่ชื่อ URL ของรูปภาพนั้น โดยตรง
  • คำสั่ง alt หมาถยึง การบอกรายละเอียดของรูปภาพ
  • คำสั่ง width และ height เราสามารถใช้คำสั่ง อย่างใดอย่างหนึ่งได้

คุณทราบหรือไม่ว่า ถ้าเรากำหนดขนาดของรูปภาพที่แสดงบนเว็บ แต่เราต้องการย่อให้มีขนาดเล็กลง เราไม่จำเป็นต้องกำหนดทั้ง width และ height แต่เราสามารถกำหนดเพียงอย่างใดอย่างหนึ่ง และอีกด้านก็จะทำการย่อให้อัตโนมัติได้ทันที ทำให้ภาพไม่เสียสัดส่วน

Avatar
About Mr. ONE - Admin 1540 Articles
ทำงานด้านไอทีโดยเฉพาะ ชอบเทคโนโลยีเป็นชีวิตจิตใจ ชอบขีดๆ เขียนๆ โดยเฉพาะเขียนข้อมูลเกี่ยวกับการใช้คอมพิวเตอร์ โปรแกรม มีประสบการณ์การเขียนหนังสือคอมพิวเตอร์ เขียนแบบเรียนระบบสารสนเทศทางด้านโรงแรม