แผนการจัดการเรียนรู้การพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล20901-2004

1

แผนการจัดการเรยี นรู้

มุ่งเน้นสมรรถนะอาชพี และบูรณาการปรัชญาของเศรษฐกจิ พอเพียง

รหัสวชิ า 20901-2004 ชื่อวิชา การพัฒนาเว็บดว้ ยภาษาเอชทเี อม็ แอล
(ท-ป-น 1-2-2)

หลกั สตู รประกาศนียบตั รวชิ าชีพ พุทธศกั ราช 2562
ประเภทวชิ า เทคโนโลยสี ารสนเทศและการสอื่ สาร สาขาวิชา เทคโนโลยสี ารสนเทศ

จัดทาโดย
นางมะลิ จรรยากรณ์

ภาคเรียนท่ี 2 ปีการศึกษา 2564
แผนกวชิ า เทคโนโลยีสารสนเทศ วทิ ยาลยั การอาชพี ศรสี ะเกษ
สานักงานคณะกรรมการการอาชวี ศึกษา กระทรวงศึกษาธิการ

2

การตรวจสอบและอนุญาตให้ใช้แผนการจดั การเรียนรู้

รหัสวชิ า 20901-2004 ชื่อวิชา การพัฒนาเว็บด้วยภาษาเอชทีเอม็ แอล ท-ป-น 1-2-2
หลกั สูตร ประกาศนยี บัตรวิชาชพี พทุ ธศักราช 2562
ประเภทวชิ า เทคโนโลยสี ารสนเทศและการส่อื สาร สาขาวิชา เทคโนโลยีสารสนเทศ
ภาคเรยี นที่ 2 ปกี ารศึกษา 2564 ครผู ูส้ อน นางมะลิ จรรยากรณ์

ได้จัดทาแผนการจดั การเรียนรู้ตามขอ้ กาหนดของสถานศึกษา ดงั นี้

 มีการวิเคราะห์หลักสตู รรายวิชา เพือ่ กาหนดหนว่ ยการเรียนรู้ทม่ี ุ่งเน้นสมรรถนะอาชพี (หนา้ 8 )
 แผนการจัดการเรียนรู้มีการบูรณาการคุณธรรม จริยธรรม ค่านิยม คุณลักษณะที่พึงประสงค์ และปรัชญาของ

เศรษฐกิจพอเพยี ง (ตัวอย่าง หน้า 11-12)
 แผนการจัดการเรียนรู้มกี ารกาหนดรูปแบบการเรยี นรสู้ กู่ ารปฏิบัติและกิจกรรมการจัดการเรียนรู้ที่หลากหลาย เชน่

Project-based Learning, Active Learning, STEM Education, Cooperative Learning, Integrate Teaching,
CIPPA Model, The use of Community activities เป็นตน้ (ตัวอย่าง หน้า 27 )
 แผนการจัดการเรียนรู้มกี ารกาหนดการใช้สื่อ เครื่องมือ อุปกรณ์ และเทคโนโลยีการจัดการเรียนรู้ที่เหมาะสม และ
นามาใชใ้ นการจดั การเรียนการสอน (ตวั อย่าง หน้า 12 )
 แผนการจัดการเรียนรมู้ ีการกาหนดแนวทางการวัดและประเมินผลตามสภาพจรงิ ด้วยรูปแบบวิธีการท่ีหลากหลาย
(ตัวอยา่ ง หน้า 13)

ลงช่ือ...........................................ครูผสู้ อน
(นางมะลิ จรรยากรณ์)

ตาแหนง่ ครู วิทยฐานะครูชานาญการพเิ ศษ

ได้ตรวจสอบแผนการจัดการเรยี นรู้แลว้

 เปน็ ไปตามข้อกาหนดของสถานศกึ ษา ควรอนญุ าตให้ใชใ้ นการสอนได้
 ควรปรบั ปรงุ เกี่ยวกับ .................................................................................................................................................
...........................................................................................................................................................................................

ลงช่ือ...........................................
(นายคณศิ ร บวั จันทร์)

หัวหนา้ แผนกวชิ าเทคโนโลยสี ารสนทศ

ตรวจสอบแลว้ พบวา่
 เป็นไปตามขอ้ กาหนดของสถานศกึ ษา ควรอนุญาตให้ใช้ในการสอนได้
 มรี ายละเอียดอ่นื ๆ ที่ครผู ้สู อนจัดทาเพิม่ เตมิ เชน่ มีการปรับประยกุ ต์หลักสตู รรายวชิ า (ตัวอย่าง หน้า....................)
 อืน่ ๆ..............................................................................................................................................................................
...............................................................................................................................................................................................

ลงชอื่ ...........................................คณะกรรมการตรวจสอบฯ
(นางสาวยุวดี กาญจนพฤฒิพงศ์)

ตาแหนง่ ครู วิทยฐานะครชู านาญการพิเศษ

3

ไดต้ รวจสอบแผนการจัดการเรียนรแู้ ลว้
 เหน็ ควรอนญุ าตให้ใช้ในการสอนได้
 ควรปรับปรงุ ดังเสนอ

ลงชื่อ...........................................
(นางเอมอร ภูมิภักดิ์)

หัวหน้างานพฒั นาหลักสตู รการเรยี นการสอน
 เหน็ ควรอนุญาตให้ใช้ในการสอนได้
 ควรปรับปรงุ ดงั เสนอ
 อื่น ๆ ...........................................................................................................................................................................
...............................................................................................................................................................................................
...............................................................................................................................................................................................

ลงชอ่ื ...........................................รองผอู้ านวยการฝา่ ยวชิ าการ
(นายสายันต์ กุลรตั น์)

วันที่ .............. เดอื น ………………. พ.ศ. ................

 อนญุ าต
 ไม่อนญุ าต เน่ืองจาก......................................................................................................................................................
...............................................................................................................................................................................................
...............................................................................................................................................................................................

ลงชอ่ื ............................................. ผู้อานวยการวทิ ยาลยั การอาชีพศรสี ะเกษ
(นายไพบูลย์ มศี ิลป์)

วนั ท่ี .............. เดอื น ………………. พ.ศ. ..................

4

คานา

แผนการจัดการเรียนรู้ มุ่งเน้นสมรรถนะอาชีพและบูรณาการปรัชญาของเศรษฐกิจพอเพียง เล่มนี้
จัดทาข้ึนโดยมีวัตถุประสงค์เพ่ือใช้เป็นแนวทางในการจัดการเรียนการสอนวิชา การพัฒนาเว็บด้วยภาษา
เอชทีเอ็มแอล รหัสวิชา 20901-2004 ตามหลักสูตรประกาศนียบัตรวิชาชีพ พุทธศักราช 2562 ประเภทวิชา
เทคโนโลยีสารสนเทศและการส่ือสาร สาขาวิชาเทคโนโลยีสารสนเทศ ประกอบด้วย ข้ันตอนการสอน
กระบวนการเรยี นการสอนและกจิ กรรมในการจดั การเรียนการสอน

แผนการจดั การเรียนรเู้ ลม่ นีม้ ที ้ังหมด 11 หน่วย ใช้เวลาในการสอน 54 ชว่ั โมง/ภาคเรียน วธิ ที ี่ใชส้ อน
มี ห ล า ก ห ล า ย วิ ธี เ ช่ น Project-based Learning, Active Learning, STEM Education, Cooperative
Learning, Integrate Teaching, CIPPA Model, The use of Community activities เป็นต้น งานที่
มอบหมายให้ทาจะมีลักษณะงานเด่ียวและงานกลมุ่ โดยมีส่ือการสอนท่ีหลากหลายตามบรบิ ทของสถานศกึ ษา
มกี ารจดั กิจกรรมการเรียนรู้ทง้ั ในห้องเรยี น นอกห้องเรยี น และบูรณาการปรัชญาเศรษฐกจิ พอเพียงกับรายวิชา
อ่นื ๆ ไดอ้ ยา่ งเหมาะสม

การจัดการเรียนการสอนตามแผนการจัดการเรียนรู้เล่มนี้ มีจุดสาคัญคือมุ่งเน้นสมรรถนะให้ผู้เรียน
เป็นคน ดี เก่งและมคี วามสุข ขอขอบพระคณุ วทิ ยาลยั การอาชพี ศรสี ะเกษ

นางมะลิ จรรยากรณ์

สารบญั 5

คานา หนา้
สารบญั 4
แผนการจดั การเรยี นรรู้ ายวิชา 5
การวิเคราะหส์ มรรถนะการเรยี นรู้ 6
ตารางวเิ คราะหห์ ลักสูตรรายวชิ า 7
กาหนดการจัดการเรียนรู้ 8
การวดั ผลและประเมนิ ผลการเรียนรู้ 9
แผนการจดั การเรยี นรู้ หนว่ ยที่ 1 หลกั การสร้างเวบ็ เพจดว้ ยภาษา HTML 10
แผนการจัดการเรียนรู้ หนว่ ยที่ 2 โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C 11
แผนการจดั การเรยี นรู้ หนว่ ยท่ี 3 การรับข้อมูลและการแสดงผลข้อมลู 14
แผนการจดั การเรียนรู้ หน่วยที่ 4 การจัดและแต่งสีขอ้ ความ 17
แผนการจดั การเรียนรู้ หนว่ ยที่ 5 การแทรกรูปภาพ 20
แผนการจัดการเรยี นรู้ หน่วยที่ 6 การตกแตง่ ภาพกราฟิก 23
แผนการจัดการเรียนรู้ หน่วยท่ี 7 การสร้างตาราง 26
แผนการจดั การเรยี นรู้ หนว่ ยท่ี 8 การเชือ่ มโยง 29
แผนการจดั การเรยี นรู้ หน่วยที่ 9 การจัดสร้างเฟรม Style Sheet 32
แผนการจดั การเรยี นรู้ หนว่ ยที่ 10 การใสเ่ ทคนิคพิเศษ 35
แผนการจดั การเรยี นรู้ หน่วยท่ี 11 การขอพื้นที่เว็บไซตแ์ ละการ Upload เวบ็ เพจ 38
41

6

แผนการจัดการเรียนรู้รายวชิ า

มุ่งเนน้ สมรรถนะอาชพี และบูรณาการปรชั ญาของเศรษฐกิจพอเพียง

หลักสูตรประกาศนยี บตั รวชิ าชีพ พุทธศักราช 2562

ประเภทวชิ าเทคโนโลยสี ารสนเทศและการสือ่ สาร สาขาวิชา เทคโนโลยสี ารสนเทศ

รหสั วิชา 20901-2004 ช่อื วชิ า การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล

ท-ป-น 1-2-2 ภาคเรียนที่ 2 ปกี ารศึกษา 2564

จดุ ประสงคร์ ายวชิ า เพื่อให้
1. เขา้ ใจเกย่ี วกบการ ั พฒั นาเวบ็ ด้วยภาษา HTML
2. สามารถพัฒนาเวบ็ ด้วยภาษา HTML
3. มีคณุ ธรรม จริยธรรม และค่านิยมท่ดี ีในการพฒั นาเว็บด้วยภาษาเอชทเี อ็มแอล (HTML)

สมรรถนะรายวิชา
1. แสดงความรูแ้ ละหลักการสรา้ งเว็บเพจด้วยภาษา HTML
2. พฒั นาเว็บไซต์ดว้ ยภาษา HTML

คาอธิบายรายวชิ า
ศึกษาและปฏิบัติเก่ียวกบการสร้างเว็บด้วยภาษา Hyper Text Markup Language (HTML)

โครงสร้างของ การเขียน HTML ตามมาตรฐาน W3C การแสดงผลบน และการรับข้อมูลการจัดและการแต่ง
ข้อความ การแต่งสี การแทรกภาพ การสร้างตาราง การเช่ือมโยงหน้า จัดสร้างเฟรม Style Sheet และ ธีม
(Theme) การใส่ เทคนิคพเิ ศษ การขอพนื้ ทเ่ี ว็บไซตแ์ ละการ Upload เว็บเพจ

คาอธบิ ายรายวชิ า (กรณีปรับปรุงหลักสตู รรายวิชา โดยอาจเพิ่มเป็นรายหน่วย หรอื หวั ข้อย่อย)
ศึกษาและปฏิบัติเกี่ยวกบการสร้างเว็บด้วยภาษา Hyper Text Markup Language (HTML)

โครงสร้างของ การเขียน HTML ตามมาตรฐาน W3C การแสดงผลบน และการรับข้อมูลการจัดและการแต่ง
ข้อความ การแต่งสี การตกแต่งภาพกราฟิก การแทรกภาพ การสร้างตาราง การเช่ือมโยงหน้า จัดสร้างเฟรม
Style Sheet และ ธีม (Theme) การใสเ่ ทคนคิ พิเศษ การขอพน้ื ทเี่ วบ็ ไซตแ์ ละการ Upload เว็บเพจ

7

การวิเคราะห์สมรรถนะการเรยี นรู้

รหสั วชิ า 20901-2004 วิชา การพัฒนาเวบ็ ดว้ ยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

ชอ่ื หน่วย สมรรถนะการเรยี นรู้
หนว่ ยที่ 1 หลกั การสรา้ งเวบ็ เพจด้วยภาษา แสดงความรแู้ ละปฏบิ ตั เิ ก่ียวกบั หลกั การสร้างเว็บเพจดว้ ย
HTML
ภาษา HTML
หน่วยที่ 2 โครงสร้างของการเขียน HTML ตาม
มาตรฐาน W3C แสดงความร้แู ละปฏบิ ัตเิ กย่ี วกับโครงสรา้ งของการเขยี น

หน่วยที่ 3 การรับข้อมลู และการแสดงผลขอ้ มลู HTML ตามมาตรฐาน W3C

หน่วยที่ 4 การจดั และแตง่ สีข้อความ แสดงความร้แู ละปฏิบตั ิเกย่ี วกบั การรับข้อมลู และการ
หนว่ ยท่ี 5 การแทรกรูปภาพ
หนว่ ยท่ี 6 การตกแต่งภาพกราฟิก แสดงผลข้อมูล
หน่วยที่ 7 การสรา้ งตาราง
หนว่ ยท่ี 8 การเชื่อมโยง แสดงความรู้และปฏิบัติเกย่ี วกบั การจัดและแตง่ สีข้อความ
หนว่ ยที่ 9 การจัดสร้างเฟรม Style Sheet แสดงความรแู้ ละปฏบิ ตั เิ กย่ี วกบั การแทรกรปู ภาพ
แสดงความรแู้ ละปฏบิ ัติเกี่ยวกบั การตกแตง่ ภาพกราฟกิ
หน่วยท่ี 10 การใส่เทคนคิ พเิ ศษ แสดงความรแู้ ละปฏิบตั เิ กย่ี วกบั การสร้างตาราง
หน่วยที่ 11 การขอพ้นื ที่เวบ็ ไซต์และการ แสดงความรู้และปฏบิ ตั ิเกี่ยวกบั การเช่ือมโยง
Upload เวบ็ เพจ แสดงความรู้และปฏบิ ัตเิ กี่ยวกับการจดั สรา้ งเฟรม Style
การประเมินผลการเรียน Sheet
แสดงความรแู้ ละปฏบิ ตั ิเกี่ยวกบั การใส่เทคนิคพเิ ศษ
แสดงความรู้และปฏิบตั ิเก่ยี วกับการขอพ้นื ทเ่ี ว็บไซตแ์ ละ
การ Upload เวบ็ เพจ

8

ตารางวิเคราะห์หลกั สตู รรายวชิ า

รหสั วชิ า 20901-2004 วิชา การพฒั นาเว็บดว้ ยภาษาเอชทเี อม็ แอล ท-ป-น. 1-2-2

พุทธพิ ิสัย (20%)
พฤติกรรม ความรู้
ความเข้าใจ
ชือ่ หน่วย การนาไปใ ้ช
การ ิวเคราะห์
การสังเคราะห์
การประเมินค่า

ทักษะพิ ัสย (60%)
ิจตพิ ัสย (20%)
รวม (100%)
ลาดับความสาคัญ
จานวน ่ัชวโมง

หลักการสร้างเว็บเพจด้วยภาษา HTML 111 5 2 10 4 3
5 2 10 4 3
โครงสร้างของการเขยี น HTML ตามมาตรฐาน 1 1 1

W3C 11 529

การรบั ขอ้ มูลและการแสดงผลข้อมลู 3
111 10 3 13 3 3
การจดั และแต่งสีข้อความ
1 10 3 14 2 3
การแทรกรูปภาพ
1
การตกแตง่ ภาพกราฟิก 9
111 10 3 13 3 12
การสรา้ งตาราง
111 10 3 16 1 3
การเชอ่ื มโยง
1
การจดั สร้างเฟรม Style Sheet 6
1
การใสเ่ ทคนิคพิเศษ 3
การขอพืน้ ท่ีเว็บไซตแ์ ละการ Upload เวบ็ เพจ 1 1 52 9 53

สอบกลางภาคเรยี น -- -- - - - - - -1

สอบปลายภาคเรยี น -- -- - - - - - -2

รวม 779 60 20 100 54

ลาดับความสาคญั

หมายเหตุ

พทุ ธพิ สิ ยั ทักษะพสิ ยั จิตพิสยั
1. ความรู้ 1. เลียนแบบ 1. รับรู้
2. ความเขา้ ใจ 2. ทาไดต้ ามแบบ 2. ตอบสนอง
3. การนาไปใช้ 3. ทาได้ ถูกต้อง แมน่ ยา 3. เหน็ คณุ ค่า
4. การวิเคราะห์ 4. ทาไดต้ ่อเนื่อง ประสาน 4. จดั ระบบคุณคา่
5. การสงั เคราะห์ 5. ทาได้อย่างเป็นธรรมชาติ 5. พัฒนาเป็นลักษณะนสิ ยั
6. การประเมนิ คา่

9

กาหนดการจดั การเรยี นรู้

รหัสวชิ า 20901-2004 วิชา การพัฒนาเวบ็ ด้วยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

หนว่ ยท่ี ชอื่ หน่วย/รายการสอน สปั ดาหท์ ่ี ชวั่ โมงที่ จานวนช่วั โมง
1 1-3 3
1 หลกั การสรา้ งเวบ็ เพจด้วยภาษา HTML 2 4-6 3
3 7-9 3
2 โครงสรา้ งของการเขียน HTML ตามมาตรฐาน W3C 4 10-12 3
5 13-15 3
3 การรบั ขอ้ มูลและการแสดงผลข้อมลู 6-8 16-24 9
9-12 25-36 12
4 การจัดและแตง่ สีข้อความ 13 37-39 3
40-45 6
5 การแทรกรปู ภาพ 14-15 46-48 3
16 49-51 3
6 การตกแต่งภาพกราฟิก 17 2

7 การสร้างตาราง 18 1

8 การเช่ือมโยง 54

9 การจัดสรา้ งเฟรม Style Sheet
10 การใสเ่ ทคนิคพิเศษ

11 การขอพ้นื ท่ีเวบ็ ไซต์และการ Upload เว็บเพจ

- สอบกลางภาค สัปดาห์ที่ 9

- สอบปลายภาค สปั ดาห์ท่ี 18

รวม

หมายเหตุ - สอบกลางภาค สปั ดาห์ท่ี 9
- สอบปลายภาค สปั ดาห์ที่ 18

10

การวดั และประเมินผลการเรยี นรู้

รหสั วิชา 20901-2004 วิชา การพัฒนาเว็บดว้ ยภาษาเอชทีเอ็มแอล ท-ป-น. 1-2-2

1. คะแนนคุณธรรม จรยิ ธรรม คะแนนระหว่างเรียน 70 คะแนน 20 คะแนน
1.1 มีความรับผิดชอบ
1.2 มรี ะเบยี บวนิ ัย 4 คะแนน 10 คะแนน
1.3 สนใจใฝร่ ู้ 4 คะแนน 30 คะแนน
1.4 ตรงตอ่ เวลา 4 คะแนน 20 คะแนน
1.5 มสี มั มาคารวะ 4 คะแนน
4 คะแนน
2. แบบฝกึ หัด
3. ใบงาน คะแนนสอบปลายภาค 30 คะแนน
4. สอบกลางภาค

0-49 คะแนน ระดบั คะแนน ระดับผลการเรยี น ระดบั คะแนน 1
55-59 คะแนน ระดับคะแนน 0 50-54 คะแนน ระดบั คะแนน 2
65-69 คะแนน ระดับคะแนน 1.5 60-64 คะแนน ระดับคะแนน 3
75-79 คะแนน ระดบั คะแนน 2.5 70-74 คะแนน ระดับคะแนน 4
3.5 80-100 คะแนน

หมายเหตุ 1. วิชาทฤษฎี คะแนนระหว่างเรยี น : คะแนนปลายภาค 60 : 40

2. วิชาทฤษฎีและปฏิบตั ิ คะแนนระหว่างเรียน : คะแนนปลายภาค 70 : 30

3. วิชาปฏบิ ตั ิ คะแนนระหวา่ งเรยี น : คะแนนปลายภาค 80 : 20

4. คะแนนระหวา่ งเรียน ข้อ 2-4 สามารถแบ่งไดต้ ามความเหมาะสมของลกั ษณะรายวชิ า

11

แผนการจดั การเรียนรู้

มุ่งเนน้ สมรรถนะอาชพี และบูรณาการของเศรษฐกิจพอเพียง

รหสั วชิ า 20901-2004 วิชา การพัฒนาเวบ็ ดว้ ยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

หนว่ ยที่ 1 ชอื่ หน่วย หลักการสร้างเว็บเพจดว้ ยภาษา HTML

จานวน 3 ชว่ั โมง ช่ัวโมงท่ี 1-3 สัปดาหท์ ่ี 1

สาระสาคญั
ปจั จบุ ันน้เี ป็นยุคของการบริโภคข้อมลู ข่าวสาร ผา่ นเทคโนโลยอี นิ เทอร์เน็ต กจิ กรรมความบันเทิง และ

การทาธุรกรรมต่าง ๆ โดยใช้กระบวนการทางคอมพิวเตอร์ โทรศัพท์มือถือ ร่วมกับระบบเครือข่ายท้ังแบบใช้
สาย และไร้สาย การบริโภคข้อมูลมีหลากหลายรูปแบบ ทั้งกระบวนเครือข่ายสังคม Social Network อาทิ
Facebook, Line การแสดงข้อมูลผ่านกระบวนการของเว็บซึ่งแสดงได้หลากหลายรูปแบบ ทั้งภาพ เสียง
ภาพเคลื่อนไหว เว็บเพจจึงเป็นพ้ืนฐานในการสร้างเว็บไซต์ หลักการสร้างเว็บเพจจึงมีความจาเป็นสาหรับผู้ที่
ต้องการสร้างเว็บไซต์เป็นของตนเองเพ่ือให้ได้เว็บที่มีมาตรฐานและเป็นที่สนใจของผู้เข้าชมหน้าเว็บ ภาษา
HTML (HYPER TEXT MARKUP LANGUAGE) เป็นภาษาหนึ่งท่ีใช้ในการสร้างเว็บเพจ โดยเป็นภาษาเชิง
โครงสร้าง มีรูปแบบที่ชัดเจน มีกระบวนการท างานที่เป็นข้ันตอน เข้าใจง่าย จึงเหมาะที่จะเป็นภาษาพ้ืนฐาน
ในการสรา้ งเวบ็ เพจ โดยผเู้ รียนควรรจู้ ักกบั คาศัพท์ที่เกีย่ วกับเวบ็ เพจ หลักการสรา้ งเว็บเพจ และวิธีการท างาน
ต่าง ๆ ที่เกี่ยวกับกระบวนการของเว็บเพ่ือใช้ในการพัฒนาเว็บไซต์ของตนเองให้มีความน่าสนใจ

หวั ข้อเรือ่ ง
1. การสรา้ งเวบ็ เพจ
2. ระบบอินเทอรเ์ น็ต
3. ภาษา HTML

สมรรถนะย่อย
1. แสดงความรู้และปฏบิ ัติเกี่ยวกับหลักการสร้างเวบ็ เพจดว้ ยภาษา HTML

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

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

12

2 เงอ่ื นไข
1. ความรู้

1.1 รอบรู้ มคี วามรเู้ ก่ียวกับหลักการสร้างเว็บเพจดว้ ยภาษา HTML
1.2 รอบคอบ การแก้ไขปัญหาในดา้ นตา่ งๆ ท่ีเกีย่ วกบั คอมพิวเตอร์และอปุ กรณ์

โทรคมนาคม
1.3 ระมดั ระวัง สามารถนามาประยุกตใ์ ชใ้ นงานต่างๆ ได้อยา่ ง เหมาะสมและหลากหลาย
2. คณุ ธรรม
2.1 มีความต้ังใจเพยี รพยายามในการเรียน
2.2 เป็นผมู้ คี วามรักสามัคคี เพ่อื ให้งานที่ไดร้ บั มอบหมาย สาเร็จตามกาหนดเวลา
2.3 เปน็ ผมู้ ีความรับผดิ ชอบ

กจิ กรรมการเรียนการสอน (Active Learning)
ขนั้ นาเขา้ สบู่ ทเรยี น
1. ตรวจสอบรายชื่อนักศกึ ษาทเี่ ขา้ เรียน
2. แจกแบบทดสอบก่อนเรยี น
3. ร่วมสนทนาเก่ียวกบั เรือ่ งหลักการสรา้ งเวบ็ เพจด้วยภาษา HTML

ข้นั สอน
1. บอกจุดประสงคก์ ารเรียน
2. บรรยาย อธิบาย ยกตวั อย่าง หวั ข้อเร่ืองท่ีสอน
3. แจ้งลิงค์ใบความรเู้ พื่อศึกษาและปฏบิ ัติ
4. ซกั - ถาม
5. ประเมนิ พฤตกิ รรมรายบุคคล

ขั้นสรุปและประเมินผล
1. ครแู ละนกั เรียนรว่ มกนั สรปุ สาระสาคัญ
2. เปดิ โอกาสให้นกั เรยี นซกั ถามขอ้ สงสยั
3. มอบหมายให้ไปหดั ทาและศกึ ษาเพ่ิมเตมิ
4. แจกแบบทดสอบหลังเรยี น

สอ่ื การเรยี นการสอน
1. ห้องเรยี นออนไลน์ Classroom รายวชิ าการพฒั นาเว็บด้วยภาษาเอชทีเอ็มแอล
2. ใบงาน
3. แบบทดสอบกอ่ นเรียน/หลงั เรียน

หลกั ฐานการเรยี นรู้/แหล่งเรยี นรู้
1. หลักฐานการเรียนรู้
1.1 เอกสารประกอบการเรยี นวชิ าการพฒั นาเว็บด้วยภาษาเอชทีเอ็มแอล
1.2 ห้องเรียนออนไลน์ Classroom รายวิชาการพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล
2. หลักฐานการปฏบิ ัติงาน

13

2.1 แบบทดสอบก่อนเรียน/หลังเรียน
2.2 แบบฝกึ หัดทา้ ยหนว่ ยการเรียน
2.3 ใบงาน
2.4 ผลการปฏบิ ตั กิ ิจกรรมการเรียน

การวัดผลประเมินผล
1. เครอ่ื งมือวดั ผล
1.1 แบบทดสอบก่อนเรียน/หลังเรยี น
1.2 แบบฝกึ หดั ท้ายหน่วยการเรยี น
1.3 ใบงาน
1.4 แบบประเมินคณุ ธรรม จริยธรรม คา่ นิยม และคุณลักษณะอนั พึงประสงค์
2. วิธวี ดั ผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลงั เรยี น
2.2 ตรวจแบบฝึกหดั ทา้ ยหนว่ ยการเรียน
2.3 ตรวจใบงาน
2.4 สงั เกตและประเมินพฤติกรรมดา้ นคุณธรรม จรยิ ธรรม คา่ นิยม และคณุ ลกั ษณะอนั พึงประสงค์
3. เกณฑก์ ารประเมนิ ผล
3.1 แบบทดสอบก่อนเรยี น (ตามสภาพจริง)/หลงั เรยี น ตอ้ งมีคะแนนไม่น้อยกวา่ 50%
3.2 แบบฝึกหดั ท้ายหน่วยการเรยี น ต้องมคี ะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ต้องมีคะแนนไม่น้อยกว่า 50%
3.4 แบบประเมินคณุ ธรรม จริยธรรม ค่านิยม และคุณลักษณะอนั พงึ ประสงค์ นักเรียนต้องมี

พฤติกรรมครบทุกข้อจึงถือว่า ผา่ นเกณฑ์

14

แผนการจัดการเรยี นรู้

มุ่งเนน้ สมรรถนะอาชีพและบูรณาการของเศรษฐกจิ พอเพียง

รหสั วชิ า 20901-2004 วิชา การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล ท-ป-น. 1-2-2

หนว่ ยที่ 2 ช่อื หนว่ ย โครงสร้างของการเขยี น HTML ตามมาตรฐาน W3C

จานวน 3 ชัว่ โมง ช่ัวโมงที่ 4-6 สัปดาห์ที่ 2

สาระสาคญั
ภาษา HTML (HYPER TEXT MARKUP LANGUAGE) เป็นภาษาหน่ึงท่ีใช้ในการสร้างเว็บเพจ

โดยเป็นภาษาท่ีมีโครงสร้าง มีรูปแบบท่ีชัดเจน มีกระบวนการท างานที่เป็นข้ันตอน เข้าใจง่าย จึงเหมาะท่ีจะ
เปน็ ภาษาพนื้ ฐานในการสร้างเวบ็ เพจ อกี ทงั้ ภาษา HTML เป็นภาษาทไ่ี ด้รบั การกาหนดมาตรฐานจาก W3C ซง่ึ
เป็นองค์กรสากลท่ีทาหน้าท่ีกาหนด และดูแลกระบวนการท างานของการติดต่อส่ือสารข้อมูลผ่านทาง WWW

หวั ข้อเรอ่ื ง
1. โครงสรา้ งของการเขยี น HTML
2. มาตรฐาน W3C

สมรรถนะย่อย
1. แสดงความรู้และปฏิบตั ิเกี่ยวกบั โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C

จดุ ประสงคเ์ ชงิ พฤติกรรม
1. บอกโครงสร้างของการเขยี น HTML ได้
2. บอกมาตรฐาน W3C ได้
3. มีกิจนสิ ัยท่ดี ี มีคุณธรรมจรยิ ธรรม ค่านิยมทดี่ ี ในการใชค้ อมพิวเตอร์ ปฏิบตั ิงานดว้ ย ความ

รับผิดชอบ ซ่ือสัตย์ ใฝร่ ู้ มคี วามคิดรเิ รมิ่ สรา้ งสรรค์ ละเอียด รอบคอบ ปลอดภัย และทางานร่วมกบั ผอู้ ื่นได้
การบูรณาการปรัชญาของเศรษฐกิจพอเพียง

3 ห่วง
1. พอประมาณ ทางานให้เต็มความสามารถ ไม่เบียดเบียนผู้อื่น มีวินัย รับผิดชอบต่อหน้าที่ ท่ี

ไดร้ บั มอบหมาย
2. มเี หตุผล เรยี นรู้และเข้าใจ โครงสรา้ งของการเขียน HTML ตามมาตรฐาน W3C
3. มภี มู คิ ุ้มกัน เรียนร้ทู ่จี ะดารงอยูไ่ ด้ด้วยการพ่ึงพาตนเอง

2 เง่อื นไข
1. ความรู้

1.1 รอบรู้ มคี วามรู้เกีย่ วกับโครงสรา้ งของการเขยี น HTML ตามมาตรฐาน W3C
1.2 รอบคอบ การแก้ไขปัญหาในด้านตา่ งๆ ทเ่ี ก่ยี วกบั ระบบเครือขา่ ยและเทคโนโลยี

สารสนเทศ
1.3 ระมดั ระวัง สามารถนามาประยุกตใ์ ชใ้ นงานต่างๆ ได้อย่าง เหมาะสมและหลากหลาย
2. คณุ ธรรม
2.1 ปฏบิ ตั ิตนในขอบเขต กฎระเบยี บของสถานศกึ ษาอย่างเต็มใจและตง้ั ใจ ยึดมนั่ ในระเบียบ
แบบแผน ข้อบังคบั และข้อปฏิบตั ิ รวมถึงการมวี นิ ยั ท้ังต่อตนเองและสังคม
2.2 เปน็ ผมู้ คี วามรักสามัคคี เพื่อให้งานท่ีไดร้ ับมอบหมาย สาเรจ็ ตามกาหนดเวลา

15

2.3 เป็นผู้มีความรับผิดชอบ

กิจกรรมการเรยี นการสอน (Active Learning)
ขน้ั นาเขา้ สู่บทเรยี น
1. ตรวจสอบรายชื่อนักศกึ ษาทเี่ ข้าเรียน
2. แจกแบบทดสอบก่อนเรียน
3. รว่ มสนทนาเกย่ี วกบั โครงสร้างของการเขยี น HTML ตามมาตรฐาน W3C
ขน้ั สอน
1. บอกจุดประสงคก์ ารเรียน
2. บรรยาย อธิบาย ยกตัวอย่าง หัวขอ้ เร่อื งท่ีสอน
3. แจง้ ลิงค์ใบความรเู้ พื่อศึกษาและปฏบิ ตั ิ
4. ซัก - ถาม
5. ประเมนิ พฤติกรรมรายบุคคล
ขนั้ สรุปและประเมนิ ผล
1. ครแู ละนกั เรยี นร่วมกนั สรปุ สาระสาคญั
2. เปดิ โอกาสใหน้ ักเรยี นซักถามข้อสงสัย
3. มอบหมายใหไ้ ปหัดทาและศึกษาเพิม่ เติม
4. แจกแบบทดสอบหลงั เรียน

ส่อื การเรยี นการสอน
1. หอ้ งเรยี นออนไลน์ Classroom รายวิชาการพัฒนาเวบ็ ด้วยภาษาเอชทเี อ็มแอล
2. ใบงาน
3. แบบทดสอบก่อนเรียน/หลังเรียน

หลักฐานการเรยี นรู้/แหล่งเรียนรู้
1. หลักฐานการเรยี นรู้
1.1 เอกสารประกอบการเรยี นวิชาการพัฒนาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล
1.2 ห้องเรยี นออนไลน์ Classroom รายวชิ าการพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล
2. หลักฐานการปฏบิ ัตงิ าน
2.1 แบบทดสอบกอ่ นเรียน/หลงั เรยี น
2.2 แบบฝึกหดั ทา้ ยหน่วยการเรยี น
2.3 ใบงาน
2.4 ผลการปฏบิ ัตกิ จิ กรรมการเรยี น

การวดั ผลประเมนิ ผล
1. เครื่องมือวดั ผล
1.1 แบบทดสอบก่อนเรยี น/หลงั เรียน
1.2 แบบฝึกหดั ท้ายหนว่ ยการเรียน
1.3 ใบงาน
1.4 แบบประเมนิ คณุ ธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพึงประสงค์

16

2. วิธีวัดผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลังเรยี น
2.2 ตรวจแบบฝึกหัดท้ายหน่วยการเรียน
2.3 ตรวจใบงาน
2.4 สงั เกตและประเมนิ พฤติกรรมดา้ นคุณธรรม จรยิ ธรรม คา่ นิยม และคุณลกั ษณะอนั พึงประสงค์

3. เกณฑก์ ารประเมนิ ผล
3.1 แบบทดสอบกอ่ นเรยี น (ตามสภาพจริง)/หลงั เรยี น ตอ้ งมคี ะแนนไม่น้อยกว่า 50%
3.2 แบบฝึกหดั ท้ายหนว่ ยการเรียน ต้องมีคะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ต้องมีคะแนนไมน่ ้อยกว่า 50%
3.4 แบบประเมนิ คุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพงึ ประสงค์ นักเรยี นต้องมี

พฤติกรรมครบทุกข้อจงึ ถือวา่ ผ่านเกณฑ์

17

แผนการจดั การเรยี นรู้

มุ่งเนน้ สมรรถนะอาชีพและบูรณาการของเศรษฐกจิ พอเพียง

รหสั วิชา 20901-2004 วิชา การพัฒนาเว็บด้วยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

หน่วยที่ 3 ชอ่ื หน่วย การรับข้อมูลและการแสดงผลข้อมลู

จานวน 3 ชั่วโมง ชวั่ โมงท่ี 7-9 สปั ดาห์ที่ 3

สาระสาคัญ
ลักษณะการท างานของโปรแกรมท่ัวไปประกอบด้วยกลุ่มของคาสั่ง 4 ประเภท ได้แก่ การรับข้อมูล

เข้า การประมวลผลขอ้ มลู การเก็บผลลพั ธ์ในอปุ กรณ์บันทึกข้อมลู และ การแสดงผลออก หรอื ที่เรียกวา่ Input
– Process – Storage – Output การสร้างโปรแกรมมักจะกล่าวถึงการแสดงผลลัพธ์เป็นอันดับแรก
เพื่อให้ผู้เขียนโปรแกรมได้มองเห็นผลลัพธ์จากการท างานของโปรแกรม การสร้างเว็บโปรแกรมก็มีการ
แสดงผลลัพธ์ออกบนเว็บเบราว์เซอร์และส่งผลลัพธ์นั้นผ่านบริการเวิลด์ไวด์เว็บบนเครือข่ายอินเตอร์เน็ต ด้าน
การรับข้อมูลสาหรับการพัฒนาเว็บด้วยภาษาHTML จะพูดถึงโปรแกรมที่อานวยความสะดวกในการเขียน
คาสั่งเพ่ือสร้างเวบ็ เพจ และบนั ทึกไฟลเ์ อกสารเป็นรปู แบบไฟล์ HTML

หวั ข้อเร่อื ง
1. การรับข้อมลู
2. การแสดงผลข้อมลู

สมรรถนะย่อย
1. แสดงความรู้และปฏิบตั ิเกยี่ วกบั การรบั ข้อมลู และการแสดงผลข้อมลู

จุดประสงค์เชิงพฤตกิ รรม
1. บอกความหมายของการรบั ข้อมูลได้
2. บอกความหมายของการแสดงผลข้อมลู ได้
3. มกี จิ นิสยั ทีด่ ี มคี ณุ ธรรมจริยธรรม ค่านยิ มที่ดี ในการใช้คอมพิวเตอร์ ปฏิบตั งิ านดว้ ย ความ

รบั ผดิ ชอบ ซอื่ สัตย์ ใฝร่ ู้ มีความคิดริเร่มิ สรา้ งสรรค์ ละเอียด รอบคอบ ปลอดภยั และทางานรว่ มกบั ผู้อื่นได้
การบูรณาการปรัชญาของเศรษฐกิจพอเพียง

3 ห่วง
1. พอประมาณ มีขอบเขตในการรับข้อมลู และการแสดงผลข้อมลู
2. มเี หตุผล ตัง้ ใจปฏบิ ัติงานด้วยการตัดสนิ ใจอย่างรอบคอบ
3. มีภูมคิ ุ้มกัน ตั้งอยู่ในความไม่ประมาทอยู่

2 เง่ือนไข
1. ความรู้

1.1 รอบรู้ มคี วามรู้เกี่ยวกับการรับข้อมูลและการแสดงผลขอ้ มูล
1.2 รอบคอบ การแก้ไขปัญหาในดา้ นต่างๆ ทเี่ กย่ี วกบั การรบั ขอ้ มลู และการแสดงผลขอ้ มูล
1.3 ระมัดระวัง สามารถนามาประยุกตใ์ ช้ในงานตา่ งๆ ไดอ้ ย่าง เหมาะสมและหลากหลาย
2. คุณธรรม

18

2.1 เปน็ ผู้มีความอ่อนน้อมถ่อมตนตามสถานภาพและกาลเทศะ มีสัมมาคารวะ เรยี บร้อย
2.2 เปน็ ผมู้ คี วามรกั สามัคคี เพอื่ ให้งานที่ไดร้ บั มอบหมาย สาเร็จตามกาหนดเวลา
2.3 เป็นผมู้ ีความรบั ผดิ ชอบ
กจิ กรรมการเรยี นการสอน (Active Learning)
ขั้นนาเข้าสู่บทเรยี น
1. ตรวจสอบรายชอื่ นกั ศึกษาท่ีเขา้ เรียน
2. แจกแบบทดสอบก่อนเรยี น
3. รว่ มสนทนาเกี่ยวกับเร่อื งการรบั ข้อมูลและการแสดงผลขอ้ มลู
ขั้นสอน
1. บอกจุดประสงคก์ ารเรียน
2. บรรยาย อธบิ าย ยกตวั อย่าง หัวขอ้ เรอ่ื งทีส่ อน
3. แจง้ ลิงค์ใบความร้เู พ่ือศึกษาและปฏบิ ัติ
4. ซกั - ถาม
5. ประเมนิ พฤตกิ รรมรายบุคคล
ขน้ั สรปุ และประเมินผล
1. ครูและนกั เรยี นรว่ มกนั สรปุ สาระสาคญั
2. เปดิ โอกาสใหน้ ักเรียนซกั ถามขอ้ สงสัย
3. มอบหมายให้ไปหดั ทาและศกึ ษาเพิ่มเติม
4. แจกแบบทดสอบหลังเรียน

สอื่ การเรยี นการสอน
1. ห้องเรียนออนไลน์ Classroom รายวิชาการพฒั นาเวบ็ ด้วยภาษาเอชทเี อ็มแอล
2. ใบงาน
3. แบบทดสอบก่อนเรยี น/หลังเรียน

หลกั ฐานการเรยี นรู้/แหลง่ เรียนรู้
1. หลักฐานการเรยี นรู้
1.1 เอกสารประกอบการเรยี นวชิ าการพฒั นาเว็บด้วยภาษาเอชทเี อ็มแอล
1.2 ห้องเรยี นออนไลน์ Classroom รายวิชาการพฒั นาเวบ็ ดว้ ยภาษาเอชทเี อ็มแอล
2. หลกั ฐานการปฏิบตั งิ าน
2.1 แบบทดสอบกอ่ นเรียน/หลงั เรยี น
2.2 แบบฝกึ หัดทา้ ยหนว่ ยการเรยี น
2.3 ใบงาน
2.4 ผลการปฏบิ ตั ิกจิ กรรมการเรียน

การวัดผลประเมินผล
1. เคร่อื งมือวัดผล
1.1 แบบทดสอบก่อนเรียน/หลงั เรียน
1.2 แบบฝกึ หดั ท้ายหน่วยการเรยี น
1.3 ใบงาน

19

1.4 แบบประเมนิ คณุ ธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพงึ ประสงค์
2. วิธีวัดผล

2.1 ตรวจแบบทดสอบก่อนเรียน/หลงั เรียน
2.2 ตรวจแบบฝกึ หัดทา้ ยหนว่ ยการเรียน
2.3 ตรวจใบงาน
2.4 สงั เกตและประเมินพฤติกรรมดา้ นคณุ ธรรม จริยธรรม คา่ นิยม และคณุ ลักษณะอนั พึงประสงค์
3. เกณฑก์ ารประเมินผล
3.1 แบบทดสอบก่อนเรยี น (ตามสภาพจรงิ )/หลงั เรียน ต้องมีคะแนนไมน่ ้อยกว่า 50%
3.2 แบบฝึกหัดทา้ ยหน่วยการเรยี น ต้องมคี ะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ตอ้ งมคี ะแนนไมน่ ้อยกว่า 50%
3.4 แบบประเมินคุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพึงประสงค์ นักเรยี นต้องมี
พฤติกรรมครบทุกข้อจึงถอื ว่า ผ่านเกณฑ์

20

แผนการจดั การเรยี นรู้

มุ่งเน้นสมรรถนะอาชพี และบูรณาการของเศรษฐกิจพอเพียง

รหัสวิชา 20901-2004 วชิ า การพัฒนาเว็บดว้ ยภาษาเอชทีเอ็มแอล ท-ป-น. 1-2-2

หนว่ ยท่ี 4 ชอื่ หนว่ ย การจดั และแต่งสีขอ้ ความ

จานวน 3 ช่ัวโมง ชว่ั โมงท่ี 10-12 สัปดาหท์ ่ี 4

สาระสาคญั
การจัดรูปแบบ และการแต่งข้อความ เป็นส่ิงจาเป็นพื้นฐานในการสร้างเว็บเพจ เพราะการสร้างเว็บ

เพจเป็นการแสดงผลข้อมูลตามที่ผู้พัฒนาเว็บต้องการให้แสดงให้ผู้เข้าชมเว็บเพจเห็น โดยมีวิธีการในการจัด
และการแต่งข้อความ ดังต่อไปนี้ การจัดรูปแบบตัวอักษร การเปล่ียนขนาดตัวอักษร การกาหนดรูปแบบหัว
เร่ือง การข้ึนบรรทัดใหม่ การเว้นวรรคตอน การย่อหน้า การกาหนดตาแหน่งข้อความ การกาหนดลักษณะ
ตวั อักษร การท าตวั อักษรยก ตัวอกั ษรหอ้ ย การสร้างเส้นค่ัน การจดั รปู แบบตามทีก่ าหนด การกาหนดรายการ
หวั ขอ้ และเลขลาดบั

หัวข้อเรื่อง
1. การจดั รปู แบบขอ้ ความ
2. ความรพู้ น้ื ฐานเก่ียวกับสี
3. การใชส้ ใี นการสร้างเว็บเพจ

สมรรถนะย่อย
1. แสดงความรแู้ ละปฏบิ ตั ิเกี่ยวกับการจัดและแต่งสีขอ้ ความ

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

รบั ผิดชอบ ซ่อื สตั ย์ ใฝร่ ู้ มคี วามคดิ รเิ ร่ิมสรา้ งสรรค์ ละเอียด รอบคอบ ปลอดภัย และทางานร่วมกบั ผ้อู ืน่ ได้

การบูรณาการปรัชญาของเศรษฐกิจพอเพยี ง
3 ห่วง
1. พอประมาณ รู้จกั ใชแ้ ละจัดการวสั ดุอุปกรณ์ตา่ ง ๆ อยา่ งประหยดั และคุ้มค่า
2. มเี หตผุ ล การเรยี นรู้และเข้าใจ การใช้การจดั และแต่งสีข้อความ
3. มีภูมิคุ้มกัน ในการปฏิบัติงานที่ดี พึงระวังการแก้ปัญหาเฉพาะหน้าด้วยตนเองอย่างเป็นเหตุ
เป็นผล

2 เงอ่ื นไข
1. ความรู้

1.1 รอบรู้ มคี วามรู้เกยี่ วกับการจัดและแตง่ สีข้อความ

21

1.2 รอบคอบ การแก้ไขปัญหาในดา้ นต่างๆ ท่ีเกย่ี วกบั การจดั และแตง่ สีข้อความ
1.3 ระมัดระวัง สามารถนามาประยุกตใ์ ช้ในงานต่างๆ ได้อยา่ ง เหมาะสมและหลากหลาย
2. คุณธรรม
2.1 เปน็ ผู้รบั ฟังความคิดเหน็ ของผู้อน่ื รบู้ ทบาทของตนทัง้ ในฐานะผู้นาและผู้ตามทดี่ ีมี
2.2 เปน็ ผูม้ ีความรักสามัคคี เพือ่ ให้งานที่ได้รับมอบหมาย สาเร็จตามกาหนดเวลา
2.3 เปน็ ผูม้ ีความรับผิดชอบ

กจิ กรรมการเรยี นการสอน (Active Learning)
ขน้ั นาเขา้ ส่บู ทเรยี น
1. ตรวจสอบรายชอ่ื นกั ศกึ ษาท่เี ข้าเรยี น
2. แจกแบบทดสอบก่อนเรยี น
3. ร่วมสนทนาเกย่ี วกับเรอ่ื งการจัดและแต่งสีข้อความ
ข้ันสอน
1. บอกจุดประสงค์การเรยี น
2. บรรยาย อธิบาย ยกตัวอย่าง หัวข้อเรื่องทีส่ อน
3. แจง้ ลิงค์ใบความรเู้ พื่อศกึ ษาและปฏบิ ตั ิ
4. ซัก - ถาม
5. ประเมนิ พฤติกรรมรายบุคคล
ขน้ั สรปุ และประเมินผล
1. ครูและนักเรยี นรว่ มกนั สรปุ สาระสาคญั
2. เปิดโอกาสให้นกั เรียนซักถามข้อสงสัย
3. มอบหมายให้ไปหัดทาและศกึ ษาเพิ่มเติม
4. แจกแบบทดสอบหลงั เรียน

1. ห้องเรยี นออนไลน์ Classroom รายวิชาการพัฒนาเวบ็ ด้วยภาษาเอชทเี อ็มแอล
2. ใบงาน
3. แบบทดสอบก่อนเรยี น/หลังเรียน

หลักฐานการเรียนรู้/แหล่งเรียนรู้
1. หลกั ฐานการเรียนรู้
1.1 เอกสารประกอบการเรยี นวชิ าการพฒั นาเว็บดว้ ยภาษาเอชทเี อ็มแอล
1.2 ห้องเรียนออนไลน์ Classroom รายวชิ าการพฒั นาเว็บดว้ ยภาษาเอชทีเอ็มแอล
2. หลักฐานการปฏบิ ัตงิ าน
2.1 แบบทดสอบก่อนเรียน/หลังเรียน
2.2 แบบฝึกหัดท้ายหน่วยการเรียน
2.3 ใบงาน
2.4 ผลการปฏบิ ัติกิจกรรมการเรียน

การวดั ผลประเมนิ ผล
1. เครื่องมือวดั ผล

22

1.1 แบบทดสอบกอ่ นเรยี น/หลังเรียน
1.2 แบบฝกึ หัดท้ายหนว่ ยการเรียน
1.3 ใบงาน
1.4 แบบประเมนิ คุณธรรม จริยธรรม คา่ นิยม และคณุ ลักษณะอนั พงึ ประสงค์
2. วิธีวัดผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลังเรียน
2.2 ตรวจแบบฝึกหดั ทา้ ยหน่วยการเรียน
2.3 ตรวจใบงาน
2.4 สงั เกตและประเมินพฤติกรรมดา้ นคุณธรรม จริยธรรม คา่ นยิ ม และคณุ ลักษณะอนั พึงประสงค์
3. เกณฑ์การประเมินผล
3.1 แบบทดสอบกอ่ นเรียน (ตามสภาพจริง)/หลังเรียน ต้องมคี ะแนนไม่น้อยกว่า 50%
3.2 แบบฝกึ หัดทา้ ยหน่วยการเรียน ตอ้ งมคี ะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ต้องมคี ะแนนไมน่ ้อยกวา่ 50%
3.4 แบบประเมินคุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอนั พงึ ประสงค์ นักเรยี นต้องมี
พฤติกรรมครบทุกข้อจึงถือว่า ผา่ นเกณฑ์

23

แผนการจดั การเรียนรู้

มุง่ เน้นสมรรถนะอาชีพและบูรณาการของเศรษฐกจิ พอเพียง

รหัสวิชา 20901-2004 วิชา การพัฒนาเว็บด้วยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

หน่วยท่ี 5 ชื่อหน่วย การแทรกรูปภาพ

จานวน 3 ชัว่ โมง ชวั่ โมงที่ 13-15 สปั ดาห์ที่ 5

สาระสาคัญ
เอกสารเว็บเพจท่ีเขียนด้วยภาษา HTML นอกจากจะแสดงข้อมูลท่ีเป็นข้อความแล้ว

ยังสามารถนาเสนอข้อมูลในลักษณะของรูปภาพ การน ารูปภาพมาตกแต่งในหน้าเว็บเพจเป็นวิธีการท่ีได้รับ
ความนิยมจากผู้พัฒนาเว็บเพจ เพราะทาให้เว็บเพจที่เขียนมีความสวยงาม สะดุดตา น่าสนใจ มากข้ึน เป็น
ส่วนประกอบท่ีช่วยให้การแสดงผลบนเว็บดึงดูดความสนใจ การเลือกประเภทของไฟล์รูปภาพมีความสาคัญ
อย่างยิ่ง เพราะถ้าภาพมีความละเอียดมาก หรือน้อยเกินไปก็ส่งผลกับการแสดงผลในหน้าเว็บเพจ

หัวข้อเร่ือง
1. ภาพกราฟิกในคอมพิวเตอร์
2. คาสัง่ การบรรจุภาพในภาษา HTML

สมรรถนะย่อย
1. แสดงความรแู้ ละปฏบิ ตั เิ ก่ียวกับการแทรกรปู ภาพ

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

การบูรณาการปรัชญาของเศรษฐกิจพอเพียง
3 ห่วง
1. พอประมาณ เปน็ สมาชกิ ทดี่ ีของกลมุ่ เพ่ือน
2. มีเหตผุ ล กลา้ ยอมรับฟังความคดิ เห็นของผ้อู ่ืน
3. มีภมู ิคุ้มกัน มกี ารเตรยี มความพรอ้ มในการเรียน

2 เงอื่ นไข
1. ความรู้

1.1 รอบรู้ มคี วามรเู้ กี่ยวกับการแทรกรปู ภาพ
1.2 รอบคอบ การแก้ไขปัญหาในด้านตา่ งๆ ที่เกย่ี วกบั การการแทรกรูปภาพ
1.3 ระมัดระวัง สามารถนามาประยุกตใ์ ช้ในงานต่างๆ ได้อยา่ ง เหมาะสมและหลากหลาย

24

2. คณุ ธรรม
2.1 เปน็ ผู้รูจ้ ักทาบญั ชรี ายรับ-รายจา่ ย ของตนเองอยู่เสมอ
2.2 เป็นผู้มคี วามรกั สามัคคี เพื่อให้งานที่ไดร้ บั มอบหมาย สาเรจ็ ตามกาหนดเวลา
2.3 เปน็ ผมู้ ีความรบั ผิดชอบ

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

ส่อื การเรียนการสอน
1. หอ้ งเรยี นออนไลน์ Classroom รายวชิ าการพัฒนาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล
2. ใบงาน
3. แบบทดสอบก่อนเรยี น/หลังเรยี น

หลกั ฐานการเรียนรู้/แหล่งเรียนรู้
1. หลกั ฐานการเรียนรู้
1.1 เอกสารประกอบการเรยี นวิชาการพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล
1.2 ห้องเรียนออนไลน์ Classroom รายวิชาการพัฒนาเวบ็ ด้วยภาษาเอชทเี อ็มแอล
2. หลกั ฐานการปฏบิ ตั งิ าน
2.1 แบบทดสอบก่อนเรยี น/หลงั เรียน
2.2 แบบฝึกหัดท้ายหน่วยการเรยี น
2.3 ใบงาน
2.4 ผลการปฏบิ ัตกิ ิจกรรมการเรยี น

การวดั ผลประเมนิ ผล
1. เครอ่ื งมือวดั ผล
1.1 แบบทดสอบกอ่ นเรียน/หลงั เรยี น
1.2 แบบฝกึ หดั ทา้ ยหน่วยการเรียน

25

1.3 ใบงาน
1.4 แบบประเมนิ คุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพึงประสงค์
2. วิธีวดั ผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลงั เรียน
2.2 ตรวจแบบฝึกหดั ทา้ ยหน่วยการเรียน
2.3 ตรวจใบงาน
2.4 สังเกตและประเมนิ พฤติกรรมดา้ นคณุ ธรรม จริยธรรม คา่ นิยม และคุณลักษณะอนั พึงประสงค์
3. เกณฑก์ ารประเมินผล
3.1 แบบทดสอบก่อนเรยี น (ตามสภาพจรงิ )/หลงั เรยี น ต้องมีคะแนนไมน่ ้อยกว่า 50%
3.2 แบบฝกึ หัดทา้ ยหนว่ ยการเรยี น ต้องมคี ะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ตอ้ งมคี ะแนนไม่น้อยกว่า 50%
3.4 แบบประเมนิ คณุ ธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพึงประสงค์ นักเรยี นต้องมี
พฤติกรรมครบทุกข้อจึงถอื วา่ ผา่ นเกณฑ์

26

แผนการจัดการเรียนรู้

มุ่งเน้นสมรรถนะอาชีพและบูรณาการของเศรษฐกิจพอเพียง

รหสั วชิ า 20901-2004 วิชา การพฒั นาเว็บด้วยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

หน่วยท่ี 6 ช่ือหน่วย การตกแต่งภาพกราฟกิ

จานวน 9 ชั่วโมง ชัว่ โมงท่ี 16-24 สปั ดาหท์ ี่ 6-8

สาระสาคญั
สาหรับโปรแกรมแต่งรูป Canva เป็นโปรแกรมแต่งภาพออนไลนท์ ี่เราสามารถทาได้บนเว็บไซต์ โดยท่ี

เราไม่จาเป็นจะต้องติดตั้งโปรแกรมเพิ่มลงในเคร่ืองคอมพิวเตอร์ของเราให้ยุ่งยากแต่อย่างใด ตัวโปรแกรมมี
ฟังคช์ ่ันการใช้งานทเ่ี ปน็ ลักษณะแบบกึ่งสาเรจ็ รูป จงึ ใชง้ านงา่ ย ไม่จาเป็นต้องมคี วามรู้กราฟกิ ก็สามารถทาภาพ
สวยๆ เหมือนมอื อาชพี ได้โดยใช้เวลาแค่ไม่ถึง 10 นาที ทีส่ าคัญคอื ใชง้ านไดฟ้ รี

หัวข้อเรอ่ื ง
1. โปรแกรมแตง่ รูป Canva

สมรรถนะย่อย
1. แสดงความรู้และปฏิบัติเก่ียวกบั การตกแต่งภาพกราฟกิ

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

การบรู ณาการปรัชญาของเศรษฐกิจพอเพียง
3 ห่วง
1. พอประมาณ เปน็ สมาชกิ ท่ดี ีของกลุ่มเพือ่ น
2. มีเหตผุ ล กล้ายอมรับฟังความคดิ เห็นของผู้อนื่
3. มีภูมิคุม้ กนั มีการเตรยี มความพร้อมในการเรยี น

2 เงื่อนไข
1. ความรู้

1.1 รอบรู้ มคี วามรเู้ กยี่ วกับการแทรกรูปภาพ
1.2 รอบคอบ การแก้ไขปัญหาในดา้ นต่างๆ ทเ่ี กยี่ วกบั การตกแตง่ ภาพกราฟิก
1.3 ระมัดระวงั สามารถนามาประยุกต์ใช้ในงานต่างๆ ได้อยา่ ง เหมาะสมและหลากหลาย
2. คณุ ธรรม
2.1 เป็นผู้รู้จักทาบญั ชีรายรบั -รายจา่ ย ของตนเองอยเู่ สมอ
2.2 เปน็ ผ้มู ีความรกั สามัคคี เพอื่ ให้งานท่ีได้รับมอบหมาย สาเรจ็ ตามกาหนดเวลา
2.3 เป็นผู้มีความรับผดิ ชอบ

27

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

สื่อการเรยี นการสอน
1. หอ้ งเรยี นออนไลน์ Classroom รายวิชาการพฒั นาเวบ็ ดว้ ยภาษาเอชทเี อ็มแอล
2. ใบงาน
3. แบบทดสอบกอ่ นเรยี น/หลังเรยี น

หลักฐานการเรียนรู้/แหลง่ เรยี นรู้
1. หลกั ฐานการเรยี นรู้
1.1 เอกสารประกอบการเรียนวิชาการพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล
1.2 ห้องเรียนออนไลน์ Classroom รายวชิ าการพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล
2. หลักฐานการปฏิบตั ิงาน
2.1 แบบทดสอบกอ่ นเรียน/หลังเรยี น
2.2 แบบฝึกหัดทา้ ยหนว่ ยการเรยี น
2.3 ใบงาน
2.4 ผลการปฏิบตั กิ ิจกรรมการเรยี น

การวดั ผลประเมนิ ผล
1. เครือ่ งมือวัดผล
1.1 แบบทดสอบกอ่ นเรียน/หลังเรยี น
1.2 แบบฝกึ หัดทา้ ยหนว่ ยการเรยี น
1.3 ใบงาน
1.4 แบบประเมินคณุ ธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพงึ ประสงค์
2. วิธีวดั ผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลังเรียน

28

2.2 ตรวจแบบฝึกหัดท้ายหน่วยการเรยี น
2.3 ตรวจใบงาน
2.4 สงั เกตและประเมินพฤติกรรมด้านคุณธรรม จริยธรรม คา่ นิยม และคุณลกั ษณะอันพึงประสงค์
3. เกณฑก์ ารประเมนิ ผล
3.1 แบบทดสอบก่อนเรยี น (ตามสภาพจรงิ )/หลงั เรียน ต้องมคี ะแนนไม่น้อยกวา่ 50%
3.2 แบบฝึกหดั ทา้ ยหน่วยการเรยี น ต้องมคี ะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ต้องมีคะแนนไมน่ ้อยกว่า 50%
3.4 แบบประเมนิ คณุ ธรรม จริยธรรม คา่ นิยม และคณุ ลักษณะอันพึงประสงค์ นักเรียนต้องมพี ฤติกรรมครบทุก
ข้อจงึ ถือวา่ ผ่านเกณฑ์

29

แผนการจัดการเรยี นรู้

มงุ่ เนน้ สมรรถนะอาชพี และบูรณาการของเศรษฐกิจพอเพียง

รหัสวชิ า 20901-2004 วชิ า การพัฒนาเว็บด้วยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

หนว่ ยท่ี 7 ช่อื หน่วย การสรา้ งตาราง

จานวน 12 ชว่ั โมง ชวั่ โมงท่ี 25-36 สัปดาห์ที่ 9-12

สาระสาคญั
การสร้างตาราง เป็นวิธีการหนึ่งในการน าเสนอข้อมูล ท้ังที่เป็นตัวเลขเพื่อแสดงค่าปรมิ าณ การนามา

คานวณ การเปรียบเทียบ หรือแม้กระท่ังข้อความและรูปภาพก็สามารถนาเสนอในรูปแบบของตารางได้
เช่นเดียวกัน ตารางมีส่วนช่วยในการจัดระเบียบข้อความและรูปภาพ ดังน้ันการสร้างตารางจึงเป็นแท็กคาสั่ง
หน่ึงท่ีผู้พัฒนาเว็บเพจควรจะเรียนรู้ ในภาษา HTML ซ่ึงเป็นภาษาพื้นฐานในการพัฒนาเว็บเพจกม็ ีแท็กคาส่ังท่ี
ใช้ในการสร้างตารางซึ่งต้องอยู่ภายในแท็กคาส่ัง <Body> นั่นคือแท็กคาส่ัง <Table>....</Table> ซ่ึงเมื่อ
เรียกใช้แท็กคาส่ัง <Table> แล้วจะต้องมีแท็กคาสั่งย่อยในการสร้างแถว สร้างคอลัมน์ และแท็กคาส่ังอ่ืน ๆ
ในการจัดรูปแบบให้กบั ตาราง

หัวข้อเร่อื ง
1. การสรา้ งตาราง
2. การสร้างตารางใน HTML

สมรรถนะย่อย
1. แสดงความร้แู ละปฏบิ ัตเิ ก่ียวกบั การสร้างตาราง

จดุ ประสงคเ์ ชิงพฤตกิ รรม
1. บอกความหมายของการสร้างตารางได้
2. ใช้คาสง่ั สรา้ งตารางใน HTMLได้
3. มกี จิ นิสยั ที่ดี มีคณุ ธรรมจริยธรรม ค่านยิ มทีด่ ี ในการใชค้ อมพิวเตอร์ ปฏบิ ัตงิ านด้วย ความ

รบั ผดิ ชอบ ซอ่ื สัตย์ ใฝ่รู้ มคี วามคดิ รเิ ร่มิ สรา้ งสรรค์ ละเอียด รอบคอบ ปลอดภัย และทางานร่วมกบั ผู้อน่ื ได้
การบูรณาการปรชั ญาของเศรษฐกิจพอเพยี ง

3 ห่วง
1. พอประมาณ การมีวนิ ยั ในการรับผดิ ชอบตอ่ หน้าท่ีทไ่ี ด้รบั มอบหมาย
2. มีเหตุผล การเรยี นรู้และเขา้ ใจ การสร้างตาราง
3. มีภูมิคุ้มกัน ในการปฏิบัติงานท่ีดี ควรมีการแบ่งปันและช่วยเหลือซึ่งกันและกัน เพ่ือให้งาน

สาเร็จลลุ ่วงไปด้วยดี

2 เง่อื นไข
1. ความรู้

1.1 รอบรู้ มีความร้เู กีย่ วกับการสร้างตาราง
1.2 รอบคอบ การแก้ไขปัญหาในดา้ นต่างๆ ท่เี ก่ยี วกบั การสร้างตาราง
1.3 ระมัดระวงั สามารถนามาประยุกต์ใช้ในงานต่างๆ ได้อยา่ ง เหมาะสมและหลากหลาย

30

2. คณุ ธรรม
2.1 เปน็ ผูม้ ีการอดทน อดกล้ัน และอดออม
2.2 เปน็ ผมู้ ีความรกั สามัคคี เพือ่ ให้งานท่ีได้รับมอบหมาย สาเรจ็ ตามกาหนดเวลา
2.3 เปน็ ผมู้ ีความรบั ผิดชอบ

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

ส่อื การเรยี นการสอน
1. ห้องเรยี นออนไลน์ Classroom รายวชิ าการพฒั นาเว็บด้วยภาษาเอชทีเอ็มแอล
2. ใบงาน
3. แบบทดสอบกอ่ นเรียน/หลงั เรียน

หลักฐานการเรียนรู้/แหล่งเรียนรู้
1. หลักฐานการเรยี นรู้
1.1 เอกสารประกอบการเรยี นวิชาการพัฒนาเว็บด้วยภาษาเอชทเี อ็มแอล
1.2 หอ้ งเรยี นออนไลน์ Classroom รายวิชาการพัฒนาเว็บดว้ ยภาษาเอชทีเอ็มแอล
2. หลักฐานการปฏิบัตงิ าน
2.1 แบบทดสอบกอ่ นเรียน/หลงั เรยี น
2.2 แบบฝึกหัดทา้ ยหนว่ ยการเรียน
2.3 ใบงาน
2.4 ผลการปฏิบัติกจิ กรรมการเรยี น

31

การวดั ผลประเมินผล
1. เคร่อื งมือวดั ผล
1.1 แบบทดสอบก่อนเรยี น/หลงั เรียน
1.2 แบบฝึกหดั ทา้ ยหนว่ ยการเรียน
1.3 ใบงาน
1.4 แบบประเมนิ คณุ ธรรม จริยธรรม ค่านิยม และคุณลักษณะอนั พงึ ประสงค์
2. วิธวี ดั ผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลังเรยี น
2.2 ตรวจแบบฝกึ หดั ท้ายหน่วยการเรียน
2.3 ตรวจใบงาน
2.4 สงั เกตและประเมินพฤติกรรมด้านคุณธรรม จริยธรรม ค่านยิ ม และคณุ ลักษณะอนั พึงประสงค์
3. เกณฑก์ ารประเมินผล
3.1 แบบทดสอบก่อนเรยี น (ตามสภาพจริง)/หลงั เรียน ตอ้ งมีคะแนนไมน่ ้อยกว่า 50%
3.2 แบบฝกึ หัดทา้ ยหนว่ ยการเรียน ต้องมีคะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ต้องมคี ะแนนไมน่ ้อยกว่า 50%
3.4 แบบประเมนิ คณุ ธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพงึ ประสงค์ นักเรยี นต้องมี

พฤติกรรมครบทุกข้อจงึ ถือว่า ผ่านเกณฑ์

32

แผนการจัดการเรยี นรู้

ม่งุ เน้นสมรรถนะอาชีพและบูรณาการของเศรษฐกิจพอเพียง

รหัสวชิ า 20901-2004 วชิ า การพัฒนาเว็บด้วยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

หนว่ ยที่ 8 ชอื่ หนว่ ย การเชื่อมโยง

จานวน 3 ชว่ั โมง ช่ัวโมงท่ี 37-39 สัปดาห์ท่ี 13

สาระสาคญั
การเชื่อมโยงข้อมูลในภาษา HTML เป็นการกาหนดตาแหน่งการติดต่อกันระหว่างข้อมูลท่ีเป็นหน้า

ปจั จบุ นั ไปยงั เปา้ หมาย โดยเปา้ หมายนน้ั ๆ อาจอยใู่ นเอกสารหน้าเวบ็ เพจเดยี วกนั หรอื เปน็ การเชอ่ื มโยงไปยัง
ไฟล์เอกสารอื่น เว็บเพจ หรือเว็บไซต์อ่ืน โดยจุดเช่ือมโยงสามารถใช้ข้อความหรือภาพกาหนดให้เป็นตาแหน่ง
ของจุดเช่ือมโยงได้ แต่ข้อความที่ถูกกาหนดให้เป็นจุดเช่ือมโยงจะแสดงผลในหน้าเว็บเพจเป็นตัวอักษรท่ีมีสี
แตกต่างจากตัวอักษรทั่วไป และอาจมีการขีดเส้นใต้ข้อความ เม่ือเล่ือนเมาส์ไปชี้ที่ข้อความซึ่งมีการเช่ือมโยง
รูปแบบของตัวชเ้ี มาส์จะเปลย่ี นจาก สัญลกั ษณ์ลูกศรเป็นรูปมือแทน และทีแ่ ถบที่แสดงสถานะด้านลา่ งจะแสดง
ถงึ ตาแหนง่ ของจุดหมายปลายทางที่ข้อความเช่ือมโยงไปถงึ

หัวข้อเร่อื ง
1. การเชื่อมโยงข้อมลู ในภาษา HTML

สมรรถนะย่อย
1. แสดงความรแู้ ละปฏบิ ตั เิ ก่ียวกับการเชอ่ื มโยง

จุดประสงค์เชิงพฤติกรรม
1. Login ดว้ ยบัญชีของ Google ได้
2. ใชง้ าน Google Drive ได้
3. อพั โหลดไฟล์ได้
4. มีกิจนิสัยที่ดี มีคุณธรรมจริยธรรม ค่านิยมท่ีดี ในการใช้คอมพิวเตอร์ ปฏิบัติงานด้วย ความ

รับผดิ ชอบ ซื่อสัตย์ ใฝร่ ู้ มคี วามคดิ ริเริม่ สรา้ งสรรค์ ละเอยี ด รอบคอบ ปลอดภยั และทางานรว่ มกับผูอ้ ่นื ได้
การบูรณาการปรชั ญาของเศรษฐกจิ พอเพยี ง

3 ห่วง
1. พอประมาณ การเลือกใช้การเชอื่ มโยงเหมาะสม
2. มเี หตุผล การเรยี นรู้และเขา้ ใจเกย่ี วกบั การเชือ่ มโยง
3. มีภมู ิคมุ้ กัน มีความรอบคอบในการการเชอื่ มโยง

2 เงอื่ นไข
1. ความรู้

1.1 รอบรู้ มีความร้เู กีย่ วกับการเชอื่ มโยง
1.2 รอบคอบ การแก้ไขปัญหาในดา้ นตา่ งๆ ที่เก่ียวกับการเชื่อมโยง
1.3 ระมดั ระวัง สามารถนามาประยกุ ตใ์ ช้ในงานตา่ งๆ ไดอ้ ย่าง เหมาะสมและหลากหลาย

33

2. คุณธรรม
2.1 เปน็ ผูใ้ ฝ่หาความรู้ ความสามารถในการประกอบอาชีพ เพ่อื ความมน่ั คง
2.2 เป็นผู้มีความรกั สามัคคี เพือ่ ให้งานท่ีได้รับมอบหมาย สาเรจ็ ตามกาหนดเวลา
2.3 เป็นผ้มู ีความรับผดิ ชอบ

กิจกรรมการเรยี นการสอน (Active Learning)
ขั้นนาเข้าสูบ่ ทเรียน
1. ตรวจสอบรายชอื่ นกั ศึกษาทเ่ี ขา้ เรยี น
2. แจกแบบทดสอบก่อนเรียน
3. รว่ มสนทนาเก่ียวกบั เร่อื งการเชือ่ มโยง
ข้ันสอน
1. บอกจดุ ประสงค์การเรียน
2. บรรยาย อธิบาย ยกตวั อย่าง หวั ข้อเรือ่ งที่สอน
3. แจง้ ลงิ ค์ใบความรู้เพ่ือศึกษาและปฏบิ ัติ
4. ซกั - ถาม
5. ประเมนิ พฤติกรรมรายบุคคล
ขั้นสรปุ และประเมินผล
1. ครแู ละนกั เรยี นร่วมกนั สรปุ สาระสาคัญ
2. เปดิ โอกาสให้นักเรยี นซกั ถามขอ้ สงสัย
3. มอบหมายให้ไปหดั ทาและศึกษาเพิ่มเติม
4. แจกแบบทดสอบหลังเรียน

สื่อการเรยี นการสอน
1. ห้องเรียนออนไลน์ Classroom รายวชิ าการพัฒนาเวบ็ ด้วยภาษาเอชทีเอ็มแอล
2. ใบงาน
3. แบบทดสอบก่อนเรยี น/หลังเรยี น

หลกั ฐานการเรยี นรู้/แหล่งเรียนรู้
1. หลักฐานการเรยี นรู้
1.1 เอกสารประกอบการเรียนวชิ าการพัฒนาเว็บดว้ ยภาษาเอชทเี อ็มแอล
1.2 หอ้ งเรยี นออนไลน์ Classroom รายวิชาการพัฒนาเวบ็ ด้วยภาษาเอชทีเอ็มแอล
2. หลักฐานการปฏิบัติงาน
2.1 แบบทดสอบกอ่ นเรยี น/หลังเรยี น
2.2 แบบฝึกหดั ทา้ ยหนว่ ยการเรียน
2.3 ใบงาน
2.4 ผลการปฏบิ ัตกิ ิจกรรมการเรียน

34

การวดั ผลประเมินผล
1. เคร่อื งมือวดั ผล
1.1 แบบทดสอบก่อนเรยี น/หลงั เรียน
1.2 แบบฝึกหดั ทา้ ยหนว่ ยการเรยี น
1.3 ใบงาน
1.4 แบบประเมนิ คณุ ธรรม จริยธรรม ค่านิยม และคุณลักษณะอนั พงึ ประสงค์
2. วิธวี ดั ผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลังเรยี น
2.2 ตรวจแบบฝกึ หดั ท้ายหน่วยการเรียน
2.3 ตรวจใบงาน
2.4 สงั เกตและประเมินพฤติกรรมด้านคุณธรรม จริยธรรม ค่านยิ ม และคณุ ลักษณะอนั พึงประสงค์
3. เกณฑก์ ารประเมินผล
3.1 แบบทดสอบก่อนเรยี น (ตามสภาพจริง)/หลงั เรียน ตอ้ งมีคะแนนไมน่ ้อยกว่า 50%
3.2 แบบฝกึ หดั ทา้ ยหนว่ ยการเรียน ต้องมีคะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ต้องมคี ะแนนไมน่ ้อยกว่า 50%
3.4 แบบประเมนิ คณุ ธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพงึ ประสงค์ นักเรยี นต้องมี

พฤติกรรมครบทุกข้อจงึ ถือว่า ผ่านเกณฑ์

35

แผนการจัดการเรียนรู้

มุ่งเน้นสมรรถนะอาชีพและบูรณาการของเศรษฐกิจพอเพียง

รหสั วชิ า 20901-2004 วชิ า การพฒั นาเวบ็ ดว้ ยภาษาเอชทเี อ็มแอล ท-ป-น. 1-2-2

หน่วยที่ 9 ช่อื หนว่ ย การจัดสรา้ งเฟรม Style Sheet

จานวน 6 ชัว่ โมง ช่ัวโมงที่ 40-45 สัปดาหท์ ่ี 14-15

สาระสาคัญ
การศึกษาการใช้งาน คาส่ัง CSS มีความสาคัญในการพัฒนาเว็บเพจ เพื่อให้เป็นเว็บที่มีมาตรฐาน

สามารถใช้งานกับทุกเว็บเบราว์เซอร์ได้ การใช้ CSS สาหรับการตกแต่งรูปแบบการแสดงผลของเว็บเพจให้
สวยงามด้วยการกาหนดสไตล์การตกแต่งแล้วนาไปใช้งานร่วมกับ HTML ทาให้การจัดรูปแบบหรือสไตล์เป็น
แบบเดียวกัน ลดการใช้แท็กคาส่ังในภาษา HTML ท่ีซ้าซ้อน เม่ือแท็กคาส่ังลดลงทาให้ขนาดไฟล์เล็กลงด้วย
การเรยี กใชง้ านเวบ็ เพจจงึ รวดเรว็ ตามไปด้วย

หวั ข้อเรือ่ ง
1. Style Sheet
2. การประยุกตใ์ ช้ CSS บนเว็บเพจ

สมรรถนะย่อย
1. แสดงความรแู้ ละปฏบิ ัตเิ ก่ียวกบั การจดั สร้างเฟรม Style Sheet

จดุ ประสงค์เชิงพฤติกรรม
1. บอกความหมาย Style Sheet ได้
2. ประยกุ ต์ใช้ CSS บนเวบ็ เพจได้
3. มีกิจนิสัยที่ดี มีคุณธรรมจริยธรรม ค่านิยมท่ีดี ในการใช้คอมพิวเตอร์ ปฏิบัติงานด้วย ความ

รบั ผิดชอบ ซอื่ สตั ย์ ใฝ่รู้ มีความคดิ ริเร่มิ สรา้ งสรรค์ ละเอยี ด รอบคอบ ปลอดภยั และทางานร่วมกบั ผ้อู ่นื ได้
การบูรณาการปรัชญาของเศรษฐกิจพอเพยี ง

3 ห่วง
1. พอประมาณ กาหนดเนื้อหาเหมาะสมกับการสรา้ งเน้ือหาในระบบอินเทอรเ์ น็ต
2. มเี หตผุ ล การเรียนรู้และเขา้ ใจเก่ยี วกบั การจดั สร้างเฟรม Style Sheet
3. มีภมู ิคุ้มกัน ศึกษาและให้ความสาคญั ต่อการเรยี นรสู้ ง่ิ ใหม่ ๆ เพือ่ เตรยี มรับการเปล่ียนแปลง

2 เงอ่ื นไข
1. ความรู้

1.1 รอบรู้ มคี วามรเู้ กี่ยวกับการจดั สรา้ งเฟรม Style Sheet
1.2 รอบคอบ การแก้ไขปัญหาในด้านตา่ งๆ ทีเ่ กย่ี วกบั การจัดสรา้ งเฟรม Style Sheet
1.3 ระมัดระวัง สามารถนามาประยุกต์ใช้ในงานต่างๆ ได้อย่าง เหมาะสมและหลากหลาย
2. คุณธรรม
2.1 เปน็ ผู้ทางานด้วยความเข้มแข็งอดทน
2.2 เป็นผูม้ คี วามรกั สามัคคี เพ่อื ให้งานท่ีไดร้ บั มอบหมาย สาเรจ็ ตามกาหนดเวลา

36

2.3 เป็นผ้มู ีความรับผิดชอบ

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

สอื่ การเรยี นการสอน
1. หอ้ งเรยี นออนไลน์ Classroom รายวิชาการพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล
2. ใบงาน
3. แบบทดสอบก่อนเรยี น/หลังเรยี น

หลักฐานการเรยี นรู้/แหลง่ เรียนรู้
1. หลกั ฐานการเรยี นรู้
1.1 เอกสารประกอบการเรยี นวิชาการพฒั นาเว็บดว้ ยภาษาเอชทีเอ็มแอล
1.2 หอ้ งเรยี นออนไลน์ Classroom รายวชิ าการพฒั นาเว็บด้วยภาษาเอชทีเอ็มแอล
2. หลกั ฐานการปฏิบัติงาน
2.1 แบบทดสอบกอ่ นเรียน/หลังเรียน
2.2 แบบฝึกหดั ทา้ ยหน่วยการเรยี น
2.3 ใบงาน
2.4 ผลการปฏิบตั ิกิจกรรมการเรยี น

37

การวัดผลประเมินผล
1. เครอ่ื งมือวัดผล
1.1 แบบทดสอบก่อนเรยี น/หลงั เรยี น
1.2 แบบฝกึ หัดทา้ ยหน่วยการเรยี น
1.3 ใบงาน
1.4 แบบประเมินคณุ ธรรม จริยธรรม คา่ นิยม และคณุ ลักษณะอนั พึงประสงค์
2. วิธวี ดั ผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลังเรียน
2.2 ตรวจแบบฝึกหัดทา้ ยหนว่ ยการเรียน
2.3 ตรวจใบงาน
2.4 สังเกตและประเมินพฤติกรรมด้านคุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลักษณะอันพงึ ประสงค์
3. เกณฑก์ ารประเมินผล
3.1 แบบทดสอบก่อนเรียน (ตามสภาพจริง)/หลังเรียน ต้องมีคะแนนไมน่ ้อยกวา่ 50%
3.2 แบบฝกึ หดั ทา้ ยหน่วยการเรยี น ต้องมคี ะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ตอ้ งมคี ะแนนไม่น้อยกวา่ 50%
3.4 แบบประเมินคุณธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพึงประสงค์ นักเรียนต้องมี

พฤติกรรมครบทุกข้อจงึ ถือวา่ ผ่านเกณฑ์

38

แผนการจัดการเรยี นรู้

ม่งุ เน้นสมรรถนะอาชีพและบูรณาการของเศรษฐกจิ พอเพียง

รหัสวชิ า 20901-2004 วชิ า การพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล ท-ป-น. 1-2-2

หนว่ ยที่ 10 ช่ือหนว่ ย การใส่เทคนคิ พิเศษ

จานวน 3 ชั่วโมง ชั่วโมงที่ 46-48 สปั ดาห์ท่ี 16

สาระสาคญั
การใส่เทคนิคพิเศษ เป็นการเพิ่มลูกเล่นในกับหน้าเว็บเพจท่ีพัฒนาข้ึน เทคนิคพิเศษของผู้พัฒนาเว็บ

เพจแต่ละคนจะแตกต่างกันไปแล้วแต่ความชอบส่วนตัว ในบทน้ีจะเป็นการใส่เทคนิคพิเศษ เร่ืองของการสร้าง
แบนเนอร์เพ่ือนามาเป็นหัวเว็บ (Web Header) และปุ่มในการเชื่อมโยงเพื่อให้เว็บเพจของตนเองมีเอกลักษณ์
เฉพาะตัว ส่วนเทคนิคพิเศษเพิ่มเติมคือการใส่เสียงและวิดีโอประกอบในเว็บเพจ เพ่ือให้เว็บเพจมีการแสดง
ขอ้ มลู แบบมัลติมเี ดีย (Multimedia) เพ่ิมความน่าสนใจให้กบั เว็บเพจมากขึน้

หัวข้อเรื่อง
1. การสร้างแบนเนอร์
2. การสร้างปุ่มเชื่อมโยง
3. การใสเ่ สยี งและวิดโี อบนเว็บเพจ

สมรรถนะย่อย
1. แสดงความรู้และปฏบิ ัติเกี่ยวกบั การใส่เทคนิคพิเศษ

จดุ ประสงค์เชงิ พฤตกิ รรม
1. สร้างแบนเนอร์ได้
2. สรา้ งป่มุ เช่อื มโยงได้
3. ใส่เสยี งและวิดโี อบนเวบ็ เพจได้
4. มีกิจนิสัยท่ีดี มีคุณธรรมจริยธรรม ค่านิยมท่ีดี ในการใช้คอมพิวเตอร์ ปฏิบัติงานด้วย ความ

รบั ผิดชอบ ซอ่ื สตั ย์ ใฝ่รู้ มคี วามคดิ รเิ ร่ิมสรา้ งสรรค์ ละเอยี ด รอบคอบ ปลอดภยั และทางานรว่ มกับผอู้ ืน่ ได้
การบรู ณาการปรชั ญาของเศรษฐกจิ พอเพียง

3 ห่วง
1. พอประมาณ กาหนดเน้ือหาเหมาะสมกบั การใส่เทคนิคพิเศษ
2. มเี หตุผล การเรยี นร้แู ละเข้าใจเกี่ยวกบั Google Sites
3. มภี มู ิคมุ้ กัน ศึกษาและใหค้ วามสาคญั ตอ่ การเรียนรสู้ ่งิ ใหม่ ๆ เพื่อเตรยี มรับการเปล่ยี นแปลง

2 เง่ือนไข
1. ความรู้

1.1 รอบรู้ มคี วามรเู้ กี่ยวกับการใส่เทคนคิ พเิ ศษ
1.3 รอบคอบ การแก้ไขปัญหาในด้านต่างๆ ที่เก่ยี วกบั การใส่เทคนคิ พเิ ศษ
1.3 ระมัดระวงั สามารถนามาประยุกตใ์ ช้ในงานต่างๆ ได้อย่าง เหมาะสมและหลากหลาย
2. คุณธรรม
2.1 เปน็ ผู้ทางานด้วยความเข้มแขง็ อดทน

39

2.2 เปน็ ผูม้ คี วามรกั สามัคคี เพอื่ ให้งานที่ได้รับมอบหมาย สาเรจ็ ตามกาหนดเวลา
2.3 เปน็ ผู้มีความรบั ผิดชอบ

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

ส่อื การเรียนการสอน
1. หอ้ งเรยี นออนไลน์ Classroom รายวิชาการพฒั นาเว็บดว้ ยภาษาเอชทีเอ็มแอล
2. ใบงาน
3. แบบทดสอบก่อนเรยี น/หลงั เรียน

หลกั ฐานการเรียนรู้/แหล่งเรียนรู้
1. หลักฐานการเรยี นรู้
1.1 เอกสารประกอบการเรียนวชิ าการพัฒนาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล
1.2 ห้องเรยี นออนไลน์ Classroom รายวชิ าการพฒั นาเวบ็ ดว้ ยภาษาเอชทเี อ็มแอล
2. หลักฐานการปฏิบตั งิ าน
2.1 แบบทดสอบกอ่ นเรยี น/หลงั เรียน
2.2 แบบฝกึ หัดทา้ ยหนว่ ยการเรยี น
2.3 ใบงาน
2.4 ผลการปฏิบัตกิ จิ กรรมการเรยี น

40

การวัดผลประเมินผล
1. เครอ่ื งมือวัดผล
1.1 แบบทดสอบก่อนเรยี น/หลังเรยี น
1.2 แบบฝกึ หัดทา้ ยหน่วยการเรียน
1.3 ใบงาน
1.4 แบบประเมินคณุ ธรรม จริยธรรม คา่ นิยม และคณุ ลักษณะอนั พงึ ประสงค์
2. วิธวี ดั ผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลงั เรยี น
2.2 ตรวจแบบฝึกหัดทา้ ยหนว่ ยการเรยี น
2.3 ตรวจใบงาน
2.4 สังเกตและประเมินพฤติกรรมด้านคุณธรรม จริยธรรม ค่านยิ ม และคุณลักษณะอันพงึ ประสงค์
3. เกณฑก์ ารประเมินผล
3.1 แบบทดสอบก่อนเรียน (ตามสภาพจริง)/หลังเรียน ต้องมีคะแนนไมน่ ้อยกวา่ 50%
3.2 แบบฝกึ หดั ทา้ ยหน่วยการเรียน ตอ้ งมคี ะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ตอ้ งมคี ะแนนไม่น้อยกวา่ 50%
3.4 แบบประเมินคุณธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพึงประสงค์ นักเรียนต้องมี

พฤติกรรมครบทุกข้อจงึ ถือวา่ ผ่านเกณฑ์

41

แผนการจดั การเรยี นรู้

มงุ่ เน้นสมรรถนะอาชีพและบูรณาการของเศรษฐกจิ พอเพียง

รหสั วชิ า 20901-2004 วชิ า การพัฒนาเวบ็ ด้วยภาษาเอชทีเอ็มแอล ท-ป-น. 1-2-2

หนว่ ยที่ 11 ช่ือหนว่ ย การขอพืน้ ท่เี ว็บไซตแ์ ละการ Upload เวบ็ เพจ

จานวน 3 ชั่วโมง ชวั่ โมงที่ 49-51 สัปดาห์ท่ี 17

สาระสาคญั
Google Sites เป็นแอพบริหารจัดการเก่ียวกับการสร้างเว็บไซต์ไว้ใช้งานฟรีบนอินเทอร์เน็ต ซึ่งใช้งาน

ง่าย สะดวกและรวดเร็ว สามารถนาไปสร้างเว็บไชต์ใช้งานในรูปแบบต่าง ไม่ว่าจะเป็นเว็บไซต์การเรียนการ
สอน การนาเสนอผลงาน เวบ็ สะสมผลงาน

หวั ข้อเรื่อง
1. การขอพน้ื ท่ีเวบ็ ไซต์
2. การ Upload เว็บเพจ

สมรรถนะย่อย
1. แสดงความรแู้ ละปฏบิ ัตเิ กี่ยวกบั การขอพ้ืนที่เวบ็ ไซต์และการ Upload เว็บเพจ

จุดประสงค์เชงิ พฤติกรรม

1. ขอพนื้ ที่เวบ็ ไซต์ได้

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

1. พอประมาณ กาหนดเนื้อหาเหมาะสมกบั การขอพืน้ ทเี่ วบ็ ไซตแ์ ละการ Upload เว็บเพจ
2. มีเหตุผล การเรยี นรแู้ ละเข้าใจเก่ยี วกบั การขอพ้นื ท่ีเวบ็ ไซตแ์ ละการ Upload เวบ็ เพจ
3. มภี ูมิคมุ้ กัน ศกึ ษาและให้ความสาคัญต่อการเรยี นรสู้ งิ่ ใหม่ ๆ เพ่ือเตรยี มรับการเปลยี่ นแปลง

2 เงอื่ นไข
1. ความรู้

1.1 รอบรู้ มีความรูเ้ กยี่ วกับการขอพืน้ ท่ีเว็บไซต์และการ Upload เวบ็ เพจ
1.4 รอบคอบ การแก้ไขปัญหาในดา้ นตา่ งๆ ที่เกี่ยวกบั การขอพนื้ ท่เี ว็บไซต์และการ

Upload เว็บเพจ
1.3 ระมัดระวัง สามารถนามาประยุกต์ใช้ในงานต่างๆ ได้อยา่ ง เหมาะสมและหลากหลาย
2. คณุ ธรรม
2.1 เป็นผู้ทางานด้วยความเข้มแข็งอดทน
2.2 เปน็ ผูม้ คี วามรักสามัคคี เพอื่ ให้งานท่ีได้รับมอบหมาย สาเรจ็ ตามกาหนดเวลา
2.3 เป็นผมู้ ีความรับผิดชอบ

42

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

สอ่ื การเรียนการสอน
1. หอ้ งเรยี นออนไลน์ Classroom รายวชิ าการพฒั นาเวบ็ ด้วยภาษาเอชทเี อ็มแอล
2. ใบงาน
3. แบบทดสอบกอ่ นเรียน/หลงั เรียน

หลักฐานการเรยี นรู้/แหลง่ เรียนรู้
1. หลกั ฐานการเรยี นรู้
1.1 เอกสารประกอบการเรียนวิชาการพัฒนาเวบ็ ดว้ ยภาษาเอชทเี อ็มแอล
1.2 ห้องเรยี นออนไลน์ Classroom รายวชิ าการพัฒนาเวบ็ ด้วยภาษาเอชทเี อ็มแอล
2. หลักฐานการปฏบิ ตั ิงาน
2.1 แบบทดสอบก่อนเรียน/หลังเรยี น
2.2 แบบฝกึ หัดทา้ ยหน่วยการเรียน
2.3 ใบงาน
2.4 ผลการปฏิบัตกิ ิจกรรมการเรยี น

43

การวัดผลประเมินผล
1. เครอ่ื งมือวัดผล
1.1 แบบทดสอบก่อนเรยี น/หลงั เรยี น
1.2 แบบฝกึ หัดทา้ ยหน่วยการเรียน
1.3 ใบงาน
1.4 แบบประเมินคณุ ธรรม จริยธรรม คา่ นิยม และคณุ ลักษณะอนั พึงประสงค์
2. วิธวี ดั ผล
2.1 ตรวจแบบทดสอบก่อนเรียน/หลังเรียน
2.2 ตรวจแบบฝึกหัดทา้ ยหนว่ ยการเรียน
2.3 ตรวจใบงาน
2.4 สังเกตและประเมินพฤติกรรมด้านคุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลักษณะอันพงึ ประสงค์
3. เกณฑก์ ารประเมินผล
3.1 แบบทดสอบก่อนเรียน (ตามสภาพจริง)/หลังเรียน ต้องมีคะแนนไมน่ ้อยกวา่ 50%
3.2 แบบฝกึ หดั ทา้ ยหน่วยการเรียน ต้องมคี ะแนนไมน่ ้อยกว่า 50%
3.3 ใบงาน ตอ้ งมคี ะแนนไม่น้อยกวา่ 50%
3.4 แบบประเมินคุณธรรม จริยธรรม ค่านิยม และคุณลักษณะอันพึงประสงค์ นักเรียนต้องมี

พฤติกรรมครบทุกข้อจงึ ถือวา่ ผ่านเกณฑ์