คำสั่งใดใช้สำหรับจัดข้อความให้อยู่กึ่งกลางบรรทัด

่ คำสั่ง<br>  คำสั่ง <P>  คำสั่ง <CENTER>  คำสั่ง <PRE>   คำสั่ง <hr>   หมายเหตุเตือนความจำ <!--..-->

คำสั่งต่างๆในการจัดรูปแบบเอกสาร

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

การจัดข้อความเอกสาร HTML ใน Text Editor

ผลลัพธ์ที่แสดงผลผ่านเว็บเบราเซอร์

ลองทำดู : คลิก download ไฟล์ ดังภาพ

การตัดคำขึ้นบรรทัดใหม่ <br>

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

 รูปแบบคำสั่ง

              <br> ข้อความที่ต้องการขึ้นบรรทัดใหม่

ตัวอย่างการใช้แท็ก <br>

ผลลัพท์ที่ได้

ข้อความที่อยู่หลัง <br> จะถูกตัดขึ้นบรรทัดใหม่

การตัดคำขึ้นย่อหน้าใหม่ <P> และ <P Align = ?>

คำสั่ง <P> และ <P Align> เป็นคำสั่งที่ใช้สำหรับจัดวางตำแหน่งข้อความ (Paragraph Break หรือ Alignment) แม้จะมี
การใช้คำสั่ง <BR> ช่วยในการจัดข้อความขึ้นบรรทัดใหม่แล้วบางครั้งยังไม่ตรงตามรูปแบบที่ผู้เขียนโปรแกรมต้องการ เช่น จัดขึ้นบรรทัดใหม่และเว้นบรรทัด หรือจัดย่อหน้า จัดข้อความชิดซ้าย จัดข้อความให้อยู่กึ่งกลาง ในโปรแกรม HTML สามารถทำได้โดยใช้รูปแบบคำสั่งดังนี้

รูปแบบคำสั่ง
                            <P> ............ ข้อความ ............</P>                       

 ตัวอย่างการใช้แท็ก <p>

ผลลัพท์ที่ได้

ข้อความหลัง <p> จะถูกแยก 1 บรรทัดระหว่างย่อหน้า

ลองทำดู : คลิก download ไฟล์ ดังภาพ

รูปแบบคำสั่ง
                            <P> <DD>............ ข้อความ ............</P>      

ผลลัพธ์ที่ได้

2. การเยื้องข้อความแบบกำหนด คือการใช้คำสั่งเว้นช่องว่างมาช่วยในการจัดรูปแบบ &nbsp; ตรงตำแหน่งทีต้องการเว้นช่อาว่าง(โดย1คำสั่งคือ1เคาะ)

ผลลัพธ์ที่ได้

จากตัวอย่างจะเห็นว่าเราได้ทำการใช้คำสั่งเว้นช่องว่าง &nbsp; ทั้งหมด5ครั้ง เหมือนการกดปุ่ม spacbar
5 ครั้ง ถ้าเราต้องการเยื้องข้อความเพิ่มขึ้นก็เพิ่มคำสั่งตามที่เราต้องการ

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

 รูปแบบคำสั่ง

                  <P Align = ตำแหน่ง> .............ข้อความ ..........</P>

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

 ตัวอย่างการใช้แท็ก <p align>

ผลลัพท์ที่ได้

ลองทำดู : คลิก download ไฟล์ ดังภาพ

การจัดวางตำแหน่งข้อความให้อยู่กึ่งกลางด้วย  <CENTER>

                คำสั่ง <CENTER> เป็นคำสั่งที่ใช้จัดวางข้อความกึ่งกลางบรรทัดเช่นเดียวกับคำสั่ง <P ALIGN = CENTER>..............</P> โดยมีรูปแบบการใช้คำสั่งดังนี้

 รูปแบบคำสั่ง

ตัวอย่างการใช้แท็ก <CENTER>

ผลลัพท์ที่ได้

ลองทำดู : คลิก download ไฟล์ ดังภาพ

การใช้คำสั่ง <PRE>

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

รูปแบบคำสั่ง

               <PRE>.................ข้อความ...................</PRE>

ตัวอย่างการใช้แท็ก <PRE>

ผลลัพท์ที่ได้

ได้ผลลัพธ์ตามที่จัดรูปแบบใน Notepad

ลองทำดู : คลิก download ไฟล์ ดังภาพ

สร้างเส้นคั่นแนวนอน <hr>

               คำสั่ง <HR> เป็นคำสั่งที่ใช้สำหรับตีเส้นคั่น (Horizontal Line) เพื่อแยกเอกสารออกเป็นส่วน ๆ ทำให้ง่ายต่อการ
อ่านและดูเป็นระเบียบมากยิ่งขึ้น และการใช้คำสั่ง <HR> ในการตีเส้นนี้ยังสามารถกำหนดขนาดของเส้นคั่นได้หลายแบบ
ตามที่ต้องการอีกด้วย โดยมีรูปแบบการใช้คำสั่ง ดังนี้

รูปแบบคำสั่ง

          <hr> ตำแหน่งที่ต้องการใส่เส้นคั่น

            <hr แอททริบิวท์=> ตำแหน่งที่ต้องการใส่เส้นคั่น

สำหรับแท็ก <hr> นั้นจะมีแอททริบิวท์กำหนดคุณสมบัติของเส้นดังนี้

ตัวอย่างกำหนดเส้นคั่นแบบต่างๆ

ผลลัพท์ที่ได้

ผลลัพธ์เส้นคั่นแบบต่างๆ

ลองทำดู : คลิก download ไฟล์ ดังภาพ

เพิ่มหมายเหตุเตือนความจำ <!--..-->

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

รูปแบบคำสั่ง

                  <!--..-->  วางอยู่ในตำแหน่งใดก็ได้ในโปรแกรม

ตัวอย่างการใส่หมายเหตุเตือนความจำ

ผลลัพท์ที่ได้

จะเห็นว่าข้อความที่เขียนภายใน<!--..--> จะไม่ปรากฏให้เห็นบนหน้าจอ

ลองทำดู : คลิก download ไฟล์ ดังภาพ