3. การจัดรูปแบบเอกสาร

                        การจัดรูปแบบเอกสาร

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

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

---------------------------------------------------------------   

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

                               1. คำสั่งกำหนดลักษณะหัวเรื่อง (Heading) : <Hn>.....</Hn>

<Hn>....Heading Text ... </Hn>

                                                ข้อความลักษณะหัวเรื่อง จะกำกับด้วยแท็ก <Hn> โดย

                                                    n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6

                o    n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด

                o    n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด

        o    สามารถเพิ่ม/ลดขนาดโดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น

                                        ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
     <TITLE>การกำหนด Heading</TITLE>
</HEAD>
<BODY>
     Computer - Default Size
     <H1>Computer - H1</H1>
     <H2>Computer - H2</H2>
     <H3>Computer - H3</H3>
     <H4>Computer - H4</H4>
     <H5>Computer - H5</H5>
     <H6>Computer - H6</H6>
</BODY>
</HTML>

ผลลัพธ์

Computer - Default Size

Computer - H1

Computer - H2

Computer - H3

Computer - H4

Computer - H5
Computer - H6
---------------------------------------------------------------

                            2. การขึ้นบรรทัดใหม่ : <BR>

<BR>

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

                                  คำสั่ง < BR > เป็นคำสั่งที่กำหนดจุดสิ้นสุดของบรรทัด (break rule) แล้วทำการขึ้นบรรทัดใหม่เพื่อแสดงข้อความส่วนที่เหลือในบรรทัดถัดไป คำสั่งนี้จึงให้ผลเสมือนการกดคีย์ ENTER บนคีย์บอร์ดนั่นเอง
                                       ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

     <TITLE>การการขึ้นบรรทัดใหม่  : <BR></TITLE>

</HEAD>

<BODY>

     Computer Education 01 <BR>

     Computer Education 02

</BODY>

</HTML>

ผลลัพธ์

Computer Education 01
Computer Education 02

                            ข้อสังเกต

                                        คำสั่ง <BR> ส่วนใหญ่มักนิยมจะวางไว้ในตำแหน่งสุดท้ายของประโยค โดยต้องการให้แสดงผลประโยคใหม่ในบรรทัดต่อมา คำสั่ง <BR> จะเป็นคำสั่ง     ที่ไม่ ต้องมีคำสั่งปิด (Single Tag)

---------------------------------------------------------------

                             3. กำหนดค่าของการจัดตำแหน่งการแสดงผล : <P ALIGN = "LEFT/RIGHT/CENTER">.........</P>

<P ALIGN="LEFT/RIGHT/CENTER">..........</P>

                                เป็นคำสั่งที่ทำการจัดตำแหน่งของการแสดงผลทางจอภาพ การที่จะแสดงตำแหน่งต่างๆ นั้นจะต้องอยู่ระหว่างคำสั่ง <P ALIGN="LEFT/RIGHT/CENTER">และปิดด้วย </P> ซึ่งการที่จะให้ข้อความหรือรูปภาพอยู่ชิดซ้าย กึ่งกลางและชิดขวานั้น จะต้องมีคุณสมบัติการจัดตำแหน่งของการแสดงผลดังนี้

                                ·         align = "left" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางซ้าย

                                ·         align = "right" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางขวา

                                ·         align = "center" การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ตรงกลาง 

                ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

     <TITLE> การจัดตำแหน่งการแสดงผล  : <P> </TITLE>

</HEAD>

<BODY>  

<P ALIGN = "LEFT" > Computer Education </P>

<P ALIGN = "CENTER" > Computer Education </P>

<P ALIGN = "RIGHT" > Computer Education </P>

</BODY>

</HTML>

ผลลัพธ์

Computer Education

Computer Education

Computer Education

                                    ข้อสังเกต

                                        ·  ตำแหน่งการแสดงผลนั้นจะมีการแสดงผลชิดซ้ายทุกครั้งถ้าเราไม่มีการกำหนดค่าของการแสดงผล การจัดตำแหน่งการแสดงผลข้อความหรือรูปภาพให้อยู่กึ่งกลางของจอภาพนั้น เราสามารถกำหนดด้วยคำว่า CENTER เป็นคำสั่งได้เลยโดยเราจะเขียนคำสั่งดังนี้ < CENTER >..........< /CENTER >

---------------------------------------------------------------

                      4. คำสั่งสำหรับจัดข้อความให้อยู่กึ่งกลางบรรทัด : <Center>.....</Center>

<CENTER>ข้อมูลที่ต้องการจัดตำแหน่ง</CENTER>

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

                                    การใช้งาน <CENTER> มีตัวอย่างดังนี้

<HTML>

<HEAD>

     <TITLE> จัดข้อความให้อยู่กึ่งกลางบรรทัด  : <BR></TITLE>

</HEAD>

<BODY>  

<CENTER>

การเขียนเว็บเพจด้วยภาษา HTML <BR>

 ขอให้นักเรียนทุกคนตั้งใจเรียนนะครับ ^^ 

</CENTER>

</BODY>

</HTML>

ผลลัพธ์

การเขียนเว็บเพจด้วยภาษา HTML
ขอให้นักเรียนทุกคนตั้งใจเรียนนะครับ ^^

---------------------------------------------------------------

                        5. คำสั่งสำหรับจัดแบบเอกสารตามที่กำหนด : <PRE>......</PRE>

<PRE>......................</PRE>


                                      เป็นการกำหนดตำแหน่งการแสดงผลตามรูปแบบที่เราได้ทำการจัดในไฟล์ต้นฉบับ โดยในคำสั่งนี้เราสามารถจัดตำแหน่งที่เราต้องการให้แสดงผล โดยเรากำหนดด้วยคำสั่ง <PRE> แล้วปิด </PRE> จะทำให้เราสามารถกำหนดตำแหน่งการแสดงผลได้ แต่ถ้าเรากำหนดด้วย <P ALING="LEFT / RIGHT / CENTER"> การแสดงผลก็จะอยู่แค่ชิดซ้าย กึ่งกลาง และชิดขวาเท่านั้น มักจะใช้คำสั่งนี้ในกรณีที่นำข้อมูลจาก NotePad หรือ Text Editor อื่นๆ มาแสดงผล โดยไม่ต้องการให้เสียรูปแบบเดิม ซึ่งจะต้องกำหนดให้ใส่แท็ก Pre กำกับหัวท้ายของข้อมูลนั้นๆ แล้วจึง Copy มา Paste ในเอกสาร HTML

                                        ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

     <TITLE> คำสั่งสำหรับจัดแบบเอกสารตามที่ต้องการ </TITLE>

</HEAD>

<BODY>  

<PRE>

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

รายรับ

                ขายของ  2000  บาท

                ดอกเบี้ย  3000  บาท

รายจ่าย

                ค่าน้ำ       5000  บาท

                ค่าไฟ      8000  บาท

</PRE>

</BODY>

</HTML>

ผลลัพธ์

ตัวอย่าง ทดสอบการพิมพ์โดยการเว้นวรรคตามต้องการด้วยแท็ก PRE
รายรับ
ขายของ 2000 บาท
ดอกเบี้ย 3000 บาท
รายจ่าย
ค่าน้ำ 5000 บาท
ค่าไฟ 8000 บาท

---------------------------------------------------------------

                        6.คำสั่งตีเส้นบรรทัดหรือเส้นคั่นแนวนอน : <HR>

<HR>

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

                                <hr width="ความยาวของเส้น มีหน่วยเป็น Pixel หรือ % ก็ได้">

                                        <hr width="60">
                                        <hr width="20%">
                                        <hr width="60%">

                                <hr width="n" align="LEFT/RIGHT/CENTER" size="n" noshade color="สี">

                ·       ALIGN - การจัดวางตำแหน่งของเส้น

                ·       SIZE - การกำหนดขนาดความหนาของเส้น และสามารถกำหนดได้เพียงแบบเดียวคือ pixel

                ·       NOSHADE - ไม่ต้องแสดงเป็นแบบ 3 มิติ

                ·       COLOR - การระบุสีของเส้น แสดงผลเฉพาะบน IE

                      ตัวอย่างการใช้คำสั่ง

 

<HTML>

<HEAD>

     <TITLE> คำสั่งตีเส้นบรรทัดหรือเส้นคั่นแนวนอน  : <BR></TITLE>

</HEAD>

<BODY>  

<CENTER>

โรงเรียนเลยพิทยาคม  <BR>

โรงเรียนเมืองเลย <BR>

โรงเรียนอนุบาลเลย <BR>

<HR>

<HR Width = "50%" Align ="Center" Size="4" Color="Red">

</CENTER>

</BODY>

</HTML>

                                       ผลลัพธ์


---------------------------------------------------------------

                    คำสั่งเพิ่มเติมในการจัดรูปแบบเอกสารเว็บ

                               1. การย่อหน้าใหม่ (Paragraph Tag)

<P>

                                                                    คำสั่ง < P > เป็นคำสั่งที่สั่งให้โปรแกรมเว็บเบราเซอร์ขึ้นย่อหน้าใหม่ (paragraph)

                                     ข้อสังเกต    จะเห็นได้ว่าการขึ้นบรรทัดใหม่ของคำสั่ง < BR > และ < P > นั้น การเว้นว่างระหว่างบรรทัดของทั้งสองมีความแตกต่างกัน โดยที่คำสั่ง < BR > ช่องว่างระหว่างบรรทัดจะน้อยกว่าคำสั่ง < P >

                2. คำสั่งการเว้นวรรค

&nbsp;


                       &nbsp; (Non Breaking Space) เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติเบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้นว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม

Comments