การเรียนรู้ HTML ตอนที่ 8: การใช้ตัวยก, ตัวห้อย, ตัวเล็กและองค์ประกอบข้อความใน HTML
ในการสร้างเอกสาร HTML แน่นอนว่าคุณเป็นต้องใช้องค์ประกอบรูปแบบข้อความ คุณสามารถกำหนดรูปแบบของข้อความที่คุณสร้างขึ้นโดยใช้แท็กพิเศษสำหรับการจัดรูปแบบข้อความ ในเนื้อหานี้ฉันจะพูดถึงองค์ประกอบตัวยกขนาดเล็กตัวห้อยและองค์ประกอบข้อความใน HTML
องค์ประกอบข้อความขนาดเล็กตัวห้อยและตัวกำกับที่มีเครื่องหมายกำกับนั้นเป็นองค์ประกอบที่จัดอยู่ในประเภทการจัดรูปแบบทางกายภาพเนื่องจากมีการจัดรูปแบบในรูปแบบข้อความลักษณะเฉพาะเท่านั้น
สนับสนุนตัวยก, ตัวห้อยและองค์ประกอบขนาดเล็กเบราว์เซอร์บางตัว ได้แก่ Google Chrome, Mozilla Firefox, Safari, Opera และ Internet Explorer ในขณะเดียวกันองค์ประกอบข้อความที่ทำเครื่องหมายไว้จะได้รับการสนับสนุนอย่างเต็มที่โดยเบราว์เซอร์บางรุ่นเท่านั้น ต่อไปนี้เป็นคำอธิบายที่ลึกซึ้งยิ่งขึ้นขององค์ประกอบข้อความตัวยกตัวเล็กและตัวทำเครื่องหมายใน HTML:
A. องค์ประกอบตัวยก
องค์ประกอบตัวยกใช้สำหรับสร้างข้อความพิมพ์เป็นอันดับ (ตัวยก) องค์ประกอบตัวยกมีการทำเครื่องหมายโดยใช้ <sup> แท็กคู่ ... .. </sup> การใช้องค์ประกอบตัวยกสามารถนำไปใช้กับการเขียนทางคณิตศาสตร์การเขียนการคำนวณทางเคมีเชิงอรรถและอื่น ๆ
นี่คือตัวอย่างโค้ดสำหรับการใช้อิลิเมนต์ตัวยกใน HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Superscript di HTML</title>
</head>
<body>
Jadi jawaban dari 2<sup>4</sup> adalah 16
</body>
</html>ผลลัพธ์จะมีลักษณะเหมือนด้านล่างหลังจากเรียกใช้ในเบราว์เซอร์:
ใน CSS เบราว์เซอร์ส่วนใหญ่จะแสดงองค์ประกอบ <sup> ที่มีค่าคงที่คือ ขนาดตัวอักษร:
ที่มีขนาดเล็ก และ แนวตั้ง: ซุป.
B. องค์ประกอบตัวห้อย
องค์ประกอบห้อยจะใช้ในการพิมพ์ผลในข้อความ (เขียน) ที่มีตำแหน่งต่ำกว่าข้อความต้นฉบับ (ห้อย) องค์ประกอบห้อยถูกทำเครื่องหมายด้วยการใช้แท็ก <sub> คู่ ... </ sub> องค์ประกอบนี้สามารถใช้ในการเขียนสูตรสารประกอบทางเคมี ต่อไปนี้เป็นตัวอย่างของการใช้รหัสตัวห้อย:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Subscript di HTML</title>
</head>
<body>
Air adalah substansi kimia dengan rumus kimia H<sub>2</sub>O
</body>
</html>ผลลัพธ์จะมีลักษณะเหมือนด้านล่างหลังจากเรียกใช้ในเบราว์เซอร์:
ใน CSS เบราว์เซอร์ส่วนใหญ่จะแสดงองค์ประกอบ <sub> ที่มีค่าคงที่คือเช่น ขนาดตัวอักษร:
ที่มีขนาดเล็ก และ จัดแนวตั้ง: ย่อย.
C. องค์ประกอบเล็ก ๆ
องค์ประกอบขนาดเล็กที่ใช้ในการลดขนาดตัวอักษร องค์ประกอบเล็ก ๆ ถูกทำเครื่องหมายด้วย
ใช้ <small> คู่แท็ก ... .. </small>
นี่คือตัวอย่างรหัสสำหรับใช้องค์ประกอบขนาดเล็กใน HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Small di HTML</title>
</head>
<body>
<small>Hai... teks ini menjadi kecil bukan ?</small>
</body>
</html>ผลลัพธ์จะมีลักษณะเหมือนด้านล่างหลังจากเรียกใช้ในเบราว์เซอร์:
เห็นได้จากภาพด้านบนขนาดตัวอักษรจะเล็กลง ใน CSS เบราว์เซอร์ส่วนใหญ่จะแสดงองค์ประกอบ <small> ที่มีค่าคงที่คือเช่น ขนาดตัวอักษร: เล็กลง.
D. องค์ประกอบข้อความที่ทำเครื่องหมาย
องค์ประกอบข้อความที่ทำเครื่องหมายจะใช้ในการประกาศข้อความที่เน้นสีซึ่งมีเอฟเฟกต์ของข้อความเน้นข้อความ องค์ประกอบข้อความที่ทำเครื่องหมายไว้จะถูกทำเครื่องหมายด้วยการใช้คู่ของแท็ก <mark> ... .. </mark> แท็ก <mark> เป็นแท็กใหม่ที่มาจาก HTML5
ต่อไปนี้เป็นรหัสตัวอย่างสำหรับการใช้องค์ประกอบข้อความที่ทำเครื่องหมายไว้:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Elemen Marked Text di HTML</title>
</head>
<body>
<mark>Ini kalimatnya perlu distabilo</mark>
</body>
</html>ผลลัพธ์จะมีลักษณะเหมือนด้านล่างหลังจากเรียกใช้ในเบราว์เซอร์:
ใน CSS เบราว์เซอร์ส่วนใหญ่จะแสดงองค์ประกอบ <mark> ที่มีค่าคงที่นั่นคือ สีพื้นหลัง: สีเหลือง และ สีดำ, เนื้อหาต่อไปเกี่ยวกับวิธีเปลี่ยนสีข้อความและประเภทแบบอักษรใน HTML
