เล่มที่ 2 เริ่มต้นภาษา HTML

หนงั สืออิเล็กทรอนิกส์
การออกแบบและเขียนเวบ็ ไซตด์ ้วยภาษา 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 เล่มที่ 2 เริ่มต้นกับภาษา
HTML ใชเ้ วลาในการจัดกจิ กรรมการเรียนรู้ 2 ชั่วโมง ประกอบดว้ ย

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

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

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

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

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

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

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

ด้วยภาษา HTML

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

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

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

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

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

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

สาระการเรยี นรู้
1. ความร้พู ้ืนฐานเกีย่ วกบั ภาษา HTML
2. โครงสร้างภาษา HTML
3. การเขียนโปรแกรมภาษา HTML ดว้ ย Text Editor
4. การเรยี กดผู ลลพั ธด์ ้วยโปรแกรมเว็บเบราวเ์ ซอร์

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

แบบทดสอบก่อนเรยี น
เล่มที่ 2 เร่มิ ตน้ กบั ภาษา HTML

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

1. ข้อใดอธบิ ายความหมายของภาษา HTMLได้ถูกต้องที่สุด
ก. ภาษา HTML เป็นภาษาคอมพิวเตอร์ทถี่ ูกออกแบบมาเพอ่ื ใช้ในการเขยี นเว็บเพจและแสดงผล
บนเว็บเบราว์เซอร์ สามารถนาเสนอข้อมลู ตัวอักษร รวมทั้งเชอื่ มตอ่ เพอื่ แสดงภาพ เสยี ง
และไฟลใ์ นรปู แบบอ่นื ๆ
ข. ภาษา HTML ประกอบด้วยสว่ นหวั และส่วนคาสง่ั ของเอกสาร
ค. ภาษา HTML พัฒนามาจากภาษา TBL โดย Tim Berners-Lee
ง. ภาษา HTML เปน็ ภาษาทมี่ โี ครงสรา้ งการเขียนโดยอาศยั ปา้ ยระบุ (Attribute) หรอื คาส่งั
ควบคมุ การแสดงผลข้อความ รูปภาพ หรอื วัตถอุ ื่น และอาจมีสว่ นขยายที่ใชบ้ อก
คุณลักษณะพิเศษ (Tag) สาหรบั ระบหุ รอื ควบคุมลักษณะการแสดงผลเพิม่ เตมิ

2. ข้อใดคือสว่ นประกอบ 3 ส่วน ของโครงสร้างภาษา HTML
ก. ส่วนคาสั่งหลกั ส่วนลักษณะพเิ ศษ และสว่ นขยาย
ข. ส่วนประกาศ ส่วนหวั เรอื่ ง และสว่ นเน้ือหา
ค. สว่ นหัวเร่อื ง ส่วนคาสงั่ หลัก และสว่ นเนือ้ หา
ง. สว่ นประกาศ ส่วนเนอ้ื หา และส่วนขยาย

3. คาสง่ั ควบคุมการแสดงผลของภาษา HTML จะตอ้ งอยภู่ ายใต้เครือ่ งหมายใด
ก. ( )
ข. < >
ค. #
ง. [ ]

4. ขอ้ ใดไมใ่ ช่คาสั่งหลักของโปรแกรมภาษา HTML
ก. <title>…</title>
ข. <body>…</body>
ค. <pre>…</pre>
ง. <head>…</head>

5. ขอ้ ใดคอื ขน้ั ตอนการเข้าสู่โปรแกรม Notepad
ก. คลิกเมนู File >> Open >> Notepad
ข. คลกิ ที่ป่มุ Start >> All Programs >> Accessories >> Notepad
ค. คลกิ เมนู Search >> Windows >> Open >> Notepad
ง. คลิกทป่ี มุ่ Start >> All Programs >> Windows >> Notepad

6. ข้อใดคือข้นั ตอนการใชเ้ วบ็ เบราว์เซอร์แสดงผลเว็บเพจ
ก. ดับเบิล้ คลกิ ไฟลเ์ ว็บเพจ
ข. คลกิ ขวาที่ไฟลเ์ ว็บเพจ >> คลกิ Open With >> คลกิ เลือกโปรแกรมเว็บเบราว์เซอร์
ค. เปิดโปรแกรมเว็บเบราว์เซอร์ >> คลิกเมนู File >> Open >> คลิกปมุ่ Browse…
บนหนา้ ตา่ ง Open >> เลอื กตาแหนง่ ไฟลท์ ี่ถกู จดั เกบ็ >> เลอื กไฟลเ์ ว็บเพจ >> Open
>> OK
ง. ถูกทกุ ขอ้

7. ข้อใดคอื ขั้นตอนการใช้เท็กซอ์ ดิ เิ ตอร์ (Text Editor) เขยี นและแก้ไขโค้ด HTML
ก. คลกิ ที่ปมุ่ Start >> Accessories >> All Programs >> Notepad
ข. คลกิ ทีป่ มุ่ Start >> All Programs >> Accessories >> Notepad
ค. คลกิ ที่ป่มุ Start >> All Programs >> Notepad >> Accessories
ง. คลิกที่ปุ่ม Start >> Notepad >> All Programs >> Accessories

8. ข้อใดคอื การเขียนคาสง่ั ได้ถูกตอ้ งหากต้องการแสดงข้อความ “เว็บเพจแรกของฉนั ”
บนไตเติลบาร์ (Title bar)
ก. <html>เวบ็ เพจแรกของฉัน</html>
ข. <head>เว็บเพจแรกของฉัน</head>
ค. <title>เวบ็ เพจแรกของฉนั </title>
ง. <body>เว็บเพจแรกของฉัน</body>

9. หากตอ้ งการใสเ่ นอ้ื หาเว็บเพจจะตอ้ งกาหนดใหอ้ ยู่ภายในคาสั่งใด
ก. <html>…</html>
ข. <head>…</head>
ค. <title>…</title>
ง. <body>…</body>

10. ข้อใดคอื ขน้ั ตอนการใช้โปรแกรมเวบ็ เบราว์เซอร์แสดงผลเว็บเพจ
ก. ดบั เบล้ิ คลกิ ไฟลเ์ วบ็ เพจ
ข. ดบั เบิล้ คลกิ ไอคอนโปรแกรม Notepad
ค. ดับเบ้ลิ คลิกไอคอนโปรแกรม Internet Explorer จะแสดงผลเวบ็ เพจทนั ที
ง. เปิดโปรแกรม Text Editor >> คลิกเมนู File >> Open >> คลิกไฟล์เวบ็ เพจ

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

ภาษา HTML

ภาษา HTML ย่อมาจากคาว่า Hyper Text Markup Language เป็นภาษาคอมพิวเตอร์
ที่ถูกออกแบบมาเพื่อใช้ในการเขียนเว็บเพจและแสดงผลบนเว็บเบราว์เซอร์ สามารถนาเสนอข้อมูล
ตัวอักษร รวมท้ังเชื่อมต่อเพ่ือแสดงภาพ เสียง และไฟล์ในรูปแบบอื่นๆ พัฒนามาจากภาษา SGML
(Standard Generalized Markup Language) โดย Tim Berners-Lee ปัจจุบันมีการพัฒนา
และกาหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)

ภาษา HTML มีโครงสรา้ งการเขียนโดยอาศยั ป้ายระบุ (Tag) หรือคาสัง่ ควบคุมการแสดงผล
โดยป้ายระบุ หรือ แทก็ (Tag) นน้ั จะอยูภ่ ายใตเ้ ครอื่ งหมาย < และ > สามารถแบง่ ได้ 2 รปู แบบ คือ

 ป้ายระบเุ ดย่ี ว หมายถึง ป้ายระบทุ ่เี ปน็ คาส่ังสาหรบั การควบคุมการแสดงผลเพียงคาส่ังเดียว
หรอื มีเพียงแทก็ เดียวก็สามารถใชง้ านได้ เช่น คาสง่ั การขึ้นบรรทัดใหม่ <br> เปน็ ต้น

 ปา้ ยระบุเปิด/ปิด หรอื แทก็ คู่ หมายถึง ป้ายระบทุ ี่เป็นคาส่ังสาหรับการควบคุมการแสดงผล
เปน็ กลุ่ม รูปแบบแทก็ จะแยกเป็น 2 ส่วน ส่วนเร่ิมต้นของแท็ก เรียกว่า “แท็กเปิด” และส่วนจบของแท็ก
เรยี กว่า “แท็กปิด” โดยแท็กปดิ จะตอ้ งมเี ครอ่ื งหมาย Slash ( / ) นาหนา้ คาส่ังของแทก็ ปดิ นน้ั เช่น

<แท็กเปิด> .... </แทก็ ปดิ >
<html> …. </html>

ลกั ษณะพิเศษ (Attributes) เปน็ ส่วนทที่ าหน้าที่ขยายความสามารถของป้ายระบุ (Tag)
หรอื คาสงั่ โดยการกาหนดลักษณะพเิ ศษไว้หลังแท็กภายในเคร่อื งหมาย < และ > ในส่วนของแท็กเปิด
หรอื แทก็ เดย่ี ว

คาสั่งของภาษา HTML แต่ละคาสั่งสามารถกาหนดลักษณะพิเศษได้มากกว่า 1 ลักษณะ

พิเศษทีแ่ ตกต่างกนั โดยใช้ชอ่ งว่างเป็นตวั แยกแต่ละลักษณะพเิ ศษ เช่น

<hr width=“500” size=“10”>

แทก็ hr เปน็ คาส่ังตีเสน้ บรรทัดหรือเสน้ ค่นั แนวนอน
แอททริบิวท์ width=“500” กาหนดความยาวของเสน้ ใหม้ คี ่าเท่ากับ 500 pixel
แอททรบิ วิ ท์ size=“10” กาหนดขนาดความหนาของเส้น ใหม้ คี ่าเท่ากับ 10 pixel

โครงสรา้ งภาษา HTML

โครงสร้างของภาษา HTML มสี ่วนประกอบ 3 ส่วน คือ
1. สว่ นประกาศ
2. ส่วนหวั เรื่อง (Head Section)
3. ส่วนเนอ้ื หา (Body Section)

(1) ส่วนประกาศ <html> (2) ส่วนหวั เรอ่ื ง
<head> (3) ส่วนเนอ้ื หา

<title> หัวขอ้ เว็บเพจ </title>
</head>

<body>
ส่วนเนอื้ หาของเว็บเพจ ประกอบดว้ ย
- ข้อความ

- รปู ภาพ
- ส่ือมัลติมเี ดยี

- Link ที่ปรากฏในเวบ็ เพจ
--------------------
--------------------

</body>
</html>

ภาพที่ 2-1 โครงสรา้ งภาษา HTML

คาส่งั หลักของภาษา HTML

(1) สว่ นประกาศ เปน็ ส่วนทใ่ี ช้สาหรับบอกจุดเรมิ่ ต้นและจดุ ส้นิ สุดของเอกสาร HTML
<html>…</html> โดยสว่ นหัวเร่ือง (Head Section) และส่วนเน้ือหา (Body Section)
จะอยู่ภายใต้คาสัง่ <html>…</html>
(2) สว่ นหัวเร่ือง
<head>…</head> เปน็ ส่วนกาหนดรายละเอยี ดหัวเอกสาร HTML ซงึ่ จะไมแ่ สดงผลทหี่ นา้ เวบ็ เพจ
แตจ่ ะอาศยั แทก็ <title>…</title> ซ่ึงเป็นแทก็ ยอ่ ยทอ่ี ยู่ภายใน
(3) สว่ นเน้ือหา <head>…</head> ในการกาหนดชือ่ เวบ็ เพจ และจะตอ้ งมคี วามยาว
<body>…</body> ไมเ่ กิน 64 ตวั อักษร โดยขอ้ ความในแท็ก <title>…</title> นี้ จะไป
ปรากฏท่ี title bar ของเบราวเ์ ซอร์ที่ผใู้ ชก้ าลังใช้งานอยู่

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

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

ในการสร้างเว็บเพจด้วยภาษา HTML นั้น ต้องอาศัยเครื่องมือ 2 อย่าง คือ เท็กซ์อิดิเตอร์ (Text
Editor) และ เวบ็ เบราวเ์ ซอร์ (Web Browser)

1. เท็กซ์อดิ ิเตอร์ Text Editor เป็นโปรแกรมทใี่ ช้ในการกาหนดรปู แบบขอ้ ความและคาสัง่
ต่างๆ ปัจจุบันมีโปรแกรมสาหรับเขียนและแก้ไขโค้ด HTML โดยเฉพาะให้เลือกใช้มากมาย เช่น
WordPad, EditPlus และ Notepad เป็นต้น

โปรแกรมประเภท Text Editor ท่ีผู้เขียนโปรแกรมนิยมใช้ คือ โปรแกรม Notepad
เนื่องจากมีขนาดเล็กและมีอยู่แล้วในเครอื่ งคอมพิวเตอร์ท่ใี ชร้ ะบบปฏบิ ัตกิ าร Windows

2. เว็บเบราว์เซอร์ (Web Browser) คือ ส่วนทใี่ ชส้ าหรับแสดงผลลพั ธข์ องเอกสารที่เขียนด้วย
ภาษา HTML เหมือนกับการคอมไพล์ (Compiled) หรือ รัน (Run) โปรแกรมในภาษาคอมพิวเตอร์
ทว่ั ๆ ไป

1. พิมพค์ าส่ัง HTML ในโปรแกรม Text Editor
แล้วบันทึกเป็นไฟลน์ ามสกลุ .htm หรือ .html

2. ดผู ลลพั ธท์ ี่ได้จากการเขยี นภาษา HTML
ด้วยโปรแกรม Web Browser

เกรด็ ความรู้

การกาหนดช่อื และนามสกุลของแฟม้ ขอ้ มลู เอกสารเว็บ
 ควรใชต้ วั อักษร a – z พมิ พ์เลก็ หรอื ตัวเลข 0 – 9 ในการตั้งช่ือ
 ไม่ควรเว้นช่องวา่ งภายในชือ่ และไมค่ วรใช้อักขระพิเศษ ยกเวน้ เครือ่ งหมาย ขดี ล่าง “_”

(Underscore) หรอื ขีดกลาง “-” (Dash)
 การจัดเกบ็ แฟม้ ข้อมูลเวบ็ เพจ ใหบ้ ันทึกเป็นไฟลน์ ามสกลุ .htm หรอื .html
 ช่ือแฟม้ ข้อมูลหน้าหลกั ของเวบ็ เพจ มกั ใช้ชอื่ index.htm หรือ index.html

การเขียนโปรแกรมภาษา HTML ด้วยโปรแกรม Notepad
1. การเข้าสู่โปรแกรม Notepad

คลิกทปี่ ่มุ Start --> All Programs --> Accessories --> Notepad

ภาพท่ี 2-2 ไอคอนโปรแกรม Notepad
จะปรากฏหนา้ ตา่ งโปรแกรม Notepad ดังรูป

ภาพท่ี 2-3 หนา้ ตา่ งโปรแกรม Notepad
2. พมิ พค์ าสง่ั ภาษา HTML

เมอ่ื เปิดโปรแกรม Notepad แลว้ ให้พิมพค์ าสง่ั ดังตอ่ ไปนี้

ภาพท่ี 2-4 แสดงการพิมพค์ าส่งั ภาษา HTML ในโปรแกรม Notepad

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

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

1.คลิกเมนู File
2.คลิก Save

3.เลอื กตาแหนง่
ทจ่ี ะบนั ทึกไฟล์

4.พิมพช์ อื่ ไฟล์และนามสกลุ
เป็น .htm หรือ .html

5.เลอื ก Save as type 6.เลือก Encoding เปน็ 7.คลิกปุ่ม Save
เปน็ All Files UTF-8 (สาหรับภาษาไทย)

8.จะไดไ้ ฟล์เว็บเพจ ดังรูป
ภาพท่ี 2-5 การบนั ทึกเอกสาร HTML

4. การเรียกดผู ลลัพธด์ ว้ ยโปรแกรม Web Browser
สามารถเรียกดูผลลัพธ์ได้จากโปรแกรม Google Chrome, Mozilla Firefox ส่วนใหญ่นิยมใช้

โปรแกรม Internet Explorer ซึง่ ทาไดห้ ลายวธิ ี ดังนี้
วิธีที่ 1

ข้อความทก่ี าหนดในแท็ก
<title>…</title> จะปรากฏทนี่ ี่

1.ดับเบิ้ลคลิกไฟลเ์ วบ็ เพจ ขอ้ ความที่กาหนดในแท็ก
ท่ีสร้างข้นึ <body> จะปรากฏท่ีนี่

2.แสดงผลบนเบราวเ์ ซอร์

ภาพที่ 2-6 การเรียกดผู ลลัพธด์ ้วยโปรแกรม Web Browser วิธีท่ี 1
วิธที ่ี 2

2.คลกิ Open with

1.คลกิ ขวาที่ไฟล์เวบ็ เพจ 3.คลกิ เลือกโปรแกรม
ท่ีสร้างขึน้ Web Browser ทีต่ อ้ งการ

ภาพท่ี 2-7 การเรียกดผู ลลพั ธด์ ้วยโปรแกรม Web Browser วิธีท่ี 2

วิธีที่ 3 เปดิ โปรแกรม Web Browser ขน้ึ มา แลว้ ปฏิบตั ติ ามขน้ั ตอนดังต่อไปน้ี

1.คลิกเมนู File จะมหี น้าตา่ ง Open
2.คลกิ Open ปรากฏขึ้นมา

4.เลือกตาแหนง่ ที่ไฟลถ์ กู จดั เกบ็ 3.คลิกปมุ่ Browse

5.คลกิ เลือกไฟล์เว็บเพจ

ภาพที่ 1-7 โครงสรา้ งภาษา HTML
6.คลกิ ปุม่ Open

จะปรากฏเสน้ ทาง
การเขา้ ถงึ ไฟล์ขน้ึ มา

7.คลกิ ปุม่ OK ปรากฏหนา้ ต่างแสดงผลบนเบราว์เซอร์

ภาพที่ 2-8 การเรียกดผู ลลพั ธ์ดว้ ยโปรแกรม Web Browser วิธที ี่ 3

เกรด็ ความรู้

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

ภาพท่ี 2-9 แสดงขนั้ ตอนการกาหนดให้เวบ็ เพจแสดงผลเป็นภาษาไทย

 หากต้องการแก้ไขปรบั ปรุงเนอ้ื หาหรอื คาสั่งภาษา HTML ของไฟล์เว็บเพจท่เี คยบนั ทกึ
ไว้แล้ว สามารถเปดิ แกไ้ ขในโปรแกรม Text Editor ตามขน้ั ตอนดงั รปู

2.คลกิ Open with




1.คลิกขวาที่ไฟลเ์ วบ็ เพจ 3.คลกิ เลือกโปรแกรม
ที่สรา้ งขน้ึ Notepad

ภาพที่ 2-10 แสดงขั้นตอนการเปิดไฟลเ์ วบ็ เพจทเี่ คยบันทกึ ไว้แล้วด้วยโปรแกรม Notepad

แบบทดสอบหลงั เรยี น
เลม่ ที่ 2 เรมิ่ ตน้ กับภาษา HTML

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

1. ข้อใดอธบิ ายความหมายของภาษา HTMLได้ถูกต้องทส่ี ุด
ก. ภาษา HTML ประกอบด้วยส่วนหัวและสว่ นคาส่ังของเอกสาร
ข. ภาษา HTML เป็นภาษาคอมพิวเตอร์ที่ถกู ออกแบบมาเพอื่ ใช้ในการเขยี นเว็บเพจและแสดงผล
บนเวบ็ เบราว์เซอร์ สามารถนาเสนอขอ้ มลู ตัวอักษร รวมทั้งเช่ือมตอ่ เพ่อื แสดงภาพ เสยี ง
และไฟล์ในรูปแบบอ่นื ๆ
ค. ภาษา HTML เป็นภาษาทม่ี โี ครงสรา้ งการเขียนโดยอาศยั ป้ายระบุ (Attribute) หรอื คาสง่ั
ควบคุมการแสดงผลขอ้ ความ รูปภาพ หรือวตั ถอุ ่ืน และอาจมีส่วนขยายที่ใชบ้ อก
คุณลักษณะพเิ ศษ (Tag) สาหรบั ระบหุ รือควบคมุ ลกั ษณะการแสดงผลเพ่ิมเติม
ง. ภาษา HTML พัฒนามาจากภาษา TBL โดย Tim Berners-Lee

2. ขอ้ ใดคอื ส่วนประกอบ 3 ส่วน ของโครงสร้างภาษา HTML
ก. สว่ นหวั เรอื่ ง ส่วนคาสง่ั หลกั และส่วนเนือ้ หา
ข. ส่วนคาส่งั หลัก ส่วนลักษณะพเิ ศษ และสว่ นขยาย
ค. ส่วนประกาศ ส่วนหัวเรอ่ื ง และสว่ นเนอ้ื หา
ง. สว่ นประกาศ ส่วนเน้ือหา และสว่ นขยาย

3. คาส่ังควบคมุ การแสดงผลของภาษา HTML จะตอ้ งอยูภ่ ายใตเ้ คร่อื งหมายใด
ก. [ ]
ข. ( )
ค. #
ง. < >

4. ขอ้ ใดไมใ่ ช่คาสั่งหลักของโปรแกรมภาษา HTML
ก. <pre>…</pre>
ข. <title>…</title>
ค. <head>…</head>
ง. <body>…</body>

5. ขอ้ ใดคอื ข้นั ตอนการเข้าสู่โปรแกรม Notepad
ก. คลิกท่ีปมุ่ Start >> All Programs >> Windows >> Notepad
ข. คลิกเมนู File >> Open >> Notepad
ค. คลิกทีป่ ุม่ Start >> All Programs >> Accessories >> Notepad
ง. คลกิ เมนู Search >> Windows >> Open >>Notepad

6. ขอ้ ใดคอื ขนั้ ตอนการใช้เวบ็ เบราวเ์ ซอร์แสดงผลเว็บเพจ
ก. เปิดโปรแกรมเว็บเบราว์เซอร์ >> คลิกเมนู File >> Open >> คลิกปุ่ม Browse…
บนหน้าต่าง Open >> เลอื กตาแหนง่ ไฟล์ท่ถี ูกจัดเกบ็ >> เลอื กไฟล์เวบ็ เพจ >> Open
>> OK
ข. คลกิ ขวาท่ีไฟลเ์ ว็บเพจ >> คลกิ Open With >> คลิกเลอื กโปรแกรมเวบ็ เบราวเ์ ซอร์
ค. ดบั เบ้ลิ คลกิ ไฟลเ์ ว็บเพจ
ง. ถูกทกุ ขอ้

7. ขอ้ ใดคือขนั้ ตอนการใช้เทก็ ซ์อดิ เิ ตอร์ (Text Editor) เขยี นและแกไ้ ขโค้ด HTML
ก. คลิกท่ปี ุ่ม Start >> All Programs >> Notepad >> Accessories
ข. คลิกทีป่ มุ่ Start >> Accessories >> All Programs >> Notepad
ค. คลิกทปี่ ุม่ Start >> Notepad >> All Programs >> Accessories
ง. คลกิ ทป่ี ุ่ม Start >> All Programs >> Accessories >> Notepad

8. ขอ้ ใดคือการเขยี นคาสัง่ ได้ถูกตอ้ งหากต้องการแสดงข้อความ “เว็บเพจแรกของฉนั ”
บนไตเตลิ บาร์ (Title bar)
ก. <title>เว็บเพจแรกของฉัน</title>
ข. <html>เวบ็ เพจแรกของฉนั </html>
ค. <body>เวบ็ เพจแรกของฉนั </body>
ง. <head>เวบ็ เพจแรกของฉัน</head>

9. หากต้องการใสเ่ นื้อหาเวบ็ เพจจะตอ้ งกาหนดให้อยู่ภายในคาส่ังใด
ก. <title>…</title>
ข. <body>…</body>
ค. <html>…</html>
ง. <head>…</head>

10. ขอ้ ใดคือข้ันตอนการใช้โปรแกรมเวบ็ เบราว์เซอรแ์ สดงผลเว็บเพจ
ก. เปิดโปรแกรม Text Editor >> คลิกเมนู File >> Open >> คลกิ ไฟล์เวบ็ เพจ
ข. ดบั เบลิ้ คลกิ ไอคอนโปรแกรม Internet Explorer จะแสดงผลเวบ็ เพจทันที
ค. ดบั เบลิ้ คลกิ ไอคอนโปรแกรม Notepad
ง. ดบั เบ้ลิ คลิกไฟลเ์ ว็บเพจ

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

บรรณานุกรม

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

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

การเขียน Homepage ดว้ ย HTML. (2550). คน้ เม่ือ 25 ธันวาคม 2558, จาก
http://www.thainextstep.com/html/main.php

ประชา พฤกษ์ประเสริฐ. (2550). การสรา้ งเว็บเพจ (ดว้ ยภาษา HTML). กรงุ เทพฯ: ซัคเซส มเี ดยี .
พรพนารัตน์ ชมพูนุช. การสรา้ งเว็บไซต์ด้วยภาษา HTML. คน้ เมือ่ 7 มกราคม 2559, จาก

http://www.chaiwit.ac.th/pjcom/c40205/unit02/know02.pdf
ภุชงค์ จันทรเ์ ปลง่ . (2551). การเขยี นเวบ็ ไซต์ดว้ ยภาษา HTML (พมิ พค์ ร้ังท่ี 15). ปทมุ ธานี: มีเดยี

อินเทลลิเจนซ์ เทคโนโลยี.
สถาบนั ส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี. (2555). หนังสือเรียนรายวิชาพ้ืนฐาน เทคโนโลยี

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

ภาคผนวก

กระดาษคาตอบแบบทดสอบก่อนเรียน
เลม่ ที่ 2 เรม่ิ ต้นกับภาษา HTML

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

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

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

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

กระดาษคาตอบแบบทดสอบหลงั เรียน
เล่มท่ี 2 เร่ิมต้นกบั ภาษา HTML

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

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

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

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