ข้อแนะนำการพัฒนาเว็บเพจ

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

1. ชื่อของเอกสารเว็บ

เอกสารเว็บทุกไฟล์ ควรมีการกำหนดชื่อเอกสาร ไว้ในส่วนของแท็ก TITLEโดยชื่อที่กำหนดขึ้นมานี้ จะเป็นภาษาไทย หรือภาษาอังกฤษก็ได้ แต่ควรมีความหมายอธิบายถึง ภาพรวมของเว็บเพจนั้นๆ ให้ได้มากที่สุด เนื่องจากข้อความส่วนนี้ จะเป็นข้อความที่จะถูกนำมาใช้เป็นคำสำคัญ (Keyword) ในการสืบค้นข้อมูลจาก Search Engine ด้วยเช่น เช่น ชื่อเอกสารเว็บของโครงการคลังข้อมูลอิเล็กทรอนิกส์ของเครือข่าย SchoolNet สามารถกำหนดชื่อของเอกสารเว็บได้ดังนี้ Digital Library for Thai SchoolNet

2. คีย์เวิร์ดของเว็บเพจ

เว็บไซต์ที่นำเสนอในเครือข่ายอินเทอร์เน็ต ย่อมต้องการให้เป็นที่รู้จักกันอย่างแพร่หลาย โดยเฉพาะเว็บไซต์ท่า (Search Engine Website) ชั้นนำ เช่น Yahoo, Google, SiamGuru วิธีหนึ่งที่จะช่วยให้เว็บไซต์ท่ารู้จักเว็บไซต์ที่พัฒนาขึ้นมา คือการกำหนดคีย์เวิร์ดให้กับเว็บเพจนั้นๆ โดยใช้แท็ก
<META NAME = "Keyword" CONTENT = "คีย์เวิร์ด 1, คีย์เวิร์ด 2,…">
คีย์เวิร์ดที่กำหนดขึ้นมานี้ สามารถกำหนดได้ทั้งภาษาไทย และภาษาอังกฤษ สามารถกำหนดคีย์เวิร์ดได้มากกว่า 1 ตัว โดยเขียนคั่นด้วยเครื่องหมายจุลภาค (,) เช่น
<META NAME = "Keyword" CONTENT = "การศึกษา, ประเทศไทย, Education, Thailand">

3. การควบคุมการเข้ารหัสภาษาไทย

ปัจจุบันบราวเซอร์แต่ละตัว จะตรวจสอบการแสดงผลภาษาด้วยค่าการเข้ารหัสภาษา (Character Set) และหากเอกสารใด กำหนดค่าผิดพลาด หรือไม่กำหนด อาจจะทำให้โปรแกรมบราวเซอร์แปลความหมายผิดพลาด และแสดงผลภาษาผ่านบราวเซอร์ไม่ถูกต้อง ดังนั้นเพื่อให้การแสดงผลภาษาไทยผ่านบราวเซอร์ต่างๆ แสดงผลได้อย่างถูกต้อง ควรกำหนดค่าการเข้ารหัสภาษาไทยสำหรับเอกสารเว็บ ด้วยแท็ก
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=TIS-620">


4. รูปแบบของเว็บเพจ

สำหรับรูปแบบของเอกสารนั้น ในส่วนของเนื้อหา ตัวอักษร และพื้นหลัง (Background) ควรใช้สีที่ดูแล้วสบายตาในการอ่าน ยกเว้นหัวข้อหรือข้อความบางส่วนที่ต้องการเน้น สามารถใช้สีอื่นได้ตามความเหมาะสม

5. การตั้งชื่อไฟล์

ชื่อไฟล์สามารถประกอบด้วยตัวอักษรภาษาอังกฤษตัวพิมพ์เล็ก (a - z) และตัวเลข (0 - 9) ผสมกันได้ แต่ไม่ควรยาวจนเกินไป และสื่อความหมายถึงเนื้อหาของเว็บเพจด้วย โดยนามสกุลของไฟล์เอกสาร HTML ต้องเป็น .html หรือ .htm ทั้งหมด นอกจากนี้ไฟล์เอกสาร HTML ไฟล์แรก หรือไฟล์ที่ทำหน้าที่เป็น Homepage จะต้องตั้งชื่อเป็น index.html เท่านั้น

6. การกำหนดความกว้างของเว็บเพจ

ความกว้างของเว็บเพจในกรณีที่เป็นตาราง หรือเฟรมสามารถกำหนดได้ 2 หน่วยคือ หน่วย pixel และหน่วยเปอร์เซ็นต์ (%) โดยในหน่วยของ pixel นั้นไม่ควรเกิน 750 pixel (สำหรับการนำเสนอผ่านจอภาพ 800 x 600 pixels) และในหน่วยของเปอร์เซ็นต์ ไม่ควรเกิน 90% เพื่อไม่ให้เกิดสกอล์บาร์ (Scrollbar) ทางด้านล่างของโปรแกรมเว็บบราวเซอร์

7. การกำหนดฟอนต์

เอกสารเว็บที่เป็นภาษาไทย หรือภาษาไทยผสมภาษาอังกฤษ นอกจากจะต้องกำหนดแท็กควบคุมการเข้ารหัสตามข้อ 3 แล้วควรกำหนดแบบอักษร (Font) ให้กับข้อความในเอกสารเว็บด้วย โดยการใช้แท็ก
<FONT FACE ="ชื่อฟอนต์ที่1, ชื่อฟอนต์ที่ 2, … ">
และควรกำหนดฟอนต์ที่สามารถแสดงผลได้ทั้งเครื่องคอมพิวเตอร์ระบบ Macintosh และ PC พร้อมทั้งระบุขนาดที่เหมาะสมด้วย

รูปแบบ การกำหนดชื่อฟอนต์ที่เหมาะสมสำหรับข้อมูลที่เป็นภาษาไทย ได้แก่
<FONT FACE = "MS Sans Serif, Microsoft Sans Serif, Thonburi">…</FONT>

รูปแบบ การกำหนดชื่อฟอนต์ที่เหมาะสมสำหรับข้อมูลที่เป็นภาษาอังกฤษ ได้แก่
<FONT FACE = "Arial, Helvetica, Times">…</FONT>

โดยขนาดที่เหมาะสม ควรจะอยู่ในช่วง 1 - 3 เช่น หัวเรื่องใช้ขนาดเท่ากับ 3 ส่วนเนื้อหาใช้ ขนาดอักษรเทากับ 1 หรือ 2 เป็นต้น โดยมีรูปแบบแท็ก คือ
<FONT SIZE="1">…</FONT>
ทั้งนี้การใช้แท็ก FONT นั้น ให้ระบุไว้ที่ตอนต้นของเอกสารครั้งเดียว ไม่ต้องเขียนหลายรอบ เพราะจะเป็นการเพิ่มขนาดของไฟล์เอกสาร HTML โดยไม่จำเป็น ยกเว้นเมื่อมีการใช้แท็ก TABLE จะต้องมีการระบุ FONT ไว้ ในทุกๆ แท็ก TD และในกรณีที่มีการเปลี่ยนขนาดของฟอนต์ไม่ต้องกำหนด FONT FACE ให้ใช้แท็ก FONT SIZE ได้เลย

8. การแสดงข้อมูลประเภทรายการหรือตาราง

การสร้างลำดับรายการ (Order List/Unorder List) ซึ่งจะเป็นการใช้แท็ก OL, UL, DL ไม่ควรจะใช้ซ้อนกัน หลายชั้นเกินไป เพราะอาจเป็นผลทำให้ เอกสารนั้นกว้างเกินหน้าจอ ทำให้เกิดสกอล์บาร์ทางด้านล่างของโปรแกรมเว็บบราวเซอร์ ซึ่งจะทำให้ผู้ใช้ ต้องทำการเลื่อนดูข้อมูลที่ขาดหายไป และทำให้เมื่อสั่งพิมพ์เว็บเพจนั้นออกมาทางเครื่องพิมพ์ ข้อความบางส่วนจะขาดหายไป (ส่วนที่เกินหน้าจอ)

9. การจัดการเกี่ยวกับภาพ

9.1) ภาพควรมีความสัมพันธ์กับเนื้อหา โดยคำนึงถึงสาระสำคัญของเนื้อหาเป็นหลัก
9.2) ควรมีจำนวนภาพพอเหมาะไม่มากเกินไป เพื่อความรวดเร็วในการเคลื่อนย้ายข้อมูล (transfer) ความสวยงามของโฮมเพจ
9.3) เพื่อให้สามารถใช้ได้กับจอภาพของผู้เข้าชมโฮมเพจซึ่งอาจมีขนาดจอภาพต่างๆ กัน ควรใช้ภาพประกอบขนาดเล็ก (thumbnail) และสามารถคลิกที่ภาพเล็กเพื่อแสดงภาพที่ใหญ่ขึ้นได้
9.4) เลือกใช้ฟอร์แมตของภาพที่เหมาะสม เช่น ภาพสี หรือภาพที่ต้องการแสดงถึงความคมชัดของเนื้อหา ควรใช้ฟอร์แมต .JPG ในขณะที่ภาพขาวดำ หรือภาพที่ไม่เน้นรายละเอียดเกี่ยวกับสี ควรใช้ฟอร์แมต .GIF
9.5) ภาพที่มีขนาดโต แต่ไม่มากนัก ควรกำหนดรูปแบบการแสดงผลเป็น Interlaced หรือ Progressive ตามฟอร์แมตของภาพที่เลือกใช้งานด้วย
9.6) ภาพที่มีขนาดโตมาก ควรแบ่งซอยเป็นภาพเล็กๆ แล้วใช้เทคนิคการประกบภาพด้วยตาราง
9.7) ไม่ควรใช้ภาพโตเกินไปหลายๆ ภาพในหน้าเอกสารเว็บแต่ละหน้า
9.8) ควรกำหนดแอทริบิวท์ WIDTH และ HEIGHT ให้กับภาพ (หรือในแท็ก img) ด้วย เพื่อระบุความกว้างและความยาวของรูปภาพให้ เว็บบราวเซอร์รู้ซึ่งมีผลให้การปรากฏภาพบนจอเร็วขึ้น
9.9) ควรกำหนดแอทริบิวท์ ALT ให้กับภาพ (หรือในแท็ก img) เพื่อแสดงข้อความอธิบายสำหรับเว็บบราวเซอร์ที่ไม่สามารถแสดงข้อมูลที่เป็นรูปภาพได้ โดยข้อความควรมีความหมายเหมาะสมกับภาพสามารถอ่านแล้วเข้าใจหรือเห็นภาพ ตัวอย่าง ของ Image tag
<IMG alt="VIDEO" src="video-56.gif" width=56 height=20 border=0>

10. ขนาดข้อมูลที่เหมาะสม

ควรจะควบคุมให้มีขนาดไม่เกิน 150 กิโลไบต์ (ซึ่งจะใช้เวลาประมาณ 60 วินาที ในการเคลื่อนย้ายข้อมูล) เพราะหากมีขนาดใหญ่กว่า 150 กิโลไบต์ จะเสียเวลาในการเคลื่อนย้ายข้อมูลมาก ทำให้ผู้เข้าชมเกิดความเบื่อได้

11. การทดสอบการแสดงผล

ควรแสดงผลด้วยความสวยงามที่ความละเอียดของหน้าจออย่างต่ำ 800 x 600 จุด และควรทดสอบกับบราวเซอร์หลายๆ ค่าย หลายๆ รุ่น


ข้อมูลเพิ่มเติมศึกษาได้จาก http://www.nectec.or.th/courseware/internet/web-tech/0014.html



โดย : นาย บุญเลิศ อรุณพิบูลย์, NECTEC, วันที่ 13 กุมภาพันธ์ 2545