็HTML เว็บเพจสวยด้วยมือเรา

1. 1
เอกสารประกอบการเรียนรู้
เรื่อง ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
เว็บไซต์
นักเรียนคงคุ้นเคยกับคาว่าโฮมเพจ เว็บเพจและเว็บไซต์กันมาบ้างแล้ว แต่คงมีหลายคนที่ยัง
สับสนว่า อะไรคือเว็บเพจ อะไรคือโฮมเพจและอะไรคือเว็บไซต์ คา 3 คานี้เหมือนหรือแตกต่างกัน
อย่างไร
โฮมเพจ (Home Page)
โฮมเพจ คือคาที่ใช้เรียกหน้าแรกของเว็บไซต์ ซึ่งประกอบไปด้วยเมนูต่างๆและเรื่องราวต่างๆ
มากมายคล้ายกับหน้าปกนิตยสารบ้านเรา ดังนั้นหากเราออกแบบหน้าโฮมเพจให้สวยงามและ
น่าสนใจ โอกาสที่ผู้ชมจะแวะเข้ามาเยี่ยมเยียนโฮมเพจของเราก็จะยิ่งมากตามไปด้วย
เว็บเพจ (Web Page)
เว็บเพจ คือ คาที่ใช้เรียกหน้าเอกสารต่างๆ ที่อยู่ในรูปแบบไฟล์ HTML (Hyper Text
Markup Language) เปรียบเสมือนหน้ากระดาษแต่ละหน้าที่มีเรื่องราวต่างๆมากมายบรรจุอยู่ใน
นิตยสาร แต่แตกต่างกันตรงที่มีการเชื่อมโยง (Link) ซึ่งเราสามารถคลิกไปที่หน้าใดของโฮมเพจก็ได้

2. 2
เว็บไซต์ (Web Site)
เว็บไซต์ คือ คาที่ใช้เรียกกลุ่มของเว็บเพจ ( ดังนั้นภายในเว็บไซต์จะประกอบไปด้วยโฮมเพจ
และเว็บเพจ ) โดยเรามักใช้เรียกเว็บที่มีขนาดใหญ่และมีการจดทะเบียนชื่อเว็บไซต์นั้นๆไว้แล้ว
(Domain Name) เช่น http://www.geocities.com , http://www.sanook.com ,
http://www.yahoo.com เป็นต้น
เว็บเบราเซอร์ (Web browser)
คือ โปรแกรมคอมพิวเตอร์ ที่ช่วยให้คุณเข้าถึงเว็บไซต์ หรือเรียกง่ายๆ ว่าเป็นโปรแกรม
สาหรับใช้เล่นอินเตอร์เน็ต ทั้งนี้เว็บไซต์ต่างๆ จะจัดเก็บข้อมูลในรูปแบบ เว็บเพจ (web page) ที่
สร้างด้วยภาษา HTML (Hypertext MarkupLanguage) ข้อมูลทั้งหลายของเว็บเพจจะถูกเก็บไว้ใน
เว็บเซิร์ฟเวอร์ (web server) เชื่อมต่อกันเป็นโครงข่ายขนาดใหญ่ ที่เรียกว่า เวิลด์ไวด์เว็บ
(world wide web หรือ www.)เว็บ เบราเซอร์จึงเหมือนประตูเชื่อมต่อสู่โลกแห่งอินเตอร์เน็ต
เวิลด์ไวด์เว็บต่างๆ ซึ่งวิธีการใช้งานนั้น ก็แค่กรอกชื่อเว็บไซต์ หรือ URL(Uniform Resource
Locators) ลงในช่องใส่ Address ของเบราเซอร์เว็บเบราเซอร์ ที่นิยมใช้ในปัจจุบันมากที่สุดในโลก
คือ Internet Explorer หรือ IE จากบริษัท Microsoft ที่มีถึงเวอร์ชั่นล่าสุดคือ
เวอร์ชั่น 9 ที่เพิ่งเปิดให้ดาวน์โหลดกันไปเมื่อวันที่ 15 มีนาคม ที่ผ่านมา (อ่านรายละเอียดเพิ่มเติมได้ที่
www.siamget.com/news/521)สาหรับเว็บเบราเซอร์ที่ได้รับความนิยมตามมา คือ Firefox ซึ่งเวอร์
ชั่นล่าสุดคือเวอร์ชั่น 4 และกาลังมียอดดาวน์โหลดมากขึ้นเรื่อยๆ จนอาจแซง IE ในอนาคต
เว็บเบราเซอร์ในปัจจุบันได้แก่ Chrome จาก Google, Safari จาก Apple, Internet
Explorer จาก Microsoft, Firefoxจาก Mozilla และ Opera จาก Opera Software ASA
ที่มา : [ออนไลน์] เข้าถึงได้จาก :
http://www.websmartpro.net/home/index.asp?autherid=25&
ContentID=10000024&title=%E0%C7%E7%BA%E4%AB%B5%EC%A4%D
7%CD%CD%D0%E4%C3&bttcol=False สืบค้น 3 กุมภาพันธ์ 2554

3. 3
ใบประลองที่ 1 (Lab Sheet)
สาระการเรียนรู้การงานอาชีพและเทคโนโลยี
รายวิชาการเขียนเว็บเพจด้วยภาษา HTMLรหัสวิชา ง20244
หน่วยการเรียนรู้เรื่อง
เว็บเพจสวยด้วยมือเรา
....../...../......
ชื่องาน : ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
ชื่อ ......................................................................ชั้น.................เลขที่.............กลุ่มที่............... เวลา 1 ชั่วโมง
จุดประสงค์การเรียนรู้
นาเสนอความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
ขั้นตอนการปฏิบัติงาน
ให้นักเรียนร่วมกันศึกษาจากเอกสารประกอบการเรียนรู้เรื่อง ความรู้เบื้องต้นเกี่ยวกับเว็บเพจแล้ว
สรุปข้อมูลความรู้เรื่อง เว็บเพจ,โฮมเพจ,เว็บไซต์ ว่ามีความเหมือนและแตกต่างกันอย่างไร
1. เว็บเพจ คือ
ตอบ
.......................................................................................................................................................................
………….......................................................................................................................................................
.......................................................................................................................................................................
………….......................................................................................................................................................
2. โฮมเพจ คือ
ตอบ
.......................................................................................................................................................................
………….......................................................................................................................................................
.......................................................................................................................................................................
………….......................................................................................................................................................
3.เว็บไซต์ คือ
ตอบ
.......................................................................................................................................................................
.......................................................................................................................................................................
………….......................................................................................................................................................
………….......................................................................................................................................................

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

5. 5
ใบสั่งงานที่ 1 (Job Sheet)
สาระการเรียนรู้การงานอาชีพและเทคโนโลยี
รายวิชาการเขียนเว็บเพจด้วยภาษา HTMLรหัสวิชา ง20244
หน่วยการเรียนรู้เรื่อง
เว็บเพจสวยด้วยมือเรา
....../...../......
ชื่องาน : ความรู้เรื่อง เว็บเพจภาษา HTML
ชื่อ ......................................................................ชั้น.................เลขที่.............กลุ่มที่...............
จุดประสงค์การเรียนรู้
นาเสนอความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
วัสดุ/สิ่งที่ต้องเตรียม
1.เครื่องคอมพิวเตอร์
2. เครื่องเครื่องโปรแจคเตอร์
คาสั่ง : ให้นักเรียน
1. แบ่งกลุ่มๆ ละ 2-3 คน
2. ศึกษาจากเอกสารประกอบการเรียนรู้เรื่อง
ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
3. สรุปข้อมูลความรู้เกี่ยวกับภาษา HTML โดย
ให้แสดงข้อมูลด้วย โปรแกรม Power Point
4. นาเสนอผลงานด้วย โปรแกรม Power Point
5. ใช้เวลาฝึกปฏิบัติไม่ควรเกิน 1 ชั่วโมง
6. บันทึกไฟล์ชื่อ ความรู้เกี่ยวกับภาษา HTML
ข้อควรระวัง : ในการจัดทาข้อมูลการนาเสนอด้วย
Power Point ควรเลือกสีพื้น,สีตัวอักษรและขนาด
ตัวอักษรที่อ่านง่าย
สรุปขั้นตอนการจัดทางาน ปัญหา/อุปสรรค

6. 6
ใบตรวจงานที่ 1
สาระการเรียนรู้การงานอาชีพและเทคโนโลยี
รายวิชาการเขียนเว็บเพจด้วยภาษา HTMLรหัสวิชา ง20244
หน่วยการเรียนรู้เรื่อง
เว็บเพจสวยด้วยมือเรา
....../...../......
ชื่องาน : ความรู้เรื่อง เว็บเพจภาษา HTML
ชื่อ ......................................................................ชั้น.................เลขที่.............กลุ่มที่...............
จุดประสงค์การเรียนรู้
นาเสนอความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
วัสดุ/สิ่งที่ต้องเตรียม
1.เครื่องคอมพิวเตอร์
2. เครื่องเครื่องโปรแจคเตอร์
คาสั่ง : ให้นักเรียน
1. แบ่งกลุ่มๆ ละ 2-3 คน
2. ศึกษาจากเอกสารประกอบการเรียนรู้เรื่อง
ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
3. สรุปข้อมูลความรู้เกี่ยวกับภาษา HTML โดย
ให้แสดงข้อมูลด้วย โปรแกรม Power Point
4. นาเสนอผลงานด้วย โปรแกรม Power Point
5. ใช้เวลาฝึกปฏิบัติไม่ควรเกิน 1 ชั่วโมง
6. บันทึกไฟล์ชื่อ ความรู้เกี่ยวกับภาษา HTML
ข้อควรระวัง : ในการจัดทาข้อมูลการนาเสนอด้วย
Power Point ควรเลือกสีพื้น,สีตัวอักษรและขนาด
ตัวอักษรที่อ่านง่าย
มิติการประเมิน/น้าหนักคะแนน 3 2 1 0 สรุปผลการประเมิน
1)มิติด้านข้อมูล ดี (คะแนน 17-21)
1.1 เชิงปริมาณ พอใช้ (คะแนน 8-16)
1.2 เชิงคุณภาพ ต้องปรับปรุง (คะแนน 1-7)
2) แบบแผนการคิด ไม่มีผลงาน (0 คะแนน)
3) เทคนิคการนาเสนอ หมายเหตุ : การปรับเปลี่ยนคะแนนอยู่ใน
ดุลพินิจของครูและความคิดเห็นของนักเรียน4) ภาษาที่ใช้(คาศัพท์)
4.1 ภาษาที่ใช้ (คาศัพท์)
ผู้ประเมิน นักเรียนเพื่อน ครู
ลงชื่อ....................................................ผู้ประเมิน
(...........................................)
............./............../..............
4.2 รูปประโยค
4.3 เนื้อหา
รวม
สรุปรวม
เกณฑ์ / ระดับคุณภาพ
คะแนน 15-21 ได้ระดับคุณภาพ 3 (ดี)
คะแนน 8-14 ได้ระดับคุณภาพ 2 (พอใช้)
คะแนน 1-7 ได้ระดับคุณภาพ 1 (ปรับปรุง)
คะแนน 0 ไม่มีผลงาน
เกณฑ์การประเมิน : นักเรียนได้คะแนน 17 คะแนน ขึ้นไป ถือว่าผ่านเกณฑ์

7. 7
แบบทดสอบย่อย ครั้งที่ 1
เรื่อง ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ (Web Page)
คาชี้แจง : นักเรียนเลือกคาตอบที่ถูกต้องเพียงคาตอบเดียว แล้วทาเครื่องหมาย X ลง
ในกระดาษคาตอบ
1).เว็บบราวเซอร์ (Web browser) คือข้อใด?
1.เครื่องมือในการใช้อินเทอร์เน็ต
2.เครื่องสื่อสารชนิดหนึ่ง
3.โปรแกรมที่ทาหน้าที่สาหรับเปิดเว็บเพจ
4. เอกสารหน้าที่หนึ่ง
2). Home Page หมายถึง?
1.ที่เก็บเว็บเพจ
2.เว็บเพจที่เป็นหน้าแรก
3.เอกสารข้อมูลในแต่ละหน้า
4.โปรแกรมที่ใช้เรียกเว็บไซต์
3).Website หมายถึงข้อใด?
1.หน้าเว็บเพจหลายๆ หน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์
2.เว็บเพจที่เป็นหน้าแรก
3.เอกสารข้อมูลแต่ละหน้า
4.โปรแกรมที่ใช้เรียกเว็บไซต์
4). อินเทอร์เน็ต คืออะไร?
1.เครือข่ายคอมพิวเตอร์ระดับองค์กร
2.เครือข่ายคอมพิวเตอร์ระดับท้องถิ่น
3.เครือข่ายคอมพิวเตอร์ระดับเมือง
4.เครือข่ายคอมพิวเตอร์ระดับโลก

8. 8
5). ข้อใดอธิบายความหมายของ เวิล์ด ไวด์ เว็บ ได้ถูกต้องที่สุด?
1.การบริการข้อมูลผ่านอีเมล์
2.การบริการข้อมูลด้วยข้อความ ภาพ เสียง ผ่านคอมพิวเตอร์
3.การบริการข้อมูลผ่านกระดานข่าว
4.การบริการข้อมูลที่เชื่อมต่อด้วยไฮเปอร์ลิงก์
*****************************************************************

9. 9

10. 10
เฉลย/ตัวอย่างแนวคาตอบ ใบประลองที่ 1 (Lab Sheet)
สาระการเรียนรู้การงานอาชีพและเทคโนโลยี
รายวิชาการเขียนเว็บเพจด้วยภาษา HTMLรหัส ง20244
หน่วยการเรียนรู้เรื่อง
เว็บเพจสวยด้วยมือเรา
....../...../......
ชื่องาน : ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
ชื่อ ....................................................................ชั้น.................เลขที่.............กลุ่มที่............... เวลา 1 ชั่วโมง
จุดประสงค์การเรียนรู้
นาเสนอความรู้เบื้องต้นเกี่ยวกับเว็บเพจได้
ขั้นตอนการปฏิบัติงาน
ให้นักเรียนร่วมกันศึกษาเอกสารประกอบการเรียนรู้เรื่อง ความรู้เบื้องต้นเกี่ยวกับเว็บเพจแล้วสรุป
ข้อมูลความรู้เรื่อง เว็บเพจ,โฮมเพจ,เว็บไซต์ ว่ามีความเหมือนและแตกต่างกันอย่างไร
1. เว็บเพจ คือ
ตอบเว็บเพจ คือ คาที่ใช้เรียกหน้าเอกสารต่างๆ ที่อยู่ในรูปแบบไฟล์ HTML (Hyper Text Markup
Language) เปรียบเสมือนหน้ากระดาษแต่ละหน้าที่มีเรื่องราวต่างๆมากมายบรรจุอยู่ในนิตยสาร แต่
แตกต่างกันตรงที่มีการเชื่อมโยง (Link) ซึ่งเราสามารถคลิกไปที่หน้าใดของโฮมเพจก็ได้
2. โฮมเพจ คือ
ตอบโฮมเพจ คือคาที่ใช้เรียกหน้าแรกของเว็บไซต์ ซึ่งประกอบไปด้วยเมนูต่างๆและเรื่องราวต่างๆ
มากมายคล้ายกับหน้าปกนิตยสารบ้านเรา ดังนั้นหากเราออกแบบหน้าโฮมเพจให้สวยงามและน่าสนใจ
โอกาสที่ผู้ชมจะแวะเข้ามาเยี่ยมเยียนโฮมเพจของเราก็จะยิ่งมากตามไปด้วย
3.เว็บไซต์ คือ
ตอบเว็บไซต์ คือ คาที่ใช้เรียกกลุ่มของเว็บเพจ ( ดังนั้นภายในเว็บไซต์จะประกอบไปด้วยโฮมเพจและ
เว็บเพจ ) โดยเรามักใช้เรียกเว็บที่มีขนาดใหญ่และมีการจดทะเบียนชื่อเว็บไซต์นั้นๆไว้แล้ว (Domain
Name) เช่น http://www.geocities.com , http://www.sanook.com ,
http://www.yahoo.com เป็นต้น

11. 11
เฉลย/ตัวอย่างแนวคาตอบ ใบสั่งงานที่ 1 (Job Sheet)
สาระการเรียนรู้การงานอาชีพและเทคโนโลยี
รายวิชาการเขียนเว็บเพจด้วยภาษา HTMLรหัส ง20244
หน่วยการเรียนรู้เรื่อง
เว็บเพจสวยด้วยมือเรา
....../...../......
ชื่องาน : ความรู้เรื่อง เว็บเพจภาษา HTML
ชื่อ ......................................................................ชั้น.................เลขที่.............กลุ่มที่...............
จุดประสงค์การเรียนรู้
นาเสนอความรู้เบื้องต้นเกี่ยวกับเว็บเพจ
วัสดุ/สิ่งที่ต้องเตรียม
1.เครื่องคอมพิวเตอร์
2. เครื่องเครื่องโปรแจคเตอร์
คาสั่ง : ให้นักเรียน
1. แบ่งกลุ่มๆ ละ 2-3 คน
2. ศึกษาจากเอกสารประกอบการ
เรียนรู้เรื่อง ความรู้เบื้องต้น
เกี่ยวกับเว็บเพจ
3. สรุปข้อมูลความรู้เกี่ยวกับภาษา
HTML โดยให้แสดงข้อมูลด้วย
โปรแกรม Power Point
4. นาเสนอผลงานด้วย โปรแกรม
Power Point
5. ใช้เวลาฝึกปฏิบัติไม่ควรเกิน 1
ชั่วโมง
6. บันทึกไฟล์ Power Point ชื่อ
ความรู้เกี่ยวกับภาษา HTML
ข้อควรระวัง : ในการจัดทาข้อมูลการ
นาเสนอด้วยPower Point ควรเลือกสีพื้น
,สีตัวอักษรและขนาดตัวอักษรที่อ่านง่าย

12. 12
ตัวอย่างผลงาน POWER POINT

13. 13

14. 14
สรุปขั้นตอนการจัดทางาน ปัญหา/อุปสรรค
1. ศึกษาข้อมูลความรู้เบื้องต้นภาษา HTML 1. ไฟดับ
2. แบ่งเนื้อหาความรู้ 2. อินเทอร์เน็ตเสีย
3. จัดทา POWER POINT
4. ตกแต่งงานให้สวยงาม
5. บันทึกงาน

15. 15
เฉลย แบบทดสอบย่อย ครั้งที่ 1
เรื่อง ความรู้เบื้องต้นเกี่ยวกับเว็บเพจ (Web Page)
ข้อที่ คาตอบ
1 3
2 2
3 1
4 4
5 4