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

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

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

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

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

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

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

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

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

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

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

ระบุที่มาของเว็บเพจ

ท้ายสุดของเว็บเพจแต่ละหน้า ควรระบุที่มาของเว็บเพจด้วย ซึ่งมีรูปแบบการเขียนดังนี้
ที่มา: เรียบเรียงโดย ชื่อนามสกุลผู้เรียบเรียงบทความนี้ วันที่ที่เรียบเรียง
หรือสามารถดูตัวอย่างได้จาก http://www.school.net.th/library

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

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

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

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

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

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

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

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

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

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

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

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

 


Free Web Hosting