รวมคำสั่ง HTML ในการจัดรูปแบบข้อความ ที่มีความสำคัญและใช้งานบ่อย

คำสั่ง HTML ในการจัดรูปแบบข้อความ

คำสั่ง HTML ที่เราจะกล่าวถึงนี้ เป็นคำสั่ง (Tag) ที่นิยมใช้ในปัจจุบันและบางคำสั่งก็มีความสำคัญอย่างมากที่จำเป็นต้องใช้งานบนหน้าเว็บไซต์ แต่จะมีบางคำสั่งที่ต้องใช้งานตามความเหมาะสมและตามความต้องการของผู้พัฒนา เราไปดูกันเลยว่าจะมี Tag อะไรบ้าง

• คำสั่งการกำหนดหัวเรื่อง (Headings)
• คำสั่งการขึ้นย่อหน้าใหม่ (Paragraphs)
• คำสั่งการเพิ่มสไตล์ให้กับข้อความ (Styles)
• คำสั่งการจัดรูปแบบข้อความ (Text Formatting)
• คำสั่งการอ้างถึง (Quotations)
• คำสั่งการจัดตำแหน่งข้อความชิดซ้าย ชิดขวา หรือกึ่งกลาง (Positions)

1. คำสั่งการกำหนดหัวเรื่อง (Headings)

เป็นการกำหนดหัวข้อให้กับข้อความที่ต้องการ คือ หัวข้อที่มีลำดับสำคัญที่สุดตามด้วยหัวข้อย่อยๆ ที่มีความสำคัญรองลงมา โดยมีรูปแบบดังนี้

รูปแบบ

<h1>ข้อความหัวข้อเรื่องที่ 1</h1>
<h2>ข้อความหัวข้อเรื่องที่ 2</h2>
<h3>ข้อความหัวข้อเรื่องที่ 3</h3>
<h4>ข้อความหัวข้อเรื่องที่ 4</h4>
<h5>ข้อความหัวข้อเรื่องที่ 5</h5>
<h6>ข้อความหัวข้อเรื่องที่ 6</h6>

ตัวเลขที่กำหนดขนาดและระดับความสำคัญของหัวเรื่องอยู่ในช่วงตัวเลข 1 ถึง 6 เช่น <h1> คือหัวข้อที่สำคัญที่สุด และ <h6> คือหัวข้อที่สำคัญน้อยที่สุด หรือ <h1> ขนาดของตัวอักษรจะมีขนาดใหญ่สุด และ <h6> ขนาดของตัวอักษรจะมีขนาดเล็กสุด ดังตัวอย่างด้านล่าง

ตัวอย่างโค้ด

See the Pen คำสั่งการกำหนดหัวเรื่อง (Heading) by supaporn (@asria) on CodePen.

2. คำสั่งการขึ้นย่อหน้าใหม่ (Paragraphs)

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

• <p> คือคำสั่งที่ใช้ในการกำหนดย่อหน้า
• <hr> คือคำสั่งที่ใช้ในการขีดเส้นคั่น
• <br> คือคำสั่งที่ใช้ในการขึ้นบรรทัดใหม่
• <pre> คือคำสั่งที่ใช้ในการจัดรูปแบบข้อความ

เราลองมาดูทีละรูปแบบกันว่าการใช้งานจะแตกต่างกันยังไง

Paragraphs หรือแท็ก <p>

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

รูปแบบ

<p>ข้อความเนื้อหาเว็บไซต์</p>

ตัวอย่างโค้ด

See the Pen คำสั่งการขึ้นย่อหน้าใหม่ (Paragraph) by supaporn (@asria) on CodePen.

Horizontal Rules หรือแท็ก <hr>

คือคำสั่งที่ใช้ในการขีดเส้นคั่น สำหรับคำสั่งนี้ไม่มีแท็กปิด มีรูปแบบดังนี้

รูปแบบ

ข้อความเนื้อหาเว็บไซต์ 1
<hr>
ข้อความเนื้อหาเว็บไซต์ 2

ตัวอย่างโค้ด

See the Pen คำสั่งที่ใช้ในการขีดเส้นคั่น <hr> (Horizontal Line) by supaporn (@asria) on CodePen.

Line Break หรือแท็ก <br>

คือคำสั่งที่ใช้ในการขึ้นบรรทัดใหม่ การขึ้นบรรทัดใหม่นั้นปกติ web browser จะทำการตัดบรรทัดให้เองอยู่แล้ว แต่การตัดคำของเว็บ Browser จะตัดเมื่อแสดงผลไม่ได้ตามขนาดหน้าจอ แต่ถ้าเราใส่คำสั่ง tag <br> เข้าไปเว็บ Browser  จะตัดข้อความที่เราต้องการให้ขึ้นบรรทัดใหม่ให้ทันที เราจะใช้ Tag <br> ดังนี้

รูปแบบ

ข้อความเนื้อหาเว็บไซต์ 1<br>ข้อความเนื้อหาเว็บไซต์ 2

ตัวอย่างโค้ด

See the Pen คำสั่งการขึ้นบรรทัดใหม่ (Line Break) by supaporn (@asria) on CodePen.

จากตัวอย่างด้านบน หากต้องการให้ข้อความไหนขึ้นบรรทัดใหม่ ก็ใส่ Tag <br> ด้านหน้าข้อความนั้นๆ จากนั้นลองรันผลลัพธ์จะเห็นว่าข้อความที่ใส่แท็กได้ขึ้นบรรทัดใหม่ตามที่เราต้องการแล้ว

Pre-formatted หรือแท็ก <pre>

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

รูปแบบ

<pre>
ข้อความเนื้อหาเว็บไซต์ ข้อความเนื้อหาเว็บไซต์
ข้อความเนื้อหาเว็บไซต์         ข้อความเนื้อหาเว็บไซต์


ข้อความเนื้อหาเว็บไซต์
</pre>

ตัวอย่างโค้ด

See the Pen คำสั่งในการจัดรูปแบบข้อความ (Pre-formatted) by ASRIA (@asria) on CodePen.

3. คำสั่งการเพิ่มสไตล์ให้กับข้อความ (Styles)

คือคำสั่งในการเพิ่มสไตล์ให้กับข้อความโดยกำหนด Attribute ที่ชื่อว่า style เข้าไปที่แท็กต่างๆ เช่น แท็ก p, div, h เป็นต้น ซึ่งปกติแล้วเราจะกำหนดสไตล์ผ่านทาง Stylesheet แต่คำสั่งคำสั่งการเพิ่มสไตล์ให้กับข้อความในครั้งนี้เราจะเรียกว่าการกำหนดแบบ inline คือการเพิ่มเข้าไป HTML Tgas นั่นเอง

ซึ่งใน Attribute ชื่อ style เราจะกำหนดคุณลักษณะเดียวกันกับการใช้ภาษา CSS (เดี๋ยวจะมาแนะนำในบทความต่อๆ ไป) เข้าไปใน Elemments นั้นๆ จะขอยกตัวอย่างที่ใช้งานกันบ่อยๆ ดังนี้

• background-color คือการกำหนดสีพื้นหลัง
• color : คือการกำหนดสีของข้อความ
• font-family : คือการกำหนดประเภทของข้อความ
• font-size : คือการกำหนดขนาดของข้อความ
• text-align : คือการจัดตำแหน่งของข้อความ

รูปแบบ

<p style="background-color:yellow;">การกำหนดสีพื้นหลัง</p>
<p style="color:blue;">กำหนดสีของข้อความ</p>
<p style="font-family:Arial;">กำหนดประเภทของข้อความ</p>
<p style="font-size:25px;">กำหนดขนาดของข้อความ</p>
<p style="text-align:"left" หรือ "center" หรือ "right" หรือ "justify";">การจัดตำแหน่งของข้อความ</p>

ตัวอย่างโค้ด

See the Pen คำสั่งการเพิ่มสไตล์ให้กับข้อความ (Styles) by ASRIA (@asria) on CodePen.

4. คำสั่งการจัดรูปแบบข้อความ (Text Formatting)

การจัดรูปแบบข้อความให้เว็บเพจเพื่อเพิ่มความน่าสนใจ มีความสวยงาม น่าอ่าน หรือการเน้นข้อมูลที่ทำให้ผู้อ่านโฟกัสข้อมูลนั้นๆ ก็นับว่าเป็นสิ่งที่สำคัญมาก การใช้คำสั่งในการจัดรูปแบบข้อความเหล่านี้มีให้เลือกใช้อยู่หลากหลายรูปแบบดังนี้

• <b> คือการกำหนดข้อความตัวหนา โดยไม่ได้กำหนดความสำคัญ
• <i> คือการกำหนดให้ข้อความเอียง
• <em> คือการกำหนดให้ข้อความเอียงและเน้นย้ำเป็นพิเศษ
• <small> คือการกำหนดให้ข้อความมีขนาดเล็ก
• <strong> คือการกำหนดให้ข้อความเป็นตัวหนา โดยกำหนดให้มีความสำคัญ
• <sub> คือการกำหนดให้ข้อความเป็นตัวห้อย
• <sup> คือการกำหนดให้ข้อความเป็นตัวยก
• <ins> คือการกำหนดข้อความส่วนที่เพิ่มเติม (ขีดเส้นใต้)
• <del> คือการกำหนดให้มีเส้นขีดฆ่าข้อความทิ้ง
• <mark> คือการกำหนดให้ไฮไลท์หรือเน้นข้อความ

รูปแบบ

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

ตัวอย่างโค้ด

See the Pen คำสั่งการจัดรูปแบบข้อความ (Text Formatting) by ASRIA (@asria) on CodePen.

5. คำสั่งการอ้างถึง (Quotations)

คำสั่ง HTML ที่ใช้ในการอ้างถึงมีอยู่ด้วยกันหลายแบบ ซึ่งแต่ละแบบก็มีความแตกต่างกันและให้ความหมายที่แตกต่างกันดังนี้

• <blockquote> คือการกำหนดข้อความที่อ้างอิงจากแหล่งอื่น (Blockquote)
• <q> คือการกำหนดข้อความที่อ้างอิงแบบสั้นๆ (Short quotation)
• <abbr> คือการกำหนดคำย่อหรือตัวย่อ (Abbreviations)
• <address> คือการกำหนดข้อมูลติดต่อ (Address)
• <cite> คือการกำหนดชื่องานของเนื้อหา (Cite)
• <bdo> คือการกำหนดทิศทางของข้อความแบบสลับข้าง (Bi-Directional Override)

เราลองมาดูทีละรูปแบบกันว่าการใช้งานจะแตกต่างกันยังไงบ้าง

Blockquote หรือแท็ก <blockquote>

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

รูปแบบ

<p>ประโยคนี้อ้างอิงมาจากเว็บไซต์ ChillChillJapan:</p>
<blockquote cite="ChillChillJapan : https://chillchilljapan.com/">
ในยามฤดูใบไม้ผลิ ภาพต้นไม้ใจกลางเมืองที่ผันเปลี่ยนไปพร้อมกับสถาปัจยกรรมด้านข้างที่เป็นอาคารสูงช่วยส่งเสริมบรรยากาศที่แตกต่างกันอย่างเห็นได้ชัดของธรรมชาติและสิ่งก่อสร้างฝีมือมนุษย์ ถ้าอยากลองสัมผัสวิวมุมสูงแบบแตกต่างก็สามารถขึ้นมาชื่นชมกันได้ที่ Kyoto Tower
</blockquote>

ตัวอย่างโค้ด

See the Pen กำหนดส่วนที่อ้างอิงจากแหล่งอื่น (Blockquote) by ASRIA (@asria) on CodePen.

Short quotation หรือแท็ก <q>

คือการกำหนดข้อความที่อ้างอิงแบบสั้นๆ หรือที่ส่วนมากเรียกอีกอย่างหนึ่งว่า “Quote” หากเพิ่ม Tag และจะมีสัญลักษณ์ Double-Quote (“”) ขึ้นมาแสดงที่ด้านหน้าและหลังข้อความ

รูปแบบ

<p>ข้อความที่แสดงทั่วไป<q>และข้อความอ้างอิง</q></p>

ตัวอย่างโค้ด

See the Pen การกำหนดข้อความที่อ้างอิงแบบสั้นๆ (Short quotation) by ASRIA (@asria) on CodePen.

Abbreviations หรือแท็ก <abbr>

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

รูปแบบ

<p>ข้อความทั่วไป <abbr title="ข้อความอธิบายยาวๆของข้อความย่อ">ข้อความย่อ</abbr> ข้อความอื่นๆ</p>

ตัวอย่างโค้ด

See the Pen กำหนดคำย่อหรือตัวย่อ (Abbreviations) by ASRIA (@asria) on CodePen.

Address หรือแท็ก <address>

คือการกำหนดข้อมูลติดต่อสื่อสารในแท็กนั่นเอง โดยปกติแล้วข้อมูลด้านในแท็กจะแสดงผลเป็นตัวอักษรเอียงให้อัตโนมัติ

รูปแบบ

<address>ข้อความเนื้อหาเกี่ยวกับที่อยู่</address>

ตัวอย่างโค้ด

See the Pen กำหนดข้อมูลติดต่อ (Address) by ASRIA (@asria) on CodePen.

Cite หรือแท็ก <cite>

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

รูปแบบ

<p><cite>ชื่องานหรือเนื้อหา</cite> รายละเอียดของเนื้อหาและอื่นๆ</p>

ตัวอย่างโค้ด

See the Pen กำหนดชื่องานของเนื้อหา (Cite) by ASRIA (@asria) on CodePen.

Bi-Directional Override หรือแท็ก <bdo>

คือการกำหนดทิศทางของข้อความแบบสลับข้าง ถ้าให้เปรียบง่ายๆ คือการวางตัวหนังสือด้านหน้ากระจกนั่นเอง หากต้องการสลับข้างของตัวข้อความจะต้องเพิ่ม Attribute ที่ชื่อ dir เข้าไปด้วย เช่น dir=”rtl” (rtl คือ Right to Left แปลว่าให้เรียงสลับจากขวาไปซ้ายนั่นเอง)

รูปแบบ

<bdo dir="rtl">ข้อความที่ต้องการให้สลับข้าง</bdo>

ตัวอย่างโค้ด

See the Pen กำหนดทิศทางของข้อความแบบสลับข้าง (Bi-Directional Override) by ASRIA (@asria) on CodePen.

6. คำสั่งการจัดตำแหน่งข้อความ (Positions)

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

• Left คือการจัดข้อความในย่อหน้าให้ชิดซ้าย ซึ่งเป็นค่าปกติ
• Center คือการจัดข้อความในย่อหน้าให้อยู่กึ่งกลาง
• Right คือการจัดข้อความในย่อหน้าให้ชิดขวา
• Justify คือการจัดข้อความให้มีความกว้างเท่ากันทั้งซ้ายและขวา

รูปแบบ

<p align ="left หรือ center หรือ right หรือ justify">การจัดตำแหน่งของข้อความ</p>

ตัวอย่างโค้ด

See the Pen คำสั่งการจัดตำแหน่งข้อความ (Positions) by ASRIA (@asria) on CodePen.

สรุป

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