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

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

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

บทที่ 8

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

ผมตั้งใจว่า ผมจะใช้เวลาตอนนี้ คุยกับท่านเรื่อง ความเนียนของภาพบนจอ ที่ฝรั่งเรียกว่า Resolution จอที่ผมใช้อยู่ ตั้งความเนียนของภาพไว้ที่ 640 pixels คูณ 480 pixel คนจำนวนมากตั้งความเนียนของภาพบนจอไว้ที่ 800 x 600 ผู้คนจำนวนไม่เท่าไหร่ที่ตั้งความเนียนไว้ที่ 1024 x 765 และคงมีที่ผิดแผกไปจากที่กล่าวอีกเล็กๆน้อยๆ ไอ้เรื่องความเนียนของภาพบนหน้าจอนี่มันไปเกี่ยวอะไรกับใคร? อ๋อ.. มันมีผลแตกต่างกันพอดูเชียวละครับ มันแสดงผลออกมาว่า หน้าเว็บเพจที่ท่านสร้างนั้น ในสายตาของผู้ชมมันออกมาเป็นอย่างไร ข้างล่างที่นำมาแสดงนี้เป็นภาพโฮมเพจของผมที่ดูจากจอที่ความเนียนหรือ Resolution ต่างกัน .


640×480	800×600	1024×768

จะเป็นการดีมากๆ ถ้าท่านจะได้ทดสอบดูความเนียนของภาพในแบบต่างๆที่กล่าวมา งานที่ท่านอุตส่าห์สร้างสรรค์ จากความเนียนของภาพแบบหนึ่ง อาจจะปรากฏผลออกมาไม่เป็นท่าเลยเมื่อไปเปิดดูที่ความเนียนอีกแบบหนึ่ง โดยเฉพาะถ้าท่านสร้างเว็บเพจในตอนที่ตั้งความเนียนของภาพไว้สูง แล้วไปเปิดดูที่ความเนียนของภาพต่ำ จนทำให้ท่านตกใจก็ได้ สำหรับผู้ใช้วินโดว์ 95 (ย้ำสำหรับวินโดว์ 95 เท่านั้น) มีโปรแกรมเล็กๆตัวหนึ่งจำพวก Powertoy เมื่อติดตั้งเข้าไปในเครื่อง จะทำให้ท่านสามารถเปลี่ยนหน้าจอไปมาได้ในขนาดความเนียนต่างๆ โปรแกรมตัวนี้ชื่อ Quickres ส่วนผู้ที่ใช้วินโดว์ 98 ท่านสามารถเปลี่ยนความเนียนของจอภาพได้ด้วยการคลิกขวาบนหน้าจอของ Desktop เลือกอีกทีที่ Properties แล้วคลิกที่แถบ (Tab) Setting แล้วตั้งค่าใหม่ตามที่ต้องการ

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

<BODY>
<BLOCKQUOTE>
นิทานพื้นบ้านเรื่องชาวนาบ้าหวยเมืองคอน
ชาวนาบ้าหวยนั่งกอดเข่าหน้าตาเศร้าสร้อย  ภรรยาเห็นผิดสังเกตุจึงเข้าไปถามสาเหตุว่ามีทุกข์อันใด ชาวนาผู้สามีเล่าให้เมียฟังว่า ตนเองได้นำวัวควายและคันไถไปขายหมดแล้ว เพราะเมื่อตอนเช้าขณะล้างหน้าแปรงฟันอยู่ที่นอกชาน ใจแวบหนึ่งนึกขึ้นได้ว่าวันนี้หวยออกยังไม่ได้ซื้อประเดี๋ยวต้องรีบออกไปซื้อ   และเล่าให้เมียฟังเป็นเชิงปรับทุกข์ ต่อว่า "น้องเหอเทวดาคงสงสารเรา แต่เช้าเทวดามาบอกพี่ตอนล้างหน้าชัดเจนว่า 488 แต่พี่ไม่มีวาดหนาไม่กลับเลข เลขท้ายออก 884........ เมียอมยิ้ม เพื่อให้สามีหายเศร้าสร้อยจึงเล่าให้ฟังว่า "เมื่อตอนพี่ล้างหน้า ฉันนั่งเยี่ยวอยู่ข้างหลังพี่ พี่ไม่เห็น ฉันทั้งฉี่ทั้งตด เสียงดัง...สี..แปดๆ" ชาวนาผู้สามีฟังเมียเล่า โมโหสุดขีดตะโกนออกมาดังๆว่า ชาติเปรต แล้วพรือมึงไม่ตด..ตด เสียก่อนแล้วค่อยเยี่ยว..หือ!!.
</BLOCKQUOTE>
</BODY>

ผลที่จะปรากฏออกมาบนจอจะเป็นอย่างนี้...

นิทานพื้นบ้านเรื่องชาวนาบ้าหวยเมืองคอน
ชาวนาบ้าหวยนั่งกอดเข่าหน้าตาเศร้าสร้อย ภรรยาเห็นผิดสังเกตุจึงเข้าไปถามสาเหตุว่ามีทุกข์อันใด ชาวนาผู้สามีเล่าให้เมียฟังว่า ตนเองได้นำวัวควายและคันไถไปขายหมดแล้ว เพราะเมื่อตอนเช้าขณะล้างหน้าแปรงฟันอยู่ที่นอกชาน ใจแวบหนึ่งนึกขึ้นได้ว่าวันนี้หวยออกยังไม่ได้ซื้อประเดี๋ยวต้องรีบออกไปซื้อ และเล่าให้เมียฟังเพื่อปรับทุกข์ต่อว่า "น้องเหอเทวดาคงสงสารเรา แต่เช้าเทวดามาบอกพี่ตอนล้างหน้าชัดเจนว่า 488 แต่พี่ไม่มีวาดหนาไม่กลับเลข เลขท้ายออก 884........ เมียอมยิ้ม..และเพื่อให้สามีหายเศร้าสร้อยจึงเล่าให้ฟังว่า "เมื่อตอนพี่ล้างหน้า ฉันนั่งเยี่ยวอยู่ข้างหลังพี่ พี่ไม่เห็น ฉันทั้งฉี่ทั้งตด เสียงดัง...สี..แปดๆ" ชาวนาผู้สามีฟังเมียเล่า..โมโหสุดขีด ตะโกนออกมาดังๆว่า ชาติเปรต แล้วพรือมึงไม่ตด..ตด..เสียก่อนแล้วค่อยเยี่ยว..หือ !!.

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

อีกอันหนี่งที่มีประโยชน์ และน่านำมาใช้คือ LISTหรือรายชื่อ มีสองแบบคือ ORDERED LISTหรือรายชื่อที่เรียงลำดับเลข(ตัวย่อ OL) และ UNORDERED LISTหรือรายชื่อที่ไม่เรียงลำดับเลข(ตัวย่อ UL)

นี้คือรายชื่อแบบ ordered list (OL)

ขี้อยู่หัว ตัวอยู่ในน้ำ (กุ้ง)
กระดูกหุ้มเนื้อ เนื้อหุ้มกระดูก(ปู)
ขูดหนัง ฝังหลิง วิ่งพลวม (กบ)
กำเหนิดในคงคา ผุดขึ้นมามรณัง (หอย)

นี้คือรายชื่อแบบ unordered list(UL)

เขียวชะอุ่ม
เหมือนพุ่มไม้
ใบหาม่าย
มีแต่ดอก (ฝน)

เราจะประเดิมทำแบบฝึกหัดแบบ UNORDERED list ก่อน ทำได้ง่ายๆดังนี้.. ดูข้างล่างซี

เริ่มด้วยพิมพ์เข้าไปอย่างนี้

<BODY>
ของขวัญซื้อให้หลานวันปีใหม่
</BODY>

ของขวัญซื้อให้หลานวันปีใหม่

หมายเหตุ โดยทางทฤษฎีแล้วตอนนี้ยังถือว่าเรายังไม่ได้เข้าสู่การทำรายชื่อ หรือทำ List ตอนนี้เป็นแค่ตั้งหัวเรื่อง

พิมพ์แท็กเปิดและแท็กปิดของ unordered list ลงไป ดังนี้...

<BODY>
ของขวัญซื้อให้หลานวันปีใหม่
<UL>
</UL>
</BODY>

ของขวัญซื้อให้หลานวันปีใหม่

พิมพ์ List Item หรือ รายชื่อแต่ละรายการ(ตัวย่อ LI) แทรกเข้าไป

<BODY>
ของขวัญซื้อให้หลานวันปีใหม่
<UL>
<LI> ตุ๊กตารถบรรทุกสีแดงคันหนึ่ง
</UL>
</BODY>

ของขวัญซื้อให้ลานวันปีใหม่

ตุ๊กตารถบรรทุกสีแดงคันหนึ่ง

พิมพ์เพิ่มเติมเข้าไปอีกสองสามรายการ

<BODY>
ของขวัญซื้อให้หลานวันปีใหม่
<UL>
<LI>ตุ๊กตารถบรรทุกสีแดงคันหนึ่ง
<LI>เรือเร็วลำหนึ่ง
<LI>ตุ๊กตาตีกลองหนึ่งตัว
<LI>ปืนยาวหนึ่งกระบอก
<LI>ชุดรถแข่งหนึ่งชุด
</UL>
</BODY>

ของขวัญซื้อให้หลานวันปีใหม่

ตุ๊กตารถบรรทุกสีแดงคันหนึ่ง
เรือเร็วลำหนึ่ง
ตุ๊กตาตีกลองหนึ่งตัว
ปืนยาวหนึ่งกระบอก
ชุดรถแข่งหนึ่งชุด

ไชโย !! ท่านทำสำเร็จแล้ว

แล้วเราจะทำ ordered list ได้อย่างไร ? ง่ายมากๆเลย เราก็เปลี่ยน แท็ก <UL>ไปเป็นแท็ก <OL>แค่นั้นเอง

<BODY>
ของขวัญซื้อให้หลานวันปีใหม่
<OL>
<LI>ตุ๊กตารถบรรทุกสีแดงคันหนึ่ง
<LI>เรือเร็วลำหนึ่ง
<LI>ตุ๊กตาตีกลองหนึ่งตัว
<LI>ปืนยาวหนี่งกระบอก
<LI>ชุดรถแข่งหนึ่งชุด
</OL>
</BODY>

เอกสารอีกแบบหนึ่งเราจัดเข้าอยู่ในประเภท รายชื่อ หรือ list เหมือนกันเอกสารที่ว่าคือ Definition List (ตัวย่อ DL ) อันเป็นการร่ายยาวของคำจำกัดความ คือการให้ความหมายของคำ เช่นการอธิบายคำในพจนานุกรม หรือ การให้คำอธิบายของมาตราต่างๆในตัวบทกฏหมาย แบบฟอรมข้างล่างนี้เหมาะมากสำหรับเอกสารแบบนี้

มีวิธีการสร้างดังนี้..ใส่แท็กของ Definition List (<DL>) ลงไปดังนี้...

<BODY>
<DL>
</DL>
</BODY>

ลำดับต่อไปพิมพ์แท็กของ หัวข้อของคำจำกัดความหรือ Definition Title (หรือ Definition Term) ใช้ตัวย่อ DT ดังนี้..

<BODY>
<DL>
<DT>ประมวลกฏหมายแพ่งและพาณิชย์ มาตรา 575
</DL>
</BODY>

ผลจะปรากฏออกมาดังนี้..

ประมวลกฏหมายแพ่งและพาณิชย์ มาตรา 575

คราวนี้ให้ใส่คำจำกัดความ หรือความหมายที่ต้องการอธิบายลงไป ดังนี้..

<BODY>
<DL>
<DT> ประมวลกฏหมายแพ่งและพาณิชย์ มาตรา 575
<DD>อันว่าจ้างแรงงานนั้น คือสัญญาซึ่งบุคลหนึ่งเรียกว่า ลูกจ้าง ตกลงจะทำงานให้แก่บุคคลอีกคนหนึ่งเรียกว่านายจ้าง และนายจ้างตกลงจะให้สินจ้างตลอดเวลาที่ทำงานให้
   .
</DL>
</BODY>
[หมายเหตุ DD ย่อมาจากคำว่า Definition Definition แปลว่า การแจงความหมายของ Definition]

ประมวลกฏหมายแพ่งและพาณิชย์ มาตรา 575
อันว่าจ้างแรงงานนั้น คือสัญญาซึ่งบุคลหนึ่งเรียกว่า ลูกจ้าง ตกลงจะทำงานให้แก่บุคคลอีกคนหนึ่งเรียกว่านายจ้าง และนายจ้างตกลงจะให้สินจ้างตลอดเวลาที่ทำงานให้

และเพื่อจะให้ตัวหนังสือดูดีขึ้น เราจะตกแต่งโดยทำให้หัวข้อ หรือ Definition Title (<DT>) เป็นตัวหนา ก็จะทำให้บทความดูดีขึ้น ดังนี้...

<BODY>
<DL>
<DT><B> ประมวลกฏหมายแพ่งและพาณิชย์ มาตรา 575
</B>
<DD>อันว่าจ้างแรงงานนั้น คือสัญญาซึ่งบุคลหนึ่งเรียกว่า ลูกจ้าง ตกลงจะทำงานให้แก่บุคคลอีกคนหนึ่งเรียกว่านายจ้าง และนายจ้างตกลงจะให้สินจ้างตลอดเวลาที่ทำงานให้
</DL>
</BODY>

ผลที่ออกมาจะเป็นอย่างนี้..

ประมวลกฏหมายแพ่งและพาณิชย์ มาตรา 575
อันว่าจ้างแรงงานนั้น คือสัญญาซึ่งบุคลหนึ่งเรียกว่า ลูกจ้าง ตกลงจะทำงานให้แก่บุคคลอีกคนหนึ่งเรียกว่านายจ้าง และนายจ้างตกลงจะให้สินจ้างตลอดเวลาที่ทำงานให้

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

ช่วยด้วย ! งานที่ทำค้างบนจอ ไม่รู้ไปอยู่ที่ตรงไหน ?
บางครั้งบางคราว ขณะนั่งพัก หรือหันไปรับโทรศัพท์ ขณะที่พิมพ์งานค้างอยู่บนหน้าจอ และด้วยความเผลอไผล นิ้วไปปัดเอาคีย์บอรด ตรงไหนก็ไม่รู้ เอกสารบนจอก็เลื่อนไป เลื่อนไปอยู่ตรงไหนก็ไม่รู้ กลับที่เดิมไม่ถูก จำก็ไม่ได้ อย่าเพิ่งเจ็บใจเอาหัวไปชนฝามันไม่ช่วยอะไรขึ้นมา นอกจากเจ็บตัว และอารมณ์เสีย ให้คุณกด Shift + F5 โดย Shift + F5 เป็นคำสั่ง Go Back แปลว่า ให้พาจอกลับไปที่เดิม แค่นั้นก็หมดเรื่อง

ช่วยด้วย! เครื่องพิมพ์มันไม่พิมพ์งานออกมาตามสั่ง !
พระเจ้าช่วย ! เครื่องพิมพ์กลายเป็นไอ้งั่งไปแล้ว คุณสั่งในโปรแกรม Word ให้ทำการพิมพ์ และเครื่องพิมพ์ก็วางอยู่ตรงนั้น ทำหน้าซื่อบื้อไม่ขยับเขยื่อนเหมือนพระอิฐพระปูน หยุดด่าเถ้าแก่ว่าซื้อเครื่องพิมพ์เฮงซวยมาให้ใช้ตรวจดูเครื่องพิมพ์ว่าเครื่องเสียบปลั๊กอยู่หรือเปล่า เครื่องเปิดสวิตซ์ใช้งานแล้วหรือยัง ถ้าแน่ใจว่า มันเปิดสวิตซ์อยู่แล้วและไฟสัญญาณก็ขึ้นให้เห็นเรียบร้อย ก็ให้คุณตรวจกระดาษสำหรับป้อนเข้าเครื่องพิมพ์ ซึ่งบางทีกระดาษในถาดอาจจะหมด และดูให้แน่ว่าสายไฟต่อเชื่อมเข้าเครื่องคอมพ์ อย่างแน่นอน ถ้าทำแล้วไม่มีอะไรเกิดขึ้น ก็ให้คุณโทรไปที่ร้านคอมพิวเตอร์ เพื่อยกเครื่องพิมพ์ไปทุบทิ้งแล้วยกอันใหม่มาเก็บเงินที่เถ้าแก่...

<--BACK NEXT-->