คำสั่งในภาษา HTML จะเรียกว่า แท็ก (Tag) จะเขียนอยู่ในเครื่องหมาย < และ > โดยมีรูปแบบคำสั่งดังนี้
<TAG>
เช่น <HTML>,<B>,<U> |
แท็กจะแบ่งได้เป็นสองกลุ่ม คือ แท็กแบบเปิด และแท็กแบบปิด โดยปกติแล้วแท็กของภาษา HTML จะเปิดและปิด โดยมีรูปแบบดังนี้
<TAG> .... </TAG>
เช่น <HTML> .... </HTML>,<B> .... </B> |
การปิดแท็กจะใช้เครื่องหมาย /(Slash) เป็นตัวกำหนดในแท็กที่ปิด ส่วนแท็กอีกประเภทหนึ่งจะเป็นแท็กในลักษณะเปิด คือ ไม่ต้องมีแท็กเปิดท้าย เช่น <IMG>,<BR>,<WBR> เป็นต้น
เพื่อความเข้าใจง่ายในการกำหนดโครสร้างภาษา HTML เราจึงควรกำหนดแท็กเปิดและเปิดให้เหมาะสมเพื่อสร้างความสมดุล เช่น เมื่อเราต้องการใช้กำหนดให้ตัวอักษรเป็นตัวหนาโดยใช้แท็ก <B> และให้มีการขีดเส้นใต้โดยใช้แท็ก <U> เราควรที่จะกำหนดการเปิดและปิดแท็กโดยเมื่อขึ้นต้นด้วยแท็ก <B> และตามด้วยแท็ก <U> ควรจะปิดด้วยแท็ก </U> ก่อน แล้วตามด้วยแท็ก </B> ดังนี้
<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> โดยมีรูปแบบดังนี้
ข้อความ..... <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>
|
สำหรับคำสั่ง <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> |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น