Munuบทเรียนการเขียนเว็บด้วยภาษา html
บทที่ 5 รูปภาพ
รูปภาพ
ถึงตอนนี้ คุณพอที่จะเขียนเว็บดีๆที่มีแต่ตัวหนังสือได้แล้ว แต่ความสามารถอีกอันหนึ่งของอินเตอร์เน็ต คือการแสดงรูปภาพ(รูปถ่าย รูปเขียน) หรือจะเรียกว่ากราฟฟิก(รูปที่สร้างขึ้น) หรือไอคอน(เป็นพวกรูปเล็กๆจิ๋วๆ ที่ใช้แสดงลักษณะต่างๆ) ซึ่งเป็นที่นิยมใช้อย่างมาก ในบทเรียนนี้ คุณจะเรียนรู้วิธีการวางรูปภาพลงในหน้าเว็บ(web page)ของคุณ และวิธีการทำให้รูปภาพกลายเป็น link ไปสู่หน้าอื่น
การวางรูปลงในหน้าเว็บ
คำสั่งที่ใช้ในการวางรูปภาพ มีรูปแบบเดียวครับ ซึ่งคุณจะต้องใช้ในทุกๆครั้งในการแสดงรูป รูปที่คุณจะนำมาใช้ ควรเก็บไว้ที่เดียวกับ หน้าเว็บที่คุณสร้างขึ้นมา เช่นคุณสร้างหน้าเว็บไว้ใน C:/My Documents/ ก็ควรจะนำรูปภาพมาไว้ในนี้ด้วย ซึ่งรวมถึงสิ่งอื่นๆที่จะนำมาใช้กับหน้าเว็บของคุณ(ซึ่งคุณยังไม่ได้เรียนส่วนนี้) ก็ควรนำมาเก็บไว้ในที่เดียวกัน
นี่เป็นรูปแบบคำสั่งอย่างง่ายของการวางรูปภาพ :
<IMG SRC=”image.gif”>
โดย “image.gif” เป็นที่อยู่หรือชื่อของรูปภาพที่ผมสมมติขึ้นมา ซึ่งเมื่อคุณนำไปใช้ ต้องเปลี่ยนให้เป็นที่อยู่รูปของคุณเอง หากคุณไม่ได้เก็บหน้าเว็บและรูปภาพไว้ในที่เดียวกัน คุณต้องใช้ที่อยู่เต็มของรูปภาพนั้น เช่นหากรูปภาพนี้อยู่ใน http://www.abcde.com/ คุณต้องใช้ว่า…
<IMG SRC=”http://www.abcde.com/image.gif”>
แต่ละส่วนหมายความว่า…
# IMG มาจากคำว่า image ซึ่งแปลว่า รูปภาพ เป็นการบอก Browser ว่าให้แสดงภาพที่จุดนี้
# SRC มาจากคำว่า source ซึ่งแปลว่า แหล่งหรือจุดกำเนิด ในที่นี้เป็นคุณสมบัติตัวหนึ่ง หรือเป็นคำสั่งที่อยู่ภายในคำสั่ง IMG เป็นตัวบอก Browser ว่าจะหาภาพได้จากที่ใด แล้วอย่างที่ผมบอกไป ว่าให้เก็บรูปภาพที่จะใช้ไว้ในที่เดียวกับที่คุณเก็บหน้าเว็บไว้ เพื่อที่จะเรียกรูปได้โดยใช้แต่ชื่อรูปอย่างเดียว ถ้าคุณเก็บรูปไว้ที่อื่น คุณต้องพิมพ์หรือ copy ที่อยู่เต็มของรูปภาพมาใส่เพิ่มแทน
# image.gif เป็นชื่อของรูปภาพ และให้สังเกตว่าอยู่ในรูปแบบที่เหมือนกับเอกสาร HTML ของคุณ ซึ่งประกอบด้วยชื่อ(image) ตามมาด้วยจุด และตามมาด้วยชื่อย่อแสดงชนิดไฟล์(gif)
ชนิดของไฟล์รูปภาพ
ส่วนใหญ่แล้วคุณจะพบรูปภาพสามชนิดนี้ในอินเตอร์เน็ต โดยแต่ละชนิดจะมีชื่อย่อลงท้ายแตกต่างกัน
.gif อันนี้อ่านออกเสียงว่า จิ้ฟ หรือ กิ๊ฟ ซึ่งแล้วแต่คนพูด แต่ผมชอบเรียก จิ้ฟ ซึ่งมาจากคำว่า Graphics Interchange Format เป็นรูปแบบที่ถูกสร้างขึ้นโดย Compuserve (เป็นชื่อบริษัทหรือองค์กรหนึ่งมั้งครับ) และได้รับความนิยมเป็นอย่างมาก เพราะว่าอยู่ในรูปแบบที่เรียบง่ายและความจุต่ำ เป็นการจัดเรียงกันของหลายๆเม็ดสี หรือเรียกว่า dots หรือ pixels ซึ่งเรียงต่อๆติดกันจนกลายเป็นรูปภาพ ภาพจากทีวีที่คุณเห็น ก็ถูกสร้างขึ้นในรูปแบบที่คล้ายๆกัน Browser สามารถแสดงผลภาพชนิดนี้ได้ง่ายดาย
.jpeg หรือ .jpg (ออกเสียงว่า เจเป็ก) เหตุที่มีสองชื่อ เพราะว่า PC ยอมให้มีสามตัวอักษรหลังจุด แต่ MAC ยอมให้มีสี่ตัวอักษรหลังจุด JPEG มาจากคำว่า Joint Photographic Experts Group รูปแบบนี้มีลักษณะเฉพาะตรงที่มีการบีบอัดข้อมูล หลังจากที่ถูกสร้างขึ้นมา ยกตัวอย่างเช่น ถ้าตอนแสดงภาพ ภาพนั้นมีความจุ 10 กิโลไบท์(KB) แต่จริงๆแล้วอาจมีความจุเพียง 4 KB ในขณะที่เก็บไว้ในคอมฯเฉยๆ แบบว่าเป็นเทคนิคของเขาน่ะครับ ทำให้ไม่เปลืองพื้นที่ในคอมฯ แต่ว่าต้องใช้หน่วยความจำเพิ่มขึ้นในตอนเปิดภาพ บางคนบอกผมว่าภาพแบบ .gif ก็ใช้การบีบอัดข้อมูลเช่นกัน ซึ่งก็ใช่ครับ แต่เป็นการบีบอัดมาตั้งแต่ตอนสร้างรูปแล้ว ซึ่งหลังจากนั้นจะไม่มีการบีบอัดอีก ซึ่งต่างจาก .jpeg ที่ใช้การบีบอัดทุกครั้งที่เปิดและปิดการใช้ภาพ
.bmp (ออกเสียงว่า bimp ..อ่านเองเถอะนะครับ) มาจากคำว่า “bitmap” คุณไม่ควรนำ bitmap มาแสดงเป็นรูปภาพ ถึงแม้ว่าตอนนี้ Internet Explorer จะยอมให้แสดงก็ตาม แต่ Browser อื่นๆจะแสดงไม่ได้ bitmap เป็นภาพที่คอมฯสร้างขึ้น และกำหนดการวางเอง
การสร้าง link ที่เป็นรูปภาพ
ในบทเรียนที่ 4 คุณรู้วิธีสร้าง link ที่เป็นข้อความแล้ว ซึ่งเป็นวิธีที่ทำให้เกิดตัวหนังสือสีน้ำเงิน เมื่อผู้ใช้คลิ๊ก จะนำผู้ใช้ไปยังหน้าที่เรากำหนด ต่อไปนี้เราจะทำให้รูปภาพสามารถคลิ๊กได้ และ link ไปยังหน้าอื่น
<A HREF=”http://www.programs4u.webs.com”>
<IMG SRC=”homepage.png” alt=”ไม่มีรูป”></A>
เห็นความแตกต่างมั้ยครับ ผมเปลี่ยนข้อความในบทที่ 4 ให้กลายเป็นการเรียกรูปภาพแทน ซึ่งผลที่ได้จะเป็นแบบข้างล่างครับ (แต่ผมไม่ได้เอารูปมาใส่ในเว็บนะครับ เลยเป็นอย่างที่เห็น) ลองลากเมาส์เข้าไปคุณก็จะทราบได้ว่าเป็น link เพราะมีที่อยู่ของเว็บขึ้นมาแถบด้านล่างของหน้าต่าง(เรียก status bar)
alt=”ไม่มีรูป” ที่เพิ่มเข้าไป หมายความว่าหากรูปไม่โหลดขึ้นมาแสดง ตัวหนังสือ “ไม่มีรูป” จะแสดงขึ้นมาแทน
กลับ_บทที่ 4 การสร้าง link กำลังอ่านบทที่ 5 รูปภาพ ไป_บทที่ 6 การปรับขนาดรูปภาพ
