การใส่รูปภาพในภาษา HTML โดยใช้ img tag
บทความนี้เรามาดูวิธีการใส่รูปภาพในภาษา HTML ซึ่งการจะใส่รูปภาพในภาษา HTML นั้นเราจะใช้แท็ก img กันครับ เรามาดูว่ามันใช้ยังไง และสามารถปรับแต่งพื้นฐานอะไรได้บ้างเรามาดูโครงสร้างพื้นฐานในการใช้งานแท็ก img กันก่อน ซึ่งแท็ก img นั้นไม่มีแท็กปิด ดังนั้นแท็ก img จึงมีรูปแบบการใช้งานดังนี้
<img src="Image URL" ... attributes-list />
จากรูปแบบจะเห็นว่าเราจะใช้ attribute src ในการกำหนดที่อยู่ของรูปภาพ และก็มี attributes อื่น ๆ ที่ต้องการจะใส่ มาดูตัวอย่างโค้ดแบบเต็ม ๆ กันตามด้านล่างเลย
<html> <head> <title>Doesystem.info</title> </head> <body> <img src="doesystem-logo.png" src="doesystem logo website" title="doesystem logo" /> </body> </html>
จากตัวอย่างเราจะใส่ URL ของรูปภาพไว้ที่ src ซึ่งจะเป็นที่อยู่ของรูปภาพ นามสกุลอะไรก็ได้ เช่น .jpg .jpeg .gif และอื่น ๆ อีกมาก หรือเป็น URL ของรูปภาพที่ไม่มีนามสกุลก็ได้(ตัวอย่างที่แชร์มาจากพวก google drive) เราจะใช้ชื่อรูปที่อ้างอิง URL ในเว็บไซต์ หรือจะใส่เป็น URL แบบมี http://www เลยก็ได้เหมือนกัน
ส่วน attribute src เป็น attribute ที่ใช้ในการอธิบายรูปภาพ จะไม่มีการแสดงผลเป็นแค่การอธิบายรูปภาพเท่านั้น(ว่ากันว่ามีผลต่อ seo อยู่มาก)
ส่วน attribute title ก็เป็นการแสดงข้อความเมื่อเอาเมาส์ชี้
การใส่ขนาดรูปภาพในแท็ก img
ในการแสดงรูปภาพในเว็บไซต์นั้น สิ่งที่สำคัญอีกอย่างหนึ่งก็คือ ขนาดของรูปภาพที่แสดง ซึ่งแท็ก img นั้นก็มี attribute ไว้สำหรับกำหนดขนาดรูปไว้เช่นกัน นั่นก็คือ height แล้วก็ width ตัวอย่างการใช้<html> <head> <title>Doesystem.info</title> </head> <body> <img src="doesystem-logo.png" src="doesystem logo website" height="100" width="150" /> </body> </html>
นอกจากการกำหนดขนาดรูปแล้วเรายังสามารถใส่ attribute อื่น ๆ ได้อีกมากมาย เช่น id class border และ attribute พื้นฐานอื่น ๆ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น