HTML - แท็กพื้นฐาน

แท็กหัวเรื่อง

เอกสารใด ๆ เริ่มต้นด้วยหัวเรื่อง คุณสามารถใช้ขนาดต่างๆสำหรับส่วนหัวของคุณได้ HTML ยังมีหัวเรื่องหกระดับซึ่งใช้องค์ประกอบ<h1>, <h2>, <h3>, <h4>, <h5>, และ <h6>. ในขณะที่แสดงหัวเรื่องใด ๆ เบราว์เซอร์จะเพิ่มหนึ่งบรรทัดก่อนและหนึ่งบรรทัดหลังจากหัวข้อนั้น

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แท็กย่อหน้า

<p>แท็กนำเสนอวิธีการจัดโครงสร้างข้อความของคุณเป็นย่อหน้าต่างๆ ข้อความแต่ละย่อหน้าควรอยู่ระหว่างแท็กเปิด <p> และแท็กปิด </p> ดังที่แสดงด้านล่างในตัวอย่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แท็กแบ่งบรรทัด

เมื่อใดก็ตามที่คุณใช้ไฟล์ <br />องค์ประกอบสิ่งที่ตามมาจะเริ่มจากบรรทัดถัดไป แท็กนี้เป็นตัวอย่างของไฟล์empty องค์ประกอบโดยที่คุณไม่จำเป็นต้องเปิดและปิดแท็กเนื่องจากไม่มีอะไรจะเข้ามาระหว่างพวกเขา

แท็ก <br /> มีช่องว่างระหว่างอักขระ brและเครื่องหมายทับ หากคุณเว้นช่องว่างนี้เบราว์เซอร์รุ่นเก่าจะมีปัญหาในการแสดงตัวแบ่งบรรทัดในขณะที่คุณพลาดอักขระสแลชไปข้างหน้าและใช้เพียง <br> มันไม่ถูกต้องใน XHTML

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เนื้อหาที่อยู่ตรงกลาง

คุณสามารถใช้ได้ <center> แท็กเพื่อวางเนื้อหาไว้ตรงกลางหน้าหรือเซลล์ตาราง

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เส้นแนวนอน

เส้นแนวนอนใช้เพื่อแยกส่วนของเอกสารที่มองเห็นได้ <hr> แท็กสร้างเส้นจากตำแหน่งปัจจุบันในเอกสารไปยังขอบด้านขวาและแบ่งบรรทัดตามนั้น

ตัวอย่างเช่นคุณอาจต้องการให้เส้นแบ่งระหว่างสองย่อหน้าดังตัวอย่างด้านล่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

อีกครั้ง <hr /> แท็กคือตัวอย่างของไฟล์ empty องค์ประกอบโดยที่คุณไม่จำเป็นต้องเปิดและปิดแท็กเนื่องจากไม่มีอะไรจะเข้ามาระหว่างพวกเขา

<hr /> องค์ประกอบมีช่องว่างระหว่างอักขระ hrและเครื่องหมายทับ หากคุณเว้นช่องว่างนี้เบราว์เซอร์รุ่นเก่าจะมีปัญหาในการแสดงเส้นแนวนอนในขณะที่คุณพลาดอักขระสแลชไปข้างหน้าและใช้<hr> ไม่ถูกต้องใน XHTML

รักษาการจัดรูปแบบ

บางครั้งคุณต้องการให้ข้อความของคุณเป็นไปตามรูปแบบที่แน่นอนของวิธีการเขียนในเอกสาร HTML ในกรณีเหล่านี้คุณสามารถใช้แท็กที่จัดรูปแบบไว้ล่วงหน้าได้<pre>.

ข้อความใด ๆ ระหว่างช่องเปิด <pre> แท็กและการปิด </pre> แท็กจะรักษาการจัดรูปแบบของเอกสารต้นทาง

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ลองใช้รหัสเดิมโดยไม่เก็บไว้ข้างใน <pre>...</pre> แท็ก

พื้นที่ปลอดการบุกรุก

สมมติว่าคุณต้องการใช้วลี "12 Angry Men" ที่นี่คุณไม่ต้องการให้เบราว์เซอร์แยก "12, Angry" และ "Men" ออกเป็นสองบรรทัด -

An example of this technique appears in the movie "12 Angry Men."

ในกรณีที่คุณไม่ต้องการให้เบราว์เซอร์ไคลเอนต์ทำลายข้อความคุณควรใช้เอนทิตีช่องว่างที่ไม่แตก  แทนที่จะเป็นช่องว่างปกติ ตัวอย่างเช่นเมื่อเขียนโค้ด "12 Angry Men" ในย่อหน้าคุณควรใช้รหัสต่อไปนี้ -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -