การเข้าถึงและการใช้งานเว็บไซต์ (Accessibility and Usage)

การเข้าถึง (Accessibility)

โค้ดสำหรับการฟอร์แม็ตข้อความ

[section]: ใช้แบ่งบทความออกเป็นส่วนๆ เพื่อให้ง่ายต่อการอ่าน

ตัวอย่างการใช้งาน

[section]
กลุ่มย่อหน้าหรือข้อความ
[section]
กลุ่มย่อหน้าหรือข้อความ...

หัวเรื่อง: [h1]หัวเรื่องที่หนึ่ง[/h2], [h2]หัวเรื่องที่ 2[/h2], [h3]หัวเรื่องที่ 3[/h3]… จนถึง [h6]

ตัวอย่างการใช้

[h2]การระดมทุน[/h2]
กลุ่มย่อหน้า/ข้อความ
[h2]การประชาสัมพันธ์[/h2]
กลุ่มย่อหน้า/ข้อความ...

หมายเหตุ: ไม่อนุญาติให้ใช้ [h1] เนื่องจากมีอยู่ในหน้าเว็บอยู่แล้ว ควรใช้ [h2] เป็นต้นไป

ย่อหน้า: [p]

ตัวอย่างการใช้งาน

โปรแกรมจะจัดทำย่อหน้าให้อัตโนมัติโดยแบ่งย่อหน้าตามการขึ้นบรรทัดใหม่ (ไม่ต้องใส่แท็ก) เช่น

ย่อหน้าที่หนึ่ง (ข้อความขนาดยาว)...
ย่อหน้าที่สอง (ข้อความขนาดยาว)...ฯลฯ

แต่สามารถใช้ย่อหน้าแบบอื่นๆ ได้ดังนี้

ย่อหน้าธรรมดา: [p class((alignright))]ข้อความใน 1 ย่อหน้า[/p] (ย่อหน้าจัดตัวอักษรทางขวา)
ย่อหน้าหมายเหตุ: [note]หมายเหตุท้ายบทความ[/note]

ย่อหน้าแบบมีการขึ้นบรรทัดใหม่ในย่อหน้าเดียวกัน

[p]บรรทัดที่ 1[br/]
[nil]บรรทัดที่ 2[br/]
[nil]บรรทัดที่ 3[br/]…
[nil]บรรทัดสุดท้าย[/p]

หมายเหตุ: [nil] ใช้บอกโปรแกรมว่าไม่ต้องทำย่อหน้าให้อัตโนมัติจากการขึ้นบรรทัดใหม่ [br/] ใช้ในการขึ้นบรรทัดใหม่ในย่อหน้าเดียวกัน

ลิสต์แบบต่างๆ

ตัวอย่างการใช้งาน

ลิสต์ UL แบบง่าย คั่นแต่ละรายการด้วย // (UL = unordered list หมายถึงลิสต์ที่สามารถสลับลำดับรายได้โดยไม่เสียความหมาย ไม่จำเป็นต้องเรียงตามลำดับ 1-2-3)

[ullist]รายการที่หนึ่ง//รายการที่สอง//รายการที่สาม//ฯลฯ//รายการสุดท้าย[/ullist]

ลิสต์ UL แบบธรรมดา

[ul]
[li]รายการที่หนึ่ง[/li]
[li]รายการที่สอง[/li]…
[li]รายการสุดท้าย[/li]
[/ul]

ลิสต์ OL แบบง่าย คั่นแต่ละรายการด้วย // (OL=ordered list หมายถึงลิสต์ที่สลับลำดับรายการไม่ได้ หากสลับแล้วจะทำให้เสียความหมาย ต้องเรียงตามลำดับหรือขั้นตอน 1-2-3 เท่านั้นจึงจะเข้าใจได้)

[ollist]รายการที่หนึ่ง//รายการที่สอง//รายการที่สาม//ฯลฯ//รายการสุดท้าย[/ollist]

ลิสต์ OL แบบธรรมดา

[ol]
[li]รายการที่หนึ่ง[/li]
[li]รายการที่สอง[/li]…
[li]รายการสุดท้าย[/li]
[/ol]

การจัด ซ้าย ขวา กลางและบรรทัดเหยียดตรง (ใช้ได้กับ Block Elements เท่านั้น)

ตัวอย่างการใช้งาน

การจัดซ้าย ใช้ class((alignleft)) เช่น [li class((alignleft))]ข้อความ[/li], [p class((alignleft))]ข้อความ[/p]
การจัดขวา ใช้ class((alignright) เช่น [p class((alignright))]ข้อความ[/p]
การจัดกลาง ใช้ class((aligncenter)) เช่น [h2 class((aligncenter))]ข้อความ[/h2]
การจัดบรรทัดเหยียดตรง (Justify) ใช้ class((justify)) เช่น [p class((justify))]ข้อความ[/p]

การใส่รูปภาพ

มีรูปแบบดังนี้

• ภาพที่ไม่ลอย [img=URL]คำอธิบภายภาพ[/img]
• ภาพลอยซ้าย [img:l=URL]คำอธิบายภาพ[/img] (ต้องใส่คำอธิบายภาพทุกครั้ง ไม่เช่นนั้นแล้วภาพจะไม่แสดง)
• ภาพลอยขวา [img:r=URL]คำอธิบายภาพ[/img]

วิธีใช้

ภาพที่ไม่ลอย เช่น [img=http://www.google.com/dog.png]สุนัขสีขาว[/img]
ภาพลอยซ้าย เช่น [img:l=http://www.somewhere.com/rose.jpg]ดอกกุหลาบสีแดง[/img] ข้อความ...
ภาพลอยขวา เช่น [img:r=/images/rose.jpg]ดอกกุหลาบสีแดง[/img] ข้อความ...

หมายเหตุ: ควรใช้ภาพลอยซ้ายหรือขวาในกรณีที่มีเนื้อหามาก หากมีเนื้อหาน้อยเกินไปจะทำให้ภาพและตัวหนังสือไม่สมดุลย์กัน ส่งผลต่อความสวยงามของหน้าเว็บ

การจัดกลางภาพ ทำได้โดย (ทำได้ครั้งละ 1 ภาพเท่านั้น)

[p class((aligncenter))][img=/images/pig.jpg]หมูตัวอ้วน[/img][/p]

ภาพชุดแบบ Thumbnail สามารถทำได้ดังนี้

[thumb]
([img=URL]คำอธิบายภาพที่หนึ่ง[/img])
([img=URL]คำอธิบายภาพที่สอง[/img])…
([img=URL]คำอธิบายภาพสุดท้าย[/img])
[/thumb]

การใส่วิดีโอ

ตัวอย่างการใช้งาน

รูปแบบ [video=URL]คำอธิบายวิดีโอ[/video] เช่น (หากไม่ใส่คำอธิบายวิดีโอ วิดีโอจะไม่แสดง)

[video=http://www.youtube.com/watch?v=REAg9Vkb27Y]เพลง อย่าทำอย่างนี้ไม่ว่ากับใคร เบิร์ด ธงไชย[/video]

การใส่ Soundcloud (ใส่เพลง)

ตัวอย่างการใช้งาน

1. เข้าไปที่เว็บไซต์ http://soundcloud.com ค้นหาเพลงที่ต้องการในช่อง search soundcloud (หรือล็อกอินในกรณีที่สมัครสมาชิกกับ Soundcloud)
2. เลือกเพลงที่ต้องการแล้วเลือก share

3. คัดลอกโค้ดจากช่อง Embeded Code ซึ่งมีลักษณะดังนี้ (บางเพลงอาจไม่มีช่องนี้และจะไม่สามารถนำมาใช้งานได้)

   <object height="81" width="100%"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F29969252"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F29969252" type="application/x-shockwave-flash" width="100%"></embed> </object> <span><a href="http://soundcloud.com/alongkorn37/track-3">เพลง LIttle Dandelion</a> by <a href="http://soundcloud.com/alongkorn37">Alongkorn37</a></span></p>

4. คัดลอกหมายเลขที่อยู่หลัง %2Ftracks%2F ซึ่งเป็นหมายเลขเพลงไว้ (มีอยู่ 2 จุด แต่หมายเลขเดียวกัน)

5. นำหมายเลขเพลงดังกล่าวมาใช้ดังนี้

   [soundcloud=หมายเลข]คำอธิบายเพลงหรือชื่อเพลง[/soundcloud] เช่น [soundcloud=29969252]เพลง LIttle Dandelion[/soundcloud]

หมายเหตุ: การนำเพลงของผู้อื่นมาเผยแพร่โดยไม่ได้รับอนุญาตอาจผิดกฎหมาย *หากไม่ใส่คำอธิบายเพลง เพลงจะไม่แสดง

การสร้างจุดสนใจด้วย [headline] และ [attention]

ตัวอย่างการใช้งาน

[headline]ย่อหน้าที่เป็นพาดหัว[/headline]
[attention]ย่อหน้าที่ต้องการให้คนสนใจเป็นพิเศษ[/attention]

การทำ Blockquote เพื่ออ้างอิงคำพูดที่เป็นประโยคยาว (มักมีหลายย่อหน้า)

ตัวอย่างการใช้งาน

[blockquote]
ย่อหน้าแรก ใครบางคนพูดว่าอย่างนั้นอย่างนี้
ย่อหน้าต่อมา ใครบางคนพูดว่างอย่างนั้นอย่างนี้อีก…
ย่อหน้าสุดท้าย ใครบางคนพูดว่างอย่างนั้นอย่างนี้อีกและอีก
[/blockquote]

การใช้ Attribute

รูปแบบ attribute((ค่าของ attribute)) ถ้ามีมากกว่า 1 attribute ให้แยกด้วยช่วงว่าง เช่น attribute1((ค่าที่ 1)) attribute2((ค่าที่ 2)) ฯลฯ

ตัวอย่างการใช้งาน

[img src((/images/rose.jpg)) alt((ดอกกุหลาบสีแดง)) width((200)) height((150))/]
[p id((myid)) class((aligncenter))]ข้อความ[/p]

การใช้แท็ก HTML

สามารถใช้ชื่อแท็กของ HTML ร่วมกับ […] หรือ [/…] ได้ แท็กที่สามารถใช้ได้มีดังนี้ (ใช้ร่วมได้กับทุก attribute)

[a], [abbr], [acronym], [address], [blockquote], [caption], [cite], [code], [dd], [dfn], [div], [dl], [dt], [em], [fieldset], [form], [h1], [h2], [h3], [h4], [h5], [h6], [img], [input], [kbd], [label], [legend], [li], [object], [ol], [optgroup], [option], [p], [q], [script], [select], [span], [strong], [table], [tbody], [td], [textarea], [tfoot], [th], [thead], [title], [tr], [ul]

ตัวอย่างการใช้งาน

[table summary((คำอธิบายเกี่ยวกับตาราง))]
[caption]ชื่อตาราง[/caption]
[tr]
[th scope((col))]หัวคอลัมน์ 1[/th]
[th scope((col))]]หัวคอลัมน์ 2[/th]
[th scope((col))]]หัวคอลัมน์ 3[/th]
[/tr]
[tr]
[td]ค่า 1[/td]
[td]ค่า 2[/td]
[td]ค่า 3[/td]
[/tr]
[tr]
[td]ค่า 1[/td]
[td]ค่า 2[/td]
[td]ค่า 3[/td]
[/tr]…
[/table]

การใช้ตัวหนา/ตัวเอียง/ขีดเส้นใต้/ตัวเลข/วันที่/คำพูดในย่อหน้า/ลิงค์

• ตัวหนา (เน้นความสำคัญของคำ) เช่น [s]คำ[/s]
• ตัวเอียง (เน้นความสำคัญของวลีหรือข้อความ) เช่น [em]ข้อความ[/em]
• ขีดเส้นใต้ (เน้นตัวหนาความสำคัญข้อความแบบขีดเส้นใต้) เช่น [u]ข้อความ[/u]
• ตัวเลข (ทำให้ตัวเลขเด่น) เช่น [p]ฉันได้เงินทั้งหมด [num]2,150[/num] บาท…[/p]
• วันที่ (ทำให้วันที่เด่น) เช่น …ผมเดินทางวันที่ [date]3 ธันวาคม 2554[/date] เวลา [date]13.30 น.[/date]…
• คำพูดในย่อหน้า เช่น ...เธอหันมาพูดกับผมว่า [q]อย่าตามฉันมาล่ะ ฉันต้องการอยู่คนเดียว[/q] แล้วเธอก็เดินไป...
• ลิงค์ เช่น …ลองเข้าไปใน [url=http://www.facebook.com]Facebook[/url] ของผม หรือส่งอีเมล์มาหาผลที่ [url=sawang@nmad2006.org]sawang@nmad2006.org[/url] นะครับ...