การพัฒนาเว็บไซต์ภาษาไทย ยังมีประเด็นเนื้อหาตกหล่น จากที่ได้ศึกษาเอกสารหลายๆ เล่ม และจากประสบการณ์ของผู้เขียนเองจะพบว่า มีเว็บไซต์ภาษาไทยจำนวนมากที่แสดงผลภาษาไทยไม่ถูกต้อง กลายเป็นอักษรขอมอ่านไม่ออก หรือภาพไม่แสดง การแสดงผลแตกต่างกันไปเมื่อดูจากจอที่มีความละเอียดต่างกัน การค้นหาข้อมูลผ่านโปรแกรมสืบค้น (Search Engine) ต่างๆ ไม่ปรากฏว่ามีข้อมูลของเว็บไซต์นั้นๆ จึงได้รวบรวมเทคนิคเหล่านี้มานำเสนอเป็นแนวทางดังนี้
การตั้งชื่อโฟลเดอร์และไฟล์ |
เป็นปัญหาหญ้าปากคอก ที่มักจะมีและพบบ่อยๆ จนกระทั่งทำให้เว็บไม่สามารถแสดงผลได้เลยทีเดียว ชื่อโฟลเดอร์และไฟล์เอกสารบนเว็บ จะต้องประกอบด้วยตัวอักษรภาษาอังกฤษและตัวเลข ผสมกันได้ (ห้ามใช้ชื่อภาษาไทยเด็ดขาด) แต่ไม่ควรจะยาวเกินไปและสื่อความหมายได้ มีข้อกำหนดดังนี้
- ควรใช้ตัวอักษรเป็นตัวพิมพ์เล็ก a-z หรือตัวเลข 0-9 หรือผสมกัน
- ห้ามเว้นวรรคในชื่อไฟล์หรือโฟลเดอร์ ถ้าต้องการสื่อความหมายของคำหรือข้อความให้ใช้ Underscore ( _ ขีดล่าง) Dash ( - ขีดกลาง) คั่น เช่น tip_tricks.html (ไม่ควรใช้ tip tricks.html) หรือ how_to_write.html อาจเขียนเป็น how2write.html ก็จะสื่อความหมายได้
- ห้ามใช้เครื่องหมายอื่นใดในชื่อไฟล์หรือโฟลเดอร์ ยกเว้น Underscore และ Dash
- ชื่อไฟล์แรกของเอกสารบนเว็บไซต์ มักจะใช้ชื่อ index
- นามสกุลของเอกสารบนเว็บที่เป็นภาษา HTML จะมี 2 รูปแบบ คือ .htm และ .html (ควรสอบถามผู้ดูแลระบบ ที่ให้บริการเครื่องเซิร์ฟเวอร์เก็บเอกสารเว็บว่า ให้บริการใช้นามสกุลใดในไฟล์เริ่มต้น) ค่ามาตรฐานส่วนใหญ่กำหนดให้เป็น index.html
- ไม่ควรใช้ตัวอักษรตัวเล็ก/อักษรตัวใหญ่ผสมกัน เพราะในเครื่องที่ใช้ระบบ Unix จะถือว่ามีความหมายต่างกัน (ในวินโดว์มีความหมายเป็นชื่อเดียวกัน) เช่น Index.html กับ index.html จะถือว่ามี 2 ไฟล์ที่แตกต่างกัน หรือ bird.JPG, Bird.jpg กับ bird.jpg เป็นไฟล์รูปภาพ 3 ไฟล์ที่ต่างกัน
ตัวอย่างชื่อไฟล์เอกสารบนเว็บที่ผิดพลาด เพราะใช้ชื่อภาษาไทย หรือมีช่องว่าง
การกำหนดโครงสร้างโฟลเดอร์เก็บเอกสารบนเว็บ |
|
ในการสร้างเว็บไซต์ เราจะต้องสร้างโฟลเดอร์สำหรับเก็บเอกสารต่างๆ อย่างเป็นระบบ เพื่อให้สามารถค้นหาและเรียกใช้งานได้สะดวก รวมทั้งการเชื่อมโยงไปยังไฟล์เหล่านั้นได้อย่างถูกต้อง เช่น โฟลเดอร์เก็บเอกสาร (Documents) โฟลเดอร์เก็บภาพประกอบ (Images) โฟลเดอร์เก็บไฟล์เว็บชนิด HTML โดยแยกตามหมวดหมู่ที่เกี่ยวข้องสัมพันธ์กัน เราสามารถสร้างโฟลเดอร์ย่อยๆ สำหรับแยกเก็บไฟล์เป็นส่วนๆ ได้อีก ดังตัวอย่าง โฟลเดอร์ Documents จะมีโฟลเดอร์เก็บไฟล์ชนิด Word, PDF, Presentation
ถ้าวางแผนไว้ดี จะทำให้การจัดการดูแลเว็บไซต์เป็นไปได้อย่างสะดวกไม่สับสน ค้นหาง่ายในอนาคต เอกสารเว็บต้องเกี่ยวข้องกับรูปภาพโดยตรง
|
ดังนั้นควรจัดหาภาพหรือสร้างภาพประกอบให้มีขนาดและสัดส่วนที่เหมาะสมไว้ล่วงหน้า และจัดเก็บไว้ในโฟลเดอร์ชื่อ images หากมีภาพจำนวนมากสามารถสร้างโฟลเดอร์เก็บรูปภาพแยกเป็น images1, images2, images3... แล้วนำภาพเข้าไปจัดเก็บเป็นหมวดหมู่ตามรายชื่อ เช่น ไฟล์ที่ขึ้นต้นชื่อด้วยอักษร 0-9 และ a-f เก็บในโฟลเดอร์ images1 และตั้งแต่อักษร g-o อยู่ในโฟลเดอร์ images2 ที่เหลือเก็บในโฟลเดอร์ images3 ดังนี้เป็นต้น
การกำหนดชื่อเอกสารเว็บในแถบไตเติ้ล (Title bar) |
การกำหนดชื่อเอกสารเว็บเพจแต่ละหน้าในส่วนของแท็ก <title> ... </title> ของส่วน Head จะต้องกำหนดเสมอ และควรใช้ภาษาอังกฤษนำ สามารถใช้ภาษาไทยเป็นคำตามได้ แต่ต้องไม่ยาวเกิน 64 ตัวอักษร เช่น Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML (การนับตัวอักษรในคำภาษาไทยต้องนับสระบน/ล่าง/วรรณยุกต์ด้วย)
<html>
<head>
<title> Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML</title>
</head>
<body>
...............
</body>
</html>
|
ชื่อเรียกเว็บไซต์ ที่ปรากฏในส่วนบนไตเติ้ลบาร์ นอกจากจะนำมาใช้แสดงชื่อเรื่องของเว็บไซต์นั้นๆ แล้ว ยังเป็นข้อความที่จะถูกนำมาใช้เป็นคำสำคัญ (Keyword) ในการสืบค้นข้อมูลจาก Search Engine เสมอ
คำหลัก (Keyword) และคำอธิบายหน้าเว็บเพจ (Description) |
ถึงแม้ว่าระบบการค้นหาของ Search Engine จะนำชื่อเรื่องของเว็บไซต์ไปเป็นคำหลักโดยอัตโนมัติแล้ว ก็ยังไม่เพียงพอ เพราะด้วยข้อจำกัดของจำนวนตัวอักษร และคำที่ใส่ลงไป ดังนั้น จึงต้องมีการกำหนดคำหลักให้กับเว็บเพจนั้นๆ โดยใช้คำสั่งที่มีรูปแบบเฉพาะไว้ในส่วน Head ถัดจาก Title เรียกว่าการใช้คำสั่ง Meta (ซึ่งจะไม่แสดงผลในหน้าต่างบราวเซอร์) ดังนี้
<Meta name="X" content="Y"> (x และ y จะถูกแทนค่าด้วยข้อความ)
- ถ้า X แทนค่าด้วยคำว่า Keyword ในส่วน Y จะแทนค่าด้วยคำหลักที่เกี่ยวข้องกับเว็บไซต์นั้น คำหลักควรเป็นภาษาอังกฤษ สามารถกำหนดได้มากกว่า 1 คำ แต่ละคำจะคั่นด้วยเครื่องหมายจุลภาค (,) เช่น
<Meta name="keyword" content="html, web, page, website, home.">
- ถ้า X แทนค่าด้วยคำว่า Description ในส่วน Y จะแทนค่าด้วยคำอธิบายที่เกี่ยวข้องกับเว็บไซต์นั้น ควรเป็นภาษาอังกฤษ เขียนในรูปประโยคบอกเล่าสื่อความหมายถึงเนื้อหาในเว็บนั้นๆ เช่น
<Meta name="Description" content="HTML is a wonderful language for internet communication.">
- ถ้า X แทนค่าด้วยคำว่า Author ในส่วน Y จะแทนค่าด้วยชื่อของเจ้าของเว็บไซต์ หรือหน่วยงาน อาจระบุชื่ออีเมล์ไว้เพื่อให้สะดวกในการติดต่อกับผู้รับผิดชอบโดยตรง เช่น
<Meta name="Author" content="Information Technology - itbm@benchama.ac.th.">
<head>
<title> Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML</title>
<meta name="keyword" content="html, web, page, website, home.">
<meta name="description" content="HTML is a wonderful language for internet communication.">
<meta name="author" content="Information Technology - itbm@benchama.ac.th.">
</head>
|
การควบคุมการเข้ารหัสภาษาไทย |
การแสดงผลภาษาไทยของเว็บเพจ เป็นอีกปัญหาหนึ่งที่ไม่ควรมองข้าม โดยเฉพาะการสร้างเว็บจากเครื่องมือสำเร็จรูปหลายๆ โปรแกรม ที่มักจะทำการกำหนดให้เว็บเป็นภาษาของผู้พัฒนาโปรแกรม (อาจเป็นภาษาในยุโรป/อเมริกา/หรือภาษาอื่นๆ) ทำให้ผู้ชมไม่สามารถอ่านภาษาไทยได้ ดังนั้นผู้สร้างเว็บจะต้องทำการกำหนดค่าการถอดรหัสภาษาไทยไว้เลย ในทุกๆ ไฟล์โดยใช้คำสั่ง Meta ระบุไว้ที่ส่วน Head เช่นเดียวกันดังนี้
<meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> หรือ
<meta http-equiv="Content-Type" content="text/html; charset=Windows-874">
ให้เลือกใช้อย่างใดอย่างหนึ่ง เว็บเพจที่สร้างขึ้นก็จะสามารถแสดงผลภาษาไทยได้อย่างถูกต้อง ในปัจจุบันเนื่องจากระบบปฏิบัติการต่างๆ ได้ถูกออกแบบมาให้เป็นแบบ International Language สนับสนุนระบบหลายภาษาจึงใช้ฟอนต์แบบ Unicode ที่เก็บอักขระ 2 ไบต์ต่อตัวอักษร (แทนที่แบบเดิมที่เป็น 1 ไบต์ต่อตัวอักษร) จึงมีการกำหนดให้การแสดงผลผ่านบราวเซอร์เป็นแบบ Unicode ด้วย เช่น หน้าเว็บเพจนี้ได้เปลี่ยนไปใช้อักขระแบบ utf-8 แทน TIS-620 เดิมแล้ว ดังนี้
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
ในปัจจุบัน ใช้มาตรฐาน HTML5 ก็เขียนง่ายๆ ดังด้านล่างนี้
<meta charset="utf‐8">
|