การเว้นบรรทัดใน HTML ให้ใช้คำสั่ง <br />
<br />ตามท้ายข้อความที่ต้องการขึ้นบรรทัดใหม่ต่อไป คำสั่งท<br /> เป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag)
Codingbasic.com © 2009 All rights reserved
<HTML>
<HEAD>
<TITLE> ��âմ���</TITLE>
</HEAD>
<BODY bgcolor=white>
��鹸����� : <hr>
�����ᴧ ��� 20% : <hr color=red width=20%>
��鹢�ҹ=10 �չ���Թ : <hr
size=10 color=blue >
������ 50% �Դ��� �ժ��� :<hr width=50% align=right color=pink>
��鹷ֺ ��� 50% �չ���Թ : <hr noshade width=50% color=blue>
����չ���Թ ��� 20% ��Ҵ=6 : <hr color=blue width=20% size=6>
จากบทความที่แล้วเราได้เรียนรู้เรื่อง Semantic HTML ไปแล้ว บทความนี้เราจะมาเรียนรู้คำสั่งการจัดรูปแบบเอกสารหรือการจัดข้อความกันบ้าง ซึ่งการใช้งาน Tags ต่างๆ จะทำให้ข้อมูลในเว็บไซต์ดูน่าสนใจและทำให้ User รู้สึกว่าเว็บไซต์ของเราน่าอ่านมากขึ้น ดังนั้นเราจึงต้องเข้าใจคำสั่งในการจัดรูปแบบข้อความว่ามีคำสั่งอะไรบ้าง
คำสั่ง HTML ในการจัดรูปแบบข้อความ
คำสั่ง HTML ที่เราจะกล่าวถึงนี้ เป็นคำสั่ง (Tag) ที่นิยมใช้ในปัจจุบันและบางคำสั่งก็มีความสำคัญอย่างมากที่จำเป็นต้องใช้งานบนหน้าเว็บไซต์ แต่จะมีบางคำสั่งที่ต้องใช้งานตามความเหมาะสมและตามความต้องการของผู้พัฒนา เราไปดูกันเลยว่าจะมี Tag อะไรบ้าง
- คำสั่งการกำหนดหัวเรื่อง (Headings)
- คำสั่งการขึ้นย่อหน้าใหม่ (Paragraphs)
- คำสั่งการเพิ่มสไตล์ให้กับข้อความ (Styles)
- คำสั่งการจัดรูปแบบข้อความ (Text Formatting)
- คำสั่งการอ้างถึง (Quotations)
- คำสั่งการจัดตำแหน่งข้อความชิดซ้าย ชิดขวา หรือกึ่งกลาง (Positions)
1. คำสั่งการกำหนดหัวเรื่อง (Headings)
เป็นการกำหนดหัวข้อให้กับข้อความที่ต้องการ คือ หัวข้อที่มีลำดับสำคัญที่สุดตามด้วยหัวข้อย่อยๆ ที่มีความสำคัญรองลงมา โดยมีรูปแบบดังนี้
รูปแบบ
<h2>ข้อความหัวข้อเรื่องที่ 1</h2> <h2>ข้อความหัวข้อเรื่องที่ 2</h2> <h3>ข้อความหัวข้อเรื่องที่ 3</h3> <h4>ข้อความหัวข้อเรื่องที่ 4</h4> <h5>ข้อความหัวข้อเรื่องที่ 5</h5> <h6>ข้อความหัวข้อเรื่องที่ 6</h6>
ตัวเลขที่กำหนดขนาดและระดับความสำคัญของหัวเรื่องอยู่ในช่วงตัวเลข 1 ถึง 6 เช่น <h2> คือหัวข้อที่สำคัญที่สุด และ <h6> คือหัวข้อที่สำคัญน้อยที่สุด หรือ <h2> ขนาดของตัวอักษรจะมีขนาดใหญ่สุด และ <h6> ขนาดของตัวอักษรจะมีขนาดเล็กสุด ดังตัวอย่างด้านล่าง
ตัวอย่างโค้ด
See the Pen คำสั่งการกำหนดหัวเรื่อง (Heading) by supaporn (@asria) on CodePen.
ความสำคัญของการกำหนดหัวเรื่อง (Headings)
อย่างที่บอกไปแล้วว่าช่วงตัวเลข 1 ถึง 6 มีความสำคัญที่ต่างกัน ซึ่งจะมีผลกับเรื่องของการจัดอันดับของ Search engine ดังนั้นการใช้ <h2> จึงมีความสำคัญมากที่สุด เพราะฉะนั้นในหนึ่งเพจจะใส่ <h2> ได้แค่หนึ่งจุดเท่านั้น ส่วน <h2> ถึง <h6> ก็ใช้เป็นหัวข้อย่อยตามความเหมาะสม
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 : //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.
ข้อกำหนดการใช้งาน
Attribute ที่ชื่อ align หรือ Alignment ของแท็ก <p> จะไม่สนับสนุนใน HTML5 ซึ่งเราต้องใช้ Attribute ที่ชื่อ style แทน ตัวอย่างเช่น <p style=”text-align:left|center|right| justify”>ตำแหน่งข้อความ</p>
สรุป
- ในบทเรียนนี้เราได้เรียนรู้คำสั่ง HTML ในการจัดรูปแบบข้อความบนเอกสาร HTML ไม่ว่าจะเป็นการใช้คำสั่งการกำหนดหัวเรื่อง (Headings) การขึ้นย่อหน้าใหม่ (Paragraphs) หรือการเพิ่มสไตล์ให้กับข้อความ (Styles) เป็นต้น ซึ่งเมื่อเรารู้จักคำสั่งเหล่านี้แล้ว เราก็จะสามารถนำไปใช้ในการจัดการรูปแบบของเนื้อหาบนเว็บเพจที่เราต้องการให้มีความสวยงามและน่าอ่านมากขึ้น หวังว่าบทเรียนนี้จะเป็นประโยชน์กับเพื่อนๆ ไม่มากก็น้อย
สิ่งที่ได้รับ
และสำหรับใครที่ยังไม่ได้อ่านบทความก่อนหน้าของเรา อย่าลืมไปอ่านด้วยนะ Semantic HTML