วันอังคารที่ 17 กรกฎาคม พ.ศ. 2555

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

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

       การกำหนดรูปแบบตัวอักษร (FONT) เป็นคำสั่งกำหนดรูปแบบอักษรให้เป็นไปตามต้องการ ซึ่งสามารถกำหนดรูปแบบตัวอักษรได้ 2 รูปแบบ คือ

          1. การกำหนดแบบตัวอักษรเฉพาะข้อความที่ต้องการ <FONT FACE>
          2. การกำหนดแบบตัวอักษรทั้งหมด <BASEFONT FACE>

          คำสั่ง <FONT FACE> เป็นคำสั่งที่ใช้สำหรับกำหนดแบบของตัวอักษรลักษณะต่าง ๆ โดยการกำหนดแบบตัวอักษรจะใช้ Attribute
คือ FACE สำหรับกำหนดแบบตัวอักษรเฉพาะข้อความที่ต้องการได้ ค่าที่ระบุ จะเป็นชื่อของรูปแบบตัวอักษรที่เป็นไปตามมาตรฐานของวินโดว์
โดยบราวเซอร์จะทำการเรียกใช้แบบตัวอักษร แบบที่ 1 (FONT1) ก่อน หากไม่สามารถเรียกใช้ได้ จะทำการเรียกใช้แบบตัวอักษรแบบที่ 2
(FONT2) แทน

          รูปแบบคำสั่ง   
                                     <FONT FACE = "Font1, Font2">..........ข้อความ..........</FONT>
          โดยที่    
                                      FACE คือ แอตทริบิวต์ที่ใช้ในการกำหนดแบบตัวอักษร (Font)
                                      Font1 คือ ชื่อแบบตัวอักษรที่ต้องการให้แสดง
                                      Font2 คือ ชื่อแบบตัวอักษรที่จะนำมาใช้เมื่อแบบตัวอักษรที่ต้องการแสดง ลำดับแรกไม่สามารถเรียกใช้ได้

          ในการกำหนดแบบตัวอักษรโดยการใช้ชื่อแบบตัวอักษร ควรจะกำหนดชื่อโดยการใช้ชื่อที่มีอยู่ในมาตรฐานของวินโดว์ โดยหากเอกสาร
HTML มีภาษาไทยอยู่ด้วย ควรจะใช้ชื่อแบบตัวอักษรที่ลงท้ายด้วย UPC เช่น AngsanaUPC, BowalliaUPC, CordiaUPC, 
EucrosiaUPC, JasmineUPC เป็นต้น

   ตัวอย่าง 
  


        
     คำสั่ง <BASEFONT FACE> เป็นคำสั่งที่ใช้กำหนดลักษณะของอักษรให้เหมือนกันทั้งเอกสาร โดยการกำหนดแบบตัวอักษรจะใช้ Attribute คือ FACE เพื่อกำหนดแบบของตัวอักษร
          รูปแบบคำสั่ง    
                                 <BASEFONT FACE = "Font1">
          โดยที่
                               FACE คือ แอตทริบิวต์ที่ใช้ในการกำหนดแบบตัวอักษร (Font)
                               Font คือ ชื่อแบบตัวอักษรที่ต้องการให้แสดง
   ตัวอย่าง
ขนาดตัวอักษร
      หากเราต้องการแสดงข้อความในเว็บของเราให้มีขนาดใหญ่เล็กแตกต่างกัน เราต้องใช้คำสั่ง <font size> โดยมี

มีรูปแบบโค้ดดังนี้

<font size=n>...</font> ซึ่ง n มีค่าตั้งแต่ 1 ถึง 7

ตัวอย่างโค้ด

<html>
<head><title>webthaidd</title></head>
<body>
<font size=1>แสดงข้อความที่มีขนาด n=1</font><br>
<font size=2>แสดงข้อความที่มีขนาด n=2</font><br>
<font size=3>แสดงข้อความที่มีขนาด n=3</font><br>
<font size=4>แสดงข้อความที่มีขนาด n=4</font><br>
<font size=5>แสดงข้อความที่มีขนาด n=5</font><br>
<font size=6>แสดงข้อความที่มีขนาด n=6</font><br>
<font size=7>แสดงข้อความที่มีขนาด n=7</font><br>
</body>
</html>


ผลที่ได้

สีตัวอักษร

คำสั่ง
             <BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี">
ตัวอย่าง

<HTML>
<HEAD>
<TITLE> การกำหนดสีให้กับตัวอักษร </TITLE>
</HEAD>
<BODY>
<FONT COLOR=RED>
นี่คือตัวอักษรสีแดง<BR>
</FONT>
<FONT COLOR=GREEN>
นี่คือตัวอักษรสีเขียว<BR>
</FONT>
<FONT COLOR=BLUE>
นี่คือตัวอักษรสีน้ำเงิน<BR>
</FONT>
<FONT COLOR=VIOLET>
นี่คือตัวอักษรสีม่วง<BR>
</FONT>
<FONT COLOR=YELLOW>
นี่คือตัวอักษรสีเหลือง<BR>
<FONT COLOR=PINK>
นี่คือตัวอักษรสีชมพู<BR>
</FONT>
</BODY>
</HTML>
ผลลัพธ์ที่ได้

ตัวเอียง ตัวหนา ขีดเส้นใต้
รูปแบบคำสั่ง :
<B>...ข้อความ..... </B> :คำสั่งตัวหนา
<I>...ข้อความ..... </I> :คำสั่งตัวเอียง<U>...ข้อความ..... </U> :คำสั่งขีดเส้นใต้
  เมื่อเราต้องการทำให้ตัวอักษรหนา เอียง หรือขีดเส้นให้ ให้นำคำสั่งข้างต้นไปคร่อม ข้อความนั้นไว้ อย่างเช่น ต้องการแต่งคำว่า "สุระ วรรณแสง" ให้เอียงและหนา ให้ทำดังนี้ : <I><B> การเขียนเว็บเพจด้วยภาษา HTML</B></I> ผลลัพธ์ที่ได้คือ การเขียนเว็บเพจด้วยภาษา HTML

ตัวอย่าง :    การทำตัวอักษรหนา,เอียง,ขีดเส้นใต้

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


<HTML>
<HEAD>
<TITLE> การใส่สีอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>
<font size=2 face="ms sans serif">
<B>ข้อความหนา</B><br><I>ข้อความเอียง</I><br> <U>ข้อความขีดเส้นใต้<U><br>
<B><I>ข้อความหนา+เอียง</I></B><br>
<B><I><U>ข้อความหนา+เอียง+ขีดเส้นใต้</U></i></B> <br>
<I><U>ข้อความเอียง+ขีดเส้นใต้</U></I><br>
<U><B>ข้อความขีดเส้นใต้+หนา</B></U><br>
</font>  
</BODY>
</HTML>

การแสดงผล

ข้อความหนา
ข้อความเอียงข้อความขีดเส้นใต้
ข้อความหนา+เอียง
ข้อความหนา+เอียง+ขีดเส้นใต้
ข้อความเอียง+ขีดเส้นใต้
ข้อความขีดเส้นใต้+หนา


ตัวขีดฆ่า ตัวยก ตัวห้อย
                         
     คำสั่งสำหรับกำหนดตัวอักษรตัวขีดฆ่า : <S>..........</S>

      ตัวอย่างการใช้คำสั่ง 
<HTML>
<HEAD>
<TITLE> การกำหนดอักษรขีดเส้นใต้ </TITLE>
</HEAD>
<BODY>
กำหนดอักษรขีดเส้นใต้ <BR>
<S>Microsoft Windows 7</S>
</BODY>
</HTML>
ผลลัพธ์
กำหนดอักษรขีดเส้นใต้
 Microsoft Windows 7
   คำสั่งสำหรับกำหนดแบบอักษรตัวห้อยและแบบอักษรตัวยก : <SUP>… </SUP> และ <SUB> …</SUB>

      ตัวอย่างการใช้คำสั่ง 
   
<HTML>
<HEAD>
<TITLE>แบบอักษรตัวห้อยและแบบอักษรตัวยก </TITLE>
</HEAD>
<BODY >
Computer<SUP>2</SUP> <P>
H<SUB>2</SUB>O<P>
</BODY>
</HTML>

ผลลัพธ์

Computer2
H2O

ตัวอักษรวิ่ง  ตัวอักษรกระพริบ

        คำสั่งสำหรับกำหนดอักษรวิ่ง   (MARQUEE) 
               ใช้สำหรับแสดงข้อความแบบเคลื่อนที่ไปยังทิศทางที่เราต้องการ มีรูปแบบการใช้ดังนี้

                  <marquee scrolldelay="ความเร็ว"direction="ทิศทางวิ่ง">ข้อความ</marquee>
- scrolldelay ให้แทนค่าด้วยความเร็วเป็น ตัวเลข ส่วนdirection ใส่ได้เฉพาะ Up,Down,Left และ Right


ตัวอย่างการใช้คำสั่ง   

 <html>
<head>
<title>marque</title></head>
<body>
<center>
<marquee scrolldelay="100" direction="Right">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Left">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Up">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Down">WEBTHAIDD</marquee>
</body>
</html>

คำสั่งสำหรับกำหนดอักษรตัวกระพริบ(Blink) : <BLINK> … </BLINK>

      ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
<TITLE>กำหนดอักษรตัวกระพริบ </TITLE>
</HEAD>
<BODY>
การกำหนดอักษรตัวกระพริบ<BR>
<Blink>COMPUTER</Blink>
</BODY>
</HTML>


การจัดตำแหน่งข้อความ

       เราได้เรียนรู้ คำสั่งการขึ้นย่อหน้าใหม่ <P> ไปแล้ว หากเราต้องการกำหนดตำแหน่งการวางข้อความในแต่ละบรรทัด สามารถใช้คำสั่ง <Align> เพิ่มเข้าไปในคำสั่ง <P> ซึ่งมีรูปแบบคำสั่ง ดังนี้
<p align=ตำแหน่งที่ต้องการวางข้อความ>...</p>

การวางตำแหน่งข้อความสามารถวางได้ 3 แบบ ดังนี้

left จัดวางข้อความทางด้านซ้าย ซึ่งเป็นค่าปกติ
center จัดวางข้อความตรงกลาง เขียนได้อีกแบบคือ <center>...</center> ผลที่ได้เหมือนกัน
right จัดวางข้อความทางด้านขวา

ตัวอย่างโค้ด

<html>
<head>
<title>เว็บไทยดีดี :: webthaidd</title>
</head>
<body>
<p align=left>ข้อความอยู่ทางซ้าย</p>
<p align=center>ข้อความอยู่ตรงกลาง</p>
<p align=right>ข้อความอยู่ทางขวา</p>
</body>
</html>

ผลที่ได้แหล่งที่มา
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)