วันพฤหัสบดีที่ 29 สิงหาคม พ.ศ. 2556

การแต่งตัวอักษร




การกำหนดแบบตัวอักษร (Font)


ในเอกสาร HTML ถ้าเราไม่ได้กำหนดแบบตัวอักษร เมื่อแสดงบนบราวเซอร์ จะแสดงตัวอักษรที่เป็น ค่าพื้นฐาน (Default) หากเราต้องการกำหนดแบบตัวอักษรเอกสามารถทำได้โดยใช้ Tag<font>
 
     เราจะใช้ <FONT FACE> เป็นการกำหนดชนิดของตัวอักษร    ชื่อชนิดของตัวอักษรจะใช้ตามชื่อของโปรแกรม Word  เมื่อเราพิมพ์ข้อความเสร็จจะจบด้วย </FONT> เสมอ

อธิบายคำสั่ง



<FONT FACE="ชื่อฟ้อนต์ที่ใช้"> เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ



รูปแบบการใช้คำสั่ง

<font face="ชื่อแบบตัวอักษรที่ต้องการ">.............ข้อความ............</font>





ตัวอย่าง





การแสดงผล







การกำหนดขนาดตัวอักษร



เราสามารถกำหนดขนาดของมันเองได้ถึง 7 ระดับ โดยกำหนดได้ด้วยตัวเลขเลยหรือแบบที่2 กำหนดโดยใส่ค่า +/- แล้วกำหนดระดับอีกที 




รูปแบบการใช้คำสั่ง



<FONT Size="......">......</FONT>



ตัวอย่าง




การแสดงผล







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

การกำหนดสีตัวอักษร  สามารถกำหนดให้เป็นสีเดียวกันทั้งเวบเพจ  หรือกำหนดให้มีสีที่แตกต่างกันในเว็บเพจเดียวกันก็ได้





เราสามารถกำหนดค่าสีได้ 2 แบบ คือ

1. สี="#xxxxxx" ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด           1 ชุดแทนด้วยตัวอักษร 2 ตัว
    แสดงค่าของแม่สี แดง เขียว นํ้าเงิน (RGB)โดยเขียนตามหลังเครื่องหมาย #
    เช่น"#FFFFFF" จะให้ สีขาว ,"#000000" จะให้ สีดำ

2. สี=color ระบุสีลงไปเลย เช่น white,black,blue,red


อธิบายคำสั่ง

<FONT COLOR="ชื่อสี"> เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ
</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

รูปแบบการใช้คำสั่ง
<font color="#0000FF">Thanasarun</font> 


ตัวอย่าง



การแสดงผล






การกำหนดลักษณะและแบบของตัวอักษร
        
เป็นการกำหนดลักษณะตัวอักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด ก็จะแสดงผลเหมือนกัน เช่น การกำหนดให้ตัวอักษรเป็นตัวหนา ตัวเอียง ตัวขีดฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกำลังในสูตรทางคณิตศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทางวิทยาศาสตร์ เป็นต้น



อธิบายคำสั่ง


<B>...</B>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
<I>...</I>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
<S>...</S>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<U>...</U>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
<STRIKE>.....</STRIKE>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<SUP>...</SUP>
เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
<SUB>...</SUB>
เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script


รูปแบบการใช้คำสั่ง


แบบตัวอักษร                         โค้ท
ตัวอักษรปกติ                         ไม่ต้องใส่โค้ท
ตัวหนา                                  <B>.....</B>
ตัวเอียง                                 <i>.....</i>
ตัวขีดเส้นใต้                          <U>.....</U>
             ตัวอักษรขีดฆ่า                       <STRIKE>.....</STRIKE>
ตัวอักษรยกกำลัง                    <SUP>.....</SUP>
ตัวอักษรห้อย                         <SUB>.....</SUB>


ตัวอย่าง

 แบบ  ตัวอักษรปกติ,ตัวหนา,ตัวเอียง, ,ตัวอักษรขีดฆ่า,ตัวอักษรยกกำลัง,ตัวอักษรห้อย




การแสดงผล




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


รูปแบบคำสั่ง 

HTML ที่ใช้ในการทำตัวอักษรวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง"   height="ความสูง"
 scrollamount=ความเร็วในการวิ่ง  scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
หมายเหตุ  ใช้ได้เฉพาะ Internet Explorer


ตัวอย่าง




การแสดงผล





การทำตัวอักษรกระพริบ


 ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป

หมายเหตุ ในการกำหนดตัวอักษรกระพริบนั้น เราไม่สามารถเปิดในโปรแกรมเว็บเบราเซอร์ที่เป็น Internet Explorer ได้ (สามารถใช้ได้กับ Netscape )
  

รูปแบบคำสั่ง


<BLINK>..........</BLINK>


ตัวอย่าง




การแสดงผล







การขึ้นย่อหน้าใหม่ และกำหนดตำแหน่ง

ข้อความ (Paragraph)


ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align  และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ


รูปแบบคำอธิบาย

LEFT จัดชิดซ้าย

CENTER จัดกึ่งกลาง

RIGHT จัดชิดขวา


รูปแบบการใช้คำสั่ง


<p align="left | center | right |justify">...</p>


ตัวอย่าง




การแสดงผล




ที่มา 
-http://www.pyayam.com/html/font_blink.php   
                                                                                     
-http://html-language.blogspot.com/2009/05/html.html   


-http://school.obec.go.th/krurenu/html/p2-4.html

-http://school.obec.go.th/krurenu/html/p2-2.html