วันพฤหัสบดีที่ 4 กันยายน พ.ศ. 2557

การจัดรูปแบบเอกสาร : พงศ์ศิริ คำพา

     การจัดรูปแบบเอกสาร
                                การจัดรูปแบบของเอกสาร 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 เพียงช่องเดียว แม้นว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม

ความคิดเห็น
คุณไม่มีสิทธิ์เพิ่มความคิดเห็นhttps://sites.google.com/site/cirayus/sux-kar-reiyn-ru/4-kar-cad-rup-baeb-xeksar
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)