สอนภาษา HTML: กันยายน 2013

วันพฤหัสบดีที่ 12 กันยายน พ.ศ. 2556

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

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

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

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

ตัวอย่าง โครงสร้างของการสร้างตารางในภาษา HTML

<TABLE>

<CAPTION> ชื่อตาราง </CAPTION>

<TR>

<TH> ข้อมูลส่วนหัว </TH>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

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

เมื่อพิมพ์ข้อมูลตามตัวอย่างเสร็จแล้วให้จัดเก็บชื่อ TEST_TABLE.HTM และทำการแสดง ผลลัพธ์บนเว็บเบราว์เซอร์จะได้ผลลัพธ์ ดังนี้

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

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

จะได้ผลดังนี้

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

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

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

ทำการแสดงผลลัพธ์บนเว็บเบราว์เซอร์ สังเกตผลลัพธ์ที่ได้จะได้ผลลัพธ์ ดังนี้

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

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

Colspan และ Rowspan

คำสั่ง <TD COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้

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

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

คำสั่ง <TD ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้

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

ผลลัพธ์

ที่มา

http://www.bankaeng.ac.th/k.npd/p28.htm

https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang

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

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

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

ตามปกติภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .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 คือ