การสร้างเว็บไซต์ 01

ก

คำนำ

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

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

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

ภาคิน ลุนลี

ข

สารบญั

หนา้
คำนำ .................................................................................................................................. ก
สารบญั ............................................................................................................................... ข
คำชแ้ี จงการใช้ชุดกจิ กรรมการเรียนรู้................................................................................... ค
สาระการเรยี นรู้ มาตรฐานและตัวช้วี ดั ................................................................................. จ
จุดประสงคก์ ารเรียนรู้สตู่ วั ช้วี ดั .............................................................................................. จ
แบบทดสอบก่อนเรียน .......................................................................................................... 1
ใบความร้ทู ่ี 1 มารู้จกั ภาษา HTML กันเถอะ........................................................................ 3
กจิ กรรมที่ 1 มารจู้ กั ภาษา HTML กนั เถอะ......................................................................... 11
ใบความรูท้ ่ี 2 ความหมายและโครงสรา้ งภาษา HTML......................................................... 14
กจิ กรรมที่ 2 ความหมายและโครงสร้างภาษา HTML.......................................................... 18
ใบความร้ทู ่ี 3 เคร่อื งมือที่ใช้เขี่ยนเว็บไซตภ์ าษา HTML........................................................ 20
กิจกรรมท่ี 3 เครอ่ื งมือทใี่ ช้เขย่ี นเวบ็ ไซตภ์ าษา HTML......................................................... 32
แบบทดสอบหลังเรียน......................................................................................................... 34
บรรณานกุ รม ...................................................................................................................... 36
ภาคผนวก........................................................................................................................... 37

ค

คำชแ้ี จงการใช้ชุดการสอน เร่อื ง การการเขียนเว็บเพจดว้ ยภาษา HTML
สำหรับนักเรยี นชัน้ มัธยมศกึ ษาปีที่ 4 (สำหรับครู)

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

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

ง

คำชีแ้ จงการใช้ชุดการสอน เร่ือง การการเขยี นเว็บเพจดว้ ยภาษา HTML
สำหรบั นกั เรยี นชัน้ มัธยมศึกษาปีท่ี 4 (สำหรบั นกั เรยี น)

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

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

จ

มาตรฐานการเรียนรู้

สาระที่ 3 เทคโนโลยีสารสนเทศและการสอ่ื สาร
มาตรฐาน ง 3.1 เข้าใจเห็นคุณค่าและใช้กระบวนการเทคโนโลยีสารสนเทศ ในการสืบค้นข้อมูล
การเรียนรู้การสื่อสารการแก้ปัญหาการทำงาน และอาชีพอย่างมีประสิทธิภาพประสิทธิผลและ
คณุ ธรรม

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

1. ด้านความรู้ (K)
1.1 อธบิ ายความหมายของ คำศัพท์เกย่ี วกับอนิ เตอรเ์ นต็ ได้
1.2 อธบิ ายความหมายของHTML ได้
1.3 บอกชอ่ื โปรแกรมท่ีใช้สำหรบั เขียนเว็บไซต์ได้
1.4 อธบิ ายโครงสร้างของภาษาHTML ได้

2. ดา้ นทักษะ / กระบวนการ (P)
2.1 เขียนคำสัง่ เบือ้ งต้นในการเขยี นโปรแกรมภาษาHTMLได้
2.2 ใชง้ านโปรแกรมสำหรับเขียนเวบ็ ดว้ ยภาษาHTML ได้
2.3 สรา้ งเอกสาร HTML อย่างงา่ ยได้

3. ดา้ นคุณธรรม จริยธรรม และค่านิยม (A)
3.1 นกั เรยี นสามารถทำงานดว้ ยความรับผดิ ชอบ ใฝ่เรียนรู้ ตงั้ ใจปฏบิ ัตงิ าน และมรี ะเบียบ

1

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

คำชี้แจง แบบทดสอบก่อนเรียนนี้ เปน็ แบบทดสอบแบบปรนัย 4 ตัวเลือก จำนวน 10 ขอ้
คำสั่ง คำส่ัง ให้ผู้เรียนเลอื กคาตอบทถ่ี ูกตอ้ งที่สดุ เพยี งข้อเดยี ว และทาเคร่อื งหมาย X ลงบน
กระดาษคาตอบ
1. HTML ย่อมาจากภาษาองั กฤษว่าอะไร

ก. Homepage Text Markup Language
ข. Home Text Markup Language
ค. Hyper Text Markup Language
ง. Hyper Text Manual Language

2. ขอ้ ใดกล่าวไม่ถูกตอ้ งเกย่ี วกบั ภาษา HTML
ก. เป็นภาษาหลกั ท่ีใช้ในการสร้างเว็บเพจ
ข. คำส่ังจะอยใู่ นเครอ่ื งหมาย <และ>
ค. คำส่ังสว่ นใหญจ่ ะแบ่งเป็น 2 สว่ น คอื แทก็ เปดิ และแทก็ ปดิ
ง. ในแทบ็ ปิดจะต้องมเี ครอื่ งหมาย \

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

4. ข้อใดเป็นรปู แบบของแทก็ ในภาษาHTML
ก. <แท็ก,ข้อความ></แทก็ >
ข. <แทก็ >ข้อความ</แท็ก>
ค. <แท็ก>ขอ้ ความ<\แท็ก>
ง. <แท็ก,ข้อความ><\แท็ก>

5. โปรแกรมใดท่ใี ช้ในการเขียนคำส่ังภาษาHTML
ก. Dos
ข. Ms-Word
ค. Notepad
ง. Internet Explorer

2

6. ข้อใดคือสว่ นท่ีใสเ่ น้ือหาของเวบ็ เพจที่จะไปแสดงผลท่เี ว็บบราวเซอร์
ก. <html>...</html>
ข. <head>...</head>
ค. <body>...</body>
ง. <title>...</title>

7. แทก็ <title>...</title> เป็นแท็กทีใ่ ช้อยภู่ ายในแทก็ ข้อใด
ก. <html>...</html>
ข. <head>...</head>
ค. <body>...</body>
ง. <h2>...</h2>

8. ในการตงั้ ช่ือไฟลเ์ วบ็ เพจ สามารถกำหนดส่วนขยายหรือ นามสกลุ ไฟล์ว่าอยา่ งไร
ก. .html
ข. .xml
ค. .htm
ง.ถกู ทัง้ ข้อ ก และ ค

9. โครงสร้างของเอกสารHTML น้นั ประกอบไปดว้ ย 2 สว่ นคอื ขอ้ ใด
ก. สว่ นหวั เอกสารและส่วนคำสั่ง
ข. ส่วนเนอ้ื หาและส่วนคำสั่งของเอกสาร
ค. ส่วนหัวเอกสารและส่วนเนอ้ื หา
ง. ส่วนคำสง่ั และสว่ นประมวลผล

10. ข้อใดกล่าวไม่ถูกต้องเก่ยี วกบั แท็ก (Tag)
ก.แทก็ ปดิ มีลกั ษณะดงั นี้ คือ <\head>
ข. แทก็ <br> ไมต่ อ้ งมีแทก็ ปิด
ค. แทก็ ขึน้ ต้นดว้ ย <
ง. แทก็ จะไมม่ ีแอตทรบิ ิวต์ หรอื ไมม่ ีกไ็ ด้

3

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

คำศัพทพ์ น้ื ฐานเกีย่ วกบั การสรา้ งเวบ็ ไซต์

อนิ เตอรเ์ น็ต (Internet) คือ อะไร
อินเตอร์เน็ต (Internet) เป็นเครือข่ายคอมพวิ เตอร์ที่ใหญ่ที่สุดในโลกซ่ึงรวมเอาเครือข่าย

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

เวลิ ์ดไวด์เว็บWorld( Wide Web) คอื อะไร?
เวิลด์ไวด์เว็บ (World Wide Web) หรือเรียกสั้นๆ ว่าเว็บ เป็นการให้บริการข้อมูลแบบ

ไฮเปอร์เท็กซ์ (hypertext) ที่ประกอบไปด้วยเอกสารจำนวนมากที่มีการเชื่อมโยงกัน ซึ่งเป็นแห
ของข้อมูลขนาดใหญ่ที่ผู้ใช้อินเทอร์เน็ตสามารถเข้าถึงผ่านโพรโทคอลที่เรียกว่า เอชทีทีพี
(Hypertext Transfer Protocol: HTTP) เวลิ ดไ์ วดเ์ ว็บ (World Wide Web) เป็นอินเตอรเ์ น็ต
ชนิดหนึ่งที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ (Text) ภาพ
(Graphic) เสียง Sound)( และ ภาพเคลื่อนไหวMovie)( เป็นต้น ผู้ใช้ทั่วไปสามารถเข้าไปในเว็บ
ไดง้ ่าย และจะได้รับขอ้ มลู ครบถว้ นปัจจุบัน ถ้าพดู ถงึ อินเตอรเ์ น็ต คนทวั่ ไปจะเขา้ ใจว่ ท้งั ท่ีจริงแล้ว
เวบ็ เป็นส่วนหนงึ่ ของอินเตอรเ์ น็ตเทา่ น้ัน5

เวบ็ ไซต์ (Website) คืออะไร?
เว็บไซต์(Website) เป็นกลุ่มของเว็บเพจที่มีความเกี่ยวข้องกัน และอยู่ภายใต้ชื่อโดเมน

เป็นแหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ของแต่ละ
บริษัทหรือหน่วยงานโดยเรียกเอกสารแต่ละหน้าของเว็บไซต์ว่า เว็บเพจ (Web Page) และเรียก
เว็บหน้าแรกของแต่ละเว็บไซต์ว่า โฮมเพจ (Home Page) อาจกล่าวได้ว่า เว็บไซต์ก็คือ เว็บเพจ
อยา่ งนอ้ ยสองหน้าที่มลี ิงก์ (Links) ถึงกนั หรอื เปรียบไดก้ บั หนังสือหนงึ่ เล่ม

4

เว็บเพจ Webpage)( คืออะไร?
เว็บเพจ (Webpage) เป็นหน้าเอกสารที่เขียนขึ้นในรูปแบบภาษาเอชทีเอ็มแอล

(Hypertex Markup Language: HTML) ซึ่งสามารถเชื่อมโยงไปยงั เอกสารหน้าอืน่ ได้ โดยเรียกดู
ผา่ นเว็บเบราว์เซอร์และเปน็ เอกสารทใ่ี ชเ้ ผยแพรข่ อ้ มลู ข่าวสารซึง่ ประกอบด้วยขอ้ ความ ภาพ เสียง
ภาพยนต์ กราฟิก และมัลติมีเดีย ผ่านทางเครือข่ายอินเทอร์เน็ต เว็บเพจจะถูกนำมาใช้ในการ
ประชาสัมพันธ์ และนำเสนอข้อมูลความรู้ต่าง ๆ จึงส่งผลทำให้แต่ละเว็บเพจมีความแตกต่างตาม
วัตถุประสงค์ของการนำไปใช้งาน ซ่งึ อาจเปรียบเว็บเพจไดก้ ับหนา้ หนงั สือแตล่ ะหนา้

โฮมเพจ (Homepage) คืออะไร?
โฮมเพจ (Homepage) คือ คำที่ใช้เรียกหน้าแรกของเว็บไซต์เปน็ ทางเข้าหลกั ของเว็บไซต์

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

เวบ็ เบราวเ์ ซอร์ (Web browser) อะไร
เว็บเบราว์เซอร์ (Web browser) เป็นโปรแกรมใช้สำหรับการแสดงเว็บเพจ และสามารถ

เชื่อมโยงไปยังส่วนอื่นในเว็บเพจเดียวกันหรือเว็บเพจอื่นผ่านการเชื่อมโยงหลายมิติหรือไฮเปอร์
ลิงค์ (hyperlink) เรียกสั้นๆว่า ลิงค์ (link) เว็บเบราว์เซอร์ช่วยเพิ่มความน่าสนใจในการใช้งาน
อินเทอร์เน็ต นอกเหนือไปจากการสื่อสารหรือการแลกเปลี่ยนไฟล์ระหว่างเครือข่าย ตัวอย่าง
เบราว์เซอร์ เช่น Mozilla Firefox, Microsoft Internet Explorer, Apple Safari, Google
Chrome และ Opera

เวบ็ เซริ ์ฟเวอร์ (Webserver) คอื อะไร?
เว็บเซิร์ฟเวอร์ (Webserver) เป็นเครื่องคอมพิวเตอรท์ ี่ให้บริการเว็บเพ็จ เมื่อผู้ใช้เวบ็ เพจ

ผ่านเว็บเบราวเ์ ซอร์ โดยใช้ยูอารแ์ อล (uniformResource Location: URL) ระบุตำแหน่งของเว็บ
เพจ เว็บเซิรฟ์ เวอร์จะส่งเวบ็ เพจที่คน้ หาได้กลบั ไปแสดงผลผ่านเว็บเบราว์เซอร์ ของผู้ใช้

เวบ็ โฮสติง (Web Hosting) คอื อะไร?
เว็บโฮสติง (Web Hosting) เป็นการให้บริการพื้นที่สำหรับสร้าง และจัดเก็บเว็บไซต์

หนว่ ยงาน หรอื บคุ คลทว่ั ไป เพ่ือให้บุคคลอืน่ เขา้ ถงึ ได้ผ่านอินเทอร์เนต็

URL คอื อะไร?
URL (Uniform Resource Locator) คือ แหล่งที่อยู่ของเว็บไซต์ใดๆ เพราะฉะนั้นเรา

สามารถ เข้าถึง website หน ึ่งได้ โดย ก ารพิมพ์ URL เช่น URL ขอ ง Google คือ
http://www.google.com

5

ไคลเอนต์– เซริ ์ฟเวอร์ Client( – Server) คืออะไร?
ในการติดต่อสื่อสารบนเครือข่ายอินเทอร์เน็ตที่คอมพิวเตอ ร์ทั่วโลกเชื่อมโยงถึงกันนั้น

จะติดต่อสื่อสารอยู่ 2 แบบแบบส่งข้อมูลและรับข้อมูล โดยเครื่องคอมพิวเตอร์ที่ทำการส่งข้อมูล
เรยี กวา่ เครอื่ งให้บรกิ าร (Server) และเครอ่ื งคอมพวิ เตอร์ท่ีรับขอ้ มูล โดยมักจะเรียกวา่ เครื่องรับ
บริการ (Client)

เลขที่อยไู่ อพี (IP Address)
IP Address ยอ่ มาจากคำเต็มวา่ Internet Protocol Address คือหมายเลขประจำเคร่ือง

คอมพิวเตอร์แต่ละเครื่องในระบบเครือข่ายที่ใช้โปรโตคอลแบบTCP/IP ซึ่งประกอบด้วยตัวเลข 4
ชุด มีเคร่อื งหมายจุดขั้นระหว่างชุด ตวั อยา่ งIP Address 192.168.0.1 หรอื 192.162.0.2 เป็นต้น
การกำหนดหมายเลขประจำเครอ่ื งทเ่ี ราเรียกวา่ IP Address กำหนดขึ้นเพื่อไมใ่ หเ้ กิดความสบั สน
และซ้ำกัน จึงได้มีการก่อต้ังองค์กรเพื่อแจกจ่าย IP Address โดยเฉพาะชื่อองค์กรว่า InterNIC
(International Network Information Center) อยู่ที่ประเทศสหรัฐอเมริกา การแจกจ่ายน้ัน
ทาง InterNIC จะแจกจ่ายเฉพาะNetwork Address ให้แต่ละเครือข่าย ส่วนลูกข่ายของเครื่อง
ทางเครือข่ายนั้นก็จะเป็นผู้แจกจ่ายอีกทอดหนึ่ง ดังนั้นพอสรุป IP Address จะได้ว่าระกอบด้วย
ตวั เลข 2 ส่วน คือ Network Address และ Computer Address

ระบบชื่อโดเมน
ชื่อโดเมน (Domain Name) ความหมายโดยทั่วไป คือ ชื่อเว็บไซต์ ที่ตั้งขึ้นเพื่อให้ง่ายตอ่

การจดจำและการนำไปใช้งาน เนื่องจากการจดจำหมายเลข IP ถึง 16 หลัก ทาให้ยุ่งยาก และไม่
สามารถจำไดเ้ วลาทอ่ งไปในระบบอินเทอร์เนต็

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

หลักทใ่ี ช้ในการต้งั ช่ือ Domainname
1. ความยาวของชือ่ Domain ต้งั ไดไ้ มเ่ กนิ 63 ตัวอักษร
2. สามารถใชต้ ัวอกั ษรภาษาองั กฤษผสมกับตัวเลข หรอื เครอ่ื งหมายขดี (-) ได้
3. ตัวอกั ษรภาษาองั กฤษ ตัวเลก็ หรือตวั ใหญ่ ถอื วา่ เหมือนกนั
4. ห้ามใชเ้ คร่อื งหมายขีด (-) นำหนา้ ช่ือ Domain name แตส่ ามารถใชใ้ นระหว่างคำได้
5. ห้ามเว้นวรรคในชื่อ Domain การตั้งชื่อ Domain ควรสื่อ ถึงความหมาย ของเว็บไซต์เราให้
มากทีส่ ดุ เนื่องจากมีผลตอ่ Search Engine (SEO)

6

ตัวอยา่ งชื่อโดเมนระดับบนสุด

โดเมนระดับบนสุด ยอ่ มาจาก ความหมาย
เปน็ เครอื ข่ายในโครงการ Advanced
.arpa Arpanet
Research Project Agencies
.com commercial เปน็ เครือขา่ ยขององคก์ รเอกชน

.gov Government เปน็ เครือข่ายของหนว่ ยงานภาครัฐบาล
agency
เปน็ เครอื ข่ายของหนว่ ยงานการศกึ ษา
.edu educational หรือมหาวทิ ยาลัย

United เป็นเครือข่ายของหน่วยงานทหาร
.mil States
เปน็ Network operator หรอื บรษิ ัท
Military providerต่าง ๆ

.net network เป็นเครือขา่ ยองคก์ รท่ีไม่หวังผลกาไร
เปน็ เครือข่ายองค์กร บรษิ ัท หา้ ง
.org organization หุ้นสว่ น คลา้ ยกับ.com
เปน็ เครือขา่ ยขอ้ มูลสารสนเทศ
.biz business
เป็นเครือขา่ ยสาหรับองคก์ รนานาชาติ
.info information

.int international
organizations

7

ตางรางแสดง รายชอื่ Domain Name ในประเทศไทย

Domain Domain ย่อมาจาก ความหมาย
สากล ในไทย
.com .co.th Commerce of องค์กรธรุ กจิ ภาคเอกชนในประเทศไทย
Thailand หนว่ ยงานภาครัฐบาลของประเทศไทย
.gov .go.th
.edu .ac.th Government of สถาบนั การศึกษาของประเทศไทย
.mil .mi.th Thailand หน่วยงานทางการทหารของประเทศไทย
.org .or.th องคก์ รทีไ่ มห่ วังผลกาไรในประเทศไทย
.net .net.th Academic of
.int .in.th Thailand หน่วยงานด้านระบบเครอื ข่ายในไทย
Military of สาหรบั บคุ คลทั่ว ๆ ไปในประเทศไทย
Thailand

Organization of
Thailand
Network of
Thailand

Individual in
Thailand

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

สำเร็จรปู ทช่ี ว่ ยสร้างเว็บไซต์ได้อยา่ งง่าย แคค่ ลิก ลาก วางเพจออกมาเลอื กก็ทำให้เว็บ สวยงามได้
แถมยังมเี ครอ่ื งมือที่ชว่ ยจดั วางหน้าเว็บ แทรกลูกเล่น หรอื ภาพเคลอื่ นไหว โดย โปรแกรมท่ีใช้สรา้ ง
เวบ็ ไซต์ Macromedia เชน่ Dreamweaver, Microsoft FrontPage เป็นตน้ ซ่งึ โปรแกรมเหล่านี้
เป็นโปรแกรมประเภท What You See Is What You Get (WYSIWYG) คือ จัดวางอย่างไรจะ
ปรากฏรปู แบบอย่างนัน้ โปรแกรมจะทากรสรา้ งโคด้ HTML ให้อัตโนมัติ

การสร้างเว็บด้วยภาษา HTML สามารถใช้โปรแกรม Text Editor ทั่วไป เช่น โปรแกรม
Notepad ทม่ี าพร้อมกับWindows หรอื โปรแกรม Edit Plus เป็นต้น

8

หลักในการสรา้ งเวบ็ เพจ
เว็บเพจคือหนา้ เอกสารแต่ละหน้าของเวบ็ ไซต์ สรุปหลกั การในการสรา้ งเวบ็ เพจได้ดังนี้

1. การวางแผน
- กำหนดเนื้อหา ก่อนลงทำเว็บเราจะต้องรู้ว่าเราจะทำเว็บเกี่ยวกับอะไร เนื้อหาเป็น

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

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

2. การเตรยี มการ
การเตรยี มการด้านข้อมูลท้ังที่เปน็ เน้อื หา ภาพ เสยี ง หรอื ส่งิ จาเป็นต่างๆ ที่นักเรียนคิดว่า

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

3. การจัดทำ
เมื่อวางแผนและเตรยี มการเรียบรอ้ ยแล้ว ก็ถึงเวลาจดั ทำ อาจจะทำคนเดียว หรือทำกลุม่

โดยใช้เครือ่ งมือทเ่ี ตรียมไว้ ซง่ึ จะอธิบายถงึ วิธกี ารจดั ทำหรอื วธิ กี ารสรา้ งเว็บ

4. การทดสอบและการแกไ้ ข
การสร้างเว็บเพจทุกงควรจะมีการทดสอบก่อนเผยแพร่ทุกครั้งเพื่อหาข้อบกพร่อง แล้ว

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

9

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

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

1. โครงสร้างของเวบ็ ไซต์แบบเรยี งตามลาดับ (Sequential Structure)
โครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่

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

2. โครงสร้างของเว็บไซตแ์ บบลาดบั ข้ัน (Hierarchical Structure)
โครงสร้างท่ีดที ส่ี ุดวธิ ีหนึ่งในการจดั ระบบโครงสร้างทม่ี คี วามซับซอ้ นของข้อมลู โดยแบ่ง

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

10
2. โครงสรา้ งของเว็บไซตแ์ บบตารางGrid( Structure)

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

4. โครงสรา้ งเวบ็ ไซต์แบบใยแมงมุมWeb ( Structure)
โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึง

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

11

กจิ กรรมที่1
พ้นื ฐานของการสรา้ งและออกแบบเว็บไซต์
1. คำช้แี จงใหน้ กั เรยี นอธิบายความหมายของคำศพั ทต์ อ่ ไปน้ี
1. Webpage
2. Homepage
3. Webserver
4. Web hosting
5. Web bowser

12

2. คำช้ีแจงให้นักเรียนศึกษาใบความรู้ที่ 1 แลว้ ตอบคำท่ีถามต่อไปนี้
1. การออกแบบเวบ็ ไซต์มีก่ีรปู แบบ มอี ะไรบา้ ง

2. เหตใุ ดโครงสรา้ งเว็บไซตแ์ บบใยแมงมุมจึงเปน็ ทน่ี ิยมมากท่สี ุด

3. โครงสรา้ งของเว็บไซต์แบบเรยี งตามลาดับ มีข้อจากัดอยา่ งไร

13

4. โครงสรา้ งของเวบ็ ไซตแ์ บบลาดับข้นั และแบบตารางเหมอื นและตา่ งกนั อยา่ งไร

4. ถ้านักเรียนต้องออกแบบเว็บไซต์เพื่อนนำเสนอโครงงานวิทยาศาสตร์นักเรียนจะเลือก
รปู แบบใดเพราะเหตใุ ด

2. คำชี้แจง ให้นกั เรยี นเติมเคร่อื งหมาย √ หน้าขอ้ ความทีถ่ กู และเตมิ เครอ่ื งหมาย X หนา้ ขอ้ ที่ ผิด
ลงในช่องวา่ ง (ข้อละ1 คะแนน)

…………… 1) เวบ็ เพจ คอื เอกสารเผยแพร่ขอ้ มลู ขา่ วสารซงึ่ ประกอบดว้ ยข้อความ ภาพ เสยี ง
และภาพยนตร์ ผ่านทางเครอื ข่ายอนิ เทอรเ์ น็ต
…………… 2) เราใชเ้ ว็บบราวเซอรใ์ นการเข้าสโู่ ลกของ Word Wide Wed
…………… 3) โปรแกรม Macromedia Dreamweaver เปน็ โปรแกรมสำเร็จรูปใช้สร้างเว็บเพจ
…………… 4) โดเมนเนมเปน็ การนำตัวอกั ษรที่จำงา่ ยมาใช้แทนไอพีแอดเดรส
…………… 5) เราเรียกกลุม่ หน้าเวบ็ หรือเวบ็ หลายๆ หนา้ รวมกัน“โฮมเพจ”ว่า
…………… 6) HTTP ยอ่ มาจากHyper Text Transfer Process
…………… 7) โดเมนเนมมกั ถูกต้งั ให้สอดคลอ้ งกบั ช่อื บรษิ ทั หรอื องคก์ รผเู้ ป็นเจา้ ของ
…………… 8) เว็บไซต์แตล่ ะเว็บไซตจ์ ะมีเมนเนมเฉพาะท่ไี มเ่ หมอื นใคร
…………… 9) Success.co.th เป็นโดเมนเนมแบบ2 ระดบั
……...…… 10) .com เป็นโดเมนเนมของบริษัทหรอื งองคก์ รพาณิชย์ และองคก์ รรฐั บาล

14

ใบความรทู้ ่ี2
ความหมายและโครงสรา้ งภาษาHTML

ความหมายของภาษา HTML
ภาษา HTML ยอ่ มาจาก Hyper Text Markup Language เปน็ ภาษาคอมพวิ เตอร์รูปแบบ

หนึ่งที่มีโครงสร้างการเขียนโดยอาศัยตัวกากบั (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ หรือ
วัตถอุ น่ื ๆ ผา่ นโปรแกรมบราวเซอร์ แต่ละ Tag อาจจะมีส่วนขยาย เรยี กวา่ Attribute สาหรบั ระบุ
หรือควบคมุ การแสดงผลของเว็บ

รูปแบบของแท็กคาสั่ง (Tag)

รปู แบบของ tag แบง่ ออกเปน็ 2 กลมุ่ คอื
1. Tag เด่ยี ว คือ รปู แบบคำส่ังทมี่ เี พียงคำสั่งเดยี วหรอื มเี พยี งแทก็ เดียวกส็ ามารถใชง้ านได้
ซ่ึง tag เด่ยี ว มเี พียง 1 แท็ก คอื <br>
2. Tag คู่ คอื รปู แบบคำส่ังที่เปน็ สองสว่ น คอื มสี ่วนเริม่ ตน้ และต้องมีส่วนจบของคำส่ังถึง
จะสามารถทำงานได้สมบูรณ์ โดยสว่ นจบของแตล่ ะคำสงั่ จะมีเครอื่ งหมาย “/ ” (Slash)
ไว้หนา้ แท็กคาสง่ั น้นั tag คู่ มที ้งั หมด 4 แท็ก คือ
1) <html>…...</html>
2) <head>…...</head>
3) <title>.......</title>
4) <body>…...</body>

15

คำศัพทท์ ค่ี วรทราบเก่ียวกับภาษา HTML
พจิ ารณา

1. Text หมายถึง ข้อความ ตัวอักษรต่างๆ ที่ปรากฏในคาช่วงของคาสั่ง และปรากฏบนเว็บ
บราวเซอร์ จากตัวอย่างข้างตน้ “My First Webpage” และ “Notepad เป็นโปรแกรมท่ีใช้เขียน
ภาษา HTML” คือ Text

2. Tag หมายถึง คาสั่งที่ใช้ในการกำหนดรูปแบบของ Text โดยคาสั่งจะต้องอยู่ในเครื่องหมาย
< และ > เท่านั้น

<FONT size=16> …… </FONT> คอื คาสง่ั กำหนดขนาดให้กบั ตัวอกั ษร
<B> …….. </B> คือ คาสง่ั ในการกำหนด Text ใหเ้ ปน็ ตัวหนา

Tag เดีย่ ว เป็น Tag ทีไ่ มต่ ้องมกี ารปิดรหัส เชน่ <HR>, <BR>
Tag เปิด/ปดิ รูปแบบของ tag น้ีจะเป็นแบบ <tag>.... </tag> โดยที่
<tag> เรียกว่า tag เปิด
</tag> เรยี กว่า tag ปดิ 22

16

3. Attributes (แอททริบิวท์) หมายถึง การบอกรายละเอียดของคำสั่งนั้น จะทำงาน
สมั พนั ธ์กบั คำสง่ั ไม่ว่าจะเป็นกำหนดตำแหนง่ กำหนดความยาว ความกว้าง หรืออื่นๆ จะมหี รือไม่
มีก็ได้ Attributes จะทาให้คำสั่งต่างๆ นั้น ทำงานได้อย่างมีประสิทธิภาพมากขึ้น โดยระบุไว้ใน
เคร่อื งหมาย <> เช่นเดียวกับคาสั่ง แต่อย่ดู า้ นหลังคาสงั่ (ดจู ากตัวอย่างดา้ นบน) และ Attributes
บางตัวก็ใช้ไดก้ ับบางคำส่ัง บางตัวก็ใชไ้ ด้หลายคำส่ัง จากตวั อย่างข้างตน้ size=7 เป็นการกำหนด
ขนาดคอื Attributes ของคาสัง่ <FONT> </FONT>

กฎการใช้ HTML

. แต่ละคำส่ังจะต้องอยู่ในเครื่องหมาย < และ > เทา่ นนั้
2. ในคำสง่ั จะมคี ำสงั่ เปดิ <> และคาส่ังปิด </> โดยคำสั่งปิดจะมี เครอื่ งหมาย / แต่บาง
คำสั่งกไ็ ม่มีเครอื่ งหมาย / เช่น <FONT></FONT> = คำสั่งกำหนดรูปแบบของตัวอกั ษร, <P>
3. สามารถใชต้ วั พมิ พเ์ ลก็ <html> .... </html> หรอื พิมพใ์ หญก่ ไ็ ด้ <HTML>....
</HTML>
โครงสรา้ งพ้นื ฐานของHTML
โครงสร้างของภาษา HTML แบ่งออกไดเ้ ปน็ 4 ส่วนหลกั ดังนี้

1. <html>..</ html >
เป็นแทก็ แรกที่ต้องมใี นภาษา HTML ซึ่งบ่งบอกวา่ นี่คือภาษาHTMLโดยจะอยู่ที่จุดเริ่มต้น

ของเอกสารและทา้ ยเอกสาร ในแต่ละแฟ้ม

17

2. <head>..</head >
เป็นการกำหนดรายละเอียดส่วนหัวของเอกสารHTML คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยาย

รายละเอียดเก่ียวกับเว็บเพจ ซึ่งจะไมแ่ สดงผลทห่ี น้าเวบ็ เพจ

3. <title>…</title>
เป็นแท็กยอ่ ยท่อี ยภู่ ายใน <head> ที่ใช้ในการกำหนดชื่อเว็บเพจ ซงึ่ ข้อความภายในแทก็ น้ี

จะเป็นช่ือ หวั เร่อื งเวบ็ เพจ ทีต่ ้องการ ซงึ่ จะตอ้ งมคี วามยาวไม่เกนิ 64 ตัวอกั ษร ขอ้ ความนีจ้ ะไป
ปรากฏท่ี title bar ของ โปรแกรมเวบ็ เบราว์เซอรท์ ี่เรา ใชง้ านอยู่

4. <body>..</body>
เป็นส่วนเนื้อหาที่ต้องการแสดงผล บนโปรแกรมเว็บเบราว์เซอร์ เช่น ข้อความ, รูปภาพ,

เสียง, วีดิโอ และ ไฟล์ต่างๆ ที่ต้องการ นาเสนอ การเขียนแทก็ ในส่วนน้ี ไม่มีข้อกำหนด สามารถ
เขียนตดิ กนั หรือ 1 บรรทดั ตอ่ 1 แท็ก กไ็ ด้ แตม่ กั จะยดึ รปู แบบทอี่ ่านง่าย

 การกำหนดชื่อเพจ โดยใช้แท็ก <title>...</title> ซึ่งข้อความภายในแท็กน้ีจะเป็นชอื่
หัวเรื่องเว็บเพจที่ต้องการ ซึ่งจะต้องมีความยาวไม่เกิน 64 ตัวอักษร ข้อความนี้จะไปปรากฏท่ี
title bar ของบราวเซอรท์ ีเ่ ราใช้งานอยู่ และปรากฏบน Bookmark ของโปรแกรมบราวเซอร์ด้วย

การกำหนดรูปแบบของข้อความและเลย์เอาต์ในหน้าเว็บเพจ ที่เรียกว่า สไตล์ชีต ซึ่งจะ
กล่าวถึงในบทนนั้

การแทรก หรือใส่สคริปต์โปรแกรม เช่น JavaScript ซึ่งจะกล่าวในบทนั้นอีกคร้ัง
<body>...</body> ส่วนนี้เป็นส่วนของเนื้อหาเว็บเพจของเรา ไม่ว่าจะเป็นข้อความ รูปภาพ
ตาราง และการเชอ่ื มตอ่ ไปยังเอกสารอน่ื ๆ ท่ีจะไปแสดงผลทเ่ี ว็บบราวเซอร์

18

กจิ กรรมท่ี2
ความหมายและโครงสร้างภาษาHTML
1. คำชี้แจง ให้นกั เรียนแบง่ กล่มุ กลมุ่ ละ 3-4 คน แล้วสืบคน้ เก่ยี วกบั ความร้เู บื้องต้นเกยี่ วกับ
ภาษา HTML แลว้ นามาเขียน Mind Mapping แล้วตอบคาถามท้ายกจิ กรรม (10 คะแนน)

19

2. จงตอบคำถามต่อไปน้ี(ขอ้ ละ1 คะแนน)
1. นกั เรยี นไดเ้ รียนรู้อะไรจากการท ากจิ กรรมนี้

2. นักเรียนมีการวางแผนการทำงานอย่างไร

3. การทำกิจกรรมน้ีนกั เรยี นได้พบอปุ สรรคอะไรหรือไม่และมีวธิ กี ารแก้ปญั หาอยา่ งไร
4. นกั เรียนไดห้ าความรู้เพ่อื ใชใ้ นการทำกจิ กรรมนจี้ ากแหล่งการเรยี นรู้ใด
5. นกั เรียนตอ้ งการเรียนรู้อะไรเพิ่มเติมหลังจากทำกจิ กรรมน้ี

20

ใบความร้ทู ่ี 3
เครอ่ื งมอื ทีใ่ ชเ้ ขียนภาษาHTML

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

เรยี กว่า Text Editor ซ่ึงเป็นโปรแกรมที่ใช้สาหรับสร้างและแก้ไขข้อความ ปัจจุบนั มีอยู่มากมายที่
ใช้สาหรับแก้ไขโค้ด HTML โดยเฉพาะ เช่น Notepad, Editplus และ Dreamweaver ในการ
อธิบายการสร้างเว็บเพจด้วยภาษา HTMl สาหรับเว็บไซต์นี้จะใช้โปรแกรม Notepad เพราะมี
ขนาดเลก็ และมอี ยู่แลว้ ในระบบปฏิบัติการ Windows

21
การใช้ Notepad เขียนภาษาHTML
1. การเข้าโปรแกรมNotepad สามารถเข้าไดต้ ามขัน้ ตอนตอ่ ไปนี้
1. คลกิ ปุม่ Start
2. เลือ่ นเมาส์ไปที่ All Programs
3. เลอ่ื นเมาส์ไปท่ี Accessories
4. คลิกที่โปรแกรม Notepad
5. จะได้โปรแกรม Notepad เป็นกระดาษขาวๆว่างๆ เพื่อให้ใส่โค้ดลงไป การบันทึก
ไฟล์HTML

2. จะได้โปรแกรม Notepad สำหรบั เขยี นเวบ็ เพจ ดงั น้ี

22
3. ก่อนท่ีจะเรมิ่ เขยี นชดุ คาส่งั ควรทาการกำหนดค่าตวั อักษรเสียกอ่ น โดยไปท่ี Format
4. เลือก Font จะได้ดังภาพแล้วทาการปรับ รูปแบบฟอนต์ และขนาดตัวอักษรให้เหมาะสมใน
การใช้
5. งาน แลว้ กดปุม่ OK

4. แล้วทำการพมิ พช์ ดุ คำสงั่ ตามภาพดา้ นล่าง

23
การบันทกึ เอกสารHTML
เมื่อสร้างเอกสารเสร็จแล้ว จะต้องบันทึกเป็นเอกสาร html โดยบันทึกเป็น นามสกุล
.html หรือ .htm ดงั น้ี
1. คลิก เมนู File เลือก Save As
2. เลือกโฟลเดอร์ที่ต้องการเกบ็ ไฟล์ (ปกตเิ ว็บไซต์1ตอ้ งเก็บไฟลข์ ้อมูลไวท้ ่ีเดยี วกนั )
3. ตง้ั ชอ่ื ไฟล์เปน็ ภาษาองั กฤษตวั พมิ พเ์ ล็ก และกำหนดนามสกุลไฟลเ์ ปน็ .html ตอ่ ทา้ ยชื่อ
ไฟล์ท่ีเซฟดว้ ย

4. คลกิ ท่ปี ุ่ม Save เพ่ือบันทึกเอกสาร html ท่สี ร้างข้นึ
ข้อแนะนำ ปกติแลว้ หนา้ แรกของเวบ็ เพจควรต้งั ชอ่ื ว่า:index.html

24

การเรียกดไู ฟล์ HTML
หลังจากที่เขียนคาสั่งบันทึกเป็นไฟล์ HTML แล้ว เราสามารถเรียกดูเว็บเพจที่เรา

สร้างได้ 2 วธิ ี ดงั นี้
วธิ ีท่ี 1
1. คลิกทโ่ี ปรแกรม Internet Explorer บนหน้าจอของนกั เรยี น
2. คลิกทเี่ มนู File เลอื กคาสัง่ Open
3. คลกิ ที่ปุ่ม Browse เลือกท่อี ยู่ที่เกบ็ ไฟล์ (โฟลเดอรท์ ี่นักเรียนเก็บไฟลเ์ อาไว้)
4. คลิกชื่อไฟล์ แล้วกดปุ่ม Open
5. คลกิ ทป่ี ุ่ม OK
วิธีที่ 2
1. คลกิ เลือกทอ่ี ยทู่ เี่ กบ็ ไฟล์ HTML ที่นักเรียนทาไว้
2. ดบั เบลิ คลกิ ท่ไี อคอน ไฟลน์ นั้ ๆที่ต้องการเปิด

การแก้ไขคำสัง่ HTML
การเปิดไฟล์ HTML เพอ่ื แกไ้ ขคาสัง่ ให้ปฏบิ ัติ ดงั นี้

1. เปิดโปรแกรม Notepad
2. คลิกที่เมนู File เลอื กคาสั่ง Open
3. เลือกทีอ่ ยู่ทเ่ี ก็บไฟล์ HTML
4. คลกิ เปล่ียน Files of type เปน็ All Files
5. คลิกไฟล์ท่ีตอ้ งการแกไ้ ขคาส่งั
6. คลิกทป่ี ่มุ Open

25

ทดลองเขียนเวบ็ เพจแรกดว้ ยภาษา HTML
การเขียนภาษา HTML โดยเริ่มต้นเปิดโปรแกรม Notepad แลว้ เขยี นเอกสาร HTML ดงั

รูป
วธิ เี ปิดโปรแกรม Notepad และพมิ พภ์ าษาHTML แรก

26

27

วธิ ีการบนั ทึกเอกสาร HTML
เมอื่ สรา้ งเอกสารเสร็จแล้ว จะตอ้ งบนั ทกึ เปน็ เอกสาร HTML โดยบนั ทกึ เปน็ นามสกุล

.html หรือ .htm ดงั น้ี

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

29

การเปิดเวบ็ เพจมาแกไ้ ข
ในกรณีที่เราปิดไฟล์เวบ็ เพจจากโปรแกรม Notepad ทเ่ี ราสร้างมาก่อนหน้าน้ันไป

แล้วและเราต้องการแก้ไขไฟล์เว็บเพจ ให้เราทำการเปิดไฟล์ Notepad ขึ้นมาใหม่แล้วไปที่เมนู
File > Open แล้วเลือกตำแหน่งไฟล์เว็บเพจที่เราบันทึกไว้ในคอมพิวเตอร์ของเรา แล้วทาการ
แก้ไข และบันทึก โดยบันทึกที่ Save ในกรณที ่ีเราไมต่ ้องการเปล่ียนช่ือไฟลใ์ หม่ และในกรณีท่ีเรา
ตอ้ งการเปลยี่ นเปลย่ี นชื่อไฟลใ์ หม่ กใ็ หเ้ ลือก Save As แลว้ ตัง้ ช่อื ไฟล์ใหม่ และบันทกึ ดังรปู

30

31
หากเราต้องการแก้ไขเว็บเพจใหเ้ รากลับไปที่ Notepad และทำการแกไ้ ขไดเ้ ลย หลงั จากท่ี
เราได้แก้ไขแล้ว ไม่ปรากฏเป็นภาษาไทย ให้เรากำหนดการแสดงผลของบราวเซอร์ใหม่ โดยการ
คลกิ เมาส์ขวาเลือกคาส่ัง Encoding>Thai(Windows) ดงั รูป

32

กิจกรรมท่ี 3
เคร่ืองมอื ทใี่ ชส้ รา้ งเอกสารHTML

ตอนท่ี 2 จงตอบคำถามต่อไปน้ี (ข้อละ1 คะแนน)

1. จงเขยี นขน้ั ตอนในการเขา้ ใช้งานโปรแกรม Notepad

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

2. จงเขียนขน้ั ตอนการบนั ทกึ ข้อมูลใหเ้ ปน็ ไฟล์เว็บเพจในโปรแกรม Notepad

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

3. จงเขียนขัน้ ตอนการดผู ลลพั ธไ์ ฟลเ์ วบ็ เพจในโปรแกรมเวบ็ บราวเซอร์

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

33

4. จงเขียนข้ันตอนการเปลย่ี นรปู แบบอกั ษร(Font)ในโปรแกรม Notepad

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

5. ให้นักเรียนลองพิมพ์คำสั่งเป็นภาษ าHTML เพื่อบอกข้อมูลเกี่ยวกับตัวนักเรียน เช่นชื่อ–
นามสกุล อายุ ท่อี ยอู่ าหารที่ชอบกีฬาท่ชี อบ ชื่อเพอื่ นสนิทเป็นตน้

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

34

แบบทดสอบหลงั เรยี น

คำช้ีแจง แบบทดสอบกอ่ นเรยี นนี้ เป็นแบบทดสอบแบบปรนยั 4 ตวั เลือก จำนวน 10 ขอ้
คำสง่ั คำส่งั ให้ผู้เรยี นเลือกคาตอบที่ถกู ตอ้ งทส่ี ดุ เพยี งขอ้ เดยี ว และทาเครือ่ งหมาย X ลงบน
กระดาษคาตอบ
1. ข้อใดกล่าวถกู ต้องเกย่ี วกับการเขยี นแทก็ ภาษา HTML

ก. ในการเขยี นแทก็ ซ้อนแทก็ ใหป้ ิดแท็กทอ่ี ยู่ในสุดกอ่ น
ข. บางแทก็ ไมจ่ ำเป็นตอ้ งมีแท็กปิดก็สามารถใชง้ านได้
ค. การใช้ตวั พิมพ์เล็กและตัวพมิ พ์ใหญ่มคี วามหมายเหมอื นกัน
ง. ถกู ทุกข้อ
1. HTML ยอ่ มาจากภาษาอังกฤษว่าอะไร
ก. Homepage Text Markup Language
ข. Home Text Markup Language
ค. Hyper Text Markup Language
ง. Hyper Text Manual Language

2. ขอ้ ใดกล่าวไมถ่ กู ต้องเกย่ี วกับภาษา HTML
ก. เปน็ ภาษาหลกั ท่ใี ชใ้ นการสรา้ งเว็บเพจ
ข. คำสั่งจะอยู่ในเครอ่ื งหมาย <และ>
ค. คำสัง่ สว่ นใหญจ่ ะแบง่ เป็น 2 สว่ น คอื แทก็ เปดิ และแท็กปดิ
ง. ในแท็บปิดจะตอ้ งมเี คร่ืองหมาย \

3. HTML ย่อมาจากภาษาอังกฤษวา่ อะไร
ก. Homepage Text Markup Language
ข. Home Text Markup Language
ค. Hyper Text Markup Language
ง. Hyper Text Manual Language

4. ขอ้ ใดเป็นรูปแบบของแทก็ ในภาษาHTML
ก. <แท็ก,ข้อความ></แทก็ >
ข. <แท็ก>ข้อความ</แท็ก>
ค. <แทก็ >ข้อความ<\แท็ก>
ง. <แทก็ ,ข้อความ><\แท็ก>

5. โปรแกรมใดท่ีใช้ในการเขยี นคำสัง่ ภาษาHTML

35

ก. Dos
ข. Ms-Word
ค. Notepad
ง. Internet Explorer

6. ขอ้ ใดคือส่วนทใี่ สเ่ น้ือหาของเวบ็ เพจที่จะไปแสดงผลท่เี ว็บบราวเซอร์
ก. <html>...</html>
ข. <head>...</head>
ค. <body>...</body>
ง. <title>...</title>

7. แท็ก<title>...</title> เป็นแทก็ ทใี่ ช้อยภู่ ายในแท็กขอ้ ใด
ก. <html>...</html>
ข. <head>...</head>
ค. <body>...</body>
ง. <h2>...</h2>

8. ในการตง้ั ช่อื ไฟลเ์ วบ็ เพจ สามารถกำหนดสว่ นขยายหรอื นามสกุลไฟลว์ ่าอยา่ งไร
ก. .html
ข. .xml
ค. .htm
ง.ถกู ทั้งข้อ ก และ ค

9. โครงสรา้ งของเอกสารHTML นั้นประกอบไปด้วย 2 สว่ นคอื ข้อใด
ก. ส่วนหัวเอกสารและส่วนคำสัง่
ข. ส่วนเนื้อหาและสว่ นคำสง่ั ของเอกสาร
ค. ส่วนหัวเอกสารและส่วนเน้อื หา
ง. สว่ นคำส่ังและสว่ นประมวลผล

10. ขอ้ ใดกลา่ วไมถ่ ูกตอ้ งเกยี่ วกบั แทก็ (Tag)
ก.แทก็ ปิดมลี กั ษณะดงั นี้ คอื <\head>
ข. แท็ก <br> ไม่ตอ้ งมแี ท็กปดิ
ค. แทก็ ข้ึนต้นดว้ ย <
ง. แทก็ จะไมม่ ีแอตทรบิ ิวต์ หรือไม่มกี ็ได้

36
คะแนนทไ่ี ด้
ช่อื ......................................................................ชัน้ .....….....เลขท่ี...............

37
คะแนนท่ไี ด้

ชื่อ.....................................................................ชั้น.....…...เลขท่ี............

38

ตารางบนั ทกึ คะแนนระหว่างเรียนชดุ การสอน
เรือ่ ง การเขียนเวบ็ เพจด้วย ภาษา HTML ระดับชนั มัธยมศกึ ษาปีที่ 4

ลงชื่อ................................................ผู้ประเมิน
()
ตำแหนง่ ครู

39

บรรณานกุ รม

กติ ติ ภักดีวฒั นกลุ . (2540). สร้างเว็บแบบมอื อาชพี ด้วย HTML. กรงุ เทพฯ: หจก.ไทยเจรญิ การ
พิมพ.์
ณัชติพงศ์ อูทอง. (2551). สรา้ งเว็บเพจ (ภาษา HTML). นนทบรุ ี: เอมพันธ์.
ประชา พฤกษ์ประเสริฐ. (2553). สรา้ งเวบ็ และเพม่ิ ลูกเล่นดว้ ย HTML&XHTML. กรงุ เทพฯ:
ซมิ พลฟิ าย.
สานกั วิชาการมาตรฐานการศกึ ษา. (2551). ตัวชีว้ ัดและสาระการเรยี นรแู้ กนกลาง
กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ตามหลกั สตู รแกนกลางการศึกษาข้ัน
พ้ืนฐาน พทุ ธศักราช 2551. กรุงเทพฯ : โรงพมิ พ์ชุมนุมสหกรณก์ ารเกษตรแห่งประเทศ
ไทย จากดั .
เสาวนีย์ ลีละวฒั นพันธ์. ภาษา HTML. (ออนไลน์). สบื ค้นจาก:
http://61.19.202.164/resource/courseware/html/k01-01.html [22 พ.ค. 2556]