Web Builder : Basic HTML : การใส่รูปภาพลงในเว็บเพจ

การใส่รูปภาพ

รูปแบบของรูปภาพ

X Bitmap (XBM)
เป็นไฟล์รูปภาพชนิดบิตแมป (Bitmap) เป็นรูปแบบมาตราฐานสำหรับใช้แสดงผลบน X Window ของ UNIX แต่ไม่นิยมนำมาใช้งานกับ เว็บเบราเซอร์ที่ทำงานบน Windows 95 หรือ Windows 3.11
คำว่า Bitmap นั้นเป็นเทคนิคการเก็บภาพ โดยให้จุดสี (pixel) ต่างๆวางเรียงต่อกันจนเกิดเป็นรูปภาพ ภาพเกือบทั้งหมดมักเป็น ภาพชนิดนี้ เพราะจัดเก็บง่าย แต่ก็มีข้อเสียคือ ขนาดของภาพจะมีขนาดใหญ่ และถ้าหากนำมาขยาย ภาพจะสูญเสียรายละเอียด ทำให้ภาพที่ปรากฏเป็นจุดสีมากมาย เช่นภาพที่เป็นเส้นตรงเอียง จะเห็น รอยหยาบได้อย่างชัดเจน จะเห็นได้ว่า เส้นตรงจะเห็นเป็นขั้นบรรไดได้อย่างชัดเจน ทำให้ไฟล์ชนิดนี้ ไม่นิยมนำมาใช้ในการทำ homepage
TIFF (TIF)
ไฟล์รูปภาพแบบ TIFF ย่อมาจากคำว่า Tag Image file Format เป็นไฟล์ชนิดบิตแมปที่ใช้ได้กับระบบปฏิบัติการหลายชนิด สามารถจัดเก็บภาพสี ขาวดำ และ grayscale โดยสนับสนุนรายละเอียดของภาพสีได้สูงถึง 48 บิต นอกจากนี้ยัง ผ่านการบีบย่อข้อมูลได้ที่อัตราส่วน 8:1 หรือ 10:1 ได้ นิยมใช้กันในโปรแกรม Aldus Pagemaker เนื่องจากภาพส่วนใหญ่จะเป็นภาพที่เกิดจากการสแกน ทังสองไฟล์นี้ ไม่ค่อยมีใครใช้กันพบ Website นานๆจึงจะเจอซักที
GIF
ไฟล์รูปภาพแบบ GIF ย่อมาจากคำว่า Graphics Interchange Format เป็นไฟล์ชนิดบิตแมป ถูกพัฒนาขึ้นโดย CompuServe ไฟล์ GIF นี้ ส่วนใหญ่นิยมใช้กับภาพถ่าย การ์ตูน ที่ไม่มีรายละเอียดมากนัก เมื่อก่อนจะใช้แสดงผลในแบบภาพนิ่ง แต่ในปัจจุบันได้มีโปรแกรมที่ทำการรวมภาพ GIF หลายๆภาพเข้ามารวมกันเป็นไฟล์เดียวกัน เมื่อนำภาพนั้นมาแสดงผลจะเกิดเป็นภาพเคลือนไหว ซึ่งเราเรียกว่า animation
ข้อจำกัดของ GIF ก็คือ สามารถแสดงผลได้สูงสุดเพียง 256 สีเท่านั้น นอกจากนี้ยังมีขนาดใหญ่อีกด้วย
JPEG (JPG)
ไฟล์รูปภาพประเภท JPEG หรือ JPG ย่อมาจากคำว่า Joint Photographic Experts Group เป็นไฟล์ที่ผ่านกระบวนการบีบย่อข้อมูลมาก่อน และ นำส่วนที่ไม่สำคัญออก แล้วก็ทำการบีบย่อข้อมูลในอัตรา 10:1 ขนาดของไฟล์ภาพชนิดนี้จึงมี ขนาดเล็ก ในการบีบย่อข้อมูลนั้นมีได้ 3 ระดับ คือ High, Middle, Low Compression ข้อดีอีกข้อของไฟล์ประเภทนี้คือ สามารถแสดงผล ได้ถึง 16.7 ล้านสี ภาพที่แสดงมีความคมชัดสูง จึงนิยมใช้กันมากที่สุด

การแสดงรูปภาพ <IMG SRC="ชื่อรูปภาพ">

ในการใส่รูปภาพเพื่อแสดงผลนั้น เราใช้คำสั่ง <IMG SRC="รูปภาพ"> เป็นตัวกำหนดรูปภาพที่ต้องการ ไฟล์ที่ใช้ควรเป็นชนิด JPEG หรือ GIF เพราะโปรแกรม Web Browser ส่วนใหญ่จะสนับสนุนไฟล์ 2 ชนิดนี้

ตัวอย่าง

Source View

<html>
<head><title> </title></head>
<body bgcolor=black text="#00FFFF">
<img src="picture.jpg">หากคุณเป็นชายคนนี้ คุณจะทำอย่างนี้ เพื่อคนที่คุณรักไหม?
</body>
</html>
หากคุณเป็นชายคนนี้ คุณจะทำอย่างนี้ เพื่อคนที่คุณรักไหม?

การใส่ข้อความ <IMG SRC="ชื่อรูปภาพ" ALT="ข้อความ"> ทำหน้าที่เพื่ออธิบายความหมายของรูปภาพ และใช้สำหรับผู้ใช้ Internet แบบเท็กซ์ (ซึ่งจะเห็นแต่ตัวอักษรอย่างเดียว) สามารถรู้ได้ว่า รูปนี้คืออะไร มีความหมายอย่างไร ทำได้โดยการเพิ่มแอตทริบิวต์ ALT="ข้อความ" ต่อจาก SRC="ชื่อไฟล์รูปภาพ" แอตทริบิวต์นี้จะเป็นตัวกำหนดคำอธิบายของรูปภาพที่นำมาแสดงผล เ นอกจากนี้ หากเอาMouseไปทับบนรูปไว้บราวเซอร์จะแสดงคำอธิบายขึ้นมา

ตัวอย่าง

Source View

<html>
<head><title> </title></head>
<body bgcolor=black text="#00FFFF" >
<img src="picture.jpg" ALT="สัญญากับฉันซิ ว่าเธอจะไม่หมดหวัง">หากคุณเป็นชายคนนี้ คุณจะทำอย่างนี้ เพื่อคนที่คุณรักไหม?
</body>
</html>
หากคุณเป็นชายคนนี้ คุณจะทำอย่างนี้ เพื่อคนที่คุณรักไหม?

การวางตำแหน่งรูปภาพ ALIGN=ตำแหน่ง

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

ตัวอย่าง

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

สำหรับการกำหนดตำแหน่งให้รูปภาพนั้น เราสามารถ แบ่งการแสดงผลได้ 2 แบบ ดังนี้

แบบแนวนอน
ประกอบไปด้วยตำแหน่ง ซ้าย และ ขวา
แบบแนวตั้ง
ประกอบไปด้วยตำแหน่งต่างๆ 3 ระดับ ดังนี้
1. เสมอบน มี 2 คำสั่งคือ top และ texttop
2. กิ่งกลาง มี 2 คำสั่งคือ midle และ absmiddle
3. เสมอล่าง มี 3 คำสั่งคือ baseline,bottom,absbottom

Source

<html>

align=left

align=right

align=top

align=texttop

align=middle

align=absmiddle

align=baseline

align=bottom

align=absbottom

</body>

</html>

View

align=left

align=right

align=top

align=texttop

align=middle

align=absmiddle

align=baseline

align=bottom

align=absbottom

NOTE & TIP !!

สำหรับการกำหนดตำแหน่งรูปภาพให้ อยู่ตรงกลางนั้นให้ใช้คำสั่ง <center> ... </center>เนื่องจาก แอตทริบิวต์ ALIGN นั้น ไม่สามารถกำหนดรูปให้อยู่ตรงกลางได้ เช่น
<Center>
<img src="picture.jpg">
</Center>

การกำหนดขนาดความกว้างและความสูงของรูป (Width และ Height)

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

Source View

<html>
<head><title> </title></head>
<body bgcolor=black text="#00FFFF">
<img src="picture.jpg" width=100 height=100> 
รูปต้นฉบับ 
<img src="picture.jpg" width=100 height=100> 
width=100 height=100 
<img src="picture.jpg" width=100 height=250> 
width=100 height=250 
<img src="picture.jpg" width=50 height=100> 
width=50 height=100 
</body>
</html>

รูปต้นฉบับ

width=100 height=100

width=100 height=250

width=50 height=100

การใส่กรอบให้รูปภาพ Border=n

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

ตัวอย่าง

Source View

<html>
<head><title> </title></head>
<body bgcolor=black text="#00FFFF">

<img src="picture.jpg" border=1> 
<img src="picture.jpg" border=5> 

</body>
</html>

NOTE & TIP !!
หากต้องการเปลี่ยนสีของกรอบรูปภาพ เราสามารถทำได้โดยการกำหนดสีของตัวอักษรก่อนจะใส่รูปภาพเช่น

<img src="picture.jpg">
จากตัวอย่าง เราจะได้กรอบที่มีสีแดง
ดูตารางสีเพิ่มเติม

Source	View
<html> <head><title> </title></head> <body bgcolor=black text="#00FFFF"> <img src="picture.jpg">หากคุณเป็นชายคนนี้ คุณจะทำอย่างนี้ เพื่อคนที่คุณรักไหม? </body> </html>	หากคุณเป็นชายคนนี้ คุณจะทำอย่างนี้ เพื่อคนที่คุณรักไหม?