คำสั่งภาษา HTML
.1. โครงสร้าง
<HTML>
<HEAD> ..... </HEAD> แสดงข้อคำสั่งในส่วนหัว
<BODY>.........</BODY> แสดงข้อคำสั่งในส่วนเนื้อความ
</HTML>
2. <TITLE> .......................</TITLE> แสดงข้อความในส่วน TITLE (ส่วนบน)
3. <BR> ขึ้นบรรทัดใหม่
4. <P> เว้นเป็นย่อหน้าใหม่โดยจะเว้นบรรทัดให้ 1 บรรทัดด้วย
<P ALIGN=?> เพิ่มแอตทริบิวต์ ชื่อ ALIGN เพื่อจัดย่อหน้า โดยกำหนดค่าได้ 3 แบบ คือ CENTER (จัดกึ่งกลาง) LEFT (จัดชิดซ้าย) RIGHT (จัดชิดขวา)
5. <BLOCKQUOTE> .................... </BLOCKQUOTE> การใช้แท็ก คำสั่งนี้บางรุ่นจะไม่สามารถใช้ได้
6. <CENTER>..............</CENTER> จัดกึ่งกลาง
7. <PRE>.....</PRE> จัดตามต้นฉบับ คือ พิมพ์อย่างไรปรากฏอย่านั้น
8. <HR> ตีเส้นขั้นหน้า
<HR SIZE=ตัวเลข> แสดงขนาดความหนาบางของเส้น โดยเริ่มจาก 1 บางสุด
<HR WIDTH=ตัวเลขเป็นเปอร์ซ็นต์ %> กำหนดความยาวของเส้นบรรทัด
<HR NOSHADE> เป็นการกำหนดไม่แสดงเส้นแบบมีเงา คือ แสดงสีทึบ
* นอกจากนี้ยังสามารถกำหนด แอตทริบิวต์ ชื่อ ALIGN เพื่อจัดย่อหน้า โดยกำหนดค่าได้ 3 แบบ คือ CENTER (จัดกึ่งกลาง) LEFT (จัดชิดซ้าย) RIGHT (จัดชิดขวา)
<HR SRC="ที่อยู่และชื่อของภาพ"> แสดงเส้นโดยใช้ภาพนั้น
9. <H?> ........</H?> (? แทนตัวเลข 1 - 6) กำหนดขนาดของตัวหัวเรื่อง 1 ใหญ่สุด
10. <B>....</B> แสดงตัวหนา
11. <I>....</I> แสดงตัวเอียง
12. <U>...</U> แสดงตัวอักษรขีดเส้นใต้
* <EM>....</EM> เน้นข้อความ และ <STRONG> ....</STRONG> ตัวเข้ม ทั้งสองคำสั่งนี้บางรุ่นไม่แสดง หรือ แสดงไม่เหมือนกัน
13. <TT>....</TT> ทำให้ข้อความเป็นตัวอักษรเท่ากันหมด ไม่นิยมใช้เพราะมีปัญหามากในการจัดรูปแบบ
14.ชุดคำสั่งเลือกตัวอักษร
14.1 <FONT FACE="ชื่อฟอนต์"> ....</FONT> เป็นการกำหนดรูปแบบอักษรที่ใช้
14.2 <BASEFONT SIZE=ตัวเลข> โดยกำหนดได้ตั้งแต่ 1-7
<FONT SIZE="+/- ตัวเลข"> ...... </FONT> เป็นการกำหนดเพิ่มหรือลดขนาดตัวอักษรจาก BASEFONT ดังนั้นคำสั่งนี้ใช้ร่วมกับ BASEFONT ทั้งนี้ก็แสดงได้แค่ 1 - 7 เท่านั้น
15. คำสั่งการแสดงข้อมูลแบ่งเป็นข้อย่อย
คือ ชุดคำสั่งที่แสดงเนื้อหาเป็นข้อๆหรือส่วนๆ
15.1 <UL>...</UL> สร้างเนื้อหาแบบไม่เรียงลำดับ โดยภายในคำสั่งนี้จะขั้นด้วยคำสั่ง <LI>...</LI> เช่น
<UL>
<LI> ข้อความที่ 1 </LI>
<LI> ข้อความที่ 2 </LI>
</UL>
ในชุดคำสั่งนี้สามารถซ้อน <UL>..<UL>...<UL> .... </UL></UL></UL>ลงไปเพื่อแบ่งย่อยได้
นอกจากนั้นยังแทรก TYPE ไว้ที่ <UL> หรือ <LI> ได้ดังนี้ คือ <UL TYPE=circle> หรือ <LI TYPE=SQUARE> เพื่อเป็นการกำหนด สัญลักษณ์ โดย TYPE ที่แทรกได้ คือ disc เป็นวงกลมทึบ , circle เป็นวงกลมโปร่ง , square เป็นสี่เหลี่ยมทึบ
15.2 <OL> .....</OL> มีวิธีใช้เหมื่อน <UL> โดยแทรก <LI> เป็นตัวขั้น แต่ คำสั่งนี้เป็นการสร้างเนื้อหาแบบเรียงลำดับ คือ มี 1 .. 2... 3... เป็นต้น และสามารถแทรก TYPE ได้ เช่น
TYPE=A แสดงเป็น A B C D ... TYPE=I แสดงเป็น I II III IV...
TYPE=a แสดงเป็น a b c ... TYPE=i แสดงเป็น i ii iii iv ...
และยังสามารถแทรก START=ตัวเลข เพื่อให้การแสดงผลเริ่มที่อันดับตัวเลขที่ต้องการ เช่น ถ้าเริ่มที่ 5 ก็จะแสดงหัวข้อ 5 6 7 ...
16. การใส่สี
16.1 <BODY TEXT="รหัสสี" BGCOLOR="รหัสสี"> เป็นการใส่สีข้อความโดยใช้คำสั่ง TEXT และ สีพื้นหลังโดยใช้คำสั่ง BGCOLOR โดยการใส่ไว้ใน BODY เพื่อแสดงเหมือนกันตลอดทั้ง WEP
16.2 <FONT COLOR="ชื่อสี/รหัสสี"> ............</FONT>เป็นการแสดงสีเฉพาะบางจุด
17. การใส่ภาพ
<IMG SRC="ที่อยู่/ชื่อ">
เช่น <IMG src="//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 กำหนดความสูงและความกว้างของรูปภาพ โดยอาจกำหนดเป็นตัวเลข หรือ เป็น % ก้ได้
18. การซ้อนภาพเป็นพื้นหลัง
<BODY BACKGROUND="TEST1.JPG">
19. การเชื่อมโยง
19.1 การแปลงข้อความให้เป็นลิงก์
<A HREF="http://...."> ข้อความ </A>
19.2 การแปลงภาพให้เป็นลิงก์
<A HREF="http://...."> <IMG SRC="...."></A>
19.3 การสร้างลิงค์ให้มีสีสรร
LINK ใช้กำหนดสีที่ยังไม่ได้ลิงค์
VLINK ใช้กำหนดสีที่ลิงค์แล้ว
ALINK ใช้กำหนดสีที่กำลังลิงค์
เช่น <BODY LINK=WHITE VLINK=GRAY ALINK=RED>
<A HREF="http"> .......</A>
</BODY>
20. คำสั่งสร้างตาราง
<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 บางรุ่นเป็นต้น
คำอธิบายและข้อมูลหัวตาราง
1. ใช้คำสั่ง <CAPTION> ตามด้วยข้อความสำหรับอธิบายตาราง แล้วปิดด้วย </CAPTION>
2. ใช้คำสั่ง <TH> ตามด้วยข้อมูลที่ต้องการจะเป็นหัวตาราง แล้วปิดด้วย </TH>
หมายเหตุ : นอกจากคำสั่งทั้งหมดแล้ว เรายังสามารถสร้างตารางซ้อนตารางได้อีกด้วย