ทำแบบทดสอบก่อนเรียน
การออกแบบเว็บไซต์
ภาษา html
การจัดรูปแบบเอกสาร
การจัดรูปแบบตัวอักษร
การใส่รูปภาพลงในเว็บเพจ
การสร้างตาราง
การเชื่อมโยงเว็บเพจ
การใส่ไฟล์มัลติมีเดีย
แบบทดสอบหลังเรียน

3. การกำหนดขนาดของรูปภาพ

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


<img src ="ชื่อไฟล์รูปภาพ" width="ความกว้าง" height="ความสูง">

โดยที่

    Width  ใช้กำหนดความกว้างของรูปภาพ
    Height ใช้กำหนดความสูงของรูปภาพ

    โดยการกำหนดขนาดนี้ จะกระทำได้ 2 แบบคือ

    1. กำหนดขนาดภาพแบบคงที่   โดยกำหนดเป็นจำนวนพิกเซล ซึ่งรูปภาพจะแสดงตามขนาดที่กำหนดนี้ตลอด
    2. กำหนดขนาดภาพแบบลอยตัว  โดยกำหนดเป็น % ของขนาดหน้าต่างเว็บเบราว์เซอร์ขณะนั้น
ซึ่งเมื่อมีการปรับขนาดหน้าต่างเว็บเบราว์เซอร์ รูปภาพนั้นจะถูกปรับขนาดตาม
ตัวอย่างการปรับขนาดภาพ

<!DOCTYPE html>
<html>
<head>
<title> Image Tag </title>
</head>
<body>

     <img src= "images/comp.jpg">
     <img src= "images/comp.jpg" width ="100" height ="180">
     <img src= "images/comp.jpg" width ="30%">

</body>
</html>

ผลที่ได้บนเบราว์เซอร์



4. การกำหนดข้อความกำกับภาพ (Alternate Text) 

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


<img src="ชื่อไฟล์รูปภาพ"  alt="ข้อความกำกับภาพ">

ตัวอย่างการกำหนดข้อความกำกับภาพ

<!Doctype html>
<html>
<head>
<title>Image Tag</title>
</head>
<body>

      <img src= "images/com.jpg" alt="รูปปกหนังสือคอมพิวเตอร์และสารสนเทศ">

</body>
</html>

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