วันพุธที่ 28 สิงหาคม พ.ศ. 2556

การแทรกรูปภาพ



Tag <img>  เป็นแท็ก ที่ไว้ใช้สำหรับ การแท็กภาพมาไว้ในเว็บเพจ โดย tag<img> นี้จะมี Attribute หลักๆ คือ src

 attribute src="ที่ตั้งรูปภาพ” โดยความสำคัญของ src คือเป็นการอ้างแหล่งที่อยู่ของรูปภาพ

รูปแบบคำสั่ง  <img src="ชื่อรูปภาพ.jpg หรือ .gif">


การปรับขนาดของรูปภาพ   

การปรับความกว้าง - Width    การปรับความสูง - Height

รูปแบบคำสั่ง  <img src="ชื่อรูปภาพ.jpg หรือ .gif" width= X  height=Y >



ตัวอย่าง

                                  <html>
                                  <body>
                                  <img src="Turbo.jpg" width=200  height=100>
                                  </body>
                                  </html>

ผลที่ได้

หมายเหตุ : กรณีที่ รูปภาพอยู่ที่เดียวกับที่เก็บไฟล์ HTML
-----------------------------------------------------------------------------------------

การจัดตำแหน่ง

สามารถใช้ Tag ได้ 2แบบ คือ P ALIGN หรือ CENTER

รูปแบบคำสั้ง <p align=left หรือ center หรือ right><img src="ชื่อรูปภาพ.jpg หรือ .gif"></p>

<center><img src="ชื่อรูปภาพ.jpg หรือ .gif"></center>

ตัวอย่าง

                                   <html>
                                  <body>
                                  <p align=right><img src="Turbo.jpg"></p>
                                  <center><img src="Turbo.jpg"></center>
                                  </body>
                                  </html>

ผลที่ได้



-----------------------------------------------------------------------------------------

การแทรกรูปภาพจากเว็บอื่นๆ

รูปแบบคำสั่ง <img src="http://www.________.com/___.jpg หรือ อื่นๆ">

ตัวอย่าง

                                  <html>
                                  <body>
                                  <img src="http://sbeebird.blogspot.com/Turbo.jpg">                       
                                  </body>
                                  </html>


ผลที่ได้


-----------------------------------------------------------------------------------------

กรณีที่ รูปภาพอยู่คนละที่กับไฟล์เว็บเพจ

จะต้องใส่ Path ให้กับ Tag <img>

รูปแบบคำสั่ง  <img src="ที่อยู่ไฟล์/ชื่อรูปภาพ.jpg หรือ .gif">

ตัวอย่าง


คำสั่ง คือ  <img src="รูป/Turbo.jpg">

-----------------------------------------------------------------------------------------
อ้างอิง





ไม่มีความคิดเห็น:

แสดงความคิดเห็น