วันจันทร์ที่ 13 สิงหาคม พ.ศ. 2555

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

การตกแต่งข้อความ
แท็กที่ใช้ตกแต่งข้อความเพื่อเน้นคำ หรือข้อความสั้นๆ หรือให้ดูสวยงาม มาตรฐาน HTML 4.0 มีแท็กสำหรับใช้ตกแต่งข้อความมากมาย ทำได้แทบจะครบทุกรูปแบบ และสามารถแบ่งออกเป็น 2 กลุ่มใหญ่ คือ
  • Logical Format - เป็นแท็กที่มีชื่อที่สื่อความหมาย ซึ่งเบราเซอร์แต่ละยี่ห้อจะแปลแท็กเหล่านี้ต่างกัน และให้ผลเป็นเว็บเพจที่มีหน้าตาต่างกัน แต่ก็แตกต่างกันไม่มากนัก โดยยังคงให้ผลใกล้เคียงกับชื่อของแท็กนั้นๆ เช่น <EM> หมายถึงข้อความที่ต้องการเน้นเป็นพิเศษ ซึ่งเว็บเบราเซอร์อาจจะแสดงเป็นตัวหนา หรือตัวเอียงก็ได้ ขึ้นกับเบราเซอร์แต่ละตัว และการกำหนดสไตล์ชีท
  • Fixical Format - แท็กที่กำหนดลักษณะตายตัว ทุกเบราเซอร์จะแปลความหมายแท็กเหล่านี้เหมือนกันหมด เว็บเพจที่ได้จึงเหมือนกัน เช่น <B> หมายถึงข้อความแบบตัวหนา
การกำหนดสีของตัวอักษร
การกำหนดสีของตัวอักษรนั้น จะทำการเขียนในส่วนของคำสั่ง <BODY> โดยเราจะใช้แอตทริบิวต์ Text มาเป็นตัวกำหนดจะต่างจากคำสั่ง <font color>ที่การสั่งแบบนี้จะกำหนดทั้งหน้าเว็บไซด์โดยกำหนดภายในTAX ของ   <body>
<BODY TEXT="#RGB หรือ กำหนดชื่อสีที่ต้องการ">
การกำหนดตัวอักษรให้มีความหนา
<B>..........</B>
ใช้กำหนดข้อความที่อยู่ภายในคำสั่ง ให้แสดงผลด้วยตัวอักษรแบบตัวหนา (bold) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น
<HTML>
<HEAD>
             <TITLE>การกำหนดตัวหนา</TITLE>
</HEAD>
<BODY> 
     ตัวอักษรปรกติ COMPUTER
     ตัวอักษรหนา <B>COMPUTER</B>
</BODY>
</HTML>
การกำหนดตัวอักษรให้ขีดเส้นใต้
<U>..........</U>
ใช้แสดงข้อความแบบขีดเส้นใต้ (underline) ทั้งนี้เพื่อเน้นข้อความในประโยคนั้น
<HTML>
<HEAD>
             <TITLE>การกำหนดการขีดเส้นใต้</TITLE>
</HEAD>
<BODY> 
     ตัวอักษรปกติ COMPUTER
     ตัวอักษรที่ขีดเส้นใต้ <U>COMPUTER</U>
</BODY>
</HTML>
หมายเหตุ แท็กนี้ไม่นิยมใช้เนื่องจากอาจก่อให้เกิดความสับสนกับข้อความที่เป็นจุดลิงก์ได้
การกำหนดตัวอักษรให้มีการเอน
<I>..........</I>
ใช้กำหนดข้อความที่อยู่ภายในคำสั่งให้แสดงผลด้วยตัวอักษรแบบเอน (Italic) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น
<HTML>
<HEAD>
             <TITLE>การกำหนดอักษรเอน</TITLE>
</HEAD>
<BODY> 
     ตัวอักษรปกติ COMPUTER
     ตัวอักษรเอน <i>COMPUTER</i>
</BODY>
</HTML>
การกำหนดตัวอักษรกระพริบ
<BLINK>..........</BLINK>
ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป
<HTML>
<HEAD>
             <TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY text="red"> 
     <Blink>COMPUTER</Blink>
     แสดงผลได้เฉพาะบน Netscape
</BODY>
</HTML>
หมายเหตุ  ในการกำหนดตัวอักษรกระพริบนั้น เราไม่สามารถเปิดในโปรแกรมเว็บเบราเซอร์ที่เป็น Internet Explorer ได้
การกำหนดรูปแบบของตัวอักษร
<FONT FACE="font name หรือ typeface">..........</FONT>
เป็นการกำหนดฟอนต์ของตัวอักษรในเว็บเพจ ซึ่งเราสามารถกำหนดได้ด้วยคุณสมบัติที่ชื่อว่า FACE และตามด้วยชื่อฟอนต์ที่เราต้องการ เอกสารเว็บอนุญาตให้กำหนดฟอนต์ ได้หลายฟอนต์ โดยเบราเซอร์จะมีการตรวจสอบการใช้ฟอนต์ให้อัตโนมัติ
  • ฟอนต์สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi
  • ฟอนต์สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif
<HTML>
<HEAD>
             <TITLE>FONT FACE </TITLE>
</HEAD>
<BODY> 
     ชนิดของฟอนต์ปกติ<BR>
     <FONT FACE="MS Sans Serif">ฟอนต์ชื่อ MS Sans Serif</Font>
</BODY>
</HTML>
ผลลัพธ์
ชนิดของฟอนต์ปกติ
ฟอนต์ชื่อ MS Sans Serif
การกำหนดขนาดของตัวอักษร
<FONT SIZE="ค่ากำหนดขนาดของตัวอักษร">..........</FONT>
การกำหนดขนาดของตัวอักษรในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้อยู่ 2 รูปแบบคือ
  • กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 โดยค่ามาตรฐานจะมีค่าจะอยู่ที่ 3 ค่าตัวเลขที่เป็น 1 และ 2 นั้นจะเป็นการย่อขนาดของตัวอักษร และค่าตัวเลข 4 ถึง 7 นั้นจะเป็นการขยายขนาดของตัวอักษร
<HTML>
<HEAD>
             <TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY text="Red"> 
     <FONT SIZE="1">Computer</Font>
     <FONT SIZE="2">Computer</Font>
     <FONT SIZE="3">Computer</Font>
     <FONT SIZE="4">Computer</Font>
     <FONT SIZE="5">Computer</Font>
     <FONT SIZE="6">Computer</Font>
     <FONT SIZE="7">Computer</Font>
</BODY>
</HTML>
  • กำหนดโดยใช้เครื่องหมายบวกและเครื่องหมายลบ โดยสามารถกำหนดได้ดังีน้ ถ้าเป็นการย่อขนาดของตัวอักษรนั้นจะใช้เครื่องหมายลบ ซึ่งจะใช้ไม่เกิน - 2 ถ้าเป็น การขยายขนาดของตัวอักษรนั้นจะใช้เครื่องหมายบวกซึ่งจะใช้ไม่เกิน + 4
<HTML>
<HEAD>
             <TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY text="Red"> 
     <FONT SIZE="+4">Computer</Font>
     <FONT SIZE="+3">Computer</Font>
     <FONT SIZE="+2">Computer</Font>
     <FONT SIZE="+1">Computer</Font>
     Computer
     <FONT SIZE="-1">Computer</Font>
     <FONT SIZE="-2">Computer</Font>
</BODY>
</HTML>
คำสั่งลดขนาดตัวอักษรลง 1 ระดับ
<SMALL>..........</SMALL>
คำสั่ง < SMALL > เป็นคำสั่งที่สามารถลดขนาดของตัวอักษรลง 1 ระดับจากขนาดของอักษรปัจจุบันได้ทันที โดยไม่ต้องไประบุด้วยคำสั่ง < font size >
<HTML>
<HEAD>
             <TITLE>SMALL </TITLE>
</HEAD>
<BODY> 
     <FONT SIZE="4" color="green" >Computer</Font>     <Small>Computer</Smaii>
     <FONT SIZE="4" color="green">Computer</Font>
</BODY>
</HTML>
คำสั่งเพิ่มขนาดของตัวอักษร 1 ระดับ
<BIG>..........</BIG>
คำสั่ง <BIG> เป็นคำสั่งที่สามารถเพิ่มขนาดของตัวอักษรขึ้น 1 ระดับจากตัวอักษรปัจจุบันได้ทันที โดยไม่ต้องใช้คำสั่ง <font size>
<HTML>
<HEAD>
             <TITLE>BIG </TITLE>
</HEAD>
<BODY> 
     <FONT SIZE="2" color="green" >Computer</Font>
     <Big>Computer</Big>
     <FONT SIZE="2" color="green">Computer</Font>
</BODY>
</HTML>


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

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE> การกำหนด Font ที่จะใช้ในเว็บเพจ </TITLE>
</HEAD>
<BODY>
   <FONT FACE="AngsanaUPC">
    นี่คือ Font แบบ AngsanaUPC <BR>
   </FONT>
   <FONT FACE="JasmineUPC">
   นี่คือ Font แบบ JasmineUPC<BR>
   </FONT>
   <FONT FACE="IrisUPC">
   นี่คือ Font แบบ IrisUPC <BR>
   </FONT>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
นี่คือ Font แบบ AngsanaUPC
นี่คือ Font แบบ JasmineUPC
นี่คือ Font แบบ IrisUPC 

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

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


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

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การกำหนดรูปแบบของตัวอักษร</TITLE>
</HEAD>
<BODY>
    การกำหนดรูปแบบตัวอักษรแบบต่าง ๆ <P>
    <B> การกำหนดตัวอักษรแบบตัวหนา</B><P>
    <I> การกำหนดตัวอักษรแบบตัวเอียง</I><P>
    <S> การกำหนดตัวอักษรแบบตัวขีดฆ่า</S><P>
    <U> การกำหนดตัวอักษรแบบขีดเส้นใต้</U><P>
    ข้อความแบบฟังก์ชั่นทางคณิตศาสตร Super Script E=MC<SUP>2</SUP><P>
    ข้อความแบบสูตรทางวิทยาศาสตร์ Sub Script H<SUB>2</SUB>O<P>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
การกำหนดรูปแบบตัวอักษรแบบต่าง ๆ
การกำหนดตัวอักษรแบบตัวหนา
การกำหนดตัวอักษรแบบตัวเอียง
การกำหนดรูปแบบตัวอักษรแบบขีดฆ่า
การกำหนดรูปแบบตัวอักษรแบบขีดเส้นใต้
ข้อความแบบฟังก์ชั่นทางคณิตศาสตร์ Super Script E=MC2
ข้อความแบบสูตรทางวิทยาศาสตร์ Sub Script H2O
อธิบายคำสั่ง
<B>...</B>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
<I>...</I>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
<S>...</S>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<U>...</U>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
<SUP>...</SUP>
เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
<SUB>...</SUB>
เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script


การกำหนดขนาดตัวอักษร            ถ้าไม่กำหนดขนาดให้เมื่อนำเอกสาร HTML ไปแสดงบนบราวเซอร์ ขนาดของตัวอักษรจะถูกกำหนดเป็นค่าพื้นฐาน     หากต้องการกำหนดเอง   ก็สามารถทำได้โดยขนาดของตัวอักษรจะมี 7 ขนาด คือ 1 – 7 โดยจะเรียงจากเล็กไปใหญ่

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
    <TITLE>การกำหนดขนาดตัวอักษร </TITLE>
</HEAD>
<BODY>
    <FONT SIZE=6>
    นี่คือขนาดตัวอักษร = 6 <BR>
    </FONT>
    <FONT SIZE=5>
    นี่คือขนาดตัวอักษร = 5 <BR>
    </FONT>
    <FONT SIZE=4>
    นี่คือขนาดตัวอักษร =4 <BR>
    </FONT>
   <FONT SIZE=2>
    นี่คือขนาดตัวอักษร =2 <BR>
    </FONT>
</BODY>
</HTML>
ผลลัพธ์ที่ได้ 
นี่คือขนาดตัวอักษร = 6
นี่คือขนาดตัวอักษร = 5
นี่คือขนาดตัวอักษร = 4
นี่คือขนาดตัวอักษร = 2
อธิบายคำสั่ง
<FONT SIZE=ขนาดตัวอักษร>
เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ
ขนาดตัวอักษร
สามารถกำหนดได้ตั้งแต่ 1 - 7
</FONT>
เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
การกำหนดตัวอักษรเป็นหัวเรื่อง
การกำหนดตัวอักษรเป็นหัวเรื่อง กำหนดโดยใช้ Tag<hn> ซึ่งมีขนาด 1 – 7 โดยเรียงจากใหญ่ไปเล็ก
รูปแบบคำสั่ง  HTML ในการกำหนดตัวอักษรเป็นหัวเรื่อง <hn>ข้อความ</hn>
<HTML>
<HEAD>
    <TITLE> การกำหนดตัวอักษรเป็นหัวเรื่อง</TITLE>
</HEAD>
<BODY>
            <h1>การกำหนดตัวอักษรเป็นหัวเรื่อง H1 ขนาด 1 </h1>
            <h2>การกำหนดตัวอักษรเป็นหัวเรื่อง H2 ขนาด 2</h2>
            <h3>การกำหนดตัวอักษรเป็นหัวเรื่อง H3 ขนาด 3</h3>
            <h4>การกำหนดตัวอักษรเป็นหัวเรื่อง H4 ขนาด 4</h4>
            <h5>การกำหนดตัวอักษรเป็นหัวเรื่อง H5 ขนาด 5</h5>
            <h6>การกำหนดตัวอักษรเป็นหัวเรื่อง H6 ขนาด 6</h6>
            <h7>การกำหนดตัวอักษรเป็นหัวเรื่อง H7 ขนาด 7</h7>
</BODY>
</HTML>

ผลลัพธ์ที่ได้




http://www.nr.ac.th/learning/htmlforweb/learning2.html
http://school.obec.go.th/krurenu/web1.html
http://school.obec.go.th/krurenu/html/p2-2.html
http://school.obec.go.th/krurenu/html/p2-3.html
http://school.obec.go.th/krurenu/html/p2-4.html
เมื่อวันที่ 13 สิงหาคม 2555
เขียนโดย ที่

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

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

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