ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytเครื่องมือพื้นฐานสำหรับเขียนโปรแแกรม

การเขียนไฟล์เว็บเพจตามตัวอย่างนี้ต้องใช้โปรแกรม TextEditor ที่มีภายในเครื่องแล้วคือ Notepad ซึ่งจะมีเทคนิคพิเศษในการใช้งานเพิ่มเติม

ytSetting : การตั้งค่าพื้นฐาน

การตั้งค่าภาษาไทย

การเปิดโปรแกรม Notepad ขึ้นมาทำงานสามารถเปิดได้จากการคลิกที่ปุ่ม Start > Programs > Accessories > Notepad หรือจะใช้คำสั่ง Run > Notepad ก็ได้เช่นเดียวกันซึ่งจะได้หน้าต่างการทำงานดังภาพล่าง

Notepad_01

ก่อนการใช้งานต้องมีการปรับแต่งฟอนต์อีกเล็กน้อย เพื่อให้สังเกตเห็นได้เมื่อมีการป้อนข้อความผิดพลาดในหน้าต่างโปรแกรม ด้วยการกำหนดให้ใช้ฟอนต์ MS Sans Serif ซึ่งพิมพ์อักษรไทยได้ ขนาด 10-12 พอยต์ (แล้วแต่สายตาคนทำมองได้ชัดเจน ยิ่งโตมากพื้นที่การทำงานก็จะลดลงต้องเลื่อนจอ (Scroll) ไปทางขวามาก ดังภาพข้างล่างนี้

Font Setting

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

Edit web page with Notepad
Click to TOP

การบันทึกข้อมูล

ที่สำคัญอย่างยิ่งคือการจัดเก็บไฟล์ (Save) เพราะ Notepad เป็น Text Editor ค่าปกติของโปรแกรมเมื่อจัดเก็บไฟล์จะมีสกุลเป็น .txt เสมอ เมื่อต้องการจัดเก็บเว็บเพจที่มีสกุลของไฟล์เป็น .htm หรือ .html จะต้องเปลี่ยนชนิดของการจัดเก็บจาก Text Documents (*.txt) เป็น All Files และกำหนดชื่อไฟล์พร้อมสกุลเป็น .html ดังตัวอย่างกำหนดชื่อเป็น notepad.html

Save As

เมื่อจัดเก็บได้ถูกต้องบนแถบไตเติ้ลบาร์ของ Notepad จะปรากฏชื่อไฟล์เป็น notepad.html ถูกต้องดังภาพล่าง

notepad.html

เมื่อใช้บราวเซอร์ Internet Explorer เปิดไฟล์ ถ้ามีการตั้งชื่อไฟล์และไม่เปลี่ยนชนิดไฟล์จะได้ไฟล์ชื่อ notepad.txt ถ้ากำหนดชื่อและสกุลไฟล์ถูกต้องแต่ไม่เปลี่ยนชนิดไฟล์จะได้ไฟล์ชื่อ nodepad.html.txt ดังวงกลมแดงในภาพซึ่งจะไม่สามารถแสดงผลได้ ต้องเปิดได้เฉพาะไฟล์ notepad.html เท่านั้น

Open with IE

การแสดงผลเว็บเพจ

และนี่คือการสแดงผลจากไฟล์ที่เราจัดเก็บไว้ถูกต้องคือ notepad.html จะปรากฏข้อความบนไตเติ้ลบาร์และในส่วนเนื้อหาถูกต้องตามที่เขียนทุกประการ

Show in IE

เทคนิคสุดท้ายที่ขอแนะนำเพื่อป้องกันการผิดพลาด (และพบบ่อยมากในมือใหม่หัดเขียนเว็บ) คือ

  • การเขียนคำสั่ง HTML ทุกคำสั่ง ระหว่างเครื่องหมาย < กับตัวอักษรตัวแรกของคำสั่งต้องชิดกันไม่มีช่องว่างเด็ดขาด เช่น <HEAD> ถูกต้อง แต่ถ้าเป็นแบบนี้ < HEAD > ผิดแสดงผลไม่ได้ (ช่องว่างหลังคำสั่งก่อนถึงเครื่องหมาย > มีได้ไม่มีผลอะไรต่อการแสดงผล)
  • การเขียนเครื่องหมายฟันหนู " (Double Quote) จะต้องเกิดจากการเคาะแป้นพิมพ์เพียงครั้งเดียวได้ฟันคู่ ห้ามใช้การพิมพ์ฟันเดี่ยว ' (Single Quote) 2 ครั้งติดกันเด็ดขาด เพราะการแสดงผลจะไม่ถูกต้อง (ผิดความหมายของไวยากรณ์ในภาษา HTML)

Click to TOP
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP