คำสั่ง HTMlL เบื้องต้น

สรุปคําสั่ง HTML
คําสั่งพื้นฐาน
< !-- ขอความ --> คําสั่ง หมายเหตุ ใชอธิบายความหมาย ขื่อผูเขียนโปรแกรม และอื่นๆ
<br> คําสั่งขึ้นบรรทัดใหม
<p> ขอความ </p> คําสั่งยอหนาใหม
<hr width = "50%" size = "3"> คําสั่ง ตีเสน, กําหนดขนาดเสน
คําสั่ง เพิ่มชองวาง
<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> , กําหนดจุดเชื่อมชื่อ news สวน "a name" คือตําแหนงที่
<a name ="news"> ลิงคไป (เอกสารเดียวกัน)
<a href ="news.html"> Hot News </a> สรางลิงคไปยังเอกสารชื่อ "news.html"
<a href ="http://www.thai.com"> Thai </a> สรางลิงคไปยังเวปไซทอื่น
<a href ="http://www.thai.com" target = "_blank" > Thai </a> สรางลิงคไปยังเวปไซทอื่น และเปดหนาตางใหม
<a href ="http://www.thai.com"> <img src = "photo.gif"> </a> สรางลิงคโดยใชรูปภาพชื่อ photo.gif เปนตัวเชื่อม
<a href ="mailto:yo@mail.com"> Email </a> สรางลิงคมายังอีเมล
การแสดงผลแบบรายการแบบมีหมายเลขกํากับ
<OL value = "1" > การแสดงผลแบบรายการ ใชคําสั่ง <OL> เปนเริ่มและปดทายดวย
<LI> รายการที่ 1 </OL> สวนคําสั่ง <LI> เปนตําแหนงของรายการที่ตองการ
<LI> รายการที่ 2 นําเสนอ เราสามารถกําหนดใหแสดงผลรายการไดหลายแบบเชน
</OL> เรียงลําดับ 1,2,3... หรือ I,II,III... หรือ A,B,C,... ไดทั้งนี้จะตอง
เพิ่มคําสั่งเขาไปที่ <OL value = "A"> เปนตน
1
การแสดงผลแบบรายการแบบมีสัญลักษณกํากับ
<UL type = "square"> การแสดงผลแบบรายการ ใชคําสั่ง <UL> เปนเริ่มและปดทายดวย
<LI> รายการที่ 1 </UL> สวนคําสั่ง <LI> เปนตําแหนงของรายการ ที่ตองการ
<LI> รายการที่ 2 นําเสนอ เราสามารถกําหนดใหแสดงผลรายการแบบตางๆ
</UL> ดังตอไปนี้
- รูปวงกลมทึบ "disc"
- รูปวงกลมโปรง "circle"
- รูปสี่เหลี่ยม "square"
ทั้งนี้จะตองเพิ่มคําสั่งเขาไปที่ <UL type = "square"> เปนตน
การสรางตาราง
<TABLE BORDER = "2" > การสรางตาราง ใชคําสั่ง <TABLE> เปนเริ่มและปดทายดวย
<CAPTION> การสรางตาราง </CAPTION> </TABLE> สวน BORDER เปนคําสั่งยอยเพือ ่ ใช กําหนดขนาดของ
<TR> <TH> หัวเรื่อง 1 </TH> เสนตาราง ถากําหนด = "0" จะหมายถึงไมมีเสน
<TH> หัวเรื่อง 2 </TH> </TR>
- คําสั่ง <CAPTION> และ< /CAPTION> เปนคําสั่งแสดงขอความ
<TR> <TD> ขอมูล 1 </TD> อธิบายชื่อตาราง
<TD> ขอมูล 2 </TD> </TR> - คําสั่ง <TR> และ< /TR> เปนคําสั่งเพื่อกําหนดแถวในตาราง
</TABLE> - คําสั่ง <TH> และ< /TH> เปนคําสั่งเพื่อกําหนดหัวเรื่อง ผลลัพธ
ที่ไดคือตัวอักษรจะหนากวาปกติ (ดูตัวอยางประกอบ)
- คําสั่ง <TD> และ< /TD> เปนคําสั่งแสดงขอมูลปกติ
ผลลัพธที่ได
การสรางตาราง ความหมายของคําสั่ง Table
- TR หมายถึง Table Row
หัวเรื่อง 1 หัวเรื่อง 2 - TH หมายถึง Table Head
ขอมูล 1 ขอมูล 2 - TD หมายถึง Table Data
ขนาดของตาราง
กําหนดความกวางและความสูงของตาราง การตกแตงตาราง ใชคาํ สั่ง Width และ Height เปนคําสั่งในการ
<TABLE width = "50%" height = "60%" > กําหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เชน กําหนด
<CAPTION> ขนาดของตาราง </CAPTION> Width = "50%" หมายถึง กําหนดความกวางของตารางใหมีขนาด
<TR> <TH> หัวเรื่อง 1 </TH> 50 % เมื่อวัดตามความกวางของจอภาพ เปนตน
โดยปกติเราจะกําหนดอยางใดอยางหนึ่ง เชน <TABLE width =
<TR> <TD> ขอมูล 1 </TD> "50%" >
<TD> ขอมูล 2 </TD> </TR>
</TABLE> คําสั่งเสริมเพิ่มเติม
- rowspan
ผลลัพธที่ได เปนคําสั่งในการกําหนดความสูงของแถวในตาราง โดยใชงาน
การตกแตงตาราง รวมกับคําสั่ง <TD> (ดูภาพทางซายมือประกอบ)
- colspan
หัวเรื่อง 1 หัวเรื่อง 2 เปนคําสั่งในการกําหนดความกวางของคอลัมภในตาราง โดยใชงาน
ขอมูล 1 ขอมูล 2 รวมกับคําสั่ง <TD> (ดูภาพทางซายมือประกอบ)
กําหนดความสูงของแถว (row)
<TABLE width = "50%">
<TR> <TH> หัวเรื่อง 1 </TH>
<TR> <TD> ขอมูล 1 </TD>

<TD rowspan = "2" > ขอมูล 2 </TD> </TR>
<TR> <TD> ขอมูล 3 </TD> </TR>
</TABLE>
2
หัวเรื่อง 1 หัวเรื่อง 2
ขอมูล 1
กําหนดความกวางของคอลัมภ (column)

<TR> <TD colspan = "2" > ขอมูล 3 </TD> </TR>
</TABLE>
ขอมูล 1 ขอมูล 2
ตารางซอนตาราง

</TABLE>
</TABLE>
ขอมูล 3 ขอมูล 4 ขอมูล 5
คําอธิบาย
การทําตารางซอนตาราง มักจะใชในกรณีเพื่อ อธิบายรายละเอียด
เพิ่มเติม ของขอมูล
3
สีกับตาราง
สีฉากหลังของตาราง เราสามารถกําหนดสีของ background ของตารางได โดยสามารถ
<TABLE width = "50%" bgcolor = "red" > กําหนดไดทั้งตาราง หรือ กําหนดเปนแตละชองได
<CAPTION> สีฉากหลังของตาราง </CAPTION>
<TR> <TH> หัวเรื่อง 1 </TH> คําสั่งเสริมเพิ่มเติม
<TH> หัวเรื่อง 2 </TH> </TR> - bgcolor
เปนคําสั่งในการกําหนดสีในตาราง เปนคําสั่งเสริมของคําสั่ง
<TR> <TD> ขอมูล 1 </TD> <Table> และสามารถใชงานรวมกับคําสั่ง <TH> หรือ <TD> ได
<TD> ขอมูล 2 </TD> </TR> ดวย (ดูตัวอยางประกอบ)
</TABLE>
การกําหนดสีสามารถกําหนดเปนรหัสสีได ซึง่ สามารถตรวจสอบได
ผลลัพธที่ได จาก ตารางสี ตัวอยางเชน
<TD bgcolor = " #3232CD" >
สีฉากหลังของตาราง หมายถึงสี Medium Blue เปนตน
กําหนดสีแตละชองในตาราง
<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>
ถาตองการใสสก
ี รอบของตาราง สามารถเพิ่มคํา ดังนี้ <TABLE bgcolor
= "red">
4
แบงพื้นที่จอภาพ
<FRAMESET COLS or ROWS = "80%,*" > การแบงพื้นที่จอภาพ สามารถแบงไดทั้งแถวตั้ง และแนวนอน
<FRAME SRC = "URL" หรือ ไฟลรูปภาพ > สามารถจะแบงเทาไหรก็ได ขึน
้ กับผูเขียน แตอยางไรก็ตาม ควรมี
<FRAME SRC = "URL" หรือ ไฟลรูปภาพ > การกําหนดสัดสวนใหตรงกับขอมูล หรือรูปภาพที่นํามาลงในเวปดวย
...
</FRAMESET>
<FRAMESET> เปนคําสั่งเริม ่ ตนการแบงหนาจอ และปดทายดวย
แบงจอภาพในแนวตั้ง </FRAMESET>
คําสั่งนี้ จะมาแทนทีค
่ ําสั่ง <BODY>
<FRAMESET COLS = "80%,*" >
<FRAME SRC > เปนคําสั่งยอยของ FRAMESET เพื่อกําหนดการ
<FRAME SRC = "main.html" > แสดงผลขอมูลวา จะแสดงเปน HTML อีกไฟล หรือจะใหแสดงเปน
<FRAME SRC = "menu.gif" > รูปภาพก็ได
</FRAMESET> จากตัวอยางดานซาย เรากําหนดขนาดของจอภาพเปนเปอรเซ็นต

80%,* (เครื่องหมาย * หมายถึง ขนาดขอจอภาพที่เหลือ)
นอกจากนี้เรายังสามารถกําหนดเปน pixel ไดดวย เชน 500,100
เปนตน
80% 20%
คําสั่งเสริมเพิ่มเติม
กําหนดตําแหนงขอความตามแนวนอน
คําอธิบาย align = "left"
แบงหนาจอเปน 2 สวน ในแนวตั้ง สวนทางซายมีพื้นที่ 80% ของหนาจอ align = "center"
่ ี่เหลือ (20%) จอทางขวาจะมีรูปภาพชื่อ align = "right"
ทั้งหมด สวนทางขวาคือพื้นทีท
menu.gif
กําหนดตําแหนงขอความตามแนวตั้ง
valign = "top"
แบงจอภาพในแนวนอน valign = "middle"
valign = "bottom"
<FRAMESET ROWS = "80%,*" >
รูปแบบคําสั่ง
<FRAME SRC = "main.html" > <TR ALIGN= "CENTER" >
<FRAME SRC = "menu.gif" > หรือ <TR VALIGN= "TOP" >
</FRAMESET> ตั้งชื่อพื้นที่
หลังจากมีการแบงพื้นที่จอภาพแลว อาจจําเปนที่เราตอง ตั้งชื่อ
พื้นที่ เนื่องจากการสรางจุดลิงคเพื่อใหแสดง ในพื้นทีท
่ ี่ตองการ ดัง
20%
ตัวอยางนี้
80% <FRAME SRC = "right.html" name = "show" >

สรางลิงคใหแสดงในพื้นที่ที่มช
ี อ
ื่ วา show
<a href = "page2.html" target = "show">
แบงหนาจอเปน 2 สวน ในแนวนอน ดานบนพื้นที่ 20% สวนดานลางมี
พื้นที่ 80%
แบงจอภาพในแนวตั้งและแนวนอน
<FRAMESET ROWS = "15%,*" >
<FRAME SRC = "top.html" >
<FRAMESET COLS = "20%,80%" >
<FRAME SRC = "left.html" >

<FRAME SRC = "right.html" >
5
</FRAMESET>
</FRAMESET>
15%
20% 80%
แบงหนาจอทั้งหมดเปน 3 สวน ดานบนพื้นที่ 15% สวนดานลางมีพื้นที่
85% ในพื้นทีด่ า นลางแบงออกเปน 2 สวนดานซาย 20% ดานขวา 80%
(เหมือนกับเวปเพจที่ทา นเห็นอยูนี้)

คำสั่ง HTMlL เบื้องต้น

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

คำสั่ง HTMlL เบื้องต้น

Uploaded by

Copyright:

Available Formats

สรุปคําสั่ง HTML

<TR> <TD> ขอมูล 1 </TD>

<TR> <TD> ขอมูล 1 </TD>

<TR> <TD> ขอมูล 1 </TD>

ขอมูล 3 ขอมูล 4 ขอมูล 5

<TR> <TD bgcolor = "green" > ขอมูล 1 </TD>

</FRAMESET> จากตัวอยางดานซาย เรากําหนดขนาดของจอภาพเปนเปอรเซ็นต

80% <FRAME SRC = "right.html" name = "show" >

<FRAMESET ROWS = "15%,*" >

<FRAME SRC = "top.html" >

<FRAMESET COLS = "20%,80%" >

<FRAME SRC = "left.html" >

You might also like