html: กันยายน 2012

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

หากต้องการนำเสนอข้อมูลที่มีปริมาณมากๆ หรือข้อมูลที่ต้องมีการเปรียบเทียบกันการนำเสนอข้อมูลในรูปแบบของตารางจะช่วยทำให้ข้อมูลประเภทนี้ดูง่ายยิ่งขึ้นและเป็นระเบียบเรียบร้อยอ่านได้ง่ายกว่าปกติ การสร้างตารางในเอกสาร HTML  มีอยู่หลายรูปแบบแล้วแต่ผู้เขียนโปรแกรมจะกำหนดโดยใช้คำสั่งต่าง ๆ   ดังต่อไปนี้
<TABLE>...........</TABLE>   1. คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML มีดังนี้เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง
<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.2 คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ

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

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

ผลลัพธ์

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

วันที่15กันยายน พ.ศ.2555

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

ตามปกติภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .JPG หรือ .GIF เพราะเป็นไฟล์ภาพที่มีขนาดเล็ก สามารถแสดงผลได้รวดเร็ว จึงไม่ต้องเสียเวลาในการรอให้ภาพปรากฏนานเกินไป
1. ในกรณีที่ไฟล์รูปภาพอยู่ที่เดียวกับเว็บเพจ

Code : <IMG SRC = "ชื่อไฟล์รูปภาพ . นามสกุลไฟล์รูปภาพ">

code ที่เขียนใน notepad คือ

ผลที่แสดงได้คือ

2.ในกรณีที่ไฟล์รูปภาพอยู่คนละที่กับเว็บ

Code : <IMG SRC = "แฟ้มที่อยู่ของไฟล์รูปภาพ /ชื่อไฟล์ภาพที่เราต้องการแสดง.นามสกุลของภาพ">
code ที่เขียนใน notepa <img src= "img/02.jpg">

ผลที่แสดงได้คือ

การปรับขนาดของภาพ

ในการแทรกภาพเข้าสู่เอกสาร html นั้นขนาดของภาพอาจไม่ตรงตามที่เราต้องการ ซึ่ง html มีคำสั่งสำหรับปรับขนาดภาพโดยนำ width="" height="100" ไปต่อท้ายชื่อภาพภายในคำสั่งแสดงภาพ แล้วปรับขนาดภาพตามต้องการ ดังตัวอย่าง

code ที่เขียนใน notepad คือ