|
สอนคนงี่เง่าบัดซบ..เรียนรู้วิธีสร้างเว็บเพจ เอาละ ท่านอยากจะทำเว็บเพจ ! บทที่ 2 |
|
|
สอนคนงี่เง่าบัดซบ..เรียนรู้วิธีสร้างเว็บเพจ เอาละ ท่านอยากจะทำเว็บเพจ ! บทที่ 2 |
บทนี้ เราจะมาพูดในส่วนที่เป็นเนื้อหาของเรื่อง หรือ บอดี้แท็ก (<BODY> tags) ผมจะละเว้นไม่ไปพูดในส่วนที่เกี่ยวกับแท็กของ <HTML>, <HEAD> และ <TITLE> ที่เราคุยจบไปแล้ว..เอาละ..ไม่พูดพล่ามทำเพลง ให้ท่านเรียกไฟล์ที่ทำไว้คราวที่แล้ว แล้วเลื่อนบรรทัดมาที่.<BODY>
</BODY>
แล้วให้ท่านพิมพ์อะไรสนุกๆลงไปตามตัวอย่างดังนี้...ผมเป็นฝรั่งผมจะพิมพ์แทรกลงไปดังนี้...
<BODY>
Something really cool
</BODY>
แล้วท่านจะได้ตัวหนังสือขึ้นจอเป็นอย่างนี้
Something really cool
หมายเหตุ ทุกคราวที่มีการแก้ไขเปลี่ยนแปลงเอกสาร ท่านต้องคลิกที่ Save แล้วคลิกที่ปุ่ม Reload
สำหรับ Internet Explorer ท่านอาจต้องคลิกที่ปุ่ม Refresh หลังจาก คลิก Save หรือ คลิก close แล้วเรียกจอขึ้นมาใหม่เรื่องแรกที่เราจะเรียนในคราวนี้คือ วิธีเปลี่ยนสีของฉากหลัง หรือ แบ็คกราวน์ ของตัวหนังสือซึ่งหมายถึงสีพื้นของจอนั่นเอง โดยทำให้พื้นจอเป็นสีเขียวให้ท่านพิมพ์ลงไปดังนี้...
<BODY BGCOLOR="#CCFFCC">
Something really cool
</BODY>
[หมายเหตุ คำว่า BGCOLOR เป็นคำย่อของ Background Color แปลว่าสีของฉากหลังของตัวหนังสือ คือสีของจอภาพนั้นเอง]
ภาพที่ขึ้นมาจะเป็นอย่างนี้
Something really coolCCFFCC เป็นภาษาคอมพิวเตอร์สำหรับสีตองอ่อน และนี่ก็คือรหัสสีภาษาคอมพิวเตอร์ของ.. สีอื่นๆทั้งหมด 216 สี..... เนตสเคปใช้สีเหล่านี้ผสมให้เกิดภาพขึ้นบนจอ ถ้าหากสีพื้นของจอที่ท่านระบุลงไป ไม่ใช่สีตามตัวอย่างของเนตสเคป บราวเซ่อร์เนตสเคป ก็จะเลือกสีให้ใกล้เคียงที่สุดกับสีที่ท่านต้องการ
ถ้าท่านต้องการฉากหลังหรือ background ให้เป็นภาพแทนที่จะเป็นสีพื้น ตามตัวอย่างข้างบน ก็ให้ท่านระบุภาพลงไป ตัวอย่างเช่นผมจะพิมพ์ลงไปใหม่ดังนี้...<BODY BACKGROUND="swirlies.gif">
Something really cool
</BODY>
ผลที่จะแสดงขึ้นมาบนจอจะเป็นอย่างนี้
ข้างล่างนี้คือภาพสีพื้นตัวอย่างสำหรับฉากหลัง สีพื้นที่ท่านเห็นมาจาก ไฟล์ภาพ ชื่อ swirlies.gif ซึ่งเก็บอยู่ในแฟ้มประกอบบทความของเรื่องนี้ชื่อ pics ถ้าท่านอยากได้ ก็ให้ท่านคลิกขวาที่ภาพ ในขณะออนไลน์ แล้วจัดการเก็บภาพไว้ด้วย Save Image As...คราวนี้ให้เรากลับไปที่หน้าจอสีขาวอันเก่า เพื่อเรียนต่อ ให้ดูตัวหนังสือที่ขึ้นมาบนจอ
<BODY BGCOLOR="#FFFFFF">
Something really cool
</BODY>
Something really cool
เราสามารถสร้างตัวหนังสือให้ขึ้นจอเป็นตัวหนา หรือ Bold โดยทดลองทำคำว่า cool ให้เป็นตัวหนาโดยพิมพ์ลงไปดังนี้
<BODY BGCOLOR="#FFFFFF">
Something really <B>cool</B>
</BODY>
มาดูกันว่า เราทำอะไรลงไป
Something really cool
เราส่งภาษาบอกบราวเซ่อร์ว่า...เอาละน่ะ ตั้งแต่ตรงนี้ <B> ให้ทำตัวหนังสือเป็นตัวหนา และตั้งแต่ตรงนี้เป็นต้นไป </B> ให้หยุดทำตัวหนา
[หมายเหตุ B เป็นตัวย่อของ Bold แปลว่า ตัวหนา]
ในการที่จะทำตัวหนังสือให้เป็นตัวเอน หรือ italics.. ก็ใช้หลักเดียวกัน....ดังนี้
<BODY BGCOLOR="#FFFFFF">
Something <I>really</I> <B>cool</B>
</BODY>.
ผลที่แสดงออกมาบนจอจะเป็นอย่างนี้.
Something really cool
และเช่นเดียวกัน จะทำตัวหนังสือขีดเส้นใต้ หรือ underlining ก็ทำได้เช่นกัน...ดังนี้
<BODY BGCOLOR="#FFFFFF">
<U>Something</U> <I>really</I> <B>cool</B>
</BODY>
Something really cool
คราวนี้ให้เรากลับไปตั้งต้นกันที่พื้นจอสีขาวกันอีกที ตามที่เห็นข้างล่าง
<BODY BGCOLOR="#FFFFFF">
Something really cool
</BODY>
Something really cool
เราสามารถใช้คำสั่งผสมกันหลายคำสั่งก็ได้ เช่นต้องการทำให้คำว่า cool เป็นทั้งตัวหนา และตัวเอน ก็ให้พิมพ์ลงไปดังนี้
<BODY BGCOLOR="#FFFFFF">
Something really <I><B>cool</B></I>
</BODY>
Something really coolตรงนี้มาถึงเรื่องสำคัญ ที่ฝรั่งเรียกว่าการทำ nested tags นั่นก็คือในการวางแท็ก มีความสำคัญอยู่ว่า แท็กแต่ละคู่ต้องวางให้เปิดและปิด ในแบบใส่เข้าไป แล้วถอดออกในลำดับถอยหลัง อย่าวาง แท็กให้ overlap หรือสลับที่กัน ยกตัวอย่างให้ดูดีกว่า
<THIS><THAT></THIS></THAT> อย่างนี้เรียกว่า Overlapping tags.... ใช้ไม่ได้
<THIS><THAT></THAT></THIS> อย่างนี้เรียกว่า Nested tags.... เป็นแบบที่ถูกต้อง
บทนำ บทที่ 1 บทที่ 2 บทที่ 3 บทที่ 4 บทที่ 5 บทที่ 6 บทที่ 7 บทที่ 8 บทที่ 9 บทที่ 10 ดรรชนี
