การจัดรูปแบบข้อความ HTML

HTML Text Formatting เป็นการใช้แท็ก (Tags) ในภาษา HTML เพื่อจัดรูปแบบข้อความให้มีลักษณะต่าง ๆ เช่น ตัวหนา, ตัวเอียง, ขีดเส้นใต้, เปลี่ยนขนาดตัวอักษร, หรือสีของข้อความ เป็นต้น การใช้แท็กเหล่านี้ช่วยให้เนื้อหาดูมีความชัดเจน และสร้างความเน้นในส่วนที่ต้องการให้ผู้ใช้สนใจ

ตัวอย่างแท็กที่ใช้สำหรับ Text Formatting

<b> (Bold) – ใช้ทำให้ข้อความเป็นตัวหนา

<b>ข้อความนี้เป็นตัวหนา</b>

ผลลัพธ์: ข้อความนี้เป็นตัวหนา

<strong> – เป็นอีกแท็กหนึ่งที่ใช้ทำตัวหนา มีความหมายเชิงเน้นความสำคัญของข้อความ

<strong>ข้อความนี้มีความสำคัญ</strong>

ผลลัพธ์: ข้อความนี้มีความสำคัญ

<i> (Italic) – ใช้ทำให้ข้อความเป็นตัวเอียง

<i>ข้อความนี้เป็นตัวเอียง</i>

ผลลัพธ์: ข้อความนี้เป็นตัวเอียง

<em> (Emphasis) – ใช้ทำให้ข้อความเน้น โดยจะแสดงผลเป็นตัวเอียงเหมือน <i> แต่มีความหมายเชิงเน้นในทางความรู้สึก

<em>ข้อความนี้มีความรู้สึกเน้น</em>

ผลลัพธ์: ข้อความนี้มีความรู้สึกเน้น

<u> (Underline) – ใช้ขีดเส้นใต้ข้อความ

<u>ข้อความนี้มีขีดเส้นใต้</u>

ผลลัพธ์: <u>ข้อความนี้มีขีดเส้นใต้</u>

<del> (Deleted) – ใช้ขีดฆ่าข้อความ แสดงว่าข้อความนั้นถูกลบหรือไม่ใช้งาน

<del>ข้อความนี้ถูกลบ</del>

ผลลัพธ์: ข้อความนี้ถูกลบ

<ins> (Inserted) – ใช้แสดงข้อความที่ถูกเพิ่มเข้ามา

<ins>ข้อความนี้ถูกเพิ่ม</ins>

ผลลัพธ์: <ins>ข้อความนี้ถูกเพิ่ม</ins>

<mark> – ใช้สำหรับเน้นข้อความเหมือนการไฮไลต์

<mark>ข้อความนี้ถูกเน้น</mark>

ผลลัพธ์: ข้อความนี้ถูกเน้น

<sub> (Subscript) – ใช้แสดงข้อความเป็นตัวห้อย เช่นในสมการทางวิทยาศาสตร์หรือคณิตศาสตร์

H<sub>2</sub>O

ผลลัพธ์: H₂O

<sup> (Superscript) – ใช้แสดงข้อความเป็นตัวห้อย เช่นในการเขียนเลขยกกำลัง

X<sup>2</sup>

ผลลัพธ์: X²

<small> – ใช้ทำให้ขนาดของข้อความเล็กลง

<small>ข้อความนี้มีขนาดเล็ก</small>

ผลลัพธ์: ข้อความนี้มีขนาดเล็ก

<big> – ใช้ทำให้ขนาดของข้อความใหญ่ขึ้น (ปัจจุบันไม่ค่อยนิยมใช้แล้ว)

<big>ข้อความนี้มีขนาดใหญ่</big>

ผลลัพธ์: ข้อความนี้มีขนาดใหญ่

<code> – ใช้แสดงโค้ดหรือข้อความที่เป็นโปรแกรม

<code>console.log('Hello World');</code>

ผลลัพธ์: console.log('Hello World');

<pre> (Preformatted text) – ใช้จัดเก็บข้อความในรูปแบบที่เหมือนกันกับการพิมพ์ต้นฉบับ โดยยังคงระยะห่างและการเว้นวรรค

<pre>
Hello
   World
</pre>

ผลลัพธ์:

Hello
   World

การจัดการสีและขนาดของตัวอักษร

การจัดการสีและขนาดของตัวอักษรใน HTML นิยมใช้ CSS ร่วมด้วย เช่น

<span style="color: red;">ข้อความนี้เป็นสีแดง</span>
<span style="font-size: 20px;">ข้อความนี้ขนาดใหญ่</span>

ในตัวอย่างนี้เราใช้แท็ก <span> ร่วมกับการกำหนดสไตล์โดย CSS เพื่อเปลี่ยนสีและขนาดตัวอักษร

บทสรุป

การใช้ HTML Text Formatting เป็นเครื่องมือสำคัญในการปรับแต่งการแสดงผลของข้อความ เพื่อให้ผู้ใช้เข้าใจและรับรู้เนื้อหาได้อย่างชัดเจนขึ้น การใช้แท็กต่าง ๆ เช่น <b>, <i>, <u>, <strong> ฯลฯ ทำให้เราสามารถจัดรูปแบบเนื้อหาได้ตามต้องการ