LAST EDITED ON 31-Mar-24 AT 10:50 AM (SE Asia Standard Time)
 
ร่ำ ๆ จะทำมาตั้งนานแล้ว และครั้งนี้ก็ได้โอกาสว่าง ๆ
จึงเขียนเป็นแบบเรียนขึ้นแบบเป็นขั้นเป็นตอนจากง่ายไปยาก
เพราะว่าหลังจากที่ลองซุ่มเช็คดูแล้ว
จะเห็นได้ว่ามีคนใช้โค้ด html ผิดกันอย่างมากมายจริง ๆ
จึงอยากจะแนะนำวิธีที่ถูกต้องให้ลองใช้ ก็หวังว่าจะเป็นประโยชน์บ้างไม่มากก็น้อยนะคะ

วันที่เริ่มเขียนก็ทุบบ้านยกพื้นทำหลังคาใหม่พอดี
ย้ายมาพักบ้านเช่ารอช่างก่อสร้างบ้านเสร็จ
ก็เลยมานั่งร่างข้อความเล่น ๆ ซึ่งเอาจริง ๆ แล้วมันก็ไม่เล่นเหมือนกัน
เพราะว่าไม่มีเน็ตจะเข้าเช็คค่า html ที่กำลังเขียน
จึงต้องพิมพ์ด้วยความระมัดระวัง ส่งบลูทูธจากโน๊ตบุ๊คเข้าโทรศัพท์
แล้วส่งเมลผ่านโทรศัพท์ จากนั้นจึงไปเช็คเมลที่ร้านเน็ต
แก้ไข text 5-6 รอบ จากก่อนสงกรานต์จนจบสงกรานต์พอดี
ชีวิตหญิงงามมักมีอุปสรรคเหมือนเค้าว่าไว้จริง ๆ อันนี้เดี๊ยนยอมรับ ~ คริคริ

เอาล่ะ เรามาเริ่มศึกษากันดีกว่าค่ะ
ในกระทู้นี้เดี๊ยนจะทำให้เป็นตำราเล่มเล็ก ๆ โดยแบ่งเป็น 3 บท ดังนี้

บทที่ 1. การเขียนโค้ดคำสั่งการแสดงผลรูปแบบ , สี และขนาดของตัวอักษรช่อง subject , name และ message
บทที่ 2. การใช้คำสั่งคุณลักษณะพิเศษต่าง ๆ ของตัวอักษร
บทที่ 3. การใช้โค้ดหลายสีในข้อความเดียว และรูปแบบหลากหลายอื่น ๆ

---------------------------------------

บทที่ 1
การเขียนโค้ดคำสั่งการแสดงผลรูปแบบ , สี และขนาดของตัวอักษรช่อง subject , name และ message

โค้ดสำหรับช่อง subject

ประกอบด้วยสองส่วนหลัก ดังนี้

1. โค้ดเปิดคำสั่ง
โค้ด 1 ชุดคำสั่ง ประกอบด้วย font เป็นคำสั่งตั้งต้น ที่ตามด้วย 3 คำสั่งย่อย คือ
- face คือการกำหนดรูปแบบตัวอักษร เราสามารถหาฟ้อนท์ที่ต้องการนำมาใช้กับคำสั่งเฟซนี้ได้จาก
ฟ้อนท์ในโปรแกรมสำเร็จรูปต่าง ๆ ที่มีรูปแบบ text หลากหลาย อย่าง Photo shop และ MS Office
การนำมาใช้เพื่อหวังการแสดงผลนี้ บางชื่อฟ้อนท์บอร์ดปาล์มอาจจะแสดงผล หรือไม่แสดงผลก็ได้
ทั้งนี้ขึ้นอยู่กับ Browser ของผู้ใช้ว่าใช้ตัวไหน และมีการอัพเดตคุณลักษณ์ทาง Graphic text ของ Browser นั้น ๆ ขนาดไหน เป็นต้น
ดังนั้น จึงเป็นหน้าที่ของผู้ศึกษาที่จะหาฟ้อนท์ที่ตนชอบ และตอบสนองกับบอร์ดได้อย่างเต็มที่ด้วยตนเอง

-color คือการกำหนดสีของตัวอักษรที่เราต้องการ โดยสามารถใช้สีจากคำภาษาอังกฤษโดยตรง เช่น
red,blue,yellow,pink .....
หรือเรียกใช้ค่าสีจากการผสมสีใน html color chart ที่สามารถสืบค้นได้จาก google
โดยใช้คีย์เวิร์ด html color chart ในการค้น
และนำโค้ดสีจากตาราง html ซึ่งเป็นตัวเลข , ตัวอักษร และ/หรือ ตัวเลขผสมตัวอักษร 6 หลัก
มาใช้โดยมีการเติมเครื่องหมาย # ด้านหน้า เช่น
#FF0022, #331177, #CC22BB เป็นต้น (ตัวอักษรจะใช้ตัวพิมพ์ใหญ่หรือเล็กก็ได้)

-size คือการกำหนดขนาดของตัวอักษรที่เราต้องการ โดยใช้ตัวเลข 1,2,3,4,5 ... เป็นตัวกำหนด
นอกจากนี้เรายังใช้โค้ด h1,h2,h3 กำหนดค่าความสูงของตัวอักษรแทนขนาดได้
แต่ในบทเรียนนี้จะไม่สอน แค่กล่าวถึงให้รู้พอเป็นสังเขป
เพราะค่าจำพวก h เรามักจะใช้ใน format td tr เต็มรูปแบบมากกว่า ~
ขนาดที่นิยมในการใช้ในบอร์ดจะอยู่ที่ 4-5 ขึ้นอยู่กับกาละ และเทศะในการใช้ เช่น
ฟ้อนท์ไซส์ 5 สำหรับกระทู้ไร้สาระ นับว่าเป็นกระทู้ที่ไม่สมควรใช้ และโดยเฉพาะชื่อกระทู้ยาว ๆ
จนล้นบรรทัดลงไปกินพื้นที่ถึง 2 บรรทัด (จากหัวกระทู้ถึงชื่อเจ้าของกระทู้) ยิ่งไม่สมควรเป็นอย่างยิ่ง
เพราะมันจะดันกระทู้อื่น ๆ ให้ตกหน้าแรกเร็วเกินไป นับว่าเป็นเรื่องที่ต้องใช้ภาษิตเอาใจเขามาใส่ใจเราเป็นที่ตั้งเลยล่ะค่ะ ~

เมื่อใช้ฟ้อนท์ไซส์ 5 แล้วเกินบรรทัด ก็เปลี่ยนมาใช้ขนาด 4 เสียก็ไม่เสียหาย
หลายคนพอทดลองแล้วก็สงสัยว่าบางเพซของฟ้อนท์ไซส์ 4 นั้นมีขนาดไม่ต่างจาก regular font
ที่บอร์ดตั้งค่าเท่าใดนัก แล้วเราจะเสียเวลากำหนดขนาด 4 ไปทำไม?
ที่เราใส่ก็เพราะจะทำให้ค่า html ของ code นั้น ๆ สมบูรณ์ค่ะ
ถ้ากลัวไม่เด่นก็ใช้ตัวหนาซึ่งจะกล่าวในบทต่อไป คล่อมทับก็ได้ค่ะ ~

ตัวอย่างที่ 1 เจ้าของกระทู้ต้องการใช้ตัวอักษรอังสนา นิว สีน้ำเงิน ขนาด5เพื่อพิมพ์คำว่า Professor McGonagall ที่ช่อง subject หรือ name
จะได้โค้ดดังนี้ ---> <font face=angsana new color=blue size=5>Professor McGonagall
(วงเล็บสามเหลี่ยมเปิด ฟ้อนท์ วรรค เฟซ เท่ากับ อังสนา นิว วรรค คัลเลอร์ เท่ากับ บลู วรรค ไซส์ เท่ากับ ห้า วงเล็บสามเหลี่ยมปิด Professor McGonagall)

ตัวอย่างที่ 2 เจ้าของกระทู้ต้องการใช้ตัวอักษรไอริส สี html FF0022 ขนาด 4 เพื่อพิมพ์คำว่า Professor MCGonagall ที่ช่อง subject หรือ name
จะได้โค้ดดังนี้---> <font face=Iris color=#FF0022 size=4>Professor McGonagall
(วงเล็บสามเหลี่ยมเปิด ฟ้อนท์ วรรค เฟซ เท่ากับ ไอริส วรรค คัลเลอร์ เท่ากับ ชาร์ป เอฟ เอฟ ศูนย์ ศูนย์ สอง สอง วรรค ไซส์ เท่ากับ สี่ วงเล็บสามเหลี่ยมปิด Professor McGonagall)

หลายคนอาจจะสงสัยว่าทำไมเดี๊ยนถึงต้องเป็นบ้าเป็นบอ ถึงกับสะกดเป็นคำต่อคำแบบนี้
ก็เพราะว่ามีคนใช้ผิดอยู่ค่อนข้างเยอะสำหรับการเว้นวรรคผิดที่
โดยเฉพาะช่วงเครื่องหมายเท่ากับ จริง ๆ แล้วไม่ต้องเว้นวรรคค่ะทั้งก่อนและหลังเครื่องหมายทุกตัว
หลายคนชอบพิมพ์เท่ากับแล้วเว้นวรรคจึงใส่ชื่อเฟซ , สี ,ขนาดค่ะ
และทำไมตรงอังสนา ต่อนิว เดี๊ยนไม่บอกว่าวรรค เพราะว่าชื่อฟ้อนท์มันวรรคอยู่แล้ว เดี๊ยนจึงนับเป็นชุดเดียวกันค่ะ ~

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

วิธีการปิดก็แสนง่าย เพียงใช้โค้ด </font> (วงเล็บสามเหลี่ยมเปิด สแลส ฟ้อนท์ วงเล็บสามเหลี่ยมปิด) แค่นั้น

ตัวอย่างที่ 1
<font face=angsana new color=blue size=5>Professor McGonagall</font>
Professor McGonagall

ตัวอย่างที่ 2
<font face=Iris color=#FF0022 size=4>Professor McGonagall</font>
Professor McGonagall

โค้ดสำหรับช่อง message

เหมือนกับโค้ดที่เขียนเพื่อใช้ในช่อง subject และ name ทุกประการ จะต่างกันที่การใช้วงเล็บเท่านั้น

ช่อง subject และ name ใช้ < (วงเล็บสามเหลี่ยมเปิด) ช่อง message ใช้ (วงเล็บก้ามปูเปิด)
ช่อง message ใช้ > (วงเล็บสามเหลี่ยมปิด) ช่อง message ใช้ ] (วงเล็บก้ามปูปิด)

แสนง่ายเนอะ ว่ามั้ย? ~ คริคริ

บทที่ 2
การใช้คำสั่งคุณลักษณะพิเศษต่าง ๆ ของตัวอักษร

ในบทนี้ จะสอนค่าพื้นฐานการปรับทรงตัวอักษรที่ใช้เป็นประจำแบบง่าย ๆ ได้แก่
-ตัวหนา = <b>text</b>
-ตัวเอียง = <i>text</i>
-เส้นใต้ = <u>text</u>
-ตัว^ยก = ^text
-ตัว_ห้อย = _test

Subject & name

--ตัวหนา
Subject & name box
<b><font face=tahoma color=blue size=5>Professor McGonagall</font></b>
message box
Professor McGonagall
Professor McGonagall

--ตัวเอียง
Subject & name box
<i><font face=tahoma color=blue size=5>Professor McGonagall</font></i>
message box
Professor McGonagall
Professor McGonagall

--เส้นใต้
Subject & name box
<u><font face=tahoma color=blue size=5>Professor McGonagall</font></u>
message box
Professor McGonagall
Professor McGonagall

--ตัว^ยก
ตัวยก ในคำสั่งสี
Subject & name box
<font face=tahoma color=blue size=5>Professor McGonagall^TM</font>
message box
TM
Professor McGonagall^TM

ตัวยก นอกคำสั่งสี
Subject & name box
<font face=tahoma color=blue size=5>Professor McGonagall</font>^TM
message box
Professor McGonagall^TM
Professor McGonagall^TM

--ตัว_ห้อย
ตัวห้อย ในคำสั่งสี
Subject & name box
<font face=tahoma color=blue size=5>Professor McGonagall₂</font>
message box
Professor McGonagall₂
Professor McGonagall₂

ตัวห้อย นอกคำสั่งสี
Subject & name box
<font face=tahoma color=blue size=5>Professor McGonagall</font>₂
message box
Professor McGonagall₂
Professor McGonagall₂

บทที่ 3
การใช้โค้ดหลายสีในข้อความเดียว และรูปแบบหลากหลายอื่น ๆ

1 สี
Subject & name box
<font face=tahoma color=blue size=5>Professor</font>
message box
Professor
Professor

2 สี
Subject & name box
<font face=tahoma color=blue size=5>Professor <font color=magenta>McGonagall</font></font>
message box
Professor&l ;font color=magenta]McGonagall
Professor McGonagall

จะเห็นได้ว่าโค้ดสีที่ 2 เราจะเขียนเพียง font color เพราะว่าวิธีที่เดี๊ยนแนะนำนี้
เป็นวิธีนำเอาโค้ดปิดแทก </font> ทุกตัวไว้หลังข้อความทั้งหมด
ทำให้เราพิมพ์โค้ดเต็มยศแค่ชุดแรกเท่านั้น ส่วนโค้ดชุดที่ 2 เป็นต้นไป
เราสามารถใช้อิทธิพลของโค้ดชุดแรกในการส่ง face หรือ color หรือ size ถึงได้
จากนั้นเราจึงปิดแทก </font> ตามจำนวนชุดโค้ดที่เราเปิด เช่นโค้ดสองสีก็ปิด </font></font> เป็นต้น

เดี๊ยนจะลองยกตัวอย่างสำหรับการเลี่ยงอิทธิพลของของโค้ดชุดแรกกันค่ะ

ตัวอย่าง1. ตัดสายสัมพันธ์คำสั่งสมบูรณ์
Subject & name box
<font face=tahoma color=blue size=5>Professor </font><font color=magenta>McGonagall</font>
message box
Professor McGonagall
Professor McGonagall

จะเห็นได้ว่าเป็นโค้ดที่เหมือนกับโค้ดที่เดี๊ยนยกตัวอย่างโค้ด 2 สีข้างบน
เพียงแต่ปิดแทก </font> ไว้ที่ Text ที่เราพิมพ์แบบตัวต่อตัว
ทำให้โค้ดชุดแรกปิดสมบูรณ์จนไม่ส่งผลคำสั่งไปถึงโค้ดที่สอง
ทำให้โค้สีที่ 2 กลายเป็น McGonagall ที่เป็น regular font สี magenta

ตัวอย่าง1.1 ตัดสายสัมพันธ์คำสั่งสมบูรณ์แต่ใช้face และ size เดียวกัน
Subject & name box
<font face=tahoma color=blue size=5>Professor </font><font face=tahoma color=magenta size=5>McGonagall</font>
message box
Professor McGonagall
Professor McGonagall

ผลของคำสั่งนี้ทำให้แสดงผล Text ทั้งสองช่วง เป็นขนาด5เหมือนกัน ฟ้อนท์เดียวกัน แต่คนละสี
แต่ให้การแสดงผลเหมือนกับข้อที่แสดงตัวอย่าง 2 สีข้างบน
ทั้ง ๆ ที่ข้างบนเขียนโค้ดน้อยกว่า นี่คือเหตุผลที่เดี๊ยนสอนการปิดแทกแบบ </font> ห้อยท้ายทั้งหมด
เพราะทำให้เราไม่ต้องเขียนโค้ดซ้ำซ้อน เหมือนเราต้องการตัวอักษรเดียวกัน ขนาดเดียวกัน แต่ต่างสีกัน
เราจึงเขียนชุดที่สองเป็นต้นไปแค่ <font color=...>เท่านั้น
ไม่ต้องพิมพ์ face tahoma สองครั้งสำหรับ 2สี สามครั้งสำหรับ 2 สี หรือ สี่ครั้งสำหรับ 4 สี

จากความรู้เบื้องต้นของการเปิดปิดโค้ดที่ได้ไปแล้ง
ถ้าเช่นนั้นตรงนี้เป็นต้นไป เราลองมายกตัวอย่างกรณีต่าง ๆ กันบ้างดีกว่าค่ะ

ตัวอย่าง2. เชื่อมสายสัมพันธ์คำสั่งบางส่วน (ต่างface ต่างcolor ร่วมsize)
Subject & name box
<font face=tahoma color=blue size=5>Professor <font color=magenta size=4>McGonagall</font></font>
message box
Professor McGonagall
ProfessorMcGonagall

ตัวอย่าง 2.1 (ร่วมface ต่างcolor ต่างsize]
Subject & name box
<font face=tahoma color=blue size=5>Professor <font color=magenta size=4>McGonaglal</font></font>
message box
Professor McGonaglal
Professor McGonaglal

เครื่องร้อนกันแล้วใช่มั้ยคะ?
เอาล่ะค่ะ มาต่อกันยาวไปเลยดีกว่า ~

ตัวอย่างรูปแบบต่าง ๆ
Subject & name box
3สี (ร่วมface ร่วมsize)
<font face=tahoma color=blue size=5>Professor <font color=magenta>McGonagall<font color=Green> อาจารย์ใหญ่ฮอกวอตส์</font></font></font>
message box
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์

จะเห็นได้ว่า ปิดโค้ด 3 โค้ด ก็ต้องปิดแทก 3 ครั้งเช่นกัน (เน้นย้ำให้เบื่อกันไปข้างเลยค่ะ ~)

เอาล่ะ ต่อเลยค่ะ

4สี (ร่วมface ร่วมsize)
Subject & name box
<font face=tahoma color=blue size=5>Professor <font color=magenta>McGonagall<font color=Green> อาจารย์ใหญ่<font color=oragne>ฮอกวอตส์</font></font></font></font>
message box
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์

3สี (เน้นตัวหนา)
Subject & name box

<b><font face=tahoma color=blue size=5>Professor <font color=magenta>McGonagall<font color=Green> อาจารย์ใหญ่ฮอกวอตส์</font></font></font></b>
message box
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์

3สี (เน้นตัวหนา 1 สี)
Subject & name box

<font face=tahoma color=blue size=5><b>Professor </b><font color=magenta>McGonagall<font color=Green> อาจารย์ใหญ่ฮอกวอตส์</font></font></font>
message box
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์

3สี (เน้นตัวหนา 2 สี "ติดกัน") ***ใช้โค้ดตัวหนาเพียง 1 ชุดคลุมทับสองข้อความที่ต้องการให้หนา
Subject & name box
<font face=tahoma color=blue size=5><b>Professor <font color=magenta>McGonagall</b><font color=Green> อาจารย์ใหญ่ฮอกวอตส์</font></font></font>
message box
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์

ProfessorMcGonagall อาจารย์ใหญ่ฮอกวอตส์

3สี (เน้นตัวหนา 2 สี "ห่างกัน") ***ใช้โค้ดตัวหนา 2 ชุด เพราะว่าระยะข้อความห่างกัน
Subject & name box
<font face=tahoma color=blue size=5><b>Professor </b><font color=magenta>McGonagall<font color=Green> อาจารย์ใหญ่<b>ฮอกวอตส์</b></font></font></font>
message box
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์
Professor McGonagall อาจารย์ใหญ่ฮอกวอตส์

4สี (mix face , mix size & mix shape)
Subject & name box
<font face=tahoma color=blue size=4><i>Professor </i><font color=magenta>McGonagall<font face=jasmin upc color=green size=5><u>อาจารย์ใหญ่</u><font face=iris color=orange><b>ฮอกวอตส์</b></font></font></font></font>
message box
Professor McGonagallอาจารย์ใหญ่ฮอกวอตส์
Professor McGonagallอาจารย์ใหญ่ฮอกวอตส์

4สี (ร่วมface ร่วมsize ร่วมshape)
Subject & name box
<b><i><u><font face=tahoma color=blue size=5>Professor <font color=magenta>McGonagall<font color=green>อาจารย์ใหญ่<font color=orange>ฮอกวอตส์</font></font></font></font></u></i></b>
message box
Professor McGonagallอาจารย์ใหญ่ฮอกวอตส์
Professor McGonagallอาจารย์ใหญ่ฮอกวอตส์

^
^
เปิดก่อนสุดปิดนอกสุด
เปิดหลังสุดปิดในสุด ตามลำดับ

<b><i><u>Text</u></i></b>

หวังไว้ว่าผู้สนใจศึกษาเรื่องโค้ดสีเบื้องต้นที่ถูกต้องสำหรับบอร์ดปาล์ม
จะได้ความรู้จากกระทู้นี้และนำไปต่อยอดพลิกแพลงใช้ได้ในอนาคต
เน้นย้ำนะคะ การใช้โค้ดที่ถูกต้องสวยงาม ทั้งรูปแบบ และขนาดที่พอดี
ไม่เป็นที่เดือดร้อนของเพื่อนร่วมบอร์ด
เป็นการเล่นของผู้ได้รับการอบรมดี มีจิตสาธารณะ มีคุณสมบัติที่ดีของอารยชน
จะช่วยให้บอร์ดไม่รับภาระหนักและเป็นระเบียบ
ไม่อืดจนต้อง back up บ่อย ๆ และครั้งละนาน ๆ ค่ะ ~

ฝากอีกนิดสำหรับผู้ที่เพิ่งเรียนรู้
อย่าเพิ่งแสดงอภินิหาริย์เสกหัวกระทู้เป็นกระทู้หลากสี หรือกระทู้สายรุ้ง
โดยที่ยังไม่แม่นโค้ดนะคะ ลองใช้สักสี - สองสีดูก่อน เอาให้แม่นแล้วค่อย ๆ ไปค่ะ
มิฉะนั้นถ้าพลาดมา จะโดนด่ากันเป็นแถบ ๆ ตั้งแต่คนตั้งกระทู้ถึงคนสอนว่าไม่ได้เรื่อง

และอีกนิด พิจารณาในการเลือกใช้ขนาดและความยาวชื่อกระทู้ให้ดี
อย่าเป็นตัวถ่วงหนัก ทำให้เว็บเพจต้องสูญเสียโดยใช่เหตุจากการตั้งกระทู้โอ่โถงมากเกินความจำเป็น
ไม่ต้องกลัวคนไม่เห็นกระทู้เราหรอกค่ะ เชื่อเดี๊ยนสิว่าทุกคนที่เข้าปาล์มมาน่ะ เห็นทุกกระทู้ล่ะค่ะ
มีแต่ตัวเราเองนี่แหล่ะค่ะที่ "กลัวจะมองไม่เห็น" ไปเอง
ต่อให้เราครีเอทหัวกระทู้สวยงามอลังการแค่ไหน แต่เนื้อความเต็มไปด้วยแกลบและกาก จนดู "กลวง"
เดี๊ยนว่ากระทุ้ฟ้อนท์ regular ธรรมดาไม่ใส่ไข่ แต่เปี่ยมไปด้วยลูกเล่นและสีสันทางปัญญาน่ะ
มันสวยงามกว่าเยอะค่ะ ~

/me ขีดเส้นใต้จบสองเส้นซ้อน ~

---------------------------------------------------------------------