การจัดการตัวอักษร
คำสั่งในการกำหนดแบบตัวอักษร (Font Type)
คำสั่งในการกำหนดตัวอักษรนั้น เราใช้แท็ก <FONT> ซึ่งแท็กนี้สามารถที่จะกำหนดได้ตั้งแต่ แบบตัวอักษร (Font Face), ขนาดของตัวอักษร (Font Size) และสีของตัวอักษร (Font
Color)
การกำหนดแบบตัวอักษร หรือที่เรียกว่า ฟอนต์ (Font) โดยปกติค่าเริ่มต้นของเวบบราวเซอร์จะกำหนดเป็นแบบ
Time New Roman เพื่อความหลากหลายของรูปแบบตัวอักษรมากกว่า 1
รูปแบบบนจอภาพของบราวเซอร์ แต่เราสามารถใช้คำสั่ง
<FONT> ตามด้วย Attributes "FACE" เพื่อกำหนดรูปแบบการแสดงผลภาษาไทยให้กับตัวอักษรของเวบเพจของเราได้
ซึ่งการแสดงผลภาษาไทยนั้นมีฟอนต์ให้เลือกหลายแบบตัวอย่างเช่น AngsanaUPC,
CordiaUPC, BrowalliaUPC, MS Sans Serif เป็นต้น
แต่สำหรับฟอนต์ที่เหมาะสมกับการแสดงผลภาษาไทยในเวบบราวเซอร์ คือ MS Sans
Serif โดยมีรูปแบบดังนี้
<FONT Face = "ชื่อฟอนต์"> ... ข้อความ ...
</FONT>
|
ถ้าต้องการระบุมากกว่า 1 ฟอนต์ ให้กำหนดรูปแบบดังนี้
<FONT Face = "ชื่อฟอนต์1",ชื่อฟอนต์2",...>
... ข้อความ ... </FONT>
|
ข้อดีของการกำหนดฟอนต์ไว้มากกว่า 1 ฟอนต์ ก็คือ
เมื่อเวบบราวเซอร์หาฟอนต์ที่ 1 ไม่เจอก็จะหาฟอนต์ที่ 2
ต่อไปตามลำดับ
ตัวอย่าง font_face.html
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD> <BODY> <FONT Face="AngsanaUPC"> แบบตัวอักษรแบบ AngsanaUPC </FONT> <BR> <FONT Face="Ms Sans Serif"> แบบตัวอักษรแบบ Ms Sans Serif </FONT> <BR> <FONT Face="Comic Sans MS"> Font Style Comic Sans MS </FONT> <BR> <FONT Face="Bookman Old Style"> Font Style Bookman Old Style </FONT> <BR> </BOYD> </HTML> |
เราสามารถกำหนดขนาดของตัวอักษรในคำสั่ง <FONT> โดยใช้ Attributes "Size" ในภาษา HTML
กำหนดขนาดของตัวอักษรได้ 7 ขนาด โดยใช้ตัวเลข 1-7
เป็นตัวกำหนด ค่าเริ่มต้นจะมีขนาดเป็น 3
<FONT Size = "ขนาด"> ... ข้อความ ...
</FONT>
|
ตัวอย่าง font_size.html
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD> <BODY> <FONT Size="1">Font Size 1</FONT><BR> <FONT Size="2">Font Size 2</FONT><BR> <FONT Size="3">Font Size 3</FONT><BR> <FONT Size="4">Font Size 4</FONT><BR> <FONT Size="5">Font Size 5</FONT><BR> <FONT Size="6">Font Size 6</FONT><BR> <FONT Size="7">Font Size 7</FONT><BR> </BOYD> </HTML> |
การกำหนดสีให้กับตัวอักษรเราใช้ Attributes
"Color" ในการกำหนดสีของตัวอักษรทำได้ 2 วิธี
กำหนดจากชื่อของสีมาตรฐาน เป็นการกำหนดจากชื่อสีมาตรฐานโดยตรง เช่น
Black, Red เป็นต้น
กำหนดจากรหัสเลขฐาน 16 จะใช้การอ้างอิงเลขฐาน 16 ในระบบของหมายเลขสี
RGB (Red, Green, Blue) ซึ่งมีรูปแบบของรหัสสีเป็น #RRGGBB
โดยใช้แทนรหัสด้วยเลขฐาน 16 ในช่วง 0,
1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ตามลำดับ
โดยมีรูปแบบดังนี้
<FONT Color = "ชื่อสีมาตรฐาน"> ... ข้อความ ...
</FONT>
<FONT Color =
"#RRGGBB"> ... ข้อความ ... </FONT>
|
ตัวอย่าง font_color.html
<HTML>
<HEAD><TITLE> Font Color</TITLE></HEAD> <BODY> <FONT color="Blue">This is Blue Color</FONT><BR> <FONT color="Green">This is Green Color</FONT><BR> <FONT color="#FFA500">This is #FFA500</FONT><BR> </BOYD> </HTML> |
การกำหนดสีพื้นหลัง
การกำหนดสีพื้นหลังของเวบเพจเราสามารถทำได้จากแท็ก <BODY> โดยกำหนดจาก Attributes "BGColor" โดยมีรูปแบบดังนี้
กำหนดสีพื้นหลังจากชื่อสีมาตรฐาน
<BODY BGColor = "สีพื้นหลัง">....
</BODY>
กำหนดสีพื้นหลังจากเลขฐาน 16
<BODY BGColor =
"#RRGGBB">
....
</BODY>
|
ตัวอย่าง bgcolor.html
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD> <!-- BODY BGColor="Yellow" --> <BODY BGColor="#FFFF00">
คอลัมน์สาระไอทีสำหรับชาวเรือ <BR>
เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ
</BOYD> </HTML> |
การกำหนดสีให้กับตัวอักษรทั้งเอกสาร
การกำหนดสีให้กับตัวอักษรทั้งเวบเพจเราสามารถทำได้จากแท็ก <BODY> โดยกำหนดจาก Attributes "Text" โดยมีรูปแบบดังนี้
กำหนดสีพื้นหลังจากชื่อสีมาตรฐาน
<BODY Text = "สีพื้นหลัง"> .... </BODY> กำหนดสีพื้นหลังจากเลขฐาน 16 <BODY Text = "#RRGGBB"> .... </BODY> |
ตัวอย่าง body_text.html
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD> <!-- BODY Text="Red" --> <BODY Text="#FF0000"> คอลัมน์สาระไอทีสำหรับชาวเรือ <BR>
เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ
</BOYD>
</HTML> |
การกำหนดเครื่องหมายหัวข้อและเลขลำดับ
คำสั่งในการแสดงรายการแบบไม่มีลำดับ (Unorder List)
Unorder List หรือ Bullet List นั้น ในภาษา HTML ได้กำหนดคำสั่งในการอำนวยความสะดวกในการสร้าง Bullet ขึ้นไว้ด้วย เพื่อแสดงเครื่องหมายหน้าหัวข้อเรื่องหรือลำดับของรายการต่าง
ๆ โดยไม่มีการเรียงลำดับ โดยมีรูปแบบดังนี้
<UL>
<LI> ... ข้อความ ... <LI> ... ข้อความ ... <LI> ... ข้อความ ... ... ........... </UL> |
ตัวอย่าง bullet1.html
<HTML>
<HEAD><TITLE> List Item </TITLE></HEAD> <BODY> <UL>Viewing the Navigator Window <LI>Window and frames <LI>Colors and underlining <LI>Company logo <LI>Progress bar <LI>Status message area </UL> </BOYD> </HTML> |
เรายังสามารถระบุชนิดของเครื่องหมายได้ด้วย Attributes
"Type" ในแท็ก <UL> หรือ
<LI> โดยมีรูปแบบดังนี้
<UL Type = "ชนิดของเครื่องหมาย">
<LI Type = "ชนิดของเครื่องหมาย"> |
ชนิดของเครื่องหมายมีด้วยกัน 3 แบบ
ดังนี้
ชนิดของเครื่องหมาย สัญญาลักษณ์ที่ปรากฏ
ชนิดของเครื่องหมาย
|
สัญญาลักษณ์ที่ปรากฏ
|
Disc
|
|
Circle
|
|
Square
|
ตัวอย่าง bullet2.html
<HTML>
<HEAD><TITLE> List Item </TITLE></HEAD> <BODY> <UL Type="Circle">คอลัมน์สาระไอทีสำหรับชาวเรือ
<LI>บทความเกี่ยวกับการออกแบบโปรแกรม
<UL> <LI Type="Disc">(IT001) </UL> <LI>บทความเกี่ยวกับวิทยาการคอมพิวเตอร์เบื้องต้น <UL> <LI Type="Disc">(IT002) </UL> <LI>บทความเกี่ยวกับโครงสร้าง Software <UL> <LI Type="Disc">(IT003) </UL> </UL> </BOYD> </HTML> |
คำสั่งในการแสดงรายการแบบเป็นลำดับ (Order List)
เราสามารถแสดงรายการแบบเป็นลำดับ คือ Order List หรือ Numer List ได้
โดยการใช้ตัวเลขหรือตัวอักษรเป็นตัวกำหนดแสดงลำดับ โดยมีรูปแบบดังนี้
<OL Type = "ชนิดของตัวเลข"
Start = "ตัวเลขเริ่มต้น">
<LI> ... ข้อความ ... <LI> ... ข้อความ ... <LI> ... ข้อความ ... ... ........... </OL> |
ชนิดของ Type กำหนดเลขลำดับได้ดังนี้
ชนิดของ Type สิ่งที่ปรากฏ
ชนิดของ Type
|
สิ่งที่ปรากฏ
|
A
|
แสดงตัวอักษรพิมพ์ใหญ่ (Caplital
letters)
|
a
|
แสดงตัวอักษรพิมพ์เล็ก (Small
letters)
|
I
|
แสดงตัวเลขโรมันตัวพิมพ์ใหญ่ (Large Roman
numerals)
|
i
|
แสดงตัวเลขโรมันตัวพิมพ์เล็ก (Small Roman
numerals)
|
1
|
แสดงตัวเลขอารบิก (Small Roman numerals)
* เป็นค่า deflaut * |
ตัวอย่าง order_list.html
<HTML>
<HEAD><TITLE> Order List </TITLE></HEAD> <BODY> <OL Type="I">My computer in my dream <LI>Inter XENON Pentium 4 processor 4.0 GHz <LI>RDRAM 4 GB <LI>Harddisk 120 GB <LI>11X DVD-RW Drive <LI>Speakers (Labtec) 160 Watt <LI>Asus GeForce4 128 MB <LI>Creative Sound Baster 5 <LI>Monitor Sony Wega 20" </OL> </BOYD> </HTML> |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น