ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

             การกำหนดลักษณะและรูปแบบตัวอักษร เป็นการกำหนดให้ตัวอักษรมีความหนา เอียง ขีดเส้นใต้ ตัวพิมพ์ดีด ขีดฆ่า ตัวยก ตัวห้อย กำหนดข้อความให้ใหญ่และเล็กและยังสามารถกำหนดรูปแบบตัวอักษรให้เป็นแบบต่างๆ เหมือนกับที่เราใช้ในโปรแกรม word ทั่วไป กำหนดให้มีขนาดตามต้องการได้อีกด้วย

 

arrow2 1. การกำหนดลักษณะตัวอักษรในภาษา HTML

                 การกำหนดลักษณะตัวอักษรแบบ (Physical) สามารถกำหนดรูปแบบตัวอักษรในข้อความได้หลายรูปแบบเหมือนในโปรแกรมจัดการเอกสาร เช่น ตัวหนา ตัวเอียง ขีดเส้นใต้ข้อความ เป็นต้น

                 1.1 การกำหนดข้อความเป็นตัวหนา
                       ช่วยในการเน้นข้อความให้มีขนาดหนาขึ้นกว่าตัวอักษรปกติ​​​​  เพื่อช่วยในการเน้นข้อมูลที่มีความสำคัญมากกว่าส่วนอื่น  หรือต้องการให้ข้อมูลดังกล่าวมีความโดดเด่นมากกว่าข้อมูลในส่วนอื่น  ซึ่งแท็ก​​​​ <b>​​​​​ เป็นแท็กคู่มีแท็กเปิด  (open tag)  และแท็กปิด  (close tag)  

รูปแบบการใช้งาน  

<b> ข้อความที่ต้องการกำหนดตัวหนา </b>

ตัวอย่าง

<b> HTML (Hypertext Markup Language) </b> กำหนดขึ้นเมื่อปี ค.ศ.1991 <br> โดย Tim Berners Lee ใช้จัดรูปแบบเอกสารบนอินเทอร์เน็ต

 b

               1.2 การกำหนดข้อความเป็นตัวเอียง

                    เป็นการเน้นข้อความจากขนาดปกติให้เป็นตัวเอียงเป็นการเน้นให้ข้อมูลดังกล่าวมีความน่าสนใจมากยิ่งขึ้น  ซึ่งแท็ก <i> เป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)

รูปแบบการใช้งาน  

   <i>ข้อความที่ต้องการกำหนดตัวเอียง </i> 

ตัวอย่าง

<i> HTML (Hypertext Markup Language) </i>  กำหนดขึ้นเมื่อปี ค.ศ.1991 
โดย Tim Berners Lee  ใช้จัดรูปแบบเอกสารบนอินเทอร์เน็ต

italic
               1.3 การกำหนดข้อความให้ขีดเส้นใต้

                    เพื่อเป็นการเน้นข้อความให้มีลักษณะเด่นมากยิ่งขึ้น  โดยการกำหนดให้ข้อความนั้นมีการขีดเส้นใต้เป็นการเน้นเพื่อให้เกิดความชัดเจนของข้อความ  และแท็ก  <u> เป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag) 

 

รูปแบบการใช้งาน  

<u>  ข้อความที่ต้องการกำหนดการขีดเส้นใต้  </u>

ตัวอย่าง

<u> HTML (Hypertext Markup Language) </u> กำหนดขึ้นเมื่อปี ค.ศ.1991  
โดย Tim Berners Lee ใช้จัดรูปแบบเอกสารบนอินเทอร์เน็ต

u


               1.4 การกำหนดข้อความเป็นตัวพิมพ์ดีด

                    เป็นการกำหนดให้ตัวอักษรปกติมีลักษณะคล้ายตัวอักษรที่พิมพ์จากเครื่องพิมพ์  และมีลักษณะทางการ  เป็นระเบียบ​​​​​​​​​​​​​​​​​​​​​​​​​

รูปแบบการใช้งาน

<tt> ข้อความที่ต้องการกำหนดตัวพิมพ์ดีด </tt>

ตัวอย่าง 

<tt> HTML (Hypertext Markup Language) </tt> กำหนดขึ้นเมื่อปี ค.ศ.1991 <br> โดย Tim Berners Lee 

 typewriter

               1.5 การกำหนดข้อความเป็นตัวขีดฆ่า

                    เป็นการกำหนดตัวอักษรให้มีลักษณะขีดเส้นกลางตัวอักษร  เพื่อเป็นการยกเลิกข้อความหรือการปฏิเสธต่อข้อมูลที่ไม่ต้องการ  เช่น  ใช้ในการแสดงสินค้าที่ต้องการยกเลิกราคา หรือนำเสนอการลดราคาจากป้ายปกติของสินค้านั้น  ๆ  เป็นต้น และเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)

รูปแบบการใช้งาน

<s> ข้อความที่ต้องการกำหนดขีดฆ่า </s>

ตัวอย่าง 

 <h2> สินค้าลดราคาพิเศษรับลมหนาว </h2>
จากราคาปกติ<s> 199 </s>บาท<br>
ลดเหลือ 159 บาท

strike


               1.6 การกำหนดข้อความเป็นตัวยกและตัวห้อย

                    การประยุกต์ใช้ตัวยกตัวห้อยนั้นมีประโยชน์ช่วยในเรื่องการกำหนดข้อความและตัวอักษรต่าง  ๆ  สามารถใช้กับการแสดงสูตรคณิตศาสตร์  สูตรเคมี  และการคำนวณ  ซึ่งการใช้แท็กเพื่อการกำหนดตัวอักษรให้เป็นตัวยก  (superscript)  แท็ก    <sup> และแท็กการกำหนดตัวอักษรให้เป็นตัวห้อย  (subscript)  แท็ก  <sub>  นั้นเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)

 

รูปแบบการใช้งาน

<sup>ข้อความ/ตัวเลขที่ต้องการกำหนดตัวยก</sup>
<sub>ข้อความ/ตัวเลขที่ต้องการกำหนดตัวห้อย</sub>

ตัวอย่าง 

 <!-- การแสดงตัวยก -->
<b>สูตรคณิตศาสตร์:: </b>
สมการวงกลมจุดยอด (0,0) <br>
x<sup>2</sup>+y<sup>2</sup>=r<sup>2</sup>
<!-- การแสดงตัวห้อย -->
<b>สูตรเคมี:: </b>โซเดียมไบคาร์บอเนต <br>NaHCO<sub>3</sub>

sub sup


               1.7 การกำหนดข้อความให้ใหญ่ขึ้นและเล็กลง

                   หากต้องการให้ข้อความมีความแตกต่างกันใช้แท็ก  <big>  กำหนดเพื่อให้ข้อความมีขนาดใหญ่ขึ้นกว่าปกติ และแท็ก  <small>  กำหนดเพื่อให้ข้อความมีขนาดเล็กกว่าปกติสามารถประยุกต์ใช้กับเนื้อหาที่มีความสำคัญที่แตกต่างกันการกำหนดเนื้อหาหลักและเนื้อหารองได้อีกด้วยทั้งสองแท็กนี้เป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)

รูปแบบการใช้งาน

 <big> ข้อความที่กำหนดให้มีขนาดใหญ่ขึ้นกว่าปกติ </big>
ข้อความปกติ
<small> ข้อความที่กำหนดให้มีขนาดเล็กกว่าปกติ </small>


ตัวอย่าง 

 <big>ข้อความที่กำหนดให้มีขนาดใหญ่กว่าปกติ </big><br>
ข้อความปกติ<br>
<small>ข้อความที่กำหนดให้มีขนาดเล็กกว่าปกติ </small><br>

    big small

 

 

arrow2 2. การกำหนดรูปแบบตัวอักษร

                 สามารถกำหนดตัวอักษรในหน้าเว็บเพจได้ด้วยแท็ก    ซึ่งเป็นลักษณะแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)  สามารถกำหนดคำสั่งย่อยภายในแท็กได้หลายคำสั่งด้วยกันดังนี้

                 2.1 การกำหนดขนาดตัวอักษร
                   ใช้ในการกำหนดขนาดตัวอักษรในหน้าเว็บเพจอยู่ภายใต้แท็ก​​​​​​​​   ​​​​ สามารถกำหนดค่าในการกำหนดขนาดตัวอักษรได้ตั้งแต่  1-7​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​  สามารถกำหนดเพิ่มหรือลดขนาดตัวอักษรจากเดิมกำหนดค่ามาตรฐานตัวอักษรไว้เท่ากับ  3

 

รูปแบบการใช้งาน  

 <font size=n> ข้อความที่กำหนดขนาดตัวอักษร </font>
<font size=+n> ข้อความที่กำหนดขนาดเพิ่ม
ตามจำนวนตัวอักษร</font>
<font size=-n> ข้อความที่กำหนดขนาดลดตามจำนวนตัวอักษร </font>

 ตัวอย่าง

 <font size=1>ข้อความขนาดตัวอักษร=1<font><br>
<font size=2>ข้อความขนาดตัวอักษร=2<font><br>
<font size=3>ข้อความขนาดตัวอักษร=3<font><br>
<font size=4>ข้อความขนาดตัวอักษร=4<font><br>
<font size=5>ข้อความขนาดตัวอักษร=5<font><br>
<font size=6>ข้อความขนาดตัวอักษร=6<font><br>
<font size=7>ข้อความขนาดตัวอักษร=7<font><br>
------------------------------ <br>
<font size=+2>ข้อความเพิ่มขนาดตัวอักษร ขนาด=5<font><br>
<font size=-1>ข้อความลดขนาดตัวอักษร ขนาด=2<font>

  font size

              2.2 การกำหนดรูปแบบตัวอักษร

                     สามารถกำหนดรูปแบบตัวอักษร เช่น AngsanaUPC, Courier New, MS-sans-serif เป็นต้น  ซึ่งอยู่ภายในแท็ก  

 

รูปแบบการใช้งาน  

<font face= “ชื่อแบบอักษร”> ข้อความ </font>

 ตัวอย่าง

 <font face= “MS-sans-serif”>กำหนดแบบอักษร MS-sans-serif </font><br>
<font face= “Cordia New”>กำหนดแบบอักษร Cordia New</font><br>
<font face= “AngsanaUPC”>กำหนดแบบอักษร AngsanaUPC</font><br>

               font face1

 

 

                ในกรณีที่ไม่แน่ใจว่าเครื่องที่แสดงผลนั้นสามารถเปิดอ่านหน้าเว็บได้หรือไม่ ทั้งนี้สามารถระบุฟอนต์หลายรูปแบบสามารถเปิดอ่านและแสดงผลได้

รูปแบบการใช้งาน  

<font face= “ชื่อแบบอักษร1, ชื่อแบบอักษร2, ชื่อแบบอักษร3”>ข้อความ</font>

 ตัวอย่าง

 <!--การกำหนดแบบอักษรหลายรูปแบบ-->
<font face = “MS-sans-serif, Cordia New, AngsanaUPC”>
ข้อความที่กำหนดแบบอักษรหลายรูปแบบ</font>

font face2


              2.3 การกำหนดสีตัวอักษร

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

 

รูปแบบการใช้งาน  

<font color= “ชื่อสี/#รหัสสี”> ข้อความ </font>

 ตัวอย่าง

 <h1><font face= “Cordia New” color= “red”>
ประวัติส่วนตัว</font></h1><font color= “#0000FF”>
<b>ชื่อ-สกุล ::</b> จิตราภรณ์ ชัยเฉลิมศักดิ์</font>
<br><font color= “#00FF00”><b>ชื่อเล่น ::</b>
เบียร์</font><br>

 font color