วันเสาร์ที่ 14 กันยายน พ.ศ. 2556

การแทรกตาราง

การแทรกตาราง

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

                    1.  คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML  มีดังนี้

 <TABLE>...........</TABLE>   

เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง

 <CAPTION>...........</CAPTION>   

เป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง

 <TR>...........</TR>   

เป็นคำสั่งที่ใช้กำหนดแถว (ROW)

 <TH>...........</TH>   

เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง

<TD>...........</TD>   

เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว

 โครงสร้างของตาราง

<TABLE>
            <CAPTION> ชื่อตาราง </CAPTION>
            <TR>
                     <TH> ข้อมูลส่วนหัว </TH>
            </TR> 
            <TR>
                     <TD> ข้อมูล </TD>
             </TR>
             <TR>
                     <TD> ข้อมูล </TD>
             </TR>
</TABLE>   

 ตัวอย่างการสร้างตาราง



 2.  คำสั่งต่างๆ ที่ใช้ในการตกแต่งตารางของภาษา HTML 

                                  2.1 คำสั่ง BORDER   ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย  BORDER  ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง

2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ

                                              - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ

                                              - RIGHT  คือ จัดตารางชิดขวาของจอภาพ

                                              - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ

                                           ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ

2.3 คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด  มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

                                    2.4 คำสั่ง HEIGHT  ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

                                    2.5 คำสั่ง BGCOLOR    เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ Internet Explorer เท่านั้น

 2.6 คำสั่ง  CELLSPACING  ใช้กำหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความหนาของเส้นขอบตาราง

 2.7 คำสั่ง CELLPADDING  ใช้กำหนดระยะห่างระหว่างบรรทัดของตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความสูงของเส้นขอบตาราง

2.8 คำสั่ง Colspan และ Rowspan 

       คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้
       รูปแบบคำสั่ง      <TD  COLSPAN = "Number">
       โดยที่           - COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
                            - Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน

        คำสั่ง <TD  ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
         รูปแบบคำสั่ง     <TD  ROWSPAN = "Number">
         โดยที่         - ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว

                           - Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน

 อ้างอิง
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang
เขียนโดย ที่ ไม่มีความคิดเห็น:

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

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




รูปแบบแท็กการใส่รูปภาพ      <img src = "ชื่อภาพ">

รูปแบบการใส่รูปภาพ

  <html>
  <head><title> ....การใส่รูปภาพ....</title></head>
       <body>
               <img src = "lilies.jpg">        
       </body> 
  </html>

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

                ความกว้าง    width="ตัวเลขระบุความกว้าง"
                ความสูง       height="ตัวเลขระบุความสูง" 
                เส้นขอบ      border="ตัวเลขระบุความหนาของเส้นขอบ"

ตัวอย่าง    <img src = "lilies.jpg" width="200" height="150" border="1">

จากตัวอย่าง จะแสดงภาพขนาด 200x150 px. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และมีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการใ้ห้ขอบมีความหนามาก ระบุตัวเลขให้มาก

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

วันอังคารที่ 10 กันยายน พ.ศ. 2556

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



1.การกำหนดแบบอักษร

การกำหนดฟอนต์ ก็เหมือน ๆ กับตอนที่เราิพิมพ์งานใน word นั้นละค่ะ ซึ่งเราจะสามารถเลือกได้ว่าเราจะใช้ฟอนต์แบบไหน ซึ่งอาจจะเป็น Arial หรือ Angsana New เป็นต้น ในการเขียน HTML เราก็สามารถกำหนดได้ค่ะ ว่าจะให้ข้อความของเราแสดงผลด้วยรูปแบบของฟอนต์แบบไหน แต่ในการเขียนเว็บเพจนั้น ฟอนต์ที่เป็นที่นิยมจะมีด้วยกัน 2 ชนิดคือ MS Sans Serif และ Tahoma โดยฟอนต์แบบ MS Sans Serif จะนิยมใช้กับเว็บที่มีการแสดงผลข้อความเป็นภาษาไทย และ Tahoma มักใช้การแสดงผลข้อความเป็นภาษาอังกฤษ แต่ก็สามารถใช้กับข้อความภาษาไทยได้เหมือนกัน (อย่าง Nextstepdev ก็ใช้ฟอนต์แบบ Tahoma) รูปแบบการกำหนดชื่อฟอนต์ ก็เป็นตามตัวอย่างด้านล่างค่ะ 

<html>
  <head><title> ....การหนดรูปแบบฟอนต์ของข้อความ....</title></head>
       <body>
               <font face = "MS Sans Serif"> ข้อความนี้กำหนดฟอนต์แบบ MS Sans Serif </font> <br>
               <font face = "Tahoma"> ข้อความนี้กำหนดฟอนต์แบบ Tahoma </font> <br>
       </body> 
  </html>



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

มีอยู่ 6 ระดับ คือ H1, H2, H3, H4, H5 และ H6 โดยจะเรียงจากขนาดใหญ่ไปหาเล็ก



H1   จะมีขนาด 21 pixel และตัวหนา

H2   จะมีขนาด 17 pixel และตัวหนา

H3   จะมีขนาด 14 pixel และตัวหนา

H4   จะมีขนาด 12 pixel และตัวหนา

H5   จะมีขนาด 11 pixel และตัวหนา

H6   จะมีขนาด 9 pixel และตัวหนา

เช่น 
<Html>                                                          
<Body>
<H1> H1 </H1>                                           

<H2> H2 </H2>


<H3> H3 </H3>


<H4> H4 </H4>

<H5> H5 </H5>


<H6> H6 </H6>


</Body>  
</Html>  





3 สีตัวอักษร

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

  <html>
  <head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
       <body>
               <font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br>
               <font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> <br>
       </body> 
  </html>


4. ตัวเอียง ตัวหนา ตัวขีดเส้นใต้

           <b> = ตัวหนา
            <i> = ตัวเอียง
           <u> = ตัวขีดเส้นใต้

            <b>HTML</b><br>
            <i>HTML</i><br>
            <u>HTML</u><br>





5. ตัวขีดฆ่า ตัวยก ตัวห้อย


ตัวขีดฆ่า ใช้คำสั่ง <S>...</S>

ตัวอักษรยกขึ้น ใช้คำสั่ง <SUP>...</SUP>

ตัวอักษรห้อยลง ใช้คำสั่ง <SUB>...</SUB>




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

ตัวอักษรกระพริบ ใช้คำสั่ง <BLINK>...</BLINK>
ตัวอักษรวิ่ง        ใช้คำสั่ง 
 1.<marquee direction="left">ข้อความวิ่งจากขวาไปซ้าย</marquee>
 2.<marquee direction="right">ข้อความวิ่งจากซ้ายไปขวา</marquee> 
 3.<marquee direction="up">ข้อความวิ่งจากล่างขึ้นบน</marquee>
 4.<marquee direction="down">ข้อความวิ่งจากบนลงล่าง</marquee>



7. การจัดตำแหน่งตัวอักษร

  1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center  <center> ...ข้อความ...</center>
   2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้ 
              <p align = "ตำแหน่ง"> ...ข้อความ...</p>ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

อ้างอิง
http://www.nr.ac.th/learning/htmlforweb/learning2.html



เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: ความคิดเห็น (Atom)