การจัดรูปแบบเอกสาร
การจัดรูปแบบของเอกสาร 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>
โดยปกติแล้ว ภาษา 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>
เป็นคำสั่งที่แสดงเส้นขีดคั่นทางแนวนอน (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 > เป็นคำสั่งที่สั่งให้โปรแกรมเว็บเบราเซอร์ขึ้นย่อหน้าใหม่ (paragraph)
ข้อสังเกต จะเห็นได้ว่าการขึ้นบรรทัดใหม่ของคำสั่ง < BR > และ < P > นั้น การเว้นว่างระหว่างบรรทัดของทั้งสองมีความแตกต่างกัน โดยที่คำสั่ง < BR > ช่องว่างระหว่างบรรทัดจะน้อยกว่าคำสั่ง < P >
2. คำสั่งการเว้นวรรค
(Non Breaking Space) เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติเบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้นว่าผู้สร้างจะเคาะไปหลายครั้งก็ตาม
ไม่มีความคิดเห็น:
แสดงความคิดเห็น