HTML (HyperText Markup Language) มีแท็กพิเศษ 6 แท็กสำหรับแสดงส่วนหัวในระดับต่างๆ พารามิเตอร์ทั้งหมดมีพารามิเตอร์เริ่มต้น (ขนาดและรูปแบบของแบบอักษร จำนวนการเยื้องจากองค์ประกอบก่อนหน้าและถัดไป ฯลฯ) ตัวเลือกเหล่านี้สามารถแทนที่ได้โดยใช้คำสั่ง CSS (Cascading Style Sheets) และเปลี่ยนลักษณะที่ปรากฏของส่วนหัวในข้อความของหน้าเว็บ
คำแนะนำ
ขั้นตอนที่ 1
วางส่วนหัวของระดับต่างๆ ระหว่างแท็กเปิดและแท็กปิดที่เกี่ยวข้อง หากยังไม่ได้ทำในซอร์สโค้ดของหน้าเว็บ ตัวอย่างเช่น หัวเรื่องที่สำคัญที่สุด (ระดับแรก) ควรอยู่ระหว่างแท็ก
และ
:
หัวเรื่องระดับแรก
ควรวางหัวเรื่องย่อยระดับที่สำคัญที่สุดถัดไประหว่างแท็ก
และ
เป็นต้น ระดับสุดท้ายที่คาดการณ์ไว้คือระดับที่หก -
และ
ขั้นตอนที่ 2
วางข้อความในส่วนหัวของซอร์สโค้ด (ระหว่างแท็กและแท็ก) ที่บอกเบราว์เซอร์ของผู้เยี่ยมชมว่ามีคำอธิบายของสไตล์ใน CSS ในที่นี้:
/ * คำแนะนำ CSS จะอยู่ที่นี่ * /
ขั้นตอนที่ 3
ระหว่างแท็กรูปแบบการเปิดและการปิด ให้เพิ่มคำอธิบายลักษณะสำหรับส่วนหัวของแต่ละระดับที่คุณต้องการเปลี่ยนรูปลักษณ์ ตัวอย่างเช่น หากคุณต้องการเปลี่ยนรูปลักษณ์ของส่วนหัวระดับแรกเท่านั้น โค้ดนี้อาจมีลักษณะดังนี้:
ชั่วโมง1 {
สี: แดง;
ขนาดตัวอักษร: 20px;
รูปแบบตัวอักษร: ตัวเอียง;
font-weight: ตัวหนา;
ขอบบน: 30px;
ระยะขอบล่าง: 20px;
}
ในที่นี้ h1 ระบุว่าคำอธิบายในวงเล็บปีกกาหมายถึงแท็ก h1 และเรียกว่า "ตัวเลือก" พารามิเตอร์ color กำหนดสีของข้อความ พารามิเตอร์ขนาดฟอนต์คือขนาดฟอนต์ รูปแบบฟอนต์ที่มีค่าตัวเอียงคือตัวเอียง น้ำหนักฟอนต์ที่มีค่าตัวหนาเป็นตัวหนา ระยะขอบด้านบนอยู่ด้านบน ระยะขอบ และระยะขอบล่างคือระยะขอบล่าง สำหรับส่วนหัวระดับที่สอง ให้เพิ่มบล็อกที่คล้ายกันด้วยตัวเลือก h2 เป็นต้น
ขั้นตอนที่ 4
ใช้ไวยากรณ์ชวเลขหากมีหลายระดับที่จะอธิบาย ตัวอย่างเช่น สามารถใส่คำอธิบายแบบอักษรในพารามิเตอร์เดียว เช่นเดียวกับคำอธิบายขนาดเยื้อง ตัวอย่าง:
ชั่วโมง1 {
สี: แดง;
แบบอักษร: ตัวหนา 20px arial;
ระยะขอบ: 30px 0 20px 0;
}
ชั่วโมง2 {
สี: ส้ม;
แบบอักษร: ตัวหนา 18px arial;
ระยะขอบ: 25px 0 15px 0;
}
ในพารามิเตอร์ระยะขอบ ต้องระบุระยะขอบตามเข็มนาฬิกา โดยเริ่มจากระยะขอบบน ผ่านช่องว่าง (บนขวาล่างซ้าย)