สรุปคำสัง 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"> 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" >
    <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 เป็นต้น

 

    แบ่งพื้นที่จอภาพ

<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">

 

 
;