ใน HTML การจัดการย่อหน้าของข้อความจะใช้ <p> หรือ paragraph ซึ่งคำสั่ง <p> จะเป็นคำสั่งให้ขึ้นย่อหน้าใหม่ แต่เราจะไม่สามารถกำหนดผลลัพธ์ของข้อความได้ แม้ว่าจะออกแบบอย่างไร รูปแบบนั้นจะถูกตัดออกหมด
HTML Paragraphs
คำสั่ง <p> ของHTML จะเป็นคำสั่งที่ใช้จัดการเกี่ยวกับย่อหน้า ซึ่งเมื่อพิมพ์คำสั่งนี้จะเป็นการขึ้นย่อหน้าใหม่เสมอ เพราะเบราว์เซอร์จะทำการเพิ่มระยะห่างของข้อความทั้งก่อนและหลังให้โดยอัตโนมัติ
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<p>ตัวอย่างข้อความที่ 1</p>
<p>ตัวอย่างข้อความที่ 2</p>
<p>ตัวอย่างข้อความที่ 3</p>
</body>
</html>
HTML Display
คุณไม่มีทางรู้ได้เลยว่า html จะแสดงผลของข้อความอย่างไร ขนาดของหน้าจอเล็ก หรือใหญ่ก็แสดงผลลัพท์ที่แตกต่างกัน ถึงแม้ว่าคุณจะมีการจัดรูปแบบข้อความมาอย่างดี ในหน้าแสดงผล เบราว์เซอร์ก็จะลบช่องว่างและบรรทัดออกไปโดยอัตโนมัติ
ตัวอย่างการจัดรูปแบบข้อความ
<!DOCTYPE html>
<html>
<body>
<p>
ข้อความนี้
ประกอบด้วยข้อความ
หลายบรรทัด
แต่เบราว์เซอร์ก็ไม่สนใจอยู่ดี
</p>
<p>
ข่อความนี้
ประกอบด้วย ช่องว่างเยอะแยะ
แต่ อย่างไรตาม
เบราว์เซอร์ก็ยัง ไม่สนใจอยู่ดี
</p>
<p>
จำนวนบรรทัดของเบราว์เซอร์ จะขึ้นอยู่กับขนาดของหน้าต่างที่ข้อความแสดง ถ้าคุณปรับขนาดของหน้าต่างเบราว์เซอร์ที่ใช้แสดงผลโค้ด HTML คุณจะพบว่าจำนวนของบรรทัดเปลี่ยนไป
</p>
</body>
</html>
HTML Horizontal Rules
tag <hr> จะเป็นคำสั่ง HTML ที่จะสร้างเส้นตรงแนวนอนเพื่อแยกข้อความหรือเนื้อหาในหน้า HTML
<hr> เป็น tag ที่ไม่ต้องมี tag ปิด
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h1>หัวข้อที่ 1</h1>
<p>ข้อความที่ 1</p>
<hr>
<h2>หัวข้อที่ 2</h2>
<p>ข้อความที่ 2</p>
<hr>
<h2>หัวข้อที่ 3</h2>
<p>ข้อความที่ 3</p>
</body>
</html>
HTML Line Breaks
tag <br> จะเป็นคำสั่ง HTML สำหรับขึ้นบรรทัดใหม่ ซึ่งหากต้องการขึ้นบรรทัดใหม่ โดยไม่เริ่มย่อหน้าใหม่ให้ใช้คำสั่ง <br>
<br> เป็น tag ที่ไม่ต้องมี tag ปิด
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<p>ตัวอย่าง<br>การจัดข้อความ<br>ด้วยคำสั่ง br</p>
</body>
</html>
บทกลอนเจ้าปัญหา
เมื่อคุณเขียนบทกลอนด้วยโค้ดต่อไปนี้
<!DOCTYPE html>
<html>
<body>
<p>อย่างที่บอก HTML จะไม่สนใจในเรื่องบรรทัดหรือช่องว่างเลย</p>
<p>เมื่อเราเขียนบทกลอนดังนี้ </p>
<p>
ไม่เมาเหล้าแล้วแต่เรายังเมารัก
สุดจะหักห้ามจิตคิดไฉน
ถึงเมาเหล้าเช้าสายก็หายไป
แต่เมาใจนี้ประจำทุกค่ำคืน
</p>
</body>
</html>
วิธีแก้ปัญหา “บทกลอนเจ้าปัญหา” ด้วย Element <pre>
element <pre> จะช่วยในเรื่องของการกำหนดการจัดรูปแบบข้อความ โดยข้อความที่อยู่ภายใน <pre> จะแสดงขนาดความกว้างของตัวอักษร ขนาดของช่องว่าง และความกว้างของแต่ละบรรทัดให้เท่าๆ กัน ซึ่งปกติแล้วจะใช้ Courier
ตัวอย่างการใช้ <pre>
<!DOCTYPE html>
<html>
<body>
<p>tag-pre จะจัดรูปแบบตัวอักษร ข้อความและระยะห่างระหว่างบรรทัดให้เท่าๆ กัน</p>
<pre>
ไม่เมาเหล้าแล้วแต่เรายังเมารัก
สุดจะหักห้ามจิตคิดไฉน
ถึงเมาเหล้าเช้าสายก็หายไป
แต่เมาใจนี้ประจำทุกค่ำคืน
</pre>
</body>
</html>
สรุป
Tag | คำอธิบาย |
---|---|
<p> | ใช้กำหนดย่อหน้า |
<hr> | เส้นตรงแนวนอนเพื่อแยกข้อความหรือเนื้อหาในหน้า HTML |
<br> | ใช้เพื่อขึ้นบรรทัดใหม่ |
<pre> | กำหนดการจัดรูปแบบข้อความ |