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

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

บทที่ 4 		    
คราวนี้เรามาศึกษาดูว่า บราวเซอร์ทำงานยังไง?
ตัวอย่างแรกเราลองทำเป็นภาษาไทยลงไปบ้าง ผมจะพิมพ์ภาษาไทยสนุกๆลงไปว่า

<BODY BGCOLOR="#FFFFFF">
ตาดี มือแป ไปนา
หาปู
</BODY>
ผลที่ปรากฏขึ้นจอเป็นดังนี้..
ตาดี มือแป ไปนา หาปู

อีกสักตัวอย่าง ผมพิมพ์ลงไปดังนี้
<BODY BGCOLOR="#FFFFFF">
หนูหล่อ
พ่อพา
ไปดูหมี
ที่นาตาหมอหลอ
</BODY>
ผลจะปรากฏขึ้นบนจอดังนี้
หนูหล่อ พ่อพา ไปดูหมี ที่ นาตาหมอหลอ

ท่านจะสังเกตุเห็นว่า ทั้งสองตัวอย่าง บราวเซ่อร์ ซื่อบื้อไม่ได้สนอกสนใจกับรูปแบบและการขึ้นบรรทัดใหม่ของตัวหนังสือ บราวเซอร์จะแสดงตัวหนังสือขึ้นมาบนจอ ต่อเนื่องกันไปเหมือนสายน้ำ ดังนั้นถ้าท่านต้องการขึ้นบรรทัดใหม่ ท่านต้องสั่งลงไปว่าให้ ตัดคำเพื่อขึ้นบรรทัดใหม่ ที่เรียกว่า break ตัวย่อ คือ BR

คราวนี้ลองพิมพ์คำสั่งข้างบนใหม่ดังนี้..
<BODY BGCOLOR="#FFFFFF">
หนูหล่อ<BR>
พ่อพา<BR>
ไปดูหมี<BR>
ที่<BR>
นาตาหมอหลอ
</BODY>
ผลที่ปรากฏขึ้นมาบนจอจะเป็นดังนี้..
หนูหล่อ
พ่อพา
ไปดูหมี
ที่
นาตาหมอหลอ

แท็กคำสั่ง<BR> ส่งภาษาบอกบราวเซ่อร์ว่าตรงนี้ให้ขึ้นบรรทัดใหม่น่ะ

เราสามารถใช้ <BR> สำหรับให้เว้นบรรทัดได้ไหม? อ๋อ ได้แน่นอน ดูนี่ซี 

<BODY>
<BR>What's
<BR>going
<BR>
<BR>on
<BR>
<BR>here??
</BODY>
ผลจะออกมาดังนี้..



What's
going

on

here??

คราวนี้ลองให้เว้นหลายบรรทัดดูซิว่าผลจะออกมาอย่างไร ? 

<BODY>
<BR>What's
<BR>going
<BR>
<BR>on
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>here??
</BODY>
และนี่ไง ผลที่ออกมา..



What's
going

on







here??

คราวนี้ให้เรากลับไปที่ตัวอย่างง่ายๆอันแรก 

<BODY>
Something really cool
</BODY>


Something really cool

อันนี้คือ..<P> พารากร๊าฟแท็ก เมื่อพูดถึง paragraph ให้นึกถึงบทความที่แยกออกเป็นท่อนๆ แต่ละท่อนเรียกว่า paragraph ทดลองเอาแท็ก พารากร๊าฟใส่หน้าประโยคสั้นๆ ดูว่าผลเป็นอย่างไร ?..

<BODY>
<P>Something really cool</P>
</BODY>


Something really cool

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

<BODY>
<P>Something really cool</P>
<P>like an icecube</P>
</BODY>


Something really cool

like an icecube

ถ้ากระนั้นก็ดูเหมือนว่าเราสามารถใช้ <BR><BR>มาแทนได้? ใช่..ประโยชน์อีกอย่างหนึ่งคือการใช้แท็ก <P> ร่วมกับคำสั่ง "วางชิด" หรือ ALIGN ในบางคราวที่ เนื้อหาของตัวหนังสือเป็นการเล่นคำหรือเล่นตัวอักษร ยกตัวอย่างให้ดูดีกว่า...

<BODY>
<P ALIGN="left">ยาดองนี้กินแล้วแข็งแรง</P>

<P ALIGN="right">ไม่มีโรคภัยเบียดเบียฬ</P>

<P ALIGN="left">
ยาดองนี้<br>กินแล้วแข็ง</P>

<P ALIGN="center">

แรงไม่มี</P>
<P ALIGN="right">โรคภัยเบียดเบียฬ
</P>
</BODY>


ยาดองนี้ กินแล้วแข็งแรง

ไม่มีโรคภัยเบียดเบียฬ

ยาดองนี้
กินแล้วแข็ง

แรงไม่มี

โรคภัยเบียดเบียฬ

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

<P>Some stuff
<P>More stuff

ก็เหมือนกับการเขียนลงไปอย่างนี้..... 

<P>Some stuff</P>
<P>More stuff</P>

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

<BODY>
<CENTER>Something really cool</CENTER>
</BODY>


Something really cool

คราวนี้ลองมาสนใจกับตัวหนังสือที่พิมพ์ลงไปข้างล่างนี้ 

<BODY>
Something        really        cool
</BODY>
ผลที่แสดงออกมาจะเป็นอย่างนี้


Something really cool

ท่านจะสังเกตุเห็นว่า บราวเซ่อร์ซื่อบื้ออีกตามเคย คือมันจดจำไปทำเคาะวรรคได้เพียงหนึ่งเคาะวรรค ทีแรกผมก็ว่า เจ้าคนสร้าง ภาษา HTML ก็งี่เง่าเหมือนกัน แต่ต่อมาพบว่าวิธีที่กำหนดให้เป็นแบบนี้ดีมาก มันจะทำให้เอกสารที่เตรียมออกมาด้วยภาษา HTML มองดูดี

มีรหัสที่กำหนดขึ้นอันหนึ่งซึ่งมีความหมายว่าให้เว้นช่องว่าง หรือเว้นช่องไฟระหว่างตัวอักษร รหัสตัวนั้นคือ -> &nbsp;

เรามาลองใช้รหัสนี้กันดู โดยยกเอาคำภาษาอังกฤษที่ใช้ในบทแรกๆมาทำดูดังนี้...

<BODY BGCOLOR="#FFFFFF">
Something&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
really&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
cool
</BODY>
ผลจะออกมาเป็นอย่างนี้


Something         really         cool

ตัวเครื่องหมายนี้.. & ส่งภาษาบอกบราวเซ่อร์ว่า เอาละน่ะตรงนี้เริ่มต้นรหัสคำสั่งพิเศษ และเครื่องหมายตัวท้าย... ; บอกบราวเซ่อร์ว่า จบคำสั่งรหัสพิเศษ ตัวหนังสือที่อยู่ระหว่างเครื่องหมายทั้งสองเป็นอักษรย่อว่าย่อแทนคำสั่งอะไร คำสั่งระหัสพิเศษเหล่านี้มีอยู่ด้วยกัน 6 คำสั่ง ท่านไม่ค่อยมีโอกาศได้ใช้ระหัสพิเศษเหล่านี้ อ้อเกือบลืมไป คำสั่งพิเศษเหล่านี้ ท่านต้องพิมพ์ลงไปโดยใช้ตัวพิมพ์เล็กเท่านั้น

ท่านไม่จำเป็นต้องใช้เครื่องหมายเสมอ เครื่องหมายเหล่านี้จะเอามาใช้ ก็เมื่อถ้าพิมพ์เครื่องหมายเหล่านี้ตรงๆเข้าไป เช่นวงเล็บข้องอก็ดี ฟันหนูก็ดี แล้วทำให้บราวเซ่อร์สับสนว่าเป็นระหัส HTML ก็ให้ท่านมาใช้ระหัสอักขระพิเศษนี้แทน ถ้าถามว่า รู้ได้อย่างไรว่าตรงไหนต้องใช้ ตรงไหนไม่ต้อง อันนี้ไม่มีกฏเกณฑ์ตายตัวต้องอาศัยลองผิดลองถูกกันไป อีกหน่อยก็คุ้นไปเอง มีเครื่องหมาย อักษรพิเศษเพิ่มเติม ท่านไม่ค่อยได้มีโอกาศได้ใช้อักษรเหล่านี้ แต่ผมรวบรวมไว้ให้ประดับความรู้

ขอกลับไปทบทวนเรื่องที่แล้วสองสามเรื่อง เพื่อไม่ให้ท่านหลงๆลืมๆ บราวเซอร์ในเครื่องของท่าน จะแสดงผลตัวหนังสือออกมาเหมือนสายน้ำในลำธาร นอกเสียจากว่าท่าน บอกให้มันทำการตัดคำและฯลฯ.... ช่องว่างระหว่างอักขระหรือตัวอักษรบราวเซอร์จะเว้นไว้แค่หนึ่ง ถ้าท่านต้องการให้ได้ช่องว่างกว้างกว่าหนึ่งท่านต้องใช้ เครื่องหมายตัวนี้เพื่อบอกบราวเซอร์ให้ทำให้ (&nbsp;) ยังมีอีกเรื่องหนึ่งที่ผมยังไม่ได้พูดถึงคือการเคาะแป้นขึ้นบันทัดใหม่คือแป้น Return (หรือแป้น Enter) ในขณะที่ท่านกำลังพิมพ์ ตัวบราวเซอร์จะแปลว่าเป็นการออกคำสั่งให้เว้นวรรค นอกเสียจากว่าตรงจุดนั้นมีการเว้นวรรคอยู่แล้ว

ขอทำตัวอย่างให้ดูอีกที

<BODY BGCOLOR="#FFFFFF">
Something<BR>really<BR>cool<BR>
like<BR>an<BR>icecube!
</BODY>


Something
really
cool
like
an
icecube!

เข้าใจชัดเจนไหมคราวนี้?? ผมแน่ใจว่าทุกคนเข้าใจ

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

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