วันอาทิตย์ที่ 15 กันยายน พ.ศ. 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 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง     
                                   ตัวอย่างการใช้คำสั่ง BORDER




























ผลลัพธ์


  












2.2  คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ
                - LEFT    คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
                - RIGHT  คือ จัดตารางชิดขวาของจอภาพ
                - CENTER  คือ จัดตารางไว้กึ่งกลางของจอภาพ
                          ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ



























ผลลัพธ์


















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

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




            ผลลัพธ์





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



       






















ผลลัพธ์





   









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


    


























ผลลัพธ์




















 2.7 คำสั่ง 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
เขียนโดย ที่ ไม่มีความคิดเห็น:

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

การแทรกและจัดการรูปภาพ
            การทำเว็บเพจในหนึ่งหน้า นอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพ เพื่อเพิ่มความน่าสนใจ ให้กับเว็บเพจ นอกจากนี้แล้วรูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ ดังคำกล่าวที่ว่า "หนึ่งภาพแทนพันตัวอักษร" การใส่รูปภาพในเอกสาร HTML นั้นจะต้องเตรียมรูปภาพไว้ก่อน โดยใช้แท็ก (Tag) สำหรับแสดงผลรูปภาพดังนี้
รูปแบบแท็ก (Tag) การใส่รูปภาพ สำหรับแฟ้มรูปภาพที่จัดเก็บใน Folder เดียวกับแฟ้ม Html
<img src = "ชื่อภาพ.ส่วนขยาย">
<img src = "001.gif">




หรือหากมีการจัดเก็บรูปภาพไว้ต่าง Folder กับ แฟ้ม Html เช่น ถ้าแฟ้มรูปภาพถูกจัดเก็บในไดร์ว D: ชื่อ Folder ต่อไปนี้ M3 , Web site , Picture จะต้องแสดงที่อยู่ของแฟ้มข้อมูลให้ชัดเจน ถูกต้องตามตัวอย่าง
<img src = "ชื่อเส้นทาง (Path)\ชื่อภาพ.ส่วนขยาย">
<img src = "D:\M3\Web site\Picture\001.gif">




   สำหรับแท็ก (Tag) การใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้ไม่ว่าจะเป็นขนาดความกว้าง ความสูง ของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูงเท่าไร ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของ ภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้
ความกว้าง width="ตัวเลขระบุความกว้าง (หน่วยเป็น Pixels)"
ความสูง height="ตัวเลขระบุความสูง (หน่วยเป็น Pixels)" 
เส้นขอบ border="ตัวเลขระบุความหนาของเส้นขอบ (หน่วยเป็น Pixels)"

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





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

การวางตำแหน่ง
           การนำภาพมาแสดงในเวปเพจนั้นเป็นเพียงขั้นตอนแรก ๆ ต่อไปนี้เราต้องจัดภาพให้เข้ากับเนื้อหาที่มีอยู่ ใน HTML โดยมีรูปแบบคำสั่งดังนี้
Align ="รูปแบบการวางตำแหน่งของภาพ"

โดยคำสั่งนี้จะถูกแทรกอยู่ในคำสั่ง <Img src...> ซึ่งรูปแบบการวางตำแหน่งของภาพมีดังนี้

รูปแบบตัวอักษร
คำสั่งที่ใช้
Left
ภาพแสดงทางซ้ายโดยมีข้อความล้อมอยู่ทางขวา
Right
ภาพแสดงทางขวาโดยมีข้อความล้อมอยู่ทางซ้าย
Top
ขอบบนของภาพตรงกับส่วนบนข้อความ
Bottom
ขอบล่างของภาพตรงกับส่วนล่างสุดของข้อความ
Center
ตรงกลางของภาพตรงกับกึ่งกลางของข้อความ
           รูปแบบการใช้คำสั่ง

<Img src=”002.jpg” align=” Left / Right / Top / Bottom / Center”>…ข้อความ…




การเพิ่มระยะห่างระหว่างรูป
            ภาพที่แสดงนั้นโดยปกติจะถูกวางชิดติดกับข้อความหรือภาพที่อยู่ใกล้กัน เราสามารถเพิ่มระยะห่างของภาพ ได้โดยใช้คำสั่งต่อไปนี้
HSPACE="ระยะห่างที่ขอบซ้ายและขวาของภาพ"
VSPACE="ระยะห่างที่ขอบบนและล่างของภาพ"


           โดยคำสั่งนี้จะถูกแทรกอยู่ในคำสั่ง <Img src...>
           รูปแบบการใช้คำสั่ง
<Img src=”002.jpg” align=”center” hspace=”50”>…ข้อความ…




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

ALT="ข้อความกำกับภาพ"

           โดยคำสั่งนี้จะถูกแทรกอยู่ในคำสั่ง <Img src...>

           รูปแบบการใช้คำสั่ง

<Img src="002.jpg” alt=”…ข้อความ…” align=”center” hspace=”50">…ข้อความ…




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