บทที่ 5 การบรรจุภาพnew

 หนว่ ยที่ 5 การแทรกรูปภาพ 127 HTML HTMLHTML HTML

 หนว่ ยท่ี 5 การแทรกรปู ภาพ 128 หนว่ ยท่ี 5 การแทรกรูปภาพหวั ขอ้ เนอื้ หา1. ความรู้เกีย่ วกบั รปู ภาพ2. การแทรกรูปภาพ3. การแสดงขอ้ ความให้กับรปู ภาพ4. การกาหนดขนาดรปู ภาพ5. การจดั ตาแหน่งรปู ภาพ6. การกาหนดช่องวา่ งระหวา่ งรปู ภาพ7. การแสดงเสน้ ขอบรปู ภาพ8. การสร้างพน้ื หลังเวบ็ เพจดว้ ยรูปภาพ9. การประยกุ ตใ์ ชค้ าสง่ั การแทรกรปู ภาพสาระสาคัญ การแสดงรูปภาพประกอบบนเว็บเพจทาให้ดึงดูดความสนใจ เว็บเพจดูสวยงามและมีความสมบูรณ์ข้ึน ประโยชน์ของรูปภาพบนเว็บเพจนอกจากใช้เพื่อตกแต่งเว็บเพจแล้ว รูปภาพยังสื่อความหมายไดด้ ีกวา่ การแสดงดว้ ยสอ่ื อ่ืน ๆ เพราะเมื่อเห็นรปู ภาพแล้วทาให้เข้าใจไดท้ ันที รปู ภาพท่ีแสดงบนเว็บเพจสามารถแสดงได้ทั้งภาพน่ิงท่ีเป็นภาพถ่ายด้วยกล้องถ่ายภาพ หรือภาพท่ีสร้างด้วยโปรแกรมประเภทกราฟิก เช่น โปรแกรม Adobe Photoshop โปรแกรม Corel Photopaintโปรแกรม PaintShop เป็นต้น และแสดงด้วยรูปภาพเคล่ือนไหวท่ีสร้างด้วยโปรแกรมต่าง ๆ เช่นโปรแกรม Adobe Flash และ โปรแกรม Adobe Photoshop เปน็ ต้นจุดประสงคก์ ารเรยี นรู้1. จดุ ประสงคท์ ว่ั ไป 1.1 มีความรคู้ วามเขา้ ใจคาสั่งการแทรกภาพ 1.2 มที กั ษะการใช้คาสงั่ การบรรจุรูปภาพ 1.3 มคี ุณธรรมจรยิ ธรรมทพี่ ึงประสงค์

 หนว่ ยท่ี 5 การแทรกรปู ภาพ 129 2. จุดประสงคเ์ ชิงพฤตกิ รรม 2.1 บอกความรเู้ กยี่ วกบั รูปภาพได้ 2.2 สามารถแทรกรปู ภาพได้ 2.3 สามารถแสดงข้อความให้กับรปู ภาพได้ 2.4 สามารถกาหนดขนาดรูปภาพได้ 2.5 สามารถจัดตาแหนง่ รปู ภาพได้ 2.6 สามารถกาหนดชอ่ งวา่ งระหวา่ งรูปภาพได้ 2.7 สามารถแสดงเสน้ ขอบรูปภาพได้ 2.8 สามารถสร้างพน้ื หลงั เว็บเพจด้วยรปู ภาพได้ 2.9 สามาถประยุกต์ใช้คาสงั่ การแทรกรปู ภาพได้ 2.10 มวี นิ ยั รับผิดชอบ ตอ่ งานที่ไดร้ บั มอบหมายกจิ กรรมการเรยี นการสอน 1. นกั ศกึ ษาทาแบบทดสอบก่อนเรยี น บนั ทกึ คะแนนไว้ในกระดาษคาตอบ 2. การเรยี นการสอนภาคทฤษฎี ผูส้ อนบรรยายประกอบสอื่ การสอน แบบนาเสนอคู่กับเอกสารประกอบการเรียนการสอน 3. การเรยี นการสอนภาคปฏบิ ัติ ผู้สอนสาธิตประกอบสื่อการสอน แบบนาเสนอคกู่ ับเอกสารประกอบการเรียนการสอน 4. การศึกษาจากเอกสารประกอบการเรียนการสอน นักศกึ ษาสามารถใชป้ ระกอบการเรยี นการสอนในชนั้ เรียนและนอกชน้ั เรยี นได้ 5. นักศกึ ษาสามารถค้นควา้ ข้อมลู เพิ่มเตมิ ไดจ้ ากเอกสารอา้ งองิ ประจาหน่วยและจากอินเทอรเ์ น็ต 6. มอบหมายนักศึกษาทาแบบฝกึ หดั และใบงานประจาหนว่ ย โดยสง่ ตามเวลาที่กาหนด 7. เม่อื เรยี นจบเน้อื หาให้ทาแบบทดสอบหลังเรียน นักศึกษาบนั ทกึ คะแนน เพ่ือเปรยี บเทียบความก้าวหน้าทางการเรียนของตนเอง พรอ้ มกบั เตรยี มตวั ศึกษาเนือ้ หาในหนว่ ยตอ่ ไปการวดั และประเมนิ ผล 1. ทดสอบกอ่ นเรยี นและหลังเรียนเพื่อตรวจสอบความก้าวหน้าของนักศึกษา 2. คะแนนจากแบบฝึกหดั ผา่ นเกณฑ์ 50% 3. คะแนนจากการปฏบิ ตั ติ ามใบงาน ผ่านเกณฑ์ 50% 5. คะแนนทดสอบภาคปฏิบัติ ผา่ นเกณฑ์ 50% 6. ประเมนิ คุณธรรมจริยธรรมและคณุ ลกั ษณะที่พึงประสงค์ จากการสงั เกตพฤตกิ รรมรายบคุ คล

 หน่วยท่ี 5 การแทรกรปู ภาพ 130 กระดาษคาตอบ หน่วยท่ี 5 การแทรกรูปภาพชื่อ.........................................................................เลขท.่ี ..........................กลมุ่ เรยี น............................ ทดสอบกอ่ นเรียน ทดสอบหลงั เรยี นข้อ คาตอบ คะแนน ขอ้ คาตอบ คะแนน 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 910 10รวม รวมประเมนิ ผล กอ่ นเรยี น สรุปผลการเรยี น ใบงาน พัฒนา เต็ม 10 10 ได้ หลงั เรียน แบบฝึกหัด 10 10

 หนว่ ยท่ี 5 การแทรกรูปภาพ 131 แบบทดสอบก่อนเรียน หน่วยที่ 5 การบรรจุรปู ภาพคาช้แี จง เลอื กคาตอบที่ถกู ที่สุดเพียงข้อเดียว1. รปู ภาพท่ีแทรกในเวบ็ เพจไม่ควรมีขนาดเกินเทา่ ไร ก. 40 Kb ข. 72 Kb ค. 80 Kb ง. 102 Kb2. รูปภาพการ์ตนู เคล่ือนไหวเปน็ ไฟลป์ ระเภทใด ก. GIF ข. JPG ค. JPEG ง. PNG3. ขอ้ ใดคือการแสดงรูปภาพบนเว็บเพจ ก. <img src=“โฟลเดอร์/ชอ่ื รูปภาพ”> ข. <img pic=“โฟลเดอร์/ชือ่ รปู ภาพ”> ค. <picture src=“โฟลเดอร์/ชื่อรปู ภาพ”> ง. <picture img=“โฟลเดอร์/ชื่อรูปภาพ”>4. การกาหนดเส้นขอบรปู ภาพใช้คาสั่งใด ก. line ข. image ค. picture ง. border5. <img src=“โฟลเดอร์/ช่อื รปู ภาพ” alt=“…” > alt มีความหมายถึงข้อใด ก. การเว้นระยะหา่ งของรูปภาพ ข. การกาหนดขนาดของรปู ภาพ ค. การแสดงข้อความให้กับรูปภาพ ง. การกาหนดตาแหนง่ ใหก้ ับรูปภาพ

 หน่วยที่ 5 การแทรกรูปภาพ 1326. ขอ้ ใดกล่าวถูกต้องของการกาหนดขนาดของรปู ภาพเป็นเปอร์เซน็ ต์ ก. ความสูงของภาพลดและขยายขนาดตามความกว้างของเว็บเบราว์เซอร์ ข. ความสูงของภาพลดลง 50% จากขนาดเดิม ค. ความสงู ของภาพมีขนาดคงท่ี ง. ถูกทุกข้อ7. ขอ้ ใดคือการวางรูปภาพก่ึงกลางข้อความ ก. <img… align=“top”> ข. < img… align=“left”> ค. <img… align=“middle”> ง. < img… align=“bottom” >8. ถ้าต้องการกาหนดระยะห่างดา้ นซา้ ยของรปู ภาพกับขอ้ ความตอ้ งใช้คาสง่ั ใด ก. <img… hspace=“20”> ข. <img… vspace=“20”> ค. <img… left space=“20”> ง. < img… right=“20”>9. ถา้ ต้องการกาหนดระยะห่างรปู ภาพกบั ข้อความดา้ นลา่ งต้องใช้คาส่งั ใด ก. < img… hspace=“20”> ข. < img… vspace=“20”> ค. < img… left space=“20”> ง. < img… bottom space=“20”>10. ขอ้ ใดเปน็ การกาหนดไม่ใหพ้ ้ืนหลังเวบ็ เพจเล่อื นตามการเล่อื นสกอรบ์ าร์ ก. <img src=“โฟลเดอร์/ชอ่ื ภาพ” bgproperties=“fixed”> ข. <body src=“โฟลเดอร์/ชือ่ ภาพ” background=“fixed”> ค. <body background=“โฟลเดอร์/ชื่อภาพ” src=“fixed”> ง. <body background=“โฟลเดอร์/ชื่อภาพ” bgproperties=“fixed”>

 หน่วยที่ 5 การแทรกรูปภาพ 1331. ความรู้เก่ยี วกบั รูปภาพ การนารูปภาพตกแต่งเว็บเพจควรเลือกขนาดของไฟล์ไม่ควรเกิน 40 กิโลไบต์ เพราะถ้ามีขนาดใหญ่มากกว่านี้จะทาให้การแสดงภาพบนเว็บเพจช้า ต้องใช้เวลารอนานกว่ารูปจะแสดง ขนาดไฟลร์ ูปภาพข้นึ อยู่กับประเภทของรปู ภาพ ความละเอียดของรูปภาพ และขนาดของรูปภาพ 1.1 ประเภทของรูปภาพ การเลือกประเภทของรปู ภาพขนึ้ อยกู่ บั ลกั ษณะการใช้งานบนเว็บเพจ สาหรับรปู ภาพท่ีนามาแสดงบนเวบ็ เพจมี 3 ประเภท 1.1.1 รูปภาพ Graphics Interchange Format มีนามสกุลไฟล์ .GIF มีความละเอียดของภาพได้สูงสุด 256 สี ภาพมีขนาดเล็กทาให้แสดงบนเว็บเพจได้รวดเร็ว นิยมเป็นภาพการต์ ูน ภาพวาดลายเส้น ภาพเคล่ือนไหว การแสดงผลของรูปภาพเป็นภาพโปร่งใส (Transparent) ทาให้มองทะลุพ้ืนหลังเวบ็ เพจได้ ดังภาพท่ี 5.1 ภาพที่ 5.1 การแสดงรปู ภาพแบบโปรง่ ใส 1.1.2 รูปภาพ Joint Photographic Experts Group มีนามสกุลไฟล์ .JPEG หรือJPG มีความละเอยี ดของภาพไดส้ ูงถึง 16.7 ล้านสี รปู ภาพมีความคมชดั สงู แสดงสีได้มากมายหลายสีรูปภาพมีความละเอียดมาก ส่วนใหญ่เป็นภาพถ่าย แต่การแสดงบนเว็บเพจไม่ใช่รูปภาพแบบโปร่งใสไมส่ ามารถมองทะลไุ ปยงั พ้นื หลงั เวบ็ ได้ ดงั ภาพที่ 5.2

 หน่วยท่ี 5 การแทรกรูปภาพ 134 ภาพท่ี 5.2 การแสดงรูปภาพของ JPG หรือ JPEG 1.1.3 รูปภาพ Portable Network Graphic มีนามสกุลไฟล์ .PNG เป็นรูปแบบไฟล์ภาพที่พัฒนาข้ึนมาทดแทนรูปแบบไฟล์ GIF เพื่อแก้ปัญหาด้านสิทธิบัตร ความละเอียดของภาพสนับสนุนระบบสีหลายแบบโดย PNG-8 แสดงสีได้ 256 สี เหมือนไฟล์ GIF และ PNG-24 แสดงสีได้ 16.7 สีเหมอื นไฟล์ JPG มกี ารกาหนดให้พ้นื ภาพเป็นพน้ื โปรง่ ใสได้ (Transparent) เหมือนไฟล์ GIF ดังภาพที่ 5.3 ภาพที่ 5.3 การแสดงรปู ภาพของ PNG 1.2 การสังเกตประเภทของรูปภาพ การเลือกรูปภาพสาหรับเว็บเพจให้สังเกตประเภทและขนาดของรูปภาพก่อนนามาแทรกลงในเวบ็ เพจเพ่ือป้องกันปัญหาเวลาในการแสดงรปู ภาพนาน มีขนั้ ตอนดงั นี้ 1) เปิดโฟลเดอรเ์ กบ็ รปู ภาพ 2) คลิกขวาทรี่ ูปภาพ 3) เลือกคาสง่ั Properties และสงั เกตประเภทและขนาดของรูปภาพ ดงั ภาพที่ 5.4

 หน่วยที่ 5 การแทรกรูปภาพ 135 1 ประเภทของไฟลร์ ูปภาพ ขนาดของรปู ภาพ 2 3 ภาพท่ี 5.4 ประเภทและขนาดของรปู ภาพ 1.3 การปรบั เปล่ียนขนาดของรปู ภาพ สาหรับรูปภาพท่ีมีขนาดใหญ่เกินไปสามารถปรับขนาดให้เล็กลงได้ ด้วยการเปิดรูปภาพในโปรแกรม Adobe Photoshop ซง่ึ การปรับขนาดของรูปภาพและการลดความละเอียดของรปู ภาพมีขั้นตอนดังนี้ 1.3.1 การลดขนาดของรูปภาพ ดงั ภาพท่ี 5.5 โดยมรี ายละเอียดดังนี้ 1) คลกิ เมนู Image เลอื กคาสง่ั Image size 2) กาหนด width และ height ในส่วนของ Pixel Dimension 3) คลิกปุ่ม OK 1 23 ภาพท่ี 5.5 การลดขนาดของรูปภาพ

 หน่วยท่ี 5 การแทรกรปู ภาพ 136 1.3.2 การลดความละเอยี ดของรูปภาพ ดังภาพท่ี 5.6 โดยมีรายละเอยี ดดงั นี้ 1) คลกิ เมนู File เลอื กคาส่ัง Save for Web & Devices 2) กาหนดประเภทของไฟล์ 3) กาหนดความละเอียดของภาพ ท่ี quality หรอื เลือกชนิดของความละเอียดLow Medium High Very High และ Maximum ขณะเลือกสังเกตขนาดของไฟลจ์ ะลดลง 4) กดปุ่ม Save เพ่อื บนั ทึกรูปภาพ จะพบว่ารปู ภาพมขี นาดเล็กลง 2 3 1 ขนาดของไฟล์รปู ภาพ 4 ภาพท่ี 5.6 การบันทึกไฟลร์ ูปภาพ เมื่อได้ปรับเปลี่ยนขนาดหรือลดความละเอียดของรูปภาพแล้วจะพบว่าไฟล์รูปภาพมีขนาดเล็กลง ดังภาพที่ 5.7 ขนาดของรูปภาพ ภาพที่ 5.7 ขนาดของภาพหลังลดขนาดภาพ

 หน่วยที่ 5 การแทรกรูปภาพ 137 1.4 การจดั เกบ็ ไฟล์รปู ภาพ สาหรับการจัดเก็บภาพก่อนนามาใช้ควรจดั เก็บแยกโฟลเดอร์สาหรับเก็บภาพโดยเฉพาะและโฟลเดอร์น้ันควรเป็นโฟลเดอร์ย่อยของโฟลเดอร์ท่ีจัดเก็บไฟล์ HTML ดังภาพที่ 5.8 จะเห็นว่าโฟลเดอร์ web_html ใชส้ าหรบั เก็บไฟล์ HTML และดา้ นในจะมีโฟลเดอร์ย่อย images สาหรับเก็บรูปภาพเพือ่ เปน็ การปอ้ งกนั การระบตุ าแหนง่ รปู ภาพไม่ถูกตอ้ ง ดังภาพท่ี 5.9 ภาพที่ 5.8 การจัดโฟลเดอร์สาหรบั เกบ็ ภาพ ภาพที่ 5.9 การกาหนดตาแหน่งภาพไม่ถกู ต้อง

 หนว่ ยท่ี 5 การแทรกรปู ภาพ 1382. การแทรกรูปภาพ (Image) การใช้คาสัง่ แทรกรูปภาพในเว็บเพจตอ้ งระบตุ าแหนง่ หรอื โฟลเดอร์การเกบ็ รูปภาพ ช่อื ไฟล์รูปภาพและนามสกุลไฟลใ์ ห้ถูกต้อง โดยมรี ูปแบบดังนี้ รปู แบบแทก็ <img> <img src = “โฟลเดอร์/ชอ่ื รูปภาพ”> รปู แบบการแทรกรูปภาพ ใชแ้ ทก็ <img> โดยพิมพ์ตาแหน่งและช่ือของรูปภาพภายในแท็กเปิดของ<img src=“โฟลเดอร์/ช่อื รปู ภาพ”> ดงั ตัวอยา่ งที่ 5.1 ตวั อย่างท่ี 5.1 การใชแ้ ท็ก <img> 1 <html> <head><title>การแทรกรปู ภาพ</title></head> 2 <body bgcolor= “feedd7”> 3 <h1>การแทรกภาพ</h1> 4 <img src = “images/logo.jpg” > 5 </body> 6 </html> จากตัวอย่างท่ี 5.1 รูปภาพและตาแหน่งที่ระบุภายในแท็กเปิดของแท็ก <img> แสดงบนเว็บเบราว์เซอร์ ดังภาพ 5.10 ภาพท่ี 5.10 การแสดงผลการใช้ แทก็ <img>

 หนว่ ยท่ี 5 การแทรกรูปภาพ 1393. การแสดงข้อความใหก้ บั รูปภาพ ข้อความที่กาหนดให้รูปภาพจะแสดงเมื่อเลื่อนเมาส์บนภาพ เพื่อเป็นการบอกช่ือของรูปภาพหรืออธิบายกิจกรรมท่ีเกิดขึ้นภายในรูปภาพ และข้อความจะแสดงแทนรูปภาพเมื่อรูปภาพไม่สามารถแสดงบนเว็บเพจได้ โดยมรี ูปแบบดงั น้ี รปู แบบ attribute alt <img src=“โฟลเดอร์/ชอ่ื รูปภาพ” alt=“ขอ้ ความ” > รูปแบบการแสดงข้อความใหก้ ับรูปภาพ พิมพ์ข้อความภายในแท็กเปิดของแทก็ <img …alt=“ขอ้ ความ”>ดงั ตวั อยา่ งท่ี 5.2ตัวอยา่ งท่ี 5.2 การกาหนดข้อความใหร้ ูปภาพ 1 <html> 2 <head><title>การแทรกรปู ภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>การแทรกภาพ</h3> 5 <img src=“images/logo.jpg”alt=“ตราสัญลกั ษณอ์ าเซียนและธงของประเทศสมาชกิ ” > 6 </body> 7 </html> จากตวั อย่างท่ี 5.2 การกาหนดให้ <img…alt=“ข้อความ”> เป็นการบอกชือ่ ของรูปภาพหรือคาอธิบายกิจกรรมท่ีเกิดข้ึนภายในรปู ภาพเมื่อเลื่อนเมาสบ์ นรูปภาพ แสดงผลดงั ภาพท่ี 5.11 ขอ้ ความแสดงเมื่อเลือ่ นเมาส์บนรปู ภาพ ภาพท่ี 5.11 การแสดงผล การกาหนดข้อความให้รูปภาพ

 หนว่ ยที่ 5 การแทรกรูปภาพ 140 จากตัวอย่างท่ี 5.2 ถ้าช่ือรูปภาพท่ีกาหนดภายในแท็กเปิดของแท็ก <img=“images/logo.jpg”>ไม่สามารถแสดงบนเว็บเพจได้ ก็จะปรากฏขอ้ ความแสดงแทนรูปภาพ แสดงผลดงั ภาพที่ 5.12 กรณรี ูปภาพไม่แสดงจะแสดงข้อความแทน ภาพที่ 5.12 การแสดงผล การแสดงข้อความแทนรปู ภาพ4. การกาหนดขนาดของรูปภาพ การกาหนดขนาดภาพ มี 2 แบบ คือ ความกว้าง และความสงู ของภาพ สามารถกาหนดได้ทั้งแบบเปอร์เซ็นต์ และแบบพิกเซล ถ้ากาหนดความกว้างเป็นพิกเซล ขนาดของภาพจะคงท่ีไม่มีการเปล่ียนแปลง เม่ือมีการขยายหรือลดขนาดหน้าต่างของเว็บเบราว์เซอร์ แต่ถ้ากาหนดขนาดเป็นแบบเปอรเ์ ซ็นต์ขนาดของรูปภาพจะปรบั ตามความกว้างหน้าตา่ งเวบ็ เบราวเ์ ซอร์อัตโนมัติ 4.1 การกาหนดความสูงให้รูปภาพ (Height) ทาได้ 2 แบบ ได้แก่ แบบเปอร์เซ็นต์ เช่น<img…height=“50%”> และแบบพิกเซล เชน่ <img…height=“150”> โดยมรี ูปแบบดังน้ี รปู แบบ attribute height <img src = “โฟลเดอร์/ชอ่ื รูปภาพ” height=“n”> n = ความสูงของภาพระบเุ ป็นตวั เลข มีค่าเปน็ พกิ เซล หรือเปอรเ์ ซ็นต์ รูปแบบการกาหนดความสงู ให้รูปภาพ กาหนดให้ height=“ความสูง” ภายในแทก็ เปดิของแท็ก <img> ดงั ตวั อยา่ งที่ 5.3

 หน่วยที่ 5 การแทรกรูปภาพ 141 ตวั อยา่ งที่ 5.3 การกาหนดความสงู ของรูปภาพ 1 <html> 2 <head><title>การแทรกรปู ภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>การแทรกภาพ</h3> 5 <img src = “images/logo.jpg” height=“150”> 6 </body> 7 </html> จากตัวอย่างที่ 5.3 กาหนดความสูง height=“150” ขนาดความสงู ของรูปภาพลดลงเหลอื 150 พิกเซล แสดงผลดังภาพที่ 5.13 ขนาดก่อนปรบั ขนาด กาหนดขนาดเหลือ 150 พิกเซล ภาพท่ี 5.13 การแสดงผล การกาหนดความสูงรปู ภาพ 4.2 การกาหนดความกว้างให้รูปภาพ (Width) ทาได้ 2 แบบ ได้แก่ แบบเปอร์เซน็ ต์เชน่ <img width=“30%”> และแบบพิกเซล เชน่ <img width=“300”> รปู แบบ attribute width <img src = “โฟลเดอร์/ชอ่ื รูปภาพ” width= “n”> n = ความกวา้ งของภาพระบเุ ปน็ ตวั เลข มีค่าเป็นพิกเซลหรอื เปอรเ์ ซ็นต์

 หน่วยที่ 5 การแทรกรปู ภาพ 142 รปู แบบการกาหนดความสูงให้รูปภาพ กาหนดให้ width=“ความกว้าง” ภายในแท็กเปดิ ของแทก็ <img> ดังตัวอย่างที่ 5.4ตัวอย่างที่ 5.4 การกาหนดความกวา้ งให้รูปภาพ 1 <html> 2 <head><title>การแทรกรูปภาพ</title></head> 3 <body bgcolor=“feedd7”> 4 <h3>การแทรกภาพ</h3> 5 <img src=“images/logo.jpg” width=“30%” > 6 </body> 7 </html> จากตวั อยา่ งท่ี 5.4 ได้กาหนดความสงู width=“30%” ซง่ึ ขนาดความกวา้ งของรูปภาพลดลงเหลอื 30 เปอรเ์ ซน็ ต์ จากความกวา้ งเดมิ ของรูปภาพ แสดงผลดงั ภาพที่ 5.14 ความกว้างก่อนปรับขนาด ความกวา้ งรปู ภาพลดเหลือ 30% ภาพที่ 5.14 การแสดงผลการกาหนดความกว้างรปู ภาพ

 หน่วยที่ 5 การแทรกรปู ภาพ 1435. การจัดตาแหนง่ ของรปู ภาพ การจดั ตาแหน่งให้รูปภาพกับข้อความเพ่ือความเปน็ ระเบียบสวยงาม ทาให้การอา่ นคาอธิบายเกีย่ วกับรูปภาพตา่ ง ๆ ท่ีอยู่บนเว็บเพจทาไดง้ ่ายและสะดวกขึ้น โดยมรี ูปแบบดังนี้ รปู แบบ attribute align <img src = “โฟลเดอร์/ชอ่ื รูปภาพ” align = “ตาแหน่งรูปภาพ”> ตาแหนง่ ของรูปภาพ มี 5 แบบ top คือ การวางข้อความชิดขอบบนรูปภาพ middle คือ การวางขอ้ ความกึ่งกลางรูปภาพ bottom คอื การวางข้อความล่างรูปภาพ left คอื การวางรปู ภาพดา้ นซ้ายของข้อความ right คือ และการวางรปู ภาพอยู่ทางขวาของข้อความ 5.1 การจดั ตาแหน่งขอ้ ความชดิ ขอบบนรูปภาพ (Top) รูปแบบการจัดตาแหน่งข้อความชดิ ขอบบนรปู ภาพ โดยการกาหนดให้ align=“top”ภายในแท็กเปดิ ของแท็ก <img> ดงั ตัวอยา่ งท่ี 5.5ตวั อย่างที่ 5.5 การกาหนดตาแหนง่ รูปภาพกับข้อความแบบ top 1 <html> 2 <head><title>การแทรกรปู ภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>การแทรกรปู ภาพ</h3> 5 <img src = “images/logo.jpg” align = “top” > 6 ประชาคมเศรษฐกจิ อาเซียน (ASEAN Economic Community หรือ AEC ) 7 </body> 8 </html> จากตวั อยา่ งที่ 5.5 กาหนดให้ align=“top” เปน็ การจัดตาแหน่งของข้อความให้ชดิ ขอบบนรูปภาพ แสดงผลดงั ภาพที่ 5.15

 หน่วยท่ี 5 การแทรกรปู ภาพ 144 ขอ้ ความชิดขอบบนของรูปภาพ ภาพที่ 5.15 การแสดงผล ตาแหนง่ รูปภาพแบบ top 5.2 การจัดตาแหน่งขอ้ ความกึง่ กลางรปู ภาพ (Middle) รูปแบบการจัดตาแหน่งข้อความกึ่งกลางรูปภาพ โดยการกาหนดให้ align=“middle”ภายในแทก็ เปิดของแท็ก <img> ดงั ตัวอย่างที่ 5.6ตวั อย่างที่ 5.6 การกาหนดตาแหน่งรูปภาพกับข้อความแบบ middle 1 <html> 2 <head><title>การแทรกรูปภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>การแทรกรูปภาพ</h3> 5 <img src = “images/logo.jpg” align= “middle” > 6 ประชาคมเศรษฐกจิ อาเซียน (ASEAN Economic Community หรอื AEC ) 7 </body> 8 </html> จากตวั อย่างท่ี 5.6 กาหนดให้ align=“middle” เป็นการจัดตาแหนง่ ให้ข้อความแสดงก่ึงกลางรปู ภาพ แสดงผลดังภาพที่ 5.16 ข้อความแสดงกึ่งกลางรปู ภาพ ภาพที่ 5.16 การแสดงผล ตาแหน่งรูปภาพแบบ middle

 หนว่ ยท่ี 5 การแทรกรูปภาพ 145 5.3 การจดั ตาแหน่งขอ้ ความชิดขอบล่างรูปภาพ (Bottom) รูปแบบการจัดตาแหน่งข้อความชิดขอบล่างรูปภาพ โดยการกาหนดให้align=“middle” ภายในแท็กเปิดของแท็ก <img> ดังตวั อย่างท่ี 5.7ตัวอยา่ งท่ี 5.7 การกาหนดตาแหน่งรปู ภาพกับข้อความแบบ bottom 1 <html> 2 <head><title>การแทรกรปู ภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>การแทรกรปู ภาพ</h3> 5 <img src = “images/logo.jpg” align=“bottom” > 6 ประชาคมเศรษฐกิจอาเซียน (ASEAN Economic Community หรอื AEC ) 7 </body> 8 </html> จากตัวอยา่ งที่ 5.7 กาหนดให้ align=“bottom” เป็นการจัดตาแหนง่ ใหข้ ้อความแสดงชิดขอบล่างรูปภาพ แสดงผลดังภาพที่ 5.17 ข้อความแสดงชดิ ขอบด้านลา่ งรูปภาพ ภาพท่ี 5.17 การแสดงผล ตาแหน่งรปู ภาพแบบ bottom 5.4 การจัดตาแหน่งรูปภาพอยู่ด้านซ้ายของข้อความ (Left) สาหรับการกาหนดตาแหน่งรูปภาพด้านซ้ายของข้อความ มักจะใช้ร่วมกับข้อความอธิบายภาพที่มีปริมาณหลายบรรทัด โดยกาหนดให้ align=“left” แทรกไว้ภายในแท็กเปิดของแท็ก <img> ดังตวั อยา่ งท่ี 5.8

 หน่วยที่ 5 การแทรกรูปภาพ 146ตวั อย่างท่ี 5.8 การกาหนดตาแหน่งรปู ภาพกับข้อความแบบ left 1 <html> 2 <head><title>การแทรกรูปภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>ประชาคมเศรษฐกจิ อาเซยี น (ASEAN Economic Community หรอื AEC ) 5 </h3> 6 <img src=“images/logo.jpg” align=“left” > 7 ปัจจุบันประเทศสมาชิกอาเซียน รวม 10 ประเทศ ได้แก่ ไทย พม่า มาเลเซีย อินโดนีเซีย 8 ฟิลิปปินส์ สิงคโปร์ เวียดนาม ลาว กัมพูชาและบรูไน โดยอาเซียนได้จัดทาพิมพ์เขียว 9 เพื่อจัดต้ังประชาคมเศรษฐกจิ อาเซียน (AEC Blueprint) เป็นแผนบูรณาการงานด้าน 10 เศรษฐกิจให้เห็นภาพรวมในการมุ่งไปสู่ AEC ซ่ึงประกอบด้วยแผนงานเศรษฐกิจใน 11 ด้านตา่ ง ๆ ให้บรรลเุ ป้าหมายในปี 2558 12 </body> 13 </html> จากตวั อย่างท่ี 5.8 กาหนดให้ align=“left” เปน็ การจัดตาแหนง่ ให้รูปภาพแสดงอยู่ดา้ นซ้ายของขอ้ ความ แสดงผลดงั ภาพท่ี 5.18 รูปภาพแสดงด้านซา้ ยของข้อความ ภาพท่ี 5.18 การแสดงผลการใช้ attribute align=“left”

 หน่วยท่ี 5 การแทรกรปู ภาพ 147 5.5 การจัดตาแหน่งรูปภาพให้อยู่ด้านขวาของข้อความ (Right) สาหรับการกาหนดตาแหน่งรูปภาพอยู่ด้านซ้ายของข้อความ มักใช้ร่วมกับข้อความอธิบายภาพที่มีปริมาณหลายบรรทัดโดยกาหนดให้ align=“right” แทรกไวภ้ ายในแทก็ เปดิ ของแทก็ <img> ดังตวั อยา่ งที่ 5.9 ตัวอย่างที่ 5.9 การกาหนดตาแหน่งรูปภาพกบั ขอ้ ความแบบ right 1 <html> 2 <head><title>การแทรกรูปภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>ประชาคมเศรษฐกิจอาเซียน (ASEAN Economic Community หรอื AEC ) </h3> 5 <img src = “images/logo.jpg” align=“right” > 6 ปัจจุบันประเทศสมาชิกอาเซียน รวม 10 ประเทศ ได้แก่ ไทย พม่า มาเลเซีย อินโดนีเซีย 7 ฟิลิปปินส์ สิงคโปร์ เวียดนาม ลาว กัมพูชาและบรูไน โดยอาเซียนได้จัดทาพิมพ์เขียว 8 เพ่ือจัดต้ังประชาคมเศรษฐกิจอาเซียน (AEC Blueprint) เป็นแผนบูรณาการงานด้าน 9 เศรษฐกิจให้เห็นภาพรวมในการมุ่งไปสู่ AEC ซ่ึงประกอบด้วยแผนงานเศรษฐกิจใน 10 ดา้ นต่าง ๆ ให้บรรลุเปา้ หมายในปี 2558 11 </body> 12 </html> จากตวั อยา่ งที่ 5.9 กาหนดให้ align=“right” เปน็ การจัดตาแหนง่ ให้รูปภาพแสดงอยดู่ า้ นขวาของขอ้ ความ แสดงผลดงั ภาพท่ี 5.19 รูปภาพแสดงดา้ นขวาของข้อความ ภาพที่ 5.19 การแสดงผลการใช้ attribute align=“right”

 หน่วยท่ี 5 การแทรกรปู ภาพ 1486. การกาหนดช่องว่างระหวา่ งรปู ภาพกบั ข้อความ การกาหนดช่องวา่ งระหวา่ งรูปภาพกับข้อความมี 2 แบบ ไดแ้ ก่ การกาหนดช่องวา่ งด้านซา้ ยและขวา (Horizontal Space) การกาหนดชอ่ งวา่ งดา้ นบนและล่างระหว่างรปู ภาพกบั ข้อความ (Vertical Space) 6.1 การกาหนดช่องว่างด้านซ้ายและขวา (Horizontal Space) โดยจะมีการเว้นระยะห่างระหว่างรูปภาพกับข้อความท่ีอยู่ด้านซ้าย หรือขวาของรูปภาพ จึงต้องใช้คาสั่งร่วมกับการกาหนดตาแหนง่ align=“right” และ align=“left” โดยมรี ูปแบบดังนี้ รูปแบบ attribute hspace <img src=“โฟลเดอร์/ชอื่ รปู ภาพ” hspace=“n”> n = ระยะห่างของภาพกับข้อความกาหนดเป็นพิกเซล รูปแบบการกาหนดช่องว่างระหว่างด้านซา้ ยและขวาของรูปภาพกับข้อความ โดยกาหนดให้hspace=“ค่าระยะหา่ ง” ภายในแท็กเปิดของแทก็ <img> ดังตัวอยา่ งที่ 5.10ตวั อยา่ งท่ี 5.10 การกาหนดชอ่ งวา่ งของภาพด้วย hspace 1 <html> 2 <head><title>การแทรกรูปภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>ประชาคมเศรษฐกจิ อาเซียน (ASEAN Economic Community หรอื AEC ) </h3> 5 <img src = “images/logo.jpg” align= “right” hspace=“80” > 6 ปัจจุบันประเทศสมาชิกอาเซียน รวม 10 ประเทศ ได้แก่ ไทย พม่า มาเลเซีย 7 อินโดนีเซีย ฟิลิปปินส์ สิงคโปร์ เวียดนาม ลาว กัมพูชาและบรูไน โดยอาเซียนได้ 8 จัดทาพิมพ์เขียวเพ่ือจัดต้ังประชาคมเศรษฐกิจอาเซียน (AEC Blueprint) เป็นแผน 9 บูรณาการงานด้านเศรษฐกิจให้เห็นภาพรวมในการมุ่งไปสู่ AEC ซ่ึงประกอบด้วย 10 แผนงานเศรษฐกิจในด้านต่าง ๆ ใหบ้ รรลเุ ป้าหมายในปี 2558 11 </body> 12 </html> จากตัวอย่างท่ี 5.10 กาหนดให้ hspace=“80” ทาให้มชี ่องว่าง 80 พิกเซล ระหวา่ งรูปภาพกบั ขอ้ ความ ทัง้ ด้านซ้ายและขวา แสดงผลดังภาพท่ี 5.20

 หน่วยท่ี 5 การแทรกรูปภาพ 149 ช่องวา่ งข้อความกบั รปู ภาพ ภาพท่ี 5.20 การแสดงผลการใช้ attribute hspace 6.2 การกาหนดช่องว่างด้านบนและล่างรูปภาพ (Vertical Space) เป็นการเว้นระยะห่างด้านบนและล่างของรูปภาพกบั ขอ้ ความ โดยมีรูปแบบดงั นี้ รปู แบบ attribute vspace <img src = “โฟลเดอร์/ชอ่ื รูปภาพ” vspace = “n”> n = ระยะหา่ งของภาพกับขอ้ ความ กาหนดเป็นพกิ เซล รปู แบบการกาหนดช่องว่างระหว่างด้านบนและล่างของรูปภาพกับข้อความ โดยกาหนดให้vspace=“ค่าระยะหา่ ง” ภายในแท็กเปิดของแทก็ <img> ดงั ตวั อย่างท่ี 5.11ตัวอยา่ งที่ 5.11 การกาหนดชอ่ งวา่ งของภาพดว้ ย vspace 1 <html> <head><title>การแทรกรูปภาพ</title></head> 2 <body bgcolor=“feedd7”> 3 <h3>ประชาคมเศรษฐกิจอาเซียน (ASEAN Economic Community หรอื AEC ) </h3> 4 <img src=“images/logo.jpg” vspace=“50” ><br> 5 ปัจจุบันประเทศสมาชิกอาเซียน รวม 10 ประเทศ ได้แก่ ไทย พม่า มาเลเซีย 6 อินโดนีเซีย ฟิลิปปินส์ สิงคโปร์ เวียดนาม ลาว กัมพูชาและบรูไน โดยอาเซียนได้ 7 จัดทาพิมพ์เขียวเพื่อจัดตั้งประชาคมเศรษฐกิจอาเซียน (AEC Blueprint) เป็นแผน 8 บูรณาการงานด้านเศรษฐกิจให้เห็นภาพรวมในการมุ่งไปสู่ AEC ซึ่งประกอบด้วย 9 แผนงานเศรษฐกิจในดา้ นตา่ ง ๆ ใหบ้ รรลเุ ปา้ หมายในปี 2558 10 </body> 11 </html>

 หน่วยท่ี 5 การแทรกรูปภาพ 150 จากตวั อยา่ งท่ี 5.10 กาหนดให้ vspace=“50” ทาให้มชี ่องวา่ ง 50 พิกเซล ระหว่างรปู ภาพกับข้อความ ทง้ั ดา้ นบนและล่าง แสดงผลดังภาพที่ 5.21 ช่องว่างขอ้ ความกบั รปู ภาพ ภาพท่ี 5.21 การแสดงผลการใช้ attribute vspace7. การแสดงเส้นขอบรปู ภาพ การแสดงรูปภาพแบบมีเส้นขอบ (border) ทาให้ภาพดูเด่นชัดและเป็นสัดส่วนขึ้นเม่ือแสดงพรอ้ มกบั ข้อความจานวนมาก โดยมีรูปแบบดงั นี้ รปู แบบ attribute border <img src = “โฟลเดอร์/ชอ่ื ภาพ” border = “n”> n = ความหนาของเสน้ ขอบภาพ รูปแบบการกาหนดเส้นขอบรูปภาพ โดยกาหนดให้ border=“ความหนาเส้นขอบ” ภายในแท็กเปดิ ของแทก็ <img> ดังตวั อย่างท่ี 5.12

 หนว่ ยท่ี 5 การแทรกรูปภาพ 151ตวั อย่างที่ 5.12 การกาหนดเส้นขอบรปู ภาพ 1 <html> 2 <head><title>การแทรกรปู ภาพ</title></head> 3 <body bgcolor= “feedd7”> 4 <h3>ประชาคมเศรษฐกิจอาเซยี น (ASEAN Economic Community หรอื AEC ) </h3> 5 <img src = “images/logo.jpg” vspace= “10” border= “5”><br> 6 ปัจจุบันประเทศสมาชิกอาเซียน รวม 10 ประเทศ ได้แก่ ไทย พม่า มาเลเซีย 7 อินโดนีเซีย ฟิลิปปินส์ สิงคโปร์ เวียดนาม ลาว กัมพูชาและบรูไน โดยอาเซียนได้ 8 จัดทาพิมพ์เขียวเพื่อจัดตั้งประชาคมเศรษฐกิจอาเซียน (AEC Blueprint) เป็นแผน 9 บูรณาการงานด้านเศรษฐกิจให้เห็นภาพรวมในการมุ่งไปสู่ AEC ซ่ึงประกอบด้วย 10 แผนงานเศรษฐกิจในดา้ นต่าง ๆ ใหบ้ รรลเุ ป้าหมายในปี 2558 11 </body> 12 </html> จากตัวอยา่ งท่ี 5.12 กาหนดให้ border=“5” ทารูปภาพมีเสน้ ขอบหนา 5 พกิ เซล แสดงผลดังภาพที่ 5.22 เส้นขอบของรูปภาพ ภาพท่ี 5.22 การแสดงผลการใช้ attribute border

 หน่วยที่ 5 การแทรกรูปภาพ 1528. การสร้างพ้นื หลงั เวบ็ เพจด้วยรูปภาพ การนารูปภาพมาใช้เป็นพ้ืนหลังของเว็บเพจเป็นการตกแต่งให้ดูน่าสนใจข้ึน แต่ควรเลือกใชภ้ าพท่ีสอี อ่ น ลวดลายไมเ่ ข้มจนเกินไปเพราะอาจทาให้ดตู ัวอักษรบนเว็บเพจได้ไม่ชัดเจน โดยมีรูปแบบดังน้ี รูปแบบ attribute background <body background =“โฟลเดอร์/ช่ือรูปภาพ” > รูปแบบการสรา้ งพนื้ หลงั เวบ็ เพจด้วยรปู ภาพ โดยกาหนดให้ background=“โฟลเดอร์/ชอื่ รปู ภาพ”ภายในแทก็ เปิดของแท็ก <body> ดังตวั อยา่ งท่ี 5.13ตวั อย่างท่ี 5.13 การสรา้ งพน้ื หลังด้วยภาพ 1 <html> 2 <head><title>การแทรกรปู ภาพ</title></head> 3 <body bgcolor= “feedd7” background = “images/bg.gif”> 4 <h3>ประชาคมเศรษฐกิจอาเซยี น (ASEAN Economic Community หรอื AEC ) </h3> 5 <center><img src = “images/logo.jpg” vspace=“10” border=“5”></center> 6 <br> 7 ปัจจุบันประเทศสมาชิกอาเซียน รวม 10 ประเทศ ได้แก่ ไทย พม่า มาเลเซีย 8 อินโดนีเซีย ฟิลิปปินส์ สิงคโปร์ เวียดนาม ลาว กัมพูชาและบรูไน โดยอาเซียนได้ 9 จัดทาพิมพ์เขียวเพื่อจัดตั้งประชาคมเศรษฐกิจอาเซียน (AEC Blueprint) เป็นแผน 10 บูรณาการงานด้านเศรษฐกิจให้เห็นภาพรวมในการมุ่งไปสู่ AEC ซ่ึงประกอบ ด้วย 11 แผนงานเศรษฐกิจในด้านตา่ ง ๆ ให้บรรลุเปา้ หมายในปี 2558 12 </body> 13 </html> 14 จากตวั อย่างท่ี 5.13 กาหนดใหร้ ปู ภาพชื่อ bg.gif จากโฟลเดอร์ images แสดงเป็นพน้ื หลังของเว็บเพจ และไดก้ าหนดให้สีพ้ืนหลังดว้ ยรหสั สี “feedd7” ซึง่ เป็นสชี มพู แสดงผลดังภาพท่ี 5.23

 หน่วยท่ี 5 การแทรกรูปภาพ 153 ภาพพน้ื หลงั เว็บเพจ ภาพท่ี 5.23 การสรา้ งพื้นหลังดว้ ยภาพ การกาหนดพื้นหลังให้คงท่ี ใช้เมื่อการแสดงข้อมูลบนเว็บเพจมีปริมาณมากต้องเลื่อนสกอร์บาร์ดูข้อมูลที่อยู่ด้านล่าง นอกจากข้อมูลบนเว็บเพจเล่ือนขึ้นลงแล้วรูปภาพพ้ืนหลังได้เล่ือนตามด้วยถา้ ไม่ต้องการใหภ้ าพพืน้ หลงั เล่อื นตามต้องกาหนดให้รูปภาพพ้ืนหลังเป็นแบบคงท่ี โดยมีรูปแบบดงั น้ี รปู แบบ attribute bgproperties <body background = “โฟลเดอร์/ชอ่ื ภาพ” bgproperties = “fixed” > รูปแบบการกาหนดพ้นื หลังเวบ็ เพจให้คงที่ โดยกาหนดให้ bgproperties=“fixed” ภายในแท็กเปิดของแท็ก <body> ดังตวั อยา่ งที่ 5.14ตัวอยา่ งท่ี 5.14 การกาหนดพนื้ หลงั แบบคงที่ 1 <html> <head><title>การแทรกรูปภาพ</title></head> 2 <body bgcolor=“feedd7” background=“images/bg.gif” bgproperties=“fixed”> 3 <h3>ประชาคมเศรษฐกิจอาเซียน (ASEAN Economic Community หรอื AEC ) </h3> 4 <center><img src=“images/logo.jpg” vspace=“10” border=“5”></center><br> 5 ปัจจุบันประเทศสมาชิกอาเซียน รวม 10 ประเทศ ได้แก่ ไทย พม่า มาเลเซีย 6 อินโดนีเซีย ฟิลิปปินส์ สิงคโปร์ เวียดนาม ลาว กัมพูชาและบรูไน โดยอาเซียนได้ 7 จัดทาพิมพ์เขียวเพ่ือจัดต้ังประชาคมเศรษฐกิจอาเซียน (AEC Blueprint) เป็นแผน 8 บูรณาการงานด้านเศรษฐกิจให้เห็นภาพรวมในการมุ่งไปสู่ AEC ซ่ึงประกอบด้วย 9 แผนงานเศรษฐกิจในด้านตา่ ง ๆ ให้บรรลเุ ป้าหมายในปี 2558 10 </body> 11 </html>

 หน่วยที่ 5 การแทรกรูปภาพ 154 จากตวั อยา่ งที่ 5.14 กาหนดใหพ้ ้ืนหลังคงท่ีภายในแท็กเปิดของแท็ก <body bgproperties=“fixed”>ทาให้พน้ื หลังไมเ่ ล่ือนตามการเคล่อื นทขี่ องสกอร์บาร์ แสดงผลดังภาพท่ี 5.24 เมอ่ื เลื่อนสกอรบ์ ารภ์ าพพืน้ หลังไม่เลือ่ น ตาม ภาพท่ี 5.24 การกาหนดพนื้ แบบคงที่9. การประยุกต์ใช้คาสัง่ การแทรกรปู ภาพ การรวมคาสั่งต่าง ๆ ของการแทรกรูปภาพ เพื่อให้รปู ภาพทป่ี รากฏบนเวบ็ เพจมคี วามน่าสนใจเหมาะสมและสวยงาม ด้วยการใชร้ ูปแบบตกแต่งรูปภาพทห่ี ลากหลาย ดงั ตัวอย่าง 5.15ตัวอย่างท่ี 5.15 การประยุกตใ์ ชค้ าสั่งการแทรกรปู ภาพ 1 <html> <head><title>การแทรกรูปภาพ</title></head> 2 <body background=“images/bg.gif”> 3 <img src=“images/headm.gif”> 4 <center> 5 <marquee behavior=“alternate” bgcolor=“c5c5c1”> 6 <font size=“5” face=“Impact” color=“blue”>ประชาคมเศรษฐกิจอาเซยี น 7 (<font color=red>ASEAN</font> 8 Economic Community หรือ <font color=“yellow”>AEC</font> ) 9 </marquee> 10 </center> 11 <hr width=“50%” color=“pink”> 12 <p> 13 &nbsp; &nbsp; &nbsp; ปัจจุบันประเทศสมาชิกอาเซียน <i><u>รวม 10 ประเทศ</u> 14 </i>ได้แก่ ไทย พม่า มาเลเซีย อินโดนีเซีย ฟิลิปปินส์ สิงคโปร์ เวียดนาม ลาว 15 กัมพูชาและบรูไน โดยอาเซียนได้จัดทาพิมพ์เขียวเพื่อจัดตั้งประชาคมเศรษฐกิจ

 หน่วยที่ 5 การแทรกรูปภาพ 15516 อ า เซี ย น ^{<b><font color=“orange”> (AEC Blueprint) </font></b>}17 เป็นแผนบูรณาการงานด้านเศรษฐกิจให้เห็นภาพรวมในการมุ่งไปสู่ AEC ซ่ึง18 ประกอบ ด้วยแผนงานเศรษฐกิจในด้านต่าง ๆ ให้ บรรลุเป้าหมายใน ปี19 <s>2556</s><u><b><font color=“bb0ac6”>2558</font></b></u>20 </p>21 <imgsrc=“images/logo.jpg” border=“5”align=“left”hspace=“80”vspace=“10”>22 <p>23 <dl>24 <dt> <font color=“blue” size=“5”> <b>คาขวัญอาเซียน</b></font></dt>25 <dd> <font color=“orange”>วสิ ัยทศั นเ์ ดียว </font>26 <font color=“green”>อัตลกั ษณเ์ ดยี ว</font>27 <font color=“red”>ประชาคมเดยี ว</font>28 (One Vision, One Identity, One Community)29 </dd>30 </dl>31 </p>32 <oltype=“1”>อาเซียนไดก้ าหนดยทุ ธศาสตรก์ ารก้าวไปสปู่ ระชาคมเศรษฐกจิ อาเซียนท่สี าคัญดงั นี้33 <li>การเปน็ ตลาดและฐานการผลติ เดยี วกัน</li>34 <li>การเปน็ ภูมิภาคที่มขี ีดความสามารถในการแข่งขนั สูง</li>35 <li>การเป็นภูมภิ าคที่มกี ารพัฒนาทางเศรษฐกิจทเี่ ท่าเทียมกนั </li>36 <li>การเปน็ ภมู ิภาคท่มี กี ารบูรณาการเข้ากบั เศรษฐกจิ โลก มี 3 ดา้ นได้แก่</li>37 <ol type=“a”>38 <li>เขตการค้าเสรอี าเซยี น <font size=“4” color=“blue”>(AFTA)</font></li>39 <li>กรอบความตกลงดา้ นการค้าบริการ<font size=“4” color=“blue”>40 (AFAS)</font></li>41 <li>เขตการลงทุนอาเซยี น<font size=“4” color=“blue”> (AIA)</font></li>42 </ol>43 </ol> <br><br>44 <hr>45 <address>46 <center>

 หน่วยที่ 5 การแทรกรปู ภาพ 156 47 <font color=“red”>&copy; </font> <font color=“green”> 48 วิทยาลัยอาชวี ศึกษานครศรีธรรมราช ตาบลคลัง อาเภอเมือง จงั หวัด 49 นครศรีธรรมราช </font> 50 </center> 51 </address> 52 </body> 53 </html> จากตัวอยา่ งที่ 5.15 กาหนดให้แสดงรปู ภาพใน บรรทดั ท่ี 2 แสดงพืน้ หลังดว้ ยรปู ภาพ บรรทัดท่ี 3แสดงรูปภาพหวั เว็บเพจ และในบรรทัดที่ 21 แสดงรูปภาพอาเซยี น แสดงผลดังภาพท่ี 5.24 ภาพท่ี 5.24 การสรา้ งพ้นื หลังด้วยภาพแบบคงที่

 หน่วยท่ี 5 การแทรกรปู ภาพ 157 บทสรุป การแสดงรปู ภาพบนเว็บเพจทาให้ดึงดูดความสนใจได้มากขน้ึ รูปภาพทใ่ี ช้ตกแต่งเว็บเพจควรเลือกขนาดของไฟล์ไม่ควรเกิน 40 กิโลไบต์ รูปภาพที่นามาแสดงบนเว็บเพจมี 3 ประเภท ได้แก่รูปภาพนามสกุลไฟล์ .GIF ความละเอียดของรูปภาพสูงสุด 256 สี รูปภาพนามสกุลไฟล์ .JPEG หรือ JPGความละเอียดของรูปภาพสูงสุด 16.7 ล้านสี รูปภาพนามสกุลไฟล์ .PNG ความละเอียดของรูปภาพสนับสนนุ ระบบสหี ลายแบบ ความละเอียดของรูปภาพสงู สุดสีได้ 16.7 สี สาหรับรูปภาพที่มีขนาดใหญ่เกินสามารถลดขนาดและความละเอียดของรปู ภาพได้ดว้ ยโปรแกรม Adobe Photoshop การบนั ทึกรูปภาพควรสร้างโฟลเดอร์แยกจากไฟล์ HTML การแทรกรูปภาพด้วยการแท็ก <img> การแสดงข้อความให้กับรูปภาพเป็นการบอกชื่อของรูปภาพ หรืออธิบายกิจกรรมที่เกิดข้ึนบนรูปภาพ และที่สาคัญข้อความจะแสดงแทนรูปภาพเม่ือรูปภาพแสดงบนเว็บเพจไม่ได้ รูปภาพกาหนดขนาดได้ท้ังแบบความกว้างและความสูง ซึ่งระบุขนาดได้แบบพิกเซลและเปอร์เซ็นต์ การจัดตาแหน่งรูปภาพกับข้อความมี 5 แบบได้แก่ ข้อความชิดขอบบนรูปภาพ ข้อความอยู่กึ่งกลางรูปภาพ ข้อความชิดขอบบนขวารูปภาพรูปภาพอยู่ด้านซ้ายของข้อความ รูปภาพอยู่ทางด้านขวาของข้อความ การกาหนดช่องว่างระหว่างรูปภาพกับข้อความ มี 2 แบบ ได้แก่ การกาหนดช่องว่างด้านซ้ายและขวาระหว่างรูปภาพกับข้อความและการกาหนดช่องวา่ งด้านบนและล่างระหวา่ งรูปภาพกับขอ้ ความ การแสดงเส้นขอบรปู ภาพทาใหร้ ปู ภาพดูเด่นชัดขึ้นเม่ือยู่ร่วมกับข้อความ การสร้างพื้นหลังเว็บเพจด้วยรูปภาพ เป็นการตกแต่งเว็บเพจให้ดูน่าสนใจข้ึน แต่ควรเลือกใช้ภาพท่ีสีอ่อน ลวดลายไม่เข้มจนเกินไปเพราะอาจทาให้ดูตัวอักษรบนเว็บเพจได้ไม่ชัดเจน การประยุกต์ใช้คาส่ังการแทรกรูปภาพเป็นการรวมคาส่ังต่าง ๆ ของการแทรกรูปภาพ เพ่ือให้รูปภาพทป่ี รากฏบนเวบ็ เพจมีความน่าสนใจ เหมาะสมและสวยงาม

 หน่วยที่ 5 การแทรกรปู ภาพ 158 แบบฝกึ หัดหนว่ ยที่ 5 การแทรกรูปภาพตอนที่ 1 จงตอบคาถามตอ่ ไปนี้ (10 คะแนน)1. รูปภาพทใี่ ช้แทรกสาหรบั เว็บเพจมีกี่ประเภทอะไรบา้ งอธิบายพอสังเขป………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………3. จงเขยี นโปรแกรมเพ่อื แสดงรูปภาพพร้อมข้อความและจัดตาแหนง่ ดงั ภาพ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………4. จงบอกความแตกต่างของการกาหนดชอ่ งว่างระหวา่ งรูปภาพแบบ hspace กับ vspace………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

 หน่วยที่ 5 การแทรกรปู ภาพ 1595. ถา้ ตอ้ งการแสดงพน้ื หลังเว็บเพจด้วยรปู ภาพชือ่ testbg.jpg เกบ็ อยใู่ นโฟลเดอร์ imagesกาหนดใหเ้ ป็นต้องพิมพค์ าส่งั แบบใด………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………ตอนท่ี 2 จงใสเ่ ครื่องหมาย หน้าข้อความท่ถี กู และใส่เครือ่ งหมาย หน้าข้อที่ผดิ (10 คะแนน).............1. ไฟลร์ ูปภาพแบบ GIF เปน็ ไฟลส์ าหรบั ภาพถา่ ย.............2. รปู ภาพประเภท PNG จะแสดงบนเว็บเพจแบบโปร่งใส.............3. border=“3” การแสดงเสน้ ขอบรูปภาพหนา 3 พกิ เซล.............4. bgproperties=“fixed” กาหนดใหร้ ูปภาพแสดงตาแหนง่ เดมิ.............5. ไฟลร์ ปู ภาพประเภท JPG หรือ JPEG เป็นรปู ภาพแบบเคล่ือนไหว.............6. <body background=“images/starbg.gif”> การสรา้ งพนื้ หลงั ด้วยรปู ภาพ.............7. <img src=“images/star.jpg” align=“left” > ขอ้ ความแสดงดา้ นซ้ายของรูปภาพ.............8. <img src=“โฟลเดอร์/ช่ือรูปภาพ” alt=“ข้อความ”> ข้อความแสดงแทนรปู ภาพเม่ือ รูปภาพไมส่ ามารถแสดงได้.............9. <img src = “โฟลเดอร์/ชอ่ื รปู ภาพ” width=“400” > ขนาดของรูปภาพปรับเปลี่ยน ตามหน้าตา่ งเว็บเบราวเ์ ซอร์.............10. <img src=“โฟลเดอร์/ชอื่ รปู ภาพ” height=“40%” > ขนาดของรูปภาพคงที่เมื่อมี การปรับเปลย่ี นหน้าต่างเวบ็ เบราวเ์ ซอร์

 หน่วยที่ 5 การแทรกรปู ภาพ 160 ใบงานหนว่ ยท่ี 5 การแทรกรูปภาพคาชีแ้ จง ให้นักศึกษาแบ่งกลุ่มไม่เกิน 3 คน เพ่ือร่วมกนั เขียนโปรแกรม HTML แสดงขอ้ มูลและรปู ภาพตามรปู แบบที่กาหนด โดยมีรายละเอยี ดดงั นี้ 1. แทรกรูปภาพส่วนหวั เวบ็ เพจโดยแสดงข้อความ “ดอกไม้กับอาเซยี น” 2. แทรกรปู ภาพดอกไมป้ ระจาชาตปิ ระเทศสมาชิกอาเซียน 10 ประเทศ โดยสืบคน้ จากอินเทอรเ์ น็ต 3. พมิ พ์และตกแตง่ ข้อความชอ่ื ดอกไม้ประจาชาตปิ ระเทศสมาชกิ อาเซยี น 10 ประเทศ 4. ตกแต่งพ้ืนหลังเว็บเพจดว้ ยรปู ภาพ

 หนว่ ยที่ 5 การแทรกรูปภาพ 161 แบบประเมนิ ใบงาน หน่วยท่ี 51. ชอ่ื ………………………สกุล……………………………….2. ช่อื ………………………สกุล……………………………….3. ชื่อ………………………สกลุ ……………………………….ชั้นเรียน/กลุ่ม..........................................................ลาดบั รายการประเมิน 4 คะแนน 1 รวมเฉล่ีย 32 (10 คะแนน)1 เนอ้ื หาถูกตอ้ งครบถ้วน2 รูปแบบเว็บเพจ3 มีวนิ ยั รับผิดชอบ4 ความสนใจใฝร่ ู้ รวมระดับคะแนน 4 = ดี 3 = ปานกลาง 2 = พอใช้ 1 = ปรับปรุง

 หนว่ ยที่ 5 การแทรกรูปภาพ 162 แบบทดสอบหลงั เรียนหนว่ ยที่ 5 การแทรกรปู ภาพคาชีแ้ จง เลอื กคาตอบท่ีถูกท่ีสุดเพยี งข้อเดยี ว1. สาเหตใุ ดรูปภาพทแี่ สดงบนเว็บเพจไม่ควรมีขนาดเกนิ 40 Kb ก. ความละเอียดของรูปภาพ ข. ความสวยงามของรปู ภาพ ค. ความสมบูรณ์ของรปู ภาพ ง. ช่วงเวลาในการแสดงรปู ภาพ2. ข้อใดเปน็ จดุ เด่นของรปู ภาพแบบ GIF ก. รปู ภาพเคล่อื นไหว ข. รูปภาพไมโ่ ปรง่ ใน ค. รปู ภาพมขี นาดใหญ่ ง. รูปภาพมีความละเอียดมาก3. <img src = “โฟลเดอร์\ชือ่ รปู ภาพ” > เป็นแทก็ ทาหนา้ ที่ใด ก. แสดงรูปภาพบนเว็บเพจ ข. การจัดเกบ็ ภาพบนเว็บเพจ ค. การแสดงพน้ื หลังเว็บดว้ ยรูปภาพ ง. การแสดงพืน้ หลังตารางด้วยรปู ภาพ4. “ border =0” ทาให้รูปภาพมลี กั ษณะแบบใด ก. รูปภาพแสดเสน้ ขอบสีขาว ข. รปู ภาพไมแ่ สดงบนเว็บพจ ค. ไม่แสดงเสน้ ขอบรปู ภาพ ง. แสดงเส้นขอบของรปู ภาพ5. ข้อใดเป็นการแสดงข้อความใหร้ ูปภาพ ก. <img src=“โฟลเดอร์/ชอ่ื รปู ภาพ” alt= “…” > ข. <img picture=“โฟลเดอร์/ชื่อรปู ภาพ” alt= “…” > ค. <img image=“โฟลเดอร์/ช่อื รูปภาพ” alt= “…” > ง. <img pic src=“โฟลเดอร์/ชื่อรปู ภาพ” alt= “…” >

 หน่วยที่ 5 การแทรกรปู ภาพ 1636. ขอ้ ใดเปน็ การกาหนดความสงู ของรูปภาพแบบคงที่ ก. height=“300” ข. height=“50%” ค. height=“fix 300” ง. height=“fix 50%”7. align=“middle” เปน็ การกาหนดตาแหนง่ แบบใด ก. ขอ้ ความชดิ ด้านบนของรปู ภาพ ข. ข้อความชดิ ดา้ นล่างของรูปภาพ ค. ขอ้ ความชดิ กึ่งกลางของรูปภาพ ง. ขอ้ ความชิดดา้ นขวาของรูปภาพ8. การกาหนด hspace=“20” เพื่ออะไร ก. กาหนดขนาดของรูปภาพ ข. กาหนดตาแหน่งของรปู ภาพ ค. การกาหนดความละเอียดของรูปภาพ ง. การกาหนดชอ่ งว่างระหวา่ งภาพกบั ข้อความ9. ถ้ากาหนดให้ vspace=“20” การแสดงภาพเปน็ ลกั ษณะใด ก. การเวน้ ชอ่ งว่างดา้ นซา้ ยขวาของรูปภาพ ข. การเว้นชอ่ งว่างด้านบนลา่ งของรปู ภาพ ค. การแสดงข้อความซา้ ยขวาของรปู ภาพ ง. การแสดงขอ้ ความบนลา่ งของรูปภาพ10. ถ้ากาหนดให้ bgproperties=“fixed” พ้นื หลงั ของเว็บเพจเปน็ อย่างไร ก. เคลอ่ื นท่เี มื่อมีการเลอื่ นสกอรบ์ าร์ ข. อยู่ตาแหนง่ เดิมเม่ือเลือ่ นสกอรบ์ าร์ ค. ขยายขนาดเต็มความกวา้ งของเวบ็ เบราวเ์ ซอร์ ง. ขนาดคงทเี่ มื่อมีการลดขยายของเว็บเบราว์เซอร์

 หนว่ ยที่ 5 การแทรกรปู ภาพ 164 เอกสารอา้ งองิ หน่วยที่ 5กงั วาน อศั วไชยวศนิ อรพนิ ประวตั บิ ริสทุ ธ์ิ คมู่ อื สรา้ งเว็บไซตด์ ้วย HTML5 Css3 & JavaScript กรุงเทพฯ : โปรวชิ ่นั , 2556.จีราวธุ วารนิ ทร.์ พัฒนาเวบ็ ไซต์สมัยใหมด่ ้วย HTML5 CSS3 JavaScript กรงุ เทพฯ : รีไวว่า, 2555.บัญชา ปะสีละเตสัง. สรา้ งเว็บไซต์ด้วย HTML5 ร่วมกับ CSS3 และ jQuery กรงุ เทพฯ : ซีเอด็ ยูเคชชน่ั , 2556.ประชา พฤกษป์ ระเสริฐ. สรา้ งเว็บเพจและเพิ่มลกู เลน่ ดว้ ย HTML & XHTML กรุงเทพฯ : รีไววา่ , 2555.ชิดพงษ์ กวีวรวฒุ ิ. กา้ วทนั อาเซยี น กรงุ เทพฯ : บริษทั ซีเอ็ดยเู คช่นั ,2556Henry Bojack. Blended HTML XHTML and CSS United States of America : GEX, 2010Patrick Carey. HTML XHTML and Dynamic HTML United States of America : GEX, 2010HTML Tutorial [Online]. เขา้ ถงึ ได้จาก : http://www.w3schools.com/html/default.asp วนั ทคี่ ้นข้อมลู 25 สงิ หาคม 2556

 หนว่ ยที่ 5 การแทรกรูปภาพ 165 HTML HTMLHTML HTML