ชุดที่่3

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

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

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

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

5 ความรูเ้ บื้องต้นเกีย่ วกบั ภาษา HTML แบบทดสอบกอ่ นเรยี น เรือ่ ง การสร้างเว็บเพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ช้ันมัธยมศกึ ษาปที ี่ 3 กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดที่ 3 เร่อื ง ความรู้เบ้ืองต้นเกี่ยวกับภาษา HTML คาช้แี จง นักเรยี นเลือกคาตอบท่ีถูกต้องทสี่ ดุ เพยี งคาตอบเดียว แล้วทาเคร่อื งหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. ข้อใดกล่าวไม่ถกู ต้องเก่ียวกับภาษา HTML ก. ในแท็กปดิ จะต้องมเี คร่ืองหมาย \\ ข. คาสง่ั จะอยใู่ นเคร่ืองหมาย < และ > ค. เปน็ ภาษาหลกั ทใี่ ชใ้ นการสร้างเว็บเพจ ง. คาสงั่ ส่วนใหญ่จะแบง่ เป็น 2 ส่วน คอื แท็กเปดิ และแท็กปดิ 2. คาส่ังในภาษา HTML จะทาหน้าท่ีอย่างไร ก. แท็กเปิด ข. เขยี นแท็กตา่ ง ๆ ค. ควบคมุ การแสดงผลของข้อมูลในเว็บเพจ ง. ถกู ทกุ ข้อ 3. ขอ้ ใดใช้สาหรับควบคมุ การแสดงผลของระบบเอชทีเอม็ แอล (HTML) ก. โปรแกรมเวบ็ เบราวเ์ ซอร์ ข. ปาา ยระบกุ ารแสดงผลหรอื แท็ก ค. เครื่องคอมพวิ เตอร์ทใี่ ช้สาหรับแสดงผลข้อมูล ง. ระบบปฏิบตั กิ ารทใ่ี ช้งานบนเครอ่ื งคอมพิวเตอร์แม่ข่าย 4. ขอ้ ใด ไมใ่ ช่ โปรแกรมเว็บเบราว์เซอร์ ที่ใชส้ าหรบั แสดงผลขอ้ มลู ภาษา HTML ก. Notepad ข. Mozilla Firefox ค. Google chrome ง. Internet Explorer

6 ความรเู้ บ้อื งตน้ เกีย่ วกบั ภาษา HTML 5. การเขียนโปรแกรมด้วยภาษา HTML น้นั จะต้องข้นึ ตน้ และลงทา้ ยด้วยคาสงั่ ในข้อใด ก. [Html] …. [/Html] ข. (Html) …. (/Html) ค. {Html} …. {/Html} ง. <Html> …. </Html> 6. คาส่งั <title>…</title> ใช้สาหรบั ระบเุ กี่ยวกบั เอกสาร HTML ในสว่ นใด ก. เนือ้ หาของเอกสาร ข. สว่ นคาสัง่ ของเอกสาร ค. ส่วนการปดิ ทา้ ยของเอกสาร ง. ส่วนหวั หรือชื่อเรือ่ งของเอกสาร 7. คาส่ังสดุ ทา้ ยทต่ี ้องพมิ พใ์ นภาษา HTML คือคาส่ังใด ก. < /END > ข. < /BODY > ค. < /HTML > ง. < /HEAD > 8. สว่ นของเนือ้ หาของเอกสาร HTML จะอยู่ระหว่างปาายระบุคาสั่ง (Tag) ในขอ้ ใด ก. <Title> … </Title> ข. <Head> … </Head> ค. <Body> … </Body> ง. <Html> … </Html> 9. หากต้องการกาหนดขอ้ ความใหป้ รากฏบนแถบด้านบนสุดของโปรแกรมเว็บเบราว์เซอร์ วา่ “การเขียนโปรแกรมภาษา HTML” จะตอ้ งใชง้ านคาส่ังตรงกบั ข้อใด ก. <Title> การเขียนโปรแกรมภาษา Html </Title> ข. <Html> การเขยี นโปรแกรมภาษา Html </Html> ค. <Body> การเขียนโปรแกรมภาษา Html </Body> ง. <Head> การเขียนโปรแกรมภาษา Html </Head>

7 ความร้เู บอ้ื งต้นเก่ยี วกับภาษา HTML 10. สว่ นขยายที่ช่วยในการเขยี นคาสงั่ การสร้างเวบ็ เพจด้วยภาษา HTML เรียกว่าอะไร ก. Attract ข. Altenet ค. Attribute ง. Adjective

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

9 ความรู้เบ้อื งต้นเก่ียวกบั ภาษา HTML บตั รเน้ือหา ความรูเ้ บือ้ งตน้ เก่ียวกบั ภาษา HTML เว็บเพจ คือ แฟามประเภทขอ้ ความ (text file) ใชช้ ุดคาสัง่ ท่ีเป็น HTML (HTML tag) เพ่ือจดั รปู แบบของเอกสารเว็บเพจ แสดงผลออกทางโปรแกรมประเภท browser (เช่น Chrome, Firefox, Internet Explorer, Netscape Navigator และ Opera เปน็ ตน้ ) สว่ นประกอบของเว็บเพจ  ขอ้ ความ (text) คอื ข้อความตา่ งๆ ที่พมิ พจ์ ากแปน้ พมิ พล์ งไปในแฟ้มเว็บเพจ  แฟม้ ภาพ (image) เป็นสว่ นที่ช่วยเสริมเนือ้ หาทเี่ ปน็ ข้อความ ให้เกดิ ความชดั เจน เข้าใจ และนา่ สนใจมากขนึ้ แบง่ ออกเปน็  ภาพนิ่ง  ภาพเคลอื่ นไหว  ลงิ ค์ (link) / ไฮเปอรล์ งิ ค์ (hyperlink) เป็นส่วนท่ชี ่วยให้ผูอ้ ่านเช่อื มโยงไปยังตาแหน่ง อน่ื ภายในเวบ็ เพจน้นั หรอื ไปยงั เว็บเพจอ่นื หรือ ไปยงั แฟามอนื่ (เชน่ Word, PowerPoint, Excel, PDF เปน็ ต้น) อาจกาหนดใหข้ ้อความ หรอื ภาพเป็นตวั ลงิ คก์ ็ได้ การระบตุ าแหน่งที่ อยรู่ วมทงั้ ชอ่ื แฟามจะต้องถูกต้อง จงึ จะสามารถเปดิ เอกสารได้

ภาพกราฟกิ ซงึ่ 10 นยิ มเป็นไฟล์ ความรเู้ บอ้ื งต้นเกี่ยวกับภาษา HTML รูปภาพ ชนดิ GIF ข้อความล้วนทเ่ี ป็น ภาพถ่ายซง่ึ นยิ ม text ของเวบ็ เพจ เปน็ ไฟลร์ ปู ภาพ ชนิด JPEG ขอ้ ความท่ีเป็น ลิงคส์ าหรบั ติดต่อ ภาพที่เปน็ ลิงค์ ส่งเมล์ สาหรบั เช่อื มโยง ไปยงั เอกสารอนื่

11 ความรเู้ บื้องตน้ เกีย่ วกับภาษา HTML HTML (Hyper Text Markup Language) HTML เป็นภาษาทใี่ ชใ้ นการพัฒนาเวบ็ เพจ เพื่อใหโ้ ปรแกรมเว็บ เบราว์เซอร์ (web brower) ตา่ งๆ สามารถแปลงคาสง่ั แสดงผลในลักษณะของรปู ภาพ ตัวอกั ษร เสยี ง ภาพเคลือ่ นไหว โดยไฟล์ท่ีสร้างจะมนี ามสกลุ .html หรอื .htm ก็ได้ Hyper Text คณุ สมบัตใิ นการเชอื่ มโยง (link) ไปยังท่ีตา่ ง ๆ ได้ Markup Language เปน็ ภาษาคอมพิวเตอร์ ใชก้ าหนดรปู แบบ การจัดวางตาแหนง่ ของสิง่ ตา่ ง ๆ ทปี่ รากฏใน เอกสาร HTML รองรบั ระบบมลั ติมีเดยี (Multimedia) ได้ นั่นคือสงิ่ ท่ี ให้เว็บมี ความแตกตา่ งจากสื่ออนื่ ๆ HTML สามารถทจ่ี ะใชโ้ ปรแกรมเทก็ ซเ์ อดเิ ตอร์ (Text Editor) เช่น Notepad สรา้ งหรอื แก้ไขได้ และบันทึกเปน็ file นามสกุล .htm หรอื .html

12 ความรู้เบ้อื งตน้ เก่ยี วกับภาษา HTML องคป์ ระกอบของเอกสาร HTML ประกอบด้วย 2 ส่วนใหญ่ๆ คือ  ส่วนที่เป็นคาสั่งในการกาหนดรูปแบบของข้อมลู ซ่ึงเรียกวา่ HTML Tag จะอยู่ในเครอ่ื งหมาย “<” และ “>” เช่น <HTML> หรือ <BODY> ซง่ึ โดยมากแล้วจะมี Tag ปิด “</…>” ตามทา้ ยเชน่ <HTML>...</HTML> และ <BODY>…</BODY> เป็นต้น  ส่วนท่เี ป็นเน้ือหาของเอกสาร รปู แบบ ของเอกสาร HTML <html> แจง้ ให้เบราว์เซอร์รู้วา่ เอกสารน้เี ปน็ เอกสาร <head> HTML ซึ่งจะอยู่ในบรรทัดแรกของเอกสารเสมอ <title>เอกสาร HTML </title> และมี Tag </HTML> หรือ Tag </head> <body> บอกคณุ สมบัติโดยทวั่ ๆ ไปของเอกสารนี้ เช่น </body> เอกสารนี้มชี ่ือเอกสาร (title) วา่ อะไร เปน็ ต้น </html> บอกกบั เบราวเซอรว์ ่า ข้อมูลหรือ Tag ท่ีอยู่ ระหวา่ ง <BODY>และ </BODY> จะเป็นสว่ นที่ แสดงต่อผู้ชมเวบ็ เพจ Note การเขียนคาสงั่ HTML สามารถเขียนเปน็ ตวั พิมพ์เล็กหรอื ตัวพิมพ์ใหญ่ก็ได้ (Not Case Sensitive)

13 ความรเู้ บื้องตน้ เกี่ยวกบั ภาษา HTML คาส่งั เบื้องตน้ สาหรับการสรา้ งเว็บเพจ คาส่งั เบอื้ งต้นท่ีจะกล่าวถงึ มีทงั้ หมด 4 คาส่งั ดงั นี้  คาสง่ั เรมิ่ ต้น  สว่ นหวั ของโปรแกรม  กาหนดข้อความในส่วนของ Title bar  สว่ นของเนอ้ื หา คาส่งั เร่มิ ต้น รปู แบบคาส่ัง <HTML>…</HTML> คาสั่ง <HTML> เปน็ คาส่งั เริ่มตน้ ในการเขยี นเว็บเพจดว้ ยภาษา HTML และเมอ่ื ส้ินสดุ โปรแกรม จะใช้ </HTML>

14 ความรู้เบ้อื งต้นเกี่ยวกับภาษา HTML ส่วนหวั ของโปรแกรม รปู แบบคาสัง่ <HEAD> …</HEAD> คาสั่ง <HEAD> เป็นคาส่งั ทใ่ี ช้กาหนดข้อความทีเ่ ป็นชอื่ เรือ่ งและภายในคาสัง่ นี้จะมคี าสัง่ ย่อยอีกคาสงั่ หน่ึง คือ <TITLE> และคาส่งั ปิดทา้ ยก็คือ ปิด </TITLE> และปดิ </HEAD> กาหนดข้อความในส่วนของ TITLE BAR รูปแบบคาสง่ั <TITLE> …</TITLE> คาสั่ง <TITLE> เปน็ คาสง่ั ทใ่ี ช้กาหนดขอ้ ความท่ีจะแสดง ในสว่ นของ Title Bar และจะปิดทา้ ยดว้ ย </TITLE>

15 ความรเู้ บือ้ งต้นเกย่ี วกบั ภาษา HTML ส่วนของเน้อื หา รูปแบบคาสัง่ <BODY> …</BODY> คาสัง่ <BODY> เป็นคาสั่งทีใ่ ชแ้ สดงผลตามท่ีเรา ตอ้ งการ โดยสิ่งทเ่ี ราต้องการทจ่ี ะแสดงผล จะอยู่ในสว่ นของ <BODY> และจะปิดท้าย โปรแกรมดว้ ย </BODY> โดยคาสง่ั ต่างๆ ที่จะใช้ในส่วนของการแสดงผล ตัวอย่างในการเขียนภาษา HTML Notepad แล้ว Save ช่อื ไฟล์ เปน็ นามสกลุ *.HTML เปิดโดย Chrome, Firefox, Internet Explorer, Netscape Navigator เป็นต้น <HTML>…</HTML>, <HEAD>…</HEAD>, <TITLE>…</TITLE>, <BODY>…</BODY> เหลา่ นีเ้ ป็นองค์ประกอบหลัก ในเวบ็ เพจแตล่ ะหนา้ ดงั ตัวอยา่ ง ต่อไปน้ี ฟอร์มหลักในการเขยี นภาษา HTML ซง่ึ จะสังเกตไดว้ า่ ในทุกคาสง่ั เมื่อจบคาส่งั จะต้องมี </> เสมอ เป็นผลทีไดจ้ ากการแสดงใน Internet Explorer จะเหน็ ว่า ขอ้ ความท่ี เขยี นในคาสัง่ <TITLE>…</TITLE> จะแสดงอยใู่ น Title Bar และ จะแสดงเสน้ ปะ

16 ความรเู้ บอื้ งตน้ เก่ียวกับภาษา HTML ตัวอยา่ ง คาส่งั HTML (Hyper Text Markup Language) <html> <HTML> หมายถงึ การระบวุ ่าเอกสารใชภ้ าษา HTML และบรรทดั สดุ ท้ายจะต้องมี </HTML> <head> <title>Hello</title> <HEAD> เพือ่ ระบชุ ่อื เว็บเพจ โดยจะตอ้ งใช้ </head> คาสัง่ <TITLE> เป็นตวั บอก และบรรทดั สุดท้าย <body> จะต้องมี </TITLE> </HEAD> <p>สวัสดี</p> <body> เปดิ ส่วนเนอื้ หา </body> </body> </html> TAG Tag เป็นลกั ษณะเฉพาะของภาษา HTML ใช้ในการระบุรปู แบบคาสง่ั หรอื การลงรหัส คาส่ัง HTML ภายในเคร่ืองหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลกั ษณะ คอื  Tag เด่ยี ว เป็น Tag ท่ไี ม่ต้องมีการปดิ รหสั เชน่ <P>, <HR> เปน็ ต้น  Tag เปิด/ปิดเปน็ Tag ที่ประกอบดว้ ย Tag เปดิ และ Tag ปดิ โดย Tag ปิด จะมี เครื่องหมาย slash (/) นาหน้าคาสั่งใน Tag นน้ั ๆ เช่น <B>…</B>, <P>…</P> เปน็ ตน้

17 ความรเู้ บอื้ งตน้ เกี่ยวกบั ภาษา HTML ATTRIBUTE Attribute เปน็ สว่ นขยายความสามารถของ Tag จะต้องใสภ่ ายในเคร่ืองหมาย < > ใน ส่วน Tag เปิดเท่านนั้ Tag คาส่ัง HTML แต่ละคาส่งั จะมี Attribute แตกต่างกนั ไป และมี จานวนไม่เท่ากัน การระบุ Attribute มากกวา่ 1 Attribute ให้ใชช้ ่องวา่ งเปน็ ตวั ค่นั เชน่ Tag ควบคุมเก่ียวกับรูปภาพ <IMG> มี Attribute ดงั นี้ <IMG SRC=\"filename\" WIDTH=\"n\" HEIGHT=\"n\" ALT=\"text\" BORDER=\"n\"> โดย SRC เป็น Attribute ควบคมุ ชอื่ ไฟลภ์ าพทจี่ ะนามาแสดงผล WIDTH เปน็ Attribute ควบคุมความกว้างของภาพ HEIGHT เป็น Attribute ควบคุมความสงู ของภาพ ALT เปน็ Attribute ควบคุมคาอธิบายภาพ BORDER เป็น Attribute ควบคมุ ขนาดของเสน้ ขอบของภาพ

18 ความรูเ้ บ้ืองต้นเกยี่ วกับภาษา HTML บตั รกิจกรรมที่ 1 คาช้แี จง ใหต้ อบคาถามต่อไปนใ้ี หถ้ ูกต้อง (10 คะแนน) 1. เวบ็ เพจ คอื (2 คะแนน) ............................................................................................................................. .............. ......................................................................................... ................................................... ............................................................................................................................. ............... 2. สว่ นประกอบของเว็บเพจ มีอะไรบ้าง (3 คะแนน) ............................................................................................................................. .............. ............................................................................................................................................ ............................................................................................................................. ............... ............................................................................................................................................ ............................................................................................................................. ............... 3. สว่ นประกอบของเอกสาร HTML มีอะไรบ้าง (2 คะแนน) ............................................................................................................................. .............. ........................................................................................................................................ .... ................................................................................................................. ........................... 4. คาส่ังเบอ้ื งตน้ ทกี่ ลา่ วถึง HTML มที ัง้ หมดก่ีคาสง่ั อะไรบ้าง (3 คะแนน) ............................................................................................................................. .............. ......................................................................................... ................................................... ............................................................................................................................. ............... ............................................................................................................................................ ............................................................................................................................. ...............

19 ความรเู้ บื้องตน้ เกี่ยวกับภาษา HTML บัตรกจิ กรรมท่ี 2 คาสงั่ ใหน้ ักเรยี นสร้าง web เกย่ี วกบั พชื สมนุ ไพรไทย ย่านาง หรอื โสมไทย ใหเ้ ลือกมา 1 ชนดิ ประกอบดว้ ย • ชือ่ ยา่ นาง หรอื โสมไทย บอกคณุ สมบตั ติ ่างๆ ใหส้ มบรู ณ์ พรอ้ มรูปภาพประกอบ • ช้นั เลขท่ี พรอ้ มรูปภาพของนักเรยี น ให้เหมาะสม แล้วแสดงออกหน้าจอ พร้อมมีช่ือ-นามสกลุ ชั้น เลขที่ นักเรยี นออกดว้ ย (10 คะแนน) ตัวอย่าง <html> </head> <body bgcolor=\"pink\"> <head><title>ทดลองสร้างเว็บ</title></head> <center><img src=\"01.jpg\"></center> <p align=\"center\"><font face=\"AngsanaUPC\" size=\"5\" color=\"red\"> <b>น่ี&nbsp;คอื &nbsp;พชื สมนุ ไพรขิง</b><br> <u>ประโยชน์</u><br><i>ช่วยในเรอ่ื งบารงุ โลหติ </i><br> <a href=\"http://www.snr.ac.th\" target=\"blank\" title=\"คลกิ เลย\"> นค่ี อื เวบ็ ของเรา</a><br> <a href=\"mailto:[email protected]\">ติดตอ่ เราไดท้ น่ี ี่นะ!</a><br> <hr width=\"80%\" color=\"yellow\"> </font></p> บนั ทกึ ชื่อไฟล์ : Ex3-เลขท่ีชื่อ.html (Ex3-01nattawut.html) </body> สง่ งานมาท่ี https://classroom.google.com ห้องเรียนของตนเอง </html> สง่ พมิ พ์หัวข้อ ส่งงาน Ex3 ชอื่ นักเรียน ช้นั .. เลขท่ี.. หรอื ส่ง ทาง Googel Drive

20 ความร้เู บอ้ื งตน้ เกี่ยวกบั ภาษา HTML แบบทดสอบหลังเรียน เร่ือง การสร้างเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มธั ยมศกึ ษาปที ี่ 3 กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชดุ ที่ 3 เรือ่ ง ความรูเ้ บ้ืองตน้ เกี่ยวกับภาษา HTML คาช้แี จง นกั เรยี นเลือกคาตอบที่ถูกต้องทสี่ ดุ เพียงคาตอบเดียว แล้วทาเครอื่ งหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. คาสง่ั ในภาษา HTML จะทาหนา้ ที่อยา่ งไร ก. แทก็ เปดิ ข. เขียนแท็กต่าง ๆ ค. ควบคมุ การแสดงผลของข้อมลู ในเว็บเพจ ง. ถูกทกุ ข้อ 2. ส่วนขยายท่ีชว่ ยในการเขียนคาสงั่ การสรา้ งเว็บเพจดว้ ยภาษา HTML เรยี กวา่ อะไร ก. Attract ข. Altenet ค. Attribute ง. Adjective 3. ข้อใด ไมใ่ ช่ โปรแกรมเว็บเบราว์เซอร์ ท่ใี ช้สาหรบั แสดงผลข้อมลู ภาษา HTML ก. Notepad ข. Mozilla Firefox ค. Google chrome ง. Internet Explorer 4. การเขียนโปรแกรมดว้ ยภาษา HTML นั้นจะต้องขนึ้ ต้นและลงทา้ ยดว้ ยคาสงั่ ในข้อใด ก. [Html] …. [/Html] ข. (Html) …. (/Html) ค. {Html} …. {/Html} ง. <Html> …. </Html>

21 ความรู้เบือ้ งต้นเก่ยี วกับภาษา HTML 5. คาส่ัง <title>…</title> ใช้สาหรับระบเุ กยี่ วกบั เอกสาร HTML ในสว่ นใด ก. เนอื้ หาของเอกสาร ข. ส่วนคาสั่งของเอกสาร ค. สว่ นการปิดทา้ ยของเอกสาร ง. สว่ นหวั หรือช่อื เร่ืองของเอกสาร 6. ขอ้ ใดใชส้ าหรบั ควบคมุ การแสดงผลของระบบเอชทเี อม็ แอล (HTML) ก. โปรแกรมเว็บเบราว์เซอร์ ข. ปาา ยระบกุ ารแสดงผลหรอื แท็ก ค. เครอ่ื งคอมพวิ เตอร์ทใ่ี ช้สาหรับแสดงผลข้อมูล ง. ระบบปฏิบตั กิ ารที่ใช้งานบนเครอ่ื งคอมพิวเตอร์แม่ข่าย 7. คาสั่งสุดท้ายทต่ี ้องพิมพใ์ นภาษา HTML คอื คาสั่งใด ก. < /END > ข. < /BODY > ค. < /HTML > ง. < /HEAD > 8. ข้อใดกลา่ วไม่ถูกต้องเก่ยี วกับภาษา HTML ก. ในแทก็ ปดิ จะต้องมเี ครื่องหมาย \\ ข. คาสั่งจะอยูใ่ นเคร่ืองหมาย < และ > ค. เปน็ ภาษาหลักทีใ่ ช้ในการสรา้ งเว็บเพจ ง. คาสงั่ ส่วนใหญจ่ ะแบง่ เปน็ 2 ส่วน คอื แท็กเปิดและแท็กปดิ 9. สว่ นของเนอ้ื หาของเอกสาร HTML จะอยรู่ ะหว่างปาา ยระบุคาส่งั (Tag) ในขอ้ ใด ก. <Title> … </Title> ข. <Head> … </Head> ค. <Body> … </Body> ง. <Html> … </Html>

22 ความร้เู บอ้ื งตน้ เกี่ยวกบั ภาษา HTML 10. หากตอ้ งการกาหนดขอ้ ความใหป้ รากฏบนแถบด้านบนสดุ ของโปรแกรมเวบ็ เบราว์เซอร์ วา่ “การเขียนโปรแกรมภาษา HTML” จะต้องใช้งานคาสั่งตรงกับข้อใด ก. <Title> การเขยี นโปรแกรมภาษา Html </Title> ข. <Html> การเขียนโปรแกรมภาษา Html </Html> ค. <Body> การเขยี นโปรแกรมภาษา Html </Body> ง. <Head> การเขียนโปรแกรมภาษา Html </Head>

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

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

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

26 ความรเู้ บ้ืองตน้ เกยี่ วกบั ภาษา HTML

27 ความรเู้ บื้องต้นเกีย่ วกบั ภาษา HTML บตั รเฉลยกิจกรรมที่ 1 คาชี้แจง ให้ตอบคาถามต่อไปนใ้ี หถ้ ูกต้อง (10 คะแนน) 1. เว็บเพจ คอื (2 คะแนน) แฟมา ประเภทขอ้ ความ (text file) ใชช้ ุดคาสง่ั ทเี่ ปน็ HTML (HTML tag) เพ่ือจดั รูปแบบของเอกสารเวบ็ เพจ แสดงผลออกทางโปรแกรมประเภท browser (เชน่ Chrome, Firefox, Internet Explorer, Netscape Navigator และ Opera เป็นตน้ ) 2. สว่ นประกอบของเวบ็ เพจ มีอะไรบา้ ง (3 คะแนน)  ขอ้ ความ (text) คือ ขอ้ ความต่างๆ ทพ่ี ิมพ์จากแปนา พิมพล์ งไปในแฟมา เวบ็ เพจ  แฟ้มภาพ (image) เปน็ ส่วนทช่ี ่วยเสริมเนื้อหาท่เี ป็นขอ้ ความ ให้เกิดความชัดเจน เขา้ ใจ และน่าสนใจมากข้นึ แบง่ ออกเปน็  ภาพนง่ิ  ภาพเคลื่อนไหว  ลงิ ค์ (link) / ไฮเปอร์ลิงค์ (hyperlink) เป็นสว่ นทชี่ ว่ ยใหผ้ ้อู า่ นเชื่อมโยงไปยงั ตาแหน่ง อ่ืนภายในเวบ็ เพจนน้ั หรือ ไปยังเว็บเพจอื่น หรอื ไปยงั แฟามอ่ืน (เช่น Word, PowerPoint, Excel PDF เปน็ ต้น) อาจกาหนดใหข้ ้อความ หรือ ภาพเปน็ ตวั ลงิ ค์กไ็ ด้ การระบุตาแหน่งที่อยรู่ วมท้ังช่ือแฟมา จะตอ้ งถูกต้อง จึงจะสามารถเปิดเอกสารได้ 3. สว่ นประกอบของเอกสาร HTML มีอะไรบ้าง (2 คะแนน)  สว่ นทีเ่ ปน็ คาส่ังในการกาหนดรปู แบบของข้อมูลซึง่ เรยี กวา่ HTML Tag  สว่ นทเ่ี ปน็ เนอื้ หาของเอกสาร 4. คาสงั่ เบ้อื งตน้ ทีก่ ลา่ วถึง HTML มีทงั้ หมดกคี่ าสั่งอะไรบ้าง (3 คะแนน) คาสงั่ เบ้อื งต้นทีจ่ ะกลา่ วถึง มีท้ังหมด 4 คาส่ัง ดังนี้  คาส่งั เรมิ่ ต้น  สว่ นหัวของโปรแกรม  กาหนดข้อความในสว่ นของ Title bar  สว่ นของเนอื้ หา

28 ความร้เู บื้องต้นเก่ยี วกบั ภาษา HTML บัตรเฉลยกจิ กรรมท่ี 2 คาส่ัง ให้นักเรยี นสรา้ ง web เกี่ยวกบั พืชสมนุ ไพรไทย ย่านาง หรือ โสมไทย ให้เลือกมา 1 ชนิด ประกอบดว้ ย • ช่อื ยา่ นาง หรือโสมไทย บอกคุณสมบัตติ า่ งๆ ให้สมบรู ณ์ พรอ้ มรูปภาพประกอบ • ชน้ั เลขท่ี พร้อมรปู ภาพของนักเรียน ใหเ้ หมาะสม แลว้ แสดงออกหนา้ จอ พร้อมมีช่ือ-นามสกุล ชน้ั เลขท่ี นกั เรียนออกด้วย (10 คะแนน) แนวคาตอบ บตั รเฉลยกจิ กรรมที่ 2 (ตัวอยา่ งผลงานนกั เรียน)

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

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

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