5.การแทรกรูปภาพ

ชื่อวิชา การสร้างเวบ็ เพจดว้ ยภาษาเอชทีเอม็ แอล หน่วยที่ 5 ชือ่ หนว่ ย การแทรกรปู ภาพ รหสั วิชา 20901-2004 ชอื่ เรื่อง ภาพกราฟิกชนิดต่าง ๆ / แสดงภาพบนเว็บ / การใสข่ อ้ ความกำกบั ภาพ / การปรบั ขนาดรูปภาพ / การจัดตำแหน่งรปู ภาพ 1. สาระสำคญั กราฟกิ ท่ใี ช้สำหรบั การสรา้ งเวบ็ เพจนั้น โดยสว่ นใหญจ่ ะเปน็ ชนิด GIF และ JPEG ซง่ึ มีขอ้ ดแี ละขอ้ เสยี แตกตา่ ง กนั ไป ในภาษา HTML มแี ท็กสำหรบั ใชแ้ สดงและควบคุมภาพน่งิ ทว่ั ไป รวมถงึ การสรา้ งภาพเคลื่อนไหวดว้ ย GIF Animation 2. สมรรถนะประจำหน่วย 1. ภาพกราฟกิ ชนดิ ต่าง ๆ 2. แสดงภาพบนเวบ็ 3. การใสข่ ้อความกำกับภาพ 4. การปรับขนาดรูปภาพ 5. การจดั ตำแหน่งรปู ภาพ 3. จุดประสงค์การเรยี นรู้ 1. สามารถแสดงความรู้ความเขา้ ใจเกี่ยวกับภาพกราฟกิ ชนิดต่าง ๆ 2. บอกข้นั ตอนในการใสข่ อ้ ความกำกบั ภาพ 3. บอกขั้นตอนในการปรบั ขนาดรูปภาพ 4. สามารถปฏบิ ัตกิ ารแทรกรูปภาพโดยใชค้ ำส่ัง HTML ได้ 4. สาระการเรียนรู้ 1. ภาพกราฟกิ ชนดิ ต่าง ๆ 2. แสดงภาพบนเวบ็ 3. การใสข่ ้อความกำกับภาพ 4. การปรบั ขนาดรูปภาพ 5. การจัดตำแหน่งรูปภาพ

ใบความรู้ หน่วยท่ี 5 ชื่อวชิ า การสร้างเว็บเพจด้วยภาษาเอชทีเอม็ แอล รหสั วิชา 20901-2004 ช่อื หนว่ ย การแทรกรปู ภาพ สัปดาหท์ ี่ 11-12 ชอื่ เรื่อง ภาพกราฟิกชนดิ ตา่ ง ๆ / แสดงภาพบนเวบ็ / การปรับขนาดรูปภาพ / การใส่ข้อความกำกบั ภาพ / การจดั ตำแหน่งรูปภาพ ภาพกราฟิกชนิดต่าง ๆ ภาพกราฟิกแบ่งออกเป็น 2 ประเภทหลัก คือ ภาพประเภทบิทแมพ (Bitmap) จะมีภาพชนิด GIF และ JPG ซึ่งใช้การบีบอัดข้อมูลเพื่อลดพื้นที่ในการจัดเก็บข้อมูลขนาดของไฟล์ซึ่งมีขนาดเล็กกว่าและภาพประเภท เวคเตอร์ (Vector) จะเป็นภาพ SWF, AI, PDF, WMF ประเภทของภาพกราฟกิ ในภาษา HTML ภาพกราฟกิ สามารถแบง่ ออกเปน็ 2 ประเภทหลกั คอื ภาพประเภทบิทแมพ (Bitmap) และภาพประเภท เวคเตอร์ (Vector) ซึง่ มคี วามแตกต่างกันทัง้ ลักษณะของภาพ ความละเอยี ด และความเหมาะสมในการเลอื กใชง้ านจะ กลา่ วถึงลักษณะข้อดี - ข้อเสยี และการพิจารณาเลือกใชภ้ าพกราฟกิ ใหเ้ หมาะสมกบั การสรา้ งเวบ็ ไซตด์ ังตอ่ ไปน้ี 1. รูปภาพประเภทบิทแมพ (Bitmap) เป็นภาพซงึ่ ประกอบขน้ึ จากจดุ สีขนาดเลก็ ทีเ่ รยี กวา่ พกิ เซล (pixel) มาเรียงต่อกันในลักษณะของตารางภาพ บทิ แมพภาพหน่งึ ๆ จะมพี กิ เซลอยเู่ ปน็ จำนวนมากโดยแตล่ ะจดุ มสี ง่ิ ท่ีแตกต่างกันออกไป ซง่ึ เม่ือดูแบบรวม ๆ สามารถ มองเห็นเป็นภาพที่มีสีสัน และแสงเงาแบบสมจริงเหมือนสิ่งที่เห็นในธรรมชาติ ภาพประเภทบิท แมพ (Bitmap) ได้แก่ GIF, JPG, TIF, BMP ซงึ่ การสร้างเว็บไซตน์ ิยมใชภ้ าพชนดิ GIF และ JPG โดยมรี ายละเอยี ดดงั นี้ 1.1 ภาพชนิด GIF (Graphic Interchange Format) เปน็ รูปแบบท่ีคิดค้นโดยบรษิ ทั CompuServe เพือ่ ใชง้ านกับคอมพวิ เตอรไ์ ดห้ ลายระบบปฏบิ ัตกิ ารทำให้เหมาะสำหรบั การนำมาใชใ้ นงานเวบ็ เพจ แตข่ อ้ จำกดั ของ GIF คือ สามารถใช้สีได้สูงสุดเพียงครั้งละ 256 สีเท่านั้นซึ่งนับว่าน้อยมากสำหรบั การสร้างเว็บไซต์จึงไม่เป็นที่นยิ มในการ นำมาสร้างเว็บในปัจจุบันที่ต้องใช้ภาพกราฟิกเป็นจำนวนมาก เพื่อให้เว็บไซต์น่าสนใจและสวยงามมากยิ่งขึ้น ทั้งนี้ ภาพกราฟกิ ชนดิ GIF ใชก้ ารบีบอัดขอ้ มลู เพ่ือลดพ้นื ทกี่ ารจดั เกบ็ ข้อมูลการบีบอดั ขอ้ มูลในรปู แบบนีจ้ ะมผี ลกับกราฟิกทม่ี ี ความเสมอกัน เช่น ภาพการ์ตนู หรือโลโก้มีการใช้สจี ำนวนไมม่ ากในการแสดงผล 1.2 ภาพชนิด JPEG (Joint Photographic Experts Group) มีลักษณะเป็นภาพถ่าย หรือภาพวาด มี จำนวนสีมาก ได้รับการพัฒนาโดยบริษัท Joint Photographic Experts Group เป็นกราฟิกที่สามารถทำงานกับ เครื่องคอมพวิ เตอร์ทีม่ ีระบบปฏบิ ัติแตกต่างกันเช่นกัน มีข้อดีคือสามารถแสดงสไี ดส้ ูงสุด 16.7 ล้านสี อย่างไรกต็ าม ภาพชนิด JPEG สูญเสยี รายละเอยี ดจากการบีบอดั ข้อมลู (Compression) เพ่อื ลดขนาดของภาพให้มีขนาดไม่ใหญ่ จนเกนิ ไปแตย่ งั มขี นาดน้อยกวา่ ภาพชนิด GIF เนอ่ื งจากความละเอยี ดท่ีมากกว่านั่นเองจึงมอี ปุ สรรคกบั ขนาดของไฟล์ กราฟิกชนิดนีเ้ หมาะสำหรบั ใชแ้ สดงภาพถา่ ยที่ต้องการสสี ันและความคมชัดของภาพสงู ซ่ึงรปู ภาพชนดิ JPEG, PNG, GIF เป็นการนำชื่อชนิดภาพกราฟิกมาใช้กำหนดนามสกุลของไฟล์เพื่อให้เกิดความเข้าใจในชนิดภาพกราฟิกแต่ละ ประเภท เช่น ภาพชนิด JPEG ไฟล์นามสกุลจะเป็น .jpg, ภาพชนิด PNG ไฟล์นามสกุลจะเป็น .png, ภาพ ชนดิ GIF ไฟล์นามสกลุ จะเป็น .gif

1.3 ภาพชนิด PNG (Portable Network Graphics) เป็นรูปแบบรูปภาพที่พัฒนาขึ้นมามาจากรูปแบบ รูปภาพ GIF เพื่อแก้ปัญหาด้านสิทธิบัตรของภาพแบบ GIF โดยที่ ไฟล์ภาพแบบ PNG ไลบรารีสำหรับ PNG คือ libpng ซึ่งเขียนดว้ ยภาษาซี ปจั จุบัน PNG สนบั สนุนโดยเวบ็ เบราว์เซอร์เกือบทกุ ตัว ขอ้ ดีของ PNG เมอื่ เทียบกบั GIF - ไฟล์ภาพรปู แบบไฟลแ์ บบ PNG รองรบั การแสดงผลของสไี ดม้ ากถงึ 64 bit (แตใ่ นโปรแกรม Photoshop เลอื กใช้งานได้สูงสุด 24) ส่วน GIF นน้ั สามารถรองรบั การแสดงสไี ด้แค่ 8 บติ เทา่ นนั้ - ไฟลร์ ปู แบบไฟล์แบบ PNG สามารถแสดงผลแบบหยาบส่ลู ะเอยี ด ได้เร็วกวา่ GIF - ไฟลร์ ปู แบบไฟลแ์ บบ PNG สามารถทำพ้นื หลงั โปรง่ ใส (Transparency) ได้เหมอื นกบั GIF และยังสามารถ ปรับค่าความโปรง่ ใสได้ ตั้งแต่ 0-100% ซง่ึ ดกี วา่ GIF ทท่ี ำได้แค่ โปร่งหรอื ไม่โปร่งเท่านน้ั - ไฟลร์ ปู แบบไฟล์แบบ PNG จะมขี นาดเลก็ กวา่ GIF เมื่อเทยี บกันแบบปอนด์ตอ่ ปอนด์ ประมาณ 10-30% - ไฟล์รปู แบบไฟลแ์ บบ PNG ลขิ สทิ ธ์ิแบบ Open Source สามารถนำไปใช้ และพัฒนาตอ่ ได้อยา่ งอิสระ - ไฟลร์ ปู แบบไฟลแ์ บบ PNG render ภาพไดเ้ รว็ กวา่ GIF 2. รปู ภาพประเภทเวคเตอร์ (Vector) เป็นภาพประกอบขึ้นจากเส้นส่วนโค้ง และรูปทรงเรขาคณิต โดยเก็บในรูปของคำสั่งโปรแกรมและค่า ตัวเลข ซึ่งการนำคำสั่งและค่าเหล่านี้มาคำนวณเพื่อสร้างเป็นภาพจริงจะเกิดเมื่อภาพถูกแสดงผล ภาพประเภท เวคเตอร์ (Vector) ได้แก่ SWF, AI, PDF WMF เป็นต้น แต่ไม่ขอกล่าวถึงเนื่องจากภาพเหล่านี้ต้องผ่านการสร้าง ดว้ ยโปรแกรมเฉพาะมขี นั้ ตอนและวธิ ีการที่ซบั ซอ้ น โดยจะขอกลา่ วตอ่ ไปในบทอ่ืน

ใบความรู้ หน่วยท่ี 5 ชอ่ื วชิ า การสร้างเวบ็ เพจดว้ ยภาษาเอชทีเอม็ แอล รหสั วชิ า 20901-2004 ช่อื หนว่ ย การแทรกรปู ภาพ สปั ดาห์ที่ 11-12 ชอ่ื เรื่อง ภาพกราฟิกชนดิ ต่าง ๆ / แสดงภาพบนเว็บ / การปรบั ขนาดรปู ภาพ / การใส่ขอ้ ความกำกบั ภาพ / การจดั ตำแหน่งรูปภาพ การแสดงภาพบนเว็บ เปน็ การนำภาพมาแทรกบนส่วนตา่ ง ๆ ท่ีไดท้ ำการออกแบบไวส้ ามารถกำหนดเสน้ ทางของไฟลร์ ูปภาพโดยใช้ แอตทริบิวต์ src=\"/ชื่อไฟลร์ ูปภาพ\" อยู่ภายใต้แทก็ <img> ทำใหเ้ วบ็ ไซตเ์ กิดความสวยงามน่าสนใจย่งิ ข้นึ เปน็ แท็กเดีย่ ว มเี พยี งแท็กเปิดเทา่ นนั้ ช่ือแท็ก <img> ตำแหน่งของแทก็ อยู่ภายในแทก็ <body> ….. </body> รูปแบบใน HTML <img src=”ชอ่ื ไฟล์ภาพ”> คำสั่งในการแสดงรปู ภาพบนเว็บ ช่อื แท็ก img ตำแหน่งแท็ก อยภู่ ายในแท็ก <body>...</body> รปู แบบในการใชง้ าน <img src=\"ช่ือไฟล์รปู ภาพ\" หรอื ช่อื \"path(ท่ีเกบ็ รูปภาพ)/ชอื่ ไฟล\"์ หรอื \"image URL\"> ตัวอย่างการเขยี นโปรแกรมเพอื่ แสดงภาพบนหนา้ เวบ็ ด้วย ภาษา HTML <html> <head> <title> Insert Images : การแทรกรปู ภาพบนหนา้ เวบ็ เพจ </title> </head> <body> การแทรกรปู ภาพบนหนา้ เว็บเพจ <br> <img src=\"logo-HuaiyotICEC.jpg\"> </body> </html>

ผลลัพธข์ องการโปรแกรมเพอ่ื แสดงภาพบนหนา้ เวบ็ ดว้ ย ภาษา HTML ขอ้ ควรระวัง คือ เรือ่ งของท่ีเกบ็ ภาพ (path) ตรวจสอบได้ดงั น้ี ถา้ ที่เกบ็ รูปภาพอยู่ใน folder เดียวกบั ไฟล์ HTML ที่ต้องการใสร่ ปู ภาพนน้ั ไมต่ อ้ งระบุ path กไ็ ด้ ถ้าไฟล์ HTML อยู่ใน folder ชอื่ homepage ทม่ี ีภาพอยใู่ น folder ชอื่ image เม่อื จะใชค้ ำสั่งใสภ่ าพออกมา ตอ้ งใส่ path ให้ถกู ตอ้ ง คือ <img src=\"image/ชือ่ ภาพ\"> ตวั อยา่ งการเขยี นโปรแกรมเพอื่ แสดงภาพบนหนา้ เวบ็ ดว้ ย ภาษา HTML (กรณรี ูปภาพอย่คู นละท่ีกับไฟล์ HTML) ไฟลเ์ วบ็ ทเ่ี ก็บรปู ภาพ ตอ้ งใส่ path ใหถ้ ูกต้อง คือ <img src=\"image/ช่ือภาพ\"> <html> <head> <title> Insert Images : การแทรกรูปภาพบนหนา้ เวบ็ เพจ </title> </head> <body> การแทรกรปู ภาพบนหนา้ เวบ็ เพจ <br> <img src=\"image/logo-HuaiyotICEC.jpg\"> </body> ส่วนที่ต้องเขยี นเพ่มิ </html>

ใบความรู้ หน่วยที่ 5 ชือ่ วชิ า การสร้างเว็บเพจดว้ ยภาษาเอชทเี อม็ แอล รหัสวชิ า 20901-2004 ช่อื หน่วย การแทรกรปู ภาพ สัปดาหท์ ี่ 11-12 ช่อื เรื่อง ภาพกราฟิกชนดิ ต่าง ๆ / แสดงภาพบนเว็บ / การปรับขนาดรูปภาพ / การใส่ข้อความกำกับภาพ / การจดั ตำแหน่งรปู ภาพ การปรับขนาดรูปภาพ หากต้องการแสดงรูปให้มีขนาดต่างจากขนาดจริงของภาพ ก็สามารถทำได้ ด้วยการกำหนดเพิ่มในส่วนของ ความกวา้ ง ความยาวของรปู ภาพ ดงั ตัวอยา่ ง ภาพแรกคือภาพขนาดจริง ภาพที่สองเป็นการลดขนาดลง และภาพท่สี าม เป็นการเพิม่ ขนาดขึ้น (ถ้าภาพจรงิ มขี นาดเล็ก เมื่อใช้คำสั่งในการเพิ่มขนาด จะทำใหภ้ าพนั้นไมล่ ะเอียดชดั เจนเหมือน ต้นฉบับจริงได้) ตวั อย่างการเขยี นโปรแกรมเพื่อปรบั ขนาดรปู ภาพบนหน้าเวบ็ ดว้ ย HTML <html> <head> <title> Insert Images : การกำหนดขนาดภาพ </title> </head> <body> การกำหนดขนาดภาพ <br> <img src=\"logo-HuaiyotICEC.jpg\" width=\"150\" height=\"150\" > <br> <img src=\"logo-HuaiyotICEC.jpg\" width=\"250\" height=\"250\" > </body> </html> ผลลพั ธ์การเขียนโปรแกรมเพื่อปรับขนาดรปู ภาพบนหนา้ เวบ็ ดว้ ย HTML

ใบความรู้ หนว่ ยที่ 5 ชือ่ วิชา การสรา้ งเว็บเพจดว้ ยภาษาเอชทีเอม็ แอล รหัสวิชา 20901-2004 ช่อื หน่วย การแทรกรูปภาพ สปั ดาหท์ ่ี 11-12 ชอื่ เร่ือง ภาพกราฟิกชนดิ ตา่ ง ๆ / แสดงภาพบนเวบ็ / การปรบั ขนาดรูปภาพ / การใส่ขอ้ ความกำกับภาพ / การจดั ตำแหน่งรูปภาพ การใส่ขอ้ ความกำกบั รูปภาพ การใสข่ อ้ ความกำกบั ภาพ(Alternative text)จะเป็นการใสข่ อ้ ความให้กับภาพเพอื่ อธบิ ายเกี่ยวกบั ภาพนัน้ ๆ ซึ่งจะปรากฏเม่อื นำเมาสไ์ ปช้ีที่ภาพกจ็ ะมขี ้อความปรากฏขน้ึ สามารถกำหนดไดด้ งั นี้ ชอื่ แอททริบิวท์ img ตำแหน่งการใช้ อย่ภู ายในแทก็ <img src=> รูปแบบในการใช้งาน <img src=\"ชือ่ ไฟลร์ ปู ภาพ\" alt=\"ข้อความกำกับภาพ\"> ตวั อยา่ งการใสข่ ้อความกำกบั ภาพ ด้วย HTML <html> <head> <title> Insert Images : การแทรกรูปภาพบนหนา้ เวบ็ เพจ </title> </head> <body> การใส่ขอ้ ความกำกบั ภาพ <br> <img src=\"logo-HuaiyotICEC.jpg\" alt=\"โลโก้ วิทยาลยั การอาชีพห้วยยอด\"> </body> </html> ผลลพั ธก์ ารใสข่ ้อความกำกบั ภาพ ด้วย HTML

ใบความรู้ หน่วยที่ 5 ชอื่ วิชา การสรา้ งเว็บเพจด้วยภาษาเอชทเี อม็ แอล รหสั วิชา 20901-2004 ชือ่ หนว่ ย การแทรกรูปภาพ สัปดาหท์ ี่ 11-12 ชื่อเรอื่ ง ภาพกราฟิกชนิดต่าง ๆ / แสดงภาพบนเวบ็ / การปรับขนาดรปู ภาพ / การใส่ขอ้ ความกำกับภาพ / การจดั ตำแหน่งรปู ภาพ การจัดตำแหน่งรูปภาพ ชอื่ แอตทรบิ วิ ต์ align รปู แบบของ HTML <img src=“ชื่อไฟล์รปู ภาพ” align=“ตำแหนง่ รปู ภาพ” /> คา่ ท่ีกำหนดให้ใช้ ตำแหนง่ ในการจดั วาง โดยกำหนด คือ bottom ใหข้ อบลา่ งภาพเสมอขอบล่างข้อความ left จดั ภาพอยู่ด้านซ้าย middle ใหก้ ง่ึ กลางภาพเสมอขอ้ ความ right จัดภาพอยดู่ า้ นขวา top ใหข้ อบบนภาพเสมอขอบบนข้อความ ตัวอย่างการใชง้ าน <DOCTYPE HTML> <html> <head> <title> Insert Images : การแทรกรูปภาพบนหนา้ เว็บเพจ </title> </head> <body> <b>การจัดตำแหนง่ รปู ภาพ</b><br /><br /> <img src=\"logo-HuaiyotICEC.jpg\" align=\"bottom\" />bottom bottom bottom bottom <img src=\"logo-HuaiyotICEC.jpg\" align=\"top\" />top top top top top top <img src=\"logo-HuaiyotICEC.jpg\" align=\"middle\" />middle middle middle middle <br /><img src=\"logo-HuaiyotICEC.jpg\" align=\"left\" />left left left left left <img src=\"logo-HuaiyotICEC.jpg\" align=\"right\" /> </body> </html>

Alignment and border size for images : การวางตำแหนง่ และเส้นขอบรูปภาพในเวบ็ เพจ การจดั วางตำแหน่งรปู ภาพ จะใช้คำสงั่ เดียวกันกับการวางตำแหนง่ ตัวอกั ษร และยงั สามารถกำหนดเสน้ ขอบ รอบรูปภาพ ด้วยการเพม่ิ คำสงั่ คุณสมบัตเิ สน้ ขอบ border ตอ่ จากชือ่ รปู ภาพได้ดังตัวอย่าง ตัวอยา่ งการใช้งาน <html> <head> <title> Insert Images : ตำแหน่งและเส้นขอบรูปภาพ </title> </head> <body> ผลลัพธ์ <div align=\"center\"> ตำแหนง่ และเส้นขอบรปู ภาพ<br> <img src=\" logo-HuaiyotICEC.jpg\" border=\"3\"> </div> </body> </html> END : สรปุ คำสั่งท่ีใชใ้ นบทน้ี TAGS รายละเอยี ด <img src=\"name\"> คำสงั่ การแทรกรูปภาพในตำแหนง่ ตา่ ง ๆ name คอื ชื่อรูปภาพชนิด JPG, GIF, PNG width=\"x\" height=\"y\" การกำหนดความกว้าง ความสูง ของภาพ โดย x, y มีหนว่ ยเปน็ พกิ เซล alt=\"describe\" การกำหนดข้อความอธบิ ายรูปภาพวา่ คือรูปอะไร ตอ่ จากคำสง่ั img border=\"x\" การกำหนดขนาดเสน้ ขอบรอบรปู ภาพวา่ มคี วามกวา้ งเทา่ ใด มหี นว่ ยเป็น พิกเซล <div align=\"left/center/right\"> การกำหนดการจัดวางตำแหนง่ ของข้อความหรือรปู ภาพ ค่าปกติคอื ซา้ ย