บทเรียนสำเร็จรูปเล่ม1

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

ข หนำ้ สำรบญั 1 2คำช้ีแจงกำรใชบ้ ทเรียนสำหรับครู 3คำช้ีแจงกำรใชบ้ ทเรียนสำหรับนกั เรียน 5แบบทดสอบก่อนเรียน เร่ืองเร่ิมตน้ กบั ภำษำ HTML 6สำระกำรเรียนรู้ 12กรอบที่ 1 ลกั ษณะของภำษำ HTML 15กรอบที่ 2 โครงสร้ำงพ้นื ฐำนของภำษำ HTML 22กรอบที่ 3 เคร่ืองมือที่ใชส้ ร้ำงเอกสำร HTML 24กรอบท่ี 4 กิจกรรมกำรสร้ำงเอกสำร HTML 26เกณฑก์ ำรใหค้ ะแนนผลงำน 27แบบทดสอบหลงั เรียน เร่ืองเริ่มตน้ กบั ภำษำ HTML 28แบบประเมิน เร่ืองเร่ิมตน้ กบั ภำษำ HTML 29คู่มือเฉลยแบบทดสอบ 30กระดำษคำตอบบรรณำนุกรม

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

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

3 แบบทดสอบก่อนเรียน เรื่องเริ่มต้นกบั ภาษา HTMLคาชี้แจง ใหเ้ ลือกคำตอบที่ถูกที่สุด (กรุณำเขียนคำตอบลงในแบบกำรประเมินตนเองท่ีครูแจกให)้ 1. ขอ้ ใดกล่ำวถูกตอ้ งเกี่ยวกบั กำรเขียนแทก็ ภำษำ HTML ? ก. ในกำรปิ ดแทก็ จะตอ้ งมีเครื่องหมำย / ข. บำงแทก็ ไม่จำเป็นตอ้ งมีแทก็ ปิ ดกส็ ำมำรถใชง้ ำนได้ ค. ในกำรเขียนแทก็ ซอ้ นแทก็ ใหป้ ิ ดแทก็ ท่ีอยใู่ นสุดก่อน ง. ถูกทุกขอ้ 2.โปรแกรมที่ใชส้ ำหรับเขียนและแกไ้ ขโคด้ คือโปรแกรมใด ? ก. EditPlus ข. Dreamweaver ค. Notepad ง. ถูกทุกขอ้ 3. ขอ้ ใดเป็นแทก็ แรกในกำรเขียนแทก็ ภำษำ HTML ? ก. <h2>…..</h2> ข. <html>…..</html> ค. <head>…..</head> ง. <title>…..</title> 4. ขอ้ ใดหมำยถึงแทก็ <body>…</body> ? ก. เป็นส่วนของเน้ือหำเวบ็ เพจ ข. เป็นส่วนเริ่มตน้ และทำ้ ยเอกสำร ค. เป็นส่วนกำหนดรำยละเอียดของหวั เอกสำร ง. เป็นส่วนกำหนดรำยละเอียดของทำ้ ยเอกสำร 5. เน้ือหำที่เขียนข้ึนในเวบ็ เพจไมป่ รำกฏเป็นภำษำไทย มีกำรแกไ้ ขดว้ ยวธิ ีใด? ก. คลิกเมำส์ซำ้ ย เลือกคำสง่ั coding > Thai(Windows) ข. คลิกเมำส์ซำ้ ย เลือกคำสงั่ Encoding > Thai(Windows) ค. คลิกเมำส์ขวำ เลือกคำสั่ง coding > Thai(Windows) ง. คลิกเมำส์ขวำ เลือกคำส่ัง Encoding > Thai(Windows)

4 แบบทดสอบก่อนเรียน เร่ืองเร่ิมต้นกบั ภาษา HTML6. แทก็ <title>…</title> เป็นแทก็ ท่ีใชอ้ ยภู่ ำยในแทก็ ขอ้ ใด ? ก. <html>…</html> ข. <head>…</head> ค. <body>…</body> ง. <h2>…</h2>7. HTML ยอ่ มำจำกอะไร ? ก. Homepage Text Markup Language ข. Hypertext Manual Language ค. Home Text Markup Language ง. Hypertext Markup Language8. โปรแกรมใดใชเ้ ขียนคำส่งั HTML ? ก. Ms-Word ข. Internet Explorer ค. Dos ง. Notepad9. ส่วนที่เป็นคำสงั่ ต่ำงๆ ท่ีใชแ้ สดงผลลพั ธ์บนเวบ็ เบรำวเ์ ซอร์จะถูกพมิ พไ์ วท้ ี่ส่วนใด ? ก. <body> ข. <title> ค. <strat> ง. <head>10. ในกำรจดั เก็บขอ้ มลู ในรูปแบบหนำ้ เวบ็ เพจ ตอ้ งใชน้ ำมสกลุ ใด? ก. .doc ข. .html ค. .int ง. .txt

5 สาระการเรียนรู้  ลกั ษณะของภำษำ HTML  โครงสร้ำงพ้ืนฐำน HTML  เคร่ืองมือท่ีใชส้ ร้ำงเอกสำร HTML มารู้จกัภาษา HTML กนั เถอะ

6 กรอบท่ี 1 ลกั ษณะของภาษา HTML HTML ยอ่ มาจากคาวา่ Hypertext Markup Language เป็ นภาษาหลกั ที่ใช้ในการสร้างไฟล์เว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์(Hypertext Document : ขอ้ ความในเอกสารท่ีเชื่อมโยงถึงขอ้ มูลต่าง ๆ ได)้ ซ่ึงพฒั นาข้ึนมาจากภาษา SGML (Standard Generalized Markup language) องคป์ ระกอบของภาษา HTML สามารถแบ่งออกไดเ้ ป็ น 2 ส่วน คือ ส่วนท่ีเป็ นข้อความท่วั ๆ ไป และส่วนท่ีเป็ นคาส่ังที่ใช้ในการกาหนดรูปแบบของข้อความที่แสดง โดยเรียกคาสงั่ น้ีวา่ แทก็ (Tag)โดยแทก็ คาสง่ั ของ HTML จะอยใู่ นเคร่ืองหมาย< และ > ซ่ึงมีหลกั การเขียนคือ * รูปแบบแท็กจะแยกเป็ น 2 ส่วน โดยจะตอ้ งมีส่วนเร่ิมตน้ ของแท็ก เรียกว่า“แทก็ เปิ ด” และส่วนจบของแทก็ เรียกว่า “แทก็ ปิ ด” โดยส่วนของแทก็ ปิ ดจะตอ้ งมีเคร่ืองหมาย Slash (/) ดงั น้ี <แทก็ เปิ ด> ข้อความ </แท็กปิ ด> เช่น <title> ……</title>

7 กรอบท่ี 1ลกั ษณะของภาษา HTML * ในกรณีท่ีเราตอ้ งการใชแ้ ทก็ ซอ้ นกนั มากกวา่ 1 แทก็ จะตอ้ งใชแ้ ทก็ ปิ ดปิ ดแทก็ ในสุดก่อน แลว้ จึงไล่ปิ ดแทก็ อ่ืน ๆ ตามลาดบั เช่น <h3><b>ข้อความ</b></h3>* บางแทก็ อาจจะไม่ตอ้ งมีแทก็ ปิ ดกส็ ามารถใชง้ านได้ เช่น <br>

8 คาถามกรอบท่ี 11 HTML ยอ่ มาจากคาวา่ อะไร ? ก. Hypartext Markup Language ข. Hypartext Makeup Language ค. Hypertext Markup Language ง. Hypertext Makeup Language2 แทก็ คาสงั่ ของ HTML จะอยใู่ นเคร่ืองหมายใด ? ก. { และ } ข. ( และ ) ค. < และ > ง. # และ #

9คาถามกรอบท่ี 1 (ต่อ)3 ขอ้ ใดกล่าวไม่ถูกต้อง เก่ียวกบั ภาษา HTML ? ก. เป็นภาษาหลกั ที่ใชใ้ นการสร้างเวบ็ เพจ ข. คาสงั่ จะอยใู่ นเครื่องหมาย < และ > ค. คาสงั่ ส่วนใหญ่จะแบ่งเป็น 2 ส่วน คือแทก็ เปิ ดและแทก็ ปิ ด ง. ในแทก็ ปิ ดจะตอ้ งมีเคร่ืองหมาย \4 ขอ้ ใดต่อไปน้ีถกู ตอ้ ง ? ก. <h3>ขอ้ ควำม</h3> ข. <h1>ขอ้ ควำม</a1> ค. <a1>ขอ้ ควำม</a2> ง. <a1>ขอ้ ควำม<b1>

10 คาตอบกรอบที่ 1 ไม่ถูก 2 ไม่ถกู ไม่ถกู คาตอบของข้อ 1 อยู่ตรงนี้ ไม่ถูก 1 HTML ยอ่ มาจากคาวา่ อะไร ? ไม่ถูก ตอบ: ค. Hypertext Markup Language ไม่ถกู ขอ้ ก. Hypartext Markup Language ขอ้ ข. Hypartext Makeup Language ขอ้ ง. Hypertext Makeup Language คาตอบของข้อ 2 อยู่ตรงนี้2 แทก็ คาสงั่ ของ HTML จะอยใู่ นเครื่องหมายใด ? ตอบ: ค. < และ > ขอ้ ก. { และ } ขอ้ ข. ( และ ) ขอ้ ง. # และ #

11คาตอบกรอบที่ 1 (ต่อ) 2 คาตอบของข้อ 3 อยู่ตรงนี้3 ขอ้ ใดกล่าวไม่ถกู ตอ้ งเก่ียวกบั ภาษา HTML ?ตอบ:จ. ง. ในแทก็ ปิ ดจะตอ้ งมีเครื่องหมาย \ขอ้ ก. เป็นภาษาหลกั ท่ีใชใ้ นการสร้างเวบ็ เพจ ไม่ถกูขอ้ ข. คาสง่ั จะอยใู่ นเคร่ืองหมาย < และ > ไม่ถูกขอ้ ค. คาสงั่ ส่วนใหญ่จะแบ่งเป็น 2 ส่วน คือแทก็ เปิ ดและแทก็ ปิ ด ไม่ถูกคาตอบของข้อ 4 อยู่ตรงนี้4 ขอ้ ใดต่อไปน้ีถกู ตอ้ ง ? ไม่ถูก ไม่ถูก ตอบ: ก. <h3>ขอ้ ควำม</h3> ไม่ถูก ขอ้ ข. <h1>ขอ้ ควำม</a1> ขอ้ ค. <a1>ขอ้ ควำม</a2> ขอ้ ง. <a1>ขอ้ ควำม<b1>

12 กรอบที่ 2 โครงสร้างพนื้ ฐานของ HTML โครงสร้างของภาษา HTML แบ่งออกไดเ้ ป็น 4 ส่วนหลกั ดงั น้ี <html> <head> <title>หวั ขอ้ เวบ็ เพจ</title> </head> <body> ส่วนของเน้ือหา </body> </html> <html>…</html> เป็ นแท็กแรกที่ตอ้ งมีในภาษา HTML โดยจะอยู่ที่จุดเร่ิมตน้ ของเอกสารและทา้ ยเอกสารในแต่ละแฟ้ ม <head>…</head> เป็นส่วนกาหนดรายละเอียดหวั เอกสาร HTML เช่น * การกาหนดชื่อเวบ็ เพจ โดยใชแ้ ทก็ <title>…</title> <body>…</body> เป็นส่วนของเน้ือหาเวบ็ เพจ ประกอบดว้ ยขอ้ ความรูปภาพ ตาราง และการเชื่อมต่อไปยงั เอกสารอ่ืน ๆ

13คาถามกรอบที่ 25 แทก็ <title>…</title> เป็นแทก็ ที่ใชอ้ ยภู่ ายในแทก็ ขอ้ ใด ? ก. <h2>…..</h2> ข. <body>…..</body> ค. <head>…..</head> ง. <html>…..</html>6 ขอ้ ใดอธิบายแทก็ <head>…</head> ไดถ้ ูกตอ้ ง ? ก. เป็นส่วนของเน้ือหำเวบ็ เพจ ข. เป็นแทก็ แรกท่ีตอ้ งมีในภำษำ HTML ค. เป็นส่วนกำหนดรำยละเอียดหวั เอกสำร ง. เป็นส่วนกำหนดของจุดเร่ิมตน้ เอกสำร

14คาตอบกรอบที่ 2คาตอบของข้อ 5 อยู่ตรงนี้5 แทก็ <title>…</title> เป็นแทก็ ที่ใชอ้ ยภู่ ายในแทก็ ขอ้ ใด ?ตอบ: ค. <head>…..</head>ขอ้ ก. <h2>…..</h2> ไม่ถกูขอ้ ข. <body>…..</body> ไม่ถูกขอ้ ง. <html>…..</html> ไม่ถกูคาตอบของข้อ 6 อยู่ตรงนี้6 ขอ้ ใดอธิบายแทก็ <head>…</head> ไดถ้ ูกตอ้ ง ?ตอบ: ค. เป็นส่วนกำหนดรำยละเอียดหวั เอกสำรขอ้ ก. เป็นส่วนของเน้ือหำเวบ็ เพจ ไม่ถูกขอ้ ข. เป็นแทก็ แรกที่ตอ้ งมีในภำษำ HTML ไม่ถกูขอ้ ง. เป็นส่วนกำหนดของจุดเริ่มตน้ เอกสำร ไม่ถกู

15 กรอบท่ี 3 เครื่องมอื ทใ่ี ช้สร้างเอกสาร HTML การสร้างเวบ็ เพจดว้ ย HTML จะตอ้ งมีเครื่องมือที่ใช้ในการเขียนและแกไ้ ขโคด้เรียกว่า Text Editor ซ่ึงเป็นโปรแกรมที่ใชส้ าหรับสร้างและแกไ้ ขขอ้ ความ ปัจจุบนั มีอยู่มากมายท่ีใชส้ าหรับแกไ้ ขโคด้ HTML เช่น Notepad, EditPlus และ Dreamweaverเป็ นตน้ เร่ิมต้นเปิ ดโปรแกรม Notepad เลือก start > All Porgrams>Accessories>Notepad

16 วธิ ีการบันทึกเอกสาร HTML เมื่อสร้างเอกสารเสร็จแลว้ จะตอ้ งบนั ทึกเป็นเอกสาร HTML โดยบนั ทึกเป็นนามสกลุ .html หรือ .htm ดงั น้ี 1. เม่ือพิมพโ์ ปรแกรมเสร็จ เลือก File>Save 2. บนั ทึกเป็นไฟลน์ ามสกลุ . html หรือ .htm

17 วธิ ีการดูผลลพั ธ์ หลงั จากที่บนั ทึกเอกสารเรียบร้อยแลว้ ใหด้ บั เบิลคลิกที่ไฟลเ์ วบ็ เพจท่ีสร้างข้ึน ดบั เบิลคลิกท่ีไฟลเ์ วบ็ เพจท่ีสร้างข้ึน หากตอ้ งการมีการแกไ้ ขเวบ็ เพจ ใหก้ ลบั ไปท่ี Notepad และทาการแกไ้ ขหลงั จากที่ไดแ้ กไ้ ขแลว้ ใหบ้ นั ทึกไฟล์ หากพบวา่ เน้ือหาท่ีเขียนข้ึนในเวบ็ เพจไม่ปรากฏเป็นภาษาไทย ใหก้ าหนดการแสดงผลของบราวเซอร์ใหม่ โดยคลิกเมาส์ขวาเลือกคาสงั่ Encoding > Thai(Windows) ภาษาทอ่ี ่านไม่ออก

18คาถามกรอบที่ 37 ขอ้ ใดคือการเขา้ โปรแกรม Notepad ไดถ้ กู ตอ้ ง ? ก. start > Porgrams > Access > Notepad ข. start > Porgrams > Accessories > Notepad ค. start > All Porgrams > Access > Notepad ง. start > All Porgrams > Accessories > Notepad8 การบนั ทึกเอกสารงานเวบ็ เพจ ควรบนั ทึกเป็นนามสกลุ ใด ? ก. .xls ข. .jpg ค. .html ง. .doc

19 คาถามกรอบท่ี 3 (ต่อ)9 โปรแกรมท่ีใชส้ าหรับเขียนและแกไ้ ขโคด้ คือโปรแกรมใด ? ก. Ms-Word ข. Paint ค. Ms-Excel ง. Notepad10 การจดั เกบ็ ขอ้ มลู ในโปรแกรม Notepad ใชค้ าสงั่ ใด ?00 ก. New ข. Open ค. Save ง. Print

20 คาตอบกรอบท่ี 3 คาตอบของข้อ 7 อยู่ตรงนี้7 ขอ้ ใดคือการเขา้ โปรแกรม Notepad ไดถ้ ูกตอ้ ง ?ตอบ: ง. start > All Porgrams > Accessories > Notepad ขอ้ ก. start > Porgrams > Access > Notepad ไม่ถกู ขอ้ ข. start > Porgrams > Accessories > Notepad ไม่ถูก ขอ้ ค. start > All Porgrams > Access > Notepad ไม่ถูก คาตอบของข้อ 8 อยู่ตรงนี้8 การบนั ทึกเอกสารงานเวบ็ เพจ ควรบนั ทึกเป็นนามสกลุ ใด ?ตอบ: ค. .html ขอ้ ก. .xls ไม่ถูก ขอ้ ข. .jpg ไม่ถูก ขอ้ ง. .doc ไม่ถกู

21คาตอบกรอบที่ 3 (ต่อ) คาตอบของข้อ 9 อยู่ตรงนี้9 โปรแกรมที่ใชส้ าหรับเขียนและแกไ้ ขโคด้ คือโปรแกรมใด ?ตอบ: ง. Notepadขอ้ ก. Ms-Word ไม่ถูกขอ้ ข. Paint ไม่ถูกขอ้ ค. Ms-Exel ไม่ถูก คาตอบของข้อ 10 อยู่ตรงนี้10 การจดั เกบ็ ขอ้ มูลในโปรแกรม Notepad ใชค้ าสง่ั ใด ?ตอบ: ค. Saveขอ้ ก. New ไม่ถูกขอ้ ข. Open ไม่ถูกขอ้ ง. Print ไม่ถกู

22 กรอบท่ี 4 กจิ กรรมการสร้างเอกสาร HTML กำรสร้ำงเอกสำร HTML เป็นกำรสร้ำงไฟลเ์ วบ็ เพจ มีโครงสร้ำงหลกัท้งั หมด 4 ส่วน โดยแต่ละส่วนจะตอ้ งพิมพค์ ำสง่ั ใหถ้ กู ตอ้ ง มำปฏิบตั ิกิจกรรมกนั เลย 1. เขำ้ โปรแกรม Notepad 2. คลิกเมนู Format เลือก Font โดยกำหนดแบบตวั อกั ษรเป็น Angsana New ขนำดระหวำ่ ง 16-20 3. พิมพโ์ ครงสร้ำงพ้ืนฐำนของภำษำ HTML 4. หวั ขอ้ เวบ็ เพจใหน้ กั เรียนพิมพเ์ ลขท่ีของตวั เอง 5. ส่วนของเน้ือหำใหน้ กั เรียนพิมพช์ ่ือ- นำมสกลุ ของตวั เอง 6. คลิกเมนู File เลือก Save As 7. ต้งั ชื่อไฟลเ์ วบ็ เพจดว้ ยตวั อกั ษรภำษำองั กฤษเท่ำน้นั แลว้ ตำมดว้ ย .html เช่น test.html

23 คาถามกรอบที่ 41. กำรจดั โครงสร้ำงภำษำ HTML ครบถว้ นหรือไม่2. กำรต้งั ช่ือไฟลเ์ วบ็ เพจถกู ตอ้ งหรือไม่3. เวบ็ เพจสำมำรถแสดงผลไดถ้ ูกตอ้ งหรือไม่ คาถามในกรอบนี้ ไม่ต้องการคาตอบ แต่ให้นักเรียน ไปตรวจสอบผลงานของตัวเอง แล้วไปประเมินผลงานของตนเองตามเกณฑ์อย่าลมื ทาแบบทดสอบ หลงั เรียนเพอ่ื ประเมนิ ตนเอง

24เกณฑ์ในการให้คะแนนผลงาน1. โครงสร้างภาษา HTML มีส่วนประกอบของโครงสร้ำงครบ 4 ส่วน ระดบั คุณภำพดีมำก มีส่วนประกอบของโครงสร้ำง 2 - 3 ส่วน ระดบั คุณภำพดี มีส่วนประกอบของโครงสร้ำงเพียง 1 ส่วน ระดบั คุณภำพพอใช้2. การต้งั ชื่อไฟล์เวบ็ เพจ ต้งั ช่ือไฟลไ์ ดถ้ ูกตอ้ งตำมที่กำหนด ระดบั คุณภำพดีมำก ต้งั ช่ือไฟลไ์ ดถ้ ูกตอ้ งบำงส่วน ระดบั คุณภำพดี ไม่ไดต้ ้งั ชื่อไฟลต์ ำมท่ีกำหนด ระดบั คุณภำพพอใช้3. การแสดงผลของเวบ็ เพจ เวบ็ เพจแสดงผลครบถว้ นสมบูรณ์ ระดบั คุณภำพดีมำก เวบ็ เพจแสดงผลอยำ่ งใดอยำ่ งหน่ึง ระดบั คุณภำพดี เวบ็ เพจไม่แสดงผลหนำ้ เวบ็ และหวั ขอ้ เวบ็ ระดบั คุณภำพพอใช้

25 แบบทดสอบหลงั เรียน เร่ืองเริ่มต้นกบั ภาษา HTMLคาชี้แจง ใหเ้ ลือกคำตอบท่ีถูกที่สุด (กรุณำเขียนคำตอบลงในแบบกำรประเมินตนเองท่ีครูแจกให)้ 1. เน้ือหำท่ีเขียนข้ึนในเวบ็ เพจไมป่ รำกฏเป็นภำษำไทย มีกำรแกไ้ ขดว้ ยวธิ ีใด? ก. คลิกเมำส์ขวำ เลือกคำสั่ง coding > Thai(Windows) ข. คลิกเมำส์ขวำ เลือกคำสง่ั Encoding > Thai(Windows) ค. คลิกเมำส์ซำ้ ย เลือกคำส่งั coding > Thai(Windows) ง. คลิกเมำส์ซำ้ ย เลือกคำส่ัง Encoding > Thai(Windows) 2. ขอ้ ใดหมำยถึงแทก็ <body>.…</body> ? ก. เป็นส่วนกำหนดรำยละเอียดของหวั เอกสำร ข. เป็นส่วนกำหนดรำยละเอียดของทำ้ ยเอกสำร ค. เป็นส่วนเร่ิมตน้ และทำ้ ยเอกสำร ง. เป็นส่วนของเน้ือหำเวบ็ เพจ 3.โปรแกรมที่ใชส้ ำหรับเขียนและแกไ้ ขโคด้ คือโปรแกรมใด ? ก. EditPlus ข. Notepad ค. Dreamweaver ง. ถูกทุกขอ้ 4. ขอ้ ใดกล่ำวถูกตอ้ งเก่ียวกบั กำรเขียนแทก็ ภำษำ HTML ? ก. ในกำรเขียนแทก็ ซอ้ นแทก็ ใหป้ ิ ดแทก็ ที่อยใู่ นสุดก่อน ข. บำงแทก็ ไม่จำเป็นตอ้ งมีแทก็ ปิ ดกส็ ำมำรถใชง้ ำนได้ ค. ในกำรปิ ดแทก็ จะตอ้ งมีเครื่องหมำย / ง. ถูกทุกขอ้ 5. ขอ้ ใดเป็นแทก็ แรกในกำรเขียนแทก็ ภำษำ HTML ? ก. <head>…..</head> ข. <title>…..</title> ค. <html>…..</html> ง. <h2>…..</h2>

26 แบบทดสอบหลงั เรียน เรื่องเร่ิมต้นกบั ภาษา HTML6. HTML ยอ่ มำจำกอะไร ? ก. Hypertext Markup Language ข. Home Text Markup Language ค. Hypertext Manual Language ง. Homepage Text Markup Language7. แทก็ <title>…</title> เป็นแทก็ ท่ีใชอ้ ยภู่ ำยในแทก็ ขอ้ ใด ? ก. <html>…</html> ข. <body>…</body> ค. <head>…</head> ง. <h2>…</h2>8. ส่วนท่ีเป็นคำสงั่ ตำ่ งๆ ที่ใชแ้ สดงผลลพั ธ์บนเวบ็ เบรำวเ์ ซอร์จะถูกพมิ พไ์ วท้ ่ีส่วนใด ? ก. <head> ข. <strat> ค. <title> ง. <body>9. ในกำรจดั เกบ็ ขอ้ มลู ในรูปแบบหนำ้ เวบ็ เพจ ตอ้ งใชน้ ำมสกุลใด? ก. .int ข. .txt ค. .doc ง. .html10. โปรแกรมใดใชเ้ ขียนคำส่งั HTML ? ก. Notepad ข. Internet Explorer ค. Dos ง. Ms-Word

27แบบประเมิน เร่ืองเริ่มต้นกบั ภาษา HTML1. คะแนนจำกกำรทำแบบทดสอบก่อนเรียนได้ ............. คะแนนจำก 10 คะแนน2. คะแนนจำกกำรตอบคำถำมระหวำ่ งเรียนได้ ............. คะแนนจำก 10 คะแนน3. คะแนนจำกกำรศึกษำบทเรียนสำเร็จรูป โดยเปรียบเทียบระดบั เป็นคะแนนคือระดบั คุณภำพดีมำก ไดค้ ะแนน 3 คะแนนระดบั คุณภำพดี ไดค้ ะแนน 2 คะแนนระดบั คุณภำพพอใช้ ไดค้ ะแนน 1 คะแนน3.1 โครงสร้ำงภำษำ HTML ระดบั คุณภำพ ........................ ไดค้ ะแนน ...................3.2 กำรต้งั ชื่อไฟลเ์ วบ็ เพจ ระดบั คุณภำพ ........................ ไดค้ ะแนน ...................3.3 กำรแสดงผลของเวบ็ เพจ ระดบั คุณภำพ ........................ ไดค้ ะแนน ................... รวมคะแนนในข้อ 3 คอื .................. คะแนน จาก 9 คะแนน4. คะแนนจำกกำรทำแบบทดสอบหลงั เรียนได้ ............. คะแนนจำก 10 คะแนนชื่อ – สกลุ ................................................. เลขที่ .............. ช้นั ม.5/......... โรงเรียนสำ อำเภอเวียงสำ จงั หวดั น่ำน

28 คู่มอื เฉลย เฉลยแบบทดสอบก่อนเรียน ขอ้ ที่ 1 2 3 4 5 6 7 8 9 10คาตอบ ง ง ข ก ง ข ง ง ก ข เฉลยแบบทดสอบหลงั เรียน ขอ้ ที่ 1 2 3 4 5 6 7 8 9 10คาตอบ ง ง ข ก ค ก ค ง ง ก คะแนนหลงั เรียนได้มากกว่าก่อนเรียนใช่ไหม ?

29กระดาษคาตอบ แบบทดสอบก่อนเรียน ขอ้ ท่ี 1 2 3 4 5 6 7 8 9 10คาตอบ คาถามระหว่างเรียน ขอ้ ท่ี 1 2 3 4 5 6 7 8 9 10คาตอบ แบบทดสอบหลงั เรียน ขอ้ ท่ี 1 2 3 4 5 6 7 8 9 10คาตอบ

30 บรรณานุกรมณชั ติพงศ์ อูทอง. การสร้างเวบ็ เพจ (ภาษา HTML). พิมพค์ ร้ังท่ี 1. กรุงเทพมหำนคร : สำนกั พิมพเ์ อมพนั ธ์ จำกดั , 2549.ประชำ พฤกษป์ ระเสริฐ. สร้างเวบ็ และเพม่ิ ลูกเล่นด้วย HTML. พมิ พค์ ร้ังท่ี 2. กรุงเทพมหำนคร : สำนกั พิมพ์ ซิมพลฟิ ำย, 2554.วฒุ ิชยั เกษพำนิช. การเขยี นเวบ็ เพจด้วยภาษา HTML. กรุงเทพมหำนคร : ทองพลู พรินติง้ จำกดั , 2546.สุวทิ ย์ มลู คำและสุนนั ทำ สุนทรประเสริฐ. ผลงานทางวชิ าการ สู่...การเลอ่ื นวทิ ยฐานะ. กรุงเทพมหำนคร : ภำพพมิ พ,์ 2550.สุวทิ ย์ มูลคำและอรทยั มูลคำ. 20 วธิ ีการจัดการเรียนรู้. พมิ พค์ ร้ังท่ี 7. กรุงเทพมหำนคร : ภำพพมิ พ,์ 2551.