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