การจัดและตกแต่งข้อความ

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

กำหนดรูปแบบหัวเรื่อง <tag h1 - h6>

การกำหนดรูปแบบหัวเรื่องเป็นการกำหนดขนาดตัวอักษรให้แตกต่างกัน เพื่อแยกแต่ ละหัวเรื่องอย่างชัดเจน โดยเรียงลำดับหัวเรื่องใหญ่ไปหัวเรื่องย่อย ใช้แท็กคำสั่ง h..., มีรูปแบบคำสั่ง คือ <h...></h...> ตามด้วยตัวเลข 1-6 สามารถกำหนดขนาดหัวเรื่องได้ 6 ระดับ

Example

<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>

Result

การตัดคำขึ้นย่อหน้าใหม่ <tag p>

เมื่อต้องการจัดข้อความขึ้นบรรทัดใหม่ และเว้นบรรทัดให้อีกหนึ่งบรรทัด แท็กที่ใช้ควบคุมการทำงานในลักษณะนี้คือ แท็ก <p>

Example

<p>This is some text in a paragraph.</p>

<p>This is some text in a paragraph.</p>

Result

การวางตำแหน่งข้อความในย่อหน้า

สามารถจัดเรียงข้อความในแต่ละย่อหน้าของเพจได้ โดยการกำหนดตำแหน่งในแอตทริบิวต์ align <Alignment> ของแท็ก<p>

รูปแบบ <p align="ตำแหน่ง"> ข้อความ </p>

align="left" คือ จัดให้ข้อความอยู่ตำแหน่งชิดซ้าย

align="right" คือ จัดให้ข้อความอยู่ตำแหน่งชิดขวา

align="center" คือ จัดให้ข้อความอยู่ตำแหน่งตรงกลาง

align="justify" คือ จัดให้ข้อความเต็มพื้นที่

Example

<p align="left">Text Left</p>

<p align="right">Text Right</p>

<p align="center">Text Center</p>

Result

การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ <tag center>

Not Supported in HTML5. The <center> tag was used in HTML4 to center-align text.

การจัดให้ข้อมูลที่เป็นข้อความ หรือ รูปภาพ ให้อยู่ตำแหน่งตรงกลางจอภาพ โดยใช้แท็ก<center>

Example

<center>

<p>การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ</p>

<p>กึ่งกลางหน้ากระดาษ</p>

</center>

Result

การสร้างเส้นคั่น <tag hr>

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

แอททริบิวต์ที่กำหนดคุณสมบัติของเส้นคั่นดังนี้

Align การจัดตำแหน่งของเส้นคั่นบนจอภาพ ได้แก่ center, left, right

Color การกำหนดสีของเส้นคั่น

Size การกำหนดขนาดความหนาของเส้นคั่น

Width การกำหนดความกว้างของเส้นคั่น

Noshade การกำหนดให้เส้นคั่นเป็นเส้นทึบ

Example

<center>

<p>การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ</p>

<hr>

<hr width="50%" align="center" size="5" color="red">

</center>

Result

การจัดรูปแบบเอกสารตามที่กำหนด <tag pre>

เป็นการกำหนดตำแหน่งการแสดงผลตามรูปแบบที่ผู้พัฒนาเว็บเพจทำการจัดในไฟล์ต้นฉบับ โดยใช้แท็กคำสั่ง <pre>....</pre> มักจะใช้คำสั่งนี้ในกรณีที่นำข้อมูลจาก Notepad หรือ Text Editor อื่น ๆ มาแสดงผล โดยไม่ต้องการให้เสียรูปแบบเดิม ซึ่งจะต้องกำหนดให้ใส่ แท็ก Pre กำกับหัวท้ายของข้อมูลนั้น

Example

<pre>

ตัวอย่าง ทดสอบการพิมพ์โดยการเว้นวรรคตามต้องการด้วยแท็ก PRE

รายรับ

ขาย Hard disk 1,200 บาท

ดอกเบี้ยเงินฝาก 300 บาท

รายจ่าย

ค่าน้ำ 1,800 บาท

ค่าไฟ 2,500 บาท

</pre>

Result

การกำหนดลักษณะตัวอักษร (Physical & Logical)

การกำหนดลักษณะตัวอักษรในเว็บเพจนั้น มีอยู่ 2 วิธี ได้แก่

  • แบบ Physical เป็นการกำหนดรูปแบบตัวอักษรอย่างเจาะจง

  • แบบ Logical ที่ผู้ใช้บราวเซอร์สามารภกำหนดรูปแบบตัวอักษรได้ด้วยตนเอง

กำหนดลักษณะตัวอักษรแบบ Physical

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

Bold (ตัวหนา)

This is <b>Bold</b>

Italic (ตัวเอียง)

This is <i>Italic</i>

Underline (ขีดเส้นใต้)

This is <u>Underline</u>

Superscript (ตัวอักษรยก)

This is <sup>Superscript</sup>

Subscript (ตัวอักษรห้อย)

This is <sub>Subscript</sub>

Strike (ขีดฆ่า)

This is <s>Strike</s>

Small (ตัวอักษรขนาดเล็ก)

This is <small>Small</small>

Typewriter Text (ตัวพิมพ์ดีด

This is <tt>Typewriter</tt>

Big (ตัวอักษรขนาดใหญ่)

This is <big>Big</big>

Delete (ขีดฆ่า)

This is <del>Delete</del>

Insert (ขีดเส้นใต้)

This is <ins>Insert</ins>

หมายเหตุ แท็ก sup, sub, small สามารถซ้อนกันได้ เพื่อให้การกำหนดค่า มีมากกว่าเดิม เช่น <small><small>ตัวเล็กมาก </small></small>

กำหนดลักษณะตัวอักษรแบบ Logical

การกำหนดลักษณะตัวอักษรแบบ Logical นั้น เป็นการกำหนดรูปแบบตัวอักษรตามความหมายของข้อความนั้น

Emphasis (ใช้เน้นข้อความคำพูดหรือวลี)

This is <em>Emphasis</em>

Strong (ข้อความที่สำคัญมาก)

This is <strong>strong</strong>

Computer Code (ข้อความที่เป็นโค้ดโปรแกรม)

This is <code>Computer Code</code>

Citations(ข้อความที่อ้างอิงแหล่งที่มาของเนื้อหา)

This is <cite>Citations</cite>

Definition (ข้อความที่เป็นนิยาม)

This is <dfn>Definition</dfn>

Keyboard (ข้อความที่เหมือนแป้นพิมพ์)

This is <kbd>Keyboard</kbd>

bi-directional algorithm (ตัวอักษรเขียนย้อนกลับ)

This is <bdo>bi-directional algorithm</bdo>

ตัวอย่างการใช้งานหลายๆ tag พร้อมกัน

Example

<h3 align="center">Taweethapisek School <sup>the school of gentlemen</sup></h3>

<p align="right"><u><i>โรงเรียนทวีธาภิเศก</i></u> <s>โรงเรียนทวีธาภิเษก</s></p>

Result

อธิบาย Code

บรรทัดที่ 1 : การสร้างหัวข้อควรใช้ tag h1-h6 ขึ้นอยู่กับความเหมาะสมของขนาด และมีการยกข้อความโดยใช้ tag sup ซึ่ง tag sup นี้จะต้องอยู่ภายใน tag h3

บรรทัดที่ 2 : ข้อความ "โรงเรียนทวีธาภิเศก" ประกอบด้วย 2 รูปแบบคือ ตัวเอียง และ ขีดเส้นใต้ ดังนั้นการเขียนก็จะต้องประกอบด้วย 2 tag เช่นเดียวกัน โดยจะเอา tag ใดขึ้นก่อนก็ได้ ยกตัวอย่างเช่น <u><i>.......</i></u>