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