HTML Images การใส่รูปภาพในภาษา HTML
ในการสร้างเว็บนั้น สิ่งที่จำเป็นอย่างหนึ่ง นั่นก็คือ ความสวยงามของหน้าเว็บ และการจะทำให้เว็บสวยงามนั้น นอกจากจะใส่สีที่เข้ากันแล้ว การใส่รูปภาพก็เป็นอีกวิธีหนึ่งที่ทำให้เว็บสวยงาม น่าใช้ และเป็นการอธิบายหน้าเว็บได้อย่างดีเยี่ยม ในบทความนี้ เรามาดูวิธีใส่รูปภาพให้กับหน้าเว็บกัน โดยแท็กที่ใช้ในการใส่รูปภาพให้หน้าเว็บนั้นคือแท็ก <img /> และมีแอททริบิวต์ src เพื่อบ่งบอกที่อยู่ของรูปภาพ
เรามาดู Syntax พื้นฐานของแท็ก img กันก่อน ตามด้านล่างเลยครับ
<img src="url" alt="some_text" />url คือ ตำแหน่งที่อยู่ของรูปภาพ ส่วน alt คือคำอธิบายรูปภาพ ตัวอย่างเช่น ผมเขียนโค้ดดังนี้http://www.doesystem.com/Doesystem/image/banner130x50.jpg ก็คือที่ตั้งของรูปภาพ ส่วน picture doesystem.com นั้น คือคำอธิบายรูปภาพ เมื่อนำไปเขียนและรันแล้ว ผลลัพธ์ที่ได้ จะเป็นดังนี้
ถ้าต้องการให้รูปภาพอยู่ตรงกลาง ก็ใส่แท็ก center ครอบรูปภาพไว้จะได้
การกำหนดขนาดของรูป
ในแท็ก img นั้นเราสามารถกำหนดขนาดรูปภาพได้ โดยใช้แอททริบิวต์ width และ/หรือ height เช่น เราเขียนโค้ดเป็นจะเห็นว่าเราเพียงแต่ใส่ค่าควากว้าง(width) เพียงค่าเดียว ความสูงก็จะปรับเปลี่ยนขนาดตาม
ในทำนองเดียวกัน ถ้าเราใส่เพียงค่าควาสูง(height) เพียงค่าเดียว ความกว้างก็จะปรับตามเหมือนกันหรือเราจะใส่ทั้งค่า width และก็ค่า height ได้เหมือนกัน รูปภาพกับตำแหน่งของข้อความ
ในการใส่รูปภาพนั้น แน่นอนว่า หลายครั้งก็ต้องมีข้อความบ้างรูปภาพบ้างปนกันไป เวลาเราต้องการใส่รูปภาพ กับข้อความให้อยู่บรรทัดเดียวกันนั้น บางครั้ง รูปภาพก็มีขนาดใหญ่เกินไป จึงทำให้ข้อความดูไม่สวยงาม หัวข้อนี้ มาดูวิธีจัดตำแหน่งของรูปภาพ เมื่อต้องนำมารวมกับข้อความกันครับการใส่รูปภาพ การใส่รูปภาพ การใส่รูปภาพ การใส่รูปภาพ การใส่รูปภาพ การใส่รูปภาพ
