More Related Content
Similar to Lernning 14 (20)
More from Mayuree Janpakwaen
More from Mayuree Janpakwaen (14)
Lernning 14
- 1. ใบความรู้ ที 14
เรือง การแทรกรู ปภาพ
รู ้จกกับชนิดของภาพกราฟิ กบนเว็บ
ั ตัวอย่างภาพ
ไฟล์ สกุล JPG (Joint Photographer's Experts Group)
เป็ นไฟล์หนึงทีนิยมใช้บน Internet มีความละเอียดสูง และใช้สีจานวนมาก
ํ
(สนับสนุนถึง 24 bit color) ไฟล์ชนิดนี:
ั
มักจะใช้กบภาพถ่ายทีนํามาสแกน และต้องการนําไปใช้บนอินเทอร์เน็ต เพราะให้ความ
คมชัดและความละเอียดของภาพสูง
• จุดเด่น
สนับสนุนสี ได้ถึง 24 bit
สามารถกําหนดค่าการบีบไฟล์ได้ตามทีต้องการ
มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Progressive
มีโปรแกรมสนับสนุนการสร้างจํานวนมาก
ั
เรี ยกดูได้กบ Graphics Browser ทุกตัว
ตั:งค่าการบีบไฟล์ได้ (compress files)
• จุดด้อย
ทําให้พ:ืนของรู ปโปร่ งใสไม่ได้
ไฟล์ สกุล GIF (Graphics Interlace File)
่
พัฒนาโดยบริ ษท CompuServe จัดเป็ นไฟล์ภาพสําหรับการเผยแพร่ ผานอินเทอร์เน็ต
ั
ตั:งแต่ยคแรก
ุ
• จุดเด่น สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า คอมพิวเตอร์
่
ทุกระบบ ไม่วาจะใช้ Windows, Unix ก็สามารถเรี ยกใช้ไฟล์ภาพสกุลนี:ได้
- มีขนาดไฟล์ตา จากเทคโนโลยีการบีบอัดภาพ ทําให้สามารถส่งไฟล์ภาพได้
ํ
รวดเร็ ว
- สามารถทําพื:นของภาพให้เป็ นพื:นแบบโปร่ งใสได้ (Transparent)
- มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace
- 2. - มีโปรแกรมสนับสนุนการสร้างจํานวนมาก
ั
- เรี ยกดูได้กบ Graphics Browser ทุกตัว
- ความสามารถด้านการนําเสนอแบบภาพเคลือนไหว (GIF Animation)
• จุดด้อย ไฟล์ชนิดนี:ก็มีจุดด้อยในเรื องของการแสดงสี ซึงแสดงได้เพียง 256 สี ทํา
ให้ การนําเสนอภาพถ่าย หรื อภาพทีต้องการความคมชัดหรื อภาพสดใส จะต้อง
อาศัยฟอร์แมตอืน
ไฟล์ สกุล PNG (Portable Network Graphics)
ไฟล์สกุลล่าสุดทีนําจุดเด่นของไฟล์ GIF และ JPEG มาพัฒนาร่ วมกัน ทําให้ภาพใน
สกุลนี:แสดงผลสี ได้มากกว่า 256 สี และยังสามารถทําพื:นภาพให้โปร่ งใสได้ จึงเป็ นไฟล์
ภาพทีได้รับความนิยมมากในปั จจุบนด้วยอีกสกุลหนึง คุณสมบัติของภาพคือ
ั
1. สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า ระบบคอมพิวเตอร์ทุก
่
ระบบ ไม่วาจะใช้
2. Windows, Unix ก็สามารถเรี ยกใช้ไฟล์ภาพสกุลนี:ได้
3. ขนาดไฟล์เล็ก ด้วยเทคนิคการบีบอัดคงสัญญาณ LZW
4. สามารถทําภาพโปร่ งใสจากสี พ:น 256 ระดับ
ื
5. แสดงภาพแบบสอดประสานเช่นเดียวกับ GIF โดยมีความคมชัดทีดีกว่า
6. มีคุณสมบัติ Gamma ทําให้ภาพสามารถปรับตัวเองได้ตามจอภาพ และปรับระดับ
ความสว่างทีแท้จริ งตามทีควรจะเป็ น
• จุดเด่น
สนับสนุนสี ได้ถึงตามค่า True color (16 bit, 32 bit หรื อ 64 bit)
สามารถกําหนดค่าการบีบไฟล์ได้ตามทีต้องการ
มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด (Interlace)
สามารถทําพื:นโปร่ งใสได้
• จุดด้อย
หากกําหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์สูงตามไปด้วย แต่
ขนาดของไฟล์จะมีขนาดตํา
ไม่สนับสนุนกับ Graphic Browser รุ่ นเก่า สนับสนุนเฉพาะ IE 4 และ Netscape 4
่ ั
ความละเอียดของภาพและจํานวนสี ข: ึนอยูกบ Video Card
โปรแกรมสนับสนุนในการสร้างมีนอย ้
- 3. เป็ นการนําเอารูปภาพมาแสดงบนเว็บเพจ โดยใช้ คาสัง IMG (Image) กําหนดในคําสัง <BODY> ก่อนทีจะเรี ยกรูปภาพ
ํ
ควรนําไฟล์รูปภาพมาเก็บไว้ ใน โฟลเดอร์ เดียวกับข้ อมูล เพือความสะดวกในการเรี ยกรูปภาพ ไม่ต้องระบุโฟลเดอร์ ของ
รูปภาพว่าอยูทีไหน หากระบุผิดทําให้ รูปภาพไม่ขึ .นบนเว็บเพจ หรื อรูปภาพเป็ นรูป เครื องหมายกากบาท (X )
่
รู ปแบบ
<IMG SRC = "DRIVE:PATH ชือไฟล์รูปภาพ.สกุล">
เช่ น
<IMG SRC = "ANII15.GIF">
ถ้ารู ปภาพอยูในโฟลเดอร์เดียวกับไฟล์ HTML ไม่ตองระบุไดรฟ์ และโฟลเดอร์ทีรู ปภาพอยู่ ให้ระบุชือไฟล์
่ ้
รู ปภาพกับสกุลเท่านั:น
ตัวอย่ าง การแทรกภาพชือ girl1.gif ซึงอยูในโฟล์เดอร์ เดียวกัน
่
<html>
<body>
่
<center><h3>การแทรกภาพทีอยูในโฟล์เดอร์เดียวกัน </h3>
<img src= "girl1.gif">
</center>
</body>
</html>
- 4. ผลจากตัวอย่ าง
การแทรกภาพทีอยู่ในโฟล์ เดอร์ เดียวกัน
ตัวอย่ าง การแทรกภาพชือ girl2.gif ซึงอยูในโฟล์เดอร์ ยอยชือ pic6
่ ่
<html>
<body>
<center><h3>การแทรกภาพทีอยูในโฟล์เดอร์ </h3>
่
<img src= "pic6/girl1.gif">
</center>
</body>
</html>
ผลจากตัวอย่ าง
การแทรกภาพทีอยู่ในโฟล์ เดอร์
จากตัวอย่างจะเห็นได้ วาถ้ ารูปภาพอยูในโฟล์เดอร์ จะต้ องระบุชือโฟล์เดอร์ ด้ วย เช่น รูปภาพอยูในโฟล์
่ ่ ่
เดอร์ pic6 เราจึงแทรกภาพด้ วยคําสัง
<img src= "pic6/girl1.gif">
- 5. เป็ น การกําหนดขนาดของรู ปภาพ การจัดตําแหน่งรู ปภาพกับข้อความและการแสดงข้อความ
คําอธิบายของรู ปภาพหากรู ปภาพ นั:นไม่ชดเจน
ั
ซึงหัวข้อที เราจะควรทราบเกียวกับการตกแต่งภาพ มีดงนี:
ั
1. การกําหนดขนาดของรู ปภาพ
2. การจัดตําแหน่งของข้อความกับรู ปภาพ
3. การกําหนดเส้นขอบรู ปภาพ
4. การปรับระยะห่างรู ปภาพกับข้อความ
1. การกําหนดขนาดของรู ปภาพ
เป็ นการกําหนดความกว้าง (WIDTH) และความสูง (HEIGHT) ของรู ปภาพในคําสัง <IMG> การกําหนดขนาด
ํ
ด้านใดด้านหนึงของรู ปภาพ ด้านทีไม่ได้กาหนดจะเพิมขึ:นหรื อลดลงเป็ นสัดส่วนของด้านทีกําหนด มีหน่วยเป็ นเปอร์เช็นต์
หรื อพิกเซลก็ได้ หากกําหนดรู ปภาพมีขนาดใหญ่เกินไป ทําให้รูปภาพมีความระเอียดตําและดูไม่ชดเจนได้
ั
รู ปแบบ
<IMG SRC = "ชือรู ปภาพ" WIDTH = "ความกว้าง" HEIGHT = " ความสูง">
เช่ น
<IMG SRC = "ANII15.GIF" WIDTH = "35%" HEIGHT = "180%"> กรณี ระบุเป็ นเปอร์เซนต์
<IMG SRC = "ANII15.GIF" WIDTH = "350" HEIGHT = "400"> กรณี ระบุเป็ นพิกเซล
- 6. ํ
การแทรกภาพโดยไม่กาหนด Width และ Height จะได้ภาพเท่ากับต้นฉบับ
การแทรกภาพโดยกําหนด Width และ Height
2. การจัดตําแหน่ งของข้ อความกับรู ปภาพ
เมือกําหนดขนาดของรู ปภาพแล้วต้องงการวาง ตําแหน่งรู ปภาพกับข้อความว่าต้องการให้รูปภาพอยู่ ณ ตําแหน่ง
ไหนของข้อความ หากไม่กาหนดขอบด้านล่าง ของรู ปภาพกับข้อความว่าต้องการให้รูปภาพอยู่ ณ ตําแหน่งไหนของ
ํ
ํ ่
ข้อความ หากไม่กาหนดขอบด้านล่างของรู ปภาพจะอยูระดับเดียวกับบรรทัดแรกของข้อความ ในการกําหนดตําแหน่งของ
ํ
รู ปภาพใช้คาสัง ALIGN ปกติทีไม่ได้กาหนดจะเป็ น BOTTOM
ํ
รู ปแบบ
<IMG ALIGN = " ตําแหน่งทีต้องการ">
เช่ น
<IMG ALIGN = " TOP">
- 7. ตารางแสดงตําแหน่ งของรู ปภาพ
คําสัง ความหมาย
BOTTOM ่
ขอบด้านล่างรู ปภาพอยูบรรทัดแรก
TOP ่
ขอบด้านบนรู ปภาพอยูบรรทัดแรก
RIGHT ่ ้
รู ปภาพอยูดานซ้ายมือของข้อความ
LEFT ่ ้
รู ปภาพอยูดานขวามือของข้อความ
MIDDLE รู ปภาพอยูกึงกลางของข้อความ ณ ตําแหน่ง <IMG>
่
ตัวอย่ าง
ํ
กรณี กาหนด ALIGN เป็ น TOP ผลลัพธ◌์
<html>
<body>
<img src= "601.gif" align="top"> ภาพ gif เป็ นภาพนิยม
ภาพ gif เป็ นภาพนิยมนํามาใช้ในการแสดง นํามาใช้ในการแสดงบนเว็บเพจ เพราะเป็ น
บนเว็บเพจ เพราะเป็ นภาพทีมีความละเอียด ภาพทีมีความละเอียด 256 สี มีขนาดเล็ก และ
256 สี มีขนาดเล็ก และ เป็ นภาพทีสามารถ เป็ นภาพทีสามารถแสดงผลเคลือนไหว
แสดงผลเคลือนไหวต่อเนืองกันได้ ต่อเนืองกันได้
</body>
</html>
ํ
กรณี กาหนด ALIGN เป็ น LEFT ผลลัพธ◌์
<html> ภาพ gif เป็ นภาพนิยม
<body> นํามาใช้ในการแสดง
<img src= "601.gif" align="left">
บนเว็บเพจ เพราะเป็ น
ภาพ gif เป็ นภาพนิ ยมนํามาใช้ในการแสดงบนเว็บ
เพจ เพราะเป็ นภาพทีมีความละเอียด 256 สี มีขนาด
ภาพทีมีความละเอียด
เล็ก และ เป็ นภาพทีสามารถแสดงผลเคลือนไหว 256 สี มีขนาดเล็ก และ
ต่อเนื องกันได้ เป็ นภาพทีสามารถแสดงผลเคลือนไหว
</body> ต่อเนืองกันได้
</html>
- 8. 3. การกําหนดเส้นขอบรู ปภาพ
ํ
รู ปภาพทีแสดงบนเบราเซอร์จะไม่มีเส้นขอบ ล้อมรู ปภาพ หากต้องการให้มีเส้นขอบให้กาหนดด้วยคําสัง
BORDER มีหน่วยเป็ นพิกเซล
รู ปแบบ
<IMG BORDER ="ขนาดของเส้นขอบ">
เช่ น
<IMG BORDER = "2">
ตัวอย่ าง
คําสัง ผลลัพธ์
<html>
<body>
<img src="601.gif" border=3>
</body>
</html>
4. การปรับระยะห่างรู ปภาพกับข้อความ
การกําหนดระยะห่างของรู ปภาพกับข้อความในเว็บ เพจ สามารถปรับได้ท: งแนวตั:งและแนวนอน โดยการใช้คาสัง
ั ํ
VSPACE กําหนดระยะห่างแนวตั:งด้านบน ด้านล่างของรู ปภาพ และคําสัง HSPACE กําหนดระยะห่างแนวนอนด้านซ้าย
ด้ายขวาของรู ปภาพ มีหน่วยเป็ นพิกเซล
รู ปแบบ
<IMG VSPACE = "ระยะห่างแนวตั:ง" HSPACE = "ระยะห่างแนวนอน">
เช่ น
- 9. <IMG VSPACE = "10" HSPACE = "15"> เป็ นการกําหนดให้ขอความอยูห่างจากรู ปภาพในแนวนอน
้ ่
(ด้านซ้าย - ขวา) 15 พิกเซล และอยูห่างจากภาพแนวตั:ง (ด้านบน - ล่าง) 10 พิกเซล
่
ตัวอย่ าง
คําสัง ผลลัพธ์
<html> ภาพ gif เป็ นภาพนิยมนํามาใช้ใน
<body> การแสดงบนเว็บเพจ เพราะเป็ นภาพ
<img src= "601.gif" align="left" hspace="15" ทีมีความละเอียด 256 สี มีขนาดเล็ก
vspace="10" > และ เป็ นภาพทีสามารถแสดงผล
ภาพ gif เป็ นภาพนิยมนํามาใช้ในการแสดงบนเว็บเพจ เคลือนไหวต่อเนืองกันได้
เพราะเป็ นภาพทีมีความละเอียด 256 สี มีขนาดเล็ก และ
เป็ นภาพทีสามารถแสดงผลเคลือนไหวต่อเนืองกันได้
</body>
</html>
ข้อความจะอยูห่างจากภาพในแนวนอน (ด้านซ้าย - ขวา) 15 พิกเซล
่
การกําหนดรู ปภาพในตาราง ใช้คาสัง <IMG SRC> เหมือนกับการแทรกรู ปภาพในข้อความ โดยกําหนดไว้ใน
ํ
<TD>
ตัวอย่ าง
<html>
<head>
<title>การแทรกรู ปภาพในตาราง</title>
</head>
<body>
<table border=1>
<tr> <td> <img src="dog.gif"> </td >
<td> สุ นขเป็ นสัตว์เลี:ยงแสนรู้ สามารถนํามาฝึ กหัดได้ </td>
ั
</tr>
</table>
</body>
</html>
- 10. ผลลัพธ์ ทได้ จากตัวอย่ าง
ี
สุนขเป็ นสัตว์เลี:ยงแสนรู ้
ั
สามารถนํามาฝึ กหัดได้
การกําหนดพื:นหลังของเว็บเพ จเป็ นรู ปภาพ ด้วยคําสัง BACKGROUND ถูกกําหนดไว้ในคําสัง BODY หาก
กําหนดรู ปภาพพื:นหลังในตาราง จะกําหนดไว้ ในคําสัง TABLE
1. การกําหนดพืนหลังทัJงเว็บเพจ
J
ในการกําหนดรู ปภาพเป็ นพื:นหลัง ทั:งเว็บเพจ โดยทีรู ปทีนํามาเป็ นพื:นหลังเป็ นประเภท Gif หรื อ Jpeg
รู ปภาพทีใช้เป็ นพื:นหลังมีขนาดเล็กหรื อใหญ่
บนเบราเซอร์จะนํารู ปภาพมาเรี ยงต่อกันจนเต็มหน้าจอ
รู ปแบบ
<BODY BACKGROUND = " ชือไฟล์รูปภาพ.สกุล">
เช่ น
<BODY BACKGROUND = "g1.jpg">
ตัวอย่ าง
<html>
<head>
<title>การกําหนดรูปภาพเป็ นพื .นหลัง</title>
</head>
<body background="g1.jpg">
<center> <h4> Hello
Hello HTML
HTML</h4></center>
</body>
</html>
- 11. 2. การกําหนดพืนหลังในตาราง
J
ในตารางการกําหนดพื:นหลังเป็ นรู ปภาพทั:งตาราง จะกําหนดด้วยคําสัง BACKGROUND ในคําสัง TABLE
รู ปแบบ
<TABLE BACKGROUND ="ชือไฟล์รูปภาพ.สกุล">
เช่ น
<TABLE BACKGROUND = "g1.jpg">
ตัวอย่ าง
<html>
<head>
<title>การกําหนดรู ปภาพเป็ นพื .นหลังตาราง</title>
</head>
<body>
<table background="g1.html" border=1 >
<tr> <td> ลําดับที</td > <td>
รายการ </td></tr>
<tr> <td> 1 </td > <td> ซื .ออาหาร
</td></tr>
</table>
</body>
</html>
ลําดับ รายการ
1 ซื .ออาหาร
