ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

แผนประจำหน่วยการเรียนรู้ที่ 2

 

เรื่อง การจัดการข้อความด้วยภาษา HTML                             เวลาเรียนจำนวน 4 ชั่วโมง


arrow1หัวเรื่อง/สาระ

1. การกำหนดหัวเรื่องในเอกสารภาษา HTML

2. การกำหนดลักษณะและรูปแบบตัวอักษรในเอกสารภาษา HTML

3. สีกับการสร้างเอกสารภาษา HTML

4. การกำหนดตัวอักษรวิ่งในเอกสารภาษา HTML

 

arrow1แนวคิด หรือสาระสำคัญ

            1. การกำหนดหัวเรื่อง มี  6  ระดับเป็นการแยกความสำคัญของหัวเรื่อง ค่าที่กำหนดมีตั้งแต่  1 - 6  และควรเลือกใช้หัวเรื่องในขนาดที่เหมาะสม​ไม่ควรเลือกใช้ขนาดหัวเรื่องหลายขนาดจะทำให้ข้อมูลไม่น่าสนใจ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​เกิดความสับสนในเนื้อหาที่นำเสนอบนหน้าเว็บเพจ

            2. การกำหนดลักษณะตัวอักษรแบบ (Physical) ล้วนเป็นแท็กคู่มีแท็กเปิดและแท็กปิด การกำหนดรูปแบบตัวอักษรสามารถทำได้เหมือนกับใช้ในโปรแกรม word เพียงกำหนดชื่อ font ที่ต้องการ และสามารถกำหนดขนาดได้ 7 ขนาดด้วยกันและเทคนิคการกำหนดขนาดตัวอักษร เครื่องหมาย + ตามด้วยขนาดตัวอักษร เป็นการเพิ่มขนาดตัวอักษร เครื่องหมาย - ตามด้วยขนาดตัวอักษรเป็นการลดขนาดตัวอักษร สีของตัวอักษรกำหนดได้ด้วยแอตทริบิวต์ color ต้องกำหนดภายใต้แท็ก <font>

            3. สีที่ใช้ในการสร้างเว็บเพจนั้นได้มาจากการผสมค่าสีของ​​​​​​​​​​​  RGB ​​​​​​​​​​​​ ประกอบไปด้วยสีแดง ​​​​ (Red) ​​​​ สีเขียว  ​​​​(Green)  ​​​​และสีน้ำเงิน​​  (Blue)​​​​  ซึ่งค่าสีโหมด ​​​ RGB  เป็นเลขฐานสิบหกการกำหนดค่าสีบนเว็บเพจต้องมีเครื่องหมาย # นำหน้าค่าสี ค่าสีต้องมีครบ  6  หลักเสมอ กำหนดสีให้กับสีพื้นด้วยแอตทริบิวต์  bgcolor  และสีข้อความทั้งหน้าเว็บเพจด้วยแอตทริบิวต์  text  กำหนดภายในแท็ก  <body>

            4. กำหนดรูปแบบการวิ่งมี 3 รูปแบบ คือ scroll วิ่งหายไปจากขอบ และปรากฏที่ขอบอีกด้าน ทำซ้ำเรื่อย ๆ slide วิ่งแล้วหยุดที่ขอบ alternate วิ่งกระทบขอบแล้วเด้งไปอีกทาง กลับไปกลับมา กำหนดด้วยแอตทริบิวต์ behavior และการกำหนดที่นิยมอีกการกำหนดทิศทางการเคลื่อนที่  left, right, up  และ down

 

arrow1จุดประสงค์การเรียนรู้

หลังจากศึกษาเนื้อหาในหน่วยการเรียนรู้นี้แล้วนักเรียนมีความสามารถ ดังนี้

1. อธิบายและกำหนดหัวเรื่องในเอกสารภาษา HTMLได้

2. อธิบายและกำหนดลักษณะและรูปแบบในเอกสารภาษา HTMLได้ 

3. อธิบายลักษณะสีและกำหนดสีในเอกสารภาษา HTMLได้

4. อธิบายและกำหนดตัวอักษรวิ่งในเอกสารภาษา HTMLได้

 

 

arrow1หัวเรื่องที่ 2.1 

การกำหนดหัวเรื่องในเอกสารภาษา HTML                                        เวลาเรียน 1 ชั่วโมง


            การกำหนดหัวเรื่องสามารถเป็นการลดการใช้คำสั่งในการกำหนดข้อความให้เป็นมีขนาดใหญ่และหนาตามลำดับเพื่อสะดวกในการนำเสนอข้อมูลสามารถใช้แท็ก <hn> ในการกำหนดหัวเรื่องได้ 

รายละเอียดของเนื้อหามีดังนี้

ารกำหนดหัวเรื่องในเอกสารภาษา HTML 

 

arrow1 สรุปเนื้อหา

            การกำหนดหัวเรื่อง มี  6  ระดับเป็นการแยกความสำคัญของหัวเรื่อง ค่าที่กำหนดมีตั้งแต่  1 - 6  และควรเลือกใช้หัวเรื่องในขนาดที่เหมาะสม​ไม่ควรเลือกใช้ขนาดหัวเรื่องหลายขนาดจะทำให้ข้อมูลไม่น่าสนใจ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​เกิดความสับสนในเนื้อหาที่นำเสนอบนหน้าเว็บเพจ

 

arrow1กิจกรรม/ใบงานที่ 2.1 การกำหนดหัวเรื่องในเอกสารภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที

 คำชี้แจง

1. ให้นักเรียนเติมคำลงในช่องว่างให้ถูกต้องสมบูรณ์

1.1 การกำหนดหัวเรื่องสามารถกำหนดได้...............ระดับ

1.2 หัวเรื่องที่มีขนาดใหญ่ที่สุดเท่ากับ..................

1.3 หัวเรื่องที่มีขนาดเล็กที่สุดเท่ากับ..................

1.4 ตำแหน่งของแท็กอยู่ภายใต้แท็ก..................

1.5 ถ้าต้องการกำหนดหัวเรื่องให้มีขนาดเท่ากับ 3 ต้องกำหนดแท็กอย่างไร...................

1.6 แท็กสำหรับกำหนดหัวเรื่องเป็นแท็กประเภทใด.............

1.7 ประเภทแท็กเป็นแท็ก..........มีแท็ก...............และแท็ก..................

1.8 แท็กท้ายของแท็กหัวเรื่องจะมีเครื่องหมาย..................

1.9 การกำหนดหัวเรื่องจะแสดงผลเป็นตัวอักษรที่เป็นตัว....................ขึ้น

1.10 แท็กหัวเรื่องที่มีขนาดเท่ากับค่ามาตรฐานของตัวอักษรขนาด..................

2.  เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

arrow1แนวตอบ หรือแนวปฏิบัติ 

คะแนน/คุณภาพ

เกณฑ์การประเมินผล

5 : ดีมาก

ทำกิจกรรมถูกต้อง 9-10 ข้อ

4 : ดี

ทำกิจกรรมถูกต้อง 7-8   ข้อ

3 : ปานกลาง

ทำกิจกรรมถูกต้อง 5-6   ข้อ

2 : พอใช้

ทำกิจกรรมถูกต้อง 3-4   ข้อ

1 : ปรับปรุง

ทำกิจกรรมถูกต้อง 1-2   ข้อ

0 : ไม่ผ่าน

ทำกิจกรรมถูกต้อง 0      ข้อ

 

arrow1หัวเรื่องที่ 2.2

การกำหนดลักษณะและรูปแบบตัวอักษรในเอกสารภาษา HTML          เวลาเรียน 1 ชั่วโมง 


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

             รายละเอียดของเนื้อหามีดังนี้

1. การกำหนดลักษณะตัวอักษรในภาษา HTML

1.1 การกำหนดข้อความเป็นตัวหนา

1.2 การกำหนดข้อความเป็นตัวเอียง

1.3 การกำหนดข้อความให้ขีดเส้นใต้

1.4 การกำหนดข้อความเป็นตัวพิมพ์ดีด

1.5 การกำหนดข้อความเป็นตัวขีดฆ่า

1.6 การกำหนดข้อความเป็นยกตัวห้อย

1.7 การกำหนดข้อความให้ตัวใหญ่ขึ้นและเล็กลง

2. การกำหนดรูปแบบตัวอัษร

2.1 การกำหนดขนาดตัวอักษร

2.2 การกำหนดรูปแบบตัวอักษร

2.3 การกำหนดสีตัวอักษร

arrow1 สรุปเนื้อหา

             การกำหนดลักษณะตัวอักษรแบบ (Physical) ล้วนเป็นแท็กคู่มีแท็กเปิดและแท็กปิด การกำหนดรูปแบบตัวอักษรสามารถทำได้เหมือนกับใช้ในโปรแกรม word เพียงกำหนดชื่อ font ที่ต้องการ และสามารถกำหนดขนาดได้ 7 ขนาดด้วยกันและเทคนิคการกำหนดขนาดตัวอักษร เครื่องหมาย + ตามด้วยขนาดตัวอักษร เป็นการเพิ่มขนาดตัวอักษร เครื่องหมาย - ตามด้วยขนาดตัวอักษรเป็นการลดขนาดตัวอักษร สีของตัวอักษรกำหนดได้ด้วยแอตทริบิวต์ color ต้องกำหนดภายใต้แท็ก <font>

  

arrow1กิจกรรม/ใบงานที่ 2.2 การกำหนดลักษณะและรูปแบบตัวอักษรในเอกสารภาษา HTML (คะแนนเต็ม 15 คะแนน) ใช้เวลาทำ 20 นาที

คำชี้แจง

            1. ให้นักเรียนเปิดไฟล์ work103.html ขึ้นมาสร้างเว็บโดย จัดข้อความพรรณไม้สวนพฤกษศาสตร์โรงเรียนให้ตัวอักษรแบบ MS Sans Serif มีขนาดเท่ากับ 3 และหัวข้อลักษณะทั่วไป ต้น ใบ ดอก ฝัก/ผล เมล็ด ให้ขีดเส้นใต้ ข้อมูลชื่อวิทยาศาสตร์ ให้เป็นตัวเอียง และตัวหนาตามกำหนด

            2. เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานไว้ในไดร์ฟ D: โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ เลขที่_work202.html เสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล

arrow1แนวตอบ หรือแนวปฏิบัติ

 work202

เกณฑ์การประเมิน

รายละเอียดเกณฑ์การให้คะแนน

3

(ดี)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ปฏิบัติตามขั้นตอนถูกต้อง

ปฏิบัติได้ครบทุกขั้นตอนการกำหนดลักษณะตัวอักษรแบบ physical และกำหนดรูปแบบตัวอักษร

ปฏิบัติได้ตามขั้นตอนการกำหนดลักษณะตัวอักษรแบบ physical และกำหนดรูปแบบตัวอักษร

ปฏิบัติได้ไม่ครบขั้นตอนการกำหนดลักษณะตัวอักษรแบบ physical และกำหนดรูปแบบตัวอักษร

ปฏิบัติไม่ได้ตามขั้นตอน

ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ

ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม

หลักการเขียนภาษา HTML ทั้งหมด

ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน

ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML

ไม่สร้างชิ้นงาน

บันทึกชิ้นงาน

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง

ไม่สามารถบันทึกชิ้นงานได้

เสร็จงาน
ตรงเวลาที่กำหนด

งานที่ปฏิบัติเสร็จทันเวลา

งานที่ปฏิบัติเสร็จทันเวลาบางส่วน

งานที่ปฏิบัติเสร็จไม่ทันเวลา

ไม่มีงาน

มีความคิดริเริ่มสร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สวยงาม

ชิ้นงานสวยงาม

ไม่มีงาน

 

arrow1หัวเรื่องที่ 2.3

สีกับการสร้างเอกสารภาษา HTML                                                     เวลาเรียน 1 ชั่วโมง


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

             รายละเอียดของเนื้อหามีดังนี้

1. สีกับการสร้างเอกสารภาษา HTML

1.1 การหาค่าสีด้วยการใช้โปรแกรม Paint

1.2 การหาค่าสีด้วยโปรแกรม  Calculator

2. การกำหนดสีพื้นและสีข้อความ

 arrow1 สรุปเนื้อหา

             สีที่ใช้ในการสร้างเว็บเพจนั้นได้มาจากการผสมค่าสีของ​​​​​​​​​​​  RGB ​​​​​​​​​​​​ ประกอบไปด้วยสีแดง ​​​​ (Red) ​​​​ สีเขียว  ​​​​(Green)  ​​​​และสีน้ำเงิน​​  (Blue)​​​​  ซึ่งค่าสีโหมด ​​​ RGB  เป็นเลขฐานสิบหกการกำหนดค่าสีบนเว็บเพจต้องมีเครื่องหมาย # นำหน้าค่าสี ค่าสีต้องมีครบ  6  หลักเสมอ กำหนดสีให้กับสีพื้นด้วยแอตทริบิวต์  bgcolor  และสีข้อความทั้งหน้าเว็บเพจด้วยแอตทริบิวต์  text  กำหนดภายในแท็ก  <body>

 

arrow1กิจกรรม/ใบงานที่ 2.3 สีกับการสร้างเอกสารภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที

 คำชี้แจง

1.  ให้นักเรียนตอบคำถามต่อไปนี้

1.1  ให้นักเรียนอธิบายลักษณะสีสำหรับสร้างเว็บเพจ 

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

              1.2  ให้นักเรียนอธิบายวิธีการกำหนดสีพื้นและข้อความ

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

 2.  เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

 

arrow1แนวตอบ หรือแนวปฏิบัติ 

เกณฑ์
การประเมิน

รายละเอียดเกณฑ์การให้คะแนน

5

(ดีมาก)

4

(ดี)

3

(ปานกลาง)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ลักษณะสีสำหรับสร้างเว็บเพจ

เขียนได้ถูกต้องครบทุกประเด็นตามลำดับ

เขียนได้ถูกต้องครบ 4 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 3 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 2 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 1 ประเด็น

เขียนไม่ตรงประเด็น

วิธีการกำหนดสีพื้นและข้อความ

เขียนได้ถูกต้องครบทุกประเด็นตามลำดับ

เขียนได้ตรงถูกต้องครบ 4 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 3ประเด็น

เขียนได้ถูกต้องอย่างน้อย 2 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 1 ประเด็น

เขียนไม่ตรงประเด็น

 

arrow1หัวเรื่องที่ 2.4

การกำหนดตัวอักษรวิ่งในเอกสารภาษา HTML                                  เวลาเรียน 1 ชั่วโมง


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

             รายละเอียดของเนื้อหามีดังนี้

การกำหนดตัวอักษรวิ่งในเอกสารภาษา HTML

 

arrow1 สรุปเนื้อหา

             กำหนดรูปแบบการวิ่งมี 3 รูปแบบ คือ scroll วิ่งหายไปจากขอบ และปรากฏที่ขอบอีกด้าน ทำซ้ำเรื่อย ๆ slide วิ่งแล้วหยุดที่ขอบ alternate วิ่งกระทบขอบแล้วเด้งไปอีกทาง กลับไปกลับมา กำหนดด้วยแอตทริบิวต์ behavior และการกำหนดที่นิยมอีกการกำหนดทิศทางการเคลื่อนที่  left, right, up  และ down 

 

arrow1กิจกรรม/ใบงานที่ 2.4 การกำหนดตัวอักษรวิ่งในเอกสารภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที

คำชี้แจง

1.  ให้นักเรียนโยงเส้นจับคู่แอตทริบิวต์ที่เกี่ยวข้องกับคุณลักษณะของตัวอักษรวิ่ง

    1.1  กำหนดรูปแบบการวิ่ง

    1.2  กำหนดทิ่งทางการเคลื่อนที่

    1.3  กำหนดความกว้าง

    1.4  กำหนดความสูงของกรอบ

    1.5  กำหนดจำนวนรอบการวิ่ง

    1.6  กำหนดระยะในการขยับข้อความ

    1.7  กำหนดระยะห่างของข้อความที่เคลื่อนไหว   และกรอบในแนวบนและล่าง

    1.8  วิ่งไปจากขอบ และปรากฏที่ขอบอีกด้าน

    1.9  วิ่งแล้วหยุดที่ขอบ

    1.10  วิ่งกระทบขอบแล้วเด้ง

A.  height

B.  scrolldelay

C.  scrollmount

D.  vspace

E.  hspace

F.  alternate

G.  width

I.  behavior

J.  slide

K.  direction

L.  scroll

M.  loop

          2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

 

arrow1แนวตอบ หรือแนวปฏิบัติ

คะแนน/คุณภาพ

เกณฑ์การประเมินผล

5 : ดีมาก

ทำกิจกรรมถูกต้อง 9-10 ข้อ

4 : ดี

ทำกิจกรรมถูกต้อง 7-8   ข้อ

3 : ปานกลาง

ทำกิจกรรมถูกต้อง 5-6   ข้อ

2 : พอใช้

ทำกิจกรรมถูกต้อง 3-4   ข้อ

1 : ปรับปรุง

ทำกิจกรรมถูกต้อง 1-2   ข้อ

0 : ไม่ผ่าน

ทำกิจกรรมถูกต้อง 0      ข้อ

 

arrow1การออกแบบทดสอบ

ผลการเรียนรู้

มีความรู้ความเข้าใจและสามารถจัดการข้อความด้วยภาษา HTML ได้

จุดประสงค์การเรียนรู้

ด้านความรู้

1. อธิบายและกำหนดหัวเรื่องในเอกสารภาษา HTMLได้

2. อธิบายและกำหนดลักษณะและรูปแบบในเอกสารภาษา HTMLได้ 

3. อธิบายลักษณะสีและกำหนดสีในเอกสารภาษา HTMLได้

4. อธิบายและกำหนดตัวอักษรวิ่งในเอกสารภาษา HTMLได้

ด้านทักษะ/กระบวนการ

1. กำหนดหัวเรื่องในเอกสารภาษา HTMLได้

2. กำหนดลักษณะและรูปแบบในเอกสารภาษา HTMLได้ 

3. กำหนดสีในเอกสารภาษา HTMLได้

4. กำหนดตัวอักษรวิ่งในเอกสารภาษา HTMLได้

ด้านคุณลักษณะ

1. มีวินัย

2. ใฝ่เรียนรู้

3. มุ่งมั่นในการทำงาน

แบบทดสอบ

1. แบบทดสอบก่อนเรียน มีทั้งหมด  2  ตอน  จำนวน  12  ข้อ  (16  คะแนน)

ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 10 ข้อ (10  คะแนน)  ใช้เวลา 10 นาที

ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน  2  ข้อ  (ข้อละ  3 คะแนน)  ใช้เวลา 10 นาที

2. แบบทดสอบหลังเรียน มีทั้งหมด  2  ตอน  จำนวน  12  ข้อ  (16  คะแนน)

ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 10 ข้อ (10  คะแนน)  ใช้เวลา 10 นาที

ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน  2  ข้อ  (ข้อละ  3 คะแนน)  ใช้เวลา 10 นาที