แนะนำการเขียนเว็บเพจภาษาHTML
บทที่ 1
แนะนำก่อนเขียนภาษา 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> จะมี </BODY> เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันที
บทที่ 2
คำสั่งเริ่มต้นสำหรับ 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> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ
บทที่ 3
การเติมสีสันให้เอกสาร
ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (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 |
บทที่ 4
รูปแบบ ของตัวอักษร
ในบทนี้ เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา ตัวเอน ตัวใหญ่ ตัวเล็ก ซึ่งลักษณะต่าง ๆ เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้น
หัวเรื่อง
รูปแบบ <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 แทนตัวเลข)
ตัวอักษรแบบพิเศษ
รูปแบบ
< แทนด้วย <
> แทนด้วย >
& แทนด้วย &
" แทนด้วย "
เว้นวรรค แทนด้วย
ตัวอย่างเช่น "bcoms.net" จะเป็น "bcoms.net"
บทที่ 5
การจัดรูปแบบโฮมเพจ
ในการเขียนคำสั่งเพื่อให้แสดงผลด้วยเว็บเบราวเซอร์การกด ปุ่ม 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 = กำหนด ให้เส้น เป็น เส้นทึบ
บทที่ 6
การสร้างแบบฟอร์ม
สำหรับฟอร์มใน 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:[email protected]" ซึ่งเป็นรูปแบบของการส่งข้อมูลจากฟอร์มไปยังเมล์บ็อกซ์ของเรา
ENCTYPE= "application/x-www-form-urlencoded" เป็นการกำหนด รูปแบบการเก็บข้อมูลของฟอร์ม เพื่อที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ จะใส่หรือไม่ใส่ก็ได้ แต่ถ้าใส่ จะทำให้โปรแกรม mailto: สามารถใช้โปรแกรมเมล์ บางโปรแกรมอ่านข้อมูลที่ถูกเก็บในรูปแบบนี้ได้ทันที เช่น
<FORM METHOD=POST ACTION="mailto:[email protected]" ENCTYPE= "application/x-www-form-urlencoded"> </FORM>
Tip ถ้าผู้กรอกแบบฟอร์มใช้บราวเซอร์จาก Netscape หัวข้อหรือ Subject ของเมล์ที่ส่งมายัง เมล์บ็อกซ์นั้นจะมีหัวข้อว่า"Form posted from Mozilla" แต่ถ้าเป็นตัวอื่นจะเป็น "Form Response" ถ้าคุณไม่ชอบก็สามารถเปลี่ยนได้ในส่วนของ ACTION ดังนี้
<FORM METHOD=POST ACTION="mailto:[email protected]?subject="Answer from Product Questonaire"> โดยในส่วนของ Subject นั้นสามารถเปลี่ยนได้ตามใจเรา
การสร้างแบบฟอร์ม
รูปแบบ < INPUT SIZE=n MAXLENGTH=n VALUE="...">
• เป็นการกำหนดค่าให้แสดงตัวรับข้อมูลแบบ TEXT
• ชื่อหัวข้อ เพื่อบอกให้รู้ว่า ค่าที่ได้รับกลับมานั้น เกี่ยวกับอะไร
• SIZE=n เป็นจำนวนขนาดของช่องรับข้อความค่าปกติ 20 ตัวอักษร
• MAXLENGTH=n เป็นจำนวนตัวอักษรที่รับได้สูงสุดในช่องรับนั้น ๆ
• VALUE="..." ข้อความที่อยู่ระหว่างเครื่องหมายคำพูดจะ ปรากฎอยู่ในช่อรับข้อมูลให้โดยอัตโนมัติ
|
Registration Form |
|
|
First name : |
|
|
Last name : |
|
|
Address : |
|
|
Tel : |
|
|
Country : |
|
ช่องป้อนรหัสผ่าน
รูปแบบ < INPUT SIZE=n MAXLENGTH=n VALUE="...">
รูปแบบคล้ายกับกับการ INPUT ด้วย TEXT ต่างกันเพียงแค่ เปลี่ยนคำว่า TEXT ให้เป็น PASSWORD เท่านั้น ในช่องที่กรอกรหัสหน้าจอ จะแสดงเป็นสัญลักษณ์ "*" เครื่องหมายดอกจันแทน เพื่อป้องกันไม่ให้คนอื่นมองเห็น
Password :
ปุ่ม Radio Botton
รูปแบบ <INPUT VALUE="..." CHECKED>
ปุ่มเลือกแบบนี้สามารถเลือกได้เพียง ปุ่มเดียวเท่านั้น คำสั่ง CHECKED นั้นมีไว้ เพื่อกำหนด ให้ตัวเลือก ถูกเลือก ไว้ก่อนแล้ว โดยเป็นตัวเลือกที่เราคิดว่าผู้กรอกแบบฟอร์มน่าจะเลือก สามารถกำหนดได้ตำแหน่งเดียว
ชาย
หญิง
เช็คบ็อกซ์
รูปแบบ < INPUT VALUE="..." CHECKED>
ปุ่มเลือก แบบนี้ สามารถเลือก หลายปุ่ม คำสั่ง CHECKED สามารถกำหนด ได้หลายตัว ส่วนการตั้งค่าอื่น ๆ เหมือนแบบ Radio Botton ค่าของ name และ value ไม่มีรูปแบบ กำหนดตายตัว ว่าเป็นแบบใด จะกำหนดname ให้เหมือนกันแต่ value ต่างกันหรือ กำหนด name ต่างกัน ส่วน value เหมือนกัน อย่างไรก็ได้ ขอให้เราเข้าใจและประเมินผล ข้อมูลที่ส่งมาได้เท่านั้นเอง
คณิตศาสตร์
ฟิสิกส์
ชีววิทยา
เคมี
ตัวรับข้อมูลแบบ TEXTAREA
รูปแบบ
< TEXTAREA 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 >
<OPTION SELECTED>คำอธิบายหัวข้อหรือตัวเลือก
<OPTION >คำอธิบายหัวข้อหรือตัวเลือก
<OPTION >คำอธิบายหัวข้อหรือตัวเลือก
</SELECT>
• SELECT เป็นค่าปกติที่ใช้
• OPTION เป็นตัวเลือกที่เราต้องการให้ปรากฎ
• SELECTED เป็นตัวเลือกที่ถูกกำหนดเลือกไว้ก่อน มีได้เพียงตัวเดียว
ส่วนเมนูแบบ Scrolling นั้นทำได้โดยการใส่ SIZE=n เข้าไปในส่งนของ <SELECT> ซึ่งค่าของ SIZE=n นั้นจะใส่เท่าไรก็ได้ เช่น ถ้าคุณมีตัวเลือก 5 ตัว แต่ใส่ SIZE=2 คุณก็สามารถเห็นได้แค่ 2 บรรทัด เท่านั้น SIZE จะมีค่ามากน้อยขึ้นอยู่กับ OPTION ก็ได้ แล้วแต่ความสวยงามของฟอร์ม สำหรับเมนูแบบนี้ มักใช้กับหัวข้อที่มีตัวเลือกไม่มากนัก
ปุ่มยกเลิก และ ตกลง
รูปแบบ
< INPUT VALUE="..." >
< INPUT VALUE="..." >
• Submit มีหน้าที่ไว้ส่งแบบฟอร์มกลับไปยังเจ้าของฟอร์ม
• Reset มีไว้สำหรับเคลียร์ค่าฟอร์มทั้งหมดให้กลับอยู่ในรูปแบบเดิมก่อนมีการกรอก
• Vaule เป็นการกำหนดคำอธิบายปุ่มแทนค่าปกติคือ Submit Query กับ Reset จะมีหรือไม่มีก็ได้
บทที่ 7
การแสดงผลแบบรายการ
ในการแสดงข้อมูลบนเว็บเพจนอกจากการแสดงผลแบบปกติทั่วไปแล้วบางครั้งเราอาจมีความจำเป็นต้องจัด รูปการแสดงผลให้เป็นแบบของ รายการ(list) คือ มีการ แสดงข้อมูลในลักษณะที่เป็นหัวข้อซึ่งอาจ มีคำอธิบายหรือ ไม่มีก็ได้ การแสดงข้อมูลแบบรายการจะมีรายการแบบลำดับ (ใช้หมายเลข กำกับ) หรือ รายการแบบไม่มี ลำดับ(ใช้สัญลักษณ์ กำกับ) แต่ไม่ว่า จะเลือกให้มีการ แสดงผลรายการ แบบใด ก็ตามทั้ง 2 ลักษณะ ก็มีลักษณะ การทำงาน ที่เหมือนกัน
รายการแบบใช้สัญลักษณ์กำกับ (Bullet lists)
รูปแบบ
<UL> ตัวเปิด
<LI> ข้อมูลที่นำมาแสดง
<LI> ข้อมูลที่นำมาแสดง
</UL> ตัวปิด
เป็นการแสดงผลโดยใช้สัญลักษณ์ในการกำกับรายการต่าง ๆ และเราสามารถกำหนดลักษณะของสัญลักษณ์ได้โดยใช้คำสั่ง Type=N ซึ่ง N=circle=วงกลม,disc=วงกลมทึบ หรือ square=สี่เหลี่ยม โดยอยู่ในคำสั่ง ของ <UL> ถ้าต้องการ ให้สัญลักษณ์ เหมือนกัน ทุกรายการ แต่ ถ้าต้องการ ให้แต่ละรายการ ไม่เหมือนกันให้ใส่ในส่วนของ <LI> เช่น
<UL>
<LI>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 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>
<LI>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>
เว็บเบราเซอร์ จะแสดง ออกมาเป็น
- รายการที่ 1
- รายการที่ 2
- รายการที่ 3
เรายังสามารถใช้คำสั่ง TYPE=n ในส่วนของ <LI> ได้ แต่ค่าเริ่มต้นต้องเป็นไปตามค่าดังกล่าวข้างต้นให้สังเกตตามตัวอย่าง <OL>
<LI>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>
<OL> <LI>รายการที่ 1
<LI>รายการที่ 2
<LI>รายการที่ 3
</OL>
เว็บเบราเซอร์ จะแสดง ออกมา เป็น
- รายการที่ 1
- รายการที่ 2
- รายการที่ 3
- รายการที่ 1
- รายการที่ 2
- รายการที่ 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>
ใช้เมื่อ ต้องการ จะพิมพ์ ที่อยู่ของเราเพื่อให้ผู้ที่เข้ามาใช้เว็บเพจสามารถติดต่อกับเราได้ รูปแบบตัวอักษรเป็นตัวเอน เช่น
Liberta Co.,Ltd.
215/12 ถนนรามคำแหง ซอยรามคำแหง 24 หัวหมาก บางกะปิ 10310
Tel & Fax : 02 2541241 E-Mail : [email protected]
บทที่ 8
การใส่รูปภาพลงในเว็บเพจ
เมื่อเริ่ม เข้าไป ยังโฮมเพจ ของ เว็บไซต์ แต่ละแห่ง บนอินเตอร์เนต สิ่งแรก ที่มัก เป็นที่ ติดตา ของผู้ ใช้ บริการ ก็คือ การที่ แต่ละ โฮมเพจ จะมี รูปภาพ สวย ๆ แสดง ออกมา มีการ จัดรูปภาพ และข้อความ ที่เป็น ระเบียบ ทำให้อ่าน ง่าย เข้าใจ เนื้อหา ที่ต้องการ ได้อย่าง รวดเร็ว ก่อนที่ เราจะ มารู้ ถึงคำสั่ง ในการ ใส่รูปภาพ ลงใน เว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา จะนำมา ใส่ ใน เว็บเพจ เสียก่อน รูปภาพ ที่จะ นำมา ใช้ใส่ ลง ในเว็บเพจ นั้น ส่วนมาก มีนามสกุล เป็น 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(ตำแหน่ง) เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั
ความเห็น (1)
ยิ้มกว้างกว่านี้ได้อีกนะพี่นก