HTML Paragraphs

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

ใน 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>กำหนดการจัดรูปแบบข้อความ
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯