เล่มที่ 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 ความรพู้ ้นื ฐานเกี่ยวกับเว็บไซต์

เฉลยแบบทดสอบก่อนเรียน เฉลยแบบทดสอบหลงั เรยี น
ข้อที่ เฉลย ข้อท่ี เฉลย
1ข 1ง
2ง 2ข
3ค 3ก
4ก 4ค
5ก 5ค
6ค 6ก
7ง 7ง
8ง 8ก
9ค 9ข
10 ข 10 ง

กระดาษคาตอบแบบทดสอบกอ่ นเรยี น
เล่มที่ 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 คะแนน คะแนนทไ่ี ด้ คือ __________ คะแนน