ใบความรู้ที่ 2

ใบความรู้ที่ 2
การจัดการเอกสาร  
  • การขึ้นบรรทัดใหม่  
ในเอกสารภาษา HTML ข้อความที่เราใส่เข้าไปในเอกสารจะเป็นข้อความที่ต่อเนื่องกันไป และจะขึ้นบรรทัดใหม่ก็ต่อเมื่อข้อความได้ยาวไปชนขอบขวาของหน้าจอแล้วเท่านั้น หากเราต้องการตัดข้อความหรือขึ้นบรรทัดใหม่จะต้องกำหนดเอง โดยใช้ Tag 

รูปแบบของคำสั่ง HTML ที่ใช้ในการขึ้นบรรทัดใหม่

<br> ข้อความที่ต้องการนำไปขึ้นบรรทัดใหม่

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

ตัวอย่า่ง

 <FONT FACE="AngsanaUPC"> นี่คือ Font แบบ AngsanaUPC  </FONT>

<FONT FACE="JasmineUPC"> นี่คือ Font แบบ JasmineUPC<BR> </FONT>

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

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

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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

    <FONT SIZE=5> นี่คือขนาดตัวอักษร = 5 </FONT> <BR>

    <FONT SIZE=4> นี่คือขนาดตัวอักษร =4  </FONT> <BR>

   <FONT SIZE=2> นี่คือขนาดตัวอักษร =2  </FONT> <BR>

ผลลัพธ์ที่ได้ 
นี่คือขนาดตัวอักษร = 6
นี่คือขนาดตัวอักษร = 5
นี่คือขนาดตัวอักษร = 4
นี่คือขนาดตัวอักษร = 2

การกำหนดตัวอักษรเป็นหัวเรื่อง
การกำหนดตัวอักษรเป็นหัวเรื่อง กำหนดโดยใช้ Tag<hn> ซึ่งมีขนาด 1 – 7 โดยเรียงจากใหญ่ไปเล็ก
รูปแบบคำสั่ง  HTML ในการกำหนดตัวอักษรเป็นหัวเรื่อง <hn>ข้อความ</hn>

            <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>

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


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

    ตัวอย่า่ง        
            
<FONT COLOR=RED>  นี่คือตัวอักษรสีแดง </FONT>
<FONT COLOR=GREEN> นี่คือตัวอักษรสีเขียว </FONT>

 ***ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น

 <FONT COLOR=#FF0066> นี่คือตัวอักษรสีเขียว </FONT>

ตัวอย่างโค้ดสี
#FFFFFF#FFFFCC#FFFF99#FFFF66#FFFF33#FFFF00
#FFCCFF#FFCCCC#FFCC99#FFCC66#FFCC33#FFCC00
#FF99FF#FF99CC#FF9999#FF9966#FF9933#FF9900
#FF66FF#FF66CC#FF6699#FF6666#FF6633#FF6600
#FF33FF#FF33CC#FF3399#FF3366#FF3333#FF3300
#FF00FF#FF00CC#FF0099#FF0066#FF0033#FF0000
#CCFFFF#CCFFCC#CCFF99#CCFF66#CCFF33#CCFF00
#CCCCFF#CCCCCC#CCCC99#CCCC66#CCCC33#CCCC00
#CC99FF#CC99CC#CC9999#CC9966#CC9933#CC9900
#CC66FF#CC66CC#CC6699#CC6666#CC6633#CC6600
#CC33FF#CC33CC#CC3399#CC3366#CC3333#CC3300
#CC00FF#CC00CC#CC0099#CC0066#CC0033#CC0000
#99FFFF#99FFCC#99FF99#99FF66#99FF33#99FF00
#99CCFF#99CCCC#99CC99#99CC66#99CC33#99CC00
#9999FF#9999CC#999999#999966#999933#999900
#9966FF#9966CC#996699#996666#996633#996600
#9933FF#9933CC#993399#993366#993333#993300
#9900FF#9900CC#990099#990066#990033#990000
#66FFFF#66FFCC#66FF99#66FF66#66FF33#66FF00
#66CCFF#66CCCC#66CC99#66CC66#66CC33#66CC00
#6699FF#6699CC#669999#669966#669933#669900
#6666FF#6666CC#666699#666666#666633#666600
#6633FF#6633CC#663399#663366#663333#663300
#6600FF#6600CC#660099#660066#660033#660000
#33FFFF#33FFCC#33FF99#33FF66#33FF33#33FF00
#33CCFF#33CCCC#33CC99#33CC66#33CC33#33CC00
#3399FF#3399CC#339999#339966#339933#339900
#3366FF#3366CC#336699#336666#336633#336600
#3333FF#3333CC#333399#333366#333333#333300
#3300FF#3300CC#330099#330066#330033#330000
#00FFFF#00FFCC#00FF99#00FF66#00FF33#00FF00
#00CCFF#00CCCC#00CC99#00CC66#00CC33#00CC00
#0099FF#0099CC#009999#009966#009933#009900
#0066FF#0066CC#006699#006666#006633#006600
#0033FF#0033CC#003399#003366#003333#003300
#0000FF#0000CC#000099#000066#000033#000000
#465584#EEF2F7#3A4F6C#00D#434951#555
#777#DFE6EF#345487#F5F9FD#3860BB#BCD0ED
#C2CFDF#F0F5FA#D1DCEB#003#900#CCE9FD
#E4EAF2#4C77B6#DFE6EF#EEF2F7#FAFCFE#F90


+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
สรุป

การขึ้นบรรทัดใหม่

 <br>

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


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

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


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


***ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น

 การกำหนดขนาดตัวอักษร
<FONT SIZE=ขนาดตัวอักษร>
เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ
ขนาดตัวอักษร
สามารถกำหนดได้ตั้งแต่ 1 - 7
</FONT>
เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ



 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
แบบทดสอบ

 ให้นักเรียนพิมพ์โค้ดโปรแกรมต่อไปนี้ลงในโปรแกรม Notepad >> เสร็จแล้ว Save แล้วดูผลลัพธ์ที่ได้




ขอบคุณที่มาจาก http://school.obec.go.th/krurenu/

______________________________________________________________________________



1 ความคิดเห็น:

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

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