More Related Content Similar to ใบความรู้ (20) More from Rattana Wongphu-nga
More from Rattana Wongphu-nga (20) 1. ใบความรู้ที่ 8 หน่ วยการเรียนรู้ที่ 2
รหัสวิชา ง31102 การงานอาชีพและเทคโนโลยี ระดับมัธยมศึกษาปี ที่ 4
ชื่อหน่ วย การใช้งานคอมพิวเตอร์
1 ชัวโมง
่
ชื่อเรื่อง คาสังการจัดรู ปแบบเอกสารและการแสดงผลแบบรายการ
่
การจัดรูปแบบเอกสาร
การจัดรู ปแบบของเอกสาร 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 เป็ นต้น
2. ตัวอย่างการใช้ คาสั่ง
<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
---------------------------------------------------------------
3. 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)
่ ่ ่
4. 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 >
่ ่
5. 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 อื่นๆ มาแสดงผล โดยไม่ตองการให้เสียรู ปแบบเดิม ซึ่งจะต้องกาหนดให้
้
6. ใส่แท็ก Pre กากับหัวท้ายของข้อมูลนั้นๆ แล้วจึง Copy มา Paste ในเอกสาร HTML
<HTML>
<HEAD>
<TITLE> คาสังสาหรับจัดแบบเอกสารตามที่ตองการ </TITLE>
่ ้
</HEAD>
<BODY>
<PRE>
ตัวอย่าง ทดสอบการพิมพ์โดยการเว้นวรรคตามต้องการด้วยแท็ก PRE
รายรับ
ขายของ 2000 บาท
ดอกเบี้ย 3000 บาท
รายจ่าย
ค่าน้ า 5000 บาท
ค่าไฟ 8000 บาท
</PRE>
</BODY>
</HTML>
ผลลัพธ์
ตัวอย่าง ทดสอบการพิมพ์โดยการเว้นวรรคตามต้องการด้วยแท็ก PRE
รายรับ
ขายของ 2000 บาท
ดอกเบี้ย 3000 บาท
รายจ่าย
ค่าน้ า 5000 บาท
ค่าไฟ 8000 บาท
7. 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
คาสั่ งเพิมเติมในการจัดรูปแบบเอกสารเว็บ
่
1. การย่อหน้ าใหม่ (Paragraph Tag)
<P>
คาสัง < P > เป็ นคาสังที่สงให้โปรแกรมเว็บเบราเซอร์ข้ ึนย่อหน้าใหม่ (paragraph)
่ ่ ั่
8. ข้ อสังเกต จะเห็นได้ว่าการขึ้นบรรทัดใหม่ของคาสัง < BR > และ < P > นั้น การเว้น
่
ว่างระหว่างบรรทัดของทั้งสองมีความแตกต่างกัน โดยที่คาสัง < BR > ช่องว่างระหว่างบรรทัดจะน้อยกว่าคาสัง
่ ่
<P>
2. คาสั่งการเว้นวรรค
(Non Breaking Space) เป็ นคาสังช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติ
่
เบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียว แม้นว่าผูสร้างจะเคาะไปหลายครั้งก็ตาม
้
การแสดงผลแบบรายการ
จะช่วยให้การแสดงผลของข้อมูลในหน้าเอกสารดูเข้าใจง่ายยิงขึ้น มีการแบ่งข้อมูลออกเป็ นหมวดหมู่ดู
่
สะอาดตา โดยการแสดงรายการให้เป็ นไปตามลาดับความสาคัญ จะทาให้เอกสารเป็ นระเบียบสวยงาม อ่านได้
ง่าย การแสดงรู ปแบบของหัวข้อเรื่ องสามารถทาได้ 5 รู ปแบบ คือ
1. การแสดงรายการแบบมีลาดับ (Order List หรื อ Number List)
2. การแสดงรายการแบบไม่มีลาดับ (Unorder List หรื อ Bullet List)
3. การแสดงรายการแบบหัวข้อย่อย (Definition List)
4. การแสดงรายการแบบไดเรกทอรี่ (Directory List)
5. การแสดงรายการแบบเมนู (Menu List)
การแสดงรายการแต่ละแบบจะมีความแตกต่างกันออกไป ขึ้นอยูกบความต้องการใช้งานใน
่ ั
การจัดข้อมูลในเอกสารเป็ นหลัก ซึ่งแต่ละรู ปแบบจะมีวิธีการใช้คาสัง ดังนี้
่
---------------------------------------------------------------
9. 1. คาสั่งแสดงผลรายการแบบมีลาดับ (Number/Order List)
การแสดงข้อมูลรายการแบบมีหมายเลขกากับ (Number/Order Lists) จะใช้แท็ก <OL> และ
</OL> ซึ่งย่อมาจาก Ordered List คือข้อมูลรายการแบบมีหมายเลข เรี ยงลาดับจากน้อยไปหามากกากับอยูหน้า ่
แต่ละรายการ โดยมีแท็กที่เป็ นส่วนประกอบภายในอีกทีหนึ่ง คือแท็ก <LI> ที่ใช้กาหนดหัวเรื่ องหรื อรายละเอียด
ของรายการย่อย ซึ่งเมื่อรายการย่อยเหล่านี้นาไปแสดงบนเบราเซอร์ ลาดับที่ของรายการจะถูกใส่ให้กบแต่ละ
ั
รายการโดยอัตโนมัติ
<OL TYPE=n START=n2>.........หัวข้อเรื่ อง........
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
</OL>
· type= ชนิดของการแสดงผลแบบรายการ
· I , i เป็ นการแสดงผลแบบโรมัน
· A , a เป็ นการแสดงผลแบบภาษาอังกฤษ
· 1 เป็ นการแสดงผลลาดับรายการปกติ (Default)
· start= การเริ่ มของค่าของการแสดงรายการ (สามารถกาหนดค่าเริ่ มต้นได้)
ตัวอย่างที่ 1 แสดงวิธีการแสดงรายการแบบมีลาดับ (Order List หรือ Number List)
11. ตัวอย่างที่ 3 การใช้ คาสั่ง OL แบบเลือก Type
ผลลัพธ์
---------------------------------------------------------------
2. คาสั่งสาหรับแสดงผลรายการแบบไม่มลาดับ (Bulleted/Unordered List)
ี
คาสัง <UL> การแสดงรายการแบบไม่มีเลขลาดับ (Unorder หรื อ Bullet List) เป็ นคาสัง
่ ่
ที่ใช้แสดงรายการโดยใช้เครื่ องหมายเป็ นตัวแสดงนาหน้าข้อความโดยไม่จาเป็ นต้องเรี ยงตามลาดับก่อน-หลัง
12. เพราะเป็ นการเรี ยงหัวข้อแบบไม่มีตวเลขระบุไว้ มีรูปแบบการใช้งาน ดังนี้
ั
<UL>.............หัวข้อเรื่ อง................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
</UL>
ตัวอย่างแสดงวิธีการแสดงรายการแบบไม่มลาดับ
ี
ผลลัพธ์
13. ถ้ าหากต้องการเปลียนรูปแบบของหัวข้ อเป็ นแบบอืนๆ ก็สามารถทาได้ โดยใช้ คาสั่ง
่ ่
เพิมเติม ดังนี้
่
<UL TPYE = n>.............หัวข้อเรื่อง................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
</UL>
* n หมายถึง ชนิดของเครื่ องหมายมีอยู่ 3 แบบ ดังนี้
DISC จะมีสญลักษณ์เป็ นวงกลมทึบ (ค่าปกติ)
ั
CIRCLE จะมีสญลักษณ์เป็ นวงกลมโปร่ ง
ั
SQUARE จะมีสญลักษณ์เป็ นสี่เหลี่ยมทึบ
ั
ตัวอย่าง
15. ผลลัพธ์
---------------------------------------------------------------
3. การแสดงผลรายการแบบหัวข้ อย่อย (Definition List)
รายการย่อยแบบใช้นิยาม หรื อ Definition List นี้จะคล้ายกันกับรายการย่อยแบบที่ใช้หมายเลขหรื อ
16. สัญลักษณ์กากับ ต่างกันที่ไม่สญลักษณ์ใดๆ กากับหน้าแต่ละรายการย่อย มีเพียงแต่รายการย่อยต่างๆ แสดงอยู่
ั
ลักษณะคล้ายกับพจนานุกรม โดยมีแท็กที่เกี่ยวข้องอยู่ 3 แท็กด้วยกัน คือ <DL> และ </DL> เพื่อบอกว่ารายการ
ย่อยมีลกษณะเป็ น แบบใช้นิยาม ส่วนแท็ก <DT> นั้นใช้บอกส่วนที่เป็ นเรื่ องของแต่ละรายการย่อย และแท็ก
ั
<DD> ใช้บอกส่วนที่เป็ นรายละเอียดในรายการย่อยนั้น
<DL>.........หัวข้อเรื่อง........
<DT> หัวข้อ...... <DD> ค าอธิบ าย.....
<DT> หัวข้อ...... <DD> ค าอธิบ าย.....
<DT> หัวข้อ...... <DD> ค าอธิบ าย.....
......................................................
</DL>
ตัวอย่างการใช้ คาสั่ง DL
ผลลัพธ์
