เอกสารประกอบการเรียนการสอนรายวิชาการเขยีนเว็บไซต์ด้วยภาษา HTML หน่วยท่ี 5 การจัดการรูปภาพ

คุณครจูิรัชยาพร ทองลือ หน้า 1

หน่วยการเรียนรู้ที่ 5 การจัดการรูปภาพ

ประเภทของไฟล์รูปภาพ

1) GIF (Compuserve Graphic Interchange Format) มีนามสกุล .gif สามารถแสดงสีได้สูงสุดเพียง 256 สี จึงไม่สามารถไล่ระดับสีได้มากนัก นิยมสร้างเป็นภาพการ์ตูน ตัวอักษร ภาพเคลื่อนไหว สามารถท าพ้ืนโปร่งใสได้ (transparent)

2) JPEG (Joint Photographic Experts Group) มีนามสกุลเป็น .jpg สามารถแสดงสีได้สูงสุด ถึง 16.7 ล้านสี จึงเหมาะกับภาพถ่าย หรือภาพที่ใช้สีจ านวนมาก ไม่สามารถท าภาพโปร่งใส หรือภาพเคลื่อนไหวได้ การแสดงรูปภาพ

มีรูปแบบการใช้งานดังนี้ <img src="ไฟล์รูปภาพ" alt="ค าอธิบายรูปภาพ" width="number" height="number">

หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้ <img src="ไฟล์รูปภาพ" alt="ค าอธิบายรูปภาพ" width="number" height="number" />

attribute ของรูปภาพ ได้แก่ - src="ไฟล์รูปภาพ" - alt="ค าอธิบายรูปภาพ" - width="number" ความกว้างของรูป - height="number" ความสูงของรูป ค่าของ attribute width และ height เป็นตัวเลข หน่วยเป็น px หรือ % ของหน้าจอหรือ containner ที่บรรจุรูปภาพอยู่ - align = "top" | "middle" | "bottom" จัดวางต าแหน่งรูปภาพกับข้อความ - border="number" ขนาดกรอบของรูป - vspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวตั้ง - hspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวนอน

EXAMPLE แสดงรูปภาพ และค าอธิบาย <img src="../images/flower.jpg" alt="ภาพดอกไม้ทิวลิป" /> OUTPUTลองเอาเมาส์วางบนรูป จะมีค าอธิบายแสดงขึ้นมาค่ะ

เอกสารประกอบการเรียนการสอนรายวิชาการเขยีนเว็บไซต์ด้วยภาษา HTML หน่วยท่ี 5 การจัดการรูปภาพ

คุณครจูิรัชยาพร ทองลือ หน้า 2

EXAMPLE แสดงรูปภาพ และขอบ <img src="../images/flower.jpg" border="3"/> OUTPUT

EXAMPLE ปรับขนาดรูปภาพ ด้วย attribute width และ height <img src="../images/flower.jpg" width="200px" height="200px" /> <img src="../images/flower.jpg" width="200px" height="240px" /> <img src="../images/flower.jpg" width="50%" /> OUTPUT

เอกสารประกอบการเรียนการสอนรายวิชาการเขยีนเว็บไซต์ด้วยภาษา HTML หน่วยท่ี 5 การจัดการรูปภาพ

คุณครจูิรัชยาพร ทองลือ หน้า 3

การจัดวางต าแหน่งรูปภาพกับข้อความ

EXAMPLE ข้อความอยู่ด้านบน

เอกสารประกอบการเรียนการสอนรายวิชาการเขยีนเว็บไซต์ด้วยภาษา HTML หน่วยท่ี 5 การจัดการรูปภาพ

คุณครจูิรัชยาพร ทองลือ หน้า 4

ข้อความหน้ารูปภาพ<img src="images/ryoma.jpg" /> <img src="../images/ryoma.jpg" />ข้อความหลังรูปภาพ รูปภาพ<img src="../images/ryoma.jpg" />ระหว่างข้อความ รูปภาพ<img src="../images/ryoma.jpg" align="top" />ระหว่างข้อความ จัดให้วางด้านบน align top รูปภาพ<img src="../images/ryoma.jpg" align="middle" />ระหว่างข้อความ จัดให้วางตรงกลาง align middle รูปภาพ<img src="../images/ryoma.jpg" align="bottom" />ระหว่างข้อความ จัดให้วางด้านล่าง align bottom

OUTPUT

ข้อความหน้ารูปภาพ

ข้อความหลังรูปภาพ

รูปภาพ ระหว่างข้อความ

รูปภาพ ระหว่างข้อความ จัดให้วางด้านบน align top

เอกสารประกอบการเรียนการสอนรายวิชาการเขยีนเว็บไซต์ด้วยภาษา HTML หน่วยท่ี 5 การจัดการรูปภาพ

คุณครจูิรัชยาพร ทองลือ หน้า 5

รูปภาพ ระหว่างข้อความ จัดให้วางตรงกลาง align middle

รูปภาพ ระหว่างข้อความ จัดให้วางด้านล่าง align bottom

ก าหนดระยะห่างระหว่างรูปกับข้อความ

EXAMPLE ให้ข้อความ<img src="../images/ryoma.jpg" vspace="20" />วางห่างออกมาจากรูป ในแนวตั้ง ให้ข้อความ<img src="../images/ryoma.jpg" hspace="20" />วางห่างออกมาจากรูป ในแนวนอน OUTPUT

ให้ข้อความ วางห่างออกมาจากรูป ในแนวตั้ง

ให้ข้อความ วางห่างออกมาจากรูป ในแนวนอน