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

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

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s