ชุดที่6

1 การนาเสนอรปู ภาพในเวบ็ เพจ คาช้แี จงสาหรับครู การจดั กจิ กรรมการเรียนร้โู ดยใช้ชุดการเรียนร้กู ารสร้างเวบ็ เพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มธั ยมศกึ ษาปีที่ 3 กลมุ่ สาระการเรยี นรู้ การงานอาชีพและเทคโนโลยี ชดุ ท่ี 6 เร่ือง การนาเสนอรปู ภาพในเวบ็ เพจ ครคู วรเตรยี ม ความพร้อมและปฏิบัติตามคาแนะนา ดังต่อไปนี้ 1. ศกึ ษารายละเอียดเกีย่ วกบั การใช้ชุดการเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหสั วิชา ง23102 ชัน้ มัธยมศกึ ษาปีที่ 3 กลมุ่ สาระการเรียนรู้ การงานอาชพี และเทคโนโลยี ชุดท่ี 6 เรื่อง การนาเสนอรปู ภาพในเวบ็ เพจ และเตรยี มสื่อ การเรียนรู้ทีใ่ ช้ 2. การจดั กจิ กรรมการเรยี นรู้ ครูจะตอ้ งจัดกจิ กรรมให้ครบตามทร่ี ะบุไวใ้ น แผนการจัดการเรยี นรู้ เพ่ือใหก้ จิ กรรมเปน็ ไปอย่างต่อเนอ่ื งและบรรลุตามวตั ถุประสงค์ 3. ก่อนทากิจกรรมทุกครงั้ ครูต้องอธบิ าย ชแ้ี จง วธิ ีการปฏิบตั ใิ หช้ ดั เจน ใหน้ ักเรียน เข้าใจตรงกนั จงึ จะทาใหก้ ารจัดการเรียนรู้บรรลุเปา้ หมายและมปี ระสทิ ธภิ าพ 4. ครคู วรกระตุ้นใหน้ กั เรียนทกุ คนมสี ่วนรว่ มในการทากิจกรรม เพื่อเปน็ การฝกึ ให้ นกั เรียนรู้จักการทางานรว่ มกัน ช่วยเหลอื ซงึ่ กนั และกนั รับผดิ ชอบต่อหนา้ ท่แี ละกลา้ แสดงออก สงั เกตพฤตกิ รรมขณะที่ทากิจกรรมและใหค้ วามชว่ ยเหลือนักเรยี นดแู ลอยา่ งใกลช้ ิด

2 การนาเสนอรปู ภาพในเวบ็ เพจ บตั รคาส่ัง สาหรับนกั เรียน ชุดการเรยี นรกู้ ารสร้างเวบ็ เพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชนั้ มธั ยมศึกษาปที ี่ 3 กลุม่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ที่ 6 เรือ่ ง การนาเสนอ รูปภาพในเวบ็ เพจ ใชเ้ วลาจานวน 2 ชัว่ โมง ให้นักเรยี นปฏิบตั ิดังนี้ 1. นักเรยี นแบ่งกลุ่ม กลุม่ ละ 4 – 5 คน โดยคละกนั ระหว่างเกง่ ปานกลางและอ่อน แล้วเลอื กประธานกลุ่ม และเลขานุการกลุม่ พร้อมตัง้ ชือ่ กลมุ่ 2. นักเรยี นรับชุดการเรยี นรู้การสรา้ งเวบ็ เพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหสั วชิ า ง23102 ชั้นมธั ยมศึกษาปที ่ี 3 กลมุ่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ที่ 6 เร่อื ง การนาเสนอรูปภาพในเวบ็ เพจ กลมุ่ ละ 1 ชุด 3. นักเรียนศึกษาบัตรคาสัง่ ให้เข้าใจอย่างละเอียด และปฏิบัตติ ามขัน้ ตอนที่กาหนดให้ 4. นักเรียนอา่ นมาตรฐานการเรียนรู้ ตัวชี้วดั สาระสาคัญและ จดุ ประสงค์การเรียนรู้ 5. นักเรียนทาแบบทดสอบก่อนเรยี นด้วยความซ่ือสตั ยไ์ ม่เปิดดูเฉลยกอ่ น จานวน 10 ข้อ เวลา 15 นาที ลงในกระดาษคาตอบก่อนเรียน 6. ตรวจแบบทดสอบก่อนเรียนดว้ ยตนเอง และเขยี นคะแนนท่ีไดใ้ นช่องคะแนนท่ไี ด้ใน กระดาษคาตอบก่อนเรียน 7. นักเรียนศึกษาบัตรเนือ้ หา ทาบตั รกจิ กรรม แล้วทาตามคาชี้แจงตามลาดบั ดว้ ยความตั้งใจ และความซ่ือสตั ย์ไมเ่ ปดิ ดูเฉลยก่อน 8. เม่อื เสรจ็ ทุกขน้ั ตอน ให้เปดิ ดูบัตรเฉลยกิจกรรม และตรวจคาตอบ หากตอบผิด หรอื ไม่แน่ใจใหก้ ลับไปศึกษาใหม่อกี ครัง้ 9. นกั เรียนทาแบบทดสอบหลงั เรยี นด้วยความซื่อสัตย์ไม่เปิดดูเฉลย จานวน 10 ขอ้ เวลา 15 นาที ลงในกระดาษคาตอบหลงั เรยี น 10. ตรวจแบบทดสอบหลังเรยี นดว้ ยตนเอง และเขยี นคะแนนที่ไดใ้ นช่องคะแนนทไ่ี ดใ้ น กระดาษคาตอบหลงั เรยี น 11. ส่งชดุ การเรียนรกู้ ารสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวชิ า ง23102 ชน้ั มธั ยมศกึ ษาปีท่ี 3 กล่มุ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ให้ครผู ูส้ อนเพ่ือตรวจคาตอบ อีกครั้ง และตรวจสอบคะแนนกอ่ นเรียน ระหวา่ งเรียน และหลงั เรยี น

3 การนาเสนอรูปภาพในเวบ็ เพจ แผนผังแสดงขัน้ ตอนการใช้ ชดุ การเรยี นรูก้ ารสรา้ งเว็บเพจด้วยภาษา HTML มดี งั นี้ อา่ นคาช้แี จง / บัตรคาส่ัง ศึกษาตัวชวี้ ัด และจดุ ประสงค์การเรียนรู้ ทาแบบทดสอบก่อนเรียน ศกึ ษาบตั รเนอ้ื หา และทากจิ กรรมตามบตั รกิจกรรม ทาแบบทดสอบหลงั เรยี น ผา่ นเกณฑ์ 80% ไมผ่ ่านเกณฑ์ ศกึ ษาชุดการเรียนรู้การสร้างเว็บเพจดว้ ยภาษา HTML ชุดต่อไป

4 การนาเสนอรูปภาพในเวบ็ เพจ มาตรฐานการเรยี นรู้ / ตัวช้วี ัด มาตรฐาน ง 3.1 เขา้ ใจ เห็นคณุ ค่า และใช้กระบวนการเทคโนโลยีสารสนเทศใน การสืบคน้ ข้อมลู การเรยี นรู้ การส่ือสาร การแกป้ ญั หา การทางาน และอาชีพอยา่ งมี ประสทิ ธภิ าพ ประสทิ ธิผล มีคุณธรรม ตัวช้วี ดั ง 3.1 ม.3/1 อธิบายหลกั การทาโครงงานที่มีการใช้เทคโนโลยีสารสนเทศ ง 3.1 ม.3/2 เขยี นโปรแกรมภาษาข้นั พื้นฐาน สาระสาคญั เอกสารเวบ็ ทเี่ ขียนด้วยภาษาเอชทีเอ็มแอล นอกจากจะแสดงข้อมลู ที่เป็นข้อความ แลว้ ยงั สามารถแสดงขอ้ มลู ในลกั ษณะของรูปภาพ เพ่อื ให้เอกสารเวบ็ น้นั มีความนา่ สนใจ มากยงิ่ ข้ึน นอกจากนน้ั ยงั ทาใหผ้ ูท้ ่ีเข้ามาอา่ นเอกสารเว็บน้ัน สามารถทาความเขา้ ใจ เนือ้ หาของเอกสารไดร้ วดเรว็ มากย่งิ ขึน้ ซง่ึ เนอ้ื หาในหนว่ ยนจ้ี ะกลา่ วถงึ ชนิดของ แฟม้ ข้อมูลท่สี ามารถนามาประกอบในเอกสารเวบ็ คาสง่ั สาหรบั จดั การเก่ยี วกบั รปู ภาพ ของภาษาเอชทเี อ็มแอล และการกาหนดพน้ื หลงั ของเอกสารเวบ็ ให้เปน็ รูปภาพ จดุ ประสงคก์ ารเรียนรู้ 1. บอกชนิดของรูปภาพทใ่ี ช้ในเอกสารเว็บ คาส่ังสาหรบั จัดการเกี่ยวกบั รูปภาพ ของภาษาเอชทีเอม็ แอล และบอกคาสง่ั สาหรบั กาหนดพื้นหลงั ของเอกสารให้เป็นรปู ภาพได้ 2. ปฏบิ ัติทักษะในการใชง้ านคาสงั่ สาหรับจัดการเก่ียวกับรูปภาพของภาษา เอชทีเอ็มแอล 3. ปฏิบตั ิทกั ษะในการใชง้ านคาสั่งสาหรบั กาหนดพนื้ หลังของเอกสารให้เปน็ รปู ภาพ 4. มีความซ่อื สัตย์ ความใฝร่ ู้ใฝเ่ รียน มีความรับผิดชอบ ความมรี ะเบียบวินยั

5 การนาเสนอรูปภาพในเวบ็ เพจ แบบทดสอบก่อนเรยี น เรอ่ื ง การสร้างเว็บเพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มธั ยมศึกษาปที ่ี 3 กลุม่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 6 เรือ่ ง การนาเสนอรปู ภาพในเวบ็ เพจ คาช้ีแจง นกั เรยี นเลือกคาตอบท่ีถกู ต้องทส่ี ดุ เพียงคาตอบเดยี ว แล้วทาเคร่ืองหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. สิ่งหนึง่ ท่ีทาให้เอกสารเว็บเพจมีความน่าสนใจมากย่งิ ข้ึนคอื ขอ้ ใด ก. สสี นั ทใ่ี ช้ในเอกสารเว็บ ข. การจดั รปู แบบของข้อความ ค. ขอ้ มูลและเนื้อหาของเอกสารเวบ็ ง. รปู ภาพทใี่ ชป้ ระกอบในเอกสารเว็บ 2. ขอ้ ใดกล่าวไม่ถกู ต้องเก่ียวกับแฟ้มข้อมูลรปู ภาพชนิด GIF ก. ทาให้คณุ ภาพของรูปภาพดีข้นึ ข. เปน็ แฟ้มข้อมลู ที่มีการบีบอัดข้อมลู ใหเ้ ลก็ ลง ค. ใชเ้ ทคนคิ การบีบอัดภาพและเกบ็ ค่าของจุดสีเป็น pixel ง. เป็นแฟ้มข้อมูลรูปภาพที่สามารถทาการแสดงผลโดยใช้โปรแกรมเว็บเบราว์เซอร์ 3. ข้อใดเป็นคาส่งั ท่ีใช้สาหรับแทรกรปู ภาพในเอกสารเว็บ ก. <img src = \"web1.jpg\"> ข. <img scr= \"web1.jpg\"> ค. <img src> \"web1.jpg\"</img> ง. <img scr> \"web1.jpg\" </img>

6 การนาเสนอรูปภาพในเว็บเพจ 4. ค่าในการกาหนดความกว้างและความสูงของรปู ภาพ สามารถกาหนดให้ในลักษณะใด ก. เซนติเมตร ข. พิกเซล (Pixel) ค. เปอรเ์ ซ็นต์ (%) ง. ถูกทั้งข้อ ข และ ค 5. คาสัง่ <marquee behavior=\"alternate\">…ตัวอกั ษร...</marquee> คอื ก. จากลา่ งข้ึนบน ข. จากซ้ายไปขวา ค. จากบนลงล่าง ง. วิ่งแบบกระแทรก 6. คาส่ัง <embed src=\"jane.swf\" width=\"400\" height=\"400\"> </embed> จากโจทยเ์ ป็นรปู แบบการแทรกไฟลป์ ระเภทใด ก. เสียง ข. Flash ค. รูปภาพ ง. ถูกท้ังข้อ 2 และ 3 7. คาสั่งในข้อใด คอื คาสงั่ สาหรบั กาหนดพ้นื หลังของเอกสารเวบ็ ใหเ้ ปน็ รูปภาพได้ถูกต้อง ก. < Body Bgcolor = \"bg1.jpg\"> ข. < Body Bgcolor = \"bg1.jpeg\"> ค. <Body Background = \"bg1.jpg\"> ง. <Body Background = \"bg1.jpeg\"> 8. คาส่ังใดทีใ่ ช้สาหรบั ใส่ VDO ไดถ้ กู ตอ้ ง ก. <EMBED Scr= \"jame.wmv \"></EMBED> ข. <EMBED Src= \"jame.wmv \"></EMBED> ค. <Body EMBED Scr= \"jame.wmv \"></EMBED> ง. <Body EMBED Src= \"jame.wmv \"></EMBED>

7 การนาเสนอรูปภาพในเวบ็ เพจ 9. คาสั่งใดถูกตอ้ งท่สี ุด ก. <img src = \"web.jpg\"> ข. <Body background = \"red\"> ค. <font=\"TH SarabunPSK\" Size=\"4\"> ง. <EMBED Scr=\"nut.wmv\"></EMBED> 10. ขอ้ ใดคือไฟล์ภาพท่นี ิยมนามาใชบ้ นเวบ็ เพจมากท่สี ดุ ก. GIF และ TIFF ข. PSD และ TIFF ค. GIF และ JPEG ง. PSD และ JPEG

8 การนาเสนอรปู ภาพในเว็บเพจ กระดาษคาตอบแบบทดสอบกอ่ นเรยี น เรอ่ื ง การสรา้ งเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มัธยมศกึ ษาปที ี่ 3 กลุ่มสาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดที่ 6 เร่อื ง การนาเสนอรปู ภาพในเวบ็ เพจ ช่ือ – นามสกุล ........................................................................ชั้นมัธยมศกึ ษาปีท่ี 3 เลขที่ ........ ขอ้ ก ข ค ง คะแนนเต็ม 10 1 คะแนนได้ 2 3 ผลการประเมิน 4  ดมี าก 5  ดี 6  ปานกลาง 7  ปรับปรงุ 8 9 (ลงชอื่ ).....................................ผปู้ ระเมิน 10 (นายณัฐวฒุ ิ ณรงค์เดชา) วนั ที่ ........เดือน.....................พ.ศ.......... เกณฑ์การประเมนิ อย่ใู นเกณฑ์ ดีมาก คะแนนระหวา่ ง 9 - 10 อยู่ในเกณฑ์ ดี คะแนนระหวา่ ง 7 - 8 อยใู่ นเกณฑ์ ปานกลาง คะแนนระหวา่ ง 5 - 6 อยู่ในเกณฑ์ ปรับปรุง คะแนนระหวา่ ง 0 - 4

9 การนาเสนอรูปภาพในเวบ็ เพจ บตั รเนอื้ หา การนาเสนอรปู ภาพในเวบ็ เพจ 1. ไฟลร์ ูปภาพท่นี ามาใช้บนเว็บ ไฟล์.PNG , ไฟล.์ GIF , ไฟล.์ JPG 2. การปรับแตง่ รูปภาพ การปรบั แตง่ ขนาด หรอื เปล่ียนลกั ษณะอนื่ ๆ สามารถทาได้ดังรปู แบบ ช่ือแอตทรบิ วิ ต์ : Width, Height รปู แบบ : <IMG Width = \"เปอร์เซ็นตห์ รือพิกเซล \" Height= \" เปอร์เซน็ ต์หรือพิกเซล \" ></IMG> ตาแหนง่ ทใี่ ช้ : ภายในแท็กเปดิ ของ <IMG> 3. จัดตาแหน่งของรูปภาพรว่ มกับขอ้ ความ สามารถเปลีย่ นแปลงตาแหนง่ ของรูปภาพได้ด้วยแอตทรบิ ิวต์ Align โดยมรี ปู แบบ ชื่อแอตทริบิวต์ : Align รปู แบบ : <IMG Align= \" top หรือ middle หรอื Bottom หรอื Left หรอื Right \" ></IMG> ตาแหนง่ ที่ใช้ : ภายในแทก็ เปิดของ <IMG>

10 การนาเสนอรูปภาพในเวบ็ เพจ 4. การปรับระยะหา่ งระหว่างรปู ภาพกับข้อความ กาหนดขนาดของช่องว่างระหว่างรปู ภาพกับข้อความได้ทั้งแนวต้ังและ แนวนอนได้ โดยมีรปู แบบ ช่ือแอตทริบิวต์ : VSpace , HSpace รูปแบบ : <IMG VSpace= \" ระยะหา่ งในแนวต้งั \" HSpace= \" ระยะหา่ งในแนวนอน \" ></IMG> ตาแหนง่ ท่ีใช้ : ภายในแทก็ เปิดของ <IMG> 5. การแสดงขอ้ ความแทนเมอื่ รปู ภาพไมแ่ สดง สญั ลักษณ์นีแ้ สดงวา่ ไม่สามารถพบรปู ภาพทตี่ ้องการ ชอ่ื แอตทรบิ วิ ต์ : ALT รปู แบบ : <IMG ALT= \"ข้อความทตี่ ้องการแสดง \" ></IMG> ตาแหนง่ ท่ใี ช้ : ภายในแท็กเปดิ ของ <IMG> 6. เทคนคิ การแสดงรูปภาพอย่างรวดเรว็ วธิ ีท่ี 1 ใช้คาสง่ั Optimize รปู ภาพดว้ ย โปรแกรม Adobe Photoshop หรอื Photo Scape ฯลฯ วิธีที่ 2 การกาหนดขนาดด้วยแอตทรบิ วิ ต์ Width และ Height วธิ ที ี่ 3 การเลือกใช้ชนิดของไฟลใ์ ห้เหมาะสม วธิ ที ี่ 4 การแบ่งรปู ภาพใหญ่ใสต่ าราง วิธที ่ี 5 การแสดงรูปภาพที่มีขนาดเลก็ (Thumbnail)

11 การนาเสนอรปู ภาพในเว็บเพจ การใสร่ ปู ภาพ  ระบดุ ว้ ย Tag img <img src= \" x \" > โดยที่ x คือไฟล์รูปภาพทต่ี ้องการแสดง เชน่ <img src= \"mypic01.jpg \" >  หากไฟล์รปู ภาพไม่ไดเ้ ก็บไว้ท่ี path (ตาแหน่ง)เดียวกบั เอกสาร html จะต้องระบุ path ของรูปภาพไวห้ น้าไฟลด์ ว้ ยเชน่ <img src= \" http://facstaff.swu.ac.th/sasivimo/images/mypic01.jpg\" > <html> <head> <title>Font</title> </head> <body> รูปแมลง <br> <img src=\"rabbit.jpg\"><br> Banner มศว <br> <img src=\"http://www/images/head_title.gif\"> </body> </html>

12 การนาเสนอรปู ภาพในเวบ็ เพจ การปรบั พื้นหลงั (BACKGROUND)  สามารถกาหนดพ้นื หลงั ได้ 2 รปู แบบ  กาหนดดว้ ยสี  กาหนดด้วยรูป ซึ่งเป็น image ไฟล์ (gif,jpg)  รูปแบบของ Tag <body bgcolor= \" x \" > โดยที่ x คือไฟล์รปู ภาพ, ช่ือสี หรอื RGB color เชน่ <body background= \" myBG.gif\"> <body bgcolor= \" pink\"> <body bgcolor=\"#008000\">

13 การนาเสนอรปู ภาพในเว็บเพจ 7. การใส่มัลติมเี ดีย สามารถใส่เสียง ใสว่ ดี ีโอ และภาพยนตรบ์ นเว็บเพจ หรอื ไฟลโ์ ปรแกรม Flash Java Applet และ ActiveX Controls การแทรกเสียงแบค็ กราวน์ (Background) ช่อื แทก็ : Bgsound รูปแบบ : <Bgsound src = \" ชอ่ื ไฟลเ์ สยี ง \" (au, mid,wav) Loop = \"จานวนคร้ังทตี่ ้องการเล่นซา้ \" > การแทรกเสยี งแบบมีตัวควบคุมการเลน่ ชอ่ื แท็ก : Bgsound ชื่อแทก็ : EMBED ช่ือแอตทริบิวต:์ SRC รปู แบบ : <EMBED src= \" ชอื่ ไฟลเ์ สียง \" (au, mid,wav) ></EMBED> ป่มุ ควบคุมการทางานของไฟล์เสียงช่อื แท็ก : EMBED ชอื่ แอตทริบวิ ต์ : SRC ชอ่ื แอตทรบิ วิ ต์ : Loop , Autoplay รูปแบบ : <EMBED Loop= \" true / false \" Autoplay= \" true / false \" > </EMBED> วีดโี อและภาพยนตร์บนเวบ็ เพจ ใชแ้ อตทรบิ ิวต์ของ <EMBED Src= \" ชือ่ ไฟล.์ avi \" หรอื \" ช่อื ไฟล์.mov \" ></EMBED> การแทรกไฟลแ์ ฟล็ก (Flash) <EMBED Src= \" ชอื่ ไฟล์.swf \" ></EMBED> การแทรกไฟล์ Java Applet <Embed src= \" ImageMap.class \" width= \" 150 \" height= \" 90 \" ></Embed>

14 การนาเสนอรปู ภาพในเว็บเพจ บตั รกจิ กรรมที่ 1 คาชี้แจง จงเขียนคาสงั่ ภาษา HTML ตามท่ีข้อความกาหนด ดงั ตอ่ ไปน้ี (10 คะแนน) 1. แทรกไฟล์รูปภาพชอื่ วา่ snr.gif (1 คะแนน) คาส่งั ............................................................................................................................. ........... 2. แทรกไฟลร์ ูปภาพช่ือว่า snr.gif ทีอ่ ยู่ในโฟลเดอร์ images (1 คะแนน) คาสั่ง ........................................................................................................................................ 3. แทรกไฟล์รูปภาพช่ือว่า snr.gif ที่ อยู่ในโฟลเดอร์ images ขนาด 100 พกิ เซล (1 คะแนน) คาสั่ง ............................................................................................................................. ........... 4. แทรกไฟลร์ ูปภาพช่ือวา่ snr.gif ใหข้ ้อความอยตู่ าแหนง่ ก่งึ กลางของภาพ (1 คะแนน) คาสั่ง ........................................................................................................................................ 5. แทรกไฟลร์ ูปภาพชื่อวา่ snr.gif เมื่อตัวชีเ้ มาส์อยเู่ หนือภาพใหม้ ีคาว่า “การสร้างเวบ็ เพจ” (1 คะแนน) คาสั่ง ............................................................................................................................. ........... 6. แทรกไฟล์รปู ภาพช่ือวา่ snr.gif ใหม้ ีระยะหา่ งจากภาพในแนวตง้ั 10 พิกเซล (1 คะแนน) คาสงั่ ............................................................................................................................. ........... 7. แทรกไฟลร์ ปู ภาพช่ือว่า snr.gif ใหม้ รี ะยะหา่ งจากภาพในแนวนอน 10 พิกเซล (1 คะแนน) คาส่งั ........................................................................................................................................ 8. แทรกไฟลร์ ูปภาพชื่อวา่ snr.gif ให้มีกรอบขนาด 5 พิกเซล (1 คะแนน) คาสั่ง ............................................................................................................................. ........... 9. แทรกไฟล์รปู ภาพชื่อว่า computer.jpg เป็นพืน้ หลงั เว็บ (1 คะแนน) คาสัง่ ........................................................................................................................................ 10. แทรกไฟลร์ ูปภาพชื่อวา่ Notebook.swf ขนาดกวา้ ง 600 พกิ เซล (1 คะแนน) คาสงั่ ............................................................................................................................. ...........

15 การนาเสนอรูปภาพในเวบ็ เพจ บตั รกจิ กรรมที่ 2 คาส่งั ให้นักเรยี นนาไฟล์เดิมมาแก้ไข เพิม่ เติมข้อมูลให้สมบูรณ์เช่นข้อความ รปู ภาพ วีดโี อ (youtube) ฯลฯ (20 คะแนน) บนั ทึกชื่อไฟล์ : Ex06-เลขที่ช่อื .html (Ex06-nattawut.html) ส่งงานมาท่ี E-mail: : https://classroom.google.com สง่ ห้องเรยี นของตนเอง พิมพ์หัวข้อ : สง่ งาน Ex6 ชือ่ นกั เรียน ชั้น.. เลขท่ี..

16 การนาเสนอรูปภาพในเว็บเพจ แบบทดสอบหลังเรียน เรื่อง การสรา้ งเว็บเพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ช้ันมธั ยมศึกษาปที ่ี 3 กลมุ่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ที่ 6 เรอ่ื ง การนาเสนอรปู ภาพในเว็บเพจ คาชีแ้ จง นกั เรยี นเลือกคาตอบที่ถกู ต้องที่สดุ เพียงคาตอบเดียว แล้วทาเครื่องหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. คาส่งั ในข้อใด คอื คาสง่ั สาหรับกาหนดพนื้ หลงั ของเอกสารเว็บใหเ้ ป็นรปู ภาพได้ถกู ต้อง ก. < Body Bgcolor = \"bg1.jpg\"> ข. < Body Bgcolor = \"bg1.jpeg\"> ค. <Body Background = \"bg1.jpg\"> ง. <Body Background = \"bg1.jpeg\"> 2. ข้อใดเปน็ คาสงั่ ท่ีใชส้ าหรบั แทรกรปู ภาพในเอกสารเวบ็ ก. <img src = \"web1.jpg\"> ข. <img scr= \"web1.jpg\"> ค. <img src> \"web1.jpg\"</img> ง. <img scr> \"web1.jpg\" </img> 3. คาส่ังใดถูกตอ้ งทส่ี ุด ก. <img src = \"web.jpg\"> ข. <Body background = \"red\"> ค. <font=\"TH SarabunPSK\" Size=\"4\"> ง. <EMBED Scr=\"nut.wmv\"></EMBED>

17 การนาเสนอรปู ภาพในเวบ็ เพจ 4. คา่ ในการกาหนดความกว้างและความสงู ของรปู ภาพ สามารถกาหนดใหใ้ นลักษณะใด ก. เซนตเิ มตร ข. พกิ เซล (Pixel) ค. เปอร์เซ็นต์ (%) ง. ถูกทง้ั ข้อ ข และ ค 5. ข้อใดกล่าวไม่ถูกต้องเก่ียวกับแฟ้มข้อมลู รูปภาพชนดิ GIF ก. ทาใหค้ ณุ ภาพของรปู ภาพดขี ้ึน ข. เปน็ แฟ้มขอ้ มลู ที่มกี ารบีบอดั ข้อมลู ให้เล็กลง ค. ใชเ้ ทคนคิ การบบี อัดภาพและเก็บค่าของจุดสีเป็น pixel ง. เปน็ แฟ้มข้อมูลรูปภาพท่สี ามารถทาการแสดงผลโดยใช้โปรแกรมเวบ็ เบราว์เซอร์ 6. คาส่งั <marquee behavior=\"alternate\">…ตัวอักษร...</marquee> คอื ก. จากล่างขนึ้ บน ข. จากซา้ ยไปขวา ค. จากบนลงลา่ ง ง. ว่ิงแบบกระแทรก 7. คาสง่ั <embed src=\"jane.swf\" width=\"400\" height=\"400\"> </embed> จากโจทยเ์ ป็นรูปแบบการแทรกไฟล์ประเภทใด ก. เสียง ข. Flash ค. รปู ภาพ ง. ถูกทั้งข้อ 2 และ 3 8. คาสง่ั ใดทีใ่ ช้สาหรับใส่ VDO ได้ถูกต้อง ก. <EMBED Scr= \"jame.wmv \"></EMBED> ข. <EMBED Src= \"jame.wmv \"></EMBED> ค. <Body EMBED Scr= \"jame.wmv \"></EMBED> ง. <Body EMBED Src= \"jame.wmv \"></EMBED>

18 การนาเสนอรปู ภาพในเว็บเพจ 9. สง่ิ หนง่ึ ที่ทาให้เอกสารเว็บเพจมีความน่าสนใจมากย่ิงข้นึ คือขอ้ ใด ก. สสี นั ทใ่ี ช้ในเอกสารเว็บ ข. การจัดรปู แบบของข้อความ ค. ขอ้ มลู และเนื้อหาของเอกสารเว็บ ง. รูปภาพท่ีใชป้ ระกอบในเอกสารเวบ็ 10. ขอ้ ใดคือไฟลภ์ าพท่นี ิยมนามาใช้บนเว็บเพจมากท่สี ดุ ก. GIF และ TIFF ข. PSD และ TIFF ค. GIF และ JPEG ง. PSD และ JPEG

19 การนาเสนอรูปภาพในเว็บเพจ กระดาษคาตอบแบบทดสอบหลงั เรียน เรอื่ ง การสรา้ งเว็บเพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศกึ ษาปที ี่ 3 กลมุ่ สาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชุดท่ี 6 เร่อื ง การนาเสนอรูปภาพในเวบ็ เพจ ชื่อ – นามสกลุ ........................................................................ชัน้ มัธยมศึกษาปีท่ี 3 เลขที่ ........ ขอ้ ก ข ค ง คะแนนเต็ม 10 1 คะแนนได้ 2 3 ผลการประเมนิ 4  ดีมาก 5  ดี 6  ปานกลาง 7  ปรบั ปรงุ 8 9 (ลงชอื่ ).....................................ผปู้ ระเมนิ 10 (นายณฐั วุฒิ ณรงคเ์ ดชา) วันที่ ........เดือน.....................พ.ศ.......... เกณฑก์ ารประเมนิ อยูใ่ นเกณฑ์ ดีมาก คะแนนระหวา่ ง 9 - 10 อยใู่ นเกณฑ์ ดี คะแนนระหว่าง 7 - 8 อยู่ในเกณฑ์ ปานกลาง คะแนนระหว่าง 5 - 6 อย่ใู นเกณฑ์ ปรับปรุง คะแนนระหว่าง 0 - 4

20 การนาเสนอรปู ภาพในเวบ็ เพจ เฉลยแบบทดสอบก่อนเรยี น เรอ่ื ง การสร้างเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ช้ันมัธยมศกึ ษาปที ่ี 3 กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดที่ 6 เรื่อง การนาเสนอรูปภาพในเว็บเพจ 1. ง 2. ก 3. ก 4. ง 5. ง 6. ข 7. ค 8. ข 9. ก 10. ค

21 การนาเสนอรูปภาพในเวบ็ เพจ เฉลยแบบทดสอบหลังเรียน เร่ือง การสร้างเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ช้นั มธั ยมศึกษาปที ่ี 3 กลมุ่ สาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชุดที่ 6 เรือ่ ง การนาเสนอรปู ภาพในเวบ็ เพจ 1. ค 2. ก 3. ก 4. ง 5. ก 6. ง 7. ข 8. ข 9. ง 10. ค

22 การนาเสนอรปู ภาพในเว็บเพจ

23 การนาเสนอรูปภาพในเวบ็ เพจ บัตรเฉลยกจิ กรรมท่ี 1 คาส่ัง จงเขยี นคาสง่ั ภาษา HTML ตามท่ขี ้อความกาหนด ดงั ตอ่ ไปนี้ (10 คะแนน) 1. แทรกไฟลร์ ปู ภาพชื่อว่า snr.gif (1 คะแนน) คาสง่ั <img src= \" snr.gif \" > 2. แทรกไฟลร์ ปู ภาพชื่อว่า snr.gif ทอี่ ยู่ในโฟลเดอร์ images (1 คะแนน) คาสัง่ <img src=\" images/snr.gif \"> 3. แทรกไฟลร์ ปู ภาพชื่อว่า snr.gif ท่ี อยใู่ นโฟลเดอร์ images ขนาด 100 พิกเซล (1 คะแนน) คาสง่ั <img src=\" images/snr.gif \" \"width=\" 100\" height=\" 100\" > 4. แทรกไฟล์รปู ภาพชื่อวา่ snr.gif ให้ข้อความอยู่ตาแหน่งกงึ่ กลางของภาพ (1 คะแนน) คาส่งั <center> <img src= \" snr.gif \" ></center> 5. แทรกไฟล์รูปภาพชื่อว่า snr.gif เมอ่ื ตวั ชีเ้ มาส์อยู่เหนอื ภาพให้มีคาวา่ “การสรา้ งเว็บเพจ” (1 คะแนน) คาสง่ั <img src= \" snr.gif \" alt = \" การสร้างเว็บเพจ \" > 6. แทรกไฟลร์ ปู ภาพชื่อว่า snr.gif ให้มีระยะหา่ งจากภาพในแนวตั้ง 10 พิกเซล (1 คะแนน) คาสง่ั <img src=\" snr.gif \" Vspace = \" 10\" > 7. แทรกไฟลร์ ปู ภาพชื่อวา่ snr.gif ให้มีระยะห่างจากภาพในแนวนอน 10 พิกเซล (1 คะแนน) คาสั่ง <img src=\" snr.gif \" Hspace = \" 10\" > 8. แทรกไฟลร์ ปู ภาพชื่อว่า snr.gif ใหม้ กี รอบขนาด 5 พิกเซล (1 คะแนน) คาสั่ง <img src=\" snr.gif \" border = \" 5\" > 9. แทรกไฟล์รูปภาพช่ือว่า computer.jpg เป็นพน้ื หลังเว็บ (1 คะแนน) คาสงั่ <body background=\" computer.jpg \"> 10. แทรกไฟล์รูปภาพชื่อว่า Notebook.swf ขนาดกว้าง 600 พิกเซล (1 คะแนน) คาสัง่ <embed src =\" Notebook.swf \"></embed>

24 การนาเสนอรปู ภาพในเวบ็ เพจ บตั รกจิ กรรมที่ 2 คาสง่ั ให้นักเรยี นนาไฟล์เดิมมาแก้ไข เพ่มิ เตมิ ข้อมูลให้สมบูรณ์ เชน่ ขอ้ ความ รูปภาพ วีดีโอ (youtube) ฯลฯ (20 คะแนน) บันทึกชอ่ื ไฟล์ : Ex06-เลขที่ช่ือ.html (Ex06-nattawut.html) สง่ งานมาท่ี E-mail: : https://classroom.google.com สง่ หอ้ งเรยี นของตนเอง พมิ พ์หวั ข้อ : สง่ งาน Ex6 ชอ่ื นกั เรยี น ชน้ั .. เลขท.ี่ . แนวคาตอบ บตั รเฉลยกจิ กรรมท่ี 2 (ตวั อยา่ งผลงานนักเรยี น)

25 การนาเสนอรูปภาพในเวบ็ เพจ บรรณานุกรม กระทรวงศกึ ษาธกิ าร,สานกั งานคณะกรรมการการศึกษาขน้ั พ้นื ฐาน. (2551). ตัวช้ีวดั และ สาระการเรยี นรูแ้ กนกลาง กลมุ่ สาระการเรียนรูก้ ารงานอาชีพและเทคโนโลยี ตามหลักสูตรแกนกลางการศึกษาขั้นพน้ื ฐาน พุทธศักราช 2551. สานักวชิ าการ และมาตรฐานการศึกษา กรุงเทพฯ จนั ทรเ์ พ็ญ เช้อื พานชิ . (2549). “นวตั กรรมการศึกษาไทย :รูปแบบการเรียนการสอน” นวัตกรรม การจดั การเรยี นรู้ตามแนวปฏิรูปการศึกษา. ศนู ยต์ าราและเอกสารทาง วชิ าการ คณะศึกษาศาสตร์ จฬุ าลงกรณ์มหาวิทยาลัย. ชัยวฒั น์ สทุ ธริ ตั น์ . (2552). 80 นวัตกรรมการจดั การเรียนรู้ท่เี น้นผ้เู รียนเป็นสาคญั . กรงุ เทพฯ: บรษิ ทั แดเนก็ ซ์ อินเตอร์คอร์ปปอเรชั่น. สุวทิ ย์ มูลคา และ อรทัย มูลคา (2545). 19 วธิ ีจัดการเรียนรู้ : เพอื่ พฒั นาความรทู้ กั ษะ. พิมพค์ รง้ั ที่ 3. กรุงเทพฯ : โรงพมิ พภ์ าพพิมพ์ ศนู ย์สง่ เสรมิ วชิ าการ. 231/4 ซอยวดั กระสังข์กระจาย เขตบางกอกใหญ่ กรงุ เทพ. เวบ็ ครณู ัฐวฒุ อิ อนไลน์ web : https://sites.google.com/a/snr.ac.th/nattawut/home

26 การนาเสนอรปู ภาพในเว็บเพจ คานา ชุดการเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศึกษาปีท่ี 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 6 เรื่อง การนาเสนอ รปู ภาพในเว็บเพจ เป็นเครอ่ื งมือสาคญั ในกระบวนการจดั การเรียนการสอน ซึง่ จะช่วยกระตนุ้ กระบวน การเรียนรู้และตรวจสอบคุณภาพการเรียนรู้ของนักเรียน ผู้จัดทาได้ศึกษาวิเคราะห์ หลักสูตรแกนกลาง การศกึ ษาขนั้ พ้นื ฐาน พทุ ธศักราช 2551 อกี ทงั้ ไดศ้ ึกษาคน้ คว้าหาความรู้ ทักษะการปฏิบัติ ทักษะด้าน การคดิ เพื่อนาขอ้ มูลมาประกอบการจดั ทาชดุ การเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML ให้สอดคล้อง กับมาตรฐานการเรียนรู้ ที่มุ่งให้นักเรียนได้รับการพัฒนาท้ังด้านความรู้ คุณธรรม ค่านิยมท่ีถูกต้อง เหมาะสม ชุดการเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศึกษาปีท่ี 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 6 เรื่อง การนาเสนอ รูปภาพในเว็บเพจ มีจุดประสงค์การเรียนรู้ คือ บอกชนิดของรูปภาพท่ีใช้ในเอกสารเว็บ คาสั่งสาหรับ จัดการเก่ียวกับรูปภาพของภาษาเอชทีเอ็มแอล และบอกคาสั่งสาหรับกาหนดพ้ืนหลังของเอกสาร ให้เป็นรูปภาพได้ ปฏิบัติทักษะในการใช้งานคาส่ังสาหรับจัดการเก่ียวกับรูปภาพของภาษาเอชทีเอ็มแอล ปฏิบัติทักษะในการใช้งานคาส่ังสาหรับกาหนดพื้นหลังของเอกสารให้เป็นรูปภาพ มีความซื่อสัตย์ ความใฝ่รูใ้ ฝ่เรยี น มีความรบั ผิดชอบ ความมีระเบียบวินัย ผู้จัดทาหวงั เปน็ อยา่ งย่งิ ว่าชดุ การเรยี นรกู้ ารสรา้ งเวบ็ เพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศึกษาปีที่ 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 6 เร่อื ง การนาเสนอรปู ภาพในเวบ็ เพจ เล่มนจ้ี ะเปน็ ประโยชน์ต่อผู้เรยี นในการเรียนรู้ อย่างมีประสิทธิภาพ มีความเข้าใจ ผลสัมฤทธ์ิทางการเรียนสูงขึ้น ขอบคุณผู้ให้ข้อเสนอแนะตลอดจน ให้การสนับสนุน ทุกทา่ นไว้ ณ โอกาสนี้ ณัฐวฒุ ิ ณรงค์เดชา

27 การนาเสนอรปู ภาพในเวบ็ เพจ สารบัญ เรอื่ ง หน้า คาชีแ้ จงสาหรบั คร.ู .................................................................................................................. 1 บัตรคาส่งั สาหรบั นกั เรยี น..................................................................................................... 2 แผนผงั แสดงขั้นตอนการใช้ชุดการเรียนรู้การสรา้ งเวบ็ เพจด้วยภาษา HTML........................ 3 มาตรฐานการเรยี นรู้ / ตวั ช้วี ดั . ............................................................................................. 4 สาระสาคัญ / จุดประสงค์การเรียนร้.ู ..................................................................................... 4 แบบทดสอบกอ่ นเรียน............................................................................................................ 5 กระดาษคาตอบแบบทดสอบกอ่ นเรียน.................................................................................. 8 บัตรเนอื้ หา ........................................................................................................................... 9 บตั รกจิ กรรมที่ 1 .................................................................................................................. 14 บตั รกิจกรรมท่ี 2 .................................................................................................................. 15 แบบทดสอบหลงั เรียน............................................................................................................. 16 กระดาษคาตอบแบบทดสอบหลงั เรียน................................................................................... 19 เฉลยแบบทดสอบก่อนเรยี น.................................................................................................... 20 เฉลยแบบทดสอบหลังเรียน.................................................................................................... 21 ภาคผนวก............................................................................................................................... 22 บรรณานกุ รม.......................................................................................................................... 25