บทเรียนออนไลน์ คุณครูอิทธิวิธิ สินศิริ

7. การใส่กรอบให้กับรูปภาพ

การใส่กรอบให้กับรูปภาพจะเป็นการใส่เส้นกรอบสี่เหลี่ยมให้กับรูปภาพนั้นเพื่อเน้นรูปภาพให้เด่นชัดหรือ
แยกส่วนรูปจากข้อความ

โดยที่

border เป็นคำสั่งที่ใช้ในการสร้างกรอบให้กับรูปภาพ โดยกำหนดค่าเป็นตัวเลข ความหนาของเส้นกรอบ
มีค่าตั้งแต่ 0 ถึง 10

ตัวอย่างการใส่กรอบให้กับรูปภาพ

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

 <img src="comp.jpg" width="15%" border ="1" align ="left" hspace ="20">
 แบบเรียนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ 
 (Microsoft windows7&office2010) 
 เป็นแบบเรียนที่เขียนขึ้นเพื่อใช้ในการเรียนการสอนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ
 ตรงตามจุดประสงค์รายวิชา สมรรถนะรายวิชาและคำอธิบายรายวิชาในหลักสูตรของกระทรวงศึกษาธิการ
 พร้อมแบบทดสอบและแบบฝึกทักษะ

</body>
</html>

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

8. การนำรูปภาพมาทำเป็นพื้นฉากหลัง

เราสามารถนำรูปภาพมาทำเป็นพื้นฉากหลังในลักษณะของวอลล์เปเปอร์ (Wallpaper) ให้กับหน้าเอกสาร HTML ได้
โดยใช้คำสั่งด้งนี้

ตัวอย่างการใส่รูปภาพพื้นฉากหลัง

<!DOCTYPE html>
<html>
<head>
<title>Image tag</title>
</head>
<body backgroud = "bg.jpg" >

 <img src ="comp.jpg" width ="15%" align ="left" vspace ="20"> 
 แบบเรียนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ 
 (Microsoft windows7&office2010) 
 เป็นแบบเรียนที่เขียนขึ้นเพื่อใช้ในการเรียนการสอนวิชาคอมพิวเตอร์และสารสนเทศเพื่องานอาชีพ
 ตรงตามจุดประสงค์รายวิชา สมรรถนะรายวิชาและคำอธิบายรายวิชาในหลักสูตรของกระทรวงศึกษาธิการ
 พร้อมแบบทดสอบและแบบฝึกทักษะ

</body>
</html>

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