1. ใบความรู้ที่ 2.4
ขั้นตอนการสร้างเว็บเพจด้วย HTML
ในการสร้างเว็บเพจ สามารถสรุปขั้นตอนได้ ดังนี้
1. สร้าง Folder เพื่อเป็นที่เก็บข้อมูลต่างๆ ของเว็บ
2. สร้างเว็บเพจด้วยโปรแกรม Notepad และทาการจัดเก็บในโฟล์เดอร์ที่สร้างขึ้นในข้อ 1
3. ดูผลลัพธ์จากการสร้างเว็บเพจ ด้วยโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer
1. สร้าง Folder เพื่อใช้สาหรับเก็บข้อมูล
การทางานในระบบคอมพิวเตอร์ ข้อมูลต่างๆ ไม่ว่าจะเป็นเอกสาร รูปภาพ เสียงเพลง จะถูก
เก็บลงระบบคอมพิวเตอร์ในรูปแบบของ แฟ้มข้อมูลหรือที่เรียกกันว่า ไฟล์ (File) โดยไฟล์แต่ละประเภท
จะมีนามสกุล (Extension) ที่แตกต่างกันไป ตามลักษณะของข้อมูลและโปรแกรมที่สร้างข้อมูลนั้น เช่น
ไฟล์เอกสารที่พิมพ์ด้วยโปรแกรม Microsoft Word จะมีนามสกุลคือ .doc
ไฟล์รูปภาพอาจมีได้หลายนามสกุล แต่ประเภทของรูปภาพที่นิยมใช้ในการสร้างเว็บเพจคือ
.jpg และ .gif
ไฟล์เสียงเพลง จะมีนามสกุลดังนี้ เช่น .mid , .wav หรือ .mp3 เป็นต้น
ไฟล์ข้อมูลเว็บเพจ จะมีได้หลายนามสกุล เช่น .htm .html .php .asp
การเก็บข้อมูลต่างๆ ในระบบคอมพิวเตอร์นั้นเพื่อความเป็นระเบียบ ความสะดวกในการทางาน
และการค้นหาข้อมูล ควรสร้างโฟลเดอร์ (Folder) ขึ้นใหม่ นิยมสร้างที่ไดร์ฟ D: โดยตั้งชื่อ folder
งานเป็นชื่อของนักเรียน-ชั้น เช่น samorn5-1 เป็นต้น
2. เริ่มต้นสร้างเว็บเพจด้วยโปรแกรม Notepad
โปรแกรม Notepad เป็นโปรแกรมที่มีอยู่ในเครื่องคอมพิวเตอร์ทุกเครื่องเป็นโปรแกรมพื้นฐาน
การเรียกใช้งานทาดังนี้

2. 1. เปิดโปรแกรม Notepad
2. เริ่มต้นกันด้วยการพิมพ์ข้อความตามดังนี้
3. พิมพ์ แท็ก head เพื่อกาหนดรายละเอียดในส่วนหัวของเอกสาร

3. 4. รายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก head) ก็คือ แท็กไตเติ้ล
title ซึ่งก็คือชื่อเรื่องนั่นเอง
5. พิมพ์แท็ก body ซึ่งเป็นแท็กที่สาคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะ
ถูกใส่ไว้ภายในแท็กนี้ทั้งหมด

4. 6. แล้วใส่ชื่อให้เอกสารได้เลยค่ะ ตรงแท็ก title จ้า
2.6 บันทึกข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as ..
2.6.1 เข้าไปใน folder ที่นักเรียนสร้างไว้เป็นชื่อของนักเรียน- ชั้น เช่น samorn5-1
2.6.2 ตั้งชื่อไฟล์เป็น index.html (อย่าลืม ! ใส่นามสกุลให้เอกสารทุกครั้ง)
หมายเหตุ :
1. ชื่อไฟล์แรกของเว็บเพจควรตั้งเป็นชื่อ index.html โดยให้พิมพ์นามสกุลของไฟล์
ลงไปด้วย .html หรือ .htm ต่อท้ายชื่อไฟล์ทุกครั้ง
2. การใส่ Comment <!-- ... --> Comment หรือข้อความหมายเหตุ มีประโยชน์หลายอย่าง
เช่น ใช้เพื่อเตือนความจา กากับ code แต่ละส่วนที่เราเขียนว่าเพื่อทาอะไร ทาให้อ่านและแก้ไข code
ภายหลังได้ง่าย ข้อความใน tag comment จะไม่ถูกแสดงออกมาให้ผู้ใช้งานได้เห็น จะเห็นเมื่อมีการ
view source code เท่านั้น

5. 2.7 จากนั้นเปิด folder ที่เก็บเว็บเพจไว้เมื่อสักครู่ แล้วจะเห็นไฟล์ที่มีหน้าตามแบบนี้
หรือ หรือ
(ถ้าเห็นไอคอนแตกต่างไปจากนี้ก็ไม่ต้องตกใจ! ขึ้นอยู่เว็บบราวเซอร์หลักที่เราใช้อยู่)
2.8 ทดสอบผลการทางานด้วยโปรแกรม Web Browser
เมื่อทาการสร้างเว็บเพจด้วยภาษา HTML และทาการจัดเก็บไฟล์ดังกล่าวแล้ว ให้ทดสอบผล
การทางานได้โดยการใช้โปรแกรม Web Browser แสดงผลการทางานดังกล่าว ในที่นี้เราจะใช้
โปรแกรม Internet Explorer โดยการคลิกขวา หรือ ดับเบิ้ลคลิกไอคอน เพื่อดูผลงานได้เลยค่ะ
ฉะนั้นจะเห็นว่า โปรแกรมทั้งสองคือ Notepad และ Internet Explorer จะทางานคู่กันเสมอ
คือ Notepad ใช้สร้ างเว็บ เพจและแก้ไข ส่ว นโปรแกรม Internet Explorer ใช้ส าหรับดูผ ล
การทางานนั่นเอง (ซึ่งสามารถกดปุ่ม F5 เพื่อรีเฟรชข้อมูลเว็บได้ทันที)
========++++++++++++++++++==============