สอนคนงี่เง่าบัดซบ..เรียนรู้วิธีสร้างเว็บเพจ

เอาละ ท่านอยากจะทำเว็บเพจ !

บทที่ 3 		 
ยังมีตัวพิมพ์อีกแบบหนึ่งที่น่าสนใจ คือการนำเอาตัวอักษรของเครื่องพิมพ์ดีด มาใช้ในเครื่องคอมพิวเตอร์ ตัวอักษรพิมพ์ดีด เรียกว่าตัวอักษร Fixed Width Font หรือบางทีก็เรียกตัวอักษร โทรพิมพ์ หรือ Tele Type ใช้อักษรย่อว่า tt หรือ TT ผมจะยกตัวพิมพ์ดีดมาใส่ให้ดูดังนี้...
<BODY BGCOLOR="#FFFFFF">
<TT>Something really cool</TT>
</BODY>
ผลจะออกมาอย่างนี้..


Something really cool

ตัวอักษรแบบนี้ แต่ละตัวอักษร กินเนื้อที่เท่ากันหมด ถ้ายังไม่เข้าใจ ผมจะเปรียบเทียบให้ดูข้างล่างนี้

นี่คือตัวอักษรที่ใช้ในเครื่องคอมพิวเตอร์ เราเรียกตัวอักษรแบบนี้ว่า ตัวพิมพ์แบบโรงพิมพ์หรือ Proportional Font -> iiiiiiiiii
oooooooooo
mmmmmmmmmm
นี่คือตัวอักษรแบบพิมพ์ดีด หรือ Fixed Font สังเกตุว่าตัว i สิบตัวกินเนื้อที่เท่ากับตัว o สิบตัวและเท่ากับตัว m สิบตัว ตัวอักษรแบบนี้บางทีเรียกว่า Monospaced Type -> iiiiiiiiii
oooooooooo
mmmmmmmmmm

[หมายเหตุ ถ้าเครื่องคอมพิวเตอร์ของท่าน ไม่ได้ติดตั้งตัวพิมพแบบ Fixed Width Font ผลที่แสดงออกมาข้างบนนี้จะไม่ถูกต้อง ให้ท่านอ่านข้ามไปโดยไม่ต้องสนใจ]

เราสามารถออกคำสั่งสร้างตัวอักษรให้ใหญ่เล็กได้ด้วย..นั้นคือการกำหนด... font size...และทำได้โดยไม่ยาก เริ่มแรกให้ใส่แท็ก <FONT> ...เข้าไปก่อน..ดังนี้

<BODY BGCOLOR="#FFFFFF">
Something really <FONT>cool</FONT>
</BODY>

ต่อไปให้ระบุขนาด หรือระบุเบอร์ของตัวหนังสือลงไป...ดังนี้

<BODY BGCOLOR="#FFFFFF">
Something really <FONT SIZE=6>cool</FONT>
</BODY>
ผลที่จะแสดงขึ้นมาบนจอจะเป็นอย่างนี้


Something really cool

ขนาดตัวพิมพ์ หรือ Font มีอยู่ด้วยกัน 7 ขนาด หรือ 7 เบอร์เรียงกันให้ดูได้ดังนี้
เบอร์หนึ่ง เบอร์สอง เบอร์สาม เบอร์สี่ เบอร์ห้า เบอร์หก เบอร์เจ็ด
1 2 3 4 5 6 7

มาถึงตรงนี้มีเรื่องอยู่สองเรื่องที่ผมต้องการให้ความรู้แก่ท่านเพิ่มเติม. เรื่องแรกแท็กที่พิมพ์ลงไปอย่างนี้.. <TAG> เพื่อบอกบราวเซอร์ว่าให้ทำอะไร ? และ.. ATTRIBUTE คือรายละเอียดที่จะแจงลงไปข้างใน <TAG> เพื่อบอกบราวเซอร์ว่า how..หรือให้ทำอย่างไร ?
เรื่องที่สองเป็นเรื่องคำว่า default หรือ ค่าเบื้องต้น ถ้าท่านยังไม่รู้ว่าหมายถึงเรื่องอะไร ผมจะอธิบายให้ฟังเสียเลย ค่าเบื้องต้นหรือ default value คือค่าที่ตั้งเอาไว้โดยผู้สร้างโปรแกรม ว่า ถ้าหากผู้ใช้ (ผมหมายถึงตัวท่านนั่นแหละ) ไม่กำหนดรายละเอียดลงไปเป็นอย่างอื่นแล้ว ก็ให้บราวเซอร์ถือเอาค่าที่ผู้สร้างตั้งเอาไว้ ตัวอย่างที่เหมาะที่จะยกมาพูดให้ท่านฟัง คือ เรื่องขนาดของตัวพิมพ์ หรือ Font ถ้าท่านไม่ได้กำหนดขึ้นใหม่เป็นอย่างอื่น ให้ถือเอาตัวพิมพ์ขนาดเบอร์ 3 เป็นค่าเบื้องต้น ดังนั้นไม่ว่าท่านจะกำหนดลงไปว่า 3 หรือไม่กำหนดลงไป เครื่องก็จะแสดงผลออกมาบนจอเป็นขนาดตัวพิมพ์เบอร์ 3.

บราวเซอร์ทุกยี่ห้อ จะมีค่าเบื้องต้นที่ตั้งเอาไว้สำหรับตัวพิมพ์คือ... 1. แบบตัวพิมพ์ (เช่นอังศนา หรือคอรเดีย) 2. ขนาด (เช่นเบอร์ 3) และ 3. สีของตัวอักษร (เช่นสีดำ) ลองมาดูบราวเซอร์ของเนทสเคป เขาตั้งค่าเบื้องต้นไว้ดังนี้ แบบตัวพิมพ์ตั้งไว้ที่แบบ Times New Roman ขนาด 12 พอยท์หรือเบอร์ 3 และสีตัวอักษรเป็นสีดำ ถ้าท่านไม่ชอบใจ ท่านจะเปลี่ยนไปเป็นอย่างอื่นก็ได้ โดยตั้งค่าเข้าไปเช่น
ARIAL หรือ COMIC SANS.

<BODY BGCOLOR="#FFFFFF">
Something really <FONT FACE="ARIAL">cool</FONT>
</BODY>


Something really cool

ขอทำความเข้าใจเพิ่มเติมตรงนี้สักนิดว่า Font ที่เจ้าของเครื่องคอมพิวเตอร์จะเห็นบนจอนั้น ต้องเป็น Font ที่ติดตั้งหรือใส่เอาไว้ในเครื่องคอมพ์ด้วย ย้ำอีกทีว่า ถ้าผู้อ่านหรือผู้ชม มองที่หน้า เว็บเพจ บนเครื่องคอมพ์ที่ไม่มีแบบตัวพิมพ์ชะนิดนั้นใส่อยู่ในเครื่องของผู้ชมแล้ว ผู้ชมจะเห็นเว็บเพจหน้านั้นในแบบตัวพิมพ์ที่ตั้งค่าเบื้องต้นเอาไว้ในเครื่องเท่านั้น ดังนั้นเมื่อท่านทำหน้าเว็บเพจออกมาให้คนอื่นดู ให้คำนึงถึงการระบุแบบตัวพิมพ์เอาไว้ให้ผู้ชมมีทางเลือกหลายๆแบบ ตัวพิมพ์แบบ Arial กับแบบ Comic Sans จะมีอยู่ในเครื่องคอมพ์ที่ใช้โปรแกรม วินโดว์ทุกเครื่อง เช่นเดียวกับตัวพิมพ์แบบ Impact!. ดังนั้นเวลาสร้างเว็บขึ้นมาท่านควรจะได้กำหนดตัวพิมพ์ไว้หลายแบบ ใช่..ท่านทำได้และไม่ยากด้วย..ลองดูตัวอย่างข้างล่างนี้เป็นยังไง ?

<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS"> ไชโย ไชโย</FONT>.
 อ่านรหัสข้างบนแล้วท่านคงจะตั้งคำถามว่ามันหมายความว่ายังไง ? เอาล่ะ ผมจะอธิบายให้ฟัง เมื่อบราวเซอร์ เจอะกับรหัสคำสั่ง ARIAL. บราวเซอร์จะเรียกแบบตัวพิมพ์นี้มาขึ้นจอ ถ้าไม่มี บราวเซอร์จะค้นดูตัวถัดไปคือ. HELVETICAถ้าไม่มีอีก มันก็จะไปหาตัวที่ถัดไปคือ.. LUCIDA SANS. และก็ยังหาไม่พบอีก มันก็จะไปเอาตัวพิมพ์ที่ตั้งเป็นค่าเบื้องต้นไว้มาขึ้นหน้าจอ และคำที่เราต้องการให้ขึ้นบนจอคือคำ ไชโย ไชโย

เข้าใจหรือยัง ?
คราวนี้ถ้าท่านตั้งคำถามว่า แล้วมีตัวพิมพ์แบบไหนบ้างที่เราสามารถเลือกมาใส่ในเว็บเพจของเราให้ผู้ชม เห็นแปลกตา ? คำตอบก็คือ ถ้าท่านใช้ เนทสเคป เป็นตัวบราวเซอร์ และท่านทำ เว็บเป็นตัวภาษาอังกฤษ ท่านสามารถคลิกไปที่ Handy Dandy Font Viewerซึ่งเราได้ทำการค้นคว้าไว้ว่าแบบตัวพิมพ์เหล่านั้นใช้กับเนทสเคปได้ ส่วนอักษรไทยนั้นยังไม่ได้มีใครทำการค้นคว้าเอาไว้..ครับผม.

มาถึงตรงนี้ได้จังหวะเหมาะที่ผมจะยกเรื่องหนึ่งขึ้นมาพูด ท่านจะเห็นว่า เวลาผมพิมพ์ HTML ขี้นมา ผมจะใช้เครื่องหมาย ฟันหนู บ่อยมาก คำว่า ฟันหนู เป็นคำโบราณในสมัยเด็ก เวลาเรียนภาษาอังกฤษ เราเรียกเครื่องหมาย เลขนอกเลขใน หรือเครื่องหมาย Quote หรือที่ฝรั่งเรียกว่า Quotation mark. ว่า ฟันหนู

ฟันหนูสำคัญมาก ท่านคงไม่ทราบว่า ผมปวดหัวแค่ไหน เวลาสร้างเว็บเพจขึ้นมา แล้วตกเครื่องหมายฟันหนู ไปอันเดียวเท่านั้น บราวเซอร์มันจะซื่อบื้อขึ้นมาไม่ยอมรับคำสั่ง ผม ต้องตามค้นหากันแทบแย่ และต้องใช้เวลานานกว่าจะพบว่า ลืมใส่เครื่องหมายฟันหนูเข้าไปอันเดียวแท้ๆ เมื่อเราแจงรายละเอียด หรือ attribute ลงไปในแท็ก ถ้าเป็นรายละเอียดโดดๆหรืออันเดียว ถึงจะไม่ใส่ฟันหนู บราวเซอร์ก็จะเข้าใจคำสั่ง แต่ถ้ามีรายละเอียดหลายข้อ ยกตัวอย่างเช่น ต้องการตัวหนังสือให้เป็นตัวพิมพ์แบบ อังศนา และต้องการให้เป็นตัวสีแดง และมีขนาด 5 คำอังศนา คำสีแดง และ 5 ต้องมีเครื่องหมายฟันหนูกำกับหัวท้ายเสมอ อีกเรื่องหนึ่งคือการพิมพ์คำสั่ง เป็นรหัสภาษา HTML ผมชอบใช้ตัวพิมพ์ใหญ่ นี่เป็นความชอบส่วนตัว เพราะผมมองว่า อ่านได้ง่ายและอ่านได้ชัด ส่วนตัวคุณเองจะชอบตัวพิมพ์เล็กอย่างนี้ <font> แทนที่จะเป็นอย่างนี้ <FONT>. หรือจะเอาอย่างนี้ก็ยังได้ <fOnT> ถ้าท่านชอบของท่านอย่างนั้น.

เอาละ..เราจะกลับไปคุยเรื่องตัวพิมพ์ หรือ Font กันต่อ
ท่านสามารถเปลี่ยนสีของตัวอักษรได้ด้วย
<BODY BGCOLOR="#FFFFFF">
Something really <FONT COLOR="#FF0000">cool</FONT>
</BODY>


Something really cool

<BODY BGCOLOR="#FFFFFF">
Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT>
</BODY>


Something really cool

เอาละ..ตอนนี้ชักจะสนุกแล้ว ! 

<BODY BGCOLOR="#FFFFFF">
Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U>   
</BODY>


Something really cool

อย่าลืมเรื่อง Nested Tags ผมขอเตือนอีกทีว่า แท็กเปิดและปิด ต้องจัดลำดับเรียงกันเป็นชั้นๆ ไม่สลับที่กัน

<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3>

การวางแท็ก ท่านจะวางอันไหนมาก่อน อันไหนมาหลังก็ได้เช่น.. ทำสีแดง และทำตัวหนา ท่านจะจัดลำดับของท่านอย่างไรก็ได้ ตามอัธยาศัย..เช่น

<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>

เรื่องสำคัญมีอยู่เรื่องเดียวเท่านั้น อย่าทำให้บราวเซอร์สับสนด้วยการวางแท็กให้สลับที่กัน เช่น ...

<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>

(เข้าใจว่า ท่านคงเข้าใจ ผมเองก็ไม่รู้จะพูดอย่างไร ให้ชัดเจนไปกว่านี้)

มีแท็กอยู่อีกชุดหนึ่ง ซึ่งบางครั้งมีประโยชน์ที่จะหยิบฉวยมาใช้ นั่นคือแท็กสำหรับนำมาใช้เมื่อต้องการกำหนดหัวข้อเรื่องให้ใหญ่เล็ก ลดหลั่นกันไป แท็กสำหรับทำหัวข้อเรื่องมีอยู่ด้วยกัน ตั้งแต่ขนาด 1-6

ผมจะทำตัวอย่างให้ดูดังนี้... 

<H1>Something really cool<H1>
<H2>Something really cool<H2>
<H3>Something really cool<H3>
<H4>Something really cool<H4>
<H5>Something really cool<H5>
<H6>Something really cool<H6>
ผลที่แสดงออกมาเป็นดังนี้...


Something really cool

Something really cool

Something really cool

Something really cool

Something really cool
Something really cool

และรายละเอียดที่จะแจงลงไปในแท็ก มีเรื่องเดียวคือ ALIGNที่แปลว่า วางชิด โดยแจงลงไปในแท็กว่าต้องการวางหัวข้อ ให้ชิดซ้าย..วางกลาง..หรือชิดขวา.. ผมจะสาธิตให้ดูดังนี้. 

<H2 ALIGN="left">Something really cool<H2>
<H2 ALIGN="center">Something really cool<H2>
<H2 ALIGN="right">Something really cool<H2>
ผลที่แสดงขึ้นมาบนจอเป็นอย่างนี้


Something really cool

Something really cool

Something really cool

เหลืออีกเรื่องเดียว จากนั้นเราจะมาทบทวนความรู้ที่เราได้รับในบทที่ 3 กัน เรื่องเดียวที่ว่าคือ กลไกบราวเซอร์ ผู้สร้างได้กำหนดค่าเบื้องต้นหรือ default ของสีตัวอักษรไว้ด้วย โดยกำหนดสีของเนื้อความ สีของตัวเชื่อม สีของตัวเชื่อมที่กำลังดูอยู่ และสีของตัวเชื่อมที่เคยเข้าไปดูมาแล้ว ค่าเบื้องต้นที่กำหนดไว้คือ ...

เนื้อความใช้สีดำหรือ black
ตัวเชื่อมใช้สีฟ้าหรือ blue
ตัวเชื่อมที่กำลังดูใช้สีแดงหรือ red
ตัวเชื่อมที่เคยดูแล้วใช้สีม่วงหรือ purple

สีที่กำหนดเป็นค่าเบื้องต้นไว้นี้ ถ้ามีความจำเป็นต้องใช้สีอื่น ท่านก็สามารถทำได้ (จงสังเกตุว่าผมใช้คำว่าจำเป็น) แต่ในเมื่อคนทั้งโลกคุ้นเคยอยู่กับสีเหล่านี้อยู่แล้ว ถ้าไม่มีเหตุท่านจะไปเปลี่ยนมันทำไม ให้คนอื่นสับสน
ท่านเปลี่ยนสีของค่าเบื้องต้น โดยแจงรายละเอียดลงไปใน <BODY> tag.ผมจะทำเป็นตัวอย่างให้ดูข้างล่างนี้..

<BODY BGCOLOR="#00000" TEXT=""#FFFF66"" LINK=""#00FF66"" VLINK=""#00BB33"" ALINK="#00CCFF">
Something really cool
</BODY>
ผลที่ปรากฏบนจอจะเป็นดังนี้..


Something really cool
ขอใช้เนื้อที่ว่างตรงนี้อธิบายประกอบ นี่เป็นการสาธิตให้เห็นถึงกลวิธีที่เราจะเปลี่ยนสีพื้นและสีตัวหนังสือ

    ตอนนี้ท่านจะเห็นว่าพื้นฉากหลังเป็นสีดำ และตัวหนังสือขึ้นเป็นสีเหลือง.
    ตัวเชื่อมเป็นสีเขียว
    ตัวเชื่อมที่เข้าไปดูแล้วเป็นสีเขียวแก่
    และตัวเชื่อมที่กำลังดูอยู่เป็นสีฟ้า
 

ผมได้ประดิษฐโปรแกรมขึ้นมาตัวหนึ่ง ซึ่งวิเศษมาก ผมให้ชื่อว่า Color Picker เจ้า คัลเลอร์พิคเกอร์ ของผมตัวนี้ จะช่วยให้ท่านได้ทำการทดลองการใช้สีต่างๆในการที่จะเลือกสีพื้นและสีตัวอักษร และยังทำให้ท่านได้สนุกกับการใช้เวลาในการกำหนดสีต่างๆ สำหรับนำไปประกอบในหน้าเว็บเพจของท่าน ยิ่งไปกว่านั้นโปรแกรมนี้ยังให้ท่านได้มีโอกาศลองเลือกตัวพิมพ์ทั้งแบบและขนาด สำหรับนำลงไปประกอบในหน้าเว็บของท่าน ยิ่งไปกว่านั้นโปรแกรมนี้ยังสร้างข้อมูล รหัสของสีสำหรับให้ท่านเอาไปกำหนดลงใน <BODY> ได้อีกด้วย ท่านจะคลิกเข้าไปดูและทดลองได้เลย หรือท่านจะข้ามไปอ่านวิธีใช้โปรแกรมนี้คร่าวๆของผมเสียก่อนแล้วค่อยเข้าไปก็ได้.

อธิบายการใช้ Color Picker

Color Picker เป็นสูตรสำเร็จรูป สำหรับให้ท่านใช้เปรียบเทียบทดลองเลือกสี แบ็คกราวน์ และสีตัวหนังสือ ด้วยการดูของจริง ว่าถ้าท่านใช้สีพื้นจอที่ท่านชอบ ซึ่งอาจเป็นสีแดง ขาว น้ำเงิน สี เข้ม หรือสีจาง ก็ตามแต่ ท่านควรจะใช้ตัวหนังสือเป็นสีอะไร เพื่อให้อ่านง่าย หากเลือกสีผิด บางทีเว็บที่ท่านทำถึงจะดีแสนดี แต่ไม่มีใครเข้าไปอ่าน เพราะสีพื้นและสีตัวหนังสือไม่สมพงษ์กัน ทำให้อ่านยาก หรือไม่ชวนให้อ่าน โปรแกรมยังแถมแสดงสีสันของตาตารางว่าถ้าใช้สีที่ท่านเลือกกรอบตาตารางจะขึ้นมาให้เห็นเป็นอย่างไร

Color Picker นอกจากจะแสดงสีของจริงให้ท่านเห็นแล้ว ยังได้บันทึกค่าของ รหัสของสีกำกับไว้ให้ท่านดูด้วย โดยบอกไว้ในท่อนล่าง ของกรอบทดสอบ บานขวามือ สำหรับให้ท่านนำรหัสไปใช้ได้ทันที ด้วยการ คัดลอก แล้วไปวาง ในบอดี้แทก(<BODY>)โดย ไม่ต้องเสียเวลาไปค้นหารหัสของสีอีก มีหลักการใช้ง่ายๆดังนี้

1. โปรแกรมนี้เมื่อเปิดขึ้นจอ ค่าเบื้องต้นที่ตั้งไว้คือ พื้นจอสีขาว ตัวหนังสือสีดำ
2. เริ่มใช้โปรแกรมด้วยการ คลิกเพื่อใส่จุดตาไก่ที่หน้าคำ Background แล้วเลือกด้วยการคลิกสี..บนตารางสีตัวอย่างทางบานฝั่งซ้ายที่ให้ไว้เพื่อเลือกสีพื้นที่ต้องการ ภาพสีพื้นหรือ Background จะผุดขึ้นบนกรอบบานทางขวามือ ให้ท่านดูว่าสีพื้นที่ท่านเลือก กับสีตัวอักษรสีดำที่เป็นค่าเบื้องต้น ท่านชอบใจหรือไม่ ? ถ้ายังไม่ถูกใจให้...
3. ท่านคลิกเพื่อใส่จุดตาไก่หน้าคำว่า TEXT( ตัวหนังสือ) แล้วไปทดลองเลือกสีตัวอักษรด้วยวิธีเดิมไปขึ้นจอ เพื่อพิเคราะห์ดูว่าสีตัวอักษรที่ท่านเลือกใหม่เมื่อวางทับบนสีพื้นจอที่ท่านเลือกไว้เดิม เป็นที่ชอบใจของท่านหรือไม่? ท่านสามารถเลือกสีสลับไปมาระหว่างสีแบ็คกราวน์ และสีตัวหนังสือจนพอใจ
4. คัดลอกข้อมูล ที่เป็นค่าของระหัสสีที่ท่านเลือกทั้งของสีพื้นและตัวอักษร เพื่อไปวางใน บอดี้แท็ก ของ HTML
5. โปรแกรมมีลูกเล่นให้ท่านเลือกแบบ และขนาดตัวอักษรด้วย เพื่อให้เห็นความสวยงาม เมื่อใช้แบบและขนาดตัวอักษรนั้นๆ
6. เมื่อต้องการกลับไปเริ่มต้นใหม่ ถ้าเป็นบราวเซ่อร์เนทสเคป ให้ท่านเคาะที่ปุ่ม Reload หรือถ้าเป็นบราวเซ่อร์ตัวอื่นจะใช้วิธีปิดหรือ close แล้วเรียกขึ้นจอใหม่ก็ได้

ก่อนจบ ให้เรามาทบทวนสิ่งที่ท่านได้เรียนรู้ในบทที่ 3 นี้ บทนี้สอนให้ท่านรู้วิธีดัดแปลงตกแต่ตัวหนังสือ ตอนนี้ท่านรู้วิธีที่จะทำให้ตัวหนังสือเป็นตัว.. สีแดงใหญ่ หรือตัวหนังสือแบบหนาและเล็ก ท่านสามารถเลือกใช้ตัวพิมพ์แบบ คอร์เดียหรือแบบอื่นๆ, หรือตัวพิมพ์แบบตัวพิมพ์ดีด.
ท่าน สามารถสร้างคำว่า rollercoaster!ให้มีรูปร่างแบบนี้ก็ได้

หรือถ้ายัง งงๆว่าทำอย่างไร ก็ให้คลิกที่ ตรงนี้ ก็ได้เพื่อสอบดูว่าตรงกับที่ท่านคิดไว้หรือไม่

ก่อนจะจบลงในตอนนี้ ผมมีเคล็ดง่ายๆอยู่อันหนึ่งที่จะบอกกับท่านคือ เมื่อท่านท่องไปตามเว็บไซต์ต่างๆ ท่านเกิดไปพบหน้าเว็บที่สวยและถูกใจท่าน ท่านสามารถเข้าไปดูได้ว่า ผู้สร้างเขาออกแบบเขียน รหัส HTML ไว้อย่างไร ด้วยการคลิกที่ View/Document Source บนบราวเซอร์ที่ท่านใช้ บราวเซอร์ของท่านอาจใช้คำอื่นแต่ก็คล้ายๆกันนี่แหละ ด้วยการคลิกเพียงสองสามครั้งท่านก็จะรู้รายละเอียดว่า อ๋อ เขาทำอย่างนี้เอง ท่านก็ทำได้

<--หน้าที่แล้ว        หน้าต่อไป-->

บทนำ บทที่ 1 บทที่ 2 บทที่ 3 บทที่ 4 บทที่ 5 บทที่ 6 บทที่ 7 บทที่ 8 บทที่ 9 บทที่ 10 ดรรชนี