TOC

This article is currently in the process of being translated into Thai (~98% done).

HTML Basics:

Block & Inline elements

หลังจากที่ได้ศึกษาโครงสร้างของ HTML5 อย่างง่ายแล้ว เราก็จะมาศึกษาคุณสมบัติของ HTML5 element ซึ่งมีอยู่ด้วยกัน 2 ชนิดคือ inline element และ block element ซึ่งเบราว์เซอร์จะทำการ render (การสร้างภาพกราฟิกส์) จาก element เหล่านี้

Block Elements (แสดงผลเป็นลักษณะกล่องข้อความ)

Block element เป็น block สี่เหลี่ยมมุมฉาก จะมีความกว้างและความสูงที่ปรับค่าได้ตามที่เราต้องการ ภายใน block จะประกอบไปด้วย line element และ block element ซ้อนด้านใน

Inline Elements (แสดงผลเป็นบรรทัดเดียวต่อกัน)

inline element ขนาดของมันจะไม่เปลี่ยนอัตโนมัติ และภายในจะประกอบด้วย inline element เท่านั้น และจะมีอยู่ใน paragraph element เท่านั้น <p> element คือ block element

<p></p> element คือ block element <b> element คือ inline element b ย่อมาจาก bold (ตัวพิมพ์หนา) จะทำให้ตัวหนังสือหนาขึ้น

ตัวอย่าง

block element ที่ใช้อยู่บ่อยๆ คือ <div> ย่อมาจาก Division (การแบ่ง) <div> element จะช่วยในการแบ่งข้อมูลที่จะแสดงใน webpage เช่น เรามีข้อมูลอยู่ 2 ชุด แต่ละชุดมี การกรอกข้อมูล, หัวข้อ, ชื่อ, วันที่ตีพิมพ์ ดังตัวอย่างต่อไปนี้

Just Another Day
Written by Christina
On January 11th

This is my second blog entry, and I just wanted to check in on you

My First Blog Entry
Written by Christina
On January 10th

I’m so happy to write my first blog entry – yay!

จากที่เห็นข้อมูลทััั้ง 2 ชุด เราสามารถแบ่งข้อมูลโดยการใช้ block element <div> ข้างใน block element มี block element ซ้อนอยู่อีกที นั่นก็คือ <p> (paragraph) ดังนั้น HTML สำหรับ webpage ของเราจะเขียนออกมาได้ดังนี้

<!DOCTYPE html>
<html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<div>
		<p>Just Another Day<br />
		Written by Christina<br />
		On January 11th
		</p>
		<p>This is my second blog entry, and I just wanted to check in on you
		</p>
	</div>
	<div>
		<p>My First Blog Entry<br />
		Written by Christina<br />
		On January 10th
		</p>
		<p>
		I’m so happy to write my first blog entry – yay!
		</p>
	<div>
</body>
</html>

<div> element จะแบ่งเป็นข้อมูล 2 ชุด ในแต่ละชุด <div> element จะประกอบไปด้วย 2 paragraph (ย่อหน้า) และข้อมูลการกรอกข้อมูล, หัวข้อ, ชื่อ, วันที่ตีพิมพ์

เราจะใช้ <div> element เป็นที่ใส่ข้อมูลในการเขียนบ่อยเพราะเราสามารถใช้แสดงข้อมูลที่ใดก็ได้ใน webpage แต่มันมีข้อจำกัดที่ว่า เบราว์เซอร์จะไม่สามารถแยกแยะได้ว่า ข้อมูลนั้นจัดอยู่ใน section (หมวดหมู่) ไหน ดังนั้น HTML5 ได้มี element ใหม่ๆมาแทนที่ <div>

คราวที่แล้วได้มีโอกาสพูดถึง nest element ไว้คราวๆ ว่า <p> element ซ้อนอยู่ใน <div> element เรียกว่า nest element

สรุป

  • Block element มีลักษณะเป็นสี่เหลี่ยมมุมฉาก
  • Inline element แสดงผลเป็นบรรทัดเดียวต่อกัน
  • ภายใน block element สามารถซ้อน block element ได้อีก (nest element)
  • แต่เราไม่สามารถซ้อน block element ภายใน inline element ได้
  • Paragraph เป็น block element ที่ประกอบไปด้วย inline element เท่านั้น
  • <div> element ใช้เป็นที่ใส่ข้อมูล แต่ใน HTML5 จะใช้ element ใหม่ๆมาแทนที่
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising