บทที่ 7 : การใส่รูปภาพลงในเว็บเพจ

1. การใส่รูปภาพลงในเอกสารเว็บเพจ

รูปแบบของภาพกราฟฟิคใน Web Page ไฟล์รูปภาพที่แสดงบน Web หรือที่เรียกว่า Image
ที่เป็นมาตรฐานและนิยมใช้มากบน Web ได้แก่ GIF และ JPEG (JPG) เนื่องจากใช้เทคนิคการบีบย่อข้อมูล ทำให้ไฟล์มีขนาดไม่ใหญ่มากนัก การ Download ไฟล์จึงรวดเร็ว   
ไฟล์รูปภาพขนาดใหญ่มักเก็บในรูปแบบของ JPEG ซึ่งเก็บความละเอียดของภาพได้ถึง 16.7 ล้านสี
ส่วนไฟล์รูปภาพขนาดเล็กมักนิยมเก็บในรูปแบบของ GIF แทน โดยจะเก็บความละเอียดของภาพได้เพียง 256 สี

1.1 คำสั่ง Tag ใส่รูปภาพลงในเอกสารเว็บเพจ

<IMG SRC = "ไฟล์รูปภาพ"  แอตทริบิวท์>

แอตทริบิวท์
รายละเอียด
WIDTH=number of pixel ความสูงของรูปภาพด้วยจำนวนจุดของ pixel
HEIGHT=number of pixel ความกว้างของรูปภาพด้วย pixel
OR WIDTH=number% กำหนดความกว้างเป็นจำนวนเปอร์เซ็นต์
VSPACE=number of pixel กำหนดระยะห่างของรูปภาพในแนวบน-ล่าง
HSPACE=number of pixel กำหนดระยะห่างของรูปภาพในแนวซ้าย-ขวา
ALT="ข้อความ" การแทนที่รูปภาพด้วยข้อความก่อนที่จะดึงรูปขึ้นมา
ALIGN=LEFT วางรูปไว้ด้านซ้ายของหน้าเอกสาร
ALIGN=RIGHT วางรูปไว้ด้านขวาของหน้าเอกสาร
ALIGN=TOP วางด้านบนของรูปไว้ที่บรรทัดบนสุดของ Text
ALIGN=MIDDLE วางส่วนกลางของรูปภาพไว้กึ่งกลางของ Text
ALIGN=BOTTOM วางส่วนล่างของรูปไว้ที่บรรทัดล่างของ Text
BORDER=number การกำหนดกรอบให้รูปภาพ

ตัวอย่าง

<HTML>
<HEAD>
<TITLE>Insert Picture</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC= "girl.jpg" WIDTH=200 HEIGHT=250 ALT="My Girl Friend"
ALIGN=MIDDLE
VSPACE=100 HSPACE=50<Here's a picture of my girl friend.
</CENTER>
</BODY>
</HTML>


การแสดงผลบน Web Browser (Internet Explorer)




นอกจากนี้ยังสามารถกำหนดรูปภาพให้เป็น Link ที่เชื่อมโยงไปเอกสารเป้าหมายใด ๆ ได้
<A HREF= "เอกสารเป้าหมาย"> <IMG SRC "ไฟล์รูปภาพ" ATTRIBUTE>

ตัวอย่าง


<A HREF= "mypage.html"> <IMG SRC= "girl.jpg"></A>


ตัวอย่าง

<HTML>
<HEAD>
<TITLE>Link by Picture</TITLE>
</HEAD>
<BODY>
<UL>
<LI>Click<A HREF=#test>Here</A>To Target TEST<BR>
<LI>Link to<A HREF="test1.html">File"MS Sans Serif" size="1" color="#003399"></A>Creating the home page on WWW</A>
<LI><A HREF="http://www.sw.ac.th/">Click here to visit SW_School</A>
OR Click at
<A HREF= "http://www.sw.ac.th"> <IMG SRC= "swlogo.gif" BORDER=0></A> ><BR>
</UL>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<A NAME= test>Test is Here</A>
</BODY>
</HTML>


การแสดงผลบน Web Browser (Internet Explorer)




1.2 การเชื่อมโยงภาพเคลื่อนไหวและเสียง

ตัวอย่าง

<A HREF= "toystory.mov"> Click here to see a sample movie!</A> <BR>
<A HREF= "thankyou.rm">Click here to listen to my favorite song!</A> <BR>






 
จัดทำโดย : นายถาวร เขียนเสมอ, โรงเรียนสัตหีบวิทยาคม จ.ชลบุรี
นางขวัญใจ เขียนเสมอ, โรงเรียนสัตหีบวิทยาคม จ.ชลบุรี