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 เพื่อให้คุณสามารถแนบสไตล์กับส่วนของหน้าได้