HTML - การจัดรูปแบบ

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

ข้อความตัวหนา

สิ่งที่ปรากฏภายใน <b>...</b> องค์ประกอบจะแสดงเป็นตัวหนาดังที่แสดงด้านล่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Bold Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <b>bold</b> typeface.</p>
   </body>
	
</html>

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

ข้อความตัวเอียง

สิ่งที่ปรากฏภายใน <i>...</i> องค์ประกอบจะแสดงเป็นตัวเอียงดังที่แสดงด้านล่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Italic Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <i>italicized</i> typeface.</p>
   </body>
	
</html>

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

ข้อความที่ขีดเส้นใต้

สิ่งที่ปรากฏภายใน <u>...</u> องค์ประกอบจะแสดงด้วยขีดเส้นใต้ดังที่แสดงด้านล่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Underlined Text Example</title>
   </head>
	
   <body>
      <p>The following word uses an <u>underlined</u> typeface.</p>
   </body>
	
</html>

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

ข้อความขีดฆ่า

สิ่งที่ปรากฏภายใน <strike>...</strike> องค์ประกอบจะแสดงด้วยขีดทับซึ่งเป็นเส้นบาง ๆ ผ่านข้อความดังที่แสดงด้านล่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Strike Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
   </body>
	
</html>

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

แบบอักษร Monospaced

เนื้อหาของไฟล์ <tt>...</tt>องค์ประกอบถูกเขียนด้วยตัวอักษรเชิงเดี่ยว แบบอักษรส่วนใหญ่เรียกว่าฟอนต์ความกว้างตัวแปรเนื่องจากตัวอักษรต่างกันมีความกว้างต่างกัน (เช่นตัวอักษร 'm' กว้างกว่าตัวอักษร 'i') อย่างไรก็ตามในแบบอักษร monospaced แต่ละตัวอักษรมีความกว้างเท่ากัน

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Monospaced Font Example</title>
   </head>
	
   <body>
      <p>The following word uses a <tt>monospaced</tt> typeface.</p>
   </body>
	
</html>

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

Superscript Text

เนื้อหาของไฟล์ <sup>...</sup>องค์ประกอบถูกเขียนด้วยตัวยก ขนาดแบบอักษรที่ใช้มีขนาดเท่ากับอักขระที่อยู่รอบ ๆ แต่จะแสดงความสูงครึ่งหนึ่งของอักขระเหนืออักขระอื่น ๆ

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Superscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sup>superscript</sup> typeface.</p>
   </body>
	
</html>

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

ข้อความสมัครสมาชิก

เนื้อหาของไฟล์ <sub>...</sub>องค์ประกอบถูกเขียนด้วยตัวห้อย ขนาดแบบอักษรที่ใช้จะเหมือนกับอักขระที่อยู่รอบ ๆ แต่จะแสดงความสูงครึ่งหนึ่งของอักขระที่อยู่ใต้อักขระอื่น ๆ

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Subscript Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <sub>subscript</sub> typeface.</p>
   </body>
	
</html>

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

แทรกข้อความ

สิ่งที่ปรากฏภายใน <ins>...</ins> องค์ประกอบจะแสดงเป็นข้อความแทรก

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Inserted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

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

ข้อความที่ถูกลบ

สิ่งที่ปรากฏภายใน <del>...</del> องค์ประกอบจะแสดงเป็นข้อความที่ถูกลบ

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Deleted Text Example</title>
   </head>
	
   <body>
      <p>I want to drink <del>cola</del> <ins>wine</ins></p>
   </body>
	
</html>

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

ข้อความขนาดใหญ่ขึ้น

เนื้อหาของไฟล์ <big>...</big> องค์ประกอบจะแสดงขนาดตัวอักษรหนึ่งขนาดที่ใหญ่กว่าส่วนที่เหลือของข้อความโดยรอบดังที่แสดงด้านล่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Larger Text Example</title>
   </head>
	
   <body>
      <p>The following word uses a <big>big</big> typeface.</p>
   </body>
	
</html>

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

ข้อความเล็กลง

เนื้อหาของไฟล์ <small>...</small> องค์ประกอบจะแสดงขนาดตัวอักษรหนึ่งขนาดเล็กกว่าส่วนที่เหลือของข้อความที่ล้อมรอบดังที่แสดงด้านล่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

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

การจัดกลุ่มเนื้อหา

<div> และ <span> องค์ประกอบช่วยให้คุณสามารถจัดกลุ่มองค์ประกอบต่างๆเข้าด้วยกันเพื่อสร้างส่วนหรือส่วนย่อยของหน้า

ตัวอย่างเช่นคุณอาจต้องการวางเชิงอรรถทั้งหมดในหน้าภายในองค์ประกอบ <div> เพื่อระบุว่าองค์ประกอบทั้งหมดภายในองค์ประกอบ <div> นั้นเกี่ยวข้องกับเชิงอรรถ จากนั้นคุณอาจแนบสไตล์เข้ากับองค์ประกอบ <div> นี้เพื่อให้ปรากฏโดยใช้ชุดกฎสไตล์พิเศษ

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

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

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

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

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

แท็กเหล่านี้มักใช้กับ CSS เพื่อให้คุณสามารถแนบสไตล์กับส่วนของหน้าได้