โครงสร้างภาษา HTML
คำสั่งในภาษา HTML จะเรียกว่า แท็ก (Tag) จะเขียนอยู่ในเครื่องหมาย < และ > โดยมีรูปแบบคำสั่งดังนี้
แท็กจะแบ่งได้เป็นสองกลุ่ม คือ แท็กแบบเปิด และแท็กแบบปิด โดยปกติแล้วแท็กของภาษา HTML จะเปิดและปิด โดยมีรูปแบบดังนี้
|
<TAG> .... </TAG>
เช่น <HTML> .... </HTML>,<B> .... </B> |
การปิดแท็กจะใช้เครื่องหมาย /(Slash) เป็นตัวกำหนดในแท็กที่ปิด ส่วนแท็กอีกประเภทหนึ่งจะเป็นแท็กในลักษณะเปิด คือ ไม่ต้องมีแท็กเปิดท้าย เช่น <IMG>,<BR>,<WBR> เป็นต้น
เพื่อความเข้าใจง่ายในการกำหนดโครสร้างภาษา HTML เราจึงควรกำหนดแท็กเปิดและเปิดให้เหมาะสมเพื่อสร้างความสมดุล เช่น เมื่อเราต้องการใช้กำหนดให้ตัวอักษรเป็นตัวหนาโดยใช้แท็ก <B> และให้มีการขีดเส้นใต้โดยใช้แท็ก <U> เราควรที่จะกำหนดการเปิดและปิดแท็กโดยเมื่อขึ้นต้นด้วยแท็ก <B> และตามด้วยแท็ก <U> ควรจะปิดด้วยแท็ก </U> ก่อน แล้วตามด้วยแท็ก </B> ดังนี้
โครงสร้างหลัก
รูปแบบมาตรฐานในการสร้างเวบเพจประกอบด้วยคำสั่งหลักอยู่ 4 คำสั่ง ดังนี้
<HTML> .... </HTML> เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเวบเพจ
<HEAD> .... </HEAD> เป็นคำสั่งในส่วนของการกำหนดส่วนหัวเรื่องของเวบเพจ โดยในคำสั่ง HEAD จะมีคำสั่ง <TITLE> .... </TITLE> อยู่ด้วย ซึ่งทำหน้าที่กำหนดข้อความที่แสดงบน Title Bar โดยสามารถกำหนดความยาวของข้อความได้ 64 ตัวอักษร
<BODY> .... </BODY> เป็นคำสั่งในส่วนเนื้อหาของเวบเพจทั้งหมด
รูปแบบการเขียนมีดังต่อไป
|
<HTML>
<HEAD>
<TITLE> Title Bar </TITLE>
</HEAD>
<BODY>
.
.
.
.
</BODY>
</HTML> |
การจัดรูปแบบเอกสาร
คำสั่งในการกำหนดหัวเรื่อง (Headding)
การกำหนดหัวเรื่องเราจะใช้คำสั่ง Headding <H> เพื่อแสดงอัตราอักษรขนาดใหญ่กว่าปกติ เช่น ชื่อบท, ชื่อหัวข้อ เป็นต้น คำสั่ง heading มีด้วยกัน 6 ระดับ โดยที่ระดับ 1 จะมีขนาดใหญ่สุด และระดับ 6 จะมีขนาดเล็กที่สุด มีรูปแบบคำสั่งดังนี้
|
<H1> .... </H>
<H2> .... </H>
<H3> .... </H>
<H4> .... </H>
<H5> .... </H>
<H6> .... </H> |
ตัวอย่าง head.html
|
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD>
<BODY>
<H1> Heading Levle 1 </H>
<H2> Heading Levle 2 </H>
<H3> Heading Levle 3 </H>
<H4> Heading Levle 4 </H>
<H5> Heading Levle 5 </H>
<H6> Heading Levle 6 </H>
</BOYD>
</HTML> |
คำสั่งขึ้นบรรทัดใหม่ (Line Break)
โดยปกติในการพิมพ์เอกสารทั่ว ๆ ไป เราจะขึ้นบรรทัดใหม่โดยใช้การกด Enter แต่ในการสร้างเอกสาร HTML เวบบราวเซอร์จะถือการเว้นวรรค 1 ช่อง เป็นการตัดคำขึ้นบรรทัดใหม่ แต่ถ้าเราต้องการให้เวบบราวเซอร์ตัดข้อความ ณ ตำแหน่งที่กำหนดเราจะใช้คำสั่ง Line Break <BR> โดยมีรูปแบบดังนี้
ตัวอย่าง break_rule.htm
|
<HTML>
<HEAD><TITLE> Break Rule </TITLE></HEAD>
<BODY>
<P>
คอลัมน์สาระไอทีสำหรับชาวเรือ เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ
<I>(ในย่อหน้าข้างบนนี้ แม้จะมีการกด Enter ขึ้นบรรทัดใหม่ แต่ HTML จะตีความเป็นบรรทัดเดียว)</I>
<P>
อาทิเช่น บทเรียนเริ่มต้นสำหรับผู้ที่ต้องการเรียนรู้ หลักการ และวิธีการใช้งาน <BR>
ศึกษาส่วนประกอบต่าง ๆ ที่มีอยู่ในระบบวินโดว์ วิธีการปรับแต่ง<BR>
วิธีการใช้งาน และเทคนิคต่าง ๆ ทั่วไป<BR>
<I>(ส่วนย่อหน้านี้ใช้คำสั่ง <BR> จึงขึ้นบรรทัดใหม่)</I>
</BOYD>
</HTML> |
คำสั่งยกเลิกการขึ้นบรรทัดใหม่ (No Break Rule)
เมื่อเราต้องการยกเลิกคุณสมบัติการตัดคำของเวบบราว์เซอร์ เราสามารทำได้โดยใช้คำสั่ง <NOBR> โดยมีรูปแบบดังนี้
|
<NOBR>
.... ข้อความ ....
</NOBR>
|
ตัวอย่าง no_break.html
|
<HTML>
<HEAD><TITLE> Break Rule </TITLE></HEAD>
<BODY>
<NOBR>
คอลัมน์สาระไอทีสำหรับชาวเรือ เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ <BR>
อาทิเช่น บทเรียนเริ่มต้นสำหรับผู้ที่ต้องการเรียนรู้ หลักการ และวิธีการใช้งาน
</NOBR>
</BOYD>
</HTML> |
ถ้าเราวิวตัวอย่างข้างต้นดูแล้วย่อเวบบราว์เซอร์ดูจะเห็นได้ว่าบรรทัดแรกจะไม่มีการตัดคำแม้จะเว้นวรรณไว้ จนเวบบราว์เซอร์พบคำสั่ง <BR> จึงทำการตัดคำขึ้นบรรทัดใหม่
คำสั่งการจัดตำแหน่งของข้อความ (Paragraph Break)
เราจะใช้คำสั่ง <P> ในการจัดย่อหน้าของข้อความในเวบเพจ ซึ่งคำสั่ง <P> นั้น จะมี Attributes เป็นคำสั่งเสริมช่วยในการจัดตำแหน่งของย่อหน้าคือ Alignment โดยมีรูปแบบดังนี้
|
<P> .... ข้อความ .... </P> |
|
<P Align = "ตำแหน่ง" > .... ข้อความ .... </P> |
ตำแหน่งที่ใช้ในการจัดย่อหน้ามีด้วยกันสามลักษณะคือ
Left จัดข้อความชิดซ้ายบรรทัด
Center จัดข้อความกึ่งกลางบรรทัด
Right จัดข้อความชิดขวาบรรทัด
โดยปกติค่าเริ่มต้นของ Alignment จะอยู่ที่ Left คือจัดข้อความชิดซ้ายของบรรทัด
ตัวอย่าง paragraph.html
|
<HTML>
<HEAD><TITLE> Paragraph </TITLE></HEAD>
<BODY>
<H4>การจัดย่อหน้าในเวบเพจ</H4><BR>
<P ALIGN="Left">
ข้อความชิดซ้ายบรรทัด
</P>
<P ALIGN="Center">
ข้อความกึ่งกลางบรรทัด
</P>
<P ALIGN="Right">
ข้อความชิดขวาบรรทัด
</P>
</BOYD>
</HTML> |
คำสั่งจัดวางข้อความกึ่งกลางบรรทัด (Center)
ในการจัดวางตำแหน่งของข้อความด้วยภาษา HTML นอกจากจะใช้คำสั่ง <P Align= "ตำแหน่ง"> แล้ว เรายังสามารถกำหนดกลุ่มข้อความหรือรูปภาพให้อยู่กึ่งกลางได้ด้วยคำสั่ง <CENTER> ที่มีรูปแบบกระชับกว่า โดยมีรูปแบบดังนี้
|
<CENTER> .... ข้อความ .... </CENTER> |
ซึ่งข้อความที่ได้จะอยู่กึ่งกลางบรรทัด เหมาะกับการสร้างข้อความที่เป็นหัวเรื่อง
ตัวอย่าง center.html
|
<HTML>
<HEAD><TITLE> Center </TITLE></HEAD>
<BODY>
<H1><CENTER>คอลัมน์สาระไอทีสำหรับชาวเรือ</CENTER></H1>
<H2><CENTER>เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับ</CENTER></H2>
<H3><CENTER>เรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ </CENTER></H3>
</BOYD>
</HTML> |
การตีเส้นแนวนอน (Horizontal Line)
ภาษา HTML มีคำสั่งช่วยในการตีเส้นแนวนอน เพื่อแยกเอกสารออกเป็นส่วน ๆ ให้ง่ายต่อการดูรูปแบบเอกสารมากขึ้น โดยมีรูปแบบดังนี้
สำหรับคำสั่ง <HR> นี้จะไม่มีแท็กปิด เป็นคำสั่งในลักษณะที่เรียกว่าแท็กเปิด ซึ่งถ้าเป็นคำ default จะแสดงเส้นขนาด 2 pixels เต็มจอภาพ แต่คำสั่ง <HR> ยังมี Attributes ช่วยในการกำหนดความหนา, ความยาว, การจัดตำแหน่ง และการกำหนดความทึบของเส้น โดยมีรูปแบบดังนี้
|
<HR Size = "ความหนาของเส้น"
Width = "ความยาวของเส้น"
Align = "ตำแหน่งการจัดวาง"
Noshade>
|
Size เป็นการกำหนดความหนาให้กับเส้น ขนาดปกติ คือ 2 pixels
Width เป็นการกำหนดความยาวให้กับเส้น สามารถกำหนดเป็นทั้ง pixels และ % โดยปกติถ้าไม่กำหนด เส้นจะยาวเต็มจอภาพ
Align เป็นการกำหนดตำแหน่งการจัดวางของเส้น ประกอบด้วย
Left คือ การจัดเส้นชิดซ้ายของบรรทัด
Center คือ การจัดเส้นอยู่กึ่งกลางบรรทัด
Right คือ การจัดเส้นชิดขาวของบรรทัด
Noshade เป็นการกำหนดแสดงเส้นทึบไม่มีการแรงเงาของเส้น
ตัวอย่าง horizontal_line.html
|
<HTML>
<HEAD><TITLE> Horizontal Line </TITLE></HEAD>
<BODY>
เส้นขนาดปกติ
<HR>
เส้นความหนา 5
<HR Size="5">
เส้นความหนา 20
<HR Size="20">
เส้นความยาว 200
<HR Width="200">
เส้นความยาว 50% ของจอภาพ
<HR Width="50%">
เส้นความหนา 20 ความยาว 20%
<HR Szie="20" Width="20%">
เส้นความหนา 10 ความยาว 20% และอยู่ชิดซ้ายของบรรทัด
<HR Szie="10" Width="20%" Align="Left">
เส้นความหนา 10 และแสดงเส้นทึบโดยไม่มีการแรงเงาของเส้น
<HR Szie="10" Noshade>
</BOYD>
</HTML> |
การจัดการตัวอักษร
คำสั่งในการกำหนดแบบตัวอักษร (Font Type)
คำสั่งในการกำหนดตัวอักษรนั้น เราใช้แท็ก <FONT> ซึ่งแท็กนี้สามารถที่จะกำหนดได้ตั้งแต่ แบบตัวอักษร (Font Face), ขนาดของตัวอักษร (Font Size) และสีของตัวอักษร (Font Color)
การกำหนดแบบตัวอักษร หรือที่เรียกว่า ฟอนต์ (Font) โดยปกติค่าเริ่มต้นของเวบบราวเซอร์จะกำหนดเป็นแบบ Time New Roman เพื่อความหลากหลายของรูปแบบตัวอักษรมากกว่า 1 รูปแบบบนจอภาพของบราวเซอร์ แต่เราสามารถใช้คำสั่ง <FONT> ตามด้วย Attributes "FACE" เพื่อกำหนดรูปแบบการแสดงผลภาษาไทยให้กับตัวอักษรของเวบเพจของเราได้ ซึ่งการแสดงผลภาษาไทยนั้นมีฟอนต์ให้เลือกหลายแบบตัวอย่างเช่น AngsanaUPC, CordiaUPC, BrowalliaUPC, MS Sans Serif เป็นต้น แต่สำหรับฟอนต์ที่เหมาะสมกับการแสดงผลภาษาไทยในเวบบราวเซอร์ คือ MS Sans Serif โดยมีรูปแบบดังนี้
|
<FONT Face = "ชื่อฟอนต์"> ... ข้อความ ... </FONT> |
ถ้าต้องการระบุมากกว่า 1 ฟอนต์ ให้กำหนดรูปแบบดังนี้
|
<FONT Face = "ชื่อฟอนต์1",ชื่อฟอนต์2",...> ... ข้อความ ... </FONT> |
ข้อดีของการกำหนดฟอนต์ไว้มากกว่า 1 ฟอนต์ ก็คือ เมื่อเวบบราวเซอร์หาฟอนต์ที่ 1 ไม่เจอก็จะหาฟอนต์ที่ 2 ต่อไปตามลำดับ
ตัวอย่าง font_face.html
|
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD>
<BODY>
<FONT Face="AngsanaUPC">
แบบตัวอักษรแบบ AngsanaUPC
</FONT>
<BR>
<FONT Face="Ms Sans Serif">
แบบตัวอักษรแบบ Ms Sans Serif
</FONT>
<BR>
<FONT Face="Comic Sans MS">
Font Style Comic Sans MS
</FONT>
<BR>
<FONT Face="Bookman Old Style">
Font Style Bookman Old Style
</FONT>
<BR>
</BOYD>
</HTML> |
เราสามารถกำหนดขนาดของตัวอักษรในคำสั่ง <FONT> โดยใช้ Attributes "Size" ในภาษา HTML กำหนดขนาดของตัวอักษรได้ 7 ขนาด โดยใช้ตัวเลข 1-7 เป็นตัวกำหนด ค่าเริ่มต้นจะมีขนาดเป็น 3
|
<FONT Size = "ขนาด"> ... ข้อความ ... </FONT> |
ตัวอย่าง font_size.html
|
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD>
<BODY>
<FONT Size="1">Font Size 1</FONT><BR>
<FONT Size="2">Font Size 2</FONT><BR>
<FONT Size="3">Font Size 3</FONT><BR>
<FONT Size="4">Font Size 4</FONT><BR>
<FONT Size="5">Font Size 5</FONT><BR>
<FONT Size="6">Font Size 6</FONT><BR>
<FONT Size="7">Font Size 7</FONT><BR>
</BOYD>
</HTML> |
การกำหนดสีให้กับตัวอักษรเราใช้ Attributes "Color" ในการกำหนดสีของตัวอักษรทำได้ 2 วิธี
กำหนดจากชื่อของสีมาตรฐาน เป็นการกำหนดจากชื่อสีมาตรฐานโดยตรง เช่น Black, Red เป็นต้น
กำหนดจากรหัสเลขฐาน 16 จะใช้การอ้างอิงเลขฐาน 16 ในระบบของหมายเลขสี RGB (Red, Green, Blue) ซึ่งมีรูปแบบของรหัสสีเป็น #RRGGBB โดยใช้แทนรหัสด้วยเลขฐาน 16 ในช่วง 0, 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ตามลำดับ
โดยมีรูปแบบดังนี้
|
<FONT Color = "ชื่อสีมาตรฐาน"> ... ข้อความ ... </FONT>
<FONT Color = "#RRGGBB"> ... ข้อความ ... </FONT> |
ตัวอย่างสีมาตราฐานในการแสดงผลบนเวบบราวเซอร์ (ในที่นี้ขอใช้ Internet Explorer เป็นหลัก) ทั้งชื่อของสี และรหัสเลขฐาน 16 มีดังนี้
ตัวอย่าง font_color.html
|
<HTML>
<HEAD><TITLE> Font Color</TITLE></HEAD>
<BODY>
<FONT color="Blue">This is Blue Color</FONT><BR>
<FONT color="Green">This is Green Color</FONT><BR>
<FONT color="#FFA500">This is #FFA500</FONT><BR>
</BOYD>
</HTML> |
คำสั่งในการกำหนดลักษณะตัวอักษร (Style)
ในภาษา HTML มีคำสั่งที่ช่วยในการกำหนดลักษณะตัวอักษรให้มีความเด่นชัด เพื่อความเหมาะสมกับงานในลักษณะต่าง ๆ โดยมีรูปแบบต่าง ๆ ดังนี้
การกำหนดตัวอักษรตัวหนา (Bold) ใช้แท็ก <B>
การกำหนดตัวอักษรตัวเอียง (Italic) ใช้แท็ก <I>
การกำหนดขีดเส้นใต้ตัวอักษร (Underline) ใช้แท็ก <U>
การกำหนดตัวอักษรตัวพิมพ์ดีด (Typewriter) ใช้แท็ก <TT>
การกำหนดขีดเส้นพาดทับกลางตัวอักษร (Strikethrough) ใช้แท็ก <S>
การกำหนดตัวอักษรตัวห้อย (Subscript) ใช้แท็ก <SUB>
การกำหนดตัวอักษรตัวยก (Superscript) ใช้แท็ก <SUP>
การกำหนดตัวอักษรตัวโต (Big) ใช้แท็ก <BIG>
การกำหนดตัวอักษรตัวเล็ก (Small) ใช้แท็ก <SAMLL>
|
<B> ... ข้อความ ... </B>
<I> ... ข้อความ ... </I>
<U> ... ข้อความ ... </U>
<TT> ... ข้อความ ... </TT>
<S> ... ข้อความ ... </S>
<SUB> ... ข้อความ ... </SUB>
<SUP> ... ข้อความ ... </SUP>
<BIG> ... ข้อความ ... </BIT>
<SAMLL> ... ข้อความ ... </SAMLL> |
ตัวอย่าง style.html
|
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD>
<BODY>
แบบตัวอักษรปกติ
แบบตัวอักษรหนา <B>Bold</B><BR>
แบบตัวอักษรเอียง <I>Italic</I><BR>
แบบตัวอักษรขีดเส้นใต้ <U>Underline</U><BR>
แบบตัวอักษรตัวพิมพ์ดีด <TT>Typewriter</TT><BR>
แบบตัวอักษรขีดเส้นพาดทับกลางตัวอักษร <S>Strikethrough</S><BR>
แบบตัวอักษรตัวห้อย <SUB>Subscript</SUB><BR>
แบบตัวอักษรตัวยก <SUP>Superscript</SUP><BR>
แบบตัวอักษรตัวโต <BIG>Big</BIG><BR>
แบบตัวอักษรตัวเล็ก <SAMLL>Small</SAMLL>
</BOYD>
</HTML> |
การกำหนดสีพื้นหลัง
การกำหนดสีพื้นหลังของเวบเพจเราสามารถทำได้จากแท็ก <BODY> โดยกำหนดจาก Attributes "BGColor" โดยมีรูปแบบดังนี้
|
กำหนดสีพื้นหลังจากชื่อสีมาตรฐาน
<BODY BGColor = "สีพื้นหลัง">....
</BODY>
กำหนดสีพื้นหลังจากเลขฐาน 16
<BODY BGColor = "#RRGGBB">
....
</BODY> |
ตัวอย่าง bgcolor.html
|
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD>
<!-- BODY BGColor="Yellow" -->
<BODY BGColor="#FFFF00">
คอลัมน์สาระไอทีสำหรับชาวเรือ <BR>
เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ
</BOYD>
</HTML> |
การกำหนดสีให้กับตัวอักษรทั้งเอกสาร
การกำหนดสีให้กับตัวอักษรทั้งเวบเพจเราสามารถทำได้จากแท็ก <BODY> โดยกำหนดจาก Attributes "Text" โดยมีรูปแบบดังนี้
|
กำหนดสีพื้นหลังจากชื่อสีมาตรฐาน
<BODY Text = "สีพื้นหลัง">
....
</BODY>
กำหนดสีพื้นหลังจากเลขฐาน 16
<BODY Text = "#RRGGBB">
....
</BODY> |
ตัวอย่าง body_text.html
|
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD>
<!-- BODY Text="Red" -->
<BODY Text="#FF0000">
คอลัมน์สาระไอทีสำหรับชาวเรือ <BR>
เป็นคอลัมน์ที่รวบรวมบทความเกี่ยวกับเรื่องคอมพิวเตอร์และโปรแกรมใช้งานต่างๆ
</BOYD>
</HTML> |
การกำหนดเครื่องหมายหัวข้อและเลขลำดับ
คำสั่งในการแสดงรายการแบบไม่มีลำดับ (Unorder List)
Unorder List หรือ Bullet List นั้น ในภาษา HTML ได้กำหนดคำสั่งในการอำนวยความสะดวกในการสร้าง Bullet ขึ้นไว้ด้วย เพื่อแสดงเครื่องหมายหน้าหัวข้อเรื่องหรือลำดับของรายการต่าง ๆ โดยไม่มีการเรียงลำดับ โดยมีรูปแบบดังนี้
|
<UL>
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
... ...........
</UL> |
ตัวอย่าง bullet1.html
|
<HTML>
<HEAD><TITLE> List Item </TITLE></HEAD>
<BODY>
<UL>Viewing the Navigator Window
<LI>Window and frames
<LI>Colors and underlining
<LI>Company logo
<LI>Progress bar
<LI>Status message area
</UL>
</BOYD>
</HTML> |
เรายังสามารถระบุชนิดของเครื่องหมายได้ด้วย Attributes "Type" ในแท็ก <UL> หรือ <LI> โดยมีรูปแบบดังนี้
|
<UL Type = "ชนิดของเครื่องหมาย">
<LI Type = "ชนิดของเครื่องหมาย"> |
ชนิดของเครื่องหมายมีด้วยกัน 3 แบบ ดังนี้
ชนิดของเครื่องหมาย สัญญาลักษณ์ที่ปรากฏ
ตัวอย่าง bullet2.html
|
<HTML>
<HEAD><TITLE> List Item </TITLE></HEAD>
<BODY>
<UL Type="Circle">คอลัมน์สาระไอทีสำหรับชาวเรือ
<LI>บทความเกี่ยวกับการออกแบบโปรแกรม
<UL>
<LI Type="Disc">(IT001)
</UL>
<LI>บทความเกี่ยวกับวิทยาการคอมพิวเตอร์เบื้องต้น
<UL>
<LI Type="Disc">(IT002)
</UL>
<LI>บทความเกี่ยวกับโครงสร้าง Software
<UL>
<LI Type="Disc">(IT003)
</UL>
</UL>
</BOYD>
</HTML> |
คำสั่งในการแสดงรายการแบบเป็นลำดับ (Order List)
เราสามารถแสดงรายการแบบเป็นลำดับ คือ Order List หรือ Numer List ได้ โดยการใช้ตัวเลขหรือตัวอักษรเป็นตัวกำหนดแสดงลำดับ โดยมีรูปแบบดังนี้
|
<OL Type = "ชนิดของตัวเลข" Start = "ตัวเลขเริ่มต้น">
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
... ...........
</OL> |
ชนิดของ Type กำหนดเลขลำดับได้ดังนี้
ชนิดของ Type สิ่งที่ปรากฏ
|
|
|
|
A |
แสดงตัวอักษรพิมพ์ใหญ่ (Caplital letters) |
|
a |
แสดงตัวอักษรพิมพ์เล็ก (Small letters) |
|
I |
แสดงตัวเลขโรมันตัวพิมพ์ใหญ่ (Large Roman numerals) |
|
i |
แสดงตัวเลขโรมันตัวพิมพ์เล็ก (Small Roman numerals) |
|
1 |
แสดงตัวเลขอารบิก (Small Roman numerals)
* เป็นค่า deflaut * |
ตัวอย่าง order_list.html
|
<HTML>
<HEAD><TITLE> Order List </TITLE></HEAD>
<BODY>
<OL Type="I">My computer in my dream
<LI>Inter XENON Pentium 4 processor 4.0 GHz
<LI>RDRAM 4 GB
<LI>Harddisk 120 GB
<LI>11X DVD-RW Drive
<LI>Speakers (Labtec) 160 Watt
<LI>Asus GeForce4 128 MB
<LI>Creative Sound Baster 5
<LI>Monitor Sony Wega 20"
</OL>
</BOYD>
</HTML> |
การสร้างตาราง
คำสั่งในการสร้างตาราง (Table)
การสร้างเวบเพจในปัจจุบันมีการนำตารางเข้ามาเกี่ยวข้องกับหลาย ๆ ส่วน ตั้งแต่การสร้างตารางเพื่อแสดงความสัมพันธ์ในลักษณะแถว (Row) และคอมลัมน์ (Column) รวมถึงการแบ่งขอบเขตให้กับข้อความเพื่อการจำกัดและควบคุมข้อความให้อยู่ในส่วนที่เราต้องการ
คำสั่งสำหรับสร้างตารางประกอบด้วยคำสั่งดังนี้
|
Tag |
|
|
<TABLE> ... </TABLE> |
คำสั่งในการสร้างตาราง |
|
<CAPTION> ... </CAPTION> |
คำสั่งในการกำหนดข้อความกำกับตาราง |
|
<TR> ... </TR> |
คำสั่งในการกำหนดแถวของตาราง 1 แถว |
|
<TH> ... </TH> |
คำสั่งในการกำหนดส่วนหัวของตารางแถวแรก |
|
<TD> ... </TD> |
คำสั่งในการกำหนดส่วนของข้อมูลในแถว |
สำหรับโครงสร้างของคำสั่งในการสร้างตารางมีดังนี้
|
<TABLE>
<CAPTION> ข้อความกำกับตาราง </CAPTION>
<TR>
<TH> ข้อความส่วนหัว </TH>
....................
....................
</TR>
<TR>
<TD> ข้อความส่วนของข้อมูล </TD>
........................
........................
</TR>
<TR>
<TD> ข้อความส่วนของข้อมูล </TD>
........................
........................
</TR>
........................
........................
........................
</TABLE> |
ตัวอย่าง table1.html
|
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER>
Example Data
<H2>Report Sale 2001</H2>
<TABLE>
<TR>
<TH>Month</TH>
<TH>Sale A</TH>
<TH>Sale B</TH>
<TH>Sale C</TH>
</TR>
<TR>
<TD>January</TD>
<TD>500</TD>
<TD>800</TD>
<TD>700</TD>
</TR>
<TR>
<TD>February</TD>
<TD>1200</TD>
<TD>1000</TD>
<TD>300</TD>
</TR>
<TR>
<TD>Mar</TD>
<TD>900</TD>
<TD>400</TD>
<TD>600</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML> |
เรายังสามารถใช้ Attributes เพื่อให้เวบบราวเซอร์แสดงตารางให้ชัดเจนยิ่งขึ้น Attributes ต่าง ๆ มีดังนี้
|
|
|
|
|
|
|
|
กำหนดแสดงความหนาของเส้นตาราง มีหน่วยเป็น Pixel |
|
|
กำหนดความสูงของตาราง มีหน่วยเป็น Pixel และ Percent |
|
|
กำหนดความกว้างของตาราง มีหน่วยเป็น Pixel และ Percent |
|
|
กำหนดช่องว่างระหว่างตาราง |
|
|
กำหนดช่องว่างระหว่างบรรทัดของตาราง |
การกำหนดค่าต่าง ๆ ของ Attributes ที่กล่าวมาแล้ว ความแตกต่างของการกำหนดค่าเป็น pixel และเป็น percent นั้นมีความแตกต่างกันดังนี้
พิเซล (Pixel) การกำหนดค่าเป็นแบบพิเซล เมื่อการลดขนาดของเวบบราวเซอร์ตารางจะไม่ลดขนาดตามความกว้าง หรือยาวของเวบบราวเซอร์
เปอร์เซ็นต์ (Percent หรือ %) ถ้ากำหนดค่าในลักษณะของ Percent เมื่อบราวเซอร์มีการลดขนาดลง ขนาดของตารางจะลดสัดส่วนตามขนาดของตัวเวบบราวเซอร์ด้วย
ตัวอย่าง table2.html
|
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER>
Example Data
<H2>Report Sale 2001</H2>
<TABLE Border="3" CellSpacting="5" CellPadding="3">
<TR>
<TH>Month</TH>
<TH>Sale A</TH>
<TH>Sale B</TH>
<TH>Sale C</TH>
</TR>
<TR>
<TD>January</TD>
<TD>500</TD>
<TD>800</TD>
<TD>700</TD>
</TR>
<TR>
<TD>February</TD>
<TD>1200</TD>
<TD>1000</TD>
<TD>300</TD>
</TR>
<TR>
<TD>Mar</TD>
<TD>900</TD>
<TD>400</TD>
<TD>600</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML> |
คำสั่งในการกำหนดสี และการจัดตำแหน่งของข้อมูลในตาราง
ในการสร้างตารางในภาษา HTML มี Attributes ที่ช่วยเพิ่มสีสันและความเหมาะสมให้กับตาราง คือ
Align ใช้กำหนดการจัดตำแหน่งของข้อมูลในตางราง ไม่ว่าจะเป็นข้อความหรือภาพ กำหนดได้ 3 ลักษณะ
Left กำหนดการจัดวางแบบชิดขอบซ้ายของตาราง
Right กำหนดการจัดวางแบบชิดขอบขาวของตาราง
Center กำหนดการจัดวางแบบกึ่งกลางของตาราง
BGColor เป็นการกำหนดพื้นสีภายในตารางที่อยู่ในแถวนั้น
ตัวอย่าง table3.html
|
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER>
<H2>Report Sale 2001</H2>
<TABLE Border="3" CellSpacting="5" CellPadding="3">
<CAPTION Aling="Bottom">
Summation Sale Report
</CAPTION>
<TR Aling="Center" BGColor="Whitegreen">
<TH>Month</TH>
<TH>Sale A</TH>
<TH>Sale B</TH>
<TH>Sale C</TH>
</TR>
<TR Align="Center" BGColor="Yellow">
<TD>January</TD>
<TD>500</TD>
<TD>800</TD>
<TD>700</TD>
</TR>
<TR Align="Center" BGColor="Skyblue">
<TD>February</TD>
<TD>1200</TD>
<TD>1000</TD>
<TD>300</TD>
</TR>
<TR Align="Center" BGColor="Pink">
<TD>Mar</TD>
<TD>900</TD>
<TD>400</TD>
<TD>600</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML> |