Image_01 Image_02 Image_03
Krumontree.com Krumontree.com Krumontree.com
Home
Internet and Browser
Create and Design
Basic HTML
Beautiful Images
Control with Table
Links to the others
More tips and Tricks
FTP to Web Hosting
left_bottom

จากบทที่สองเราได้มีการแทรกรูปภาพลงไปเป็นพื้นหลังด้วยคำสั่ง Background="ชื่อรูปภาพ" มาแล้ว รูปภาพที่นำมาใช้ในเว็บเพจนั้นจะต้องอยู่ในสกุล JPG, GIF, PNG เท่านั้น และจะต้องมีขนาดที่เหมาะสม เพื่อให้สามารถดาวน์โหลดได้เร็ว

ytImages in ypur web page : การแทรกรูปภาพในเว็บเพจ

สำหรับในการแทรกรูปภาพบนหน้าเว็บเพจนั้นสามารถทำได้ง่ายๆ ด้วยการระบุคำสั่ง <IMG SRC="ชื่อรูปภาพ"> ดังตัวอย่างนี้จะเป็นการแทรกรูปภาพทั้งเป้นพื้นหลังและในหน้าเว็บเพจ

<html>
      <head>
          <title>
              Insert Images : การแทรกภาพ
          </title>
      </head>
      <body background="bgimage.gif">
            ข้อความที่แสดงในส่วนเนื้อหา
            <img src="kerokero.gif">
      </body>
</html>
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

ข้อความที่แสดงในส่วนเนื้อหา
Kerokero

จะสังเกตได้ว่าคำสั่ง IMG นี้เป็นคำสั่งเดี่ยวไม่ต้องมีคำสั่งปิด เมื่อมีการเก็บรูปภาพไว้ในโฟลเดอร์ใดเป็นการเฉพาะ จะต้องกำหนดเส้นทางชี้ไปยังรูปภาพให้ถูกต้องด้วย เช่น เมื่อเก็บรูปภาพไว้ในโฟลเดอร์ชื่อ images เราจะต้องอ้างในคำสั่งเป็น <IMG SRC="images/name.gif"> หากอ้างผิดไฟล์ภาพนั้นก็จะไม่แสดงดังตัวอย่างภาพนี้         เพราะไม่มีรูปนี้อยู่จริง

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

<html>
      <head>
          <title>
              Insert Images : การกำหนดขนาดภาพ
          </title>
      </head>
      <body>
            แสดงการกำหนดขนาดภาพ<br>
            <img src="daffy.gif"><br>
            <img src="daffy.gif" width="50" height="51"><br>
            <img src="daffy.gif" width="150" height="153"><br>
      </body>
</html>
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

แสดงการกำหนดขนาดภาพ
Daffy
Daffy
Daffy

ytAlignment and border size for images : การวางตำแหน่งและเส้นขอบรูปภาพในเว็บเพจ

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

<html>
      <head>
          <title>
              Insert Images : ตำแหน่งและเส้นขอบรูปภาพ
          </title>
      </head>
      <body>
            <div align="center">
             ตำแหน่งและเส้นขอบรูปภาพ<br>
              <img src="kerokero.gif" border="3">
            </div>
      </body>
</html>
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

ตำแหน่งและเส้นขอบรูปภาพ

รูปกบ Kero

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

<img src="kerokero.gif" border="3" alt="รูปกบ kero">

ytEND : สรุปคำสั่งที่ใช้ในบทนี้
TAGS รายละเอียด
<img src="name"> คำสั่งการแทรกรูปภาพในตำแหน่งต่างๆ name คือชื่อรูปภาพชนิด JPG, GIF, PNG
width="x" height="y" การกำหนดความกว้าง ความสูง ของภาพ โดย x, y มีหน่วยเป็นพิกเซล ต่อจากคำสั่ง img
alt="describe" การกำหนดข้อความอธิบายรูปภาพว่าคือรูปอะไร ต่อจากคำสั่ง img
border="x" การกำหนดขนาดเส้นขอบรอบรูปภาพว่า มีความกว้างเท่าใด มีหน่วยเป็น พิกเซล
<div align="left/center/right"> การกำหนดการจัดวางตำแหน่งของข้อความหรือรูปภาพ ค่าปกติคือซ้าย

Click to TOP

Your visitor no.
Create & Design Web Page with Basic HTML & Tools
Author : KruMontree Kotkanta     e-M@il : webmaster at krumontree.com