• วิจัยและพัฒนา
• บริการ
• ข้อมูลเผยแพร่
• ข่าว
• ติดต่อสอบถาม
• ผังเว็บไซต์

Web Standard

เอกสารแนบ 4

มาตรฐานทางด้านเทคนิค

ข้อกำหนด

1. จะต้องมีการกำหนดชื่อของเอกสารหน้านั้น ไว้ในส่วนของแท็ก <title>...</title> โดยชื่อที่กำหนดขึ้นมาควรใช้ภาษาอังกฤษ และอธิบายถึงภาพรวมของเว็บไซต์นั้นๆ ให้ได้มากที่สุด ทั้งนี้เพราะชื่อของเอกสารที่กำหนดไว้นี้ จะส่งผลให้โปรแกรมเก็บข้อมูลของเว็บไซต์ที่ให้บริการค้นหาข้อมูล (Search Engine) สามารถตรวจพบ และเก็บชื่อที่กำหนดให้กับเอกสาร เข้าไว้ในระบบฐานข้อมูล เพื่อใช้เป็นคีย์เวิร์ด สำหรับการค้นหาเว็บไซต์ต่อไป
2. ควรกำหนดคีย์เวิร์ดให้กับเอกสารนั้น ๆ โดยการใช้แท็ก <meta name="keywords" content="คีย์เวิร์ดสำหรับโฮมเพจ"> ตัวอย่างเช่น <meta name="keywords" content="NECTEC, ECTI, Electronics, Computing, Telecommunication, Information"> เป็นต้น ซึ่งคีย์เวิร์ดนี้จะเป็นข้อมูลอีกส่วนหนึ่ง ที่โปรแกรมเก็บข้อมูลของเว็บไซต์ค้นหาข้อมูล (Search Engine) บางชนิด เก็บไปทำเป็นคีย์เวิร์ด สำหรับการค้นหาเว็บไซต์ ดังนั้นถ้าต้องการให้เอกสารถูกตรวจพบโดยเว็บไซต์ ที่เป็น Search Engine หลายๆ ชนิด เราควรจะใส่ทั้งชื่อของเอกสาร และใส่คีย์เวิร์ดในแท็ก <meta name="keywords" ...>
3. เอกสาร HTML ทุกหน้าจะต้องมีการกำหนดชุดของตัวอักษร (Character Set) โดยจะต้องกำหนดเป็นชุด TIS-620 ซึ่งการกำหนดชุดของตัวอักษรในเอกสารแต่ละหน้านั้นจะใช้รูปแบบเป็น <meta http-equiv="Content-Type" content="text/html;charset=TIS-620">
4. ในเอกสารที่จะนำขึ้นเผยแพร่ บนระบบเครือข่ายอินเทอร์เน็ตนั้น จะต้องกำหนดชนิดของฟอนต์ที่ใช้ โดยการใช้แท็ก <font face="ชื่อของฟอนต์"> โดยเฉพาะเว็บไซต์ที่มีการใช้ข้อมูลที่เป็นภาษาไทย จะต้องกำหนดชื่อฟอนต์ที่มีอยู่ในเครื่อง Macintosh และ PC พร้อมทั้งระบุขนาดที่เหมาะสมด้วย
   • ในหน้าภาษาไทยควรจะกำหนดเป็น <font face=" "Tahoma, Thonburi">...</font>
   • ในหน้าภาษาอังกฤษควรจะกำหนดเป็น <font face="Arial, Helvetica">...</font>
   • ในการใช้แท็ก <font face="...">...</font> นั้น ให้ระบุไว้ที่ตอนต้นของเอกสารครั้งเดียว ไม่ต้องเขียนหลายรอบ เพราะจะเป็นการเพิ่มขนาดของไฟล์เอกสาร HTML โดยไม่จำเป็น ยกเว้นเมื่อมีการใช้แท็ก <table> เพื่อกำหนดการแสดงผลแบบตารางจะต้องมีการระบุ <font face="..."> ไว้หลังแท็ก <td> ทุกแท็กของตารางนั้น
   • ในกรณีที่มีการเปลี่ยนขนาดของฟอนต์ ไม่ต้องกำหนด <font face="...">...</font> ให้ใช้แท็ก <font size="...">...</font> ได้ทันที
5. สำหรับการใช้งาน ข้อมูลประเภทรายการ หรือตารางในเอกสาร โดยการใช้แท็ก <ol>, <ul>, <dl> และ <table> ไม่ควรใช้ซ้อนกันเกินสองระดับ เพราะอาจเป็นผลทำให้ เอกสารนั้นกว้างเกินหน้าจอ ทำให้เกิดสกรอลล์บาร์ทางด้านล่าง ของโปรแกรมเว็บเบราว์เซอร์ ซึ่งจะทำให้ผู้ใช้ ต้องทำการเลื่อนดูข้อมูล ที่ขาดหายไป และยังทำให้การพิมพ์เอกสารหน้านั้นออกมาทางเครื่องพิมพ์ ข้อความบางส่วนจะขาดหายไป (ส่วนที่เกินหน้าจอ)
6. ในการเขียน HTML นั้น ควรจะเขียนโค้ด ให้เป็นระเบียบ และมีคอมเมนต์ อธิบายไว้เป็นระยะ โดยความยาวของ HTML ในแต่ละบรรทัด ไม่ควรเกิน 80-90 ตัวอักษร เพื่อให้สามารถอ่านข้อมูล และปรับปรุงแก้ไขได้ง่าย นอกจากนั้นการตัดคำภาษาไทยของเอกสารหน้านั้นๆ ยังสามารถทำได้ อย่างถูกต้องอีกด้วย
7. การนำภาพมาประกอบในเอกสาร โดยการใช้แท็ก <img ...> นั้น จะต้องกำหนดความกว้าง และความสูงที่ถูกต้องของภาพนั้นไว้ด้วยเสมอ เพราะจะทำให้การจัดโครงร่างของเอกสาร ทำได้อย่างรวดเร็ว และที่สำคัญ จะต้องกำหนดแอทริบิวต์ alt ไว้ภายในแท็ก <img ...> เพื่อแสดงข้อความอธิบายสำหรับเว็บเบราว์เซอร์บางชนิด ที่ไม่สามารถแสดงข้อมูลที่เป็นรูปภาพได้
8. ในการตั้งชื่อแฟ้มข้อมูลและชื่อไดเร็กทอรี่ ที่ใช้ในการเก็บข้อมูล จะต้องใช้ชื่อภาษาอังกฤษที่ไม่ยาวเกินไปและสื่อความหมาย โดยชื่อประกอบด้วยตัวอักษรตัวเล็ก ไม่มีการเว้นวรรคในระหว่างชื่อ และนามสกุลของไฟล์เอกสาร HTML จะต้องเป็น .html หรือ.htm และแฟ้มข้อมูลแรกที่ต้องการให้ผู้เข้าชม เห็นควรจะตั้งชื่อเป็น "index" ในทุกๆ ไดเร็กทอรี่จะต้องมีไฟล์ชื่อนี้อยู่ด้วย เพื่อไม่ให้ผู้ใช้ เห็นแฟ้มข้อมูลทั้งหมดที่อยู่ในไดเร็กทอรี่นั้น เช่น ในไดเร็กทอรี่ที่เก็บภาพควรจะสร้างไฟล์เปล่าๆ แล้วบันทึกไว้ในชื่อ "index" เพื่อไม่ให้ผู้เข้าชม มองเห็นรายชื่อของไฟล์ทั้งหมด ที่อยู่ในไดเร็กทอรี่นั้น เป็นต้น
9. ผู้เข้าชมเว็บไซต์ควรได้รับแจ้งความต้องการใช้งานโปรแกรมปลั๊กอิน พร้อมทั้งควรมีเส้นเชื่อมเพื่อการถ่ายโอนโปรแกรมนั้นๆ ได้โดยสะดวก

คำแนะนำ

1. การนำรูปภาพมาประกอบในเอกสาร HTML นั้น ถ้ารอบๆ ตำแหน่งที่วางรูปภาพมีตัวอักษร ควรจะกำหนดระยะห่างจากขอบของรูปทุกด้าน โดยการใช้แอทริบิวต์ vspace="ระยะห่างเป็นพิกเซล" hspace="ระยะห่างเป็นพิกเซล" และถ้ารูปนั้นเป็นตัวเชื่อมโยงไปยังเอกสารอื่น ควรจะกำหนดความกว้างของกรอบ โดยใช้แอทริบิวต์ border="ความกว้างเป็นพิกเซล" เช่น <img alt="VIDEO" src="https://www.nectec.or.th/graphics/video-56.gif" width= "56" height= "20" border="0" hspace="3" vspace="3">
2. ในระหว่างการพัฒนาโฮมเพจ ควรจะมีการทดสอบการแสดงผล โดยการใช้ โปรแกรมเว็บเบราว์เซอร์หลายๆ ชนิด เช่น
   • โปรแกรม Mozilla Firefox บน PC
   • โปรแกรม Internet Explorer บน PC
   • โปรแกรม Mozilla Firefox บน Macintosh
   • โปรแกรม Internet Explorer บน Macintosh
   • โปรแกรม Safari บน Macintosh
   • ทุกเว็บเบราว์เซอร์ใหม่ๆ ที่สามารถทดสอบได้
3. ในการทดสอบการแสดงผล ควรทดสอบที่ความละเอียดของหน้าจออย่างต่ำ 800 x 600 จุด และแนะนำให้ใช้ความละเอียดของหน้าจอ 1024 x 768 จุด เพื่อความเหมาะสมและสวยงามที่สุด
4. ควรทดสอบระยะเวลาที่ใช้ในการดูเว็บเพจ โดยทดสอบด้วยการใช้โมเด็มความเร็ว 56 kbps ซึ่งเว็บเพจที่พัฒนาขึ้นควรจะเริ่มแสดงผลข้อมูลไม่เกิน 10 วินาทีหลังจากได้รับการร้องขอ (Request) และแสดงผลได้สมบูรณ์ไม่เกิน 30 วินาที เนื่องจากผู้เข้าชมเว็บเพจที่พัฒนาขึ้น อาจจะมาจากต่างสถานที่กัน ใช้โมเด็มความเร็วต่างกัน ผู้พัฒนาควรทดสอบการเข้าชมเว็บเพจ จากโมเด็มที่มีความเร็วที่ครอบคลุมถึงผู้ใช้ส่วนใหญ่
5. การตั้งชื่อที่อยู่ของอีเมลของหน่วยงาน ให้ตั้งชื่อเป็นกลาง "webmaster@หน่วยงาน/บริการ.nectec.or.th" หรือ "webmaster-หน่วยงาน@nectec.or.th" โดยเสนอให้จัดแสดงที่อยู่ของอีเมล ในลักษณะภาพลักษณ์ (Image) เพื่อป้องกันการเก็บรวบรวมอีเมล โดยอัตโนมัติเพื่อการส่งอีเมลขยะ
6. การนำภาพมาประกอบในเอกสาร โดยการใช้แท็ก <img ...> นั้น สามารถกำหนดแอทริบิวต์ Title ไว้ภายในแท็ก <img ...> เพื่อแสดงข้อความอธิบายสำหรับเว็บเบราวเซอร์บางชนิด ที่ไม่สามารถแสดงข้อมูลประกอบภาพได้

::

ผู้รับผิดชอบ SETEC โทร. 02-564-6900 ต่อ 2485 - 2487  

สงวนลิขสิทธิ์ โดยศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ พรบ.ลิขสิทธิ์ พ.ศ.2537
112 อุทยานวิทยาศาสตร์ประเทศไทย ถนนพหลโยธิน ตำบลคลองหนึ่ง อำเภอคลองหลวง จังหวัดปทุมธานี 12120
โทร.02-564-6900 ต่อ 2346 - 2355