 |
เริ่มต้นกับการสร้าง Web Page!!!
Lesson 2 |
ในบทนี้เราจะกล่าวถึงการแทรกสิ่งต่างๆลงใน <BODY> Tags ซึ่งเราจะกล่าวข้าม
<HTML> , <HEAD> & <TITLE> Tags
โดยจะไม่เขียน Tags เหล่านี้ในเอกสารตัวอย่าง แต่ในเอกสารจริงจะต้องเขียนโครงสร้าง
HTML เหล่านี้เหมือนเดิม
<BODY>
</BODY>
พิมพ์ข้อความ ทดสอบการแสดงผล
<BODY>
ทดสอบการแสดงผล
</BODY>
 |
| ทดสอบการแสดงผล |
เมื่อได้บันทึกการเปลี่ยนแปลงดังกล่าวลงใน File แล้วใน ถ้า Preview ดูก็จะมีการแสดงผลดังรูป
เปลี่ยนสีพื้นหลังของหน้าต่างได้โดยใช้คำสั่ง
<BODY BGCOLOR="#FF0000">
ทดสอบการแสดงผล
</BODY>
|
| ทดสอบการแสดงผล |
FF0000 แทนค่าของ สีแดง
ใช้รูปภาพมาเป็น Background ได้ด้วย
<BODY BACKGROUND="swirlies.gif">
ทดสอบการแสดงผล
</BODY>
|
ทดสอบการแสดงผล
|
นี่คือรูปภาพที่ใช้เป็น Background.
ในกรณีที่เรา Online อยู่นั้นถ้าเราเจอรูปภาพที่ใช้เป็น Background สวยๆ เราก็สามารถนำมาใช้ได้โดย
Click Mouse ขวาบนรูปภาพ
ที่เราต้องการ แล้วเลือกรายการ Save Image As...
ถ้าต้องการ Background ที่มีลักษณะแบ่งสีของหน้าต่างก็อาจใช้รูปที่มีลักษณะนี้ก็ได้
<BODY BACKGROUND="bluebar.gif">
ทดสอบการแสดงผล
</BODY>
|
ทดสอบการแสดงผล
|
นี่คือรูปภาพที่ใช้เป็น Background.
กลับสู่หน้าจอสีขาวตามเดิม
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
</BODY>
|
| ทดสอบการแสดงผล |
การทำตัวอักษรหนา (Bold)
<BODY BGCOLOR="#FFFFFF">
ตัวปกติ <B>ตัวหนา</B>
</BODY>
|
| ตัวปกติ ตัวหนา |
<B> ใช้บอกจุดเริ่มต้นของตัวหนา และ </B> ใช้เป็นตัวบอกจุดสิ้นสุดตัวหนา
การทำตัวอักษรเอียง (Italics)
<BODY BGCOLOR="#FFFFFF">
ตัวปกติ <I>ตัวเอียง</I>
</BODY>
|
| ตัวปกติ ตัวเอียง |
<I> ใช้บอกจุดเริ่มต้นของตัวเอียง และ </I> ใช้เป็นตัวบอกจุดสิ้นสุดตัวเอียง
การทำตัวอักษรขีดเส้นใต้ (Underlining)
<BODY BGCOLOR="#FFFFFF">
ตัวปกติ <U>ตัวขีดเส้นใต้</U>
</BODY>
|
| ตัวปกติ ตัวขีดเส้นใต้ |
<U> ใช้บอกจุดเริ่มต้นของตัวขีดเส้นใต้ และ </U> ใช้เป็นตัวบอกจุดสิ้นสุดตัวขีดเส้นใต้
เราสามารถใช้ Tags หลายอย่างปนกันได้ตามต้องการ
<BODY BGCOLOR="#FFFFFF">
ตัวปกติ <I><B>ตัวเอียงและหนา</B></I>
</BODY>
|
| ตัวปกติ ตัวเอียงและหนา |
ในการใช้ Tags หลายอันปนกันจะต้องจัดเรียงลำดับโดยตัวที่ใช้ก่อนจะต้องถูกปิดทีหลังและตัวอยู่ทีหลังจะต้องปิดก่อน
<ก่อน><หลัง></ก่อน></หลัง>
ผิดหลักการ
<ก่อน><หลัง></หลัง></ก่อน>
ถูกหลักการ
เปลี่ยนขนาดของอักษร(Font) ได้ด้วยวิธีการง่ายๆ
อันดับแรกต้องเพิ่ม <FONT> tags...
<BODY BGCOLOR="#FFFFFF">
ทดสอบขนาดตัวอักษร
<FONT>ขนาด</FONT>
</BODY>
จากนั้นจึงกำหนดค่าของขนาดด้วย SIZE
<BODY BGCOLOR="#FFFFFF">
ทดสอบขนาดตัวอักษร
<FONT SIZE=6>ขนาด</FONT>
</BODY>
|
| ทดสอบขนาดตัวอักษร
ขนาด |
ขนาดของอักษรทั้งหมด 7 ขนาด
1-teeny tiny
2-small
3-regular
4-extra medium
5-large
6-real big
7-yelling!
การกำหนดชื่อ Font ที่ใช้แสดงผล
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล <FONT FACE="ARIAL">ARIAL</FONT>
</BODY>
|
| ทดสอบการแสดงผล ARIAL |
เราสามารถที่จะใส่ชื่อ Font มากกว่า 1 ชื่อได้ลงไปใน Tags ของ <FONT> ได้เพื่อที่เราจะใช้
Font ตัวที่สองหรือสามแทนเมื่อ
ใน Browser ไม่มี Font ตัวแรกๆ ถ้ารายชื่อ Font ที่เราใส่ไว้ไม่มีเลย
Browser จะใช้ Default Font แทน
<FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">ชื่อ
Font</FONT>.
ในที่นี้ Browser จะค้นหาชื่อ Font ที่ชื่อ ARIAL ก่อน ถ้าไม่พบจึงจะค้นหาชื่อ
HELVETICA และถ้าไม่พบอีก Browser ก็จะค้น
หาชื่อ LUCIDA SANS ต่อไป สุดท้ายถ้าไม่พบชื่อ Font ตัวใดเลย Browser
ก็จะใช้ Default Font แทน
เปลี่ยนสีอักษรเป็นสีที่เราชอบ
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล <FONT COLOR="#FFOOOO">สีแดง</FONT>
</BODY>
|
| ทดสอบการแสดงผล สีแดง |
เราสามารถใช้หลายๆ ATTRIBUTE ใน <TAG>...
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT>
</BODY>
|
| ทดสอบการแสดงผล Font |
ทีนี้เรามาลองใช้หลายๆคำสั่งกัน
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL"
SIZE="7">Font</FONT></B></I></U>
</BODY>
|
| ทดสอบการแสดงผล Font |
และสิ่งหนึ่งที่เราควรจะเรียนรู้ในบทเรียนนี้ก็คือ ค่ากำหนดของ Browser
เกี่ยวกับ Text Color, Link Color, Active Link Color And
Visited Link Color ค่ากำหนดต่างๆคือ
Text สีดำ
Links สีน้ำเงิน
Active Link สีแดง
Visited Link สีม่วงเข้ม
เราสามารถที่จะเปลี่ยนค่าสีต่างๆเหล่านี้ได้ โดยการไปกำหนดใน <BODY>
tag.
<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#0000FF"
ALINK="#00FF00">
ทดสอบการแสดงผล
</BODY>
|
ทดสอบการแสดงผล
นี่คือ LINK
นี่คือ VLINK
นี่คือ ALINK |
มาถึงตอนนี้เราก็ได้เรียนรู้ถึงทุกๆสิ่งเกี่ยวกับการกำหนดลักษณะอักษรแบบต่างๆในเอกสาร
HTML ของเรา เราสามารถที่จะ
กำหนดรูปแบบ ,ขนาด ,สี และ เลือก Fonts ตามที่เราต้องการได้แล้ว ในบทต่อไปเราจะได้มาเรียนรู้เกี่ยวกับการกำหนดลักษณะ
อื่นๆกันอีก...
< - - BACK
NEXT
- - >
หน้าแรก
Copyright@2002/01/12 by wirat nopparit
Software &
Programming
E-Mail : wirat_n@yahoo.com