การเขียนเว็บด้วยภาษา HTML

การเขียนเว็บด้วยภาษา HTML

โครงสร้างพื้นฐานของ HTML                  โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head)    และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้         การจัดโครงสร้างแฟ้มเอกสาร                 ในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะว่าตัวโปรแกรม เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้น                   ยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้น       การแสดงผลที่เว็บเบราเซอร์                   หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมายน้อยกว่า < ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้นๆ เช่น คำสั่ง จะมี เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันที คำสั่งเริ่มต้นสำหรับ HTML                      คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า > เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม / (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร     คำสั่งเริ่มต้นรูปแบบ   ..... คำสั่ง  เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal     คำสั่งการทำหมายเหตุรูปแบบ  ตัวอย่าง    ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ     ส่วนหัว รูปแบบ ..... ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ ตัวอย่าง  เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร       ส่วนของเนื้อหา รูปแบบ ..... ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง และจบลงด้วย ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ     การเติมสีสันให้เอกสาร   ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (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=#สีที่ต้องการ ตัวอย่าง   เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง สีของตัวอักษรบนเว็บ  รูปแบบ Text=#รหัสสี ตัวอย่าง  เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด สีของตัวอักษรเฉพาะที่  รูปแบบ ... ตัวอย่าง สีแดง คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น สีแดงตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที สีของตัวอักษรที่เป็นจุดคลิกเมาส์ รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี" ตัวอย่าง > กำหนดอยู่ในส่วนของ 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         รูปแบบ ของตัวอักษร   ในบทนี้ เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น   ตัวหนา   ตัวเอน    ตัวใหญ่  ตัวเล็ก ซึ่งลักษระต่างๆ เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้น หัวเรื่อง  รูปแบบ ข้อความ ตัวอย่าง หัวข้อใหญ่สุด ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง .... ขนาดตัวอักษร รูปแบบ ข้อความ ตัวอย่าง bcoms.netเราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7  ตัวหนา (Bold) รูปแบบ ข้อความ ตัวอย่าง bcoms.netจะทำให้ข้อความที่อยู่ใน .... มีความหนาเกิดขึ้น เช่น bcoms.net ตัวเอน (Itatic) รูปแบบ ข้อความ ตัวอย่าง bcoms.netทำให้ข้อความที่อยู่ใน.... เกิดเป็นตัวเอนขึ้น เช่น bcoms.net ตัวขีดเส้นใต้ (Underline)  รูปแบบ ข้อความ ตัวอย่าง bcoms.netทำให้ข้อความที่อยู่ใน ..... มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้น เช่น bcoms.net ตัวอักษรมีขนาดคงที่ (Typewriter text) รูปแบบ ข้อมความ ตัวอย่าง bcoms.netทำให้ ข้อความ ที่อยู่ใน..... มีลักษณะเป็น fixed space เกิดขึ้น เช่น bcoms.net แบบของตัวอักษร รูปแบบ bcoms.netFont name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น bcoms.net และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)  ขนาด Font ทั้งเอกสาร รูปแบบ Basefont size="X"> ตัวอย่าง  เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข) ตัวอักษรแบบพิเศษ  รูปแบบ           <      แทนด้วย     <           >      แทนด้วย     >           &     แทนด้วย     &           "      แทนด้วย     " เว้นวรรค แทนด้วย  ตัวอย่างเช่น "bcoms.net" จะเป็น "bcoms.net" การจัดรูปแบบโฮมเพจ                     ในการเขียนคำสั่งเพื่อให้แสดงผลด้วยเว็บเบราเซอร์การกด ปุ่ม Enter ที่แป้นพิมพ์เพื่อขึ้นบรรทัดใหม่ในขณะที่สร้าง ไฟล์นั้นยังไม่มีโปรแกรมเว็บเบราเซอร์ตัวใดรู้จักคำสั่งที่ขึ้นบรรทัดใหม่ที่เกิดจาก การกดแป้นพิมพ์เลยดังนั้น เราจึง ต้องมี การเขียนคำสั่งขึ้นซึ่งในบทนี้เราจะมารู้ถึงคำสั่งที่ใช้ใน การกำหนด รูปแบบต่างเพื่อให้ เว็บเพจ มีความสวยงามมากยิ่งขึ้น การขึ้นบรรทัดใหม่ รูปแบบ เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่ ย่อหน้าใหม่  รูปแบบ ข้อความ เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่งอย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง ต้องมีคำสั่ง ปิด ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น ข้อความนี้ ก็จะอยู่ตรงกลาง   เส้นคั้น รูปแบบ เราสามารถกำหนดตำแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้ โดย โดย X = ค่าต่าง ๆ เหล่านี้ = CENTER , LEFT , RIGHT COLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-B SIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7 WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์ NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบ การใส่รูปภาพลงในเว็บเพจ                  เมื่อเริ่ม เข้าไป ยังโฮมเพจ ของ เว็บไซต์ แต่ละแห่ง บนอินเตอร์เนต สิ่งแรก ที่มัก เป็นที่ ติดตา ของผู้ ใช้ บริการ ก็คือ การที่ แต่ละ โฮมเพจ จะมี รูปภาพ สวย ๆ แสดง ออกมา มีการ จัดรูปภาพ และข้อความ ที่เป็น ระเบียบ ทำให้อ่าน ง่าย เข้าใจ เนื้อหา ที่ต้องการ ได้อย่าง รวดเร็ว                ก่อนที่ เราจะ มารู้ ถึงคำสั่ง ในการ ใส่รูปภาพ ลงใน เว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา จะนำมาใส่ในเว็บเพจเสียก่อน รูปภาพที่จะนำมาใช้ใส่ลงในเว็บเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF และ JPG ไฟล์                 รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์ ชนิดบิตแมป (Bitmap) เป็นเทคนิค การเก็บภาพ โดยให้ จุดสี(pixet) ต่าง ๆ เรียง ต่อกัน จนเกิด เป็นภาพ ไฟล์ GIF นี้ ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน ปัจจุบันมี โปรแกรม สำหรับทำ หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนำ ภาพมา แสดง ทำให้เกิด เป็นภาพ เคลื่อนไหวขึ้น                  ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นำเอา ข้อมูล ส่วนที่ ไม่สำคัญ ออกไป แล้วทำการ บีบอัด ข้อมูล ในอัตรา ส่วน 10:1 โดยขนาด ของไฟล์ ที่เรา นำมา ใช้งาน นั้น อาจมีขนาด เหลือเพียง 10 - 30 % ของขนาดไฟล์ ก่อนจะมีการ บีบ ย่อ ข้อมูล ขนาดของ การบีบ ข้อมูล มีได้ 3 ระดับ (Hight,Middle,Low Compression) ไฟล์ที่ มีการ บีบย่อ ข้อมูล มากที่สุด จะได้ ไฟล์ที่มีขนาด เล็กที่สุด แต่คุณภาพ ก็ลดลง ตาม ไปด้วย หากต้องการ ภาพที่มี คุณภาพดี ที่สุด ขนาดของ ไฟล์ก็จะ ใหญ่ ที่สุดเช่นกัน การใส่รูปภาพลงในเว็บเพจ รูปแบบ  ALIGN           =     align-type(ตำแหน่ง) เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั้นจะ อยู่ ที่ตำแหน่ง ส่วนล่าง                               ของภาพ ทางขวา มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่าง ๆ เหล่านี้ LEFT             =     วางภาพที่ตำแหน่งทางซ้าย RIGHT           =     วางภาพที่ตำหน่งทางขวา TOP              =      วางภาพ ที่ตำแหน่ง ด้านบน MIDDLE       =      วางภาพ ที่ตำหน่ง กึ่งกลาง BOTTOM     =      วางภาพ ที่ตำแหน่ง ด้านล่าง BORDER    =       n    เป็นการ กำหนด กรอบให้ รูปภาพ n มีค่ามาก กรอบจะ มีความหนา มากขึ้น HEIGHT       =       n    เป็นการ กำหนด ความสูง ของภาพ WIDTH         =      n    เป็นการ กำหนด ความกว้างของภาพ ถ้าต้องกา ให้ภาพได้สัดส่ว ให้กำหน เป็นเปอร์เซนต์ โดยไม จำกัดความสูง VSPACE     =      n    กำหนด ระยะ ห่างบน ล่างของ ภาพ HSPACE     =      n    กำหนด ระยะ ห่าง ซ้าย - ขวา ของภาพ SRC             =      ใส่รูปภาพที่ต้องการลงไป ALT              =      text   ใส่ข้อควา เพื่อเป็นคำอธิบายรูปภาพที่นำมาวางสำหรับผู้ใช้อินเตอร์เนตแบบเท็กซ์ ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง ... การแสดงภาพฉากหลัง รูปแบบ BACKGROUND="picture" กำหนด แอตทริบิวต์ BACKGROUND="picture" ในคำสั่งของ เช่น การเชื่อมโยงข้อมูล (Link)                เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการ เชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน                ข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา) แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่งมีการ เชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่ง ของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น ประเภทการเชื่อมโยง       -   การเชื่อมโยงภายในเว็บไซต์        -   การเชื่อมโยงข้อมูลนอกเว็บไซต์        -   การเชื่อมโยงข้อมูล FTP         -   การเชื่อมโยงข้อมูล E-Mail การเชื่อมโยงภายในเว็บไซต์ รูปแบบ ข้อความ ตัวอย่าง ทิปคอมพิวเตอร์*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ ทิปคอมพิวเตอร์ การเชื่อมโยงข้อมูลนอกเว็บไซต์ รูปแบบ ข้อความ ตัวอย่าง บีคอม*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank" ตัวอย่าง Driver Zone การเชื่อมโยงข้อมูล FTP  รูปแบบ ข้อความ

HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง Download


การเชื่อมโยงข้อมูล E-Mail 
รูปแบบ ข้อความ
ตัวอย่าง bcoms_net@hotmail.com

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

ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
VALIGN=align-type

โดย

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

ALIGN	กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย LEFT=อยู่ทางซ้าย CENTER=อยู่ตรงกลาง RIGHT=อยู่ทางขวา
BACKGROUND	ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR	กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR	กำหนดสีให้ขอบตาราง
VALIGN	จัดตำแหน่งข้อมูลในแนวตั้ง โดย TOP = จัดอยู่ข้างบน MIDDLE = จัดอยู่ตรงกลาง BPTTOM = จัดอยู่ข้างล่าง

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 = จัดอยู่ข้างล่าง

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 นั่นคือ ในส่วน ของ บรรทัด
จะมี การสร้าง ตาราง ใหม่ ..... ก่อนที่ จะมี ตัวเปิด ในบรรทัด นั้น ๆ เช่น 

A	B
C D	E

ซึ่งมีโคดดังนี้

Table with and Neted tables

A

B

C

D

E




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











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











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

กลับไปหน้าแรก

กลับไปหน้าแรก

ขอขอบคุณข้อมูลและสามารถศึกษาเพิ่มเติมได้ที่  : 
http://www.bcoms.net/html/index.asp