HTML Styles and Formatting

1.Style

ในเนื้อหาส่วนนี้จะเป็นการพูดถึงเรื่องของการจัดรูปแบบ (Styles) การแสดงผลให้กับ element (แท็ก) ซึ่งสามารถเพิ่ม สี ขนาดตัวอักษร พื้นหลัง และอื่นๆอีกมากมาย

ไวยากรณ์

<tagname style="property:value;">

อธิบายภายใน style ประกอบด้วย

  • property ซึ่งเป็นคุณสมบัติของ CSS
  • value เป็นค่าคุณสมบัติของ CSS 

โดย CSS สามารถเรียนรู้ได้ที่ บทที่ 4

 

การใช้ style

ตัวอย่างที่ 1 การกำหนดพื้นหลังของเพจ

<html>
    <body style="background-color:lightgreen;">
      <!-- พื้นหลังเปลี่ยนเป็นสีเขียวอ่อน -->
    </body>
</html>

ไฟล์ที่ 1 เปลี่ยนพื้นหลังเป็นสีเขียวอ่อน

 

ตัวอย่างที่ 2 การใช้ style ในแท็กทั้งหมด

<html>
    <body style="background-color:lightgreen;">
      <h1 style="color:white;text-shadow:1px 1px 1px black;">H1 ตัวหนังสือสีขาว + เงาสีดำ</h1>
      <p style="text-align:center;color:red;font-weight:bolder;text-shadow:2px 2px 2px white;">P กึ่งกลาง + สีแดง + หนา + เงาสีขาว</p>
      <table border="1"style="border-color:white;width:100%;">
       <tr>
        <th style="background-color:white;">ชื่อแท็ก</th>
        <th style="background-color:white;">คำอธิบาย</th>
       </tr>
       <tr>
        <td style="background-color:red;color:white;"><code>&lt;p&gt;</code></td>
        <td style="background-color:white;">แท็กใช้เขียนเนื้อหา</td>
       </tr>
       <tr>
        <td style="background-color:red;color:white;"><code>&lt;h1&gt;</code></td>
        <td style="background-color:white;">กำหนดส่วนหัวเรื่อง (หัวข้อ)</td>
       </tr>
      </table>
    </body>
</html>

ไฟล์ที่ 2 test_style.html

จากไฟล์ที่ 2 มีการใช้ element ที่หลากหลายโดยประกอบไปด้วย 

  • <body>  เปรียบเสมือนโครงสร้างหลักของ HTML ที่ใช้เก็บ element เพื่อแสดงผลออกหน้าเว็บซึ่งในส่วนของนี้มีการใช้ style เพื่อกำหนดสีพื้นหลังเป็นสีเขียวอ่อน
  • <h1> กำหนดหัวเรื่อง โดยใช้ style เพื่อกำหนดตัวหนังสีขาว และเงาตัวหนังสือสีดำ
  • <p> ส่วนในการเขียนเนื้อหาต่าง โดยใช้ style เพื่อกำหนดตำแหน่งกึ่งกลาง ตัวหนังสือสีแดง หนา และมีเงาตัวหนังสือสีขาว
  • <table> แท็กที่ใช้ในการสร้างตาราง โดยใช้ style เพื่อกำหนดสีของเส้นขอบเป็นสีขาว และความกว้างเป็น 100 เปอร์เซนต์
  • <tr> สร้างแถว
  • <th> สร้างคอลัมน์ส่วนหัว โดยใช้ style เพื่อกำหนดพื้นหลังเป็นสีขาว
  • <td> สร้างคอลัมนืส่วนเนื้อหา โดยใช้ style เพื่อกำหนดพื้นหลังสีขาว สีแดง และตัวหนังสือสีขาวในบาง element

เมื่อมีการใช้ element มากขึ้นและอาจมีการใช้ element ซ้ำเหมือนดังไฟล์ที่ 2 ของแท็ก td จะสังเกตได้ว่าข้อเสียของการใช้ style

  • ต้องกำหนดทุกๆ element ที่ต้องการจัดรูปแบบ
  • เขียนโค้ดซ้ำซาก ทำให้การแก้ไขยากลำบากมากขึ้นไปอีก 

แต่นี่เป็นเพียงวิธีใช้ style แบบพื้นฐานเท่านั้น หาต้องการให้การจัดรูปแบบของเอกสาร HTML มีความง่ายมากยิ่งขึ้นแนะนำให้ศึกษาเพิ่มเติมในบทที่ 4 เรื่อง CSS

 

2.Formatting

ในเนื้อหาส่วนนี้จะพูดถึงรูปแบบของตัวหนังสือ ตัวอย่างเช่น ตัวหนา ตัวเอียง ขีดเส้นใต้ เป็นต้น ซึ่งเหล่านี้จะช่วยใหข้อมูลที่นำเสนอมีความโดดเด่น และสามารถบ่งบอกได้ถึงความสำคัญของเนื้อหา ซึ่งแท็กที่ใช้ในการจัดรูปแบบของตัวหนังสือประกอบไปด้วย

  • <b> – ตัวหนา
  • <strong> – ตัวเข้ม
  • <i> – ตัวเอียง
  • <em> – กำหนดตัวหนังสือที่เน้นเ็นตัวเอียง 
  • <mark> – เป็นการเน้นหรือไฮไลท์ข้อความ
  • <small> – กำหนดข้อความขนาดเล็กมากกว่าปกติ
  • <del> – กำหนดข้อความที่ถูกลบ โดยปกติเบราว์เซอร์จะขีดทับ
  • <ins> – กำหนดข้อความที่ถูกแทรกลงในเอกสาร โดยปกติจะขีดเส้นใต้
  • <sub> – กำหนดตัวห้อย สามารถใช้เขียนสูตรางเคมีได้
  • <sup> – กำหนดตัวยก คล้ายเขียนตัวเลขยกกำลัง

 

ตัวอย่างการใช้งาน Formatting ทั้งหมด

<html>
 <body>
  <b>ตัวหนา</b>
  <strong>ตัวเข้ม สำคัญมาก</strong>
  <i>ตัวเอียง</i>
  <em>ตัวเน้น โดยปกติเป็นตัวเอียง</em>
  <small>ตัวเล็กมากว่าปกติ</small>
  <mark>เน้น ไฮไลท์</mark>
  <del>เน้นอักษรที่๔ุกลบจากเอกสาร โดยขีดทับ</del>
  <ins>ขีดเส้นใต้อักษรที่แทรกในหน้าเอกสาร</ins>
  <p>ตัวห้อย<sub>ห้อยนะครับ</sub></p>
  <p>ตัวยก<sup>ยกนะครับ</sup></p>
 </body>
</html>

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: