HTML

   
 

คำสั่งในภาษา HTML

 

 

    คำสั่งพื้นฐาน
< !– ข้อความ –> คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ
<br> คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p> คำสั่งย่อหน้าใหม่
<hr width=”50%” size = “3”> คำสั่ง ตีเส้น, กำหนดขนาดเส้น
&nbsp; คำสั่ง เพิ่มช่องว่าง
<IMG SRC = “PHOTO.GIF”> คำสั่งแสดงรูปภาพชื่อ Photo.gif
<CENTER> ข้อความ </CENTER> คำสั่งจัดให้ข้อความอยู่กึ่งกลาง
<HTML> </HTML> คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม
<HEAD> </HEAD> คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน
<TITLE> </TITLE> คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar
<BODY> </BODY> คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น

 

    รูปแบบตัวอักษร
<font size = “3”> ข้อความ </font> ขนาดตัวอักษร
<font color = “red”> ข้อความ </font> สีตัวอักษร
<font face = “Arial”> ข้อความ </font> รูปแบบตัวอักษร
<besefont size = “2”> ข้อความ </font> กำหนดค่าเริ่มต้นของขนาดตัวอักษร
<b> ข้อความ </b> ตัวอักษรหนา
<i> ข้อความ </i> ตัวอักษรเอน
<u> ข้อความ </u> ขีดเส้นใต้ตัวอักษร
<tt> ข้อความ </tt> ตัวอักษรแบบพิมพ์ดีด
  หมายเหตุ เราสามารถใช้คำสั่งกำหนดรูปแบบตัวอักษร หลายๆรูปแบบได้ เช่น
<font face = “Arial” size = “3” color = “red”> ข้อความ </font> เป็นต้น

 

    จุดเชื่อมโยงข้อมูล
<a href =”#news”> Hot News </a> ,
<a name =”news”>
กำหนดจุดเชื่อมชื่อ news ส่วน “a name” คือตำแหน่งที่ลิงค์ไป (เอกสารเดียวกัน)
<a href =”news.html”> Hot News </a> สร้างลิงค์ไปยังเอกสารชื่อ “news.html”
<a href =”http://www.thai.com”&gt; Thai </a> สร้างลิงค์ไปยังเวปไซท์อื่น
<a href =”http://www.thai.com&#8221; target = “_blank” > Thai </a> สร้างลิงค์ไปยังเวปไซท์อื่น และเปิดหน้าต่างใหม่
<a href =”http://www.thai.com”&gt; <img src = “photo.gif”> </a> สร้างลิงค์โดยใช้รูปภาพชื่อ photo.gif เป็นตัวเชื่อม
<a href =”mailto:yo@mail.com”> Email </a> สร้างลิงค์มายังอีเมล

 

    การแสดงผลแบบรายการแบบมีหมายเลขกำกับ
<OL value = “1” >
    <LI> รายการที่ 1
    <LI> รายการที่ 2
</OL>
 
การแสดงผลแบบรายการ ใช้คำสั่ง <OL> เป็นเริ่มและปิดท้ายด้วย </OL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการได้หลายแบบเช่น เรียงลำดับ 1,2,3… หรือ I,II,III… หรือ A,B,C,… ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <OL value = “A”> เป็นต้น

 

    การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ
<UL type = “square”>
    <LI> รายการที่ 1
    <LI> รายการที่ 2
</UL>
 
การแสดงผลแบบรายการ ใช้คำสั่ง <UL> เป็นเริ่มและปิดท้ายด้วย </UL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการ ที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการแบบต่างๆ ดังต่อไปนี้

– รูปวงกลมทึบ “disc”
– รูปวงกลมโปร่ง “circle”
– รูปสี่เหลี่ยม “square”

ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <UL type = “square”> เป็นต้น

 

    การสร้างตาราง
<TABLE BORDER = “2” >
<CAPTION> การสร้างตาราง </CAPTION>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
</TABLE>

ผลลัพธ์ที่ได้
 

การสร้างตาราง

หัวเรื่อง 1

หัวเรื่อง 2

ข้อมูล 1 ข้อมูล 2
การสร้างตาราง ใช้คำสั่ง <TABLE> เป็นเริ่มและปิดท้ายด้วย </TABLE> ส่วน BORDER เป็นคำสั่งย่อยเพื่อใช้ กำหนดขนาดของเส้นตาราง ถ้ากำหนด = “0” จะหมายถึงไม่มีเส้น

– คำสั่ง <CAPTION> และ< /CAPTION> เป็นคำสั่งแสดงข้อความอธิบายชื่อตาราง
– คำสั่ง <TR> และ< /TR> เป็นคำสั่งเพื่อกำหนดแถวในตาราง
– คำสั่ง <TH> และ< /TH> เป็นคำสั่งเพื่อกำหนดหัวเรื่อง ผลลัพธ์ที่ได้คือตัวอักษรจะหนากว่าปกติ (ดูตัวอย่างประกอบ)
– คำสั่ง <TD> และ< /TD> เป็นคำสั่งแสดงข้อมูลปกติ

ความหมายของคำสั่ง Table
– TR หมายถึง Table Row
– TH หมายถึง Table Head
– TD หมายถึง Table Data
 

 

    ขนาดของตาราง
กำหนดความกว้างและความสูงของตาราง
<TABLE width=”50%” height = “60%” >
<CAPTION> ขนาดของตาราง </CAPTION>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
</TABLE>

ผลลัพธ์ที่ได้
 

การตกแต่งตาราง

หัวเรื่อง 1

หัวเรื่อง 2

ข้อมูล 1 ข้อมูล 2

กำหนดความสูงของแถว (row)
<TABLE width=”50%”>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD rowspan = “2” > ข้อมูล 2 </TD> </TR>
    <TR> <TD> ข้อมูล 3 </TD> </TR>
</TABLE>

ผลลัพธ์ที่ได้

 

หัวเรื่อง 1

หัวเรื่อง 2

ข้อมูล 1 ข้อมูล 2
ข้อมูล 3

กำหนดความกว้างของคอลัมภ์ (column)
<TABLE width=”50%”>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
    <TR> <TD colspan=”2″ > ข้อมูล 3 </TD> </TR>
</TABLE>

ผลลัพธ์ที่ได้

 

หัวเรื่อง 1

หัวเรื่อง 2

ข้อมูล 1 ข้อมูล 2
ข้อมูล 3

ตารางซ้อนตาราง
<TABLE width=”50%”>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
    <TR> <TD> ข้อมูล 3 </TD>
<TABLE width=”50%”>
    <TR> <TD> ข้อมูล 4 </TD>
    <TD> ข้อมูล 5 </TD> </TR>
</TABLE>
</TABLE>

ผลลัพธ์ที่ได้

 

หัวเรื่อง 1

หัวเรื่อง 2

ข้อมูล 1 ข้อมูล 2
ข้อมูล 3
ข้อมูล 4 ข้อมูล 5

คำอธิบาย
การทำตารางซ้อนตาราง มักจะใช้ในกรณีเพื่อ อธิบายรายละเอียดเพิ่มเติม ของข้อมูล

 

การตกแต่งตาราง ใช้คำสั่ง Width และ Height เป็นคำสั่งในการกำหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เช่น กำหนด width=”50%” หมายถึง กำหนดความกว้างของตารางให้มีขนาด 50 % เมื่อวัดตามความกว้างของจอภาพ เป็นต้น

โดยปกติเราจะกำหนดอย่างใดอย่างหนึ่ง เช่น <TABLE width=”50%” >

คำสั่งเสริมเพิ่มเติม
– rowspan
เป็นคำสั่งในการกำหนดความสูงของแถวในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)
– colspan
เป็นคำสั่งในการกำหนดความกว้างของคอลัมภ์ในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)

 

 

    สีกับตาราง
สีฉากหลังของตาราง
<TABLE width=”50%” bgcolor = “red” >
<CAPTION> สีฉากหลังของตาราง </CAPTION>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
</TABLE>

ผลลัพธ์ที่ได้

 

สีฉากหลังของตาราง

หัวเรื่อง 1

หัวเรื่อง 2

ข้อมูล 1 ข้อมูล 2

กำหนดสีแต่ละช่องในตาราง
<TABLE width=”50%”>
    <TR> <TH bgcolor = “brown” > หัวเรื่อง 1 </TH>
    <TH bgcolor = “white”> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD bgcolor = “green” > ข้อมูล 1 </TD>
    <TD bgcolor = “blue” > ข้อมูล 2 </TD> </TR>
</TABLE>

ผลลัพธ์ที่ได้

 

หัวเรื่อง 1

หัวเรื่อง 2

ข้อมูล 1 ข้อมูล 2

คำอธิบาย
ถ้าต้องการใส่สีกรอบของตาราง สามารถเพิ่มคำ ดังนี้ <TABLE bgcolor = “red”>

 

เราสามารถกำหนดสีของ background ของตารางได้ โดยสามารถกำหนดได้ทั้งตาราง หรือ กำหนดเป็นแต่ละช่องได้

คำสั่งเสริมเพิ่มเติม
– bgcolor
เป็นคำสั่งในการกำหนดสีในตาราง เป็นคำสั่งเสริมของคำสั่ง <Table> และสามารถใช้งานร่วมกับคำสั่ง <TH> หรือ <TD> ได้ด้วย (ดูตัวอย่างประกอบ)

การกำหนดสีสามารถกำหนดเป็นรหัสสีได้ ซึ่งสามารถตรวจสอบได้จาก ตารางสี ตัวอย่างเช่น
<TD bgcolor = ” #3232CD” >
หมายถึงสี Medium Bule เป็นต้น

 

 

    การสร้างแบบฟอร์ม
<FORM METHOD = “post/get”
ACTION = “URL”>

    …ข้อมูลของฟอร์ม…

</FORM>

ข้อมูลของฟอร์ม คือส่วนที่สามารถเพิ่มคำสั่งได้หลายรูปแบบ ดูหัวข้อต่อไป

การสร้างแบบฟอร์ม สามารถนำไปประยุกต์ใช้ได้หลายๆอย่าง เช่น การสร้างแบบสอบถาม แบบฟอร์มแสดงความคิดเห็น เป็นต้น ซึ่งการสร้างฟอร์มมักจะต้องใช้คำสั่งที่เรียกว่า “CGI” หรือ javascript ช่วยในการรับและส่งข้อมูล ในที่นี้ขอละไว้ก่อน แต่จะแนะนำ การส่งฟอร์ม ที่ใช้คำสั่งให้ลิงค์กลับมายังอีเมล์ของเรา ผลลัพธ์ที่ได้อาจไม่สวยงามนัก.. แต่ก็พอใช้ได้ (ดูข้อถัดไป)

<FORM> คือคำสังเริ่มการใช้ฟอร์ม และปิดท้ายด้วย </FORM> ส่วนคำสั่ง “METHOD” เป็นคำสั่งที่บอกว่าจะรับ “GET” หรือส่งข้อมูล “POST: ไปที่ไหน โดยมีคำสั่ง “ACTION” เป็นตัวกำหนด

 

    รูปแบบของฟอร์มประเภทต่างๆ
ประเภทกรอบป้อนข้อมูล
<FORM>

<TEXTAREA NAME = “comment” ROWS=”5″ COLS=”60″> </TEXTAREA>

</FORM>

ผลลัพธ์ที่ได้
 

Top of Form

 

Bottom of Form

ประเภทกรอบแบบสอบถาม
<FORM>

Name : <INPUT TYPE=’TEXT’ NAME = “YOURNAME” size=”15″ >

PHONE : <INPUT TYPE=’TEXT’ NAME = “PHONE” size=”15″ >

</FORM>

ผลลัพธ์ที่ได้
 

Top of Form

Name    :
PHONE :

Bottom of Form

ประเภทกรอบ PASSWORD
<FORM>

YOUR Password : <INPUT TYPE=’PASSWORD’ NAME = “CODE” size=”15″ >

</FORM>

ผลลัพธ์ที่ได้
 

Top of Form

Your Password    :

Bottom of Form

ลองกรอกข้อมูลในกรอบดู!

ประเภท Check Box
<FORM>

<INPUT TYPE=’CHECKBOX’ NAME = “ONE” VALUE =”value1″ > Answer 1

<INPUT TYPE=’CHECKBOX’ NAME = “TWO” value=”value2″ > Answer 2

</FORM>

ผลลัพธ์ที่ได้
 

Top of Form

Answer 1 Answer 2

Bottom of Form

ประเภท Radio
<FORM>

<INPUT TYPE=’RADIO’ NAME = “ONE” VALUE =”value1″ > Answer 1

<INPUT TYPE=’RADIO’ NAME = “TWO” value=”value2″ > Answer 2

</FORM>

ผลลัพธ์ที่ได้
 

Top of Form

Answer 1 Answer 2

Bottom of Form

ประเภทตัวเลือก
<FORM>

<SELECT name= “ICECREAM”>
<OPTION SELECTED value=”VANI”> Vanilla
<OPTION value=”CHOC” > Chocolate
<OPTION value=”COFF” > Coffee
<OPTION value=”STRA” > Strawberry
</SELECT>

</FORM>

ผลลัพธ์ที่ได้
 

Top of Form

VanillaChocolateCoffeeStrawberry

Bottom of Form

ประเภท Submit & Reset
<FORM>

ยืนยันการส่งข้อมูล
<INPUT TYPE=’SUBMIT’ VALUE =”Send”>
<INPUT TYPE=’RESET’ VALUE =”Reset”>

</FORM>

ผลลัพธ์ที่ได้
 

Top of Form

ยืนยันการส่งข้อมูล

Bottom of Form

Sumbit เป็นคำสั่งในการส่งข้อมูล
Reset เป็นคำสั่งในการเคลียร์ข้อมูล
 

รูปแบบการสร้างฟอร์ม มีหลายรูปแบบ เราสามารถนำแต่ละรูปแบบผสมผสานกันได้ เช่น การผสมระหว่าง รูปแบบกรอบป้อนข้อมูล กับ กรอบแบบสอบถาม เป็นต้น

อย่างที่กล่าวข้างต้น การนำฟอร์มมาใช้ใน เวปเพจจะต้องมีการนำโปรแกรมช่วยในการส่งข้อมูล ซึ่งอาจเป็น ปัญหายุ่งยากสำหรับมือใหม่ ดังนั้นขอยกตัวอย่างการสร้างฟอร์ม แล้วให้ส่งกลับมายังอีเมลของเรา ดังนี้

ตัวอย่างการสร้างฟอร์มกลับมาอีเมลของเรา

<FORM METHOD = “post”
ACTION = “mailto:sskulrat@yahoo.com”>

Name : <INPUT TYPE=’TEXT’ NAME = “YOURNAME” size=”15″>

PHONE : <INPUT TYPE=’TEXT’ NAME = “PHONE” size=”15″>

<INPUT TYPE=’SUBMIT’ VALUE =”Send”>
<INPUT TYPE=’RESET’ VALUE =”Reset”>

</FORM>

ผลลัพธ์ที่ได้
 

Top of Form

Name    :
PHONE :

Bottom of Form

ขอเชิญลองกรอกข้อมูล แล้วกดปุ่ม Reset ดู

 

    แบ่งพื้นที่จอภาพ
<FRAMESET COLS or ROWS = “80%,*” >
<FRAME SRC = “URL” หรือ ไฟล์รูปภาพ >
<FRAME SRC = “URL” หรือ ไฟล์รูปภาพ >

</FRAMESET>

แบ่งจอภาพในแนวตั้ง

<FRAMESET COLS = “80%,*” >

<FRAME SRC = “main.html” >
<FRAME SRC = “menu.gif” >

</FRAMESET>

 

 

80%

 

 

20%

 

คำอธิบาย
แบ่งหน้าจอเป็น 2 ส่วน ในแนวตั้ง ส่วนทางซ้ายมีพื้นที่ 80% ของหน้าจอทั้งหมด ส่วนทางขวาคือพื้นที่ที่เหลือ (20%) จอทางขวาจะมีรูปภาพชื่อ menu.gif

แบ่งจอภาพในแนวนอน

<FRAMESET ROWS = “80%,*” >

<FRAME SRC = “main.html” >
<FRAME SRC = “menu.gif” >

</FRAMESET>

 

20%

 

80%

 

คำอธิบาย
แบ่งหน้าจอเป็น 2 ส่วน ในแนวนอน ด้านบนพื้นที่ 20% ส่วนด้านล่างมีพื้นที่ 80%

แบ่งจอภาพในแนวตั้งและแนวนอน

<FRAMESET ROWS = “15%,*” >

   <FRAME SRC = “top.html” >

     <FRAMESET COLS = “20%,80%” >

     <FRAME SRC = “left.html” >
     <FRAME SRC = “right.html” >

     </FRAMESET>

</FRAMESET>

 

15%

 

20%

 

80%

คำอธิบาย
แบ่งหน้าจอทั้งหมดเป็น 3 ส่วน ด้านบนพื้นที่ 15% ส่วนด้านล่างมีพื้นที่ 85% ในพื้นที่ด้านล่างแบ่งออกเป็น 2 ส่วนด้านซ้าย 20% ด้านขวา 80% (เหมือนกับเวปเพจที่ท่านเห็นอยู่นี้)
 

การแบ่งพื้นที่จอภาพ สามารถแบ่งได้ทั้งแถวตั้ง และแนวนอน สามารถจะแบ่งเท่าไหร่ก็ได้ ขึ้นกับผู้เขียน แต่อย่างไรก็ตาม ควรมีการกำหนดสัดส่วนให้ตรงกับข้อมูล หรือรูปภาพที่นำมาลงในเวปด้วย…

<FRAMESET> เป็นคำสั่งเริ่มต้นการแบ่งหน้าจอ และปิดท้ายด้วย </FRAMESET>
คำสั่งนี้ จะมาแทนที่คำสั่ง <BODY>

<FRAME SRC > เป็นคำสั่งย่อยของ FRAMESET เพื่อกำหนดการแสดงผลข้อมูลว่า จะแสดงเป็น HTML อีกไฟล์ หรือจะให้แสดงเป็นรูปภาพก็ได้

จากตัวอย่างด้านซ้าย เรากำหนดขนาดของจอภาพเป็นเปอร์เซ็นต์ 80%,* (เครื่องหมาย * หมายถึง ขนาดขอจอภาพที่เหลือ) นอกจากนี้เรายังสามารถกำหนดเป็น pixel ได้ด้วย เช่น 500,100 เป็นต้น

คำสั่งเสริมเพิ่มเติม
กำหนดตำแหน่งข้อความตามแนวนอน
align = “left”
align = “center”
align = “right”

กำหนดตำแหน่งข้อความตามแนวตั้ง
valign=top
valign = “middle”
valign = “bottom”

รูปแบบคำสั่ง
<TR ALIGN= “CENTER” >
หรือ <TR VALIGN= “TOP” >

ตั้งชื่อพื้นที่
หลังจากมีการแบ่งพื้นที่จอภาพแล้ว อาจจำเป็นที่เราต้อง ตั้งชื่อพื้นที่ เนื่องจากการสร้างจุดลิงค์เพื่อให้แสดง ในพื้นที่ที่ต้องการ ดังตัวอย่างนี้

<FRAME SRC = “right.html” name = “show” >
สร้างลิงค์ให้แสดงในพื้นที่ที่มีชื่อว่า show
<a href = “page2.html” target = “show”>

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: