ขั้นตอนการเขียนโปรแกรมด้วยภาษา HTML

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

1.1 สร้างโฟลเดอร์ (folder) ไว้ที่ My Document โดยตั้งชื่อเป็นชื่อของนักเรียน (เป็นภาษาอังกฤษ) เช่น My Documnents/shanikarn

1.2 ภายในโฟลเดอร์ shanikarn ให้สร้างโฟลเดอร์ย่อยที่ใช้ในการจัดเก็บภาพต่างๆ ที่จะนำมาแสดงในเว็บเพจ โดยตั้งชื่อว่า images เช่น My Documents/shanikarn/images

2 .1 คลิกที่ Start

2.2 คลิกที่ Program

2.3 คลิกที่ Accessories

2.4 คลิกที่ Notepad

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

ภาพที่ 4-1 แสดงตัวอย่างการเขียนโปรแกรมภาษา HTML ด้วย Notepad

4.1 หลังจากพิมพ์ข้อมูลต่างๆ เสร็จ ให้จัดเก็บข้อมูลโดยคลิกที่เมนู File แล้วเลือก save

ภาพที่ 4-2 แสดงตัวอย่างวิธีการจัดเก็บเอกสาร

4.2 ในการจัดเก็บครั้งแรก โปรแกรมจะขึ้นกรอบมาให้ตั้งชื่อให้กับเอกสาร ดังตัวอย่างในภาพที่ 3-3

ภาพที่ 4-3 แสดงวิธีการตั้งชื่อให้กับเอกสาร HTML

ให้เลือกเก็บข้อมูลดังต่อไปนี้

- ข้อมูลในช่อง Save in : ให้เลือกไปที่โฟลเดอร์ที่เราสร้างไว้ในตอนแรก (shanikarn)

- ข้อมูลในช่อง File name: ให้ตั้งชื่อว่า test.htm

- ข้อมูลในช่อง Save as type : ให้เลือกเป็น All Files

- จากนั้นให้คลิกที่ปุ่ม Save

5.1 เปิดโปรแกรม Internet Explorer

5.2 คลิกที่เมนู File เลือก Open ดังภาพด้านล่าง

5.3 จากข้อ 5.2 จะปรากฏหน้าจอดังภาพด้านล่าง ให้คลิกที่ปุ่ม Browse...

5.4 จากข้อ 5.3 จะปรากฏหน้าจอดังภาพด้านล่าง ให้ทำการเลือกเปิดเอกสารที่ได้ทำการ save เอาไว้ในข้อ 4 (test.htm)

จากรูป ให้

- เลือกไฟล์ HTML ที่เก็บไว้ในช่อง Look in:

- ในช่อง Files of type: เลือกเป็นแบบ All Files ถึงจะมองเห็นเอกสารที่เป็น HTML

- คลิกเลือกชื่อไฟล์เอกสารที่ต้องการเปิด

- คลิกปุ่ม Open จะปรากฎผลดังนี้

คลิกที่ปุ่ม O.K. เครื่องคอมพิวเตอร์จะทำการเรียกโปรแกรมเว็บบราวเซอร์ขึ้นมาพร้อมทั้งแสดงผลลัพธ์ของข้อมูลตามที่ต้องการ ดังภาพ

ขอบคุณข้อมูลจากhttp://www.upwebgrade.net/