BasicHTML | Text Formatting | Paragraph & Alignment

จากบทเรียนที่ผ่านมาเราได้ศึกษาคำสั่งเกี่ยวกับตัวอักษรมาแล้ว และพบว่า มีเฉพาะคำสั่ง <Hx> ... </Hx> เท่านั้นที่มีการตัดคำหรือข้อความขึ้นบรรทัดใหม่ ซึ่งในความเป็นจริงนั้น การป้อนข้อความในหน้าเว็บเพจ จะต้องมีการตัดคำขึ้นบรรทัดใหม่ เพื่อให้เกิดความสวยงาม น่าอ่าน และเพื่อการเน้นข้อความสำคัญ และเพื่อให้มีความน่าสนใจยิ่งขึ้นก็จำเป็นจะต้องมีการแทรกภาพเข้าไปด้วย

Line Break : การตัดคำขึ้นบรรทัดใหม่

ในบทที่ผ่านมาจากไฟล์ตัวอย่าง จะพบว่าหากพิมพ์ข้อความยาวๆ เมื่อต้องการจะตัดคำขึ้นบรรทัดใหม่ต้องใช้คำสั่งหยุดการแสดงผล (Break) คำสั่งคือ <br> แทรก ณ ตำแหน่งที่ต้องการให้ขึ้นบรรทัดใหม่ ดังตัวอย่าง

นอกจากนั้นเรายังสามารถแบ่งข้อความในรูปของย่อหน้า (Paragraph) สำหรับกลุ่มข้อความจำนวนมากได้ ด้วยการใช้คำสั่ง <P> ... </P> ผลที่ได้จะแตกต่างจากการใช้คำสั่ง <br> นั่นคือจะมีการเว้นช่องว่างหนึ่งบรรทัดก่อนและหลังย่อหน้า ดังตัวอย่าง

Space between texts : การกำหนดช่องว่างระหว่างข้อความ

บราวเซอร์จะไม่สนับสนุนการแสดงผลการเคาะเว้นวรรค มากเกินกว่า 1 เคาะ (จะเว้นวรรคด้วยการเคาะ 10 ช่องก็แสดงเพียงช่องเดียว) และการกดปุ่มเยื้องย่อหน้าก็จะแสดงเพียง 1 ช่องว่างเท่านั้น เราสามารถกำหนดให้แสดงช่องว่างได้มากกว่า 1 ช่องว่างได้ด้วยการแทรกอักขระพิเศษลงไปคือ   &nbsp;   แทน 1 ชุดต่อ 1 ช่องว่างตัวอักษร ดังตัวอย่าง

Indented Text : การจัดเยื้องย่อหน้าข้อความ

ถ้าเราต้องการให้ข้อความมีการเยื้องจากขอบทั้งสองข้างของหน้าเว็บเพจ สามารถใช้คำสั่ง <BLOCKQUOTE> ... </BLOCKQUOTE> ได้ ข้อความที่อยู่ระหว่างคำสั่งดังกล่าวจะเยื้องระยะจากขอบทั้งสองด้านดังตัวอย่าง

แต่ถ้าหากเราต้องการเยื้องย่อหน้าในบรรทัดแรก เพียงบรรทัดเดียว ก็สามารถใช้การแทรกตัวอักษรว่างลงไป เท่ากับจำนวนเคาะวรรค ที่ต้องการได้โดยตรง หรือ จะกำหนดในคำสั่งย่อหน้า <p style="text-indent: 30"> ก็ได้ (ใช้ได้ดีกับบราวเซอร์ IE บราวเซอร์อื่นอาจไม่แสดงผล ต้องทดสอบดู) ดังตัวอย่าง

Alignments : การจัดวางตำแหน่งของข้อความ

เราสามารถจัดวางตำแหน่งข้อความในหน้าเว็บเพจได้ ทั้งการกำหนดให้ตัวอักษรข้อความชิดด้าน ซ้าย/กลาง/ขวา ของหน้าเว็บเพจ (ปกติข้อความจะถูกจัดชิดซ้ายอยู่แล้วด้วย)
          ด้วยการใช้คำสั่ง <DIV ALIGN="LEFT/CENTER/RIGHT"> ... </DIV> ครอบข้อความนั้น

Lists : หัวข้อแบบรายการ

ในบางครั้งการป้อนข้อความในหน้าเว็บเพจ เราอาจมีความต้องการในการจัดข้อความย่อย เพื่อการอธิบาย หรือแยกความสำคัญให้เห็นแตกต่างชัดเจน การทำหัวข้อย่อยในภาษา HTML ก็สามารถทำได้ โดยแบ่งออกเป็น 2 รูปแบบดังนี้

1. หัวข้อย่อยแบบเรียงลำดับ (Order List) เป็นการกำหนดความสำคัญของหัวข้อย่อยที่ต่อเนื่องกันเป็นลำดับข้อ 1, 2, 3,... จะมีรูปแบบคำสั่งดังนี้
   
   

   รูปแบบคำสั่ง	การแสดงผล
   <OL>     <LI>ข้อย่อยลำดับที่ 1</LI>     <LI>ข้อย่อยลำดับที่ 2</LI>     <LI>ข้อย่อยลำดับที่ 3</LI> </OL>	ข้อย่อยลำดับที่ 1 ข้อย่อยลำดับที่ 2 ข้อย่อยลำดับที่ 3

   
   เรายังสามารถเปลี่ยนลำดับจากตัวเลข 1, 2, 3,... เป็นตัวอักษร A, B, C,... หรือตัวเลขแบบโรมัน i, ii, iii,... ได้ด้วยการกำหนดลักษณะ Type ต่อจากคำสั่ง OL ดังนี้
   
   

   รูปแบบคำสั่ง	การแสดงผล
   <OL TYPE="A">     <LI>ข้อย่อยลำดับที่ 1</LI>     <LI>ข้อย่อยลำดับที่ 2</LI> </OL>	ข้อย่อยลำดับที่ 1 ข้อย่อยลำดับที่ 2
   TYPE="1" หรือไม่ระบุ TYPE="A" TYPE="a" TYPE="I" TYPE="i"	การเรียงลำดับเป็นตัวเลข 1, 2, 3, 4,... การเรียงลำดับเป็นตัวอักษร A, B, C, D,... การเรียงลำดับเป็นตัวอักษร a, b, c, d,... การเรียงลำดับเป็นตัวเลขโรมันใหญ่ I, II, III, IV,... การเรียงลำดับเป็นตัวเลขโรมันเล้ก i, ii, iii, iv,...

   
   
2. หัวข้อย่อยแบบไม่เรียงลำดับ (Unorder List) เป็นการสร้างหัวข้อย่อยชนิดไม่เรียงลำดับความสำคัญในแต่ละข้อ ในเอกสารทั่วๆ ไปจะเรียกว่า Bullet ซึ่งจะมีรูปแบบคำสั่งและรูปแบบตามตัวอย่าง
   
   

   รูปแบบคำสั่ง	การแสดงผล
   <UL TYPE="disc">     <LI>ข้อย่อยที่ 1</LI>     <LI>ข้อย่อยที่ 2</LI> </OL>	ข้อย่อยที่ 1 ข้อย่อยที่ 2
   <UL> <LI TYPE="disc">Disc Bullet</LI> <LI TYPE="square">Square Bullet</LI> <lLI TYPE="circle">Circle Bullet</LI> </UL>	รูปแบบของบุลเล็ตจะเป็นวงกลมทึบ รูปแบบของบุลเล็ตจะเป็นสี่เหลี่ยมทึบ รูปแบบของบุลเล็ตจะเป็นวงกลมโปร่ง

   
   

Horizontal Separator Rule : เส้นแบ่งกั้นหน้าเพจตามแนวนอน

เมื่อมีการบรรจุข้อความ/รูปภาพลงในเว็บเพจจำนวนมาก บางครั้งเราก็มีความจำเป็นอยากแบ่งเนื้อหาออกเป็นส่วนๆ ด้วยเส้นกั้นตามแนวนอน เราสามารถใช้คำสั่ง <HR> แทรกในตำแหน่งที่แบ่งเนื้อหานั้น

เรายังสามารถกำหนดคุณสมบัติของเส้นได้เพิ่มเติม เช่น กำหนดความยาว ความหนา สี และการวางตำแหน่งของเส้นได้ ด้วยการแทรกคุณสมบัติลงไปหลังคำสั่ง <HR> ดังตัวอย่าง

ในบทนี้ เราได้เรียนรู้คำสั่งพื้ฐาน คำสั่งที่เกี่ยวกับการจัดรูปแบบเนื้อหาในส่วน Body การกำหนดสีพื้นหลัง ข้อความ รวมทั้งการแสดงผลของข้อความเป็นหัวข้อย่อย เพื่อสร้างความสวยงามและน่าสนใจให้กับเว็บเพจ การจัดแบ่งข้อความเป็นส่วนๆ ด้วยเส้นกั้น ซึ่งบรรดาคำสั่งที่ผ่านมาสามารถทำให้คุณออกแบบเว็บเพจง่ายๆ พื้นฐานได้แล้ว

END : สรุปคำสั่งที่ใช้ในตอนนี้