หน่วยที่ 4

การแทรกรูปภาพและมัลติมีเดีย

ผลการเรียนรู้

เขียนเว็บเพจแทรกรูปภาพ กำหนดขนาดตกแต่งรูปภาพและสร้างมัลติมีเดียบนเว็บได้

จุดประสงค์

- อธิบายคำสั่งการแทรกรูปภาพและกำหนดขนาดตกแต่งภาพรูปภาพได้

- เขียนเว็บเพจแทรกรูปภาพและกำหนดขนาดตกแต่งรูปภาพได้

- อธิบายคำสั่งและวิธีการสร้างมัลติมีเดียบนเว็บเพจได้

- ปฏิบัติการสร้างมัลติมีเดียบนเว็บเพจได้

การแทรกภาพประกอบเว็บเพจ

เทคนิคและวิธีการแทรกรูปภาพให้ปรากฏบนหน้าเว็บเพจ เป็นที่นิยมกันมากสำหรับผู้เขียนเว็บเพจ เนื่องจากรูปภาพเป็นสิ่งที่จำเป็นมากที่จะทำให้เว็บเพจที่มีเฉพาะตัวอักษรไม่น่าสนใจ กลับมาดึงดูดความสนใจจากผู้เข้าชมเว็บเพจของเรามากขึ้น นอกจากการแทรกรูปภาพที่มีสีสันสวยงามแล้ว ยังสามารถนำภาพที่มีการเคลื่อนไหวมาแทรกในเว็บได้อีกด้วย สำหรับรูปภาพที่นำมาประกอบในเว็บเพจควรมีขนาดไฟล์ไม่เกิน 40 – 50 KB เพื่อการแสดงภาพได้เร็วขึ้น รูปภาพที่นิยมนำมาประกอบในเว็บเพจ ได้แก่ ภาพที่มีนามสกุล *.gif, *.jpg และ *.png

1. GIF (graphic Interchange Format) รูปภาพชนิด gif เป็นรูปภาพที่นิยมนำมาประกอบบนเว็บเพจมากที่สุดเนื่องจากเป็นไฟล์ที่มีขนาดเล็ก เนื่องจากผ่านการบีบอัดมาแล้วทำให้ประหยัดเนื้อที่ และมีความละเอียดสูงสุด 256 สี ส่วนใหญ่จะเป็นรูปการ์ตูน รูปโลโก้ต่าง ๆ

GIF Animation คือ รูปภาพที่เคลื่อนไหวได้โดยวิธีการเก็บรูปภาพจำนวนหนึ่งที่มีการกระทำต่อเนื่องกันเป็นขั้นตอนไว้ในภาพเดียวกัน (เรียกว่า 1 ไฟล์ มีหลายเฟรม) โดยกำหนดเวลาให้หมุนเวียนกันแสดงและแสดงในลักษณะวนซ้ำ จึงทำให้ภาพมีลักษณะเคลื่อนไหวได้ ซึ่งนิยมนำมาประกอบบนเว็บเพจเช่นกัน

2. JPG, JPEG (Joint Photographic Expert Group) เป็นรูปภาพที่มีการบีบอัดเช่นกัน ทำให้ไฟล์มีขนาดเล็ก และมีความละเอียดของภาพสูง แสดงสีได้ถึง 16.7 ล้านสี (24 บิต) และมีความคมชัดมาก ส่วนใหญ่จะเป็นภาพถ่าย ภาพวิว

3. PNG (Portable Network Graphics) เป็นไฟล์ที่พัฒนามาแทนไฟล์ GIF แต่ยังไม่นิยมนำมาใช้ในเว็บเพจมากนักเนื่องจากโปรแกรมบราวเซอร์รุ่นเก่าไม่สามารถแสดงได้ ข้อดีของไฟล์นี้คือสามารถแสดงสีได้มากถึง 16.7 ล้านสี ไฟล์มีขนาดเล็ก

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

1. การแทรกภาพบนเว็บเพจ

การแทรกภาพให้ปรากฏบนเว็บเพจนั้นทำได้ด้วยแท็ก <IMG> มีรูปแบบการใช้งานดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก IMG

รูปแบบ <img src=ชื่อไฟล์รูปภาพ></img>

ตัวอย่าง <img src=boy.gif></img>

การนำไปใช้

การแสดงรูปภาพบนเว็บเพจ สามารถทำได้ดังนี้

<body>

</body>

2. การกำหนดขนาดภาพ

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

รูปแบบการใช้งาน

แอตทริบิวต์ WIDTH, HEIGHT

รูปแบบ <img src=ชื่อไฟล์ภาพ width =เปอร์เซ็นต์หรือพิกเซล

height =เปอร์เซ็นต์หรือพิกเซล></img>

ตัวอย่าง <img src=ani18.gif width=95% height=150></img>

การนำไปใช้

การกำหนดขนาดของรูปภาพบนเว็บเพจ สามารถทำได้ดังนี้

<body>

</body>

3. การจัดตำแหน่งของรูปภาพ

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

TOP วางข้อความบนรูปภาพ

MIDDLE วางข้อความกลางรูปภาพ

BOTTOM วางข้อความไว้ล่างรูปภาพ

LEFT วางรูปภาพไว้ด้านซ้ายของข้อความ

RIGHT วางรูปภาพไว้ด้านขวาของข้อความ

รูปแบบการใช้งาน

แอตทริบิวต์ ALIGN

รูปแบบ <img src=ชื่อไฟล์ภาพ align= top หรือ middel หรือ bottom หรือ left หรือ right> </img>

ตัวอย่าง <img src=ani18.gif align=left></img>

การนำไปใช้

การจัดตำแหน่งข้อความกับรูปภาพบนเว็บเพจ สามารถทำได้ดังนี้

<body>

<img src=ani18.gif align=left></img> ข้อความที่ต้องการแสดงไว้ด้านขวาของรูปภาพ

</body>

หรือ

<body>

<img src=ani18.gif align=right></img> ข้อความที่ต้องการแสดงไว้ด้านซ้ายของรูปภาพ

</body>

4. การปรับระยะห่างระหว่างรูปภาพกับข้อความ

หลังจากที่สามารถจัดข้อความกับรูปภาพให้แสดงบนหน้าเว็บเพจด้วยกันอย่างสวยงามแล้ว เรายังสามารถเพิ่มความสมบูรณ์ให้ข้อความกับรูปภาพได้อีกด้วยการใช้แอตทริบิวต์ VSPACE, HSPACE ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ VSPACE, HSPACE

รูปแบบ <img src=ชื่อไฟล์ภาพ align=middle vspace=10 hspace=20></img>

ตัวอย่าง <img src=ani18.gif align=middle vspace=10 hspace=20></img>

การนำไปใช้

การจัดระยะห่างของข้อความและรูปภาพบนเว็บเพจ สามารถทำได้ดังนี้

<body>

ข้อความที่แสดงก่อนการจัดข้อความและรูปภาพ

ข้อความที่ต้องการแสดงหลังการจัดข้อความและรูปภาพ

</body>

5. กำหนดเส้นขอบของรูปภาพ

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

รูปแบบการใช้งาน

แอตทริบิวต์ BORDER

รูปแบบ <img src=ชื่อไฟล์ภาพ border=ขนาดเป็นพิกเซล></img>

ตัวอย่าง <img src=ani18.gif align=bottom border=7></img>

การนำไปใช้

การแสดงเส้นขอบล้อมรอบรูปภาพบนเว็บเพจ สามารถทำได้ดังนี้

<body>

ข้อความที่แสดงก่อนการจัดข้อความและรูปภาพ

ข้อความที่ต้องการแสดงหลังการจัดข้อความและรูปภาพ

</body>

6. การแสดงข้อความแทนรูปภาพเมื่อภาพไม่ปรากฏ

การแสดงรูปภาพบนหน้าเว็บเพจ บางครั้งก็ไม่สามารถแสดงได้ด้วยเหตุผลของบราวเซอร์บางตัวหรือด้วยเหตุผลใด ๆ ก็ตาม เว็บเพจจะปรากฏรูปหรือสัญลักษณ์ขึ้นมาแทนรูปภาพ นั้น ๆ แล้วเรายังสามารถเพิ่มข้อความเข้าไปแทนรูปภาพได้อีกด้วยการใช้แอตทริบิวต์ ALT ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ ALT

รูปแบบ <img src=ชื่อไฟล์ภาพ alt=ข้อความที่ต้องการแสดงแทนภาพ></img>

ตัวอย่าง <img src=ani18.gif align=bottom alt=รูปแมววิ่ง></img>

การนำไปใช้

การแสดงข้อความแทนรูปภาพบนเว็บเพจ สามารถทำได้ดังนี้

<body>

</body>

7. การนำรูปภาพแสดงเป็นลำดับรายการ

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

การนำไปใช้

การแสดงรูปภาพเป็นลำดับรายการ สามารถทำได้ดังนี้

<body>

<ul type=dics><b>เลือกเรื่องที่ต้องการศึกษา</b>

<img src=ani18.gif>การจัดตัวอักษรและข้อความ

<img src=ani18.gif>การกำหนดขนาดตัวอักษรและสีตัวอักษรอ

<img src=ani18.gif>การแสดงลำดับรายการและตัวอักษรพิเศษ

<img src=ani18.gif>การจัดการรูปภาพบนเว็บเพจ

<img src=ani18.gif>การสร้างตาราง

</ul>

</body>

การแทรกมัลติมีเดีย

ถ้าเว็บเพจนำเสนอได้เฉพาะตัวอักษรและรูปภาพเท่านั้น คงทำให้เว็บเพจไม่น่าสนใจหรือได้รับความนิยมมากเท่าทุกวันนี้ แต่เพราะเราสามารถนำเสนอข้อมูลในรูปแบบที่หลากหลาย จึงทำให้เว็บเพจเป็นที่นิยมอย่างมาก ข้อมูลนั้นคือ ข้อความ รูปภาพ ภาพเคลื่อนไหว เสียง วิดีโอ Flash Java Applets และ ActiveX Controls ซึ่งวิธีเพิ่มสิ่งต่าง ๆ เหล่านี้เราจะได้ศึกษาต่อไป

1. การเล่นเสียงแบ็คกราวน์

การเล่นเสียงในเว็บเพจมีอยู่ 2 วิธีคือ การนำไฟล์เสียงมาเล่นเป็นเสียงแบ็คกราวน์และการนำไฟล์เสียงแทรกเข้าไปในเว็บเพจซึ่งจะทำให้ปรากฏชุดควบคุมการเล่นไฟล์เสียงขึ้นมาบนเว็บเพจ การกำหนดเสียงแบ็คกราวน์ใช้ <BGSOUND> ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก BGSOUND

แอตทริบิวต์ SRC, LOOP

รูปแบบ <bgsound src = ชื่อไฟล์เสียง loop = จำนวนครั้งที่เล่นซ้ำ>

ตัวอย่าง <bgsound src=lucky.mid loop=2>

การนำไปใช้

การกำหนดไฟล์เสียงแบ็คกราวน์ สามารถทำได้ดังนี้

<body>

</body>

หมายเหตุ ไฟล์เสียงที่สามารถนำมาเป็นเสียงแบ็คกราวน์ได้คือ ไฟล์เสียงที่มีนามสกุล *.mid, *.wav, *.au

2. การแทรกไฟล์เสียงที่ควบคุมการเล่น

นอกจากการนำไฟล์เสียงมาเป็นแบ็คกราวน์ได้แล้ว เรายังสามารถเพิ่มแถบควบคุม การเล่นเสียงในหน้าเว็บเพจได้ด้วยแท็ก <EMBED> ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก EMBED

แอตทริบิวต์ SRC

รูปแบบ <embed src=ชื่อไฟล์เสียง></embed>

ตัวอย่าง <embed src=lucky.mid></embed>

การนำไปใช้

การกำหนดให้สามารถควบคุมการเล่นไฟล์เสียงได้ สามารถทำได้ดังนี้

<body>

</body>

3. การควบคุมให้เล่นไฟล์เสียงซ้ำและเริ่มเล่นเมื่อผู้ใช้ต้องการ

ถ้าต้องการให้มีการเล่นไฟล์เสียงซ้ำและไม่ต้องการให้ไฟล์เสียงเริ่มเล่นโดยอัตโนมัติ ให้เราควบคุมการทำงาน ด้วยแอตทริบิวต์ LOOP และ AUTOPLAY ของ <EMBED> ดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ LOOP, AUTOPLAY

รูปแบบ <embed src=ชื่อไฟล์เสียง loop=true autoplay=false></embed>

ตัวอย่าง <embed src=lucky.mid loop=true autoplay=false> </embed>

การนำไปใช้

การกำหนดให้สามารถควบคุมการเล่นไฟล์เสียงได้ สามารถทำได้ดังนี้

<body>

</body>

4. การเล่นไฟล์วิดีโอบนเว็บเพจ

การเล่นไฟล์วิดีโอและไฟล์ภาพยนตร์บนเว็บเพจ ยังสามารถใช้แท็ก <EMBED> ได้เหมือนกับการเล่นไฟล์เสียง เพียงเปลี่ยนค่าของแอตทริบิวต์ SRC มาเป็นไฟล์วิดีโอ (*.avi) ดังนี้

การนำไปใช้

<body>

</body>

5. การเล่นไฟล์ภาพยนตร์บนเว็บ

การเล่นไฟล์ภาพยนตร์บนเว็บ โดยเปลี่ยนค่าของแอตทริบิวต์ SRC มาเป็นไฟล์ภาพยนตร์ (*.mov) ทำได้ดังนี้

การนำไปใช้

<body>

</body>

หมายเหตุ การเล่นไฟล์ *.mov บนเว็บเพจ จำเป็นต้องใช้โปรแกรม Quick Time เป็นปลั๊กอิน ถ้าเครื่องผู้ใช้ไม่ได้ติดตั้งโปรแกรมดังกล่าวไว้ ก็จะไม่สามารถดูตัวอย่างภาพยนตร์ได้

6. การเล่นไฟล์ Flash บนเว็บเพจ

การเล่นไฟล์ Flash บนเว็บเพจ ยังคงใช้แท็ก <EMBED> ได้เหมือนกับการเล่นไฟล์เสียง ไฟล์วิดีโอ หรือไฟล์ภาพยนตร์ โดยการเปลี่ยนค่าของแอตทริบิวต์ SRC มาเป็นไฟล์ภาพยนตร์ (*.swf) ทำได้ดังนี้

การนำไปใช้

<body>

</body>