Image_01 Image_02 Image_03
Krumontree.com Krumontree.com Krumontree.com
Home
Internet and Browser
Create and Design
Basic HTML
Beautiful Images
Control with Table
Links to the others
More tips and Tricks
FTP to Web Hosting
left_bottom

การพัฒนาเว็บไซต์ภาษาไทย ยังมีประเด็นเนื้อหาตกหล่น จากที่ได้ศึกษาเอกสารหลายๆ เล่ม และจากประสบการณ์ของผู้เขียนเองจะพบว่า มีเว็บไซต์ภาษาไทยจำนวนมากที่แสดงผลภาษาไทยไม่ถูกต้อง กลายเป็นอักษรขอมอ่านไม่ออก หรือภาพไม่แสดง การแสดงผลแตกต่างกันไปเมื่อดูจากจอที่มีความละเอียดต่างกัน การค้นหาข้อมูลผ่านโปรแกรมสืบค้น (Search Engine) ต่างๆ ไม่ปรากฏว่ามีข้อมูลของเว็บไซต์นั้นๆ จึงได้รวบรวมเทคนิคเหล่านี้มานำเสนอเป็นแนวทางดังนี้

ytการตั้งชื่อโฟลเดอร์และไฟล์

เป็นปัญหาหญ้าปากคอก ที่มักจะมีและพบบ่อยๆ จนกระทั่งทำให้เว็บไม่สามารถแสดงผลได้เลยทีเดียว ชื่อโฟลเดอร์และไฟล์เอกสารบนเว็บ จะต้องประกอบด้วยตัวอักษรภาษาอังกฤษและตัวเลข ผสมกันได้ (ห้ามใช้ชื่อภาษาไทยเด็ดขาด) แต่ไม่ควรจะยาวเกินไปและสื่อความหมายได้ มีข้อกำหนดดังนี้

  1. ควรใช้ตัวอักษรเป็นตัวพิมพ์เล็ก a-z หรือตัวเลข 0-9 หรือผสมกัน
  2. ห้ามเว้นวรรคในชื่อไฟล์หรือโฟลเดอร์ ถ้าต้องการสื่อความหมายของคำหรือข้อความให้ใช้ Underscore ( _ ขีดล่าง) Dash ( - ขีดกลาง) คั่น เช่น tip_tricks.html (ไม่ควรใช้ tip tricks.html) หรือ how_to_write.html อาจเขียนเป็น how2write.html ก็จะสื่อความหมายได้
  3. ห้ามใช้เครื่องหมายอื่นใดในชื่อไฟล์หรือโฟลเดอร์ ยกเว้น Underscore และ Dash
  4. ชื่อไฟล์แรกของเอกสารบนเว็บไซต์ มักจะใช้ชื่อ index
  5. นามสกุลของเอกสารบนเว็บที่เป็นภาษา HTML จะมี 2 รูปแบบ คือ .htm และ .html (ควรสอบถามผู้ดูแลระบบ ที่ให้บริการเครื่องเซิร์ฟเวอร์เก็บเอกสารเว็บว่า ให้บริการใช้นามสกุลใดในไฟล์เริ่มต้น) ค่ามาตรฐานส่วนใหญ่กำหนดให้เป็น index.html
  6. ไม่ควรใช้ตัวอักษรตัวเล็ก/อักษรตัวใหญ่ผสมกัน เพราะในเครื่องที่ใช้ระบบ Unix จะถือว่ามีความหมายต่างกัน (ในวินโดว์มีความหมายเป็นชื่อเดียวกัน) เช่น Index.html กับ index.html จะถือว่ามี 2 ไฟล์ที่แตกต่างกัน หรือ bird.JPG, Bird.jpg กับ bird.jpg เป็นไฟล์รูปภาพ 3 ไฟล์ที่ต่างกัน
การตั้งชื่อไฟล์เอกสารเว็บ
ตัวอย่างชื่อไฟล์เอกสารบนเว็บที่ผิดพลาด เพราะใช้ชื่อภาษาไทย หรือมีช่องว่าง

ytการกำหนดโครงสร้างโฟลเดอร์เก็บเอกสารบนเว็บ

Folder         ในการสร้างเว็บไซต์ เราจะต้องสร้างโฟลเดอร์สำหรับเก็บเอกสารต่างๆ อย่างเป็นระบบ เพื่อให้สามารถค้นหาและเรียกใช้งานได้สะดวก รวมทั้งการเชื่อมโยงไปยังไฟล์เหล่านั้นได้อย่างถูกต้อง เช่น โฟลเดอร์เก็บเอกสาร (Documents) โฟลเดอร์เก็บภาพประกอบ (Images) โฟลเดอร์เก็บไฟล์เว็บชนิด HTML โดยแยกตามหมวดหมู่ที่เกี่ยวข้องสัมพันธ์กัน เราสามารถสร้างโฟลเดอร์ย่อยๆ สำหรับแยกเก็บไฟล์เป็นส่วนๆ ได้อีก ดังตัวอย่าง โฟลเดอร์ Documents จะมีโฟลเดอร์เก็บไฟล์ชนิด Word, PDF, Presentation
        ถ้าวางแผนไว้ดี จะทำให้การจัดการดูแลเว็บไซต์เป็นไปได้อย่างสะดวกไม่สับสน ค้นหาง่ายในอนาคต เอกสารเว็บต้องเกี่ยวข้องกับรูปภาพโดยตรง
ดังนั้นควรจัดหาภาพหรือสร้างภาพประกอบให้มีขนาดและสัดส่วนที่เหมาะสมไว้ล่วงหน้า และจัดเก็บไว้ในโฟลเดอร์ชื่อ images หากมีภาพจำนวนมากสามารถสร้างโฟลเดอร์เก็บรูปภาพแยกเป็น images1, images2, images3... แล้วนำภาพเข้าไปจัดเก็บเป็นหมวดหมู่ตามรายชื่อ เช่น ไฟล์ที่ขึ้นต้นชื่อด้วยอักษร 0-9 และ a-f เก็บในโฟลเดอร์ images1 และตั้งแต่อักษร g-o อยู่ในโฟลเดอร์ images2 ที่เหลือเก็บในโฟลเดอร์ images3 ดังนี้เป็นต้น

ytการกำหนดชื่อเอกสารเว็บในแถบไตเติ้ล (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 เสมอ

ytคำหลัก (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>

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

การแสดงผลภาษาไทยของเว็บเพจ เป็นอีกปัญหาหนึ่งที่ไม่ควรมองข้าม โดยเฉพาะการสร้างเว็บจากเครื่องมือสำเร็จรูปหลายๆ โปรแกรม ที่มักจะทำการกำหนดให้เว็บเป็นภาษาของผู้พัฒนาโปรแกรม (อาจเป็นภาษาในยุโรป/อเมริกา/หรือภาษาอื่นๆ) ทำให้ผู้ชมไม่สามารถอ่านภาษาไทยได้ ดังนั้นผู้สร้างเว็บจะต้องทำการกำหนดค่าการถอดรหัสภาษาไทยไว้เลย ในทุกๆ ไฟล์โดยใช้คำสั่ง 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">

Click to TOP

 

Your visitor no.
Create & Design Web Page with Basic HTML & Tools
Author : KruMontree Kotkanta     e-M@il : webmaster at krumontree.com