บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

ย่อหน้า HTML


ย่อหน้าจะขึ้นบรรทัดใหม่เสมอ และมักจะเป็นกลุ่มข้อความ


ย่อหน้า HTML

องค์ประกอบ HTML <p>กำหนดย่อหน้า

ย่อหน้าขึ้นบรรทัดใหม่เสมอ และเบราว์เซอร์จะเพิ่มช่องว่าง (ระยะขอบ) ก่อนและหลังย่อหน้าโดยอัตโนมัติ

ตัวอย่าง

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

การแสดง HTML

คุณไม่สามารถแน่ใจได้ว่าจะแสดง HTML อย่างไร

หน้าจอขนาดใหญ่หรือขนาดเล็ก และหน้าต่างที่ปรับขนาดแล้วจะสร้างผลลัพธ์ที่แตกต่างกัน

ด้วย HTML คุณไม่สามารถเปลี่ยนการแสดงผลโดยเพิ่มช่องว่างหรือบรรทัดพิเศษในโค้ด HTML ของคุณ

เบราว์เซอร์จะลบช่องว่างและบรรทัดเพิ่มเติมโดยอัตโนมัติเมื่อหน้าแสดง:

ตัวอย่าง

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>


กฎแนวนอน HTML

แท็ ก<hr>กำหนดการแบ่งเฉพาะหน้าในหน้า HTML และส่วนใหญ่มักจะแสดงเป็นกฎแนวนอน

องค์ประกอบ<hr>นี้ใช้เพื่อแยกเนื้อหา (หรือกำหนดการเปลี่ยนแปลง) ในหน้า HTML:

ตัวอย่าง

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

แท็ ก<hr>เป็นแท็กว่าง ซึ่งหมายความว่าไม่มีแท็กปิดท้าย


ตัวแบ่งบรรทัด HTML

องค์ประกอบ HTML <br>กำหนดตัวแบ่งบรรทัด

ใช้<br>ถ้าคุณต้องการขึ้นบรรทัดใหม่ (ขึ้นบรรทัดใหม่) โดยไม่ต้องเริ่มย่อหน้าใหม่:

ตัวอย่าง

<p>This is<br>a paragraph<br>with line breaks.</p>

แท็ ก<br>เป็นแท็กว่าง ซึ่งหมายความว่าไม่มีแท็กปิดท้าย


ปัญหาบทกวี

บทกวีนี้จะแสดงเป็นบรรทัดเดียว:

ตัวอย่าง

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

โซลูชัน - HTML <pre> Element

องค์ประกอบ HTML <pre>กำหนดข้อความที่จัดรูปแบบไว้ล่วงหน้า

ข้อความภายใน<pre>องค์ประกอบจะแสดงเป็นแบบอักษรที่มีความกว้างคงที่ (โดยปกติคือ Courier) และจะรักษาทั้งช่องว่างและตัวแบ่งบรรทัด:

ตัวอย่าง

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

แบบฝึกหัด HTML

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ใช้แท็ก HTML ที่ถูกต้องเพื่อเพิ่มย่อหน้าที่มีข้อความ "สวัสดีชาวโลก!"

<html>
<body>

</body>
</html>


การอ้างอิงแท็ก HTML

การอ้างอิงแท็กของ W3Schools มีข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML และแอตทริบิวต์

Tag Description
<p> Defines a paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text

สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา