ข้ามไปที่เนื้อหาหลัก

หน่วยที่ 1 ภาษา HTML

 


             HTML คือ ภาษาที่ใช้ในการเขียนเว็บเพจ ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup หมายถึง วิธีในการเขียนข้อความ language หมายถึงภาษา ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ในการเขียนข้อความ ลงบนเอกสารที่ต่างก็เชื่อมถึงกันใน cyberspace ผ่าน Hyperlink นั่นเอง
             HTML เริ่มขึ้นเมื่อ ปี 1990 เพื่อตอบสนองความต้องการในการสื่อสารแลกเปลี่ยนข้อมูลกันของนักวิทยาศาสตร์ระหว่างสถาบันและมหาวิทยาลัยต่างๆทั่วโลก โดย Tim Berners-Lee นักพัฒนาของ CERN ได้พัฒนาภาษาที่มีรากฐานมาจาก SGML ซึ่งเป็นภาษาที่ซับซ้อนและยากต่อการเรียนรู้ จนมาเป็นภาษาที่ใช้ได้ง่ายและสะดวกในการแลกเปลี่ยนเอกสารทางวิทยาศาสตร์ผ่านการเชื่อมโยงกันด้วยลิ้งในหน้าเอกสาร เมื่อ World Wide Web เป็นที่แแพร่หลาย HTML จึงถูกนำมาใช้จนเกิดการแพร่หลายออกไปยังทั่วโลก จากความง่ายดายในการใช้งาน
             HTML ในปัจจุบันพัฒนามาจนถึง HTML 4.01 และ HTML 5 กำลังจะออกมาในเร็วนี้ นอกจากนี้ยังมีการพัฒนาไปเป็น XHTML ซึ่ง คือ Extended HTML ซึ่งมีความสามารถและมาตรฐานที่รัดกุมกว่าอีกด้วย
โดยอยู่ภายใต้การควบคุมของ W3C (World Wide Web Consortium)


แนะนำก่อนเขียนภาษา HTML

สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ
ก่อนที่จะลงมือเขียนโปรแกรมภาษา HTML เพื่อสร้างเว็บเพจ หรือ โฮมเพจ ได้นั้น ต้อง เช็ค ความพร้อม ของอุปกรณ์ เครื่องมือ สำหรับการ สร้าง ก่อนว่า มีครบหรือไม่
1. เครื่องคอมพิวเตอร์ ขนาดตั้งแต่ 486 หรือ pentium ขึ้นไป
2. หน่วยความจำไม่น้อยกว่า 8 MB
3. พื้นที่ฮาร์ดดิสต์ขนาดไม่น้อยกว่า 20 MB
4. Mouse
5. โปรแกรม Internet Explorer Version 3.0 ขึ้นไป
6. โปรแกรม Netscape Navigator Version 3.0 ขึ้นไป
7. โปรแกรม Notepad


โปรแกรมทุกตัวต้องติดตั้งลงในฮาร์ดดิสต์เรียบร้อยและอยู่ในสภาพที่พร้อมจะใช้งานได้ตลอดเวลา ไฟล์ของโปรแกรม HTML เป็นแท็กซ์ ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htm หรือ .html โดย เมื่อเรา เขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad แล้วเรา จะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น เรา จะไม่สามารถ แสดงผล ได้ ทาง เบราเซอร์ และถ้ามีการแก้ไข หรือ เขียนโปรแกรม เราก็สามารถ ใช้โปรแกรม Notepad นี้เป็นตัวแก้ไขได้เลย


โครงสร้างพื้นฐานของ HTML โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้
<HTML>
<HEAD>
<TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว </TITLE>
</HEAD>
<BODY>
คำสั่งหรือข้อความที่ต้องการให้แสดง
</BODY>
</HTML>
การจัดโครงสร้างแฟ้มเอกสารในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะ ว่าตัวโปรแกรม เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้น


ยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้น

การแสดงผลที่เว็บเบราเซอร์
หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมาย น้อยกว่า < ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้น ๆ เช่น คำสั่ง <BODY>

คำสั่งเริ่มต้นสำหรับ HTML
คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร

คำสั่งเริ่มต้น
รูปแบบ <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal

คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE -->
ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ

ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>

กำหนดข้อความในไตเติลบาร์ รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร

ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ



การเติมสีสันให้เอกสาร
ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ
บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ
สี
รหัสสี
ขาว
#FFFFFF
ดำ
#000000
เทา
#BBBBBB
แดง
#FF0000
เขียว
#00FF00
น้ำเงิน
#0000FF

ในบางครั้งถ้าเราไม่ต้องการใส่รหัสสีเป็นเลขฐานเราก็สามารถใส่ชื่อ สีลงไปได้เลย ตัวอย่างต่อไปนี้ แสดงชื่อ สีที่ Internet Explorer สนับสนุนแต่ Netscape ไม่สนับสนุน

AQUA
BULE
GRAY
LIME
NAVY
PURPLE
SILVER
WHITE (สีขาว)
BLACK
FUCHSIA
GREEN
MAROON
OLTVE
RED
TEAL
YELLOW

สีของพื้นฉากหลัง 
รูปแบบ BGCOLOR=#สีที่ต้องการ
ตัวอย่าง <BODY BGCOLOR="#FF0000"> 
เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY> ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง

สีของตัวอักษรบนเว็บ 
รูปแบบ Text=#รหัสสี
ตัวอย่าง <BODY TEXT="#00FF00">
เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ <BODY> แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY TEXT="#00FF00"> ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด

สีของตัวอักษรเฉพาะที่ 
รูปแบบ <FONT COLOR="#สีที่ต้องการ">...</FONT>
ตัวอย่าง <font color="#FF0000">สีแดง</font>
คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น <FONT COLOR="#FF0000">สีแดง</FONT>ตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที

สีของตัวอักษรที่เป็นจุดคลิกเมาส์
รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"
ตัวอย่าง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22">
กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้
LINK = สีของตัวอักษรก่อนมีการคลิก
ALIGN = สีของตัวอักษรขณะถูกคลิก
VLINK = สีของอักษรหลังจากคลิกแล้ว

ตัวอย่างรหัสสี

Aliceblue
F0F8FF		Antiquewhite
FAEBD7		Aqua
00FFFF		Aquamarine
7FFFD4
Azure
F0FFFF		Beige
F5F5DC		Bisque
FFE4C4		Black
000000
Blanchedalmond
FFEBCD		Blue
0000FF		Blueviolet
8A2BE2		Brown
A52A2A
Burlywood
DEB887		Cadetblue
5F9EA0		Chartreuse
7FFF00		Chocolate
D2691E
Coral
FF7F50		Cornflowerblue
6495ED		Cornsilk
FFF8DC		Crimson
DC143C
Cyan
00FFFF		Darkblue
00008B		Darkcyan
008B8B		Darkgoldenrod
B8860B
Darkgray
A9A9A9		Darkgreen
006400		Darkkhaki
BDB76B		Darkmagenta
8B008B
Darkolivegreen
556B2F		Darkorange
FF8C00		Darkorchid
9932CC		Darkred
8B0000
Darksalmon
E9967A		Darkseagreen
8FBC8F		Darkslateblue
483D8B		Darkslategray
2F4F4F
Darkturquoise
00CED1		Darkviolet
9400D3		deeppink
FF1493		Deepskyblue
00BFFF
Dimgray
696969		Dodgerblue
1E90FF		Firebrick
B22222		Floralwhite
FFFAF0
Forestgreen
228B22		Fuchsia
FF00FF		Gainsboro
DCDCDC		Ghostwhite
F8F8FF
Gold
FFD700		Goldenrod
DAA520		Gray
808080		Green
008000
Greenyellow
ADFF2F		Honeydew
F0FFF0		Hotpink
FF69B4		Indianred
CD5C5C
Indigo
4B0082		Ivory
FFFFF0		Khaki
F0E68C		Lavendar
E6E6FA
Lavenderblush
FFF0F5		Lawngreen
7CFC00		Lemonchiffon
FFFACD		Lightblue
ADD8E6
Lightcoral
F08080		Lightcyan
E0FFFF		Lightgoldenrodyellow
FAFAD2		Lightgreen
90EE90
Lightgrey
D3D3D3		Lightpink
FFB6C1		Lightsalmon
FFA07A		Lightseagreen
20B2AA
Lightskyblue
87CEFA		Lightslategray
778899		Lightsteelblue
B0C4DE		Lightyellow
FFFFE0
Lime
00FF00		Limegreen
32CD32		Linen
FAF0E6		Magenta
FF00FF
Maroon
800000		Mediumauqamarine
66CDAA		Mediumblue
0000CD		Mediumorchid
BA55D3
Mediumpurple
9370D8		Mediumseagreen
3CB371		Mediumslateblue
7B68EE		Mediumspringgreen
00FA9A
Mediumturquoise
48D1CC		Mediumvioletred
C71585		Midnightblue
191970		Mintcream
F5FFFA
Mistyrose
FFE4E1		Moccasin
FFE4B5		Navajowhite
FFDEAD		Navy
000080
Oldlace
FDF5E6		Olive
808000		Olivedrab
688E23		Orange
FFA500
Orangered
FF4500		Orchid
DA70D6		Palegoldenrod
EEE8AA		Palegreen
98FB98
Paleturquoise
AFEEEE		Palevioletred
D87093		Papayawhip
FFEFD5		Peachpuff
FFDAB9
Peru
CD853F		Pink
FFC0CB		Plum
DDA0DD		Powderblue
B0E0E6
Purple
800080		Red
FF0000		Rosybrown
BC8F8F		Royalblue
4169E1
Saddlebrown
8B4513		Salmon
FA8072		Sandybrown
F4A460		Seagreen
2E8B57
Seashell
FFF5EE		Sienna
A0522D		Silver
C0C0C0		Skyblue
87CEEB
Slateblue
6A5ACD		Slategray
708090		Snow
FFFAFA		Springgreen
00FF7F
Steelblue
4682B4		Tan
D2B48C		Teal
008080		Thistle
D8BFD8
Tomato
FF6347		Turquoise
40E0D0		Violet
EE82EE		Wheat
F5DEB3
White
FFFFFF		Whitesmoke
F5F5F5		Yellow
FFFF00		YellowGreen
9ACD32
รูปแบบ ของตัวอักษร
ในบทนี้ เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา ตัวเอน ตัวใหญ่ ตัวเล็ก ซึ่งลักษระต่าง ๆ เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้น

หัวเรื่อง 
รูปแบบ <Hx>ข้อความ</Hx>
ตัวอย่าง <H1>หัวข้อใหญ่สุด</H1>ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง <Hx>....</Hx> 

ขนาดตัวอักษร
รูปแบบ <FONT SIZE=x>ข้อความ</FONT>
ตัวอย่าง <FONT SIZE=2>bcoms.net</FONT>เราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ <FONT SIZE=value> มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7 

ตัวหนา (Bold)
รูปแบบ <B>ข้อความ</B>
ตัวอย่าง <B>bcoms.net</B>จะทำให้ข้อความที่อยู่ใน <B>....</B> มีความหนาเกิดขึ้น เช่น bcoms.net

ตัวเอน (Itatic)
รูปแบบ <I>ข้อความ</I>
ตัวอย่าง <I>bcoms.net</I>ทำให้ข้อความที่อยู่ใน<I>....</I> เกิดเป็นตัวเอนขึ้น เช่น bcoms.net

ตัวขีดเส้นใต้ (Underline) 
รูปแบบ <U>ข้อความ</U>
ตัวอย่าง <U>bcoms.net</U>ทำให้ข้อความที่อยู่ใน <U>.....<U> มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้น เช่น bcoms.net

ตัวอักษรมีขนาดคงที่ (Typewriter text)
รูปแบบ <TT>ข้อมความ</TT>
ตัวอย่าง <TT>bcoms.net</TT>ทำให้ ข้อความ ที่อยู่ใน<TT>.....</TT> มีลักษณะเป็น fixed space เกิดขึ้น เช่น bcoms.net

แบบของตัวอักษร
รูปแบบ <FONT FACE="font name>ข้อความ</FONT>
c <FONT FACE="AngsanaUPC">bcoms.net</FONT>Font name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น <FONT FACE="AngsanaUPC"> bcoms.net</FONT> และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,) 

ขนาด Font ทั้งเอกสาร
รูปแบบ Basefont size="X">
ตัวอย่าง <Basefont size=3>
เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข)

ตัวอักษรแบบพิเศษ 
รูปแบบ
< แทนด้วย &lt;
> แทนด้วย &gt;
& แทนด้วย &amp;
" แทนด้วย &quot;
เว้นวรรค แทนด้วย &nbsp;ตัวอย่างเช่น &quot;bcoms.net&quot; จะเป็น "bcoms.net"



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

การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่

ย่อหน้าใหม่ 
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P> ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>

เส้นคั้น
รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>
เราสามารถกำหนดตำแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้ โดย
โดย X = ค่าต่าง ๆ เหล่านี้
<ALIGN> = CENTER , LEFT , RIGHT
COLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-B
SIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7
WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์
NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบ

การสร้างแบบฟอร์ม
สำหรับฟอร์มใน HTML ถือว่าเป็น สิ่งที่โต้ตอบกับผู้ใช้ ในแบบ interactive คือ เราสามารถ ใช้ฟอร์ม ในการตอบโต้ กับผู้อ่านไซต์ ของเราได้ ทันที เมื่อพูดถึง ฟอร์มก็คง ต้องพูด ถึงคำว่า CGI (Common Gateway Interface) ซึ่งก็คือ โปรแกรม หรือ สคริปท์ตัวหนึ่ง ที่คอยตรวจสอบ และจัดการ กับแบบฟอร์ม รวมทั้ง การประมวลผล ตาม แบบที่เจ้าของ ไซต์ต้องการ โดยมากมัก เขียนขึ้นด้วยภาษา C หรือ Perl แต่ในการใช้ CGI นี้ เป็นเรื่องที่ยุ่งยาก กล่าวคือ ถ้าเราไม่ใช่ ผู้ดูแลระบบ แล้วถือว่ าไม่มีสิทธิ์ ซึ่งก็หมาย ความว่า เราต้อง ตัดคุณสมบัติ แบบ Interactive ออกไป แล้วเรา หันมาใช้ Mailto: แทน ซึ่งเราก็ยัง สามารถที่ จะสร้างฟอร์ม ได้เช่นเดิม หรือไม่ ก็ใช้ภาษ าจาวาสคริปท์ มาช่วย โดยเรา ต้องเขียน สคริปท์ขึ้นมา แล้วปะติด ไปกับไฟล์ HTML การประมวลผล ต่าง ๆ ไม่จำเป็น ต้องส่งไปที่ เซิร์ฟเวอร์ แต่สามารถ ประมวลผล บนเครื่อง ของผู้ชม ไซต์ได้ ทันที แต่ในที่นี้ ผมจะขอกล่าว ในส่วน ของการใช้ mailto:

รูปแบบของฟอร์ม 
รูปแบบ < FORM METHOD="..." ACTION="..." ENCTYPE"..."></FORM>
METHOD=GET/POST โดย GET จะส่งได้ไม่เกิน 255 ตัวอักษร ส่วนใหญ่ใช้ส่งค่าตัวแปรและ URL และ POST จะส่งข้อความไปได้ไม่จำกัด ซึ่งนิยมใช้มากกว่า GET
ACTION="mailto:myaddress@mysite.co.th" ซึ่งเป็นรูปแบบของการส่งข้อมูลจากฟอร์มไปยังเมล์บ็อกซ์ของเรา
ENCTYPE= "application/x-www-form-urlencoded" เป็นการกำหนด รูปแบบการเก็บข้อมูลของฟอร์ม เพื่อที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ จะใส่หรือไม่ใส่ก็ได้ แต่ถ้าใส่ จะทำให้โปรแกรม mailto: สามารถใช้โปรแกรมเมล์ บางโปรแกรมอ่านข้อมูลที่ถูกเก็บในรูปแบบนี้ได้ทันที เช่น
<FORM METHOD=POST ACTION="mailto:info@np.a-net.net.th" ENCTYPE= "application/x-www-form-urlencoded"> </FORM>Tip ถ้าผู้กรอกแบบฟอร์มใช้บราวเซอร์จาก Netscape หัวข้อหรือ Subject ของเมล์ที่ส่งมายัง เมล์บ็อกซ์นั้นจะมีหัวข้อว่า"Form posted from Mozilla" แต่ถ้าเป็นตัวอื่นจะเป็น "Form Response" ถ้าคุณไม่ชอบก็สามารถเปลี่ยนได้ในส่วนของ ACTION ดังนี้
<FORM METHOD=POST ACTION="mailto:email@myaddress.com?subject="Answer from Product Questonaire"> โดยในส่วนของ Subject นั้นสามารถเปลี่ยนได้ตามใจเรา
การสร้างแบบฟอร์ม 
รูปแบบ < INPUT TYPE=TEXT NAME="..." SIZE=n MAXLENGTH=n VALUE="...">
• TYPE=TEXT เป็นการกำหนดค่าให้แสดงตัวรับข้อมูลแบบ TEXT
• NAME="..." ชื่อหัวข้อ เพื่อบอกให้รู้ว่า ค่าที่ได้รับกลับมานั้น เกี่ยวกับอะไร
• SIZE=n เป็นจำนวนขนาดของช่องรับข้อความค่าปกติ 20 ตัวอักษร
• MAXLENGTH=n เป็นจำนวนตัวอักษรที่รับได้สูงสุดในช่องรับนั้น ๆ
• VALUE="..." ข้อความที่อยู่ระหว่างเครื่องหมายคำพูดจะ ปรากฎอยู่ในช่อรับข้อมูลให้โดยอัตโนมัติ
Registration Form
First name :
Last name :
Address :
Tel :
Country :

ช่องป้อนรหัสผ่าน 
รูปแบบ < INPUT TYPE=PASSWORD NAME="..." SIZE=n MAXLENGTH=n VALUE="...">รูปแบบคล้ายกับกับการ INPUT ด้วย TEXT ต่างกันเพียงแค่ เปลี่ยนคำว่า TEXT ให้เป็น PASSWORD เท่านั้น ในช่องที่กรอกรหัสหน้าจอ จะแสดงเป็นสัญลักษณ์ "*" เครืองหมายดอกจันแทน เพื่อป้องกันไม่ให้คนอื่นมองเห็น 
Password :  

ปุ่ม Radio Botton
รูปแบบ <INPUT TYPE=RADIO NAME="..." VALUE="..." CHECKED>ปุ่มเลือกแบบนี้สามารถเลือกได้เพียง ปุ่มเดียวเท่านั้น คำสั่ง CHECKED นั้นมีไว้ เพื่อกำหนด ให้ตัวเลือก ถูกเลือก ไว้ก่อนแล้ว โดยเป็นตัวเลือกที่เราคิดว่าผู้กรอกแบบฟอร์มน่าจะเลือก สามารถกำหนดได้ตำแหน่งเดียว 
 ชาย
 หญิง
 

เช็คบ็อกซ์ 
รูปแบบ < INPUT TYPE=CHECKBOX NAME="..." VALUE="..." CHECKED>ปุ่มเลือก แบบนี้ สามารถเลือก หลายปุ่ม คำสั่ง CHECKED สามารถกำหนด ได้หลายตัว ส่วนการตั้งค่าอื่น ๆ เหมือนแบบ Radio Botton ค่าของ name และ value ไม่มีรูปแบบ กำหนดตายตัว ว่าเป็นแบบใด จะกำหนดname ให้เหมือนกันแต่ value ต่างกันหรือ กำหนด name ต่างกัน ส่วน value เหมือนกัน อย่างไรก็ได้ ขอให้เราเข้าใจและประเมินผล ข้อมูลที่ส่งมาได้เท่านั้นเอง
 คณิตศาสตร์
 ฟิสิกส์
 ชีววิทยา
 เคมี


ตัวรับข้อมูลแบบ TEXTAREA 
รูปแบบ
< TEXTAREA NAME="..." ROWS=n COLS=n WRAP=OFF/VIRTUAL/SOFT/PHYSICAL/HARD >
.........TEXT
.........TEXT
</TEXTAREA> 
เราสามารถกำหนดขนาดของกรอบรับข้อความได้ด้วยตัวเอง
• ROWS=n n หมายถึง จำนวนบรรทัดที่ต้องการ
• COLS=n n หมายถึง จำนวนความกว้างของกรอบรับข้อความ มีหน่วยเป็น 50 ตัวอักษร
• รูปแบบการปัดคำ(Wrap) ปกติไม่ได้ตั้งไว้เราสามารถกำหนดได้ 3 วิธี คือ

1. WRAP=OFF ค่าปกติ ไม่มีการปัดคำขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ จนกว่าผู้กรอกจะกด Enter
2. WRAP=VITUAL หรือ WRAP=SOFT ปัดคำเมื่อสิ้นสุดกรอบข้อความ แต่เป็นการปัดคำแบบหลอก ๆ เฉพาะต่อหน้าผู้กรอกเท่านั้น
3. WRAP=PHYSICAL หรอื WRAP=HARD ปักคำเมื่อสิ้นสุดกรอบรับข้อความ ซึ่งเป็นการปัดจริง ๆ

การใช้งานเบราเซอร์บางรุ่นไม่สนับสนุน VITUAL และ PHYSICAL ฉะนั้นทางแก้คือให้ใช้ SOFT และ HARD จะดีกว่า




การเลือกรายการ (แบบ Drop down menu) 
รูปแบบ
< SELECT NAME="..." >
<OPTION SELECTED>คำอธิบายหัวข้อหรือตัวเลือก
<OPTION >คำอธิบายหัวข้อหรือตัวเลือก
<OPTION >คำอธิบายหัวข้อหรือตัวเลือก
</SELECT> 

• SELECT เป็นค่าปกติที่ใช้
• OPTION เป็นตัวเลือกที่เราต้องการให้ปรากฎ
• SELECTED เป็นตัวเลือกที่ถูกกำหนดเลือกไว้ก่อน มีได้เพียงตัวเดียว
ส่วนเมนูแบบ Scrolling นั้น ำได้โดยการใส่ SIZE=n เข้าไปในส่งนของ <SELECT> ซึ่งค่าของ SIZE=n นั้นจะใส่เท่าไรก็ได้ เช่น ถ้าคุณมีตัวเลือก 5 ตัว แต่ใส่ SIZE=2 คุณก็สามารถเห็นได้แค่ 2 บรรทัด เท่านั้น SIZE จะมีค่ามากน้อยขึ้นอยู่กับ OPTION ก็ได้ แล้วแต่ความสวยงามของฟอร์ม สำหรับเมนูแบบนี้ มักใช้กับหัวข้อที่มีตัวเลือกไม่มากนัก



ปุ่มยกเลิก และ ตกลง 
รูปแบบ
< INPUT TYPE=SUBMIT VALUE="..." >
< INPUT TYPE=RESET VALUE="..." > 

• Submit มีหน้าที่ไว้ส่งแบบฟอร์มกลับไปยังเจ้าของฟอร์ม
• Reset มีไว้สำหรับเคลียร์ค่าฟอร์มทั้งหมดให้กลับอยู่ในรูปแบบเดิมก่อนมีการกรอก
• Vaule เป็นการกำหนดคำอธิบายปุ่มแทนค่าปกติคือ Submit Query กับ Reset จะมีหรือไม่มีก็ได้

  





การแสดงผลแบบรายการ
ในการแสดงข้อมูลบนเว็บเพจนอกจากการแสดงผลแบบปกติทั่วไปแล้วบางครั้งเราอาจมีความจำเป็นต้องจัด รูปการแสดงผลให้เป็นแบบของ รายการ(list) คือ มีการ แสดงข้อมูลในลักษณะที่เป็นหัวข้อซึ่งอาจ มีคำอธิบายหรือ ไม่มีก็ได้ การแสดงข้อมูลแบบรายการจะมีรายการแบบลำดับ (ใช้หมายเลข กำกับ) หรือ รายการแบบไม่มี ลำดับ(ใช้สัญลักษณ์ กำกับ) แต่ไม่ว่า จะเลือกให้มีการ แสดงผลรายการ แบบใด ก็ตามทั้ง 2 ลักษณะ ก็มีลักษณะ การทำงาน ที่เหมือนกัน

รายการแบบใช้สัญลักษณ์กำกับ (Bullet lists)
รูปแบบ
<UL> ตัวเปิด
<LI> ข้อมูลที่นำมาแสดง
<LI> ข้อมูลที่นำมาแสดง
</UL> ตัวปิด เป็นการแสดงผลโดยใช้สัญลักษณ์ในการกำกับรายการต่าง ๆ และเราสามารถกำหนดลักษณะของสัญลักษณ์ได้โดยใช้คำสั่ง Type=N ซึ่ง N=circle=วงกลม,disc=วงกลมทึบ หรือ square=สี่เหลี่ยม โดยอยู่ในคำสั่ง ของ <UL> ถ้าต้องการ ให้สัญลักษณ์ เหมือนกัน ทุกรายการ แต่ ถ้าต้องการ ให้แต่ละรายการ ไม่เหมือนกันให้ใส่ในส่วนของ <LI> เช่น 
<UL>
<LI Type=disc>รายการที่ 1
<LI Type=circle>รายการที่ 2
<LI Type=square>รายการที่ 3
</UL>
เว็บเบราเซอร์ จะแสดง ออกมา เป็น
  • รายการที่ 1
  • รายการที่ 2
  • รายการที่ 3
รายการแบบใช้ตัวเลขกำกับ (Numbered lists) 
รูปแบบ
<OL> ตัวเปิด
<LI> ข้อมูลที่นำมาแสดง
<LI> ข้อมูลที่นำมาแสดง
</OL> ตัวปิด เป็นการกำหนดรายการโดยใช้ตัวเลขกำกับเช่น 1 หรือ i และเราสามารถกำหนดค่าเริ่มต้นไว้ที่ <OL> โดยใส่ค่า START=n โดย n= ตัวเลขที่ต้องการเริ่ม และ TYPE=n โดย n= a , A , i , I ซึ่งเป็นชนิดของค่าเริ่มต้น ตามตัวอย่างจะเริ่ม ต้นที่ 3 ชนิดเป็น a เช่น
<OL START=3 TYPE=a>
<LI>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>
เว็บเบราเซอร์ จะแสดง ออกมาเป็น
  1. รายการที่ 1
  2. รายการที่ 2
  3. รายการที่ 3
เรายังสามารถใช้คำสั่ง TYPE=n ในส่วนของ <LI> ได้ แต่ค่าเริ่มต้นต้องเป็นไปตามค่าดังกล่าวข้างต้นให้สังเกตตามตัวอย่าง <OL>
<LI TYPE=1>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>

<OL> <LI TYPE=a>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>

เว็บเบราเซอร์ จะแสดง ออกมา เป็น
  1. รายการที่ 1
  2. รายการที่ 2
  3. รายการที่ 3
  1. รายการที่ 1
  2. รายการที่ 2
  3. รายการที่ 3
รายการแบบกลุ่ม (Preformatted Text)
รูปแบบ <PRE>....</PRE>การใช้ คำสั่งนี้ไม่สามารถใช้กับภาษาไทยได้ ใช้ได้แต่ภาษาอังกฤษอย่างเดียวข้อความที่อยู่ภายใน คำสั่ง จะมีขนาดเท่ากัน ทุกตัว แสดงข้อมูลที่อยู่ในรูปของตารางหรือรายงานแผนผังอย่างง่าย ๆ
  --------------------------------------------------------
  Date                   Time         Note
  --------------------------------------------------------
    20                     08.52          -
    25                     09.50          -
    26                     10.00          -
    28                     12.00          -
  ---------------------------------------------------------
รายการแบบ Extended Quotations
รูปแบบ <BLOCKQUOTE>......</BLOCKQUOTE> คำสั่งนี้สามารถแก้ไขปัญหาการใช้ภาษาไทย ได้การแสดงผลข้อความจะเยื้องขวาและจัดข้อความให้ตัวอักษรตัวแรก ของบรรทัดเริ่มที่ตำแหน่งเดียวกันเช่น
<BLOCKQUOTE> <P>Omit needless world.</P> <P>Vigorous writeing is concise.A sentence should contain no annecessary words.</P> ------Willian Strunk,------- </BLOCKQUOTE>

เว็บเบราเซอร์ จะแสดงผลเป็น
Omit needless world.
Vigorous writeing is concise.A sentence should contain no annecessary words.
------Willian Strunk,------- 

การแสดงผลแบบ Address 
รูปแบบ <ADDRESS>....</ADDRESS>ใช้เมื่อ ต้องการ จะพิมพ์ ที่อยู่ของเราเพื่อให้ผู้ที่เข้ามาใช้เว็บเพจสามารถติดต่อกับเราได้ รูปแบบตัวอักษรเป็นตัวเอน เช่น 
การใส่รูปภาพลงในเว็บเพจ
เมื่อเริ่ม เข้าไป ยังโฮมเพจ ของ เว็บไซต์ แต่ละแห่ง บนอินเตอร์เนต สิ่งแรก ที่มัก เป็นที่ ติดตา ของผู้ ใช้ บริการ ก็คือ การที่ แต่ละ โฮมเพจ จะมี รูปภาพ สวย ๆ แสดง ออกมา มีการ จัดรูปภาพ และข้อความ ที่เป็น ระเบียบ ทำให้อ่าน ง่าย เข้าใจ เนื้อหา ที่ต้องการ ได้อย่าง รวดเร็ว

ก่อนที่ เราจะ มารู้ ถึงคำสั่ง ในการ ใส่รูปภาพ ลงใน เว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา จะนำมา ใส่ ใน เวบเพจ เสียก่อน รูปภาพ ที่จะ นำมา ใช้ใส่ ลง ในเวบเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF และ JPG ไฟล์

รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์ ชนิดบิตแมป (Bitmap) เป็นเทคนิค การเก็บภาพ โดยให้ จุดสี(pixet) ต่าง ๆ เรียง ต่อกัน จนเกิด เป็นภาพ ไฟล์ GIF นี้ ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน ปัจจุบันมี โปรแกรม สำหรับทำ หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนำ ภาพมา แสดง ทำให้เกิด เป็นภาพ เคลื่อนไหวขึ้น

ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group
เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นำเอา ข้อมูล ส่วนที่ ไม่สำคัญ ออกไป แล้วทำการ บีบอัด ข้อมูล ในอัตรา ส่วน 10:1 โดยขนาด ของไฟล์ ที่เรา นำมา ใช้งาน นั้น อาจมีขนาด เหลือเพียง 10 - 30 % ของขนาดไฟล์ ก่อนจะมีการ บีบ ย่อ ข้อมูล ขนาดของ การบีบ ข้อมูล มีได้ 3 ระดับ (Hight,Middle,Low Compression) ไฟล์ที่ มีการ บีบย่อ ข้อมูล มากที่สุด จะได้ ไฟล์ที่มีขนาด เล็กที่สุด แต่คุณภาพ ก็ลดลง ตาม ไปด้วย หากต้องการ ภาพที่มี คุณภาพดี ที่สุด ขนาดของ ไฟล์ก็จะ ใหญ่ ที่สุดเช่นกัน

การใส่รูปภาพลงในเว็บเพจ
รูปแบบ <IMG ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n HSPACE=n VSPACE=n SRC=address ALT=text>ALIGN=align-type(ตำแหน่ง) เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั้นจะ อยู่ ที่ตำแหน่ง ส่วนล่าง ของภาพ ทางขวา มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่าง ๆ เหล่านี้
LEFT = วางภาพที่ตำแหน่งทางซ้าย
RIGHT = วางภาพที่ตำหน่งทางขวา
TOP = วางภาพ ที่ตำแหน่ง ด้านบน
MIDDLE = วางภาพ ที่ตำหน่ง กึ่งกลาง
BOTTOM= วางภาพ ที่ตำแหน่ง ด้านล่าง
BORDER=n เป็นการ กำหนด กรอบให้ รูปภาพ n มีค่ามาก กรอบจะ มีความหนา มากขึ้น
HEIGHT=n เป็นการ กำหนด ความสูง ของภาพ
WIDTH=n เป็นการ กำหนด ความกว้าง ของภาพ ถ้าต้องการ ให้ภาพได้ สัดส่วน ให้กำหนด เป็นเปอร์เซนต์ โดยไม่ จำกัด ความสูง
VSPACE=n กำหนด ระยะ ห่างบน ล่างของ ภาพ
HSPACE=n กำหนด ระยะ ห่าง ซ้าย - ขวา ของภาพ
SRC =ใส่รูปภาพที่ต้องการลงไป
ALT =text ใส่ข้อ ความ เพื่อเป็น คำอธิบาย รูปภาพ ที่นำมาวาง สำหรับ ผู้ใช้ อินเตอร์เนต แบบเท็กซ์
ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง <CENTER>...<CENTER>

การแสดงภาพฉากหลัง
รูปแบบ BACKGROUND="picture"
กำหนด แอตทริบิวต์ BACKGROUND="picture" ในคำสั่งของ <BODY> เช่น <BODY BACKGROUND="hot.gif">



การเชื่อมโยงข้อมูล (Link)
เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการเชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน

ข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา) แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่ มีการเชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่งของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น

ประเภทการเชื่อมโยง- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail

การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>

การเชื่อมโยงข้อมูลนอกเว็บไซต์ รูปแบบ <A HREF="้http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="้http://www.bcoms.net">บีคอม</A>*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a href="http://www.driverzone.com" target="_blank"> Driver Zone </a>

การเชื่อมโยงข้อมูล FTP 
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>

การเชื่อมโยงข้อมูล E-Mail 
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>



การสร้างตาราง
การสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา

โครงสร้างตาราง
<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE>
คำสั่ง
คุณสมบัติ
<TABLE>...</TABLE>เป็นคำสั่งเปิดปิดตาราง
<TR>...</TR>ตารางตามแนวนอน เป็นการกำหนดแถวในตาราง
<TH>...</TH>หัวข้อ ของ ตาราง ข้อความ ที่อยู่ใน คำสั่ง จะถูก จัดให้เป็น ตัวหนา และกึ่งกลาง โดย อัตโนมัติ
<TD>...</TD>เป็นราย ละเอียด ของตาราง เป็นการ กำหนดจำนวน คอร์ลัม ของตาราง

คุณสมบัติของตาราง 
<TABLE>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDER=n
CELLPADDING=n
CELLSPACING=n
WIDTH=n
HEIGHT=n

โดย 
ALIGNกำหนด ตำแหน่งตาราง โดย
LEFT=กำหนดตารางให้อยู่ทางซ้าย
RIGHT=กำหนดตารางให้อยู่ทางขวา
BACKGROUNDใส่ภาพกรฟิก เป็นพื้นหลังตาราง url เป็น ตำแหน่ง ภาพ
BGCOLORกำหนดสีให้ตาราง
BORDERเส้นขอบ ตาราง n เป็นค่า ความหนาของ ขอบตาราง
BORDERCOLORกำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER
CELLPADDINGกำหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง
CELLSPACINGกำหนดขนาดของเส้นตาราง
WIDTHกำหนดความกว้างของตาราง เป็นตัวเลขและเป็น %
HEIGHTกำหนดความสูงของตารางเป็นตัวเลขและเป็น %

<TR>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
VALIGN=align-type

โดย
ALIGNกำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUNDใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLORกำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLORกำหนดสีให้ขอบตาราง
VALIGNจัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง
<TH>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type
โดย
ALIGNกำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUNDใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLORกำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLORกำหนดสีให้ขอบตาราง
COLSPANปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPANปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGNจัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง
<TD>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type
โดย
ALIGNกำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUNDใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLORกำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLORกำหนดสีให้ขอบตาราง
COLSPANปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPANปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGNจัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง
ตารางซ้อนตาราง
มีอยู่ บ่อยครั้ง ที่เรา จำเป็น ที่จะต้อง สร้างตาราง ให้ มีลักษณะ ของตาราง ทับซ้อน กันได้ เพื่อ ผล ทางการ แสดงผล ข้อมูล ข้อมูล ให้แบบ ละเอียด ของข้อมูล ได้มาก ที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด <TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>.....</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ เช่น 
AB
CD
E

ซึ่งมีโคดดังนี้
<HTML>
<HEAD><TITLE>Table with and Neted tables</HEAD></TITLE>
<BODY>
<H1>Table with and Neted tables</H1>
<TABLE BORDER WIDTH=50%>
<TR><TD>A</TD><TD>B</TR></TR>
<TR><TD><TABLE BORDER WIDTH=100%>
<TR><TD>C</TD><TD>D</TR></TR>
</TABLE><TD>
<TD>E</TD></TR>
</TABLE >
</BODY>
</HTML>

การใส่รูปภาพลงในตารางเรา สามารถ นำรูปภาพ ที่มี อยู่บรรจุ ลงใน ตาราง ที่สร้าง ขึ้นได้ โดย การ บรรจุคำสั่ง สำหรับการ แสดงรูปภาพ <IMG SRC=รูปภาพ>เข้าไป ในส่วน หนึ่งของ ตาราง เช่น

<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="108" HEIGHT="108"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="20" HEIGHT="20"></TD>
<TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="200" HEIGHT="44"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="50" HEIGHT="50"></TD>
<TR>
</TABLE>

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

<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="80" HEIGHT="80"></TD>
<TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="80" HEIGHT="80"></TD>
<TR>
</TABLE>

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

<table border=2 cellpadding=5 cellspacing=5 width="50%">
<tbody>
<tr>
<td width="50%"><a href="../index.asp"><img height=20 src="34.gif" width=20 border=0></a></td>
<td width="50%"><a href="../index.asp">กลับไปหน้าแรก</a></td>
</tr>
</tbody>
</table>

สร้างเสียงดนตรีบนเว็บเพจ
แบบ Background Sound 
รูปแบบ <BGSOUND SRC="......." LOOP=n>
เป็นการใส่เสียงเพลง ทำเป็น Background ให้กับโฮมเพจ เมื่อผู้เยี่ยมชมเปิดเข้ามา มันจะทำการ โหลดเพลง ให้โดย อัตโนมัติ โดย
• BGSOUND เป็นรูปแบบการใส่เสียงเพลงของ Microsoft Internet Explorer
• SRC ใส่ ตำแหน่ง ที่อยู่ ของไฟล์เสียง เพลงที่ต้องการ
• LOOP จำนวนรอบที่ต้องการให้เล่น ถ้าต้องการให้เล่นไปเรื่อย ๆ ให้ใส่ Infinite
ตัวอย่าง <BGSOUND SRC="sound.mid" LOOP=5> 

แบบ EMBED 
รูปแบบ <EMBED SRC="......" HIDDEN=TRUE HIGHT=n WIDTH=n CONTROLS=COLSOLE/SMALLCONSOLE AUTOSTART=TRUE LOOP=TRUE/n>
เป็นการใส่เสียงเพลง ทำเป็น background ให้กับโฮมเพจของ Netscape Navigator โดย
• EMBED เป็นรูปแบบการใส่เสียงเพลงของ Netscape Navigator
• SRC ใส่ ตำแหน่ง ที่อยู่ ของไฟล์เสียง เพลงที่ต้องการ
• HIDDEN เป็นการซ้อนปุ่มควบคุมการเล่นเพลง ถ้าไม่ต้องการก็ไม่ต้องใส่เข้าไปเลย เมื่อใส่คำสั่งนี้แล้ว คำสั่งอื่นคือ hight,width,controls ก็ไม่ต้องใส่เข้าไป
• HIGHT เป็นการกำหนดความสูงให้กับแผงควบคุม
• WIDTH เป็นการกำหนดความกว้างให้แผงควบคุม
• CONTROLS กำหนดรูปแบบแผงควบคุม โดย smallconsole เป็นแบบอย่างย่อ ส่วน console เป็นเต็มรูปแบบ
• - AUTOSTART กำหนดการเล่นเพลงโดยอัตโนมัติ (TRUE) ถ้าไม่ต้องการให้ ลบทิ้งไปได้เลย
• LOOP จำนวนรอบที่ต้องการให้เล่น ถ้าต้องการให้เล่นไปเรื่อย ๆ ให้ใส่ TRUE แต่ถ้าต้องการ กำหนดจำนวนรอบก็ใส่เป็นตัวเลขเข้าไป เมื่อไม่ต้องการไม่ให้วนให้ใส่ FALSE (ไม่จำเป็นต้องใส่ก็ได้ เพราะค่าปกติเป็น FALSE อยู่แล้ว)
ตัวอย่าง
<EMBED SRC="sound.mid" HIGHT=60 WIDTH=144 CONTROLS=COLSOLE AUTOSTART=TRUE LOOP=TRUE>

แบบกำหนดตัวเชื่อม 
รูปแบบ < A HREF="......">คำอธิบาย</A>
เป็นการใส่เพลงโดยการกำหนดตัวเชื่อม ในช่องว่าง ๆให้ใส่ตำแหน่งไฟล์เสียง ลงไป ส่วนตรง "คำอธิบาย" ให้ใส่ข้อความที่สื่อความหมายให้รู้ว่า ตัวเชื่อมนี้ เป็นไฟล์เพลง เช่น "เพลงแสนสนุก"
ตัวอย่าง < A HREF="sound.mid"> ฟังเพลงกดตรงนี้จ้า</A> 
แบบ META 
รูปแบบ < META HTTP-EQUIV="Refresh" CONTENT="1;URL=........">
ใช้คำสั่ง meta เพื่อเป็นการโหลดไฟล์ออดิโอและ เล่นเพลงนั้น ๆ โดยอัตโนมัติ ทันทีเมื่อเว็บเพจถูกโหลดขึ้นมา ใช้ได้ทั้ง IE และ NS โดย
• คำสั่ง <META> ใส่อยู่ระหว่าง คำสั่ง <HEAD>......</HEAD>
• HTTP-EQUIV="Refresh" กำหนดการโหลดไฟล์เพลงโดยอัตโนมัติ
• CONTENT="1;URL=...." เป็นการกำหนดเวลาที่จะโหลดเพลงเมื่อเว็บเพจถูกโหลดขึ้นมา โดย URL เป็นชื่อเพลงที่ต้องการให้โหลด เช่น
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="1;URL=sound.mid">
</HEAD>

ใส่ไฟล์วีดิโอให้เว็บเพจ(IE)
รูปแบบ <IMG DYNSRC="....." SRC="......" ALT="......" LOOP=n START=FILEOPEN/MOUSEOVER CONTROLS>เป็นรูปแบบการใส่ไฟล์วีดิโอของ Internet Explorer โดยมีลักษณะคำสั่งดังนี้ 
• DYNSRC="......" ให้ใส่ชื่อไฟล์วีดิโอลงไป เช่น video.avi
• SRC="......" ให้ใส่ไฟล์รูปภาพ ไว้ เป็นตัวแทน ไฟล์วีดิโอนั้น ๆ เมื่อบราวเซอร์ ผู้ใช้ไม่สนันสนุน
• ALT="......" ใส่ข้อความใด ๆ ก็ได้ลงไปเพื่อ ให้ผู้ใช้ที่ ไม่สามารถดูวีดิโอ สามารถรู้ข้อมูลได้
• LOOP=n กำหนดจำนวนครั้งที่จะให้วีดิโอเล่น ใส่เป็นตัวเลขหรือ infinite ก็ได้
• START=FILEOPEN/MOUSEOVER โดย fileopen เป็นการกำหนด ให้เริ่มเล่นทันที ที่ไล์วีดีโอโหลดเสร็จ (ปกติแล้ววีดิโอจะถูกเล่น ทันทีที่ดาวน์โหลดเสร็จ ดังนั้น -STRAT=FILEOPEN จึงไม่ต้องใส่ก็ได้) mouseover เป็นการกำหนด ให้เล่นวีดิโอ เมื่อเอาเมาส์ไปวางบนวีดีโอนั้น ๆ 
ตัวอย่าง
< IMG DYNSRC="SPORT.AVI" SRC=PICTURE.GIF ALT="ทดสอบการใช้ไฟล์วีดีโอ(IE)" LOOP="2" >

ใส่ไฟล์วีดิโอให้เว็บเพจ(NS) 
รูปแบบ
< EMBED SRC="....." LOOP="TRUE/FALSE WIDTH=pixels HEIGHT=pixels ALIGN="....." >
เป็นรูปแบบการใส่ไฟล์วีดิโอของ Netscape Navigator จะยุ่งยากตรงที่ว่า เราต้องรู้ขนาดของไฟล์วีดิโอ ว่ามีขนาดยาวกี่พิกเซล ตามขนาดมาตรฐานแล้ว (height x width) จะมีอัตราส่วนเป็น 3:4 ขนาดมาตรฐานได้แก่ 90 x 120 120 x 160,180 x 240 และ 240 x 320 โดยมีลักษณะคำสั่งดังนี้
• SRC="......" ให้ใส่ชื่อไฟล์วีดิโอลงไป เช่น 02sticks.avi
• LOOP ถ้ากำหนดเป็น true จะทำให้วีดิโอเล่นไปเรื่อย ๆ ถ้าต้องการ ให้เล่นครั้งเดียวไม่ต้องใส่ก็ได้
• WIDTH กำหนดขนาดความกว้างของวีดิโอ ตามมาตรฐาน
• HEIGHT กำหนดความสูงของวีดิโอ ตามมาตรฐาน
• ALIGN="...." เป็นการกำหนดตำแหน่ง ดังนี้ top,bottom,center,baseline,left,right,

ตัวอย่าง <EMBED SRC=sport.avi WIDTH=240 HEIGHT=180>




การแบ่งจอภาพเป็นส่วน ๆ
การแบ่งจอภาพออกเป็นส่วน ๆ หรือ ที่เรียกว่า เฟรม(frame)
เฟรมถือว่าเป็นคำสั่งหนึ่งใน การเขียน HTML โดยเฟรมจะช่วยให้ สามารถ แสดง ผลไฟล์ HTML หลาย ๆ ไฟล์ได้พร้อม ๆ กัน ภายใต้ เว็บเพจ เดียวกัน ตามปกติแล้ว หนึ่งเว็บเพจ เราจะมีไฟล์ HTML อยู่ไฟล์เดียว แต่ถ้าเราต้องการ แบ่งหน้าจอของเว็บเพจ ให้เป็น 3 - 4 ส่วน โดยแต่ละส่วน มีความเป็นอิสระ ของตัวเอง ใช้ HTML ของตัวเอง คำสั่ง เฟรม จะฃ่วยในการจัดงานดังกล่าว

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

ลักษณะและข้อจำกัดของเฟรม
เฟรม ส่วนมาก มีลักษณะ เป็นรูป สี่เหลี่ยม อย่างเดียว เราไม่ สามารถ สร้างเฟรม เป็นรูป สามเหลี่ยมได้ วงกลม ห้าเหลี่ยม หกเหลี่ยม ได้ตาม ใจชอบ ส่วนเฟรมที่ ซับซ้อน เกินไป เราก็อาจจะสร้างไม่ได้

ระบบโครงสร้าง
คำสั่ง แรกที่เรา ต้องใช้ ในการสร้าง เฟรม ก็คือ <FRAMSET> คำสั่งนี้เป็นคำสั่ง ที่ใช้ใน การกำหนด ขนาดและ รูปแบบของเฟรม ที่คุณ ต้องการ คำสั่ง <FRAMSET> เป็นคำสั่ง ที่มาแทน คำสั่ง <BODY> ในไฟล์ HTML โดยมีโครงสร้างดังนี้
<HTML>
<HEAD>
<TITLE>.....</TITLE>
</HEAD>
<FRAMESET>
.
.
.
</FRAMESET>
</HTML>
คำสั่ง<FRAMESET> มี คำสั่ง 3 คำสั่งย่อย คือ
1. <FRAME SRC= ชื่อไฟล์ที่ต้องการแสดง>เป็นการกำหนด ค่าต่าง ๆ ที่จะแสดงในพื้นที่จอภาพ ไม่ว่าจะเป็น .htm, .html หรือ .gif, .jpg ก็ได้ทั้งหมด
2. <NOFRAME> คำสั่งนี้จะถูกแสดง เมื่อถูกเรียกใช้โดยเว็บเพจรุ่นเก่า ที่แสดงผลแบบเฟรมไม่ได้
3. <FRAMESET> ใช้ในการซ้อนเฟรม มีรูปแบบคือ

• <FRAMESET ROWS="pixels,%,*"> หรือ
• <FRAMESET COLS="pixels,%,*"> หรือ
• <FRAMESET ROWS="pixels,%,*" COLS="pixels,%,*">

ตัวอย่าง 
<HTML>
<HEAD>
<TITLE>Frame Set</TITLE>
</HEAD>
<FRAMESET COLS=50%,*">
<FRAME SRC="TABLE1.HTM">
<FRAME SRC="TABLE2.HTM">
</FRAMESET>
<NOFRAME>
<a href=http:://www.bcoms.net>HOME PAGE</a>
</NOFRAME>
</HTML>

การกำหนดขนาดขอบหรือพื้นที่ว่างรอบ ๆ เฟรม
รูปแบบ <FRAME SRC="picture.gif" MARGINWIDTH="50" MARGINHEIGHT="50">
เราใช้คำสั่ง MARGINWIDTH="pixels" และ MARGINHEIGHT="pixels" แทรกเข้าไปในคำสั่ง <FRAME> เช่น

<HTML>
<HEAD>
<TITLE>My First Frame </TITLE>
</HEAD>
<FRAMESET COLS=*,*">
<FRAME SRC="picture.gif">
<FRAME SRC="picture.gif" MARGINWIDTH="50" MARGINHEIGHT="50">
</FRAMESET>
</HTML>

การกำหนดค่าตัวเลื่อน 
รูปแบบ <FRAME SCROLLING="no/yes/auto">
โดยปกติแล้ว ตัวเลื่อนทางด้านขวาหรือด้านล่าง ของเฟรมจะปรากฎขึ้นมาเอง โดยอัตโนมัติ โดยดูจากขนาด ของพื้นที่ว่า แสดงผลภายในเฟรมนั้น ๆ พอหรือไม่ ค่าปกติ"auto" ถ้าไม่ต้อง การให้ ตัวเลื่อน ปรากฎ ขึ้นมา กำหนดเป็น "no" เรานำลูกเล่นนี้มาล็อคเมนู หรือเฟรมไม่ให้ เคลื่อนไหว ไปมาโดยตัวเลื่อนได้

หยุดการเปลี่ยนขนาดเฟรมโดยผู้ใช้ 
รูปแบบ <FRAME NORESIZE>
ในเฟรมทั่ว ๆ ไป ผู้ใช้สามารถเปลี่ยนแปลง ขนาดของเฟรม ได้โดยเลื่อนเมาส์ไป ยังบริเวณเส้นขอบ ของเฟรมนั้น ๆ จากนั้น ตัวชี้จะเปลี่ยนจากลูกศร พร้อมที่จะปรับขนาด ถ้าเราไม่ต้องการให้ ผู้ใช้ปรับ เราก็ใส่คำสั่งนี้ลงไป

การตั้งชื่อให้เฟรม 
รูปแบบ <FRAME NAME=ชื่อเฟรม">
เราสามารถตั้งชื่อ ได้ตามใจชอบ เพื่อประโยชน์ ในการเล่นตัวเชื่อม เราสามารถพบได้ตาม ไซต์ต่าง ๆ ทั่วไป ที่ใช้เฟรมในการแบ่ง หน้าจอระหว่าง เมนูหรือตัวเลือก กับเนื้อหา เช่น เฟรมด้านซ้าย เป็นเมนู ด้านขวาเป็น ตัวแสดงข้อมูล โดยข้อมูลจะเปลี่ยนเฉพาะด้านขวาเท่านั้น เช่น

<HTML>
<HEAD>
<TITLE>My First Frame </TITLE>
</HEAD>
<FRAMESET COLS=20,*">
<FRAME SRC="menu.htm">
<FRAME SRC="result.htm" NAME="show">
</FRAMESET>
</HTML>
จากโค้ดด้านบน เราได้แบ่งออกเป็น 2 ส่วน คือ ส่วนแรกเป็นเมนูด้านซ้าย แสดงผลโดยไฟล์ "menu.htm" อีกส่วนหนึ่งแสดงผลลัพธ์ โดยไฟล์ "result.htm" พร้อม กับตั้งชื่อเฟรมที่ 2 ว่า "show"
ในไฟล์ "menu.htm" นั้นต้องใช้คำสั่งต่าง ๆ ดังนี้
<HTML>
<HEAD>
<TITLE>Click One Please </TITLE>
</HEAD>
<BODY>
<H3>Click One Please</H3> < A HREF=NO1.HTM TARGET="SHOW">1</A>
< A HREF=NO2.HTM TARGET="SHOW">2</A>
< A HREF=NO3.HTM TARGET="SHOW">3</A>
< A HREF=NO4.HTM TARGET="SHOW">4</A>
< A HREF=NO5.HTM TARGET="SHOW">5</A>
< A HREF=NO6.HTM TARGET="SHOW">6</A>
< A HREF=NO7.HTM TARGET="SHOW">7</A>
< A HREF=NO8.HTM TARGET="SHOW">8</A>
< A HREF=NO9.HTM TARGET="SHOW">9</A>
< A HREF=NO10.HTM TARGET="SHOW">10</A>
</BODY>
</HTML>
ตัวเชื่อมต่าง ๆ จะทำการเชื่อมไปยังไฟล์ ปลายทาง เพื่อจะแสดงผผลไฟล์นั้น ๆ ภายในเฟรมที่ 2 ที่เป็นเช่นนี้เพราะว่า มีการใส่คำสั่ง TARGET="SHOW" เข้าไปในคำสั่ง <A HREF> ด้วยเพื่อกำหนด ปลายทาง แสดงผล ให้กับไฟล์ HTML

การลบกรอบของเฟรม 
รูปแบบ <FRAMESET FRAMEBORDER=yes-no">ปกติถ้าเรา ใช้คำสั่ง <FRAMESET> ตรงส่วนต่อระหว่างเฟรม จะมีลักษณะของ <BORDER> ถ้าเราไม่ต้องการสามารถกำหนดได้ด้วยคำสั่งข้างต้น