สรุปคำสั่ง HTML(2)
การใส่ภาพ
<IMG SRC="ที่อยู่/ชื่อ">
เช่น <IMG SRC="http://www..../test.jpg">
นอกจากนี้ยังสามารถจัดตำแหน่งต่างๆโดยใช้ ALIGN เช่น
<IMG SRC="TEST>JPG" ALIGN=baseline> โดยมีการกำหนดค่าของ ALIGN ดังนี้
LEFT ไว้ทางซ้าย RIGHT ไว้ทางขวา
TOP ขอบบนของรูปภาพจะอยู่ในแนวเดียวกับจุดสูงสุดของอักษรหรือรูปภาพที่อยู่บรรทัดเดียวกัน
TEXTTOP ขอบบนของรูปภาพจะอยู่ในแนวเดียวกับจุดสูงสุดของอักษร
MIDDLE จุดกึงกลางของภาพจะอยู่กลางความสูงอักษร
ABSMIDDLE จัดตำแหน่งข้อความเฉพาะที่อยู่ในแนวเดียวกันกับภาพให้ตรงกับจุดกึงกลางของอักษร
BASELINE ขอบล่างสุดจะตรงกับ baseline ของอักษร
BOTTOM เหมือนกับ baseline
ABSBOTTOM ขอบล่างสุดอยู่ในแนวต่ำสุดของอักษร
การใช้ ALT เพื่อแสดงข้อความกรณีที่เว็บนั้นไม่สามารถแสดงรูปได้ เช่น <IMG SRC="TEST.JPG" ALT="ข้อความ">
การใช้ BORDER กำหนดความกว้างของกรอบ
เช่น <IMG SRC="TEST.JPG" BORDER=2>
การใช้ VSPACE และ HSPACE เพื่อกำหนดความกว้างของช่องว่างของรูปภาพในแนวตั้งและแนวนอนตามลำดับ
การใช้ HEIGHT กับ WIDTH กำหนดความสูงและความกว้างของรูปภาพ โดยอาจกำหนดเป็นตัวเลข หรือ เป็น % ก้ได้
การซ้อนภาพเป็นพื้นหลัง
<BODY BACKGROUND="TEST1.JPG">
<IMG SRC="ที่อยู่/ชื่อ">
เช่น <IMG SRC="http://www..../test.jpg">
นอกจากนี้ยังสามารถจัดตำแหน่งต่างๆโดยใช้ ALIGN เช่น
<IMG SRC="TEST>JPG" ALIGN=baseline> โดยมีการกำหนดค่าของ ALIGN ดังนี้
LEFT ไว้ทางซ้าย RIGHT ไว้ทางขวา
TOP ขอบบนของรูปภาพจะอยู่ในแนวเดียวกับจุดสูงสุดของอักษรหรือรูปภาพที่อยู่บรรทัดเดียวกัน
TEXTTOP ขอบบนของรูปภาพจะอยู่ในแนวเดียวกับจุดสูงสุดของอักษร
MIDDLE จุดกึงกลางของภาพจะอยู่กลางความสูงอักษร
ABSMIDDLE จัดตำแหน่งข้อความเฉพาะที่อยู่ในแนวเดียวกันกับภาพให้ตรงกับจุดกึงกลางของอักษร
BASELINE ขอบล่างสุดจะตรงกับ baseline ของอักษร
BOTTOM เหมือนกับ baseline
ABSBOTTOM ขอบล่างสุดอยู่ในแนวต่ำสุดของอักษร
การใช้ ALT เพื่อแสดงข้อความกรณีที่เว็บนั้นไม่สามารถแสดงรูปได้ เช่น <IMG SRC="TEST.JPG" ALT="ข้อความ">
การใช้ BORDER กำหนดความกว้างของกรอบ
เช่น <IMG SRC="TEST.JPG" BORDER=2>
การใช้ VSPACE และ HSPACE เพื่อกำหนดความกว้างของช่องว่างของรูปภาพในแนวตั้งและแนวนอนตามลำดับ
การใช้ HEIGHT กับ WIDTH กำหนดความสูงและความกว้างของรูปภาพ โดยอาจกำหนดเป็นตัวเลข หรือ เป็น % ก้ได้
การซ้อนภาพเป็นพื้นหลัง
<BODY BACKGROUND="TEST1.JPG">
การเชื่อมโยง
-การแปลงข้อความให้เป็นลิงก์
<A HREF="http://...."> ข้อความ </A>
-การแปลงภาพให้เป็นลิงก์
<A HREF="http://...."> <IMG SRC="...."></A>
ในการสร้างตารางนั้นเราสามารถเพิ่มแอตทริบิวต์ของแท็ก <TABLE> , <TR> และ <TD> ได้ดังนี้
1. เพิ่ม BORDER ใน <TABLE> โดยเติมค่าเป็นตัวเลข เพื่อกำหนดขนาดของกรอบนอกของตาราง เช่น <TABLE BORDER=10> เป็นต้น
2. เพิ่ม CELLPADDING กับ CELLSPACING ใน <TABLE> ใช้จัดระยะห่างของเซลล์ต่างๆในตาราง โดยใช้หน่วยเป็นพิกแซลโดยมีรูปแบบต่างกัน คือ
2.1 CELLPADDING ใช้กำหนดระยะห่างระหว่างสิ่งที่อยู่ในเซลล์กับเส้นแบ่งเซล เช่น <TABLE BORDER CELLPADDING=20> เป็นต้น
2.2 CELLSPACING ใช้กำหนดระยะห่างระหว่างช่องของเซลล์มีผลทำให้เส้นแบ่งช่องใหญ่ขึ้น เช่น <TABLE BOREDR CELLSPACING=20>
3. เพิ่ม WIDTH กับ HEIGHT ใน <TABLE> ใช้กำหนดความกว้างและความสูงของตารางตามลำดับ โดยกำหนดเป็นพิกเซลหรือเปอร์เซ็นต์ เช่น <TABLE BORDER WIDTH=50% EIGHT=300> ข้อเสียในการกำหนดเป็นเปอร์เซ็นต์ คือ ไม่แสดงผลใน Netscape Navigator
4. เพิ่ม WIDTH กับ HEIGHT ใน <TD> ให้ผลเช่นเดียวกับใช้ใน <TABLE> แต่แสดงผลจำกัดแค่ช่องและช่องที่เกี่ยวข้อง
5. เพิ่ม ALIGN ใน <TABLE> ใช้จัดตำแหน่งของตาราง คือ left , right , center
6. เพิ่ม ALIGN และ VALIGN ใน <TR>
ALIGN ใช้จัดตำแหน่งข้อความหรือรูปภาพในแถวให้ชิดซ้าย ขวา กลาง ค่าที่กำหนดได้ คือ LEFT , RIGHT , CENTER ส่วน VALIGN ใช้จัดตำแหน่งข้อความหรือภาพในเซลให้ชิดด้านบน ด้านล่าง หรือ อยู่ตรงกลาง ค่าที่กำหนดได้ คือ TOP , BOTTOM , MIDDLE นอกจากนั้นเรายังใช้
ALIGN และ VALIGN ใน <TD> เพื่อกำหนดค่าเฉพาะเซลล์ได้อีกด้วย
7. เพิ่ม ROWSPAN และ COLSPAN ใน <TD> ใช้สำหรับรวมผลเซลที่อยู่ทางขวา หรือ ด้านล่างให้เป็นเซลเดียว ไม่มีเส้นแบ่งเซล ROWSPAN ใช้รวมด้านล่าง ส่วน COLSPAN ใช้รวมทางขวา
เช่น <TABLE BORDER>
<TR>
<TD ROWSPAN=2> ข้อมูลในแถวที่ 1 กับ 2 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลในแถวที่ 1 คอลัมน์ที่ 2 </TD>
<TD> ข้อมูลในแถวที่ 1 คอลัมน์ที่ 3 </TD>
</TR>
<TR>
<TD> ข้อมูลในแถวที่ 2 คอลัมน์ที่ 2 </TD>
<TD> ข้อมูลในแถวที่ 2 คอลัมน์ที่ 3 </TD>
</TR>
<TR>
<TD ROWSPAN=3> ข้อมูลในแถวที่ 2 </TD>
</TR>
</TABLE>
การตกแต่งตารางด้วยภาพและสี
เราสามารถเพิ่มแอตทริบิวต์ ได้ดังนี้
1. เพิ่ม BGCOLOR ใน <TABLE> , <TR> , <TD> ใช้กำหนดสีพื้นหลังของตาราง
2. เพิ่ม BORDERCOLOR ใน <TABLE> , <TR> , <TD> เพื่อกำหนดสีของขอบตาราง
3. เพิ่ม BACKGROUND ใน <TABLE> , <TR> , <TD> เพื่อกำหนดภาพพื้นหลังของตาราง
เช่น
<BODY TEXT=WHITE>
<TABLE BORDER=10 BGCOLOR=BLACK BORDERCOLOR=RED>
<TR BACKGROUND="AAA.JPG">
ข้อควรระวัง ในเว็บเบราเซอร์บางตัวอาจไม่แสดงผลในบางคำสั่งเช่น แสดงใน Netscape Navigator แต่ไม่แสดงใน Microsoft Internet Explorer บางรุ่นเป็นต้น
-การแปลงข้อความให้เป็นลิงก์
<A HREF="http://...."> ข้อความ </A>
-การแปลงภาพให้เป็นลิงก์
<A HREF="http://...."> <IMG SRC="...."></A>
คำสั่งสร้างตาราง
<TABLE>
<TR>
<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 2 </TD>
</TR>
<TR>
<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 2 </TD>
</TR> </TABLE>
<TABLE>
<TR>
<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 2 </TD>
</TR>
<TR>
<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 2 </TD>
</TR> </TABLE>
คำสั่งสร้างตาราง
เราสามารถสร้างตารางเพื่อกำหนดข้อความหรือรูปภาพให้อยู่ในลักษณะที่เป็นระเบียบมากขึ้น โดนมีรูปแบบคำสั่งดังนี้ คือ
<TABLE>
<TR>
<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 2 </TD>
</TR>
<TR>
<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 2 </TD>
</TR> </TABLE>
เราสามารถสร้างตารางเพื่อกำหนดข้อความหรือรูปภาพให้อยู่ในลักษณะที่เป็นระเบียบมากขึ้น โดนมีรูปแบบคำสั่งดังนี้ คือ
<TABLE>
<TR>
<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลแถวที่ 1 คอลัมน์ที่ 2 </TD>
</TR>
<TR>
<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลแถวที่ 2 คอลัมน์ที่ 2 </TD>
</TR> </TABLE>
การปรับรูปแบบของตาราง
ในการสร้างตารางนั้นเราสามารถเพิ่มแอตทริบิวต์ของแท็ก <TABLE> , <TR> และ <TD> ได้ดังนี้
1. เพิ่ม BORDER ใน <TABLE> โดยเติมค่าเป็นตัวเลข เพื่อกำหนดขนาดของกรอบนอกของตาราง เช่น <TABLE BORDER=10> เป็นต้น
2. เพิ่ม CELLPADDING กับ CELLSPACING ใน <TABLE> ใช้จัดระยะห่างของเซลล์ต่างๆในตาราง โดยใช้หน่วยเป็นพิกแซลโดยมีรูปแบบต่างกัน คือ
2.1 CELLPADDING ใช้กำหนดระยะห่างระหว่างสิ่งที่อยู่ในเซลล์กับเส้นแบ่งเซล เช่น <TABLE BORDER CELLPADDING=20> เป็นต้น
2.2 CELLSPACING ใช้กำหนดระยะห่างระหว่างช่องของเซลล์มีผลทำให้เส้นแบ่งช่องใหญ่ขึ้น เช่น <TABLE BOREDR CELLSPACING=20>
3. เพิ่ม WIDTH กับ HEIGHT ใน <TABLE> ใช้กำหนดความกว้างและความสูงของตารางตามลำดับ โดยกำหนดเป็นพิกเซลหรือเปอร์เซ็นต์ เช่น <TABLE BORDER WIDTH=50% EIGHT=300> ข้อเสียในการกำหนดเป็นเปอร์เซ็นต์ คือ ไม่แสดงผลใน Netscape Navigator
4. เพิ่ม WIDTH กับ HEIGHT ใน <TD> ให้ผลเช่นเดียวกับใช้ใน <TABLE> แต่แสดงผลจำกัดแค่ช่องและช่องที่เกี่ยวข้อง
5. เพิ่ม ALIGN ใน <TABLE> ใช้จัดตำแหน่งของตาราง คือ left , right , center
6. เพิ่ม ALIGN และ VALIGN ใน <TR>
ALIGN ใช้จัดตำแหน่งข้อความหรือรูปภาพในแถวให้ชิดซ้าย ขวา กลาง ค่าที่กำหนดได้ คือ LEFT , RIGHT , CENTER ส่วน VALIGN ใช้จัดตำแหน่งข้อความหรือภาพในเซลให้ชิดด้านบน ด้านล่าง หรือ อยู่ตรงกลาง ค่าที่กำหนดได้ คือ TOP , BOTTOM , MIDDLE นอกจากนั้นเรายังใช้
ALIGN และ VALIGN ใน <TD> เพื่อกำหนดค่าเฉพาะเซลล์ได้อีกด้วย
7. เพิ่ม ROWSPAN และ COLSPAN ใน <TD> ใช้สำหรับรวมผลเซลที่อยู่ทางขวา หรือ ด้านล่างให้เป็นเซลเดียว ไม่มีเส้นแบ่งเซล ROWSPAN ใช้รวมด้านล่าง ส่วน COLSPAN ใช้รวมทางขวา
เช่น <TABLE BORDER>
<TR>
<TD ROWSPAN=2> ข้อมูลในแถวที่ 1 กับ 2 คอลัมน์ที่ 1 </TD>
<TD> ข้อมูลในแถวที่ 1 คอลัมน์ที่ 2 </TD>
<TD> ข้อมูลในแถวที่ 1 คอลัมน์ที่ 3 </TD>
</TR>
<TR>
<TD> ข้อมูลในแถวที่ 2 คอลัมน์ที่ 2 </TD>
<TD> ข้อมูลในแถวที่ 2 คอลัมน์ที่ 3 </TD>
</TR>
<TR>
<TD ROWSPAN=3> ข้อมูลในแถวที่ 2 </TD>
</TR>
</TABLE>
การตกแต่งตารางด้วยภาพและสี
เราสามารถเพิ่มแอตทริบิวต์ ได้ดังนี้
1. เพิ่ม BGCOLOR ใน <TABLE> , <TR> , <TD> ใช้กำหนดสีพื้นหลังของตาราง
2. เพิ่ม BORDERCOLOR ใน <TABLE> , <TR> , <TD> เพื่อกำหนดสีของขอบตาราง
3. เพิ่ม BACKGROUND ใน <TABLE> , <TR> , <TD> เพื่อกำหนดภาพพื้นหลังของตาราง
เช่น
<BODY TEXT=WHITE>
<TABLE BORDER=10 BGCOLOR=BLACK BORDERCOLOR=RED>
<TR BACKGROUND="AAA.JPG">
ข้อควรระวัง ในเว็บเบราเซอร์บางตัวอาจไม่แสดงผลในบางคำสั่งเช่น แสดงใน Netscape Navigator แต่ไม่แสดงใน Microsoft Internet Explorer บางรุ่นเป็นต้น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น