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>
-ตัวยก = <sup>text</sup>
-ตัวห้อย = <sub>test</sub>
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<sup>TM</sup></font>
message box
TM
Professor McGonagallTM
ตัวยก นอกคำสั่งสี
Subject & name box
<font face=tahoma color=blue size=5>Professor McGonagall</font><sup>TM</sup>
message box
Professor McGonagallTM
Professor McGonagallTM
--ตัวห้อย
ตัวห้อย ในคำสั่งสี
Subject & name box
<font face=tahoma color=blue size=5>Professor McGonagall<sub>2</sub></font>
message box
Professor McGonagall2
Professor McGonagall2
ตัวห้อย นอกคำสั่งสี
Subject & name box
<font face=tahoma color=blue size=5>Professor McGonagall</font><sub>2</sub>
message box
Professor McGonagall2
Professor McGonagall2
บทที่ 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
