โครงสร้างพืน้ ฐานของ 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 ทางานอยู่ ขอ้ ความ ท่ีกาหนดในส่วนน้ี จะไม่ถูกนาไปแสดง ผลของ เวบ็ เบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Titlebar) ท่ีเป็นชื่อของวนิ โดวข์ า้ งบนไม่ควรใหย้ า เกินไป เพียงใหร้ ู้วา่ เวบ็ เพจที่กาลงั ใชง้ านอยู่เก่ียวขอ้ งกบั อะไรส่ วนของเนื้อหารูปแบบ <BODY>.....</BODY>ส่วนเน้ือหาของโปรแกรมจะเริ่มตน้ ดว้ ย คาสงั่ <BODY> และจบลงดว้ ย </BODY>ภายในคาส่งั น้ี คือ ส่วนที่จะ แสดงทางจอภาพ
การเติมสีสันให้เอกสารผลการแสดง ที่เกิดข้ึน บน เวบ็ เพจ เราจะพบวา่ เอกสาร ทว่ั ไปแลว้ ตวั อกั ษร ท่ีปรากฎ บนจอภาพ จะเป็น ตวั อกั ษรสีดาบนพ้ืน สีเทา ถา้ เรา ตอ้ งการ ท่ีจะ เปลี่ยนสี ของตวั อกั ษร หรือ สีของ จอภาพ เราสามารถ ทาไดโ้ ดย การกาหนด แอตทริบิวต์ (Attribute) ของตวั อกั ษร ส่ิงที่ตอ้ งการน้ี จะเป็น กลุ่มตวั เลขฐาน 16 จานวน 3 ชุด โดยชุดที่ หน่ึง ทาหนา้ ที่ แทนค่าสีแดง ชุดที่สอง ทาหนา้ ที่ แทนสีเขียวและชุดที่สาม ทาหนา้ ท่ีแทนสี น้าเงิน ขอ้ มูล ในตาราง ต่อไปน้ีจะแสดง สีพ้นื ฐาน และรหสั สีที่สามารถแสดงไดท้ ุกเวบ็ เพจ สี รหัสสี ขาว #FFFFFF ดา #000000 เทา #BBBBBB แดง #FF0000 เขียว #00FF00 น้าเงิน #0000FFในบางคร้ังถา้ เราไม่ตอ้ งการใส่รหสั สีเป็นเลขฐานเรากส็ ามารถใส่ชื่อ สีลงไปไดเ้ ลย ตวั อยา่ งต่อไปน้ีแสดงชื่อสีท่ี Internet Explorer สนบั สนุนแต่ Netscape ไม่สนบั สนุนAQUABULEGRAYLIME
NAVYPURPLESILVERWHITE (สีขาว)BLACKFUCHSIAGREENMAROONOLTVEREDTEALYELLOWสีของพืน้ ฉากหลงัรูปแบบ 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 = สีของอกั ษรหลงั จากคลิกแลว้
Search
Read the Text Version
- 1 - 7
Pages:
