HTML Tutorial - So, you want to make a Web Page!

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

บทที่ 9

เครื่องมือที่มีประโยชน์และท่านต้องเรียกใช้บ่อย ก็คือการขีดเส้นบรรทัดสำหรับคั่นบทความ แท็กที่ใช้คือ <HR> ดูข้างล่าง

<BODY>
<HR>
</BODY>

ผลที่ปรากฏบนจอเป็นดังนี้

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

<BODY>
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>

ถ้าท่านไม่กำหนดว่าวางชิดหรือ ALIGN บราวเซ่อร์จะถือว่าวางกึ่งกลางตามตัวอย่างข้างบน ถ้าท่านระบุ ALIGN= ลงไป บราวเซ่อร์จะวางให้ตามที่ท่านสั่ง ดูตัวอย่างข้างล่าง

<BODY>
<HR WIDTH=60% ALIGN="left">
<HR WIDTH=60% ALIGN="right">
<HR WIDTH=60% ALIGN="center">
</BODY>

ท่านสามารถกำหนดความหนาของเส้นบรรทัดโดยบอกเป็นเบอร์ 1-2-3-4 ไปเรื่อยๆ เส้นที่ได้จะเป็นเส้นโปร่ง ตามตัวอย่างข้างล่าง...

<BODY>
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>

ถ้าท่านต้องการเส้นทึบ ให้ท่านเติมคำว่า NOSHADE ลงไปในแท็ก ตามตัวอย่างข้างล่าง..

<BODY>
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>

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

<BODY>
                ///\\___
                (@ @)
     +----oOO----(_)-----------+
     |      ฉลองศตวรรษใหม่นี้ ......   |
     |           ขอให้ท่าน................|
     |        มีความสุข สะบาย .      |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</BODY>

///\\___ (@ @) +----oOO----(_)-----------+ | ฉลองศตวรรษใหม่นี้.. | | ขอให้ท่าน... | | มีความสุข สะบาย. | +-----------------oOO-----+ |__|__| || || ooO Ooo

วิธีแก้คือให้ท่านครอบแท็ก <PRE> (preformat) ลงไป ผลที่ออกมา ก็จะเหมือนกับที่ท่านได้ประดิษฐ์ ประดอย เอาไว้ ดูตัวอย่างข้างล่าง

<BODY>
<PRE>
                ///\\___
                (@ @)
     +----oOO----(_)-----------+
     |      ฉลองศตวรรษใหม่นี้..    |
     |           ขอให้ท่าน...          |
     |        มีความสุขสะบาย.        |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</PRE>
</BODY>

///\\___ (@ @) +----oOO----(_)-----------+ | ฉลองศตวรรษใหม่นี้... | | ขอให้ท่าน....... | | มีความสุขสะบาย.... | +-----------------oOO-----+ |__|__| || || ooO Ooo

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

แท็กตัว สุดท้ายที่เราจะยกมาคุยกันคือแท็ก comment อันหมายถึง ข้อวิจารณ์ หรือ หมายเหตุ.

<BODY>
<!--ที่อยู่ในวงเล็บนี้เป็นหมายเหตุ-->

<P>comment หรือ หมายเหตุ สามารถแทรกเข้าไปตรงไหน หรือ ตอนไหนของบทความก็ได้ และเมื่อ บราวเซ่อร์ เจอะเข้า 
 บราวเซ่อร์จะแกล้งทำเป็นซื่อบื้อมองไม่เห็น แล้วอ่านข้ามข้อความที่บรรจุไว้ใน comment
 ดังนั้นท่านสามารถแทรกหมายเหตุเหล่านี้เข้าไปซ่อนไว้ได้ ข้อความที่ซ่อนอาจจะเป็นข้อความบรรทึกส่วนตัว
<!--วันนี้เหงาจัง ไม่รู้จะทำอะไร--> บรรทึกกันลืมสำหรับตัวท่านเอง <!--โยโกะนัดดูหนังเย็นนี้--> หรือโน๊ตที่ต้องการ
ใส่เข้าไป ให้เพื่อนที่ทำงานอยู่ด้วยกันรับรู้
<!--เช่นว่าใครขะโมยเอารูปโยโกะออกไป มีหวังเจอดี!-->
</BODY>

ลองตรวจดูข้อความที่ผุดขึ้นบนจอ จะพบว่าข้อความที่ใส่ไว้ในแท็ก comment (ตัวอักษรสีแดง)จะไม่ขึ้นไปบนจอเลย

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

ขอย้ำอีกทีว่า ข้อความที่เป็น comment ต้องนำด้วยเครื่องหมายอย่างนี้... 
ท่านจะพิมพ์ แท็ก HTML ตัวอื่นๆลงไปก็ได้ แต่บราวเซ่อร์จะไม่อ่านรหัสนั้นออกมา บราวเซ่อร์จะทำเป็นมองไม่เห็นและข้ามไปจนกระทั่งเจอะเครื่องหมายนี้... -->

นั่นคือ บทเรียนทั้งหมด ขั้นพื้นฐานความรู้เกี่ยวกับ HTML ถ้าถามว่ายังมีแท็กรหัสคำสั่งอย่างอื่นอีกไหม ? ขอตอบว่ามี มีอีกมากด้วย แต่ผมรับประกันได้ว่า ความรู้ทั้งหมดสำหรับเป็นพื้นฐานในการใช้ HTML สร้างเว็บเพจ ท่านเรียนรู้อย่างสมบูรณ์แล้ว และภายหลังที่ท่านฝึกหัดใช้ความรู้ที่ท่านได้รับสร้างโน่นสร้างนี่ ท่านอาจต้องการเรียนรู้เพิ่มเติม ในขั้นสูงขึ้นไปอีก เรื่องทีท่านควรเรียนรู้ต่อไปก็คือ เรื่องการสร้างกรอบตาตารางหรือTable Tutor, เรื่องการสร้างแบบฟอรมหรือForm Tutor และการสร้างเฟรมหรือ Frames Tutor.บทเรียนที่กล่าวมาเหล่านี้จะช่วยเสริมความรู้ หรือเสริมเครื่องไม้เครื่องมือลงไปในหีบหรือในถุงเครื่องมือของท่าน สำหรับนำไปใช้ เรื่องHTML ถ้าศึกษาลึกลงไปกว่านี้จะเป็นการศึกษาเรื่องเครื่องมือที่ทำงานซ้ำซ้อนกับเครื่องมือที่ท่านเรียนรู้วิธีทำไปแล้ว แท็กที่เหลืออยู่บางอันเป็นคำสั่งพิเศษ สำหรับใช้ในกรณีพิเศษ แต่ในทางปฏิบัติแล้ว ความรู้ที่ท่านมีอยู่ขณะนี้ เข้าไปสั่งงานแทนงานเหล่านั้นได้ นอกจากนี้ยังมีแท็ก ซึ่งปัจจุบันถือว่าเก่าล้าสมัยไปแล้ว บางอันก็เป็นแท็กพิเศษ เป็นรหัสจำเพาะสำหรับนำไปใช้กับ บราวเซ่อร์บางยี่ห้อ

ผมได้เปรยไว้ในเบื้องต้นของบทเรียนนี้ ถึงเรื่อง HTML editor ที่ทำออกมาขาย ผมมีความคิดเห็นของผมว่า โปรแกรมที่ดีๆเหล่านี้ ต้องไม่ใช่โปรแกรมที่ โฆษณาว่า เอาไปใช้ทำ หน้าเว็บเพจ โดยไม่ต้องเรียนรู้ซักกระติ๊ดในภาษา HTML ปัญหาในการหยิบฉวยเอาโปรแกรมเหล่านี้ มาใช้ โดยหวังจะใช้วิธีเรียนลัด คือทำได้เลยโดยไม่ต้องเรียน เท่าที่ผมประสพมา คนที่สร้างเว็บเพจด้วยโปรแกรมที่ว่า ไม่มีปัญญาที่จะแก้ไข เมื่อมีเหตุต้องแก้ไข หรือเมื่อมีข้อบกพร่อง แต่คนที่มีพื้นฐานของ HTML ตามแนวทางที่สอนแนะนี้ เมื่อเจอปัญหาเข้าจะแก้ไขได้ง่ายและแก้ไขได้เร็ว

คนที่ช่ำชองงานเขียนเว็บเพจนิยมใช้โปรแกรมที่เรียกว่า text-based editors. โปรแกรมแบบนี้ทำหน้าที่ด้วยการผุดขึ้นมาบนจอ เมื่อท่านคลิกเรียกคำสั่งที่ต้องการจะใช้ โดยโปรแกรมเหล่านี้เตรียมรหัสที่ท่านต้องการเลือกมาให้พร้อมเช่นคำว่า LEFT, RIGHT, CENTER หรืออื่นๆโดยท่านไม่ต้องพิมพ์ซ้ำแล้วซ้ำอีกลงไป แล้วท่านก็สามารถควบคุมหน้าเว็บของท่านได้ทุกระยะทุกขั้นตอน บรรดาโปรแกรมที่เข้ามาช่วยท่านทำงานตามที่ว่า ผมได้ทำการคัดเลือกไว้แล้ว โปรแกรมเหล่านี้ดีและที่สำคัญคือ ไม่เสียเงิน เป็นของฟรี ดังนั้นให้ท่านคลิกเข้าไปที่รายการ HTML Editor ที่โจ บาร์ตาคัดสรรแล้วว่ายอดเยี่ยมโปรแกรมทุกตัวที่เสนอลงไปนั้น ที่เหมือนกันคือ ผู้ใช้จะต้องมีความรู้พื้นฐาน HTML พอสมควร โปรแกรมเหล่านี้ช่วยให้ท่านเขียนรหัสได้ง่าย. โปรแกรมเหล่านี้จะไม่ทำงานแบบทำเองให้เสร็จโดยท่านไม่ต้องทำ และหนึ่งในจำนวนนั้นที่ผมชื่นชอบคือโปรแกรมชื่อ NoteTab ซึ่งคล่องตัวมากในการใช้งาน

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

ผมขอลาจากด้วยการกล่าวคำว่าสวัสดี ขอให้ท่านมีความสุข และสนุกกับการเรียนรู้เรื่องวิธีสร้างเว็บเพจ สวัสดีครับ

<--BACK NEXT-->