แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                    แผนการจัดการเรียนรู้ที่ 1
เรื่อง การเริ่มต้นกับ HTML                                             เวลา 2 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                       ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 1 เรื่อง การเริ่มต้นกับ HTML
1 สาระสาคัญ
          การศึกษาพื้นฐานในการเขียนโฮมเพจ(Home Page) เพื่อให้ผู้เรียนทราบถึงที่มาโครงสร้างและการ
เขียนคาสั่งเบื้องต้น สามารถนาเครื่องมือ (Tools) มาใช้ในการเขียนโฮมเพจได้อย่างถูกต้องHyper Text
Markup Language เป็นเอกสารแบบไฮเปอร์เท็กซ์ ซึ่งมีความสามารถในการเชื่อมโยงข้อมูลไปยังเอกสารที่
มีความสามารถสูงเหนือกว่าเอกสารทั่วไปเนื่องจากสามารถเปิดข้อมูลภายในได้ ส่วนความสามารถในด้าน
การเชื่อมโยงข้อมูลไปยังเอกสารอื่นๆ ทาได้โดยการใส่สัญลักษณ์พิเศษเข้าไปในเอกสาร หรือคาสั่ง (Tag)
คาสั่งเหล่านี้จะถูกอ่านและถูกทาตามคาสั่งโดยโปรแกรมบราวเซอร์(Brows) ต่างๆ เช่น Microsoft
Internet Explorer, Netscape Navigator
2 มาตรฐานการเรียนรู้
          ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
          1. อธิบายความหมายของ HTML ได้
          2. บอกคุณสมบัติของเครื่องคอมพิวเตอร์ที่จะนามาใช้ในการสร้าง Web Page ได้
          3. เขียนโครงสร้างพื้นฐานของภาษา HTML ได้ถกต้อง
                                                       ู
          4. เขียนคาสั่ง HTML โดยใช้ Notepad เป็น Editor ได้
          5. บันทึกไฟล์ HTML ได้
          6. เปิดไฟล์ HTML ได้
          7. อธิบายคาศัพท์ได้ 6 คาได้
4 สาระการเรียนรู้
          1. คุณสมบัติของเครื่องสามารถนามาใช้ในการสร้าง Web Page
          2. การใช้ Notepad ในการเขียน HTML
5 กระบวนการจัดการเรียนรู้
ขั้นที่ 1 ขั้นนา
          1. นักเรียนร่วมกันอภิปรายว่าการนาเอาภาษา HTML มาใช้ในการสร้างเว็บ มีผลต่อประสิทธิภาพ
การทางานอย่างไร และมีประโยชน์ในด้านใด
          2. แนะนาการเข้าเรียนและศึกษาเนื้อหาบทเรียนและปฏิบัติกิจกรรมผ่านเว็บไซต์
ขั้นที่ 2 ขั้นสอน
          1. นักเรียนทดสอบวัดความรู้ก่อนเรียน เป็นแบบทดสอบแบบเลือกตอบ 4 ตัวเลือก จานวน 40 ข้อ
เวลา 40 นาที
          2. นักเรียนศึกษาคุณสมบัติของเครื่องที่สามารถนามาใช้ในการสร้าง Web Page ครูให้นักเรียนทา
ในสมุดถึงเรื่องคุณสมบัติของเครื่องที่สามารถนามาใช้ในการสร้าง Web Page ส่งครูภายในเวลาที่กาหนด
          3. นักเรียนศึกษาโครงสร้างพื้นฐานของ HTML ครูให้นักเรียนร่วมกันอภิปรายว่าโครงสร้างของ
HTML จาเป็นจะต้องมีกฎในการใช้ HTML และบอกถึงส่วนประกอบของ HTML


 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

          4. นักเรียนศึกษาการใช้ Notepad ในการเขียน HTML ให้นักเรียนเปรียบเทียบความแตกต่าง
ระหว่างโปรแกรมอื่น (Dream webwer), (Java script) ว่าใช้โปรแกรมอะไรสร้าง Web Page ง่ายกว่ากัน
          5. นักเรียนทาการเปิดโปรแกรม Notepad ด้วยการคลิก Star เลือก Program เลือก
Accessories เลือก Notepad ครูให้นักเรียนเปิดเครื่องคอมพิวเตอร์ และลองปฏิบัติทาไปพร้อมกัน
          6. นักเรียนทาการเริ่มเขียนคาสั่ง HTML ใน Notepad ครูให้นักเรียนเขียนคาสั่ง HTML ตามครูสั่ง
ทีละคาสั่ง
          7. นักเรียนทาการจัดเก็บไฟล์เมื่อทาการเขียนคาสั่งเสร็จ ครูให้นักเรียนจัดเก็บไฟล์โดยระบุนามสกุล
ไฟล์เป็น .HTML คลิกที่คาสั่ง แฟ้ม เลือก บันทึกแฟ้มเป็น
          8. นักเรียนศึกษาวิธีการเปิดโปรแกรม Browser เพื่อแสดงผลลัพธ์ของคาสั่ง HTML ครูให้นักเรียน
ลองเปิดด้วยตนเอง และเขียนวิธีเปิดแสดงผลลัพธ์ของคาสั่งลงสมุด ส่งครูภายในเวลาที่กาหนด
ขั้นที่ 3 ขั้นสรุป
          ผู้สอนและนักเรียนร่วมกันอภิปรายสรุปสิ่งที่เรียน
ขั้นที่ 4 ฝึกฝนผู้เรียน
          1. นักเรียนศึกษาข้อมูล เรื่องการเขียนHTML ผ่านเว็บไซต์ http://comkrutae.wordpress.com
ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการเขียนHTML และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)             ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย             1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจแบบทดสอบก่อนเรียน กระตือรือร้นในการทางาน                    การทากิจกรรมกลุ่ม
(Pre-test)                         2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                   รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                   มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาประวัติความเป็นมาของภาษาคอมพิวเตอร์เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
          5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
..................................................................................................................................................................
................................................................................................................................... ...............................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                    แผนการจัดการเรียนรู้ที่ 2
เรื่อง โครงสร้างของเอกสาร HTML                                         เวลา 4 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                       ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 1 เรื่อง การเริ่มต้นกับ HTML
1 สาระสาคัญ
          เอกสารที่เขียนด้วย HTML ก็คล้ายกับเอกสารธรรมดาเพียงแต่เพิ่มเติมคาสั่งของ HTML เข้าไปใน
ตาแหน่งต่างๆ โดยใช้ tag หรือป้ายเป็นตัวบอกตาแหน่งโดย Tag
2 มาตรฐานการเรียนรู้
          ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
          1. บอกรูปแบบโครงสร้างของเอกสาร HTML
          2. ใช้คาสั่ง <HTML> ในการเขียนเอกสารHTML
          3. ใช้คาสั่ง <HEAD> กาหนดข้อความส่วนที่เป็นชื่อเรื่องของ HTML
          4. ใช้คาสั่ง <TITLE> แสดงชื่อของเอกสารหรือรายละเอียดที่เกี่ยวข้องกับเอกสารในหน้านั้นๆ
          5. ระบุคาสั่งเสริมที่ใช้งานในคาสั่ง <META>
          6. ใช้คาสั่ง<BODY> แสดงขอบเขตของเนื้อหาของเว็บเพจ
          7. อธิบายคาศัพท์
4 สาระการเรียนรู้
          1. โครงสร้างพื้นฐานของ HTML
          2. กฎในการใช้ HTML
5 กระบวนการจัดการเรียนรู้
   ขั้นที่ 1 ขั้นนา
       1. นักเรียนแบ่งกลุ่มออกเป็น 2 กลุ่ม แล้วร่วมกันอภิปรายว่าโครงสร้างของเอกสาร HTML มีวิธีการ
ทาอย่างไรบ้าง
    ขั้นที่ 2 ขั้นสอน
          1. นักเรียนช่วยกันเขียนโครงสร้างของเอกสาร HTML ว่าโครงสร้างน่าจะเป็นแบบไหน
          2. นักเรียนศึกษาโครงสร้างของเอกสาร HTML ว่ามีรูปแบบอย่างไรแล้วเขียนโครงสร้างของเอกสาร
HTML ลงในสมุดของตัวเองภายในระยะเวลา 10 นาที
          นักเรียนศึกษาแล้วแบ่งโครงสร้างของเอกสาร HTML ว่าทั้งหมดมีกี่ส่วน ในแต่ละส่วนทาหน้าที่
อย่างไรบ้างเขียนลงสมุดและอธิบายอย่างเข้าใจส่งท้ายคาบ
          นักเรียนศึกษารูปแบบคาสั่งของ <HTML> และบอกว่า <HTML> นี้อยู่ส่วนไหนของโครงสร้างของ
เอกสาร แล้วเขียนรูปแบบลงในสมุดส่งท้ายคาบ
          นักเรียนศึกษารูปแบบคาสั่งของ <HEAD>, <TITLE> และบอกว่า <HEAD>, <TITLE> อยู่ส่วน
ไหนของโครงสร้างของเอกสาร แล้วเขียนรูปแบบลงในสมุดส่งท้ายคาบ
          นักเรียนศึกษารูปแบบคาสั่งของ <BODY> และบอกว่า<BODY> อยู่ส่วนไหนของโครงสร้างของ
เอกสาร แล้วเขียนรูปแบบลงในสมุดส่งท้ายคาบ



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

          นักเรียนศึกษาคาสั่งเสริม (Attribute) ว่าใช้สาหรับการกาหนดอะไรแล้วเขียนคาสั่งเสริมพร้อม
ความหมายของคาสั่งนั้นออกมาด้วย ส่งท้ายคาบ
     ขั้นที่ 3 ขั้นสรุป
          ผู้สอนและนักเรียนร่วมกันอภิปรายสรุปสิ่งที่เรียน
     ขั้นที่ 4 ฝึกฝนผู้เรียน
          1. นักเรียนศึกษาข้อมูล เรื่อง โครงสร้างพื้นฐานของ HTML ผ่านเว็บไซต์
http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการเขียนHTML และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)             ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย             1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                  กระตือรือร้นในการทางาน         การทากิจกรรมกลุ่ม
                                   2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                   รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                   มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาโครงสร้างพื้นฐานของ HTML เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
          5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
........................................................................................................................................... .
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                  ลงชื่อ........................................
                                                                                        (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
......................................................................................................................... .........................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                    แผนการจัดการเรียนรู้ที่ 3
เรื่อง การกาหนดรูปแบบตัวอักษร                                           เวลา 4 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                        ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 2 เรื่อง การปรับแต่งเว็บเพจ
1 สาระสาคัญ
          เอกสาร HTML นอกจากจะใช้แสดงข้อมูลต่างๆ ภายในเว็บไซต์แล้วยังสามารถที่จะกาหนดรูปแบบ
ข้อตัวอักษรให้มีความแตกต่างกันซึ่งได้แก่ การกาหนดรูปแบบตัวอักษร ขนาดสีของตัวอักษรให้มีความ
แตกต่างกันไป เพื่อความสวยงามและเพื่อให้เอกสารในแต่ละหน้ามีความน่าสนใจมากยิ่งขึ้น
2 มาตรฐานการเรียนรู้
          ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
          1. จาแนกรูปแบบตัวอักษรได้
          2. ใช้คาสั่งกาหนดรูปแบบตัวอักษรแบบ Logical Styles ได้
          3. ใช้คาสั่งกาหนดรูปแบบตัวอักษรแบบ Physical Styles ได้
          4. ใช้คาสั่ง <font face> สาหรับกาหนดรูปแบบของตัวอักษรได้
          5. ใช้คาสั่ง <font color> สาหรับกาหนดสีของตัวอักษรเฉพาะตัวอักษรที่ต้องการให้
          6. ใช้คาสั่ง <Body Text> สาหรับกาหนดสีของตัวอักษรทั้งเอกสารได้
          7. ใช้คาสั่ง <font size> สาหรับกาหนดขนาดของตัวอักษรสัมพันธ์ได้
4 สาระการเรียนรู้
          1. การกาหนดรูปแบบตัวอักษร
          2. การกาหนแบบตัวอักษร
          3. การกาหนดสีของตัวอักษร
          4. การกาหนดขนาดของตัวอักษร
          5. การใช้ตัวอักษรพิเศษ
          6. การสร้างตัวอักษร
          7. การกาหนดหัวข้อ
5 กระบวนการจัดการเรียนรู้
     ขั้นที่ 1 ขั้นนา
          1. นักเรียนร่วมกันอภิปรายการออกแบบและกาหนดรูปแบบของตัวอักษรขนาดตัวอักษร สีของ
ตัวอักษร ให้มีความสวยงามและน่าสนใจ
          2. นักเรียนยกตัวอย่างแบบตัวอักษรที่เคยใช้มาซัก 10 แบบอักษร
     ขั้นที่ 2 ขั้นสอน
          1. นักเรียนศึกษาวิธีการกาหนดรูปแบบตัวอักษรแบบ Logical Styles และแบบ Physical Styles
ครูให้นักเรียนอธิบายการกาหนดรูปแบบตัวอักษรด้วยความเข้าใจ
          2. นักเรียนศึกษาวิธีการกาหนดสีของตัวอักษรด้วยตนเอง ครูให้นักเรียนบอกรหัสสีให้ได้ 10 รหัส
          3. นักเรียนศึกษาวิธีการกาหนดขนาดของตัวอักษร ครูให้นักเรียนใช้คาสั่ง<font size>



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

           4. นักเรียนศึกษาวิธีการใช้ตัวอักษรพิเศษ ครูให้นักเรียนใช้คาสั่งของตัวอักษรพิเศษและบอกวิธีบอก
ชื่อคาสั่งนั้นด้วยเรียกตรวจในท้ายคาบ
           5. นักเรียนศึกษาวิธีการสร้างตัวอักษรวิ่ง ครูให้นักเรียนบอกว่าคาสั่งการสร้างตัวอักษรวิ่งนี้สามารถ
ใช้ได้กับโปรแกรมอะไรได้บ้าง
           6. นักเรียนศึกษาวิธีกาหนดลักษณะการเคลื่อนไหวของข้อความของตัวอักษรวิ่ง ครูให้นักเรียนใช้
คาสั่งนี้แล้วลองปฏิบัติ
           7. นักเรียนศึกษาวิธีการกาหนดหัวข้อของเอกสาร ครูให้นักเรียนลองใช้คาสั่งแล้วปฏิบัติแล้วให้บอก
ว่าคาสั่ง <Hx>เป็นคาสั่งใช้ทาอะไร
           8. นักเรียนศึกษาคาศัพท์เกี่ยวกับบทนี้ แล้วบอกความหมายของคาศัพท์เขียนลงในสมุดส่งท้ายคาบ
           9. ครูและนักเรียนช่วยกันสรุป การกาหนดรูปแบบตัวอักษรด้วยการให้นักเรียนปฏิบัติตามคาสั่งที่
ครูเขียนให้บนกระดานทีละตัวอย่าง
           10. ครูให้นักเรียนทาแบบทดสอบและอธิบายคาศัพท์โดยทาในบทเรียนออนไลน์
     ขั้นที่ 3 ขั้นสรุป
           ผู้สอนและนักเรียนร่วมกันอภิปรายสรุปสิ่งที่เรียน
     ขั้นที่ 4 ฝึกฝนผู้เรียน
           1. นักเรียนศึกษาข้อมูล เรื่อง การกาหนดรูปแบบตัวอักษร ผ่านเว็บไซต์
http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
           นักเรียนทดสอบการกาหนดรูปแบบตัวอักษร และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
           1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
           2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
           3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
           4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
          ด้านความรู้ (K)             ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย              1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                   กระตือรือร้นในการทางาน           การทากิจกรรมกลุ่ม
                                    2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                    รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                    มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
           นักเรียนศึกษาการกาหนดรูปแบบตัวอักษรเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
           1. เว็บไซต์ http://www.kruaoy.com
           2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
           3. เว็บไซต์ http://comkrutae.wordpress.com
           4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ

 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
......................................................................................................................... .........................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                       แผนการจัดการเรียนรู้ที่ 4
เรื่อง การตกแต่งเว็บเพจ                                                        เวลา 4 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                               ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 2 เรื่อง การปรับแต่งเว็บเพจ
1 สาระสาคัญ
          การตกแต่งเว็บเพจเป็นการสร้างและใช้คาสั่ง HTML ในการจัดหน้าเอกสารให้มีความเป็นระเบียบ
น่าสนใจมากยิ่งขึ้นซึ่งคาสั่งที่ใช้ในการตกแต่งเว็บเพจ ได้แก่ คาสั่งการขึ้นย่อหน้าใหม่ การขึ้นบรรทัดใหม่
การจัดข้อความภายในเอกสารให้อยู่กึ่งกลาง
2 มาตรฐานการเรียนรู้
          ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
          1. อธิบายการตกแต่งเว็บเพจได้
          2. ใช้คาสั่ง <P> สาหรับจัดข้อความหรือรูปภาพในลักษณะต่างๆ ได้
          3. ใช้คาสั่ง <BR> สาหรับขึ้นบรรทัดใหม่ได้
          4. ใช้คาสั่ง <PRE> ในการแสดงข้อความในรูปแบบเดิมได้
          5. ใช้คาสั่ง <CENTER> จัดข้อความให้อยู่กึ่งกลางได้
          6. ใช้คาสั่ง <HR> สาหรับสร้างเส้นตรงแนวนอนได้
          7. อธิบายคาศัพท์ได้
4 สาระการเรียนรู้
          1. การขึ้นย่อหน้าใหม่
          2. การขึ้นบรรทัดใหม่
          3. การแสดงข้อความในรูปแบบเดิม
          4. การจัดข้อความให้อยู่กึ่งกลาง
          5. การสร้างเส้นตรงแนวนอน
5 กระบวนการจัดการเรียนรู้
     ขั้นที่ 1 ขั้นนา
          1. นักเรียนร่วมกันอภิปรายการตกแต่งเว็บเพจในการจัดหน้าเอกสารให้น่าสนใจมาก ยิ่งขึ้น
          2. นักเรียนแสดงตังอย่างในการตกแต่งเว็บเพจที่เคยพบเห็นมาก่อน
     ขั้นที่ 2 ขั้นสอน
          1. นักเรียนศึกษาวิธีการขึ้นย่อหน้าใหม่ ครูให้นักเรียนนาคาสั่งที่ศึกษาแล้วลองปฏิบัติทาและบอก
ว่าแต่ละคาสั่งแตกต่างกันอย่างไร
          2. นักเรียนศึกษาวิธีการขึ้นบรรทัดใหม่ ครูให้นักเรียนนาคาสั่งที่ศึกษาแล้วลองปฏิบัติทาตามคาสั่งที่
ได้ศึกษา
          3. นักเรียนศึกษาวิธีการแสดงข้อความในรูปแบบเดิม แล้วบอกครูว่าคาสั่งที่ศึกษาผ่านไป 10 นาที
ที่แล้วมีลักษณะอย่างไร
          4. นักเรียนศึกษาวิธีการจัดข้อความให้อยู่กึ่งกลาง ครูให้นักเรียนปฏิบัติคาสั่งจัดกึ่งกลางให้ครูตรวจ



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

          5. นักเรียนศึกษาวิธีการสร้างเส้นตรงแนวนอน เมื่อรู้คาสั่งแล้วครูให้นักเรียนพิมพ์คาสั่งลงในเครื่อง
โดยใช้คาสั่ง <HR> และใช้คาสั่งเสริม <Attribute> ที่ใช้สาหรับการสร้างเส้นตรงแนวนอน คือ <ALIGN>
และบอกตาแหน่งของเส้นคือ Left
          6. ครูยกตัวอย่างในการตกแต่งเว็บเพจให้นักเรียนดู แล้วให้นักเรียนจดตัวอย่างที่หน้ากระดานลงใน
สมุด แล้วลองปฏิบัติตามตัวอย่าง
          7. ครูให้นักเรียนศึกษาคาศัพท์การตกแต่งเว็บเพจให้เวลา 20 นาที ทดสอบชั่วโมงสุดท้าย
          8. ครูให้นักเรียนทาแบบทดสอบและอธิบายคาศัพท์ในบทเรียนออนไลน์
     ขั้นที่ 3 ขั้นสรุป
          1. ครูและนักเรียนร่วมกันสรุปกาหนดรูปแบบตัวอักษรพร้อมกัน
          2. ครูและนักเรียนร่วมกันอธิบายคาศัพท์ในหน่วยที่ 4
     ขั้นที่ 4 ฝึกฝนผู้เรียน
          1. นักเรียนศึกษาข้อมูล เรื่อง การจัดข้อความ ผ่านเว็บไซต์ http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการจัดข้อความ และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)             ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย             1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                  กระตือรือร้นในการทางาน           การทากิจกรรมกลุ่ม
                                   2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                   รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                   มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาการจัดข้อความ เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
          5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                       แผนการจัดการเรียนรู้ที่ 5
เรื่อง รูปแบบบนเว็บเพจ                                                  เวลา 4 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                        ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 2 เรื่อง การปรับแต่งเว็บเพจ
1 สาระสาคัญ
          ในการสร้างเว็บไซต์มีความจาเป็นอย่างมากที่ต้องนารูปภาพมาใช้ประกอบการอธิบายหรือประกอบ
ให้เกิดความสวยงาม น่าสนใจ ถ้าต้องมีคาสั่งที่ใช้ในการจัดการกับรูปภาพที่จะนาแทรกในหน้าเอกสารเพื่อให้
สามารถกาหนดตาแหน่ง ขนาด ระยะห่างระหว่างข้อความกับรูปภาพและอื่นๆ ได้ตามต้องการ
2 มาตรฐานการเรียนรู้
          ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
          จาแนกประเภทของไฟล์รูปภาพ
          อธิบายไฟล์รูปภาพประเภท GIF, JPEG
          ใช้คาสั่ง <IMG SRC> สาหรับระบุไฟล์รูปภาพที่จะนามาแสดง
          ใช้คาสั่ง<IMG ALT> สาหรับแสดงข้อความที่บ่งบอกว่ารูปภาพนี้เกี่ยวกับรูปอะไร
          ใช้คาสั่ง<IMG ALIGN>สาหรับจัดวางรูปภาพหรือข้อความที่อยู่ล้อมรอบรูปภาพ
          ใช้คาสั่งต่างๆ ในการจัดระยะห่างของข้อความกับรูปภาพ
          ใช้คาสั่งต่างๆ ในการปรับแต่งขนาดรูปภาพ ฯลฯ
4 สาระการเรียนรู้
          ประเภทของไฟล์รูปภาพ
          การแทรกรูปภาพ การใช้ข้อความแทนรูปภาพ
          การจัดตาแหน่งข้อความกับรูปภาพ
          การจัดระยะห่างของข้อความกับรูปภาพ
          การปรับแต่งขนาดของรูปภาพ
          การควบคุมข้อความรูปภาพ
          การกาหนดพื้นหลัง (Background)โดยใช้รูปภาพ
5 กระบวนการจัดการเรียนรู้
     ขั้นที่ 1 ขั้นนา
          1. นักเรียนศึกษารูปภาพบนเว็บเพจแล้วร่วมกันอภิปรายในการใส่คาสั่งรูปภาพ และจัดระยะห่าง
ของรูปภาพ ร่วมไปถึงการปรับแต่งขนาดของรูปภาพให้ดูสวยงามและน่าค้นหาข้อมูลเพิ่มยิ่งขึ้น
      ขั้นที่ 2 ขั้นสอน
          1. นักเรียนทบทวนบทเรียนครั้งที่ผ่านมาว่าเรียนเกี่ยวกับอะไร ครูให้นักเรียนบทวนและตอบคาถาม
          2. นักเรียนศึกษาประเภทของไฟล์รูปภาพว่าแต่ละประเภทมีหน้าที่อย่างไร ครูให้นักเรียนเลือก
ประเภทของไฟล์รูปภาพว่า ไฟล์รูปภาพ ใดมีประเภทอย่างไร โดยดูรูปภาพในบทเรียนออนไลน์
          3. นักเรียนศึกษาการแทรกรูปภาพและนามสกุลรูปภาพด้วย ครูให้นักเรียนลองปฏิบัติคาสั่งในการ
แทรกรูปภาพแต่ละภาพมีนามสกุลอะไร จะตรวจดูทีละเครื่องและให้นักเรียนบอกชื่อนามสกุลรูปภาพ



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

          4. นักเรียนศึกษาการใช้ข้อความแทนรูปภาพ โดยมีรูปแบบคาสั่งคือ <IMG ALT= “Message”>
โดยที่ Message คือ ข้อความแทนรูปภาพหรือเป็นชื่อของรูปภาพ
          5. นักเรียนศึกษาการจัดตาแหน่งข้อความและรูปภาพ ครูให้อธิบาย Position ที่ต้องการจัดวาง
รูปภาพ
          6. นักเรียนศึกษาการจัดระยะห่างของข้อความกับรูปภาพโดยจะมีคาสั่งการจัดระยะห่างของ
ข้อความกับรูปภาพ คือ <IMG HSPACE> ใช้สาหรับระบุช่องว่างระหว่างรูปภาพกับข้อความ
          7. นักเรียนศึกษาการปรับแต่งขนาดของรูปภาพโดยจะมีคาสั่งสาหรับการปรับแต่งขนาดของ
รูปภาพดังนี้ รูปแบบคาสั่ง <IMG WIDTH=Pixel> ครูให้นักเรียนบอกค่าของ Pixel ว่าคืออะไร
          8. นักเรียนศึกษาการควบคุมข้อความรอบรูปภาพ โดยจะมีคาสั่งควบคุมข้อความรอบรูปภาพ ดังนี้
รูปแบบคาสั่ง <BR Clear=Position> ครูให้นักเรียนบอกถึง Position ว่ามีอะไรบ้าง
          9. นักเรียนศึกษาการกาหนดพื้นหลัง <Background> โดยใช้รูปภาพโดยจะมีคาสั่งในการกาหนด
พื้นหลังดังนี้ <Body Background = File name> ครูให้นักเรียนบอกถึง Filename มีความหมายว่า
อย่างไรและให้ลองปฏิบัติ
     ขั้นที่ 3 ขั้นสรุป
          1. ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน
     ขั้นที่ 4 ฝึกฝนผู้เรียน
          นักเรียนศึกษาข้อมูล เรื่องการจัดการรูปภาพผ่านเว็บไซต์ http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการจัดการรูปภาพ และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)              ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย              1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                   กระตือรือร้นในการทางาน         การทากิจกรรมกลุ่ม
                                    2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                    รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                    มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาการจัดการรูปภาพเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ

 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                   แผนการจัดการเรียนรู้ที่ 6
เรื่อง การเชื่อมโยงเอกสาร (Hyperlink)                                    เวลา 4 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                         ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ
1 สาระสาคัญ
          HTML เป็นไฟล์ Hyper link ที่สามารถเชื่อมโยงเอกสารต่อกันได้ คือ ผู้เยี่ยมชมเว็บจะสามารถเปิด
อ่านข้อมูลในแต่ละหน้าได้อย่างต่อเนื่อง       ทาให้มีความสะดวดรวดเร็วในการใช้งานการเชื่อมโยงเอกสาร
สามารถแบ่งได้เป็น 2 ประเภท คือ Internal Link และ External Link
2 มาตรฐานการเรียนรู้
          ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
          แบ่งประเภทการเชื่อมโยงเอกสาร
          อธิบายการเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน
          ใช้คาสั่งในการเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน
          ใช้คาสั่ง <A HREF> ในการเชื่อมโยงไปยังไฟล์อื่น
          ใช้คาสั่ง <A HREF> ในการเชื่อมโยงไปยังไฟล์อื่นโดยมีกาหนดตาแหน่ง
          ใช้คาสั่ง <A HREF> ในการเชื่อมโยง Web Sites อื่น
          ใช้คาสั่ง <A HREF> ในการเชื่อมโยงโดยการใช้รูปภาพ
          ใช้คาสั่ง <A HREF> ในการเชื่อมโยงกับ E-Mail
          ใช้คาสั่ง <Body Link> ในการกาหนดสีตัวอักษรที่ใช้เชื่อมโยงข้อมูล
4 สาระการเรียนรู้
          การเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน
          การเชื่อมโยงไปยังไฟล์อื่นหรือ Web Page อื่น
          การเชื่อมโยงไปยังไฟล์อื่นโดยมีการกาหนดตาแหน่ง
          การเชื่อมโยงไปยัง Web Site อื่นการเชื่อมโยงโดยใช้รูปภาพ
          การใช้การเชื่อมโยงกับจดหมายอิเล็กทรอนิกส์
5 กระบวนการจัดการเรียนรู้
     ขั้นที่ 1 ขั้นนา
          นักเรียนร่วมกันศึกษาการเชื่อมโยงเอกสาร (Hyper Link) แล้วร่วมกันอภิปรายการเชื่อมโยงข้อมูล
ภายในเอกสารเดียวกันและการเชื่อมโยงไปยังไฟล์อื่นหรือ Web Page อื่น การเชื่อมโยงไปยังไฟล์อื่นโดยมี
การกาหนดตาแหน่ง สามารถทาได้อย่างเข้าใจและสามารถทาตามตัวอย่างได้
     ขั้นที่ 2 ขั้นสอน
          1. นักเรียนศึกษาการเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน ครูให้นักเรียนลอกรูปแบบคาสั่งลงใน
สมุด โดยรูปแบบคาสั่งคือ <A NAME=Lable>……….ข้อความ.......</A> และบอกความหมายของ Lable
          2. นักเรียนศึกษาการเชื่อมโยงไปยังไฟล์อื่นโดยมีการกาหนดตาแหน่ง ครูให้นักเรียนลอกรูปแบบ
คาสั่งลงในสมุดโดยรูปแบบคาสั่งคือ<A HREF=/Path/Filename.html#Lable>……ข้อความ......</A>



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

          3. นักเรียนศึกษาการเชื่อมโยงไปยัง Web Sites อื่น ครูให้นักเรียนลอกรูปแบบคาสั่งลงในสมุดโดย
รูปแบบคาสั่งคือ <A HREF=URL>......ข้อความ.....</A> หรือ <A HREF=FTP://Ftpsever> และบอก
ความหมายจอง URL,FTP,Ftpserver
          4. นักเรียนศึกษาการเชื่อมโยงโดยใช้รูปภาพ ครูให้นักเรียนลอกรูปแบบคาสั่งลงในสมุดโดยรูปแบบ
คาสั่งคือ<A HREF=URL><IMG SRC=Filename>…….</A> และบอกความหมายของ URL, <IMG SRC>
          5. นักเรียนศึกษาการใช้การเชื่อมโยงกับจดหมายอิเล็กทรอนิกส์ (E-Mail) ครูให้นักเรียนลอก
รูปแบบคาสั่งลงในสมุดโดยรูปแบบคาสั่งคือ <A HREF=Mail to :E-Mail Address>……ข้อความ........</A>
และบอกความหมายของ Mailto,E-Mail Address
          6. นักเรียนศึกษาการกาหนดสีตัวอักษรที่ใช้เชื่อมโยงข้อมูล ครูให้นักเรียนลอกรูปแบบคาสั่งลงใน
สมุดโดยรูปแบบคาสั่ง <Body Link=#Color>, <Body Alink “=#color”> <Body Vlink= “#color”>
    ขั้นที่ 3 ขั้นสรุป
          ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน
     ขั้นที่ 4 ฝึกฝนผู้เรียน
          นักเรียนศึกษาข้อมูล เรื่องการเชื่อมโยงเอกสารผ่านเว็บไซต์ http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการเชื่อมโยงเอกสารและเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)              ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย              1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                   กระตือรือร้นในการทางาน         การทากิจกรรมกลุ่ม
                                    2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                    รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                    มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาการเชื่อมโยงเอกสารเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
          5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
............................................................................................................................................ ......................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                        แผนการจัดการเรียนรู้ที่ 7
เรื่อง การสร้างลาดับของข้อมูล (List)                                       เวลา 4 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                           ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ
1 สาระสาคัญ
           การสร้างลาดับรายการของข้อมูลเป็นการช่วยแบ่งข้อมูลออกเป็นหัวข้อ เพื่อจัดระเบียบให้แก่
เอกสาร
2 มาตรฐานการเรียนรู้
           ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
           ระบุประเภทของการสร้างลาดับรายการของข้อมูล
           อธิบายการสร้างลาดับรายการแบบไม่มีลาดับข้อมูล
           อธิบายการสร้างลาดับรายการแบบเรียงลาดับข้อมูล
           อธิบายการสร้างลาดับรายการแบบรายการคาศัพท์แสดงลาดับรายการที่สัมพันธ์กันทั้งเอกสาร
           แสดงลาดับรายการหลายรูปแบบ และแบบรายการย่อย
           อธิบายคาศัพท์ได้
4 สาระการเรียนรู้
           การสร้างลาดับรายการแบบเรียงลาดับ
           การสร้างลาดับรายการแบบไม่เรียงลาดับ
           การสร้างลาดับรายการแบบรายการคาศัพท์
           การแสดงลาดับรายการที่สัมพันธ์กันทั้งเอกสาร
           การแสดงลาดับรายการย่อย
           การแสดงลาดับรายการหลายรูปแบบ
5 กระบวนการจัดการเรียนรู้
      ขั้นที่ 1 ขั้นนา
           นักเรียนร่วมกันทบทวนบทเรียนที่ผ่านมา 10 นาที แล้วศึกษาการสร้างลาดับรายการของข้อมูล
      ขั้นที่ 2 ขั้นสอน
           1. นักเรียนศึกษาการสร้างลาดับรายการของข้อมูลว่ามีกี่แบบ แล้วครูแบ่งนักเรียนออกเป็นกลุ่ม
กลุ่มละ 4 คน จะได้ทั้งหมด 5 กลุ่ม แต่ละกลุ่มจะได้หัวข้อไม่เหมือนกันและให้แต่ละกลุ่มศึกษาร่วมกัน
เพื่อที่จะออกมาอภิปรายหน้าชั้นเรียนทีละกลุ่ม โดยใช้เวลากลุ่มละ 10 นาที
           2. นักเรียนศึกษาวิธีการสร้างลาดับรายการแบบเรียงลาดับข้อมูล (Ordered List) พร้อมกันพอ
ศึกษาเสร็จแล้ว ครูให้เขียนรูปแบบคาสั่งของการสร้างลาดับรายการแบบเรียงลาดับข้อมูลลงในสมุด
           3. นักเรียนศึกษาวิธีการสร้างลาดับรายการแบบเรียงลาดับข้อมูลเสร็จแล้วครูให้นักเรียนดูตัวอย่าง
ที่ 7.1 เพื่อปฏิบัติตามตัวอย่างแล้วส่งให้ครูตรวจดูในแต่ละเครื่องเพื่อเอาคะแนน
           4. นักเรียนศึกษาลาดับรายการแบบไม่มีเรียงลาดับข้อมูลในหัวข้อต่อมา ศึกษาเสร็จแล้วครูจะเรียก
ทีละคนเพื่อที่จะมาอธิบายหน้าชั้นให้เพื่อนฟัง และทดสอบความเข้าใจพร้อมเขียนรูปแบบคาสั่งใน
หน้ากระดาษให้เพื่อนในได้ทราบพร้อม ๆ กัน


 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

          5. นักเรียนศึกษาลาดับรายการแบบไม่มีเรียงลาดับข้อมูลเสร็จเรียบร้อยแล้ว ครูให้นักเรียนดู
ตัวอย่างที่ 7.2 เพื่อปฏิบัติตามตัวอย่างแล้วส่งให้ครูตรวจดูในแต่และเครื่องเพื่อเอาคะแนน
          6. นักเรียนศึกษาการสร้างลาดับรายการแบบรายการคาศัพท์ในหัวข้อต่อมา แล้วปฏิบัติตาม
ตัวอย่างที่ 7.3 ครูเดินตรวจทีละเครื่อง
          7. นักเรียนศึกษาการสร้างลาดับรายการที่สัมพันธ์กันทั้งเอกสารในหัวข้อต่อมา แล้วปฏิบัติตาม
ตัวอย่างที่ 7.4 ครูเดินตรวจทีละเครื่อง
          8. นักเรียนศึกษาการแสดงลาดับรายการย่อยในหัวข้อต่อมา แล้วปฏิบัติตามตัวอย่างที่ 7.5 ครูเดิน
ตรวจทีละเครื่อง
          9. นักเรียนศึกษาการแสดงลาดับรายการหลายรูปแบบในหัวข้อต่อมา แล้วปฏิบัติตามตัวอย่างที่ 7.6
ครูเดินตรวจทีละเครื่อง
    ขั้นที่ 3 ขั้นสรุป
          ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน
     ขั้นที่ 4 ฝึกฝนผู้เรียน
          นักเรียนศึกษาข้อมูล เรื่อง การสร้างลาดับรายการ ผ่านเว็บไซต์
http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการสร้างลาดับรายการ และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)              ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย              1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                   กระตือรือร้นในการทางาน        การทากิจกรรมกลุ่ม
                                    2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                    รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                    มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาการสร้างลาดับรายการเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
          5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
..................................................................................................................................................................
.............................................................................................................................. ....................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                   แผนการจัดการเรียนรู้ที่ 8
เรื่อง การสร้างตาราง (Table)                                          เวลา 4 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                      ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ
1 สาระสาคัญ
         การสร้างตาราง เป็นวิธีการนาเสนอข้อมูลที่เหมาะสมกับข้อมูลที่มีการแบ่งประเภทแบ่งกลุ่มของ
ข้อมูล จะทาให้ดูข้อมูลได้ง่าย
2 มาตรฐานการเรียนรู้
         ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
         บอกความหมายและวิธีการในการสร้างตารางได้
         เข้าใจและสามารถปฏิบัติสร้างตารางในหน้าเว็บเพจได้
4 สาระการเรียนรู้
         การสร้างเส้นกรอบให้กับตาราง
         การกาหนดตาแหน่งของตาราง
         การกาหนดสีให้กับตาราง
         การกาหนดขนาดของตาราง
         การกาหนดระยะห่าง
         การกาหนดตาแหน่งของชื่อตาราง
         การกาหนดตาแหน่งข้อมูลในแถว
         การกาหนดตาแหน่งข้อมูลในเซลล์
         การกาหนดสีให้กับเซลล์
         การกาหนดขนาดของเซลล์
         การรวมแถวและคอลัมน์ในตาราง
5 กระบวนการจัดการเรียนรู้
    ขั้นที่ 1 ขั้นนา
         1. นักเรียนยกตัวอย่างตารางที่เคยพบมาคนละ 1 ตาราง โดยเขียนลงสมุดของตัวเอง
         2. นักเรียนศึกษาโครงสร้างของตารางแล้วบอกครูว่าโครงสร้างของตารางมีอะไรบ้างอธิบายทีละคน
    ขั้นที่ 2 ขั้นสอน
         1. นักเรียนศึกษาโครงสร้างของตารางแล้วเขียนโครงสร้างลงในสมุดแล้วบอกรายละเอียดของตาราง
ให้ครูทราบตามเลขที่
         2. นักเรียนศึกษาวิธีการสร้างกรอบให้กับตารางแล้วเขียนรูปแบบคาสั่ง<TABLE BORDER> ลงใน
สมุดแล้วอธิบายให้ครูฟังว่าคาสั่ง<TABLE BORDER>ใช้สาหรับกาหนดอะไรในตาราง และ Pixel คือค่า
อะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.1
         3. นักเรียนศึกษาวิธีการกาหนดตาแหน่งของตารางและบอกว่าคาสั่งการกาหนดตาแหน่งของตาราง
คืออะไรเขียนลงในสมุดพร้อมคาศัพท์แต่ละคาอย่างละเอียด ศึกษาเสร็จเรียบร้อยแล้วให้ปฏิบัติตามตัวอย่าง



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

           4. นักเรียนศึกษาการกาหนดสีให้กับตาราง และบอกด้วยว่าการกาหนดสีสามารถแบ่งออกได้เป็นกี่
แบบและแต่ละแบบคือการกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.3
           5. นักเรียนศึกษาการกาหนดขนาดของตารางและบอกรูปแบบคาสั่งการกาหนดขนาดของตาราง
ด้วยว่ามีกี่คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.4
           6. นักเรียนศึกษาการกาหนดระยะห่างพร้อมบอกรูปแบบคาสั่งการกาหนดระยะห่างว่ามีกี่คาสั่ง แต่
ละคาสั่งใช้สาหรับกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.5
           7. นักเรียนศึกษาการกาหนดตาแหน่งของชื่อตารางพร้อมบอกรูปแบบคาสั่งการกาหนดตาแหน่ง
ของชื่อตารางว่าคาสั่ง <CAPTION ALIGN> ใช้สาหรับกาหนดอะไร และมี Attribute อะไรบ้างที่เป็นคาสั่ง
เสริม ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.6
           8. นักเรียนศึกษาการกาหนดตาแหน่งข้อมูลในแถวพร้อมบอกรูปแบบคาสั่งการกาหนดตาแหน่ง
ข้อมูลในแถวว่ามีกี่คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.7
           9. นักเรียนศึกษาการกาหนดตาแหน่งข้อมูลในเซลล์พร้อมบอกรูปแบบคาสั่งการกาหนดตาแหน่ง
ข้อมูลในเซลล์ว่ามีกี่คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.8
           10. นักเรียนศึกษาการกาหนดสีให้กับเซลล์พร้อมบอกรูปแบบคาสั่งการกาหนดสีให้กับเซลล์ว่ามีกี่
คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไรศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.9
           11. นักเรียนศึกษาการกาหนดขนาดของเซลล์พร้อมบอกรูปแบบคาสั่งการกาหนดขนาดของเซลล์ว่า
มีกี่คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไรศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.10
           12. นักเรียนศึกษาการรวมแถวและคอลัมน์ในตารางให้นักเรียนบอกรูปแบบคาสั่งว่า<TD
COLSPAN> เป็นคาสั่งที่ใช้สาหรับกาหนดรวมอะไรเข้าด้วยกัน และ<TD ROWSPAN> เป็นคาสั่งที่ใช้
สาหรับกาหนดรวมอะไรเข้าด้วยกัน ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.11
      ขั้นที่ 3 ขั้นสรุป
           ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน
      ขั้นที่ 4 ฝึกฝนผู้เรียน
           นักเรียนศึกษาข้อมูล เรื่อง การสร้างตาราง ผ่านเว็บไซต์ http://comkrutae.wordpress.com
      ขั้นที่ 5 การนาไปใช้
           นักเรียนทดสอบการสร้างตาราง และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
           1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
           2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
           3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
           4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
          ด้านความรู้ (K)              ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย               1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                    กระตือรือร้นในการทางาน         การทากิจกรรมกลุ่ม
                                     2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                     รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                     มอบหมาย

 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

8 กิจกรรมเสริมการเรียนรู้
      นักเรียนศึกษาการสร้างตารางเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
      1. เว็บไซต์ http://www.kruaoy.com
      2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
      3. เว็บไซต์ http://comkrutae.wordpress.com
      4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
      5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน




ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
............................................................................................................................ ......................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                      แผนการจัดการเรียนรู้ที่ 9
เรื่อง การสร้างแบบฟอร์ม                                                      เวลา 4 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                             ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ
1 สาระสาคัญ
          การสร้างแบบฟอร์ม ถือเป็นอีกส่วนหนึ่งที่ขาดไม่ได้ในการสร้างเว็บไซต์ เพราะการสร้างแบบฟอร์ม
สามารถนามาใช้ประโยชน์ได้หลายอย่าง ได้แก่ การทาแบบฟอร์มเพื่อรับสมัครสมาชิกของเว็บไซต์ การทา
แบบฟอร์มการสมัครงานของเว็บไซต์ที่รับสมัครงาน การทาแบบฟอร์มสาหรับการตอบคาถามในเว็บไซต์
2 มาตรฐานการเรียนรู้
          ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
          อธิบายคาสั่งและใช้คาสั่งในการสร้างฟอร์มได้
          ใช้คาสั่งในการสร้างรูปแบบการนาเข้าข้อมูลได้
4 สาระการเรียนรู้
          การใช้คาสั่งในการสร้างแบบฟอร์ม
          การกาหนดรูปแบบของแบบฟอร์ม
          การใช้คาสั่งในการสร้างแบบฟอร์มการรับข้อมูล
          การสร้างรูปแบบการนาเข้าข้อมูล
5 กระบวนการจัดการเรียนรู้
     ขั้นที่ 1 ขั้นนา
          1. ครูและนักเรียนร่วมกันศึกษาการสร้างแบบฟอร์มครูอภิปรายให้นักเรียนฟังเรื่องการสร้าง
แบบฟอร์ม
          2. ครูยกตัวอย่างคาสั่งในหัวข้อต่างๆ ให้นักเรียนทราบเพื่อให้นักเรียนได้จดคาสั่งให้ครูยกตัวอย่าง
ให้ดูจดลงในสมุด
     ขั้นที่ 2 ขั้นสอน
          1. ครูอธิบายการใช้คาสั่งในการสร้างแบบฟอร์มและพูดถึง Attribute ในการสร้าง FROM มีคาสั่ง
เสริมอะไรบ้างและพูดถึงคาศัพท์ในหัวข้อการสร้างแบบฟอร์มด้วยว่ามีกี่คาศัพท์ เช่น Method, Action,
URL เป็นต้น
          2. ครูให้นักเรียนดูหัวข้อการกาหนดรูปแบบของแบบฟอร์มแล้วตอนให้ครูทราบโดยครูจะเรียกทีละ
เลขที่ เพื่อที่ดูความเข้าใจของนักเรียน
          3. ครูให้นักเรียนศึกษาการใช้คาสั่งในการสร้างแบบฟอร์มการรับข้อมูล และให้นักเรียนลุกขึ้นพูดที
ละคนเกี่ยวกับรูปแบบคาสั่งของการสร้างแบบฟอร์มการรับข้อมูล และให้นักเรียนจดคาศัพท์แต่ละคาลงใน
สมุด ศึกษาเสร็จเรียบร้อยแล้วปฏิบัติตามตัวอย่างที่ 9.1, 9.2 และ 9.3
          4. ครูให้นักเรียนศึกษาตัวอย่างที่ 9.4 จนถึงตัวอย่างที่ 9.7 ศึกษาเสร็จเรียบร้อยแล้วให้ปฏิบัติตาม
ตัวอย่างดังกล่าวให้ทาการบันทึกงานตัวอย่างแต่ละหัวข้อใส่ในแผ่นดิสก์ส่งให้ครูท้ายคาบ
          5. ครูให้นักเรียนได้ทาแบบทดสอบตอนที่ 2 เกี่ยวกับคาศัพท์ในการสร้างแบบฟอร์ม เพื่อทดสอบ
ความรู้

 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

          6. นักเรียนทาแบบทดสอบเสร็จแล้วเหลือเวลา 45 นาที ครูให้นักเรียนศึกษาการสร้างรูปแบบการ
นาเข้าข้อมูล และบอกถึงรูปแบบคาสั่งการสร้างรูปแบบการนาเข้าข้อมูลด้วย ศึกษาเสร็จแล้วครูให้ปฏิบัติ
ตามตัวอย่างที่ 9.8 – 9.9
    ขั้นที่ 3 ขั้นสรุป
          ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน
     ขั้นที่ 4 ฝึกฝนผู้เรียน
          นักเรียนศึกษาข้อมูล เรื่อง การสร้างแบบฟอร์ม ผ่านเว็บไซต์
http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการสร้างแบบฟอร์ม และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)              ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย              1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                   กระตือรือร้นในการทางาน         การทากิจกรรมกลุ่ม
                                    2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                    รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                    มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาการสร้างแบบฟอร์ม เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
          5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
.............................................................................................................................. ..............
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                  ลงชื่อ........................................
                                                                                        (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
..................................................................................................................................................................
...................................................................................................................... ............................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

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


 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

เสร็จแล้วให้นักเรียนได้ปฏิบัติตามตัวอย่างที่ 10.3 และครูปฏิบัติไปพร้อมกับนักเรียนเพื่อทาเป็นตัวอย่างให้
นักเรียนได้ปฏิบัติตาม
          4. ครูอธิบายการกาหนดรายละเอียดของเฟรมให้นักเรียนดูตามใบความรู้พร้อมไปด้วย และให้
นักเรียนบอกรูปแบบคาสั่งการกาหนดรายละเอียดของเฟรมเสร็จแล้วให้นักเรียนได้ปฏิบัติตามตัวอย่างที่
10.5 และครูปฏิบัติไปพร้อมกับนักเรียนเพื่อทาเป็นตัวอย่างให้นักเรียนได้ปฏิบัติตาม
          5. ครูอธิบายการสร้างเพจใหม่บนเฟรมและให้นักเรียนดูใบความรู้ตามไปด้วยพร้อมจดรูปแบบคาสั่ง
การสร้างเพจใหม่บนเฟรมลงในสมุดด้วย ครูอธิบายเสร็จแล้วให้นักเรียนได้ปฏิบัติตามตัวอย่างที่ 10.8 และ
ครูได้ปฏิบัติไปพร้อมกันกับนักเรียนเพื่อทาเป็นตัวอย่างให้นักเรียนได้ปฏิบัติตาม
          6. ครูอธิบายการกาหนดเฟรมหลักให้นักเรียนดูใบความรู้ตามไปด้วยเพื่อความเข้าใจมากขึ้นของ
นักเรียน ครูอธิบายเสร็จแล้วให้นักเรียนได้ปฏิบัติตามตัวอย่างที่ 10.9 และครูได้ปฏิบัติพร้อมกับนักเรียน
เพื่อให้ทาเป็นตัวอย่างให้นักเรียนได้ปฏิบัติตาม
     ขั้นที่ 3 ขั้นสรุป
          ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน
     ขั้นที่ 4 ฝึกฝนผู้เรียน
          นักเรียนศึกษาข้อมูล เรื่อง การสร้างเฟรม ผ่านเว็บไซต์ http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการสร้างเฟรมและเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)              ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย              1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                   กระตือรือร้นในการทางาน          การทากิจกรรมกลุ่ม
                                    2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                    รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                    มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาการสร้างเฟรมเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
          5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
...................................................................................................................... ............................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

                                      แผนการจัดการเรียนรู้ที่ 11
เรื่อง การ Upload เว็บเพจ                                                    เวลา 2 ชั่วโมง
รายวิชา การสร้างเว็บเพจด้วย HTML                                             ชั้นมัธยมศึกษาปีที่ 4
หน่วยที่ 4 เรื่อง การเผยแพร่เว็บเพจ
1 สาระสาคัญ
          หลังจากที่ได้ศึกษาการเขียนเว็บไซต์โดยใช้โปรแกรมภาษา HTML จนสามารถสร้างเว็บไซต์เสร็จ
สมบูรณ์แล้ว การนาเว็บไซต์มาใช้งานก็เป็นขั้นตอนที่สาคัญอีกขั้นตอนหนึ่ง ซึ่งเรียกว่าการ Upload การ
Upload เว็บเพจสามารถทาได้โดยจะต้องมีการสมัครเป็นสมาชิกกับผู้ใช้บริการอินเทอร์เน็ต หรือ ISP
(Internet Service Provider) เพื่อขอพื้นที่ว่างสาหรับการ Upload เว็บเพจเสียก่อน ซึ่งในปัจจุบันผู้
ให้บริการอินเทอร์เน็ตทั้งในประเทศและต่างประเทศให้เลือกเป็นจานวนมาก
2 มาตรฐานการเรียนรู้
          ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12
3 ผลการเรียนรู้
          ยกตัวอย่างรายชื่อผู้ให้บริการอินเทอร์เน็ต
          บอกขั้นตอนการขอพื้นที่ว่างสาหรับเว็บไซต์
          อธิบายขั้นตอนของการ Activate
          อธิบายขั้นตอนการขอ Upload
          อภิปราย “การนาเว็บไซต์มาใช้งาน”
4 สาระการเรียนรู้
          รายชื่อผู้ให้บริการอินเทอร์เน็ต
          ขั้นตอนการขอพื้นที่ว่าง
          ขั้นตอนการขอ Upload
5 กระบวนการจัดการเรียนรู้
     ขั้นที่ 1 ขั้นนา
            1. ครูและนักเรียนร่วมกันศึกษาวิธีการ Upload เว็บเพจ เพื่อที่จะนาเว็บเพจที่นักเรียนได้ทาเสร็จ
ลงอินเทอร์เน็ต
            2. ครูให้นักเรียนบอกผู้ให้บริการอินเทอร์เน็ตแบบให้เช่าพื้นที่ว่างและแบบไม่เสียค่าบริการ
     ขั้นที่ 2 ขั้นสอน
            1. ครูสอนวิธีการขอพื้นที่ว่างเพื่อที่จะนาเว็บเพจลงอินเทอร์เน็ตโดยเข้าในเว็บไซต์
http://www.thcity.com/ เพราะเว็บไซต์นี้จะสามารถขอพื้นที่ว่างได้และไม่เสียค่าบริการ
          2. ครูให้นักเรียนเข้าไปในเว็บไซต์ http://www.thcity.com/ ครูพานักเรียนสมัครเป็นสมาชิกของ
เว็บไซต์
          3. สมัครสมาชิกได้แล้วครูให้นักเรียนเตรียมงานที่ทาเสร็จเพื่อที่จะลงในอินเทอร์เน็ต
          4. เมื่อลงเว็บเพจที่นักเรียนได้ทามาเสร็จแล้วและครั้งต่อไปเมื่อนักเรียนจะแก้งานตัวเองก็สามารถที่
จะแก้ไขได้ในเว็บไซต์ของตัวเองโดยไม่ต้องแก้ไขที่แผ่นโดยครูได้แนะนาขั้นตอนต่างๆ ให้นักเรียนได้ทราบ
แล้ว



 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

     ขั้นที่ 3 ขั้นสรุป
          ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน
     ขั้นที่ 4 ฝึกฝนผู้เรียน
          นักเรียนศึกษาข้อมูล เรื่อง การอัพโหลดเว็บไซต์ ผ่านเว็บไซต์
http://comkrutae.wordpress.com
     ขั้นที่ 5 การนาไปใช้
          นักเรียนทดสอบการอัพโหลดเว็บไซต์ และเริ่มต้นใช้งานได้ด้วยตนเอง
6 สื่อการเรียนรู้
          1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต
          2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล
          3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML
          4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์
7 การวัดผลประเมินผลการเรียนรู้
         ด้านความรู้ (K)              ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P)
1. สังเกตจากการอภิปราย              1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน
2. ตรวจใบงานที่ทา                   กระตือรือร้นในการทางาน         การทากิจกรรมกลุ่ม
                                    2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ
                                    รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน
                                    มอบหมาย
8 กิจกรรมเสริมการเรียนรู้
          นักเรียนศึกษาการอัพโหลดเว็บไซต์ เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ
9 แหล่งการเรียนรู้เพิ่มเติม
          1. เว็บไซต์ http://www.kruaoy.com
          2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com
          3. เว็บไซต์ http://comkrutae.wordpress.com
          4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ
          5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง 30242 ชั้นมัธยมศึกษาปีที่ 4-6

10 บันทึกผลการจัดการเรียนรู้
     ผลการจัดกิจกรรม
............................................................................................................................................
............................................................................................................................................
     ปัญหา/อุปสรรค
............................................................................................................................................
............................................................................................................................................
     แนวทางในการแก้ไขปัญหา
............................................................................................................................................
............................................................................................................................................

                                                                                 ลงชื่อ........................................
                                                                                       (นายเทวัญ ภูพานทอง)

     ความคิดเห็นหัวหน้ากลุ่มสาระฯ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                            ลงชื่อ..................................................
                                                                                        (นางกาไล ตุระซอง)
                                                                        ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ


     ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................

                                                                              ลงชื่อ..................................................
                                                                                         (นางสาวรจนา ใจศิริ)
                                                                            ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ




 ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com

แผนการสอนการสร้างเว็บเพจ

  • 1.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 1 เรื่อง การเริ่มต้นกับ HTML เวลา 2 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 1 เรื่อง การเริ่มต้นกับ HTML 1 สาระสาคัญ การศึกษาพื้นฐานในการเขียนโฮมเพจ(Home Page) เพื่อให้ผู้เรียนทราบถึงที่มาโครงสร้างและการ เขียนคาสั่งเบื้องต้น สามารถนาเครื่องมือ (Tools) มาใช้ในการเขียนโฮมเพจได้อย่างถูกต้องHyper Text Markup Language เป็นเอกสารแบบไฮเปอร์เท็กซ์ ซึ่งมีความสามารถในการเชื่อมโยงข้อมูลไปยังเอกสารที่ มีความสามารถสูงเหนือกว่าเอกสารทั่วไปเนื่องจากสามารถเปิดข้อมูลภายในได้ ส่วนความสามารถในด้าน การเชื่อมโยงข้อมูลไปยังเอกสารอื่นๆ ทาได้โดยการใส่สัญลักษณ์พิเศษเข้าไปในเอกสาร หรือคาสั่ง (Tag) คาสั่งเหล่านี้จะถูกอ่านและถูกทาตามคาสั่งโดยโปรแกรมบราวเซอร์(Brows) ต่างๆ เช่น Microsoft Internet Explorer, Netscape Navigator 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ 1. อธิบายความหมายของ HTML ได้ 2. บอกคุณสมบัติของเครื่องคอมพิวเตอร์ที่จะนามาใช้ในการสร้าง Web Page ได้ 3. เขียนโครงสร้างพื้นฐานของภาษา HTML ได้ถกต้อง ู 4. เขียนคาสั่ง HTML โดยใช้ Notepad เป็น Editor ได้ 5. บันทึกไฟล์ HTML ได้ 6. เปิดไฟล์ HTML ได้ 7. อธิบายคาศัพท์ได้ 6 คาได้ 4 สาระการเรียนรู้ 1. คุณสมบัติของเครื่องสามารถนามาใช้ในการสร้าง Web Page 2. การใช้ Notepad ในการเขียน HTML 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา 1. นักเรียนร่วมกันอภิปรายว่าการนาเอาภาษา HTML มาใช้ในการสร้างเว็บ มีผลต่อประสิทธิภาพ การทางานอย่างไร และมีประโยชน์ในด้านใด 2. แนะนาการเข้าเรียนและศึกษาเนื้อหาบทเรียนและปฏิบัติกิจกรรมผ่านเว็บไซต์ ขั้นที่ 2 ขั้นสอน 1. นักเรียนทดสอบวัดความรู้ก่อนเรียน เป็นแบบทดสอบแบบเลือกตอบ 4 ตัวเลือก จานวน 40 ข้อ เวลา 40 นาที 2. นักเรียนศึกษาคุณสมบัติของเครื่องที่สามารถนามาใช้ในการสร้าง Web Page ครูให้นักเรียนทา ในสมุดถึงเรื่องคุณสมบัติของเครื่องที่สามารถนามาใช้ในการสร้าง Web Page ส่งครูภายในเวลาที่กาหนด 3. นักเรียนศึกษาโครงสร้างพื้นฐานของ HTML ครูให้นักเรียนร่วมกันอภิปรายว่าโครงสร้างของ HTML จาเป็นจะต้องมีกฎในการใช้ HTML และบอกถึงส่วนประกอบของ HTML ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 2.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 4. นักเรียนศึกษาการใช้ Notepad ในการเขียน HTML ให้นักเรียนเปรียบเทียบความแตกต่าง ระหว่างโปรแกรมอื่น (Dream webwer), (Java script) ว่าใช้โปรแกรมอะไรสร้าง Web Page ง่ายกว่ากัน 5. นักเรียนทาการเปิดโปรแกรม Notepad ด้วยการคลิก Star เลือก Program เลือก Accessories เลือก Notepad ครูให้นักเรียนเปิดเครื่องคอมพิวเตอร์ และลองปฏิบัติทาไปพร้อมกัน 6. นักเรียนทาการเริ่มเขียนคาสั่ง HTML ใน Notepad ครูให้นักเรียนเขียนคาสั่ง HTML ตามครูสั่ง ทีละคาสั่ง 7. นักเรียนทาการจัดเก็บไฟล์เมื่อทาการเขียนคาสั่งเสร็จ ครูให้นักเรียนจัดเก็บไฟล์โดยระบุนามสกุล ไฟล์เป็น .HTML คลิกที่คาสั่ง แฟ้ม เลือก บันทึกแฟ้มเป็น 8. นักเรียนศึกษาวิธีการเปิดโปรแกรม Browser เพื่อแสดงผลลัพธ์ของคาสั่ง HTML ครูให้นักเรียน ลองเปิดด้วยตนเอง และเขียนวิธีเปิดแสดงผลลัพธ์ของคาสั่งลงสมุด ส่งครูภายในเวลาที่กาหนด ขั้นที่ 3 ขั้นสรุป ผู้สอนและนักเรียนร่วมกันอภิปรายสรุปสิ่งที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน 1. นักเรียนศึกษาข้อมูล เรื่องการเขียนHTML ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการเขียนHTML และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจแบบทดสอบก่อนเรียน กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม (Pre-test) 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาประวัติความเป็นมาของภาษาคอมพิวเตอร์เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 3.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. .................................................................................................................................................................. ................................................................................................................................... ............................... .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 4.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 2 เรื่อง โครงสร้างของเอกสาร HTML เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 1 เรื่อง การเริ่มต้นกับ HTML 1 สาระสาคัญ เอกสารที่เขียนด้วย HTML ก็คล้ายกับเอกสารธรรมดาเพียงแต่เพิ่มเติมคาสั่งของ HTML เข้าไปใน ตาแหน่งต่างๆ โดยใช้ tag หรือป้ายเป็นตัวบอกตาแหน่งโดย Tag 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ 1. บอกรูปแบบโครงสร้างของเอกสาร HTML 2. ใช้คาสั่ง <HTML> ในการเขียนเอกสารHTML 3. ใช้คาสั่ง <HEAD> กาหนดข้อความส่วนที่เป็นชื่อเรื่องของ HTML 4. ใช้คาสั่ง <TITLE> แสดงชื่อของเอกสารหรือรายละเอียดที่เกี่ยวข้องกับเอกสารในหน้านั้นๆ 5. ระบุคาสั่งเสริมที่ใช้งานในคาสั่ง <META> 6. ใช้คาสั่ง<BODY> แสดงขอบเขตของเนื้อหาของเว็บเพจ 7. อธิบายคาศัพท์ 4 สาระการเรียนรู้ 1. โครงสร้างพื้นฐานของ HTML 2. กฎในการใช้ HTML 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา 1. นักเรียนแบ่งกลุ่มออกเป็น 2 กลุ่ม แล้วร่วมกันอภิปรายว่าโครงสร้างของเอกสาร HTML มีวิธีการ ทาอย่างไรบ้าง ขั้นที่ 2 ขั้นสอน 1. นักเรียนช่วยกันเขียนโครงสร้างของเอกสาร HTML ว่าโครงสร้างน่าจะเป็นแบบไหน 2. นักเรียนศึกษาโครงสร้างของเอกสาร HTML ว่ามีรูปแบบอย่างไรแล้วเขียนโครงสร้างของเอกสาร HTML ลงในสมุดของตัวเองภายในระยะเวลา 10 นาที นักเรียนศึกษาแล้วแบ่งโครงสร้างของเอกสาร HTML ว่าทั้งหมดมีกี่ส่วน ในแต่ละส่วนทาหน้าที่ อย่างไรบ้างเขียนลงสมุดและอธิบายอย่างเข้าใจส่งท้ายคาบ นักเรียนศึกษารูปแบบคาสั่งของ <HTML> และบอกว่า <HTML> นี้อยู่ส่วนไหนของโครงสร้างของ เอกสาร แล้วเขียนรูปแบบลงในสมุดส่งท้ายคาบ นักเรียนศึกษารูปแบบคาสั่งของ <HEAD>, <TITLE> และบอกว่า <HEAD>, <TITLE> อยู่ส่วน ไหนของโครงสร้างของเอกสาร แล้วเขียนรูปแบบลงในสมุดส่งท้ายคาบ นักเรียนศึกษารูปแบบคาสั่งของ <BODY> และบอกว่า<BODY> อยู่ส่วนไหนของโครงสร้างของ เอกสาร แล้วเขียนรูปแบบลงในสมุดส่งท้ายคาบ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 5.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 นักเรียนศึกษาคาสั่งเสริม (Attribute) ว่าใช้สาหรับการกาหนดอะไรแล้วเขียนคาสั่งเสริมพร้อม ความหมายของคาสั่งนั้นออกมาด้วย ส่งท้ายคาบ ขั้นที่ 3 ขั้นสรุป ผู้สอนและนักเรียนร่วมกันอภิปรายสรุปสิ่งที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน 1. นักเรียนศึกษาข้อมูล เรื่อง โครงสร้างพื้นฐานของ HTML ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการเขียนHTML และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาโครงสร้างพื้นฐานของ HTML เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 6.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ........................................................................................................................................... . ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. ......................................................................................................................... ......................................... .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 7.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 3 เรื่อง การกาหนดรูปแบบตัวอักษร เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 2 เรื่อง การปรับแต่งเว็บเพจ 1 สาระสาคัญ เอกสาร HTML นอกจากจะใช้แสดงข้อมูลต่างๆ ภายในเว็บไซต์แล้วยังสามารถที่จะกาหนดรูปแบบ ข้อตัวอักษรให้มีความแตกต่างกันซึ่งได้แก่ การกาหนดรูปแบบตัวอักษร ขนาดสีของตัวอักษรให้มีความ แตกต่างกันไป เพื่อความสวยงามและเพื่อให้เอกสารในแต่ละหน้ามีความน่าสนใจมากยิ่งขึ้น 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ 1. จาแนกรูปแบบตัวอักษรได้ 2. ใช้คาสั่งกาหนดรูปแบบตัวอักษรแบบ Logical Styles ได้ 3. ใช้คาสั่งกาหนดรูปแบบตัวอักษรแบบ Physical Styles ได้ 4. ใช้คาสั่ง <font face> สาหรับกาหนดรูปแบบของตัวอักษรได้ 5. ใช้คาสั่ง <font color> สาหรับกาหนดสีของตัวอักษรเฉพาะตัวอักษรที่ต้องการให้ 6. ใช้คาสั่ง <Body Text> สาหรับกาหนดสีของตัวอักษรทั้งเอกสารได้ 7. ใช้คาสั่ง <font size> สาหรับกาหนดขนาดของตัวอักษรสัมพันธ์ได้ 4 สาระการเรียนรู้ 1. การกาหนดรูปแบบตัวอักษร 2. การกาหนแบบตัวอักษร 3. การกาหนดสีของตัวอักษร 4. การกาหนดขนาดของตัวอักษร 5. การใช้ตัวอักษรพิเศษ 6. การสร้างตัวอักษร 7. การกาหนดหัวข้อ 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา 1. นักเรียนร่วมกันอภิปรายการออกแบบและกาหนดรูปแบบของตัวอักษรขนาดตัวอักษร สีของ ตัวอักษร ให้มีความสวยงามและน่าสนใจ 2. นักเรียนยกตัวอย่างแบบตัวอักษรที่เคยใช้มาซัก 10 แบบอักษร ขั้นที่ 2 ขั้นสอน 1. นักเรียนศึกษาวิธีการกาหนดรูปแบบตัวอักษรแบบ Logical Styles และแบบ Physical Styles ครูให้นักเรียนอธิบายการกาหนดรูปแบบตัวอักษรด้วยความเข้าใจ 2. นักเรียนศึกษาวิธีการกาหนดสีของตัวอักษรด้วยตนเอง ครูให้นักเรียนบอกรหัสสีให้ได้ 10 รหัส 3. นักเรียนศึกษาวิธีการกาหนดขนาดของตัวอักษร ครูให้นักเรียนใช้คาสั่ง<font size> ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 8.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 4. นักเรียนศึกษาวิธีการใช้ตัวอักษรพิเศษ ครูให้นักเรียนใช้คาสั่งของตัวอักษรพิเศษและบอกวิธีบอก ชื่อคาสั่งนั้นด้วยเรียกตรวจในท้ายคาบ 5. นักเรียนศึกษาวิธีการสร้างตัวอักษรวิ่ง ครูให้นักเรียนบอกว่าคาสั่งการสร้างตัวอักษรวิ่งนี้สามารถ ใช้ได้กับโปรแกรมอะไรได้บ้าง 6. นักเรียนศึกษาวิธีกาหนดลักษณะการเคลื่อนไหวของข้อความของตัวอักษรวิ่ง ครูให้นักเรียนใช้ คาสั่งนี้แล้วลองปฏิบัติ 7. นักเรียนศึกษาวิธีการกาหนดหัวข้อของเอกสาร ครูให้นักเรียนลองใช้คาสั่งแล้วปฏิบัติแล้วให้บอก ว่าคาสั่ง <Hx>เป็นคาสั่งใช้ทาอะไร 8. นักเรียนศึกษาคาศัพท์เกี่ยวกับบทนี้ แล้วบอกความหมายของคาศัพท์เขียนลงในสมุดส่งท้ายคาบ 9. ครูและนักเรียนช่วยกันสรุป การกาหนดรูปแบบตัวอักษรด้วยการให้นักเรียนปฏิบัติตามคาสั่งที่ ครูเขียนให้บนกระดานทีละตัวอย่าง 10. ครูให้นักเรียนทาแบบทดสอบและอธิบายคาศัพท์โดยทาในบทเรียนออนไลน์ ขั้นที่ 3 ขั้นสรุป ผู้สอนและนักเรียนร่วมกันอภิปรายสรุปสิ่งที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน 1. นักเรียนศึกษาข้อมูล เรื่อง การกาหนดรูปแบบตัวอักษร ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการกาหนดรูปแบบตัวอักษร และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการกาหนดรูปแบบตัวอักษรเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 9.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. ......................................................................................................................... ......................................... .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 10.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 4 เรื่อง การตกแต่งเว็บเพจ เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 2 เรื่อง การปรับแต่งเว็บเพจ 1 สาระสาคัญ การตกแต่งเว็บเพจเป็นการสร้างและใช้คาสั่ง HTML ในการจัดหน้าเอกสารให้มีความเป็นระเบียบ น่าสนใจมากยิ่งขึ้นซึ่งคาสั่งที่ใช้ในการตกแต่งเว็บเพจ ได้แก่ คาสั่งการขึ้นย่อหน้าใหม่ การขึ้นบรรทัดใหม่ การจัดข้อความภายในเอกสารให้อยู่กึ่งกลาง 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ 1. อธิบายการตกแต่งเว็บเพจได้ 2. ใช้คาสั่ง <P> สาหรับจัดข้อความหรือรูปภาพในลักษณะต่างๆ ได้ 3. ใช้คาสั่ง <BR> สาหรับขึ้นบรรทัดใหม่ได้ 4. ใช้คาสั่ง <PRE> ในการแสดงข้อความในรูปแบบเดิมได้ 5. ใช้คาสั่ง <CENTER> จัดข้อความให้อยู่กึ่งกลางได้ 6. ใช้คาสั่ง <HR> สาหรับสร้างเส้นตรงแนวนอนได้ 7. อธิบายคาศัพท์ได้ 4 สาระการเรียนรู้ 1. การขึ้นย่อหน้าใหม่ 2. การขึ้นบรรทัดใหม่ 3. การแสดงข้อความในรูปแบบเดิม 4. การจัดข้อความให้อยู่กึ่งกลาง 5. การสร้างเส้นตรงแนวนอน 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา 1. นักเรียนร่วมกันอภิปรายการตกแต่งเว็บเพจในการจัดหน้าเอกสารให้น่าสนใจมาก ยิ่งขึ้น 2. นักเรียนแสดงตังอย่างในการตกแต่งเว็บเพจที่เคยพบเห็นมาก่อน ขั้นที่ 2 ขั้นสอน 1. นักเรียนศึกษาวิธีการขึ้นย่อหน้าใหม่ ครูให้นักเรียนนาคาสั่งที่ศึกษาแล้วลองปฏิบัติทาและบอก ว่าแต่ละคาสั่งแตกต่างกันอย่างไร 2. นักเรียนศึกษาวิธีการขึ้นบรรทัดใหม่ ครูให้นักเรียนนาคาสั่งที่ศึกษาแล้วลองปฏิบัติทาตามคาสั่งที่ ได้ศึกษา 3. นักเรียนศึกษาวิธีการแสดงข้อความในรูปแบบเดิม แล้วบอกครูว่าคาสั่งที่ศึกษาผ่านไป 10 นาที ที่แล้วมีลักษณะอย่างไร 4. นักเรียนศึกษาวิธีการจัดข้อความให้อยู่กึ่งกลาง ครูให้นักเรียนปฏิบัติคาสั่งจัดกึ่งกลางให้ครูตรวจ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 11.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 5. นักเรียนศึกษาวิธีการสร้างเส้นตรงแนวนอน เมื่อรู้คาสั่งแล้วครูให้นักเรียนพิมพ์คาสั่งลงในเครื่อง โดยใช้คาสั่ง <HR> และใช้คาสั่งเสริม <Attribute> ที่ใช้สาหรับการสร้างเส้นตรงแนวนอน คือ <ALIGN> และบอกตาแหน่งของเส้นคือ Left 6. ครูยกตัวอย่างในการตกแต่งเว็บเพจให้นักเรียนดู แล้วให้นักเรียนจดตัวอย่างที่หน้ากระดานลงใน สมุด แล้วลองปฏิบัติตามตัวอย่าง 7. ครูให้นักเรียนศึกษาคาศัพท์การตกแต่งเว็บเพจให้เวลา 20 นาที ทดสอบชั่วโมงสุดท้าย 8. ครูให้นักเรียนทาแบบทดสอบและอธิบายคาศัพท์ในบทเรียนออนไลน์ ขั้นที่ 3 ขั้นสรุป 1. ครูและนักเรียนร่วมกันสรุปกาหนดรูปแบบตัวอักษรพร้อมกัน 2. ครูและนักเรียนร่วมกันอธิบายคาศัพท์ในหน่วยที่ 4 ขั้นที่ 4 ฝึกฝนผู้เรียน 1. นักเรียนศึกษาข้อมูล เรื่อง การจัดข้อความ ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการจัดข้อความ และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการจัดข้อความ เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 12.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 13.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 5 เรื่อง รูปแบบบนเว็บเพจ เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 2 เรื่อง การปรับแต่งเว็บเพจ 1 สาระสาคัญ ในการสร้างเว็บไซต์มีความจาเป็นอย่างมากที่ต้องนารูปภาพมาใช้ประกอบการอธิบายหรือประกอบ ให้เกิดความสวยงาม น่าสนใจ ถ้าต้องมีคาสั่งที่ใช้ในการจัดการกับรูปภาพที่จะนาแทรกในหน้าเอกสารเพื่อให้ สามารถกาหนดตาแหน่ง ขนาด ระยะห่างระหว่างข้อความกับรูปภาพและอื่นๆ ได้ตามต้องการ 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ จาแนกประเภทของไฟล์รูปภาพ อธิบายไฟล์รูปภาพประเภท GIF, JPEG ใช้คาสั่ง <IMG SRC> สาหรับระบุไฟล์รูปภาพที่จะนามาแสดง ใช้คาสั่ง<IMG ALT> สาหรับแสดงข้อความที่บ่งบอกว่ารูปภาพนี้เกี่ยวกับรูปอะไร ใช้คาสั่ง<IMG ALIGN>สาหรับจัดวางรูปภาพหรือข้อความที่อยู่ล้อมรอบรูปภาพ ใช้คาสั่งต่างๆ ในการจัดระยะห่างของข้อความกับรูปภาพ ใช้คาสั่งต่างๆ ในการปรับแต่งขนาดรูปภาพ ฯลฯ 4 สาระการเรียนรู้ ประเภทของไฟล์รูปภาพ การแทรกรูปภาพ การใช้ข้อความแทนรูปภาพ การจัดตาแหน่งข้อความกับรูปภาพ การจัดระยะห่างของข้อความกับรูปภาพ การปรับแต่งขนาดของรูปภาพ การควบคุมข้อความรูปภาพ การกาหนดพื้นหลัง (Background)โดยใช้รูปภาพ 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา 1. นักเรียนศึกษารูปภาพบนเว็บเพจแล้วร่วมกันอภิปรายในการใส่คาสั่งรูปภาพ และจัดระยะห่าง ของรูปภาพ ร่วมไปถึงการปรับแต่งขนาดของรูปภาพให้ดูสวยงามและน่าค้นหาข้อมูลเพิ่มยิ่งขึ้น ขั้นที่ 2 ขั้นสอน 1. นักเรียนทบทวนบทเรียนครั้งที่ผ่านมาว่าเรียนเกี่ยวกับอะไร ครูให้นักเรียนบทวนและตอบคาถาม 2. นักเรียนศึกษาประเภทของไฟล์รูปภาพว่าแต่ละประเภทมีหน้าที่อย่างไร ครูให้นักเรียนเลือก ประเภทของไฟล์รูปภาพว่า ไฟล์รูปภาพ ใดมีประเภทอย่างไร โดยดูรูปภาพในบทเรียนออนไลน์ 3. นักเรียนศึกษาการแทรกรูปภาพและนามสกุลรูปภาพด้วย ครูให้นักเรียนลองปฏิบัติคาสั่งในการ แทรกรูปภาพแต่ละภาพมีนามสกุลอะไร จะตรวจดูทีละเครื่องและให้นักเรียนบอกชื่อนามสกุลรูปภาพ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 14.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 4. นักเรียนศึกษาการใช้ข้อความแทนรูปภาพ โดยมีรูปแบบคาสั่งคือ <IMG ALT= “Message”> โดยที่ Message คือ ข้อความแทนรูปภาพหรือเป็นชื่อของรูปภาพ 5. นักเรียนศึกษาการจัดตาแหน่งข้อความและรูปภาพ ครูให้อธิบาย Position ที่ต้องการจัดวาง รูปภาพ 6. นักเรียนศึกษาการจัดระยะห่างของข้อความกับรูปภาพโดยจะมีคาสั่งการจัดระยะห่างของ ข้อความกับรูปภาพ คือ <IMG HSPACE> ใช้สาหรับระบุช่องว่างระหว่างรูปภาพกับข้อความ 7. นักเรียนศึกษาการปรับแต่งขนาดของรูปภาพโดยจะมีคาสั่งสาหรับการปรับแต่งขนาดของ รูปภาพดังนี้ รูปแบบคาสั่ง <IMG WIDTH=Pixel> ครูให้นักเรียนบอกค่าของ Pixel ว่าคืออะไร 8. นักเรียนศึกษาการควบคุมข้อความรอบรูปภาพ โดยจะมีคาสั่งควบคุมข้อความรอบรูปภาพ ดังนี้ รูปแบบคาสั่ง <BR Clear=Position> ครูให้นักเรียนบอกถึง Position ว่ามีอะไรบ้าง 9. นักเรียนศึกษาการกาหนดพื้นหลัง <Background> โดยใช้รูปภาพโดยจะมีคาสั่งในการกาหนด พื้นหลังดังนี้ <Body Background = File name> ครูให้นักเรียนบอกถึง Filename มีความหมายว่า อย่างไรและให้ลองปฏิบัติ ขั้นที่ 3 ขั้นสรุป 1. ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน นักเรียนศึกษาข้อมูล เรื่องการจัดการรูปภาพผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการจัดการรูปภาพ และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการจัดการรูปภาพเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 15.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 16.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 6 เรื่อง การเชื่อมโยงเอกสาร (Hyperlink) เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ 1 สาระสาคัญ HTML เป็นไฟล์ Hyper link ที่สามารถเชื่อมโยงเอกสารต่อกันได้ คือ ผู้เยี่ยมชมเว็บจะสามารถเปิด อ่านข้อมูลในแต่ละหน้าได้อย่างต่อเนื่อง ทาให้มีความสะดวดรวดเร็วในการใช้งานการเชื่อมโยงเอกสาร สามารถแบ่งได้เป็น 2 ประเภท คือ Internal Link และ External Link 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ แบ่งประเภทการเชื่อมโยงเอกสาร อธิบายการเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน ใช้คาสั่งในการเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน ใช้คาสั่ง <A HREF> ในการเชื่อมโยงไปยังไฟล์อื่น ใช้คาสั่ง <A HREF> ในการเชื่อมโยงไปยังไฟล์อื่นโดยมีกาหนดตาแหน่ง ใช้คาสั่ง <A HREF> ในการเชื่อมโยง Web Sites อื่น ใช้คาสั่ง <A HREF> ในการเชื่อมโยงโดยการใช้รูปภาพ ใช้คาสั่ง <A HREF> ในการเชื่อมโยงกับ E-Mail ใช้คาสั่ง <Body Link> ในการกาหนดสีตัวอักษรที่ใช้เชื่อมโยงข้อมูล 4 สาระการเรียนรู้ การเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน การเชื่อมโยงไปยังไฟล์อื่นหรือ Web Page อื่น การเชื่อมโยงไปยังไฟล์อื่นโดยมีการกาหนดตาแหน่ง การเชื่อมโยงไปยัง Web Site อื่นการเชื่อมโยงโดยใช้รูปภาพ การใช้การเชื่อมโยงกับจดหมายอิเล็กทรอนิกส์ 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา นักเรียนร่วมกันศึกษาการเชื่อมโยงเอกสาร (Hyper Link) แล้วร่วมกันอภิปรายการเชื่อมโยงข้อมูล ภายในเอกสารเดียวกันและการเชื่อมโยงไปยังไฟล์อื่นหรือ Web Page อื่น การเชื่อมโยงไปยังไฟล์อื่นโดยมี การกาหนดตาแหน่ง สามารถทาได้อย่างเข้าใจและสามารถทาตามตัวอย่างได้ ขั้นที่ 2 ขั้นสอน 1. นักเรียนศึกษาการเชื่อมโยงข้อมูลภายในเอกสารเดียวกัน ครูให้นักเรียนลอกรูปแบบคาสั่งลงใน สมุด โดยรูปแบบคาสั่งคือ <A NAME=Lable>……….ข้อความ.......</A> และบอกความหมายของ Lable 2. นักเรียนศึกษาการเชื่อมโยงไปยังไฟล์อื่นโดยมีการกาหนดตาแหน่ง ครูให้นักเรียนลอกรูปแบบ คาสั่งลงในสมุดโดยรูปแบบคาสั่งคือ<A HREF=/Path/Filename.html#Lable>……ข้อความ......</A> ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 17.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 3. นักเรียนศึกษาการเชื่อมโยงไปยัง Web Sites อื่น ครูให้นักเรียนลอกรูปแบบคาสั่งลงในสมุดโดย รูปแบบคาสั่งคือ <A HREF=URL>......ข้อความ.....</A> หรือ <A HREF=FTP://Ftpsever> และบอก ความหมายจอง URL,FTP,Ftpserver 4. นักเรียนศึกษาการเชื่อมโยงโดยใช้รูปภาพ ครูให้นักเรียนลอกรูปแบบคาสั่งลงในสมุดโดยรูปแบบ คาสั่งคือ<A HREF=URL><IMG SRC=Filename>…….</A> และบอกความหมายของ URL, <IMG SRC> 5. นักเรียนศึกษาการใช้การเชื่อมโยงกับจดหมายอิเล็กทรอนิกส์ (E-Mail) ครูให้นักเรียนลอก รูปแบบคาสั่งลงในสมุดโดยรูปแบบคาสั่งคือ <A HREF=Mail to :E-Mail Address>……ข้อความ........</A> และบอกความหมายของ Mailto,E-Mail Address 6. นักเรียนศึกษาการกาหนดสีตัวอักษรที่ใช้เชื่อมโยงข้อมูล ครูให้นักเรียนลอกรูปแบบคาสั่งลงใน สมุดโดยรูปแบบคาสั่ง <Body Link=#Color>, <Body Alink “=#color”> <Body Vlink= “#color”> ขั้นที่ 3 ขั้นสรุป ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน นักเรียนศึกษาข้อมูล เรื่องการเชื่อมโยงเอกสารผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการเชื่อมโยงเอกสารและเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการเชื่อมโยงเอกสารเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 18.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ............................................................................................................................................ ...................... ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 19.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 7 เรื่อง การสร้างลาดับของข้อมูล (List) เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ 1 สาระสาคัญ การสร้างลาดับรายการของข้อมูลเป็นการช่วยแบ่งข้อมูลออกเป็นหัวข้อ เพื่อจัดระเบียบให้แก่ เอกสาร 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ ระบุประเภทของการสร้างลาดับรายการของข้อมูล อธิบายการสร้างลาดับรายการแบบไม่มีลาดับข้อมูล อธิบายการสร้างลาดับรายการแบบเรียงลาดับข้อมูล อธิบายการสร้างลาดับรายการแบบรายการคาศัพท์แสดงลาดับรายการที่สัมพันธ์กันทั้งเอกสาร แสดงลาดับรายการหลายรูปแบบ และแบบรายการย่อย อธิบายคาศัพท์ได้ 4 สาระการเรียนรู้ การสร้างลาดับรายการแบบเรียงลาดับ การสร้างลาดับรายการแบบไม่เรียงลาดับ การสร้างลาดับรายการแบบรายการคาศัพท์ การแสดงลาดับรายการที่สัมพันธ์กันทั้งเอกสาร การแสดงลาดับรายการย่อย การแสดงลาดับรายการหลายรูปแบบ 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา นักเรียนร่วมกันทบทวนบทเรียนที่ผ่านมา 10 นาที แล้วศึกษาการสร้างลาดับรายการของข้อมูล ขั้นที่ 2 ขั้นสอน 1. นักเรียนศึกษาการสร้างลาดับรายการของข้อมูลว่ามีกี่แบบ แล้วครูแบ่งนักเรียนออกเป็นกลุ่ม กลุ่มละ 4 คน จะได้ทั้งหมด 5 กลุ่ม แต่ละกลุ่มจะได้หัวข้อไม่เหมือนกันและให้แต่ละกลุ่มศึกษาร่วมกัน เพื่อที่จะออกมาอภิปรายหน้าชั้นเรียนทีละกลุ่ม โดยใช้เวลากลุ่มละ 10 นาที 2. นักเรียนศึกษาวิธีการสร้างลาดับรายการแบบเรียงลาดับข้อมูล (Ordered List) พร้อมกันพอ ศึกษาเสร็จแล้ว ครูให้เขียนรูปแบบคาสั่งของการสร้างลาดับรายการแบบเรียงลาดับข้อมูลลงในสมุด 3. นักเรียนศึกษาวิธีการสร้างลาดับรายการแบบเรียงลาดับข้อมูลเสร็จแล้วครูให้นักเรียนดูตัวอย่าง ที่ 7.1 เพื่อปฏิบัติตามตัวอย่างแล้วส่งให้ครูตรวจดูในแต่ละเครื่องเพื่อเอาคะแนน 4. นักเรียนศึกษาลาดับรายการแบบไม่มีเรียงลาดับข้อมูลในหัวข้อต่อมา ศึกษาเสร็จแล้วครูจะเรียก ทีละคนเพื่อที่จะมาอธิบายหน้าชั้นให้เพื่อนฟัง และทดสอบความเข้าใจพร้อมเขียนรูปแบบคาสั่งใน หน้ากระดาษให้เพื่อนในได้ทราบพร้อม ๆ กัน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 20.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 5. นักเรียนศึกษาลาดับรายการแบบไม่มีเรียงลาดับข้อมูลเสร็จเรียบร้อยแล้ว ครูให้นักเรียนดู ตัวอย่างที่ 7.2 เพื่อปฏิบัติตามตัวอย่างแล้วส่งให้ครูตรวจดูในแต่และเครื่องเพื่อเอาคะแนน 6. นักเรียนศึกษาการสร้างลาดับรายการแบบรายการคาศัพท์ในหัวข้อต่อมา แล้วปฏิบัติตาม ตัวอย่างที่ 7.3 ครูเดินตรวจทีละเครื่อง 7. นักเรียนศึกษาการสร้างลาดับรายการที่สัมพันธ์กันทั้งเอกสารในหัวข้อต่อมา แล้วปฏิบัติตาม ตัวอย่างที่ 7.4 ครูเดินตรวจทีละเครื่อง 8. นักเรียนศึกษาการแสดงลาดับรายการย่อยในหัวข้อต่อมา แล้วปฏิบัติตามตัวอย่างที่ 7.5 ครูเดิน ตรวจทีละเครื่อง 9. นักเรียนศึกษาการแสดงลาดับรายการหลายรูปแบบในหัวข้อต่อมา แล้วปฏิบัติตามตัวอย่างที่ 7.6 ครูเดินตรวจทีละเครื่อง ขั้นที่ 3 ขั้นสรุป ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน นักเรียนศึกษาข้อมูล เรื่อง การสร้างลาดับรายการ ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการสร้างลาดับรายการ และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการสร้างลาดับรายการเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 21.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. .................................................................................................................................................................. .............................................................................................................................. .................................... .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 22.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 8 เรื่อง การสร้างตาราง (Table) เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ 1 สาระสาคัญ การสร้างตาราง เป็นวิธีการนาเสนอข้อมูลที่เหมาะสมกับข้อมูลที่มีการแบ่งประเภทแบ่งกลุ่มของ ข้อมูล จะทาให้ดูข้อมูลได้ง่าย 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ บอกความหมายและวิธีการในการสร้างตารางได้ เข้าใจและสามารถปฏิบัติสร้างตารางในหน้าเว็บเพจได้ 4 สาระการเรียนรู้ การสร้างเส้นกรอบให้กับตาราง การกาหนดตาแหน่งของตาราง การกาหนดสีให้กับตาราง การกาหนดขนาดของตาราง การกาหนดระยะห่าง การกาหนดตาแหน่งของชื่อตาราง การกาหนดตาแหน่งข้อมูลในแถว การกาหนดตาแหน่งข้อมูลในเซลล์ การกาหนดสีให้กับเซลล์ การกาหนดขนาดของเซลล์ การรวมแถวและคอลัมน์ในตาราง 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา 1. นักเรียนยกตัวอย่างตารางที่เคยพบมาคนละ 1 ตาราง โดยเขียนลงสมุดของตัวเอง 2. นักเรียนศึกษาโครงสร้างของตารางแล้วบอกครูว่าโครงสร้างของตารางมีอะไรบ้างอธิบายทีละคน ขั้นที่ 2 ขั้นสอน 1. นักเรียนศึกษาโครงสร้างของตารางแล้วเขียนโครงสร้างลงในสมุดแล้วบอกรายละเอียดของตาราง ให้ครูทราบตามเลขที่ 2. นักเรียนศึกษาวิธีการสร้างกรอบให้กับตารางแล้วเขียนรูปแบบคาสั่ง<TABLE BORDER> ลงใน สมุดแล้วอธิบายให้ครูฟังว่าคาสั่ง<TABLE BORDER>ใช้สาหรับกาหนดอะไรในตาราง และ Pixel คือค่า อะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.1 3. นักเรียนศึกษาวิธีการกาหนดตาแหน่งของตารางและบอกว่าคาสั่งการกาหนดตาแหน่งของตาราง คืออะไรเขียนลงในสมุดพร้อมคาศัพท์แต่ละคาอย่างละเอียด ศึกษาเสร็จเรียบร้อยแล้วให้ปฏิบัติตามตัวอย่าง ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 23.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 4. นักเรียนศึกษาการกาหนดสีให้กับตาราง และบอกด้วยว่าการกาหนดสีสามารถแบ่งออกได้เป็นกี่ แบบและแต่ละแบบคือการกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.3 5. นักเรียนศึกษาการกาหนดขนาดของตารางและบอกรูปแบบคาสั่งการกาหนดขนาดของตาราง ด้วยว่ามีกี่คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.4 6. นักเรียนศึกษาการกาหนดระยะห่างพร้อมบอกรูปแบบคาสั่งการกาหนดระยะห่างว่ามีกี่คาสั่ง แต่ ละคาสั่งใช้สาหรับกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.5 7. นักเรียนศึกษาการกาหนดตาแหน่งของชื่อตารางพร้อมบอกรูปแบบคาสั่งการกาหนดตาแหน่ง ของชื่อตารางว่าคาสั่ง <CAPTION ALIGN> ใช้สาหรับกาหนดอะไร และมี Attribute อะไรบ้างที่เป็นคาสั่ง เสริม ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.6 8. นักเรียนศึกษาการกาหนดตาแหน่งข้อมูลในแถวพร้อมบอกรูปแบบคาสั่งการกาหนดตาแหน่ง ข้อมูลในแถวว่ามีกี่คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.7 9. นักเรียนศึกษาการกาหนดตาแหน่งข้อมูลในเซลล์พร้อมบอกรูปแบบคาสั่งการกาหนดตาแหน่ง ข้อมูลในเซลล์ว่ามีกี่คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไร ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.8 10. นักเรียนศึกษาการกาหนดสีให้กับเซลล์พร้อมบอกรูปแบบคาสั่งการกาหนดสีให้กับเซลล์ว่ามีกี่ คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไรศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.9 11. นักเรียนศึกษาการกาหนดขนาดของเซลล์พร้อมบอกรูปแบบคาสั่งการกาหนดขนาดของเซลล์ว่า มีกี่คาสั่ง แต่ละคาสั่งใช้สาหรับกาหนดอะไรศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.10 12. นักเรียนศึกษาการรวมแถวและคอลัมน์ในตารางให้นักเรียนบอกรูปแบบคาสั่งว่า<TD COLSPAN> เป็นคาสั่งที่ใช้สาหรับกาหนดรวมอะไรเข้าด้วยกัน และ<TD ROWSPAN> เป็นคาสั่งที่ใช้ สาหรับกาหนดรวมอะไรเข้าด้วยกัน ศึกษาเสร็จแล้วให้ปฏิบัติตามตัวอย่างที่ 8.11 ขั้นที่ 3 ขั้นสรุป ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน นักเรียนศึกษาข้อมูล เรื่อง การสร้างตาราง ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการสร้างตาราง และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 24.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการสร้างตารางเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 25.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ ............................................................................................................................ ...................................... .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 26.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 9 เรื่อง การสร้างแบบฟอร์ม เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ 1 สาระสาคัญ การสร้างแบบฟอร์ม ถือเป็นอีกส่วนหนึ่งที่ขาดไม่ได้ในการสร้างเว็บไซต์ เพราะการสร้างแบบฟอร์ม สามารถนามาใช้ประโยชน์ได้หลายอย่าง ได้แก่ การทาแบบฟอร์มเพื่อรับสมัครสมาชิกของเว็บไซต์ การทา แบบฟอร์มการสมัครงานของเว็บไซต์ที่รับสมัครงาน การทาแบบฟอร์มสาหรับการตอบคาถามในเว็บไซต์ 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ อธิบายคาสั่งและใช้คาสั่งในการสร้างฟอร์มได้ ใช้คาสั่งในการสร้างรูปแบบการนาเข้าข้อมูลได้ 4 สาระการเรียนรู้ การใช้คาสั่งในการสร้างแบบฟอร์ม การกาหนดรูปแบบของแบบฟอร์ม การใช้คาสั่งในการสร้างแบบฟอร์มการรับข้อมูล การสร้างรูปแบบการนาเข้าข้อมูล 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา 1. ครูและนักเรียนร่วมกันศึกษาการสร้างแบบฟอร์มครูอภิปรายให้นักเรียนฟังเรื่องการสร้าง แบบฟอร์ม 2. ครูยกตัวอย่างคาสั่งในหัวข้อต่างๆ ให้นักเรียนทราบเพื่อให้นักเรียนได้จดคาสั่งให้ครูยกตัวอย่าง ให้ดูจดลงในสมุด ขั้นที่ 2 ขั้นสอน 1. ครูอธิบายการใช้คาสั่งในการสร้างแบบฟอร์มและพูดถึง Attribute ในการสร้าง FROM มีคาสั่ง เสริมอะไรบ้างและพูดถึงคาศัพท์ในหัวข้อการสร้างแบบฟอร์มด้วยว่ามีกี่คาศัพท์ เช่น Method, Action, URL เป็นต้น 2. ครูให้นักเรียนดูหัวข้อการกาหนดรูปแบบของแบบฟอร์มแล้วตอนให้ครูทราบโดยครูจะเรียกทีละ เลขที่ เพื่อที่ดูความเข้าใจของนักเรียน 3. ครูให้นักเรียนศึกษาการใช้คาสั่งในการสร้างแบบฟอร์มการรับข้อมูล และให้นักเรียนลุกขึ้นพูดที ละคนเกี่ยวกับรูปแบบคาสั่งของการสร้างแบบฟอร์มการรับข้อมูล และให้นักเรียนจดคาศัพท์แต่ละคาลงใน สมุด ศึกษาเสร็จเรียบร้อยแล้วปฏิบัติตามตัวอย่างที่ 9.1, 9.2 และ 9.3 4. ครูให้นักเรียนศึกษาตัวอย่างที่ 9.4 จนถึงตัวอย่างที่ 9.7 ศึกษาเสร็จเรียบร้อยแล้วให้ปฏิบัติตาม ตัวอย่างดังกล่าวให้ทาการบันทึกงานตัวอย่างแต่ละหัวข้อใส่ในแผ่นดิสก์ส่งให้ครูท้ายคาบ 5. ครูให้นักเรียนได้ทาแบบทดสอบตอนที่ 2 เกี่ยวกับคาศัพท์ในการสร้างแบบฟอร์ม เพื่อทดสอบ ความรู้ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 27.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 6. นักเรียนทาแบบทดสอบเสร็จแล้วเหลือเวลา 45 นาที ครูให้นักเรียนศึกษาการสร้างรูปแบบการ นาเข้าข้อมูล และบอกถึงรูปแบบคาสั่งการสร้างรูปแบบการนาเข้าข้อมูลด้วย ศึกษาเสร็จแล้วครูให้ปฏิบัติ ตามตัวอย่างที่ 9.8 – 9.9 ขั้นที่ 3 ขั้นสรุป ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน นักเรียนศึกษาข้อมูล เรื่อง การสร้างแบบฟอร์ม ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการสร้างแบบฟอร์ม และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการสร้างแบบฟอร์ม เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 28.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ .............................................................................................................................. .............. แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. .................................................................................................................................................................. ...................................................................................................................... ............................................ .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 29.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 10 เรื่อง เฟรม เวลา 4 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 3 เรื่อง เทคนิคในการสร้างเว็บ 1 สาระสาคัญ การแสดงผลแบบหนึ่งโดยส่วนของจอภาพจะถูกแบ่งเป็นเว็บเพจมากกว่า 1 เว็บเพจมาแสดงพร้อม กันในหน้าจอเดียวกัน จะแสดงผลโดยการแบ่งหน้าจอออกเป็นส่วน ๆ เพื่อใช้ในการแสดงเว็บเพจแต่ละหน้า การกระทากับเฟรมหนึ่งจะไม่มีผลกระทบทาให้เกิดการเปลี่ยนแปลงกับเฟรมอื่นและสามารถที่จะเชื่อมโยง ในแต่ละเฟรมไปยังเว็บเพจอื่นได้ แต่ไม่ควรที่จะสร้างเฟรมในหน้าเดียวกันมากเกินไปเพราะจะทาให้เกิด ความสับสนได้ จึงควรแบ่งเฟรมให้เหมาะสมกับเนื้อหาภายในเว็บไซต์ 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ อธิบายคาสั่งและใช้คาสั่งในการสร้างเฟรมได้ ทราบความหมายของคาสั่งเฟรม 4 สาระการเรียนรู้ โครงสร้างของเฟรม การแบ่งเฟรม การกาหนดเส้นขอบระหว่างเฟรม การกาหนดรายละเอียดของเฟรม การสร้างเฟรมใหม่บนเฟรม การกาหนดเฟรมหลัก ชื่อสงวนที่ไม่ควรนามาตั้งชื่อเฟรม 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา ครูและนักเรียนร่วมกันอภิปรายเรื่องเฟรม และรวมถึงโครงสร้างของเฟรม พร้อมทั้งคาศัพท์ในการ สร้างเฟรม ขั้นที่ 2 ขั้นสอน 1. ครูแจกใบความรู้เรื่องเฟรมให้นักเรียนจนครบคนครูได้อธิบายเกี่ยวกับโครงสร้างของเฟรมให้ นักเรียนได้ทราบพร้อมทั้งคาศัพท์ที่เกี่ยวกับเฟรมแล้วให้นักเรียนจดคาศัพท์ในหัวข้อโครงสร้างของเฟรมลง ในสมุด 2. ครูให้นักเรียนศึกษาเรื่องการแบ่งเฟรมตามใบความรู้ที่ได้แจกให้และให้นักเรียนบอกว่ารูปแบบ คาสั่งของการแบ่งเฟรมมีอะไรบ้าง ศึกษาเสร็จเรียบร้อยแล้วให้นักเรียนปฏิบัติตามตัวอย่างที่ 10.1 และครู อธิบายการแบ่งเฟรมให้นักเรียนได้ทราบอีกครั้งหนึ่งเพื่อให้นักเรียนได้เข้าใจเพิ่มมากขึ้น 3. ครูอธิบายการกาหนดเส้นขอบระหว่างเฟรมให้นักเรียนดูตามใบความรู้พร้อมไปด้วย และให้ นักเรียนบอกรูปแบบคาสั่งการกาหนดเส้นขอบระหว่างเฟรม ครูอธิบายการกาหนดเส้นของระหว่างเฟรม ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 30.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 เสร็จแล้วให้นักเรียนได้ปฏิบัติตามตัวอย่างที่ 10.3 และครูปฏิบัติไปพร้อมกับนักเรียนเพื่อทาเป็นตัวอย่างให้ นักเรียนได้ปฏิบัติตาม 4. ครูอธิบายการกาหนดรายละเอียดของเฟรมให้นักเรียนดูตามใบความรู้พร้อมไปด้วย และให้ นักเรียนบอกรูปแบบคาสั่งการกาหนดรายละเอียดของเฟรมเสร็จแล้วให้นักเรียนได้ปฏิบัติตามตัวอย่างที่ 10.5 และครูปฏิบัติไปพร้อมกับนักเรียนเพื่อทาเป็นตัวอย่างให้นักเรียนได้ปฏิบัติตาม 5. ครูอธิบายการสร้างเพจใหม่บนเฟรมและให้นักเรียนดูใบความรู้ตามไปด้วยพร้อมจดรูปแบบคาสั่ง การสร้างเพจใหม่บนเฟรมลงในสมุดด้วย ครูอธิบายเสร็จแล้วให้นักเรียนได้ปฏิบัติตามตัวอย่างที่ 10.8 และ ครูได้ปฏิบัติไปพร้อมกันกับนักเรียนเพื่อทาเป็นตัวอย่างให้นักเรียนได้ปฏิบัติตาม 6. ครูอธิบายการกาหนดเฟรมหลักให้นักเรียนดูใบความรู้ตามไปด้วยเพื่อความเข้าใจมากขึ้นของ นักเรียน ครูอธิบายเสร็จแล้วให้นักเรียนได้ปฏิบัติตามตัวอย่างที่ 10.9 และครูได้ปฏิบัติพร้อมกับนักเรียน เพื่อให้ทาเป็นตัวอย่างให้นักเรียนได้ปฏิบัติตาม ขั้นที่ 3 ขั้นสรุป ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน นักเรียนศึกษาข้อมูล เรื่อง การสร้างเฟรม ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการสร้างเฟรมและเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการสร้างเฟรมเพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 31.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. ...................................................................................................................... ............................................ .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 32.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 แผนการจัดการเรียนรู้ที่ 11 เรื่อง การ Upload เว็บเพจ เวลา 2 ชั่วโมง รายวิชา การสร้างเว็บเพจด้วย HTML ชั้นมัธยมศึกษาปีที่ 4 หน่วยที่ 4 เรื่อง การเผยแพร่เว็บเพจ 1 สาระสาคัญ หลังจากที่ได้ศึกษาการเขียนเว็บไซต์โดยใช้โปรแกรมภาษา HTML จนสามารถสร้างเว็บไซต์เสร็จ สมบูรณ์แล้ว การนาเว็บไซต์มาใช้งานก็เป็นขั้นตอนที่สาคัญอีกขั้นตอนหนึ่ง ซึ่งเรียกว่าการ Upload การ Upload เว็บเพจสามารถทาได้โดยจะต้องมีการสมัครเป็นสมาชิกกับผู้ใช้บริการอินเทอร์เน็ต หรือ ISP (Internet Service Provider) เพื่อขอพื้นที่ว่างสาหรับการ Upload เว็บเพจเสียก่อน ซึ่งในปัจจุบันผู้ ให้บริการอินเทอร์เน็ตทั้งในประเทศและต่างประเทศให้เลือกเป็นจานวนมาก 2 มาตรฐานการเรียนรู้ ง 3.1 ม 4-6/6, 4-6/8, 4-6/9, 4-6/11, 4-6/12 3 ผลการเรียนรู้ ยกตัวอย่างรายชื่อผู้ให้บริการอินเทอร์เน็ต บอกขั้นตอนการขอพื้นที่ว่างสาหรับเว็บไซต์ อธิบายขั้นตอนของการ Activate อธิบายขั้นตอนการขอ Upload อภิปราย “การนาเว็บไซต์มาใช้งาน” 4 สาระการเรียนรู้ รายชื่อผู้ให้บริการอินเทอร์เน็ต ขั้นตอนการขอพื้นที่ว่าง ขั้นตอนการขอ Upload 5 กระบวนการจัดการเรียนรู้ ขั้นที่ 1 ขั้นนา 1. ครูและนักเรียนร่วมกันศึกษาวิธีการ Upload เว็บเพจ เพื่อที่จะนาเว็บเพจที่นักเรียนได้ทาเสร็จ ลงอินเทอร์เน็ต 2. ครูให้นักเรียนบอกผู้ให้บริการอินเทอร์เน็ตแบบให้เช่าพื้นที่ว่างและแบบไม่เสียค่าบริการ ขั้นที่ 2 ขั้นสอน 1. ครูสอนวิธีการขอพื้นที่ว่างเพื่อที่จะนาเว็บเพจลงอินเทอร์เน็ตโดยเข้าในเว็บไซต์ http://www.thcity.com/ เพราะเว็บไซต์นี้จะสามารถขอพื้นที่ว่างได้และไม่เสียค่าบริการ 2. ครูให้นักเรียนเข้าไปในเว็บไซต์ http://www.thcity.com/ ครูพานักเรียนสมัครเป็นสมาชิกของ เว็บไซต์ 3. สมัครสมาชิกได้แล้วครูให้นักเรียนเตรียมงานที่ทาเสร็จเพื่อที่จะลงในอินเทอร์เน็ต 4. เมื่อลงเว็บเพจที่นักเรียนได้ทามาเสร็จแล้วและครั้งต่อไปเมื่อนักเรียนจะแก้งานตัวเองก็สามารถที่ จะแก้ไขได้ในเว็บไซต์ของตัวเองโดยไม่ต้องแก้ไขที่แผ่นโดยครูได้แนะนาขั้นตอนต่างๆ ให้นักเรียนได้ทราบ แล้ว ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 33.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 ขั้นที่ 3 ขั้นสรุป ครูและนักเรียนร่วมกันสรุปเนื้อหาที่เรียน ขั้นที่ 4 ฝึกฝนผู้เรียน นักเรียนศึกษาข้อมูล เรื่อง การอัพโหลดเว็บไซต์ ผ่านเว็บไซต์ http://comkrutae.wordpress.com ขั้นที่ 5 การนาไปใช้ นักเรียนทดสอบการอัพโหลดเว็บไซต์ และเริ่มต้นใช้งานได้ด้วยตนเอง 6 สื่อการเรียนรู้ 1. คอมพิวเตอร์ที่ติดตั้งโปรแกรม Notepad และเชื่อมต่อระบบอินเทอร์เน็ต 2. ตัวอย่างเว็บไซต์สาหรับค้นหาข้อมูล 3. หนังสือการสร้างเว็บเพจด้วยภาษา HTML 4. แบบทดสอบก่อนเรียนในบทเรียนออนไลน์ 7 การวัดผลประเมินผลการเรียนรู้ ด้านความรู้ (K) ด้านคุณธรรม จริยธรรม (A) ด้านทักษะ/กระบวนการ (P) 1. สังเกตจากการอภิปราย 1. สังเกตความตั้งใจและความ 1. สังเกตการให้ความร่วมมือใน 2. ตรวจใบงานที่ทา กระตือรือร้นในการทางาน การทากิจกรรมกลุ่ม 2. สังเกตพฤติกรรมด้านความ 2. สังเกตพฤติกรรมขณะ รับผิดชอบในการทางานที่ได้รับ ปฏิบัติงาน มอบหมาย 8 กิจกรรมเสริมการเรียนรู้ นักเรียนศึกษาการอัพโหลดเว็บไซต์ เพิ่มเติม จากแหล่งเรียนรู้อื่น ๆ 9 แหล่งการเรียนรู้เพิ่มเติม 1. เว็บไซต์ http://www.kruaoy.com 2. เว็บไซต์สาหรับค้นข้อมูล เช่น http://www.google.com, http://www.yahoo.com 3. เว็บไซต์ http://comkrutae.wordpress.com 4. ผู้สอนคอมพิวเตอร์ นักวิชาการคอมพิวเตอร์ บุคลากรด้านเทคโนโลยีสารสนเทศ 5. ห้องปฏิบัติการคอมพิวเตอร์ ห้องสมุด ห้องสมุดแห่งประชาชน ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com
  • 34.
    แผนการจัดการเรียนรู้รายวิชาการสร้างเว็บเพจ รหัสวิชา ง30242 ชั้นมัธยมศึกษาปีที่ 4-6 10 บันทึกผลการจัดการเรียนรู้ ผลการจัดกิจกรรม ............................................................................................................................................ ............................................................................................................................................ ปัญหา/อุปสรรค ............................................................................................................................................ ............................................................................................................................................ แนวทางในการแก้ไขปัญหา ............................................................................................................................................ ............................................................................................................................................ ลงชื่อ........................................ (นายเทวัญ ภูพานทอง) ความคิดเห็นหัวหน้ากลุ่มสาระฯ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางกาไล ตุระซอง) ตาแหน่ง หัวหน้ากลุ่มสาระการเรียนรู้การงานอาชีพฯ ความคิดเห็นรองผู้อานวยการกลุ่มบริหารวิชาการ .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. .................................................................................................................................................................. ลงชื่อ.................................................. (นางสาวรจนา ใจศิริ) ตาแหน่ง รองผู้อานวยการกลุ่มบริหารวิชาการ ครูเทวัญ ภูพานทอง ครู โรงเรียนนามนพิทยาคม สพม.24 http://comkrutae.wordpress.com