Course Content
วิชาคอมพิวเตอร์เพื่ออาชีพ 1 (ง30241) ชั้นมัธยมศึกษาปีที่ 4 แผนการเรียนศิลป์คำนวณ/สหศิลป์ ภาคเรียนที่ 1 ปีการศึกษา 2564
About Lesson

คำสั่งในการกำหนดแบบตัวอักษร (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 ต่อไปตามลำดับ

<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>
</BODY>
</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>
</BODY>
</HTML>

        การกำหนดสีให้กับตัวอักษรเราใช้ Attributes “Color” ในการกำหนดสีของตัวอักษรทำได้ 2 วิธี คือ
        1. กำหนดจากชื่อของสีมาตรฐาน เป็นการกำหนดจากชื่อสีมาตรฐานโดยตรง เช่น Black, Red
เป็นต้น
        2. กำหนดจากรหัสเลขฐาน 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>

ตัวอย่างสีมาตราฐานในการแสดงผลบนเวบบราวเซอร์ (ในที่นี้ขอใช้ Internet Explorer เป็นหลัก) ทั้งชื่อของสี และรหัสเลขฐาน 16 มีดังนี้

ชื่อมาตรฐานและตัวเลขฐาน 16 ในระบบสี
Black #000000 สีดำ
Blue #0000FF สีนํ้าเงินเข้ม
Cyan #00FFFF สีคราม
Darkgray #A9A9A9 สีเทาเข้ม
Gray #808080 สีเทา
Green #008000 สีเขียว
Lightgray #D3D3D3 สีเทาอ่อน
Magenta #FF00FF สีม่วงอ่อน
Orange #FFA500 สีส้ม
Pink #FFC0CB สีชมพู
Red #FF0000 สีแดง
White #FFFFFF สีขาว
Yellow #FFFF00 สีเหลือง

ตัวอย่าง 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>
</BODY>
</HTML>