การพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล

การสรา้ งเว็บเพจดว้ ยภาษา HTML ภาษาเอชทเี อม็ แอล ภาษาเอชทเี อม็ แอล (HyperText Markup Language : HTML) เป็น ภาษาคอมพวิ เตอรภ์ าษาหน่ึงใชส้ รา้ งเอกสารเว็บเพจ เพ่ือนาเสนอขอ้ มลู ข่าวสารบนระบบเครอื ข่ายอนิ เทอรเ์ น็ต ท่เี ป็นลกั ษณะเหมอื นใย แมงมมุ ที่เช่ือมต่อกนั ท่วั โลก โครงสรา้ งการเขยี นภาษานนั้ จะอาศยั ตวั กากบั เรียกว่า แทก็ (Tag) หรอื ปา้ ยระบกุ าร แสดงผล เป็นตวั บควบคมุ การแสดงผล ของขอ้ ความ รูปภาพ หรือวตั ถอุ ่นื ทแ่ี สดงผลผา่ นทาง โปรแกรมเว็บเบราวเ์ ซอร์ (Web Browser) ป้ายระบกุ ารแสดงผล ปา้ ยระบกุ ารแสดงผลหรือแท็ก เป็นลกั ษณะเฉพาะของภาษาเอชทีเอม็ แอล ใชส้ าหรบั การระบรุ ูปแบบของคาส่งั หรือ การลงรหสั คาส่งั ของภาษาเอชทเี อม็ แอล ซ่งึ จะอยรู่ ะหว่างเคร่อื งหมายหนอ้ ย กวา่ (<) หรือเครื่องหมาย มากกว่า (>) โดยทปี่ า้ ยระบกุ ารแสดงผลหรอื แท็ก ของภาษาเอชทเี อ็มแอลนี้ สามารถ แบง่ ได้ 2 ลกั ษณะ คือ 1. ปา้ ยระบกุ ารแสดงผลเดย่ี วหรอื แท็กเด่ยี ว เป็นป้ายระบกุ ารแสดงผลทไี่ ม่ตอ้ งมกี ารปิดรหสั เช่น <P> , <HR> เป็นตน้ 2. ป้ายระบุการแสดงผลเปิด/ปิดหรอื แทก็ เปิด/ปิด เป็นปา้ ยระบกุ ารแสดงผลที่ ประกอบดว้ ยป้ายระบกุ ารแสดงผลเปิดหรือแทก็ เปิด และป้ายระบกุ ารแสดงผล ปิด หรือแท็กปิด โดยปา้ ยระบกุ ารแสดงผลปิดจะมี

เครื่องหมาย สแลช (slash,/) นาหนา้ คาส่งั ในปา้ ย ระบกุ ารแสดงผลนน้ั ๆ เช่น <H1>…</H1> , <B>…</B> เป็นตน้ โดยถา้ ทาการเปิด ดว้ ยคาส่งั ใด จะตอ้ งทาการปิดดว้ ยคาส่งั นนั้ การกาหนดคณุ ลักษณะพิเศษเพิ่มเตมิ ของคาส่งั การกาหนดคณุ ลกั ษณะพิเศษเพิ่มเตมิ ของคาส่งั (Attributes) เป็นส่วนขยาย ความสามารถ ของป้ายระบุ การแสดงผล หรือแท็ก ซงึ่ จะอยภู่ ายใตเ้ ครอื่ งหมาย < > ในสว่ นแท็กเปิดเท่านนั้ โดยแท็กคาส่งั เอชทเี อ็มแอล (HTML) ในแตล่ ะคาส่งั จะมีการกาหนดคณุ ลกั ษณะพเิ ศษเพิม่ เตมิ แตกตา่ งกนั ออกไป และการ ระบกุ าร กาหนดคณุ ลกั ษณะพเิ ศษ เพ่ิมเติมทม่ี ากกวา่ 1 คุณลกั ษณะจะใชช้ ่องว่างเป็นตวั แยก ตวั อยา่ ง เช่น แทก็ สาคญั ควบคมุ เก่ยี วกบั รูปภาพ คอื <IMG> มกี ารกาหนดคณุ ลกั ษณะพเิ ศษเพ่มิ เตมิ ดงั นี้ <IMG SRC= “filename” WIDTH = “n” HEIGHT = “n” ALT = “text” BORDER = “n”> ใชส้ าหรบั กาหนดแฟม้ ขอ้ มลู รูปภาพท่จี ะนามา SRC แสดงผล WIDTH ใชส้ าหรบั การกาหนดความกวา้ งของภาพ HEIGHT ใชส้ าหรบั การกาหนดความสงู ของภาพ

ALT ใชส้ าหรบั การกาหนดคาอธิบายภาพ BORDER ใชส้ าหรบั การกาหนดขนาดของเสน้ ขอบของภาพ แฟม้ เอกสารทีเ่ ป็นภาษาเอชทเี อ็มแอล (HTML) นนั้ เป็นแฟ้มขอ้ มลู ชนิดขอ้ ความ รูปแบบหน่งึ (Text Files) ที่เก็บชดุ คาส่งั ภาษาเอชทีเอ็มแอล ดงั นนั้ การสรา้ งเอกสารเอชทีเอ็มแอล ซึ่งสามารถ ใชโ้ ปรแกรม สาหรบั จดั การแฟม้ ขอ้ มลู ตวั อกั ษร (Text Editor) ท่วั ไปในการแกไ้ ขเอกสารเอชทีเอม็ แอล เช่น โปรแกรม NotePad, โปรแกรม WordPadThai เป็นตน้ โครงสร้างพนื้ ฐานของภาษา HTML ความหมายและความเป็ นมาของภาษา HTML HTML ย่อมาจากคาว่า HyperText Markup Language เป็นภาษาหลกั ในการ สรา้ งเว็บเพจ โดยมแี นวคิดจากการสรา้ งเอกสารไฮเปอรเ์ ท็กซ์ (Hypertext Document: ขอ้ ความในเอกสารท่ีเชื่อมโยงถึงขอ้ มลู ต่าง ๆ ได)้ ซ่งึ พฒั นามาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee ใน ปี ค.ศ.1990 ซ่ึงใชใ้ นระบบของ CERN (Conseil Europeen pour la Recherche Nucleaire) เบือ้ งตน้ ไดเ้ ริม่ ใชใ้ นประเทศสวติ เซอรแ์ ลนด์ จากนน้ั กไ็ ดแ้ พรข่ ยายออกไป ระบบนไี้ ดถ้ กู ตงั้ ชื่อว่า World Wide Web ( WWW ) ท่ีเรารูจ้ กั กนั มาจนถงึ ปัจจบุ นั

ภาษา HTML ไดร้ บั การพฒั นาและนาไปใช้อย่างแพรห่ ลายจึงทาใหเ้ กดิ มาตรฐานในเวอรช์ ่ันตา่ งๆ ดังนี้ เกิดขนึ้ ในปี ค.ศ.1993 โดย Tim Berners-Lee และ Dave HTML Raggett ไดก้ าหนดใหเ้ อกสาร HTML ท่ีไดพ้ ฒั นาขนึ้ แมจ้ ะเขยี น 1.0 มาตรฐานใด ๆ ก็ตาม ตอ้ งสามารถอ่านได้ เกดิ ขนึ้ ในปี ค.ศ. 1995 โดย IETF (Internet Engineering HTML Task ForceX) ซึ่งมมุ่ หวงั ใหส้ ามารถ เปิดแสดงผลกบั บราวเซอรท์ ี่ 2.0 ใชง้ านท่วั ไปได้ เกิดขนึ้ ในปี ค.ศ. 1995 ไดพ้ ฒั นา HTML ใหม้ คี วามสามารถ เพมิ่ ขนึ้ โดยเพ่ิมการทางานทีเ่ ก่ยี วกบั ตาราง การปรบั ขอ้ ความลอ้ มรอบ HTML ภาพ และแสดงส่วนทมี่ ีความสบั ซอ้ นไดด้ ีขนึ้ รวมทงั้ ช่วยใหเ้ บราวเ์ ซอร์ 3.0 ยอ้ นกลบั ไปดเู ว็บเพจหนา้ ทผี่ า่ นมาหรือหนา้ ทเี่ คยเขา้ ชมมากอ่ นหนา้ ได้ ดกี ว่าเวอรช์ ่นั 2.0 หรือทเี่่ี รียกวา่ Backward เกดิ ขนึ้ ในปี ค.ศ. 1996 ไดม้ กี ารเพ่มิ คาส่งั และคณุ สมบตั ิต่าง ๆ ที่ HTML สามารถทางานรว่ มกบั หลาย ๆ เบราวเ์ ซอรไ์ ดม้ ากขนึ้ และมีชอ่ื เรยี กโคด้ 3.2 แบบนีว้ า่ \"Wibur\" เกิดขนึ้ ในปี ค.ศ. 1997 องคก์ รกลางที่ชอ่ื ว่า W3C (The World HTML Wide Web Consortium) ไดม้ ีการพฒั นาและดแู ลมาตรฐาน 4.0 ของภาษา HTML เพื่อพฒั นาเทคโนโลยี WWW ใหล้ า้ หนา้ ย่ิงขนึ้ โดยมกี ารเพิ่มประสทิ ธิภาพในการทางานดว้ ย Style Sheet ,

Frame , การฝ่ังออบเจคตข์ องโปรแกรมเสรมิ เพ่อื แสดงภาพและ เสยี ง การสรา้ งฟอรม์ และการใชง้ านรว่ มกบั ภาษา Script ต่าง ๆ เกิดขนึ้ ในปี ค.ศ. 1997 มีการปรบั ปรุงขอ้ ผดิ พลาดต่าง ๆ ใหด้ ขี นึ้ หลงั จาก HTML 4.01 องคก์ ร W3C ไดห้ ยดุ พฒั นา HTML HTML โดยเปล่ียนไปพฒั นาภาษามาตรฐานใหมท่ ่ชี ือ่ วา่ XHTML เพ่ือใชใ้ น 4.01 การสรา้ งเวบ็ เพจ เพ่อื จะขยายการใชเ้ ว็บส่อู ปุ กรณต์ ่าง ๆ เพิม่ มากขนึ้ แต่ ยงั คงใหเ้ บราวเ์ ซอรใ์ ชง้ านโปรแกรมภาษา HTML ไดเ้ ช่นเดิม ก่อนที่จะมาถึง XHTML ทาง W3C ผพู้ ฒั นาเทคโนโลยี ไดพ้ บ ขอ้ จากดั ของ HTML จึงไดส้ รา้ งภาษามาตรฐานใหม่ ชอื่ วา่ XML สามารถใชไ้ ดห้ ลายแพลตฟอรม์ ต่อมาเมือ่ มคี วามตอ้ งการใหก้ ารเขยี น เวบ็ เพจมีรูปแบบท่ีรดั กมุ มากยง่ิ ขนึ้ จึงไดร้ วบรวมคาส่งั HTML 4.0 กบั มาตรฐานของ XML เขา้ ไวด้ ว้ ยกนั เกดิ เป็นภาษา HTML ทม่ี ี XHTML กฎระเบยี บมากย่งิ ขนึ้ และตงั้ ช่ือใหมเ่ ป็น XHTML (Extensible HyperText Markup Language) คาส่งั ตา่ ง ๆ ใน XHTML ยงั สามารถใชค้ าส่งั ในภาษา HTML 4.0 ได้ แตม่ กี ารเพม่ิ คาส่งั ใหม่และการจดั ระเบยี บการใชค้ าส่งั ใหม้ ีความ แนน่ อนมากยง่ิ ขนึ้ ลักษณะของภาษา HTML องคป์ ระกอบของภาษา HTML สามารถแบง่ ออกได้ 2 ส่วน คอื

1.สว่ นทเี่ ป็นขอ้ ความท่วั ๆ ไป 2.สว่ นทเ่ี ป็นคาส่งั ทใ่ี ชใ้ นการกาหนดรูปแบบของขอ้ ความท่ีแสดง ซึง่ เราเรยี ก คาส่งั เหลา่ นวี้ า่ แท็ก (Tag) โดยแทก็ หรอื คาส่งัั ของภาษา HTML จะอยใู่ นเคร่อื งหมาย < > ซึ่งมหี ลกั ในการ เขียนดงั นี้ หลักในการเขยี นคาส่งั หรอื แท็กในภาษา HTML 1.รูปแบบแท็กจะแยกออกเป็น 2 สว่ น คือแทก็ เริ่มตน้ เรียกว่า \"แท็กเปิด\" และส่วนจบ ของแทก็ เรียกว่า \"แทก็ ปิด\" แทก็ ปิดจะตอ้ งมเี คร่อื งหมาย Slash (/) ดงั นี้ <แทก็ เปิด>ขอ้ ความ......</แทก็ ปิด> เชน่ <title>ขอ้ ความที่ตอ้ งการใหป้ รากฎใน แถบหวั เรอื่ ง </title> 2.บางแท็กอาจไมต่ อ้ งมีแทก็ ปิดก็สามารถใชง้ านได้ เชน่ คาส่งั ขนึ้ บรรทดั ใหม่ <br> 3.เราสามารถพมิ พต์ วั อกั ษรเป็นตวั เล็ก หรือใหญก่ ไ็ ด้ (เวอรช์ ่นั 4.0 ขนึ้ ไป) เช่น <HTML>, <Html>, <html> จะมี ความหมายเหมือนกนั แตแ่ นะนาใหใ้ ชต้ วั อกั ษรตวั เล็กทงั้ หมด เพ่ือรองรบั กบั มาตรฐานของ XHTML ตอ่ ไป 4.บางแทก็ จะมตี วั กาหนดคณุ สมบตั ิ ท่ีเรียกว่า แอตทริบวิ ท์ (Attribute) และมี คา่ ที่ถกู กาหนดใหใ้ ชใ้ นแทก็ (Value) โดยจะเขียนไวห้ ลงั แทก็ เช่น

<hr width=600 size=5> แทก็ hr เป็นการกาหนดเสน้ ขนั้ ทางแนวนอน แอททรบิ ิวต์ width กาหนดคณุ สมบตั ิความยาวของเสน้ แอททริบวิ ต์ size คือการกาหนดความหนาของเสน้ คา่ ทีก่ าหนดใหใ้ ช้ 600 เป็นคา่ ความยาวของเสน้ ค่าที่กาหนดใหใ้ ช้ 5 คือเสน้ มีความหนา 5 จดุ (Pixel) โครงสรา้ งพนื้ ฐานของภาษา HTML มดี ังนี้ โครงสรา้ งของภาษา HTML ประกอบด้วย 3 ส่วน คือ

1. สว่ นทีก่ าหนดใหเ้ ว็บเบราวเ์ ซอรท์ ราบวา่ เป็นแฟม้ ขอ้ มลู ชนดิ HTML ซง่ึ จะมแี ทก็ <html>…</html> กากบั อย่ทู จ่ี ดุ เร่มิ ตน้ และจดุ สนิ้ สดุ ของ แฟ้มขอ้ มลู 2. ส่วนหวั เร่อื ง (Head) เป็นส่วนทก่ี าหนดใหแ้ สดงขอ้ ความที่แถบหวั เรอ่ื ง ของหนา้ เวบ็ เพจนนั้ ๆ เชน่ แทก็ <title>.... </title> และเกบ็ แทก็ พิเศษอนื่ ๆ 3. สว่ นเนอื้ หา (Body) เป็นสว่ นทีแ่ สดงเนอื้ หาของเวบ็ เพจทงั้ หมดซึ่ง ประกอบดว้ ย ขอ้ ความและแทก็ ตา่ ง ๆ เชน่ แท็กสาหรบั จดั การกบั รูปแบบของ ขอ้ ความ ตาราง รูปภาพ กราฟิ กต่างๆ สีของตัวอกั ษร สพี นื้ เป็นตน้ ความหมายของคาส่ัง หรือแทก็ ต่างๆ ในโครงสร้างของภาษา HTML (ซงึ่ ตอ้ งมีคาส่งั หรือแท็ก 4 ส่วนนเี้ ป็นหลกั ในเวบ็ เพจทกุ ๆ หนา้ ) <html> หมายถงึ แสดงถึงจดุ เร่ิมตน้ และจดุ สนิ้ สดุ ของภาษา ..... HTML ..... </html> <head> หมายถงึ กาหนดรายละเอียดส่วนหวั เอกสาร HTML เช่น ..... <title>......</title> ..... </head> หมายถึง กาหนดช่อื เว็บเพจในแถบหวั เรอ่ื ง หรอื ทเ่ี รียกวา่ ไต <title>...</title> เตลิ้ บาร์ ของหนา้ ตา่ งเว็บเพจ

<body> หมายถงึ สว่ นทมี่ ไี วส้ าหรบั ใหผ้ เู้ ขียนเว็บเพจใสค่ าส่งั หรอื .... แทก็ ต่าง ๆ บางครง้ั อาจเรียกวา่ \"โคด้ \" (Code) เชน่ คาส่งั </body> แสดงรูปภาพ, การกาหนดสีตวั อกั ษร, การทาอกั ษรวิ่ง, การสรา้ งตาราง, การทาชดุ เชอ่ื มโยง เป็นตน้ ตัวอยา่ งเขยี นเว็บเพจดว้ ยภาษา HTML <html> <head> <title>ขอ้ ความท่ีตอ้ งการใหแ้ สดงในแถบหวั เรอ่ื ง</title> </head> <body> คาส่งั ในภาษา HTML ในการสรา้ งเวบ็ เพจ </body> </html> ขอ้ ควรจา...! โครงสรา้ งหรอื รูปแบบของภาษา HTML นตี้ อ้ งมอยใู่ นทกุ ๆ หนา้ ของการสรา้ งเวบ็ เพจ ทดลองสร้างเว็บเพจอย่างงา่ ยๆ ทดลองสรา้ งเวบ็ เพจอย่างง่ายตามขนั้ ตอนต่อไปนี้ 1.สร้าง Folder สาหรบั เก็บข้อมูลทีไ่ ดรฟ์ D: ช่อื HTML1

ใหน้ กั เรียนสรา้ งโฟลเ์ ดอร์ (Folder) สาหรบั เก็บขอ้ มลู ต่าง ๆ ในไดรฟ์ D: ช่ือ HTML1 (ถา้ หากนกั เรยี นเคยสรา้ งโฟลเดอรด์ งั กลา่ วไวแ้ ลว้ ในเรื่องทผ่ี ่านมาก็ไมต่ อ้ ง สรา้ งใหม)่ 2.เปิ ดโปรแกรม Notepad และนาคาส่งั (Tag) ตอ่ ไปนไี้ ปใส่ในโปรแกรมและ ทาการจัดเกบ็ (Save) ชื่อ MyWeb2.html (นกั เรยี นจะพิมพใ์ หม่ หรือใชก้ ารคดั ลอก (Copy) ก็ได)้ <html> <head> <title>การสรา้ งเวบ็ เพจอยา่ งง่าย...</title> </head> <body> เวบ็ เพจ หมายถึง หนา้ เอกสาร HTML หนา้ ตา่ ง ๆ โฮมเพจ หมายถงึ หนา้ เอกสาร HTML หนา้ แรกของเวบ็ ไซต์ เวบ็ ไซต์ หมายถงึ กลมุ่ ของโฮมเพจและเวบ็ เพจ หรือแหล่งขอ้ มลู องคก์ รต่าง ๆ </body> </html> 3. แสดงผลการทางานในข้อ 2 โดยใชโ้ ปรแกรม Internet Explorer

เปิดโปรแกรม Internet Explorer และเปิดหนา้ เวบ็ เพจจากขอ้ 2 ชอ่ื MyWeb2.html ทีเ่ ก็บในไดรฟ์ D:โฟลเดอร์ HTML1 ขนึ้ มาแสดงผลการทางานโดยขยายหนา้ ต่างการแสดงผลใหเ้ ตม็ จอภาพ และ ใหส้ งั เกตความสมั พนั ธข์ องคาส่งั ในภาษา HTML กบั ผลการทางานในโปรแกรม Internet Explorer เพื่อเปรียบเทยี บ กบั การเพิม่ คาส่งั ใหมต่ อ่ ไป ทาการแก้ไขเวบ็ เพจเดิม (MyWeb2.html) โดยเพมิ่ คาส่ัง สนี ้าเงนิ ตามตวั อย่าง ต่อไปนี้ <html> <head> <title>การสรา้ งเวบ็ เพจอย่างงา่ ย...</title> </head> <body> <center><b>การสรา้ งเว็บเพจดว้ ยภาษา HTML</b></center> <hr> เวบ็ เพจ หมายถึง หนา้ เอกสาร HTML หนา้ ตา่ ง ๆ <br> โฮมเพจ หมายถึง หนา้ เอกสาร HTML หนา้ แรกของเว็บไซต์ <p> เว็บไซต์ หมายถงึ กลมุ่ ของโฮมเพจและเว็บเพจ หรอื แหล่งขอ้ มลู องคก์ รตา่ ง ๆ <br> </body>

</html> คาอธิบายหน้าท่ีของตวั อยา่ งคาส่งั หรือแท็กต่าง ๆ เพิ่มเติม คาส่งั หรือแทก็ (Tag) ความหมายหรือหน้าท่ขี องคาส่ัง เป็นแทก็ ทีใ่ ชค้ วบคมุ ตาแหนง่ ขอ้ ความใหอ้ ยกู่ ลางจอภาพ <center>...</center> ตอ้ งมแี ท็กเิิปิด <center> </center> บางครง้ั เรียง และทา้ ยขอ้ ความตอ้ งมแี ท็กปิด แทก็ ลกั ษณะนวี้ า่ แทก็ คู่ <b>...</b> เป็นแท็กท่ีใชส้ าหรบั กาหนดใหต้ วั อกั ษรเป็นตวั หนา (Bold) ตอ้ งมแี ทก็ เปิด <b> และมีแท็กปิด </b> เป็นแท็กท่ใี ชส้ าหรบั กาหนดเสน้ แนวนอน เป็นแทก็ ว่างหรือ บางครงั้ เรียกวา่ แท็กเดี่ยว สามารถใชไ้ ดเ้ ลยไมต่้ อ้ งมแีี ท็กเปิดและแทก็ ปิด (ถา้ หากเป็น <hr> XHTML จะเปล่ียนเป็น รูปแบบอน่ื ๆ เช่น <hr /> ซ่งึ จะตอ้ งศกึ ษาเพ่มิ เติม ในทนี่ จี้ ะ กลา่ วเฉพาะ ภาษา HTML เทา่ นน้ั ) <br> เป็นแท็กที่ใชส้ าหรบั ขนึ้ บรรทดั ใหม่ เป็นแท็กทส่ี ามารถใชไ้ ด้ โดยไม่ตอ้ งมีแท็กเปิด

และแท็กปิด เน่ืองจากเป็นแท็กว่าง คือไม่มขี อ้ มลู สว่ นอน่ื มา ตอ่ ทา้ ย เป็นแท็กที่ใชส้ าหรบั ขนึ้ ยอ่ หนา้ ใหม่ เป็นแท็กทสี่ ามารถใชไ้ ด้ <p> โดยไมต่ อ้ งมีแทก็ เปิด และแท็กปิด เนื่องจากเป็นแท็กว่าง คอื ไม่มีขอ้ มลู สว่ นอน่ื มา ตอ่ ทา้ ย ขอ้ ควรจา...! ควรฝึกการใชค้ าส่งั หรือแท็กอย่างเป็นระเบยี บ เพอ่ื เตรียมพรอ้ มและรองรบั การใชง้ าน XHTML ต่อไป ในกรณีที่เราตอ้ งการใชแ้ ท็กซอ้ นกนั มากกวา่ 1 แทก็ เราจะตอ้ งปิดแท็กในสดุ กอ่ นแลว้ จงึ ปิดแท็กอืน่ ๆ ตามลาดบั ดงั ตวั อย่างตอ่ ไปนี้ เป็นตวั อย่างที่ถกู ตอ้ ง มกี ารปิดจากแทก็ ในสดุ ก่อนคือ <u>..</u>

เป็นตวั อย่างทไ่ี มค่ วรทา แต่ยงั สามารถใชง้ านไดใ้ นภาษา HTML นกั เรียนควรใชใ้ นรูปแบบแรก นอกจากความเป็นระเบยี บแลว้ ยงั รองรบั การใช้ XHTML ในการพฒั นาเวบ็ เพจต่อไปในอนาคต คาส่งั เบือ้ งตน้ สาหรับการสรา้ งเว็บเพจ คาส่งั เริม่ ต้น คาส่งั เรม่ิ ตน้ ท่ใี ชส้ าหรบั การบอกวา่ เอกสารนน้ั คือเอกสารเวบ็ ทเ่ี ป็นภาษาเอชทเี อม็ แอลคือคาส่งั <HTML> และใชค้ าส่งั </HTML> เป็นการบอกจดุ สนิ้ สดุ ของเอกสารเอชทเี อ็มแอล โดยคาส่งั นจี้ ะไมแ่ สดงผล ในโปรแกรมเว็บเบราวเ์ ซอร์ แต่เขยี นเพื่อบอกใหท้ ราบว่าเอกสารนเี้ ป็นเอกสารของภาษาเอชทเี อ็มแอล (HTML) กลา่ วคือขอ้ ความทีอ่ ย่รู ะหว่างคาส่งั <HTML> และ </HTML> เป็นเอกสารท่ีเป็นภาษาเอชทเี อม็ แอลน่นั เอง <HTML> (ภาษาเอชทีเอ็มแอล) </HTML> คาส่ังกาหนดสว่ นหัวของเอกสารเว็บ ส่วนหวั เร่อื งของเอกสารเวบ็ และสว่ นเนอื้ หาเอกสารเวบ็ โดยคาส่งั ที่ใชบ้ อกส่วนหวั เรือ่ งของเอกสารเว็บนน้ั คือคาส่งั <HEAD>…</HEAD> ซ่งึ คาส่งั ทอ่ี ย่ภู ายในสว่ นหวั ของเอกสารเวบ็ นนั้ เป็นคาส่งั ท่ใี ช้ กาหนดขอ้ ความทเี่ ป็นชอื่ เร่ือง

ของเอกสารเอชทีเอม็ แอล และคาส่งั ที่ใชส้ าหรบั บอกคาสาคญั (Keyword) เอกสาร เอชทเี อม็ แอล เพอื่ ใชใ้ นการ คน้ หาเอกสารนนั้ บนระบบเครือข่ายอินเทอรเ์ น็ต <HEAD> (คาส่งั ยอ่ ยสาหรบั สว่ นหวั ของเอกสาร) </HEAD> คาส่ังกาหนดข้อความในส่วนหวั ของโปรแกรมเวบ็ เบราวเ์ ซอร์ คาส่งั ทใี่ ชส้ าหรบั กาหนดขอ้ ความทีจ่ ะปรากฏบนส่วนหวั ของโปรแกรมเว็บเบราวเ์ ซอร์ คอื คาส่งั <TITLE>…</TITLE> หากตอ้ งการใหข้ อ้ ความใดปรากฏทตี่ าแหนง่ สว่ นหวั ของโปรแกรมเวบ็ เบราวเ์ ซอร์ ทา ไดโ้ ดยเอาขอ้ ความทตี่ อ้ งการ แสดงผลนน้ั ใสเ่ ขา้ ไประหว่างคาส่งั เปิด <TITLE> และคาส่งั ปิด </TITLE> ซ่ึงคาส่งั นี้ จะอยใู่ นส่วนหวั ของเอกสารเว็บ <TITLE> (ขอ้ ความท่ตี อ้ งการใหป้ รากฏทีส่ ่วนหวั ของโปรแกรมเว็บเบราวเ์ ซอร)์ </TITLE> คาส่งั กาหนดส่วนเนือ้ หาของเอกสารเว็บ คาส่งั ทีใ่ ชก้ าหนดสว่ นทีเ่ ป็นเนอื้ หาของเอกสารเวบ็ คือ คาส่งั <BODY>…</BODY> ซึง่ ใชเ้ ป็นคาส่งั สาหรบั บอกแก่โปรแกรมเว็บเบราวเ์ ซอรว์ า่ ส่วนทอ่ี ยรู่ ะหว่างคาส่งั นเี้ ป็นสว่ นทจี่ ะนาไป แสดงผลบนโปรแกรมเวบ็ เบราวเ์ ซอร์ ซึง่ อาจประกอบไปดว้ ย ตวั อกั ษร รูปภาพ เป็นตน้ การกาหนดสีของพนื้ หลังและสีของตัวอักษร

การกาหนดสีพนื้ หลงั และการกาหนดสขี องตวั อกั ษรของเอกสารเว็บนน้ั สามารถทาได้ โดยกาหนดเป็นการอธิบายลกั ษณะพิเศษ (Attribute) ของคาส่งั <BODY> โดยมวี ิธีการกาหนดสขี องพนื้ หลงั ของเอกสารและสี ของตวั อกั ษรในเอกสารไดด้ งั นี้ การกาหนดสขี องพืน้ หลังเอกสาร การกาหนดสพี นื้ หลงั ของเอกสารเว็บหรอื เอกสารเอชทีเอ็มแอล นน้ั สามารถทาไดโ้ ดย ใชก้ ารอธิบายลกั ษณะพเิ ศษ (Attribute) คือ BGCOLOR ซ่งึ การกาหนดสีพนื้ ของเอกสารเอชทเี อม็ แอลนน้ั สามารถกาหนด ภายใตค้ าส่งั เปิดของคาส่งั <BODY> โดยการกาหนดสพี นื้ หลงั ของเอกสารเอชทเี อม็ แอลสามารถแสดงไดด้ งั นี้ <BODY BGCOLOR = สที ่ีตอ้ งการ> จะมี “สีทต่ี อ้ งการ” หรือไมม่ ีเครือ่ งหมาย “ “ ก็ ได้ </BODY> โดยสีทต่ี อ้ งการกาหนดนี้ สามารถทาการกาหนดได้ 2 วิธี คอื - ระบชุ ือ่ ของสที ต่ี อ้ งการ เช่น Blue , Green , Red , Yellow เป็นตน้ - ระบตุ วั เลข โดยใชก้ ารกาหนดคา่ สีในระบบเลขฐาน 16 จานวน 6 หลกั สาหรบั การ ผสมสี (RGB) โดยค่าตวั เลข 2 หลกั แรกหมายถงึ ระดบั ของสีแดง ตวั เลข 2 หลกั ต่อมาหมายถึงระดบั ของสเี ขียว และ ตวั เลข 2 หลกั สดุ ทา้ ยหมายถงึ ระดบั ของสนี า้ เงนิ

การกาหนดสขี องตัวอักษร การกาหนดสขี องตวั อกั ษรทงั้ หมดของเอกสารเวบ็ หรอื เอกสารเอชทเี อม็ แอลนน้ั สามารถทาไดโ้ ดยใช้ การอธิบายลกั ษณะพิเศษ (Attribute) คือ TEXT ซึ่งกาหนดอยทู่ ่ตี าแหนง่ คาส่งั เปิด ของคาส่งั <BODY> รูปแบบของคาส่งั สาหรบั การกาหนดสขี องเอกสารเวบ็ สามารถทาไดด้ งั นี้ <BODY TEXT = สที ตี่ อ้ งการ> จะมีเครื่องหมาย \" \" หรือไมม่ ีกไ็ ด้ ........ </BODY> โดยสที ี่ตอ้ งการกาหนดนี้ สามารถทาการกาหนดได้ 2 วิธี คือ - ระบชุ ่ือของสีทีต่ อ้ งการ เชน่ Blue , Green , Red , Yellow เป็นตน้ - ระบตุ วั เลข โดยใชก้ ารกาหนดค่าสีในระบบเลขฐาน 16 ตัวอยา่ ง การกาหนดสีตวั อกั ษรของเอกสารเอชทีเอม็ แอล โดยการระบชุ ่ือ <HTML> <HEAD> <TITLE>การกาหนดสขี องตวั อกั ษร โดยการกาหนดสี</TITLE> </HEAD> <BODY TEXT = Red> การกาหนดสขี องตวั อกั ษร โดยการกาหนดใหเ้ ป็นสแี ดง

</BODY> </HTML>