เล่มที่ 1 ความรู้พื้นฐานเกี่ยวกับเว็บไซต์

หนงั สืออิเล็กทรอนิกส์
การออกแบบและเขียนเวบ็ ไซตด์ ้วยภาษา HTML

รราายยววชิชิ าา วว3333228811 กกาารรสสรร้้าางงเเวว็็บบไไซซตตด์ด์ ว้ว้ ยยภภาาษษาา HHTTMMLL รระะดดบับั ชชั้นั้นมมธัธั ยยมมศศึกึกษษาาปปีทที ่ีี่ 66

นางธีรารตั น์ สิทธริ ักษ์
โรงเรยี นห้วยยอด อาเภอหว้ ยยอด จงั หวดั ตรัง
สานกั งานเขตพน้ื ทีก่ ารศึกษามธั ยมศึกษา เขต 13

คานา

หนังสืออิเล็กทรอนิกส์การออกแบบและเขียนเว็บไซต์ด้วยภาษา HTML รายวิชา
ว33281 การสร้างเว็บไซต์ด้วยภาษา HTML ระดับชั้นมัธยมศึกษาปีท่ี 6 กลุ่มสาระการเรียนรู้
วิทยาศาสตร์และเทคโนโลยี จัดทาข้ึนเพ่ือใช้ประกอบการจัดกิจกรรมการเรียนการสอนโดยมุ่งเน้น
ให้นักเรียนสามารถใช้คาสงั่ ภาษา HTML ในการเขียนเว็บเพจและใช้ฝึกทักษะเพ่ิมเติมนอกเวลาเรียน
ปกติ นักเรียนจะได้เรียนรู้ผ่านการปฏิบัติจริงอย่างเป็นข้ันตอนนาไปสู่การยกระดับผลสัมฤทธ์ิ
ทางการเรียน กจิ กรรมในหนังสืออเิ ล็กทรอนกิ ส์จะลาดับเนื้อหาต่อเน่ืองตั้งแต่เริ่มต้นจนสามารถสร้าง
เว็บเพจได้ ประกอบด้วยหนังสอื อเิ ล็กทรอนกิ ส์ จานวน 8 เล่ม ดงั น้ี

เลม่ ที่ 1 ความรู้พ้นื ฐานเกยี่ วกบั เวบ็ ไซต์
เล่มที่ 2 เรมิ่ ต้นกบั ภาษา HTML
เลม่ ที่ 3 การจดั รปู แบบเอกสาร
เลม่ ท่ี 4 การจดั การขอ้ ความ
เลม่ ท่ี 5 การกาหนดลาดับรายการ
เลม่ ที่ 6 การจัดการกับรปู ภาพ
เล่มท่ี 7 การสรา้ งตาราง
เล่มที่ 8 การเช่อื มโยงเวบ็ เพจ

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

ธรี ารตั น์ สิทธิรกั ษ์

คาชีแ้ จง

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

1. คาช้แี จง
2. แผนผงั แสดงข้ันตอนการเรียนโดยใช้หนงั สอื อเิ ล็กทรอนกิ ส์
3. คาแนะนาสาหรับครู
4. คาแนะนาสาหรบั นักเรยี น
5. สาระการเรียนรู้/จดุ ประสงค์การเรยี นรู้
6. แบบทดสอบก่อนเรียน
7. ใบความรู้
8. แบบทดสอบหลงั เรียน
9. บรรณานุกรม
10. ภาคผนวก

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

แผนผงั แสดงขน้ั ตอนการเรียนโดยใช้หนังสอื อเิ ล็กทรอนกิ ส์

ศกึ ษาคาช้แี จงและคาแนะนาการใชห้ นงั สืออเิ ลก็ ทรอนกิ ส์

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

ทดสอบก่อนเรยี น

ปฏิบัตกิ จิ กรรมการเรียนการสอนโดยใช้
หนงั สอื อิเล็กทรอนิกสก์ ารออกแบบและเขยี นเว็บไซต์

ด้วยภาษา HTML

ทดสอบหลังเรียน ไมผ่ ่านการประเมิน

ผ่านการประเมิน
ศกึ ษาหนังสอื อเิ ลก็ ทรอนกิ ส์เลม่ ตอ่ ไป

คาแนะนาสาหรบั ครู

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

1. ขน้ั เตรียมการสอน ครูผสู้ อนตอ้ งศึกษารายละเอียด ดังนี้
1.1 ศึกษาแผนการจัดการเรียนรู้และหนังสืออิเล็กทรอนิกส์อย่างละเอียด

จนเขา้ ใจเป็นอยา่ งดี
1.2 ตรวจสอบหนังสืออิเล็กทรอนิกส์ สื่อท่ีใช้ประกอบการสอน เคร่ืองมือวัด/

ประเมนิ ผล เครื่องคอมพวิ เตอร์และอปุ กรณ์ตอ่ พว่ งใหอ้ ยู่ในสภาพท่ีพร้อมใช้งาน
1.3 ครูผู้สอนควรเตรียมความรู้ในเน้ือหาและควรมีพื้นฐานในการเขียนโปรแกรม

ภาษา HTML
2. ขน้ั ดาเนนิ กิจกรรมการเรยี นการสอน
2.1 ครูชี้แจงเกี่ยวกับลาดับขั้นตอนการปฏิบัติกิจกรรมการเรียนการสอนโดยใช้

หนังสืออิเล็กทรอนิกส์การออกแบบและเขียนเว็บไซต์ด้วยภาษา HTML การวัดและประเมินผล
บทบาทของนกั เรยี น ใหน้ กั เรียนทราบกอ่ นลงมือปฏิบตั ิ

2.2 ครูให้นักเรียนทาแบบทดสอบก่อนเรียน เพื่อตรวจสอบความรู้พ้ืนฐาน
ของนักเรยี น

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

2.4 เม่ือเสรจ็ สิ้นการปฏิบัติกิจกรรมการเรยี นรู้ ให้นกั เรียนทาแบบทดสอบหลังเรยี น
3. ขนั้ การประเมนิ ผล

3.1 ครูสงั เกตพฤติกรรมขณะปฏิบตั ิกจิ กรรมของนักเรียน คุณลักษณะอันพึงประสงค์
และบนั ทึกผล

3.2 ครูประเมินผลการเรียนระหว่างเรียนจากหนังสืออิเล็กทรอนิกส์ ผลงานที่
เกิดจากการฝึกปฏิบัติ และประเมินผลการเรียนหลังส้ินสุดกิจกรรมการเรียนรู้จากแบบทดสอบ
หลังเรยี น เพอื่ ดูความก้าวหน้าของนกั เรียน

คาแนะนาสาหรบั นกั เรยี น

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

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

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

สาระการเรียนรู้
1. ความหมายและการทางานของอนิ เทอร์เนต็
2. ความรู้พื้นฐานเกยี่ วกบั เวบ็ ไซต์
3. องค์ประกอบและโครงสร้างของเวบ็ ไซต์

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

แบบทดสอบกอ่ นเรยี น
เลม่ ท่ี 1 ความรูพ้ นื้ ฐานเกยี่ วกบั เวบ็ ไซต์

คาช้แี จง : แบบทดสอบฉบบั นี้เป็นแบบทดสอบแบบปรนัย 4 ตวั เลอื ก จานวน 10 ข้อ ใช้เวลา 10 นาที
คาส่งั : ให้นักเรยี นเลือกคาตอบทถี่ ูกทีส่ ุดเพียงคาตอบเดียวแลว้ ทาเครื่องหมาย x ลงในกระดาษคาตอบ

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

2. ข้อใดคือโพรโทคอลที่เป็นมาตรฐานการสื่อสารในระบบอนิ เทอร์เนต็
ก. POP3
ข. FTP
ค. HTTP
ง. TCP/IP

3. ข้อใดคอื หมายเลขประจาเคร่ืองท่ีใชอ้ ้างอิงหรือตดิ ตอ่ กับเครื่องคอมพิวเตอร์อนื่ ๆ
ในเครอื ขา่ ยอนิ เทอรเ์ นต็
ก. DNS
ข. protocol
ค. IP address
ง. Hypertext

4. ขอ้ ใดทาหน้าท่แี ปลงหมายเลขไอพใี หเ้ ปน็ ชือ่ โดเมนทอ่ี ยู่ในรูปของชอ่ื ยอ่ ภาษาองั กฤษเพอ่ื ให้
งา่ ยต่อการจดจา
ก. DNS
ข. protocol
ค. IP address
ง. Hypertext

5. ข้อใดอธบิ ายความหมายของ เวิล์ด ไวด์ เวบ็ ไดถ้ กู ต้องทส่ี ดุ
ก. การให้บรกิ ารข้อมูลแบบไฮเปอร์เท็กซ์ที่ประกอบไปด้วยเอกสารจานวนมากที่มกี ารเช่ือมโยงกัน
ข. การใหบ้ ริการพนื้ ทีส่ าหรบั สร้างและจัดเกบ็ เว็บไซต์
ค. เครอื ข่ายคอมพวิ เตอร์ทีเ่ ชื่อมตอ่ เครอื ขา่ ยยอ่ ยภายใต้มาตรฐานเดียวกันจนกลายเปน็
เครือข่ายขนาดใหญ่
ง. ระเบยี บวิธที ี่ใช้เป็นมาตรฐานการสอ่ื สารในระบบเครอื ข่ายอนิ เทอร์เน็ต

6. ข้อใดคอื โพรโทคอลที่ใช้สาหรบั เวิลด์ ไวด์ เว็บ
ก. FTP
ข. POP3
ค. HTTP
ง. TCP/IP

7. ข้อใดคือโปรแกรมที่ใช้สาหรับเรยี กดูเว็บเพจ
ก. Internet Explorer
ข. Mozilla Firefox
ค. Google Chrome
ง. ถกู ทกุ ขอ้

8. ข้อใดระบอุ งคป์ ระกอบของเว็บไซต์ไดถ้ ูกต้องและครบถ้วนท่สี ดุ
ก. โฮมเพจ เว็บเพจ เวบ็ เบราว์เซอร์
ข. เว็บเพจ เวบ็ ไซต์ เว็บโฮสติง
ค. เว็บเบราว์เซอร์ เวบ็ เซริ ์ฟเวอร์ เว็บไซต์
ง. โฮมเพจ เวบ็ เพจ เวบ็ ไซต์

9. ข้อใดเปน็ การต้ังชอ่ื ไฟล์โฮมเพจท่ีถูกตอ้ ง
ก. web.html
ข. homepage.html
ค. index.html
ง. first.html

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

คะแนนเต็ม 10 คะแนน คะแนนทไ่ี ด้ คือ ................... คะแนน

อินเทอร์เน็ต

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

ความหมายของอนิ เทอรเ์ นต็

อินเทอร์เน็ต (Internet) ย่อมาจากคาว่า “International network” หรือ “Inter Connection
network” ซงึ่ หมายถึง เครอื ข่ายคอมพวิ เตอร์ที่เกดิ ขึ้นจากระบบเครือข่ายคอมพิวเตอร์เล็กๆ รวมกัน
เป็นเครือข่ายขนาดใหญ่สามารถเชื่อมโยงคอมพิวเตอร์เข้าด้วยกันท่ัวโลก เพื่อให้เกิดการส่ือสาร
และการแลกเปล่ียนข้อมูลร่วมกันเป็นเครือข่ายสาธารณะท่ีไม่มีผู้ใดเป็นเจ้าของ การเช่ือมโยงอาศัย
อยู่ภายใต้ระเบยี บวิธใี นการส่ือสารเดียวกนั ทเ่ี รียกว่า โพรโทคอล (protocol)

การทางานของอนิ เทอรเ์ น็ต

การสื่อสารขอ้ มูลดว้ ยอนิ เทอร์เน็ตจะมีโพรโทคอล (Protocol) ซ่งึ เป็นระเบียบวิธีการสื่อสาร
ที่เป็นมาตรฐานของการเช่ือมต่อกาหนดไว้ โพรโทคอลที่ใช้ส่ือสารในระบบอินเทอร์เน็ต คือ
ทซี พี ี/ไอพี (Transmission Control Protocol/Internet Protocol: TCP/IP)

หมายเลขไอพี (IP Address)
เคร่ืองคอมพิวเตอร์ทุกเคร่ืองท่ีเชื่อมต่อเข้ากับเครือข่ายอินเทอร์เน็ตจะต้องมี หมายเลข
ประจาเครื่อง ที่เรียกว่า IP Address เพ่ือเอาไว้อ้างอิงหรือติดต่อกับเคร่ืองคอมพิวเตอร์อื่นๆ
ในเครือข่าย ซึง่ IP ในทีน่ ้กี ค็ ือ Internet Protocol ตวั เดียวกบั ใน TCP/IP นน่ั เอง
หมายเลขไอพี (IP Address) จะเป็นหมายเลขชุดหนึ่งขนาด 32 บิต แบ่งเป็น 4 ส่วน
ส่วนละ 8 บิตเท่าๆ กัน แยกกันด้วยเคร่ืองหมายจุด เช่น 203.113.116.19 ซึ่งเป็นหมายเลขไอพี
ของเวบ็ ไซต์โรงเรียนหว้ ยยอด

ระบบช่ือโดเมน (Domain name system: DNS)
เน่ืองจากการติดต่อสื่อสารกันในระบบอินเทอร์เน็ต จะใช้ IP address ในการอ้างอิงเสมอ
แต่ IP address อยู่ในรูปของชุดตัวเลขซึ่งยากต่อการจดจา จึงมีการกาหนดระบบชื่อโดเมน
(Domain name system: DNS) ทาหนา้ ท่แี ปลงหมายเลขไอพีให้เป็นช่ือโดเมนที่อยู่ในรูปของช่ือ
ยอ่ ภาษาองั กฤษหลายสว่ นค่นั ด้วยเคร่ืองหมายจดุ เชน่

IP Address Domain name

203.113.116.19 www.hy.ac.th

ส่วนประกอบในตาแหน่งสุดท้ายของชื่อโดเมน เรียกว่า โดเมนระดับบนสุด (Top Level
Domain) สามารถแบ่งได้เป็น 2 ลกั ษณะ คือ

1. โดเมน 2 ระดับ คือ การแบ่งตามลักษณะขององค์กร ประกอบด้วย

www . ช่ือโดเมน . ประเภทของโดเมน

เชน่

• www.google.com
• www.facebook.com

ตวั อย่างประเภทของโดเมน 2 ระดับ แบ่งตามลกั ษณะขององค์กร ดงั น้ี

องค์กร องคก์ ร สถาบัน องค์กร องค์กร หนว่ ยงาน
พาณชิ ย์ ของรฐั บาล การศึกษา เอกชน ทใี่ ห้บรกิ าร ทางทหาร
.com ทไี่ ม่หวงั เครอื ข่าย
.gov .edu ผลกาไร
.org .net .mil

2. โดเมน 3 ระดบั คอื การแบ่งตามประเทศทหี่ น่วยงานที่เป็นเจ้าของเคร่ืองคอมพิวเตอร์น้ัน
ตัง้ อยู่ ประกอบด้วย

www . ชื่อโดเมน . ประเภทของโดเมน . ประเทศ

เชน่

• www.google.co.th
• www.moe.go.th

ตวั อย่างประเภทของโดเมน 3 ระดบั แบง่ ตามลกั ษณะขององคก์ ร ดงั น้ี

องค์กร องคก์ ร สถาบนั องคก์ ร องคก์ ร หนว่ ยงาน
พาณชิ ย์ ของรัฐบาล การศกึ ษา เอกชน ที่ให้บรกิ าร ทางทหาร
ที่ไม่หวัง เครอื ขา่ ย
.co .go .ac ผลกาไร
.or .net .mi

ตัวอย่างอักษรยอ่ รหสั ชอ่ื ประเทศ

รหัสชอ่ื ประเทศ ประเทศ รหสั ชอื่ ประเทศ ประเทศ

AU ออสเตรเลยี JP ญ่ีปนุ่
CA แคนาดา NZ นิวซีแลนด์
CN จนี RU รสั เซีย
FR ฝรั่งเศส CH สวติ เซอรแ์ ลนด์
DE เยอรมนี TH ไทย
IN อินเดีย TW ไตห้ วนั
IL อสิ ราเอล UK อังกฤษ
IT อิตาลี US อเมริกา

เช่น .co.fr แทน บรษิ ัทในประเทศฝรั่งเศส

.ac.us แทน สถาบนั การศกึ ษาในประเทศอเมริกา
.or.th แทน องค์กรทไี่ มห่ วงั ผลกาไรในประเทศไทย
.go.cn แทน หน่วยงานของรัฐบาลในประเทศจีน

เวิลด์ไวดเ์ ว็บ

เวิลด์ไวด์เว็บ (World Wide Web) หรือ
เรียกสั้นๆ ว่า เว็บ เป็นการให้บริการข้อมูลแบบ
ไฮเปอร์เท็กซ์ (Hypertext) ทีป่ ระกอบไปด้วยเอกสาร
จานวนมากทมี่ กี ารเชื่อมโยงกัน ซึ่งเปน็ แหล่งของขอ้ มลู
ขนาดใหญ่ท่ีผู้ใช้อินเทอร์เน็ตสามารถเข้าถึงผ่าน
โพรโทคอลที่เรียกว่า เอชทีทีพี (Hypertext Transfer Protocol: HTTP) ซึ่งเป็นข้อกาหนดหรือ
ข้อตกลงในการส่งเว็บเพจท่ีอยู่บนเครื่องบริการ (Server) มาให้เครื่องรับบริการ (Client) ทาให้ผู้ใช้
(User) สามารถท่องไปในเว็บไซต์ที่นาเสนอได้ท้ังภาพ เสียง รวมถึงภาพเคล่ือนไหว การสืบค้น
สารสนเทศในเวลิ ด์ไวดเ์ วบ็ น้ัน จาเปน็ ต้องอาศยั โปรแกรมการเรียกดูเว็บ หรือเว็บเบราว์เซอร์ (Web
browser) ซึ่งเป็นโปรแกรมใชส้ าหรับแสดงเว็บเพจ และสามารถเชื่อมโยงหลายมิติ หรือไฮเปอร์ลิงค์
(Hyperlink) เรียกสั้นๆ ว่า ลิงค์ (Link) เว็บเบราว์เซอร์ช่วยเพ่ิมความน่าสนใจในการใช้งานอินเทอร์เน็ต
นอกเหนือไปจากการสอื่ สารหรือการแลกเปล่ยี นไฟล์ระหว่างเครือข่าย ซ่ึงเช่ือมโยงกันได้จากทุกมุมโลก
ราวกับใยแมงมุม จึงเรียกว่า เวิลด์ไวด์เว็บ (www) หรือเครือข่ายใยแมงมุม ตัวอย่างเว็บเบราว์เซอร์
เช่น

Opera Apple Safari

ภาพท่ี 1-1 ตัวอย่างเวบ็ เบราว์เซอร์

องคป์ ระกอบของเว็บไซต์

เว็บไซต์ (Website) จะสามารถบรหิ ารข้อมลู ในระบบอินเทอรเ์ น็ตได้นนั้ ตอ้ งมอี งค์ประกอบ ดังนี้
1. โฮมเพจ (Home page) คือ คาที่ใช้เรียกเว็บเพจหน้าแรกของเว็บไซต์ เป็นหน้าเว็บ
ที่จะเช่ือมโยงไปยังเว็บเพจทั้งหมดภายในเว็บไซต์นั้นและเชื่อมโยงไปยังเว็บอื่นๆ มีข้อกาหนด
ที่เป็นมาตรฐาน คือ จะต้องมีชื่อไฟล์ว่า index.htm หรือ index.html โฮมเพจจึงเปรียบเสมือน
เปน็ สารบัญและคานาของหนังสอื
2. เว็บเพจ (Web page) คือ หน้าเอกสารที่เขียนขึ้นในรูปแบบภาษา HTML (Hypertext
Markup Language) ซ่ึงสามารถเช่ือมโยงไปยังเอกสารหน้าอื่นได้ โดยเรียกดูผ่านเว็บเบราว์เซอร์
ในเวบ็ ไซตห์ นึ่งจะมีเวบ็ เพจหลายๆ หนา้ เวบ็ เพจจึงเปรยี บเสมือนเปน็ เอกสารแต่ละหน้าของหนงั สอื
3. เว็บไซต์ (Web site) คอื กลุม่ ของเว็บเพจที่มคี วามเก่ียวข้องเชื่อมโยงกัน และอยู่ภายใต้
ช่ือโดเมน (Domain Name) เดียวกัน เช่น ชื่อโดเมนเนมโรงเรียนห้วยยอด คือ www.hy.ac.th
เวบ็ ไซตจ์ ึงเปรียบเสมือนเป็นหนงั สือหน่งึ เลม่

Home page

Website

Web page Web page Web page
.......... .......... .......... .......... .......... ..........
.......... .......... .......... .......... .......... ..........
.......... .......... .......... .......... .......... ..........
.. .. .. .. .. ..
ภาพท่ี 1-2 องคป์ ระกอบของเวบ็ ไซต์

โครงสร้างของเว็บไซต์

การออกแบบโครงสรา้ งเว็บไซต์สามารถทาไดห้ ลายแบบ ข้ึนอยกู่ ับลักษณะของขอ้ มลู และ
กลุม่ เป้าหมายทตี่ อ้ งการนาเสนอ โครงสร้างของเว็บไซตจ์ ะประกอบไปดว้ ย 4 รูปแบบ ดังนี้

1. โครงสร้างแบบเรยี งลาดับ (Sequential Structure)
เป็นโครงสร้างแบบธรรมดา ง่ายต่อการจัดระบบข้อมูล ข้อมูลท่ีนิยมจัดด้วยโครงสร้าง

แบบนี้มักเป็นข้อมูลท่ีมีลักษณะเป็นเรื่องราวตามลาดับ เหมาะสาหรับเว็บไซต์ท่ีมีขนาดเล็ก มีเน้ือหา
ไมซ่ ับซอ้ น ใช้การลงิ ค์ (Link) ไปทลี ะหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการ
ดาเนนิ เรอ่ื งในลักษณะเส้นตรง โดยมปี มุ่ เดินหนา้ -ถอยหลังเปน็ เคร่ืองมือหลกั ในการกาหนดทิศทาง

ขอ้ ดขี องโครงสรา้ งแบบเรียงลาดับ คือ งา่ ยต่อการดแู ลปรบั ปรุงแก้ไข
ข้อเสยี ของโครงสรา้ งแบบเรียงลาดับ คือ ผู้ใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เน้ือหา
ของตนเองได้ ทาใหเ้ สยี เวลาเขา้ สู่เนอ้ื หา

ภาพท่ี 1-3 โครงสรา้ งแบบเรียงลาดับ (Sequential Structure)
2. โครงสร้างแบบลาดับขั้น (Hierarchical Structure)

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

ข้อดีของโครงสร้างแบบลาดับขั้น คือ ง่ายต่อการแยกแยะเนื้อหาของผู้ใช้และการ
จดั ระบบข้อมูล มกี ารแบ่งหมวดหมู่ไวช้ ดั เจน

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

ภาพท่ี 1-4 โครงสรา้ งแบบลาดบั ขั้น (Hierarchical Structure)
3. โครงสรา้ งแบบตาราง (Grid Structure)

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

ข้อดีของโครงสร้างแบบตาราง คือ ทุกเนื้อหาเช่ือมโยงถึงกันได้ เหมาะแก่การแสดงให้
เห็นความสัมพนั ธก์ ันของเน้ือหา

ขอ้ เสียของโครงสร้างแบบตาราง คือ การออกแบบมีความซับซ้อนสูงและต้องระวังอาจ
ทาให้ผใู้ ชห้ ลงเส้นทางการเชอื่ มโยงได้

ภาพท่ี 1-5 โครงสร้างแบบตาราง (Grid Structure)
4. โครงสรา้ งแบบใยแมงมมุ (Web Structure)

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

ข้อดีของโครงสร้างแบบใยแมงมุม คือ ผู้ใช้สามารถใช้ได้ง่าย โดยผู้ใช้สามารถกาหนด
ทศิ ทางการเข้าส่เู นอื้ หาไดด้ ว้ ยตนเอง

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

ภาพที่ 1-6 โครงสรา้ งแบบใยแมงมมุ (Web Structure)

แบบทดสอบหลงั เรยี น
เลม่ ที่ 1 ความรู้พน้ื ฐานเก่ยี วกบั เวบ็ ไซต์

คาช้ีแจง : แบบทดสอบฉบบั นเ้ี ป็นแบบทดสอบแบบปรนยั 4 ตัวเลือก จานวน 10 ข้อ ใชเ้ วลา 10 นาที
คาสั่ง : ให้นักเรยี นเลือกคาตอบท่ีถกู ที่สดุ เพียงคาตอบเดียวแลว้ ทาเคร่อื งหมาย x ลงในกระดาษคาตอบ

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

2. ขอ้ ใดคอื โพรโทคอลท่ีเป็นมาตรฐานการสือ่ สารในระบบอนิ เทอร์เนต็
ก. FTP
ข. TCP/IP
ค. POP3
ง. HTTP

3. ข้อใดคอื หมายเลขประจาเครือ่ งท่ีใชอ้ ้างอิงหรอื ติดต่อกบั เครือ่ งคอมพวิ เตอร์อ่นื ๆ
ในเครือขา่ ยอินเทอรเ์ นต็
ก. IP address
ข. DNS
ค. protocol
ง. Hypertext

4. ข้อใดทาหนา้ ท่แี ปลงหมายเลขไอพใี หเ้ ป็นชื่อโดเมนทีอ่ ยู่ในรูปของช่อื ย่อภาษาอังกฤษเพ่อื ให้
ง่ายต่อการจดจา
ก. protocol
ข. Hypertext
ค. DNS
ง. IP address

5. ขอ้ ใดอธบิ ายความหมายของ เวิลด์ ไวด์ เวบ็ ได้ถกู ต้องท่ีสุด
ก. เครือขา่ ยคอมพิวเตอร์ท่เี ชือ่ มต่อเครือขา่ ยย่อยภายใตม้ าตรฐานเดยี วกันจนกลายเป็น
เครือขา่ ยขนาดใหญ่
ข. ระเบยี บวธิ ีท่ใี ชเ้ ป็นมาตรฐานการสื่อสารในระบบเครือข่ายอินเทอรเ์ นต็
ค. การให้บริการขอ้ มูลแบบไฮเปอร์เท็กซ์ท่ีประกอบไปด้วยเอกสารจานวนมากท่ีมกี ารเช่ือมโยงกนั
ง. การใหบ้ รกิ ารพืน้ ทีส่ าหรบั สรา้ งและจัดเก็บเว็บไซต์

6. ขอ้ ใดคือโพรโทคอลท่ีใช้สาหรบั เวิลด์ ไวด์ เว็บ
ก. HTTP
ข. FTP
ค. TCP/IP
ง. POP3

7. ขอ้ ใดคือโปรแกรมที่ใช้สาหรบั เรยี กดูเว็บเพจ
ก. Google Chrome
ข. Internet Explorer
ค. Mozilla Firefox
ง. ถกู ทุกขอ้

8. ขอ้ ใดระบอุ งค์ประกอบของเวบ็ ไซต์ได้ถกู ต้องและครบถ้วนท่สี ดุ
ก. โฮมเพจ เวบ็ เพจ เว็บไซต์
ข. เว็บเพจ เวบ็ ไซต์ เว็บโฮสตงิ
ค. โฮมเพจ เวบ็ เพจ เวบ็ เบราว์เซอร์
ง. เวบ็ เบราว์เซอร์ เว็บเซิร์ฟเวอร์ เวบ็ ไซต์

9. ขอ้ ใดเป็นการตัง้ ช่อื ไฟลโ์ ฮมเพจท่ีถกู ต้อง
ก. first.html
ข. index.html
ค. homepage.html
ง. web.html

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

คะแนนเต็ม 10 คะแนน คะแนนท่ไี ด้ คอื ................... คะแนน

บรรณานกุ รม

กระทรวงศกึ ษาธกิ าร. (2551). หลักสูตรแกนกลางการศกึ ษาขน้ั พ้ืนฐาน พทุ ธศกั ราช 2551.
กรงุ เทพมหานคร: โรงพิมพ์ชมุ นุมสหกรณก์ ารเกษตรแหง่ ประเทศไทย จากัด.

กระทรวงศึกษาธกิ าร, สานกั วิชาการและมาตรฐานการศึกษา, สานักงานคณะกรรมการการศกึ ษา
ขั้นพื้นฐาน. (2553). ชุดฝกึ อบรมการวัดและประเมนิ ผลการเรยี นรู้ หลักสตู รแกนกลาง
การศกึ ษาขนั้ พ้ืนฐาน พุทธศักราช 2551. กรงุ เทพมหานคร : โรงพิมพ์ชุมนมุ สหกรณ์
การเกษตรแหง่ ประเทศไทย จากัด.

ชัยมงคล เทพวงษ์. (2557). โครงสรา้ งเวบ็ ไซต์. ค้นเม่อื 10 พฤศจิกายน 2558, จาก
http://www.chaiwbi.com/0drem/unit02/2203.html

มณโี ชติ สมานไทย. (2548). ภาษา HTML ฉบับผู้เริม่ ตน้ . นนทบุร:ี ไอดีซฯี .
มนตรี โคตรคันทา. อินเทอร์เนต็ และการสอื่ สาร. คน้ เม่อื 12 พฤศจิกายน 2558, จาก

http://www.krumontree.com/html/documents/lesson_01.pdf
สถาบนั ส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลย.ี (2555). หนงั สือเรียนรายวิชาพ้ืนฐาน เทคโนโลยี

สารสนเทศและการส่ือสาร ชัน้ มัธยมศกึ ษาปที ี่ 4-6 กลมุ่ สาระการเรียนรู้การงานอาชพี และ
เทคโนโลย.ี กรุงเทพมหานคร: โรงพมิ พ์ สกสค. ลาดพร้าว.

ภาคผนวก

กระดาษคาตอบแบบทดสอบกอ่ นเรยี น
เล่มที่ 1 ความร้พู น้ื ฐานเกย่ี วกบั เว็บไซต์

ช่อื -สกุล ............................................................. ชน้ั .................. เลขท่ี ...........

คาชีแ้ จง : แบบทดสอบฉบับนเ้ี ป็นแบบทดสอบแบบปรนัย 4 ตัวเลอื ก จานวน 10 ขอ้ ใช้เวลา 10 นาที
คาส่งั : ให้นกั เรียนเลอื กคาตอบทีถ่ ูกท่ีสุดเพียงคาตอบเดยี วแลว้ ทาเครอ่ื งหมาย x ลงในกระดาษคาตอบ

ขอ้ ท่ี ก ข ค ง
1
2
3
4
5
6
7
8
9
10

แบบทดสอบกอ่ นเรยี น คะแนนเตม็ 10 คะแนน คะแนนทไ่ี ด้ คือ __________ คะแนน

กระดาษคาตอบแบบทดสอบหลงั เรยี น
เลม่ ท่ี 1 ความร้พู นื้ ฐานเกย่ี วกับเว็บไซต์

ชื่อ-สกุล ............................................................. ชน้ั .................. เลขท่ี ...........

คาชี้แจง : แบบทดสอบฉบบั น้ีเปน็ แบบทดสอบแบบปรนยั 4 ตวั เลอื ก จานวน 10 ขอ้ ใช้เวลา 10 นาที
คาสัง่ : ให้นักเรียนเลอื กคาตอบท่ถี กู ที่สดุ เพียงคาตอบเดยี วแลว้ ทาเครอื่ งหมาย x ลงในกระดาษคาตอบ

ข้อท่ี ก ข ค ง
1
2
3
4
5
6
7
8
9
10

แบบทดสอบหลังเรียน คะแนนเตม็ 10 คะแนน คะแนนทไ่ี ด้ คือ __________ คะแนน