วันอาทิตย์ที่ 23 กันยายน พ.ศ. 2555

การสร้างตาราง


การสร้างตาราง
 Table หรือ ตาราง เป็นอีกวิธีหนึ่งในการนำเสนอข้อมูลบน Web ที่เหมาะกับข้อมูลที่เป็นรายงานสถิติ 
หรือข้อมูลที่เป็นตัวเลขจำนวนมาก ๆ รวมทั้งเป็นการจัดหมวดหมู่ของข้อมูลให้เป็นระเบียบ ง่ายต่อการเข้าใจ จะสังเกตเห็นว่า 
Home Page ส่วนใหญ่่จะมีการนำตารางมาช่วยในการจัดเมนูหรือหัวข้อที่เป็น ไปยัง Web Page หรือ Web Site  อื่น 
ตัวอย่าง เช่น เว็บไซต์ของ Sanook.com ที่มีการจัดหน้าเว็บเพจด้วยการนำเอาตารางมาประยุกต์ใช้

คำสั่งที่นำมาใช้ในการสร้างตาราง
<Table>…… </Table>
- เป็น Tag สำหรับกำหนดจุดเริ่มต้นและสิ้นสุดการสร้างตาราง
<TR>……….</TR>
- เป็น Tag สำหรับสร้างแถว (row) ให้กับตาราง
<TD>………</TD>
- เป็น Tag สำหรับสร้างคอลัมน์  (column) ให้กับตารางHTML

รูปแบบของคำสั่ง ที่ใช้ในการสร้างตาราง

<TABLE>
      <CAPTION>หัวข้อตาราง</CAPTION>
             <TR>
                    <TD>คอลัมน์ที่ 1</TD>
                    <TD>คอลัมน์ที่ 2</TD>
            </TR>
            ...
</TABLE>
ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การสร้างตารางด้วยภาษา HTML</TITLE>
</HEAD>
<BODY>
         <TABLE BORDER = 2>
                 <CAPTION>การสร้างตารางอย่างง่าย</CAPTION>
                      <TR>
                              <TD>แถว 1 คอลัมน์ 1</TD>
                              <TD>แถว 1 คอลัมน์ 2</TD>
                      </TR>
                      <TR>
                              <TD>แถว 2 คอลัมน์ 1</TD>
                              <TD>แถว 2 คอลัมน์ 2</TD>
                      </TR>
                      <TR>
                              <TD>แถว 3 คอลัมน์ 1</TD>
                              <TD>แถว 3 คอลัมน์ 2</TD>
                      </TR>
</TABLE>
</BODY>
</HTML>

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


  ตามปกติแล้ว ตารางที่สร้างขึ้นจะไม่มีกรอบของตาราง หากต้องการจะสร้างกรอบให้ตาราง เพื่อให้การแบ่งส่วนของข้อมูลในตารางชัดเจนขึ้น มีวิธีการดังนี้

การสร้างกรอบตาราง

รูปแบบคำสั่ง HTML ที่ใช้ในการสร้างกรอบตาราง
<TABLE BORDER = "ขนาดของกรอบ">...</TABLE>

การกำหนดสีเส้นของตาราง
<TABLE BORDER = "ขนาดของกรอบตาราง"
BORDERCOLOR="ชื่อสีหรือรหัสสี">... </TABLE>

ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การตกแต่งตารางโดยใช้ภาษา HTML</TITLE>
</HEAD>
<BODY>
      <TABLE BORDER = 2 BORDERCOLOR=BLUE>
      <CAPTION><font color=blue>การตกแต่งตาราง</font></CAPTION>
      <TR>
           <TD>แถว 1 คอลัมน์ 1</TD>
           <TD>แถว 1 คอลัมน์ 2</TD>
     </TR>
     <TR>
          <TD>แถว 2 คอลัมน์ 1</TD>
          <TD>แถว 2 คอลัมน์ 2</TD>
     </TR>
     <TR>
     <TD>แถว 3 คอลัมน์ 1</TD>
     <TD>แถว 3 คอลัมน์ 2</TD>
     </TR>
     </TABLE>
</BODY>
</HTML>

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


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

รูปแบบของคำสั่ง HTML การใส่รูปภาพในตาราง
<TD><IMG SRC="ชื่อไฟล์รูปภาพที่ต้องการ.นามสกุล"> </TD>
ตัวอย่างโปรแกรม
<html>
<head><title>การใส่รูปภาพในตาราง</title><body>      <table align="center" width="360" hight="70" border=2 bordercolor="blue">      <caption>การใส่รูปภาพในตาราง</caption>      <tr>         <td align="center"><img src="t014.jpg"</td>         <td align="center"><img src="t006.jpg"</td>         <td align="center"><img src="t020.jpg"</td>    </tr>    <tr>         <td align="center">รูปที่ 1</td>         <td align="center">รูปที่ 2</td>         <td align="center">รูปที่ 3</td>     </tr>     </table></body></html>
ผลลัทธ์ที่ได้

แหล่งที่มา
เขียนโดย ที่ ไม่มีความคิดเห็น:

การแทรกรูปภาพ


การใส่รูปภาพประกอบในเว็บเพจ โดยการกำหนดความกว้างของภาพ 120 พิกเซล ความสูงของภาพ 120 พิกเซล
                            และใส่คำอธิบายรูปภาพว่า นี่คือภาพที่ฉันชอบ โดยแสดงกึ่งกลางจอภาพ

<HTML>
<HEAD>
<TITLE> การใส่รูปภาพประกอบในเว็บเพจ </TITLE>
</HEAD>
<BODY>
     <CENTER>
      นี่คือภาพที่ฉันชอบ><BR>
      <IMG SRC="flower.jpg" BORDER=0 WIDTH=120 HIGHT=120 ALT="นี่คือภาพที่ฉันชอบ"><BR>
      ดอกกุหลาบไง<BR>
      </CENTER>
</BODY>
</HTML>
ผลลัพธ์ที่ได้ รูปที่ (1)
นี่คือภาพที่ฉันชอบ
ตัวอย่ีางโปรแกรม การใส่กรอบให้รูปภาพ ความหนาของกรอบเท่ากับ 2 และใส่คำอธิบายรูปภาพ
<HTML>
<HEAD>
<TITLE>การใส่กรอบให้รูปภาพ </TITLE>
</HEAD>
<BODY>
       <CENTER>
       นี่คือภาพที่ฉันชอบ><BR>
       <IMG SRC="flower.jpg" BORDER=2 WIDTH=150 HIGHT=134 ALT="นี่คือดอกกุหลาบ"><BR>
       ดอกกุหลาบไง<BR>
       </CENTER>
</BODY>
</HTML>
ผลลัพธ์ที่ได้ รูปที่ (2)
นี่คือภาพที่ฉันชอบ
อธิบายคำสั่ง..
<IMG SRC> เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
="ชื่อไฟล์รูปภาพ.นามสกุล" ชื่อของรูปภาพที่จะนำมาประกอบเว็บเพจ (ต้องระบุ)
BORDER=0 กำหนดให้มีหรือไม่มีเส้นขอบรอบรูปภาพ 0=ไม่มีเส้นขอบ (ค่าปกติ)
WIDTH=150 กำหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกำหนดก็ได้)
HEIGHT=134 กำหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกำหนดก็ได้)
ALT="คำอธิบาย" สามารถแสดงข้อความเมื่อวางเมาส์บนรูปภาพ 

การใช้แท็กแบบย่อ ๆ <IMG SRC="flower.jpg"> จะได้ผลลัพธ์เหมือนรูปที่ 1 คือไม่มีเส้นขอบ 
ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การจัดตำแหน่งของรูปภาพร่วมกับข้อความ</TITLE>
</HEAD>
<BODY>
      <CENTER>
      <IMG SRC="flower1.jpg" BORDER=0 ALIGN=LEFT>
      <FONT COLOR="Blue">
"...คุณธรรมข้อหนึ่งที่ยังมีอยู่อย่างบริบริบูรณ์ ในจิตใจของคนไทยก็คือ การให้ การให้นี้ไม่ว่าจะให้ส่ิงใดแ่ก่ผู้ใด โดยสถานใดก็ตาม
เป็นสิ่งที่พึงประสงค์อย่างหนึ่ง เพราะเป็นเครื่องประสานไม่ตรีอย่างสำคัญ ระหว่างบุคคลกับบุคคล และทำให้สังคมมีความมั่นคง
เป็นปึกแผ่น ด้วยสามัคคีธรรม..."
พระราชดำรัสเนื่องในโอกาสวันขึ้นปีใหม่ : 31 มกราคม 2545 <BR>
       </FONT>
       </CENTER>
</BODY>
</HTML>
ผลลัพธ์ที่ได้ รูปที่ (1) ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ

...คุณธรรมข้อหนึ่งที่ยังมีอยู่อย่างบริบริบูรณ์ ในจิตใจของคนไทยก็คือ การให้ การให้นี้ไม่ว่าจะให้ส่ิงใดแ่ก่ผู้ใด โดยสถานใดก็ตาม
เป็นสิ่งที่พึงประสงค์อย่างหนึ่ง เพราะเป็นเครื่องประสานไม่ตรีอย่างสำคัญ ระหว่างบุคคลกับบุคคล และทำให้สังคมมีความมั่นคง
เป็นปึกแผ่น ด้วยสามัคคีธรรม..."
พระราชดำรัสเนื่องในโอกาสวันขึ้นปีใหม่ : 31 มกราคม 2545 
<HTML>
<HEAD>
<TITLE> การจัดตำแหน่งของรูปภาพร่วมกับข้อความ </TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="smicon7.gif" BORDER=0 ALIGN=RIGHT>
<FONT COLOR="Blue">
...คุณธรรมข้อหนึ่งที่ยังมีอยู่อย่างบริบริบูรณ์ ในจิตใจของคนไทยก็คือ การให้ การให้นี้ไม่ว่าจะให้ส่ิงใดแ่ก่ผู้ใด โดยสถานใดก็ตาม
เป็นสิ่งที่พึงประสงค์อย่างหนึ่ง เพราะเป็นเครื่องประสานไม่ตรีอย่างสำคัญ ระหว่างบุคคลกับบุคคล และทำให้สังคมมีความมั่นคง
เป็นปึกแผ่น ด้วยสามัคคีธรรม..."
พระราชดำรัสเนื่องในโอกาสวันขึ้นปีใหม่ : 31 มกราคม 2545 <BR>
</FONT>
</CENTER>
</BODY>
</HTML>
ผลลัพธ์ที่ได้ รูปที่ (2) ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
...คุณธรรมข้อหนึ่งที่ยังมีอยู่อย่างบริบริบูรณ์ ในจิตใจของคนไทยก็คือ การให้ การให้นี้ไม่ว่าจะให้ส่ิงใดแ่ก่ผู้ใด โดยสถานใดก็ตาม
เป็นสิ่งที่พึงประสงค์อย่างหนึ่ง เพราะเป็นเครื่องประสานไม่ตรีอย่างสำคัญ ระหว่างบุคคลกับบุคคล และทำให้สังคมมีความมั่นคง
เป็นปึกแผ่น ด้วยสามัคคีธรรม..."
พระราชดำรัสเนื่องในโอกาสวันขึ้นปีใหม่ : 31 มกราคม 2545 
อธิบายคำสั่ง..ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ (Default)
ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
ALIGN=TEXTTOP กำหนดให้ขอบบนของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)
ALIGN=BOTTOM กำหนดให้ขอบล่างของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้) 
การกำหนดระยะห่างของรูปภาพ        
ปกติข้อความจะติดกับรูปภาพ ซึ่งเราสามารถกำหนดระยะห่างของรูปภาพและข้อความเองได้
ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE> การกำหนดระยะห่างของรูปภาพ </TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="flower1.jpg" BORDER=0 ALIGN=LEFT HSPACE=10>
<FONT COLOR="Blue">
คนเราถ้าพอใจในความต้องการ ก็มีความโลภน้อย เมื่อมีความโลภน้อย ก็เบียดเบียนคนอื่นน้อย ถ้าทุกประเทศมีความคิด<BR> อันนี้ไม่ใช่ เศรษฐกิจ มีความคิดว่าจะทำอะไรต้องพอเพียง หมายความว่า พอประมาณ ไม่สุดโต่ง ไม่โลภอย่างมาก <BR>
คนเราก็จะอยู่เป็นสุข<BR>
พระราชดำรัสเนื่องในโอกาสวันเฉลิมพระชนมพรรษา : 4 ธันวาคม 2541
</FONT>
</CENTER>
</BODY>
</HTML>
ผลลัพธ์ที่ได้..
 คนเราถ้าพอใจในความต้องการ ก็มีความโลภน้อย เมื่อมีความโลภน้อย ก็เบียดเบียนคนอื่นน้อย ถ้าทุกประเทศมีความคิดอันนี้ไม่ใช่ เศรษฐกิจ มีความคิดว่าจะทำอะไรต้องพอเพียง หมายความว่า พอประมาณ ไม่สุดโต่ง ไม่โลภอย่างมาก คนเราก็จะอยู่เป็นสุข 
พระราชดำรัสเนื่องในโอกาสวันเฉลิมพระชนมพรรษา : 4 ธันวาคม 2541
 <--- สังเกตุระยะห่างของรูปภาพกับข้อความ (10 Pixel) อธิบายคำสั่ง..
HSPACE=10 กำหนดระยะห่าง (ทางแนวนอน) ของรูปภาพ ค่าที่กำหนดมีหน่วยเป็น Pixel
VSPACE=10 กำหนดระยะห่าง (ทางแนวตั้ง) ของรูปภาพ ค่าที่กำหนดมีหน่วยเป็น Pixel

แหล่งที่มา
 วันที่ 20 กันยายน  2555




เขียนโดย ที่ ไม่มีความคิดเห็น:

วันจันทร์ที่ 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)