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