1 บทที่ 1 อนิ เทอรเ์ นต็ เบ้ืองตน้ และโครงสร้างของการเขียน HTML/HTML5สาระการเรียนรู้ 1.1 อนิ เทอร์เน็ต (Internet) 1.2 การเชือ่ มตอ่ กับเครือขา่ ยอนิ เทอร์เนต็ 1.3 เวิลดไ์ วด์เว็บ (World Wide Web : WWW) 1.4 ชื่อโดเมนเนม ในระบบอินเทอร์เนต็ 1.5 โครงสรา้ งของเวบ็ ไซต์ 1.6 ภาษา HTML 1.7 ขั้นตอนการเขียนโปรแกรมด้วยภาษา HTML เบ้อื งต้น 1.8 ความรเู้ ก่ยี วกับ HTML 5จดุ ประสงคก์ ารเรียนรู้ เพื่อให้ผู้เรียน 1. อธบิ ายความเป็นมาของอนิ เทอร์เนต็ ได้ 2. อธบิ ายการเช่อื มต่อกับเครือข่ายอนิ เทอร์เนต็ ได้ 3. อธบิ ายสว่ นประกอบและหลกั การทางานพน้ื ฐานของเวลิ ด์ไวดเ์ ว็บได้ 4. อธบิ ายชอื่ โดเมนเนม ในระบบอนิ เทอร์เน็ตได้ 5. อธบิ ายโครงสรา้ งของเวบ็ ไซต์ได้ 6. อธิบายรูปแบบของภาษา HTML และโครงสร้างไฟล์ HTML ได้ 7. อธิบายขนั้ ตอนการเขียนโปรแกรมด้วยภาษา HTML เบื้องตน้ ได้ 8. อธบิ ายหลักการทางานพน้ื ฐาน HTML 5 ได้ บทท่ี 1 อินเทอรเ์ น็ตเบื้องตน้ และโครงสรา้ งของการเขียน HTML
2 แบบประเมินผลก่อนเรียน บทท่ี 1 เรือ่ ง อนิ เทอรเ์ นต็ เบ้ืองต้นและโครงสรา้ งของการเขยี น HTML/HTML5คาชี้แจง จงเลอื กคาตอบที่ถกู ต้อง แลว้ กาเคร่ืองหมาย ลงในกระดาษคาตอบ1. ข้อใดไมใ่ ช่อปุ กรณส์ าหรับเชือ่ มต่อระบบอนิ เทอร์เน็ต ก. โมเดม็ ข. เครื่องไมโครคอมพิวเตอร์ ค. คู่สายโทรศัพท์ ง. บญั ชีการเงิน2. ความหมายของอินเทอร์เนต็ คอื ข้อใด ก. เครือข่ายขนาดใหญ่ท่ีเช่ือมต่อกนั ท่ัวโลก ใชม้ าตรฐานรับสง่ ขอ้ มลู เดยี วกนั คือ TCP/IP ข. เครือขา่ ยขนาดใหญ่ทเ่ี ช่ือมต่อกนั ทว่ั โลก ใช้มาตรฐานรบั ส่งข้อมลู ตามเง่ือนไขของแตล่ ะ ประเทศ ค. เครือข่ายขนาดใหญท่ ีเ่ ช่ือมต่อกันทั่วโลก ใชม้ าตรฐานรบั ส่งขอ้ มลู เดียวกัน คือ TCP/PI ง. เครือข่ายขนาดใหญ่ท่ีเช่ือมต่อกันทวั่ โลก ใช้มาตรฐานรบั สง่ ข้อมลู เฉพาะกลุ่มอาเซียน3. โครงการอารพ์ าเน็ต (APRAnet) ขอ้ ใดกลา่ วถูกตอ้ ง ก. โครงการพัฒนาระบบเช่ือมต่อเครอื ข่ายการสื่อสาร ข. โครงการพัฒนาระบบเครือขา่ ยอนิ เทอร์เน็ต ค. โครงการพัฒนาระบบโทรศพั ท์ ง. โครงการพัฒนาระบบสบื คน้ ขอ้ มลู ระหวา่ งประเทศ4. การเช่อื มต่ออนิ เทอร์เน็ตแบง่ ตามลักษณะการเชือ่ มต่อได้ก่ีลักษณะ ก. 2 ลักษณะ ข. 3 ลกั ษณะ ค. 4 ลักษณะ ง. 5 ลักษณะ บทท่ี 1 อินเทอร์เน็ตเบ้ืองต้นและโครงสร้างของการเขียน HTML
35. www. มคี วามหมายตรงกับขอ้ ใด ก. บรกิ ารข้อมลู ทางระบบการเงนิ ในอนิ เทอร์เนต็ ข. บริการสืบคน้ สารสนเทศทอี่ ยูใ่ นอินเทอรเ์ นต็ ค. บรกิ ารข้อมูลระหว่างประเทศสมาชิก ง. บรกิ ารสืบคน้ ข้อมูลทางโทรคมนาคมระหว่างประเทศ6. ความหมายโดเมนเนม ขอ้ ใดกล่าวถกู ต้อง ก. ชอื่ หมายเลขผ้ใู ช้อินเทอร์เนต็ ข. ช่อื หมายเลขโทรศัพท์ ค. ชอ่ื ที่ถูกเรยี กเป็นหมายเลขอินเทอร์เนต็ ง. ช่อื เวบ็ ไซตท์ ี่สามารถซ้ากนั ได้7. ขอ้ ใดคอื รปู แบบภาษา HTML ก. รปู แบบ Tag เดี่ยวคอื <br> ข. รูปแบบ Tag เดยี่ วคอื <html>…</html> ค. รูปแบบ Tag เด่ียวคือ <head>…<head> ง. รปู แบบ Tag เด่ยี วคือ <i>…</i>8. ชือ่ โดเมนเนม ใดไมใ่ ชช่ อื่ โดเมนเนม ในประเทศไทย ก. *.co ข. *.ac ค. *.go ง. *.au9. ขอ้ ใดไม่ใช่โครงสรา้ งของเวบ็ ไซต์ ก. โครงสรา้ งของเว็บไซต์ในมมุ มองการจดั การไฟลเ์ ว็บเพจ ข. โครงสรา้ งของเว็บไซตใ์ นมมุ มองการเชอ่ื มโยงไฟลเ์ วบ็ เพจ ค. โครงสรา้ งของเวบ็ ไซตใ์ นมมุ มองการเชือ่ มโยงการสือ่ สาร ง. โครงสร้างของเว็บไซต์ท่ีเน้นการเช่ือมโยงของไฟลเ์ ว็บเพจต่างๆ10. ข้อใดไม่ใช่ขั้นตอนการเขียนโปรแกรม HTML ก. สร้างโฟลเดอร์ ข. เปดิ โปรแกรม Notepad ค. เรยี กดผู ลลัพธเ์ วบ็ บราวเซอร์ ง. รปู แบบการพมิ พข์ ้อมูลตา่ งๆ บทท่ี 1 อนิ เทอรเ์ น็ตเบอ้ื งตน้ และโครงสรา้ งของการเขียน HTML
4 การนาเครื่องคอมพวิ เตอร์และอุปกรณต์ า่ งๆ นามาเชื่อมตอ่ กันเปน็ เครือข่ายคอมพิวเตอร์ก่อใหเ้ กดิ ระบบเครือขา่ ยคอมพิวเตอร์รูปแบบต่างๆ ในปัจจุบนั ระบบเครือขา่ ยทไ่ี ด้รบั ความนิยมมากที่สดุ คอื ระบบเครือข่ายอินเทอร์เนต็ ภาษาท่ใี ชใ้ นการสรา้ งเวบ็ เพจใชภ้ าษาเอชทีเอ็มแอล(HTML) โดยการศกึ ษารปู แบบการเขยี นตามโครงสร้างของภาษา บทท่ี 1 อินเทอร์เน็ตเบอ้ื งตน้ และโครงสรา้ งของการเขียน HTML
5 ผงั มโนทศั น์ บทที่ 1รายวิชา การเขยี นเว็บเพจด้วยภาษา HTML รหัสวิชา 3204 – 2201 อนิ เทอร์เน็ต ความหมายของอนิ เทอร์เน็ต การเชื่อมตอ่ กบั เครือขา่ ยอนิ เทอร์เนต็ ความเปน็ มาของอินเทอร์เนต็ ประวตั คิ วามเป็นมาของชอื่ โดเมนเนม ในระบบอินเทอร์เน็ต อนิ เทอร์เน็ตในประเทศไทย ช่ือโดเมนเนม หมายถึง อุปกรณส์ าหรบั การเชอ่ื มต่อ ประเภทของ โดเมนเนม อนิ เตอร์เนต็ แบ่งตามลกั ษณะการเชือ่ มตอ่ อินเทอร์เนต็ เบ้อื งตน้ และโครงสรา้ งของเวบ็ ไซต์ โครงสร้างของการเขยี น เวลิ ดไ์ วด์เวบ็ HTML/HTML5 ความหมายเวลิ ด์ไวด์เว็บโครงสรา้ งของเวบ็ ไซตใ์ นมุมมอง หลกั การทางานพืน้ ฐานของ การจดั การไฟล์เวบ็ เพจ เวลิ ด์ไวดเ์ วบ็โครงสรา้ งของเวบ็ ไซตใ์ นมุมมอง ขัน้ ตอนการเขยี นโปรแกรม การเช่ือมโยงไฟล์เว็บเพจ เรียกดูผลลพั ธ์ทเี่ ว็บบราวเซอร์ ภาษา HTML รปู แบบของภาษา HTML ความหมายของอินเทอร์เน็ต ข้อกาหนดการเขยี นคาสั่ง ความรูเ้ ก่ียวกบั HTML 5 ความเปน็ มาของอินเทอร์เนต็ ประวตั ิความเป็นมาของ คุณสมบตั ิเพิ่มเติมอนิ เทอร์เน็ตในประเทศไทย บราวเซอร์ทสี่ นบั สนนุ การใช้งาน โครงสรา้ งพ้นื ฐาน รปู แบบการเขยี นโปรแกรมภาษา บทท่ี 1 อินเทอร์เน็ตเบอื้ งตน้ และโครงสร้างของการเขียน HTML
6 บทที่ 1 อินเทอร์เนต็ เบ้ืองต้นและโครงสรา้ งของการเขยี น HTML/HTML5 การนาเครอื่ งคอมพวิ เตอร์ และอุปกรณ์ตา่ งๆ เช่ือมต่อกนั เป็นเครือข่ายคอมพิวเตอร์กอ่ ให้เกิดระบบเครือข่ายคอมพิวเตอรใ์ นรูปแบบตา่ งๆ ปจั จบุ นั ระบบเครือขา่ ยท่ีได้รับความนิยมมากทีส่ ดุ คอื ระบบเครือข่ายอนิ เทอร์เน็ต ซง่ึ เปน็ ระบบเครอื ขา่ ยทส่ี ามารถรบั สง่ ข้อมลู ขา่ วสารโดยไมม่ ขี ้อจากดั เรอ่ื งระยะทาง เทคโนโลยเี วลิ ด์ไวดเ์ ว็บนน้ั เป็นสว่ นสาคญั ท่ที าให้ระบบเครือข่ายอนิ เทอร์เน็ตมคี วามนิยมสูง และพ้ืนฐานสาคญั ของเทคโนโลยเี วลิ ดไ์ วด์เว็บ คือ ภาษาเอชทเี อ็มแอลซ่งึ เปน็ ภาษาทีใ่ ชส้ าหรับการแสดงข้อมลู ข่าวสารต่างๆ บนบราวเซอร์ (Browser) 1.1 อนิ เทอร์เนต็ (Internet) 1.1.1 ความหมายของอินเทอรเ์ น็ต มผี ู้ใหค้ วามหมายคาว่า “อินเทอร์เน็ต” ดงั น้ี อนิ เทอร์เน็ต (Internet : International network หรือ Inter Connection network หมายถึงการประยุกต์คอมพิวเตอร์ โดยการเชื่อมต่อเป็นเครือข่ายคอมพิวเตอร์ขนาดใหญ่ท่ีเชื่อมโยงเครือข่ายคอมพิวเตอร์ท่ัวโลกเข้าไว้ด้วยกัน เพื่อให้เกิดการส่ือสาร และการแลกเปล่ียนข้อมูลร่วมกัน ผ่านส่ือกลางโดยอาศัยตัวเช่ือมเครือข่ายภายใต้มาตรฐานการเช่ือมโยงเดียวกัน คือโปรโตคอล ทีซีพี/ไอพี (Protocol TCP/IP : Transmission Control Protocol /Internet Protocol)มาตรฐานข้อกาหนดวิธีการตดิ ตอ่ ส่อื สารระหว่างคอมพวิ เตอรใ์ นระบบเครอื ขา่ ย ซึ่งโปรโตคอลน้ีจะช่วยให้คอมพวิ เตอรท์ ี่มฮี ารด์ แวรท์ แ่ี ตกต่างกนั สามารถติดต่อถึง ร่วมถงึ ใช้ทรพั ยากรรว่ มกนั ได้ ระบบเครือข่ายอินเทอร์เน็ต ทาให้สามารถแลกเปล่ียน เคลื่อนย้ายข่าวสารข้อมูลจากท่ีหนึ่งไปยังอีกที่หน่ึงได้ โดยไม่จากัดระยะทาง ส่งข้อมูลได้หลายรูปแบบ ทั้งข้อความตัวหนังสือภาพ และ เสียง โดยอาศัยเครือข่ายโทรคมนาคมเป็นตัวเชื่อมต่อเครือข่ายอินเทอร์เน็ตนับเป็นระบบเครือข่ายขนาดใหญ่มาก มีเครื่องคอมพิวเตอร์หลายล้านเคร่ืองท่ัวโลกเชื่อมต่อกับระบบ ทาให้มนุษย์ทุกชาติทุกภาษาสามารถติดตอ่ สื่อสารกันได้ โดยไมต่ ้องเดินทางไป ระบบเครอื ขา่ ยที่ทุกในระบบเครือข่ายสามารถแลกเปล่ยี นทรพั ยากรทางข้อมลู ส่ือสาร ประหยัดเวลา ค่าใช้จา่ ย แต่เกิดประโยชนต์ ่อสังคมโลกปัจจบุ นั มาก บทที่ 1 อินเทอร์เนต็ เบ้อื งตน้ และโครงสรา้ งของการเขียน HTML
7 1.1.2 ความเป็นมาของอินเทอรเ์ น็ต เครือขา่ ยอินเทอร์เน็ตพัฒนามาจากโครงการอาร์พาเนต็ (ARPAnet) อยภู่ ายใตก้ ารควบคุมของอาร์พา (ARPA: Advanced Research Projects Agency)หนว่ ยงานในสังกดั กระทรวงกลาโหมสหรฐั อเมริกา โดยมวี ัตถปุ ระสงค์เบือ้ งตน้ 2 ประการ ดงั น้ี 1.1.2.1 เชอื่ มโยงเคร่ืองคอมพิวเตอร์ในสถานทตี่ า่ งๆ เปน็ ระบบเครือขา่ ยเดยี วกันเพ่อื สามารถเข้าถงึ ขอ้ มลู ในเคร่อื งคอมพวิ เตอร์จากสถานทใ่ี ดๆ ก็ได้ สามารถโอนถา่ ยแฟ้มขอ้ มูลและรับส่งอีเมล์ได้ 1.1.2.2 หากระบบการสื่อสารบางสว่ นเสียหายจนใชก้ ารไมไ่ ด้แต่ระบบเครือข่ายน้นัยงั คงต้องการสามารถรับส่งขอ้ มูลไดต้ ามปกติ อารพ์ าเน็ตเปน็ โครงการทพ่ี ัฒนาการเชื่อมต่อเครือข่ายคอมพิวเตอร์ชนิดใดกไ็ ด้ผ่านระบบเครือข่ายโทรศัพท์ โดยในชว่ งแรกอาร์พาเน็ตเช่อื มต่อมหาวทิ ยาลัย 4 แห่งเข้าด้วยกัน คอืมหาวิทยาลัยแคลฟิ อร์เนยี แห่งลอสแอนเจลสิ สถาบันวิจัยสแตนฟอร์ด มหาวิทยาลัยแคลฟิ อร์เนียแห่งซานตาบารบ์ ารา และมหาวิทยาลัยยทู าห์ และใช้เอ็นซพี ี (NCP : Network Control Protocol)เปน็ โปรโตคอลในช่วงแรก เมอ่ื เครือข่ายมกี ารขยายตัวเพมิ่ มากขึ้น จงึ เปลยี่ นมาใช้ทีซพี /ี ไอพี(TCP/IP) เป็นโปรโตคอล ซ่ึงถอื เป็นจุดกาเนดิ ของเครือข่ายอินเทอร์เน็ต ต่อมามูลนธิ ิวิทยาศาสตร์แหง่ ชาตขิ องสหรัฐอเมรกิ า (NSF : National Science Foundation) ไดส้ นบั สนนุ งบประมาณเพอื่พฒั นาระบบเครือข่ายที่เช่ือมต่อเครื่องซุปเปอร์คอมพิวเตอรท์ ่ีมีอยูใ่ นมหาวทิ ยาลัย 5 แห่งเข้าด้วยกนั เรียกว่า ระบบเครือขา่ ยเอน็ เอสเอฟเน็ต (NSFNet : National Science Foundation Network)เครือข่ายนไ้ี ดเ้ ชื่อมต่อกบั เครือข่ายอารพ์ าเน็ต และกลายมาเปน็ ระบบเครือขา่ ยอินเทอรเ์ นต็ ทีใ่ ช้กนัในปัจจุบัน 1.1.3 ประวตั ิความเป็นมาของอินเทอร์เน็ตในประเทศไทย ประเทศไทยมีการพัฒนาเครือขา่ ยอินเทอรเ์ นต็ เป็นคร้ังแรก เมื่อปี 2530 โดยอาจารยภ์ าควิชาวทิ ยาศาสตร์คอมพิวเตอร์สถาบันเทคโนโลยแี หง่ เอเชยี (AIT) ทดลองสง่ จดหมายอิเลก็ ทรอนิกสไ์ ปยงั มหาวทิ ยาลยั เมลเบิรน์มหาวิทยาลยั โตเกยี ว และบริษัท UUNET โดยใชซ้ อฟต์แวร์ UUCP ผ่านโปรโตรคอล X. 25 ตอ่ มาในปี 2531 ประเทศออสเตรเลียพฒั นาโครงการภายใต้โครงการ (IDP: The InternationalDevelopment Plan) ให้ความช่วยเหลอื มหาวิทยาลยั ไทย 3 แห่ง คือ มหาวิทยาลัยสงขลานครินทร์(มอ.) สถาบันเทคโนโลยีแห่งเอเชีย (AIT) และจฬุ าลงกรณม์ หาวทิ ยาลยั พฒั นาเครือข่ายคอมพิวเตอร์ไทยขึน้ มาแห่งแรก ตดิ ต้ังท่มี หาวิทยาลยั สงขลานครินทร์ และสถาบนั เทคโนโลยแี หง่เอเชยี ทาหนา้ ทีเ่ ป็นประตูเชอ่ื มของไทยกบั เซริ ์ฟเวอร์ของมหาวิทยาลัยเมลเบริ น์ (munnari.oz.au)นักวิชาการไทยใช้บริการเครือขา่ ยดังกลา่ ว โดยการใช้โทรศพั ทเ์ ข้ามายงั เครือ่ งเซริ ฟ์ เวอรท์ ่ีมหาวิทยาลัยสงขลานครินทร์ (sritrang.psu.th) หรอื ที่สถาบนั เทคโนโลยแี ห่งเอเชยี (ait.ait.th) โดย บทท่ี 1 อนิ เทอร์เนต็ เบ้อื งตน้ และโครงสรา้ งของการเขยี น HTML
8ใช้ซอฟตแ์ วร์ SUNIIII ซงึ่ เป็นยนู กิ สป์ ระเภทหนง่ึ ทแ่ี พรห่ ลายในเครือขา่ ยคอมพวิ เตอรข์ องออสเตรเลียทีช่ อ่ื ว่า (ACSNet :Australian Computer Science Network) เครือขา่ ยคอมพิวเตอร์ไทยแห่งแรกนี้ มีชอื่ เรียกวา่ (TCSNet :Thai Computer Science Network) สาหรับแลกเปลย่ี นอเี มล์ติดต่อกบั มหาวิทยาลยั เมลเบิรน์ ในออสเตรเลีย ในปี 2534 มหาวทิ ยาลัย 5 แห่งในประเทศไทย เริม่ใช้เครอื ขา่ ย UUCP เพ่อื ติดต่อระหว่างกัน และขณะเดียวกนั ประเทศไทย โดยวิศวกรไทยได้ตดั สินใจเปลี่ยนรปู แบบการใช้งานโปรโตคอล Transmission Control Protocol/Internet Protocolและเชื่อมต่อมายังศนู ย์เทคโนโลยอี ิเล็กทรอนิกสแ์ ละคอมพวิ เตอร์แหง่ ชาติ (NECTEC: NationalElectronics and Computer Technology Center หรอื เนคเทค อยภู่ ายใต้กระทรวงวิทยาศาสตร์เทคโนโลยีและการพลงั งาน (ช่ือเดิมในขณะนั้น) ได้จัดสรรทุนเพอ่ื ดาเนนิ โครงการครือข่ายคอมพวิ เตอร์ของสถาบันอุดมศึกษา โดยแบง่ โครงการออกเปน็ 2 ระยะ การดาเนินงานในระยะแรกเปน็ การเชื่อมโยง 4 หน่วยงาน คอื กระทรวงวทิ ยาศาสตร์, จุฬาลงกรณม์ หาวิทยาลัย, สถาบันเทคโนโลยีแห่งเอเชีย และสถาบันเทคโนโลยพี ระจอมเกล้าวทิ ยาเขตเจ้าคุณทหารลาดกระบงั ระยะท่ี 2 เปน็ การเช่ือมต่อกบั สถาบันอดุ มศกึ ษาเพ่ิมเติม ประกอบดว้ ยมหาวทิ ยาลยั ธรรมศาสตร์,มหาวิทยาลยั สุโขทยั ธรรมาธริ าช, มหาวิทยาลัยเกษตรศาสตร์, มหาวทิ ยาลยั มหดิ ล, , สถาบันเทคโนโลยพี ระจอมเกลา้ วิทยาเขตธนบุรี, สถาบนั เทคโนโลยพี ระจอมเกล้าวิทยาเขตพระนครเหนือ, มหาวทิ ยาลัยเชยี งใหม่, มหาวทิ ยาลยั สงขลานครนิ ทรว์ ทิ ยาเขตหาดใหญ่ และมหาวิทยาลยั ขอนแก่น ตอ่ มาในเดอื นธนั วาคม ปี พ.ศ. 2534 คณะทางานของเนคเทครว่ มกบั อาจารยแ์ ละนักวจิ ัยจากสถาบันอุดมศกึ ษาไดก้ ่อตั้งกลมุ่ NEWgroup ( NECTEC E-mail Working Group) เพอื่ประสานงานและแลกเปลีย่ นขอ้ มูลขา่ วสารดว้ ยอีเมล์ โดยอาศัยสถาบันเทคโนโลยแี ห่งเอเชียเป็นทางออกสอู่ ินเทอร์เนต็ ผา่ นทางออสเตรเลยี ปี พ.ศ.2538 รฐั บาลไทยได้ประกาศใหเ้ ป็นปแี หง่เทคโนโลยสี ารสนเทศ (Information Technology Year ) เนื่องจากตระหนักถึงความสาคญั ของเทคโนโลยีคอมพวิ เตอร์และการส่อื สารข้อมูลมีการดาเนินการจดั วางเครอื ข่ายความเร็วสูง โดยใช้ใยแกว้ นาแสงเพ่ือใชเ้ ป็นสายสอื่ สารไทยสาร เดือนสงิ หาคม พ.ศ. 2535 สานักวิทยบรกิ าร จุฬาลงกรณ์มหาวิทยาลัยได้เช่าวงจรสือ่ สารความเร็ว 9600 บิต/วนิ าที จากการส่ือสารแห่งประเทศไทยเพื่อเช่อื มเข้าสู่อินเทอร์เนต็ ที่\"บริษทั ยูยูเน็ตเทคโนโลยี ประเทศสหรัฐอเมริกา\" ภายใต้ขอ้ ตกลงกับเนคเทค ในการพัฒนาเครือข่ายอินเทอรเ์ นต็ ของสถาบนั อุดมศึกษาเพื่อรว่ มใช้วงจรสอื่ สาร จนกระทง่ั ในเดือนธันวาคมปีเดียวกนั มหี น่วยงาน 6 แหง่ มกี ารเช่ือมต่อแบบออนไลน์โดยสมบรู ณ์ เช่น เนคเทค, จุฬาลงกรณ์ บทท่ี 1 อินเทอรเ์ นต็ เบ้อื งต้นและโครงสรา้ งของการเขยี น HTML
9มหาวิทยาลยั , สถาบนั เทคโนโลยแี ห่งเอเชยี , มหาวิทยาลยั สงขลานครนิ ทร์, มหาวทิ ยาลยัธรรมศาสตร์, และมหาวิทยาลยั เกษตรศาสตร์ เครือข่ายที่กอ่ ตงั้ มี ชือ่ ว่า \"ไทยสาร\" (Thaisarn :Thai Social/scientific, Academic and Research Network) หรือ \"ไทยสารอนิ เทอร์เน็ต\" ในปี พ.ศ. 2536 เนคเทคเช่าวงจรสอื่ สารความเร็ว 64 กโิ ลบติ /วนิ าทจี ากการสอื่ สารแห่งประเทศไทยเพอื่ เพม่ิ ความสามารถในการขนสง่ ข้อมูล ทาให้ประเทศไทยมวี งจรสอื่ สารบรกิ ารแกผ่ ู้ใช้ไทยสารอินเทอรเ์ น็ต 2 วงจร ในปัจจุบนั วงจรเชือ่ มต่อไปยังต่างประเทศท่ีจฬุ าลงกรณ์มหาวทิ ยาลัย และเนคเทคได้รับการปรับปรุงใหม้ คี วามเร็วสงู ข้นึ ตามลาดบั นับต้งั แต่นัน้ มาเครือขา่ ยไทยสารได้ขยายตวั กวา้ งขึน้ และมีหนว่ ยงานอ่นื เชอ่ื มเขา้ กบั ไทยสารอีกหลายแหง่ในช่วงตอ่ มากลมุ่ สถาบนั อุดมศึกษาประกอบดว้ ย สานกั วทิ ยบริการ จุฬาลงกรณม์ หาวทิ ยาลัย ,สถาบนั เทคโนโลยีแหง่ เอเชยี , มหาวทิ ยาลยั เชยี งใหม่ และมหาวทิ ยาลยั อสั สมั ชัญได้รว่ มตัวกันเพ่ือแบง่ สว่ นค่าใช้จา่ ยวงจรสื่อสาร โดยเรยี กชื่อกล่มุ ว่า \"ไทยเนต็ \" ( THAInet ) สมาชกิ ส่วนใหญข่ องไทยสาร คือ สถาบันอดุ มศึกษา กบั หน่วยงานราชการบางหนว่ ยงาน และเนคเทคยังเปิดโอกาสให้กับบคุ ลากรของหน่วยงานราชการท่ยี ังไมม่ เี ครอื ข่ายภายในมาขอใช้บริการ แต่ยงั มีกลมุ่ ผู้ที่ต้องการใชบ้ รกิ ารอินเทอร์เน็ตอกี เป็นจานวนมาก ทั้งบริษัทเอกชนและบุคคลทั่วไปซึ่งไม่สามารถใชบ้ ริการ จากไทยสารอินเทอร์เน็ตได้ เพราะไทยสารเปน็ เครือขา่ ยเพื่อการศกึ ษาและวิจยั ที่ใช้เงนิงบประมาณอุดหนนุ จากรฐั ภายใตข้ ้อบังคับของกฎหมายด้านการสือ่ สารจงึ ไมส่ ามารถใหน้ ิติบคุ คลอน่ื ร่วมใช้เครือขา่ ยได้ 1.2 การเช่อื มต่อกับเครือข่ายอินเทอร์เนต็ การเช่อื มตอ่ เขา้ สู่เครอื ข่ายอินเตอร์เน็ตนั้นสามารถทาได้หลายแบบ โดยแต่ละแบบตอ้ งใช้อปุ กรณท์ ี่แตกต่างกัน การเชื่อมต่อกบั เครือข่ายอินเทอร์เน็ตในปัจจุบันน้ันต้องมีการเชื่อมต่อผ่านไปยงั บรษิ ทั ผ้ใู ห้บรกิ ารอนิ เทอร์เน็ตไอเอสพี (ISP: Internet Service Provider) แบง่ การเช่ือมต่อเครือข่ายดังนี้ 1.2.1 อุปกรณ์สาหรับการเชื่อมต่ออินเตอร์เนต็ การเชื่อมต่อเข้าสู่เครือขา่ ยอนิ เตอรเ์ น็ตหลากหลายรปู แบบ แต่ละแบบจะตอ้ งใช้อุปกรณท์ ี่แตกต่างกนั ดังนี้ 1.2.1.1 เคร่ืองคอมพวิ เตอร์ ควรเป็นคอมพวิ เตอร์ที่มคี วามเรว็ สญั ญาณนาฬิกาของหน่วยประมวลผลตั้งแต่ 166 MHz มีหนว่ ยความจาหลกั RAM ตัง้ แต่ 16 MB ข้นึ ไป 1.2.1.2 โมเด็ม (Modulator Demodulator Machine) คือ อปุ กรณซ์ ่งึ ทาหนา้ ท่ีสาหรับแปลงขอ้ มูลที่ได้จากเคร่อื งคอมพิวเตอร์ไปเป็นสัญญาณไฟฟา้ ในรูปแบบหนงึ่ (Impulse) สามารถสง่ ผ่านสายโทรศัพท์ทั่วไป ซ่ึงสญั ญาณโทรศัพทน์ น้ั เป็นสญั ญาณอนาลอ็ ก (Analog) สัญญาณ บทที่ 1 อนิ เทอรเ์ นต็ เบื้องต้นและโครงสร้างของการเขยี น HTML
10ขอ้ มลู ทีม่ าจากคอมพิวเตอร์เป็นสญั ญาณดิจติ อล (Digital) โดยต้องอาศยั โมเด็มแปลงสญั ญาณอนาล็อกเป็นดจิ ิตอลและดิจิตอลเป็นอนาลอ็ กกอ่ น โมเด็มสามารถแบ่งได้เป็น 3 ชนิด ดงั นี้ 1. โมเด็มแบบตดิ ต้ังภายใน (Internal Modem) มลี กั ษณะเป็นเหมือนแผ่นวงจรอิเลก็ ทรอนิกส์นามาตดิ ตงั้ เข้ากบั ภายในตวั เครือ่ งคอมพิวเตอร์โดยตรง และมีรูปร่างแตกต่างกนัตามทผ่ี ู้ผลิตจะออกแบบไว้สาหรับคอมพิวเตอร์ชนิดนน้ั ๆ โดยโมเดม็ ชนิดน้ีจะใช้ไฟฟ้าจากสลอ็ ต(Slot) บนเมนบอรด์ ไมต่ ้องต่อไฟหมอ้ แปลง โมเด็มตดิ ตงั้ ภายในจะทาการตดิ ตั้งผ่านพอร์ต (Port)อนุกรม RS-232C การเช่ือมต่อโมเดม็ กับเครื่องคอมพิวเตอร์จะเชอ่ื มตอ่ ผ่านสล็อตมาตรฐานในเครื่องคอมพวิ เตอร์ และโมเด็มสาหรับติดต้งั ภายในนัน้ มีตาแหนง่ สาหรบั เสียบสายโทรศพั ทเ์ ขา้ กับโมเด็ม ผ่านการเช่ือมตอ่ แบบ RJ-11 2. โมเด็มแบบตดิ ต้งั ภายนอก (External Modem) มีลักษณะเปน็ กลอ่ งสเี่ หลยี่ มแบนๆ ภายในมีวงจรโมเดม็ ไฟสถานะ และลาโพง เนื่องจากต่อภายนอกจึงต้องมีหม้อแปลงสญั ญาณไฟเล้ียงวงจรและจะมีสายต่อแบบ 25 ขา DB25 เพ่ือการเชื่อมต่อผ่านทางพอร์ตอนกุ รมRS - 232C 3. PCMCIA (Personal Computer Memory Card International Asociation) คอืการ์ดเสียบขนาดเล็ก เทา่ กบั บตั รเครดิต เป็นอุปกรณข์ ยายระบบใหค้ อมพวิ เตอร์โนต๊ บุ๊ค เช่น การด์หน่วยความจา แฟกซ์ โมเด็มการ์ดเน็ตเวริ ์ก หรือฮาร์ดดิสก์ขนาดเล็ก 1.2.1.3 ค่สู ายโทรศัพท์ (Dial line) เป็นคู่สายโทรศัพทบ์ า้ นสาหรับเชอ่ื มต่อกบั โมเด็ม 1.2.1.4 บัญชีผใู้ ชง้ าน (Account) ได้จากผูใ้ ห้บริการเอกชนไอเอสพี หรอื ขององค์กรหรือหนว่ ยงานต่างๆ ที่ใหบ้ ริการอินเทอรเ์ นต็ ความเรว็ สูง เชน่ ซีเอสลอ็ กซอินโฟ อนิ เทอร์เนต็ ไทยบรษิ ัท ทโี อที จากัด (มหาชน) บรษิ ทั ทรู คอรป์ อเรชัน่ จากัด (มหาชน) บริษัท ทรปิ เปลิ ที บรอดแบนด์ จากัด (มหาชน) เป็นตน้ ซง่ึ จะกาหนดหมายเลขโทรศัพท์สาหรับการเชื่อมต่อชือ่ ผใู้ ชง้ านและรหสั ผ่าน การใช้งานผ่านโครงข่ายอนิ เทอรเ์ น็ตรว่ มถงึ การส่ือสารอินเทอรเ์ นต็ ผ่านโครงข่ายโทรศพั ท์ 1.2.2 แบง่ ตามลกั ษณะการเช่ือมต่อ การเชอื่ มตอ่ ผา่ นไปยงั บรษิ ทั ผใู้ ห้บรกิ ารอินเทอรเ์ น็ตไอเอสพี แบ่งการเช่ือมต่อได้ 2 ลกั ษณะ ดังนี้ 1.2.2.1 การเชือ่ มตอ่ สาหรับบคุ คลทัว่ ไป ผใู้ ช้จะต้องเป็นสมาชิกของผ้ใู หบ้ รกิ ารอินเทอร์เน็ต และเสียคา่ ใช้จ่ายในการเช่อื มตอ่ เป็นรายเดือน หรอื อาจซื้อชดุ อินเทอร์เน็ตสาเร็จรปูของผูใ้ ห้บริการอินเทอร์เน็ต โดยการใช้คูส่ ายโทรศพั ท์ธรรมดาเชอ่ื มตอ่ เข้ากับระบบคอมพิวเตอร์ผ่านโมเดม็ เมื่อผู้ใช้ต้องการเขา้ สู่ระบบอินเทอร์เน็ต ผู้ใชต้ อ้ งสงั่ ให้โมเด็มให้หมุนโทรศัพทไ์ ปยังผู้ให้บรกิ ารอินเทอรเ์ น็ต การเชือ่ มต่อวธิ นี สี้ ามารถทาได้ง่ายและสะดวก สามารถขอเช่ือมต่อเข้าสู่ บทที่ 1 อนิ เทอรเ์ นต็ เบอ้ื งต้นและโครงสรา้ งของการเขียน HTML
11ระบบอินเทอร์เน็ตได้ โดยใช้เครื่องคอมพวิ เตอรท์ ่ใี ช้อยู่ อาจจะเป็นที่บ้านหรอื ที่ทางานเชื่อมต่อผ่านทางสายโทรศัพท์ ซ่ึงค่าใช้จ่ายไมส่ ูงมาก เรียกวา่ การเชื่อมต่อแบบไดอลั -อพั (dial-up) โดยผใู้ ช้ต้องสมัครเปน็ สมาชิกของผู้ใหบ้ รกิ ารอนิ เทอรเ์ น็ต เพอื่ ขอเชื่อมต่อผ่านทางเอสแอลไอพี(SLIP) หรือพพี พี ี แอคเคาท์ (PPP account) ปัจจุบนั การเชือ่ มต่อสาหรับผใู้ ช้ได้รับการพัฒนาให้มีความเร็วในการรับส่งขอ้ มูลมากขึ้นเรยี กวา่ อนิ เทอร์เน็ตความเร็วสงู ดว้ ยเทคโนโลยีเอดีเอสแอล(ADSL : Asymmetric Digital Subscriber Line) โดยใชก้ ารรบั ส่งขอ้ มลู ดว้ ยความถี่ทแี่ ตกต่างกนั ทาใหส้ ามารถรบั สง่ ขอ้ มลู กับเครือขา่ ยอินเทอร์เน็ต และใชโ้ ทรศพั ท์บนสายโทรศัพท์เดียวกนั ในเวลาเดียวกัน 1.2.2.2 การเช่ือมต่อสาหรับองคก์ ร เป็นองคก์ รทม่ี ีการจดั ตง้ั ระบบเครือข่ายใช้งานภายในองค์กรอยแู่ ล้วและสามารถนาเคร่ืองแม่ข่าย (Server) ของเครือข่ายนัน้ เข้ามาเพ่อื เช่ือมต่อกบัผใู้ หบ้ ริการอนิ เทอร์เน็ตเพ่ือเช่ือมโยงเขา้ สู่ระบบอนิ เทอร์เน็ต โดยผา่ นอปุ กรณช์ ้ีเส้นทางเราเตอร์(Router) และสายสัญญาณเช่า (ตลอด 24 ชว่ั โมง) เป็นการเชื่อมต่อกบั อนิ เทอรเ์ น็ตโดยองคก์ รที่มีผ้ใู ชค้ อมพวิ เตอร์เปน็ จานวนมากและตอ้ งการใหผ้ ูใ้ ช้แตล่ ะคนสามารถเขา้ สรู่ ะบบอนิ เทอร์เนต็ ได้โดยองคก์ รต้องเชา่ สายสง่ ข้อมลู รีดไลน์ (Leased Line) เปน็ รายเดือนเพ่ือเชอื่ มต่อกับผูใ้ หบ้ ริการอินเทอร์เน็ต เคร่ืองคอมพวิ เตอรส์ ามารถเข้าสู่เครือข่ายอนิ เทอร์เน็ตได้พร้อมกันหลายเครอื่ งในเวลาเดยี วกนั การเชื่อมต่อรปู แบบดังกล่าวมคี า่ ใชจ้ า่ ยสูง ต้องมีผ้ดู แู ลระบบเครือขา่ ยภายในองคก์ รเพ่อื บริหารจัดการระบบเครอื ขา่ ยทั้งภายในองค์กรและการเชอ่ื มกับเครอื ขา่ ยอินเทอร์เน็ต ปจั จุบันองค์กรขนาดเลก็ นิยมการเชื่อมต่อระบบเครือขา่ ยอินเทอร์เนต็ สาหรบั องค์กรแบบเอดเี อสแอลมากกว่า เนอ่ื งจากมีคา่ ใชจ้ ่ายท่ีไม่สูงเมือ่ เทียบกับการเชา่ สายสง่ รีดไลน์ 1.3 เวิลด์ไวด์เวบ็ (World Wide Web : WWW) การเขา้ ถึงขอ้ มลู อินเทอร์เนต็ ในอดตี น้นั จะมีรปู แบบการติดต่อแบบตัวอกั ษร (Text Mode)ไม่มีการแสดงรูปภาพ หรือเสยี ง ซง่ึ ไมเ่ หมาะสาหรบั ผู้ใช้ที่ไมค่ นุ้ เคยกบั การใช้คอมพวิ เตอร์ จงึ เกิดการพัฒนาการเขา้ ถึงข้อมูลในรปู แบบมลั ตมิ ีเดยี คือ “เวิลด์ไวด์เว็บ” สามารถเรียกใช้อินเทอร์เน็ตได้งา่ ย โดยผูใ้ ช้สามารถคน้ หาข้อมูลขา่ วสารต่างๆ จากอินเทอรเ์ น็ตไดด้ ้วยวธิ ีการคลกิ เมาส์ จงึ เกดิความนิยมการใชอ้ ินเทอรเ์ น็ตเพิ่มข้ึน เวิลดไ์ วด์เวบ็ นยิ มเรียกสนั้ ๆ วา่ เวบ็ หรือ WWW สามารถแสดงสารสนเทศต่างๆ ได้อยา่ งหลากหลาย เชน่ นิตยสาร หนังสือพมิ พ์อิเลก็ ทรอนิกส์ ขอ้ มูลด้านดนตรี การกฬี า การศกึ ษา สามารถนาเสนอได้ทงั้ ภาพนิ่ง เสียง ภาพเคลือ่ นไหว เช่น แฟม้ ภาพวดี ที ัศน์หรอื ตวั อย่างภาพยนตร์ และการสืบคน้ สารสนเทศในเวิลด์ไวด์เวบ็ นั้นต้องอาศัยโปรแกรม บทที่ 1 อนิ เทอรเ์ น็ตเบ้อื งต้นและโครงสรา้ งของการเขียน HTML
12สบื ค้นผ่านเวบ็ บราวเซอร์ (Web Browser) เพือ่ เขา้ ถึงแหล่งข้อมูลผ่านระบบเครือขา่ ยอินเทอร์เน็ตเป็นบรกิ ารสืบค้นสารสนเทศที่อยู่ในอินเทอร์เน็ตในรปู แบบของขอ้ ความหลายมติ ิ (hypertext)โดยการคลกิ ทจ่ี ุดเชอ่ื มโยงเพื่อแสดงหน้าเอกสารตา่ งๆ ท่ีเก่ียวขอ้ งกับสารสนเทศ และนาเสนอเอกสารในลักษณะของตัวอักษร ภาพนิ่ง ภาพเคล่ือนไหว และเสยี ง การเขา้ สู่ระบบเว็บผ่านโปรแกรมเวบ็ บราวเซอรต์ ่างๆ เช่น อินเทอร์เน็ต เอก็ ซพลอเรอร์ (Internet Explorer) กูเกลิ โครม(Google Chrome) และมอเซอกิ (Mosaic) เป็นต้น โปรแกรมดงั กล่าวชว่ ยใหก้ ารเขา้ ถงึ เว็บในระบบอินเทอร์เน็ตสะดวกขึ้น เวิลดไ์ วด์เวบ็ หมายถึง บรกิ ารสืบคน้ สารสนเทศทอ่ี ย่ใู นอนิ เทอรเ์ น็ตในระบบข้อความหลายมิติ โดยการคลกิ ทจ่ี ดุ เชื่อมโยงเพื่อเสนอหนา้ เอกสารอ่ืนๆ ที่เกี่ยวขอ้ ง โดยสารสนเทศที่นาเสนอจะมรี ปู แบบทง้ั ในลักษณะของตวั อักษร ภาพน่ิง ภาพเคล่อื นไหว และเสยี ง การเข้าส่รู ะบบเว็บโปรแกรมท่ีจะพาผ้ใู ช้เข้าถึงบรกิ ารในลกั ษณะของเวลิ ดไ์ วดเ์ ว็บนร้ี วมเรยี กวา่ “บราวเซอร์”ตามลักษณะของการใช้บริการดังกลา่ วท่ีดเู สมือนการเปดิ หนังสอื ดูไปทลี ะหน้า 1.3.1 สว่ นประกอบของเวิลด์ไวด์เว็บ แบ่งสว่ นประกอบเป็น 2 ส่วน ดงั นี้ 1.3.1.1 แหลง่ เก็บขอ้ มลู คอื เครื่องคอมพวิ เตอร์แมข่ ่ายของระบบเครือข่ายเรียกว่า“เวบ็ ไซต์ (Web Site)” โดยติดตัง้ โปรแกรมทเี่ รียกว่า “เว็บเซิร์ฟเวอร์ (Web Server)” ทาหนา้ ท่เี ก็บขอ้ มลู ไฟล์เว็บเพจ และส่งไฟลเ์ วบ็ เพจในรปู แบบไฟล์ทม่ี ีส่วนขยายเปน็ เอชทีเอม็ แอล ตามคาร้องขอของโปรแกรมเว็บบราวเซอร์ ตวั อย่างโปรแกรมเวบ็ เซิร์ฟเวอร์ เช่น โปรแกรมไอไอเอส (IIS:Internet Information Server) และอาปาเช่ (Apache) เป็นต้น 1.3.1.2 โปรแกรมเวบ็ บราวเซอร์ (Web Browser) บางครั้งเรียกส้นั ๆ ว่า บราวเซอร์คือ โปรแกรมทที่ าหน้าท่ีในการเรยี กหรือส่งคาร้องขอไฟล์เวบ็ เพจจากเว็บเซิร์ฟเวอร์ เมอ่ื ได้รับคาสงั่ แล้วจะแปลคาส่งั เพอ่ื แสดงผลข้อมลู ตามที่กาหนดในไฟล์โปรแกรมท่สี งั่ โดยใชข้ ้อความ(text commands) และแสดงผลในรูปแบบของข้อความ (text) เท่านนั้ ต่อมาในปี ค.ศ.1993 MarcAndreessen นกั ศกึ ษาของมหาวิทยาลัยอลิ ลินอยส์ (University of Illinois) ไดส้ ร้างโปรแกรมเวบ็บราวเซอร์ในรปู แบบของกราฟิก เรียกวา่ มอเซอคิ ซ่งึ เปน็ โปรแกรมที่สามารถแสดงเอกสารที่อยู่ในลักษณะของข้อความและภาพกราฟิก การติดต่อกบั ผใู้ ช้อยู่ในลกั ษณะของจยี ไู อ (GUI) ทาให้การใช้งานและแสดงขอ้ มูลบนอินเทอรเ์ น็ตสะดวกงา่ ย และดงึ ดูดใจผูใ้ ช้ ซึ่งตอ่ มา Andreessen ได้เป็นผูห้ นึ่งในการก่อตั้งบริษัทที่ผลิตโปรแกรมบราวเซอร์เน็ตสเคปนาวิเกเตอร์ เว็บบราวเซอรท์ ่ีได้รบั ความนิยมปัจจบุ นั มีหลายโปรแกรม เช่น (IE : Microsoft Internet Explorer), MozillaFirefox, Google Chrome และ Opera โดยมผี ูใ้ ห้ความหมายของเว็บบราวเซอรไ์ ว้ดังน้ี บทที่ 1 อนิ เทอรเ์ น็ตเบ้ืองตน้ และโครงสรา้ งของการเขยี น HTML
13 เว็บบราวเซอร์ หมายถึง บราวเซอร์ หรือ เว็บบราวเซอร์ โปรแกรมที่ติดต่อระหว่างผู้ใช้กับผู้อ่ืนบนระบบอินเทอร์เน็ต สามารถเรียกดูเว็บไซต์ต่างๆ น้ันได้ท่ัวโลก และยังสามารถให้บริการด้านต่างๆ ได้อีกมากมาย เช่น การบริการรับส่งไปรษณีย์อิเล็กทรอนิกส์ รับส่งข้อมูลปลายทางบราวเซอร์ เช่น จีโอซติ ี้ส์ (Geocities) และปัจจบุ ันยังสามารถฟังเพลง หรือชมภาพยนตร์ตวั อย่าง ฟังวทิ ยหุ รือแมแ้ ต่การชมการถ่ายทอดสดผา่ นทางระบบอินเทอร์เน็ต โดยอาศัยบราวเซอร์และโปรแกรมปล๊ัก-อนิ โปรแกรม (Plug-in Program) ต่างๆ คือโปรแกรมเสรมิ ฟงั ก์ชันการทางานให้กบั โปรแกรมอน่ื ให้สามารถใช้งานไดห้ ลากหลายหรอื มีประสทิ ธิภาพมากข้นึ ซง่ึ บราวเซอรน์ ้ันมีทั้งแบบทเ่ี ปน็ ภาวะขอ้ ความ (Text Mode) เชน่ ในระบบยนู กิ ส์(UNIX) หรือลนี ุกซ์ (Linux) หรือแบบทีเ่ ป็นภาวะกราฟกิ โหมด (Graphics mode) เวบ็ บราวเซอร์ หมายถึง โปรแกรมที่ใช้สาหรบั เปิดเวบ็ เพจ หรือรบั ส่งขอ้ มูลตามที่เคร่ืองลกู ข่ายร้องขอ เม่ือเปดิ เข้าสู่อนิ เทอร์เนต็ บราวเซอร์จะดงึ ขอ้ มลู ท่ีร้องขอมาจากเว็บเซริ ์ฟเวอร์เพือ่ โอนข้อมลู มาแสดงผลยงั เคร่ืองคอมพวิ เตอร์ (ภชุ งค์ จันทรเ์ ปล่ง, 2551 : 3) สรปุ จากความหมายทีไ่ ด้รวบรวมมาข้างต้นนไ้ี ด้วา่ เวบ็ บราวเซอร์ หมายถึง โปรแกรมที่ติดต่อระหวา่ งผู้ใชก้ บั ผอู้ ่นื บนระบบอินเทอร์เน็ต ซึง่ สามารถเรียกใช้เว็บไซต์ตา่ งๆ ได้ทว่ั โลกและยงั สามารถให้บริการต่างๆ อีกมากมาย เช่น บริการรับส่งไปรษณีย์อเิ ล็กทรอนิกส์รับส่งขอ้ มลูปลายทางบราวเซอร์ ดึงข้อมลู ท่รี ้องขอมาจากเว็บต่างๆ เพ่อื โอนข้อมูลมาแสดงผลยงั เครื่องคอมพิวเตอร์ 1.3.2 หลกั การทางานพื้นฐานของเวลิ ดไ์ วดเ์ ว็บ ลาดบั ในการทางานพื้นฐานท่ัวไปของเวลิ ด์ไวด์เว็บ ดงั น้ี 1.3.2.1 เมื่อเปิดโปรแกรมเว็บบราวเซอร์แลว้ ผใู้ ช้สามารถพิมพ์ตาแหน่งของเวบ็ ไซต์ปลายทางทเ่ี รียกว่ายอู ารแ์ อล เพื่อสง่ คารอ้ งขอไฟลเ์ วบ็ เพจตามท่ีรอ้ งขอและส่งกลบั ไปยงั ผใู้ ชท้ ่ีรอ้ งขอมา 1.3.2.1 เคร่ืองผ้ใู ช้เมื่อได้รบั ไฟลเ์ ว็บเพจแลว้ โปรแกรมเว็บบราวเซอร์จะประมวลผลไฟลเ์ ว็บเพจเพอ่ื แสดงข้อความ รปู ภาพ และอน่ื ๆ ตามคาสั่งและขอ้ มูลในไฟลเ์ วบ็ เพจ กรณีที่ผู้ใช้คลกิ เมาส์ที่จดุ เชื่อมโยงในหน้าเว็บเพจ หมายถงึ ใหโ้ ปรแกรมเวบ็ บราวเซอร์ส่งคาร้องขอไฟล์เวบ็ เพจท่กี าหนด ณ จุดที่คลิกจากเวบ็ เซิร์ฟเวอร์เพื่อนามาแสดงผล คือ การส่งคารอ้ งขอไฟลเ์ ว็บเพจจากเวบ็ เซิรฟ์ เวอร์ บทที่ 1 อินเทอร์เน็ตเบือ้ งต้นและโครงสร้างของการเขยี น HTML
141.4 ช่ือโดเมนเนม (Domain Name) ในระบบอินเทอรเ์ น็ต ชอ่ื โดเมนเนม หมายถงึ ชอื่ เฉพาะของเวบ็ ไซต์ท่ีไม่มกี ารซา้ กัน ชอ่ื เวบ็ ไซต์ทีต่ ั้งข้ึนเพอ่ืสะดวกตอ่ การจดจาและการนาไปใชง้ าน หรอื ชื่อท่ีถูกเรยี กใช้แทนการเรียกเปน็ หมายเลขอนิ เทอร์เน็ตไอพี แอดเดรสไดจ้ ากการใชบ้ รกิ ารเวบ็ โฮสติง้ หรือพ้ืนท่ีของเว็บไซต์ เน่ืองจากการจดจาหมายเลขไอพี จานวน 16 หลัก หรือในรูปแบบเลขไอพี 32 บติ หรือ 64 บติ ทาให้ย่งุ ยาก และไม่สามารถจดจาไดเ้ วลาท่องไปในระบบอินเทอรเ์ น็ต จงึ นาช่อื ที่เป็นตวั อักษรมาใช้แทน ซึ่งมักจะเป็นชอื่ ท่ีมีการสอ่ื ความหมายถงึ ช่อื ของหน่วยงาน วัตถปุ ระสงค์ เนอ้ื หา หรอื เจ้าของเว็บไซต์นั้นๆโดยแต่ละเว็บไซต์จะมีชื่อของโดเมนเนมเฉพาะทไี่ ม่ซ้ากัน 1.4.1 ประเภทของ โดเมนเนม (Domain Name) มอี ยู่หลายประเภทแตท่ ่ีนิยมมากทสี่ ดุน้ันคือดอทคอม (.com) เพราะเปน็ ชื่อในยุคแรกๆ ท่ีเร่ิมใช้ และง่ายตอ่ การจดจา ลักษณะชือ่โดเมนเนมของหนว่ ยงานตา่ งๆ ในประเทศไทย สามารถแบง่ ได้เปน็ 2 ประเภท คือ โดเมนเนม2 ระดบั และโดเมนเนม 3 ระดับ รายละเอียดต่างๆ ของโดเมนเนม ดงั น้ี 1.4.1.1 ลกั ษณะช่อื โดเมนเนมของหนว่ ยงานต่างๆ ในประเทศไทย ดงั ตารางท่ี 1.1 ตารางที่ 1.1 ชอ่ื โดเมนเนมของหนว่ ยงานต่างๆ ในประเทศไทยชอ่ื โดเมนเนม ช่ือหน่วยงาน nectec เนคเทค cu จฬุ าลงกรณ์มหาวทิ ยาลยั tu มหาวิทยาลัยธรรมศาสตร์ ku มหาวทิ ยาลยั เกษตรศาสตร์ psu มหาวทิ ยาลัยสงขลานครินทร์ ptt การปโิ ตรเลยี มแหง่ ประเทศไทย egat การไฟฟา้ ฝา่ ยผลติ แห่งประเทศไทย npw ธนาคารแห่งประเทศไทย inet บริษัทอนิ เทอรเ์ นต็ แหง่ ประเทศไทย ksc บรษิ ัทเคเอสซี จากดั loxinfo บรษิ ัทล็อกเลย่ อ์ ินเฟอรเ์ มชน่ั จากัด บทที่ 1 อินเทอรเ์ น็ตเบ้อื งตน้ และโครงสรา้ งของการเขยี น HTML
15 1.4.1.2 โดนเมนเนม 2 ระดับ จะประกอบดว้ ย www . ชอ่ื โดเมนเนม . ประเภทของโดเมนเนม เชน่ www.b2ccreation.com ประเภทของโดเมนเนม คือ คาย่อขององคก์ ร มีดงั นี้ 1. * .com คือ บริษทั หรือ องค์กรพาณชิ ย์ 2. * .org คือ องคก์ รเอกชนทไ่ี ม่แสวงผลกาไร 3. * .net คือ องคก์ รท่ีเปน็ เกตเวย์ หรือ จุดเชื่อมต่อเครือข่าย 4. * .edu คอื สถาบนั การศกึ ษา 5. * .gov คือ องคก์ รของรัฐบาล 6. * .mil คอื องคก์ รทางทหาร 1.4.1.3 โดเมนเนม 3 ระดับ ชอ่ื โดเมนเนม .ประเภทของโดเมนเนม .ประเทศประกอบด้วย www .ช่ือโดเมนเนม .ประเภทของโดเมนเนม .ประเทศ เชน่ www.kmitnb.ac.th,www.nectec.or.th และ www.google.co.th ดังน้ี 1. ชอื่ โดเมนเนม เป็นประเภทโดเมนเนม ในประเทศไทย ดังน้ี 1) * .co คอื บรษิ ทั หรือ องคก์ รพาณชิ ย์ (Commercial) 2) * .ac คือ สถาบนั การศึกษา (Government) 3) * .go คอื องค์กรของรัฐบาล (Academic) 4) * .net คือ องคก์ รทีใ่ ห้บริการเครือข่าย (Network) 5) * .or คือ องค์กรเอกชนที่ไมแ่ สวงผลกาไร (Organizations) 2. ตัวยอ่ ของประเทศที่ตัง้ ขององคก์ ร ดังนี้ 1) * .th คอื ประเทศไทย (Thailand) 2) * .cn คือ ประเทศจีน (Chine) 3) * .uk คือ ประเทศอังกฤษ (English) 4) * .jp คอื ประเทศญป่ี นุ่ (Japan) 5) * .au คือ ประเทศออสเตรเลยี (Australia) บทท่ี 1 อินเทอร์เนต็ เบอ้ื งตน้ และโครงสรา้ งของการเขียน HTML
16 1.5 โครงสร้างของเวบ็ ไซต์ เว็บไซต์ คือ คาท่ใี ชเ้ รียกกลุ่มของเว็บเพจ ภายในเวบ็ ไซต์จะประกอบไปด้วยโฮมเพจและเว็บเพจ เคร่ืองคอมพวิ เตอร์ทท่ี าหนา้ ท่เี ป็นเว็บเซิรฟ์ เวอร์ 1 เครื่อง สามารถมีเวบ็ ไซต์ไดห้ ลายเว็บไซต์ แตล่ ะเวบ็ ไซต์จะเก็บอยู่ในโฟลเดอรท์ ี่แตกต่างกัน โดยปกติ 1 โฟลเดอรจ์ ัดเกบ็ ไฟล์ของเวบ็ เพจตา่ งๆ 1 เวบ็ ไซต์ และในแต่ละเว็บไซต์อาจมกี ารแบง่ โฟลเดอรย์ อ่ ยอีกหรือไม่มกี ็ได้ ซ่ึงในทางปฏิบัตผิ สู้ ร้างเว็บไซต์มักจะแบ่งโฟลเดอรย์ ่อยเพอ่ื เก็บไฟลเ์ ว็บเพจใหเ้ ป็นระเบียบเรยี บร้อยและเพอื่ ความสะดวกต่อการบริหารไฟลเ์ ว็บเพจในเวบ็ ไซต์ โดยเว็บไซตน์ ั้นจะประกอบด้วยไฟล์เว็บเพจมากมายหลายๆ ไฟล์ ซ่งึ เว็บเพจแตล่ ะไฟลจ์ ะมกี ารเช่อื มโยงซงึ่ กนั และกนั แต่จะมไี ฟลเ์ วบ็เพจเพยี ง 1 ไฟล์เทา่ นนั้ ทเ่ี ป็นไฟล์เว็บเพจไฟล์แรกที่แสดงผลก่อนทกุ คร้ัง เม่ือมีผเู้ ข้ามาสู่เว็บไซต์โดยเรยี กไฟล์เว็บเพจท่เี ป็นไฟลแ์ รกของการแสดงผลเวบ็ ไซต์นว้ี ่า “โฮมเพจ (Home Page)”โดยทว่ั ไปนยิ มกาหนดชือ่ ไฟลท์ ี่เปน็ โฮมเพจว่า index.html หรือ Default.html โดยโครงสร้างของเวบ็ ไซต์ สามารถแบ่งได้ 2 มมุ มอง ดังน้ี 1.5.1 โครงสรา้ งของเว็บไซต์ในมุมมองการจัดการไฟล์เว็บเพจ คือ โครงสร้างของเว็บไซต์ทเ่ี น้นมมุ มองในด้านการจัดเกบ็ ไฟล์เวบ็ เพจ โดยโครงสรา้ งในมมุ มองนั้นเน้นการแบ่งโฟลเดอร์ดังภาพท่ี 1.1 โฟลเดอร์หลกั ของเวบ็ ไซต์ (Root) images (โฟลเดอร์เกบ็ รูปภาพของเวบ็ ไซต)์ product1 (โฟลเดอร์เกบ็ รายละเอยี ดของสนิ คา้ ) sub_product1 (โฟลเดอรย์ ่อย) product2 (โฟลเดอร์เก็บรายละเอยี ดของสินคา้ ) index.html (โฮมเพจ) ภาพท่ี 1.1 โครงสร้างของเว็บไซต์ มุมมองในด้านการจดั เกบ็ ไฟล์เว็บเพจ บทที่ 1 อินเทอรเ์ นต็ เบื้องตน้ และโครงสร้างของการเขยี น HTML
17 1.5.2 โครงสรา้ งของเวบ็ ไซตใ์ นมุมมองการเชื่อมโยงไฟล์เว็บเพจ โครงสร้างของเว็บไซต์ท่ีเนน้ การเชื่อมโยงของไฟล์เว็บเพจต่างๆ ภายในเว็บไซต์ เพอ่ื แสดงใหเ้ ห็นว่าไฟล์เวบ็ เพจแตล่ ะไฟล์เช่ือมโยงกันอย่างไร เชน่ ไฟล์เวบ็ เพจทเี่ ป็นโฮมเพจสามารถเชอื่ มโยงไปยังไฟลเ์ ว็บเพจใด ชื่อไฟล์อะไร เรยี กโครงสรา้ งของเว็บไซตใ์ นมมุ มองนวี้ า่ “แผนผังไซต์ (Site Map)” ดงั ภาพท่ี 1.2 Index.htmlp1.html p2.html p3.html p4.htmlp11.html p22.html p31.html p32.html P21.html p41.htmlภาพท่ี 1.2 โครงสร้างของเว็บไซตท์ ีเ่ น้นการเช่ือมโยงของไฟลเ์ วบ็ เพจต่างๆ1.6 ภาษา HTML ภาษา HTML ใช้สาหรบั การสรา้ งเว็บเพจ โดยการกาหนดรปู แบบการเขยี น และเอกสารเว็บเพจถกู แบง่ ตามโครงสรา้ งของภาษาเปน็ สว่ นๆ และแต่ละสว่ นมีหนา้ ทแ่ี ตกต่างกนั 1.6.1 ความเป็นมาของภาษา HTML มาจากคาว่า “Hyper Text Markup Language” เป็นภาษาสาหรบั กาหนดรูปแบบของการแสดงผลของข้อความต่างๆ พฒั นามาจากภาษาเอสจเี อ็มแอล(SGML : Standard Generalize Markup Language) ซึง่ เปน็ ภาษาทีใ่ ชส้ รา้ งไฟล์เอกสารสาหรับเครือข่ายอนิ เทอรเ์ น็ตในยคุ แรกๆ โดยผทู้ ี่พฒั นา คอื ทมิ เบอร์เนอรส์ ลี (Tim Berners-Lee) และได้พฒั นามาอยา่ งตอ่ เนอื่ ง มีดับเบลิ ยทู รซี ี (W3C : The World Wide Web Consortium) เป็นองค์กรทีม่ ีหนา้ ท่ีควบคมุ มาตรฐานของภาษามีคุณสมบตั ทิ สี่ าคญั เช่น สามารถใชไ้ ดก้ ับเครื่องคอมพิวเตอร์ท่ีมสี ถาปัตยกรรมทแี่ ตกตา่ งกัน (ไมค่ านึงถงึ แพลตฟอรม์ ของเคร่ืองคอมพิวเตอร)์สามารถเช่อื มโยงการแสดงข้อความได้ทง้ั ในไฟลเ์ อกสารเดยี วกนั และไฟล์เอกสารอน่ื ๆ ในระบบเครือขา่ ยอินเทอร์เน็ต เป็นต้น บทที่ 1 อินเทอร์เนต็ เบอ้ื งตน้ และโครงสร้างของการเขยี น HTML
18 ปี ค.ศ. 1990 ของนายทมิ เบอร์เนอรส์ ลี เพื่อใชก้ บั ชุมชนออนไลน์ โครงการดงั กล่าวน้ันต้ังช่ือไวว้ ่า World Wide Web ซึง่ เปน็ ที่มาของบรกิ าร WWW ในปัจจบุ ัน มขี ้อกาหนดไว้ดังนี้ 1.6.1.1 ต้องใชง้ านได้หลายแพลตฟอรม์ (cross-platform) 1.6.1.2 สามารถเข้าถึงขอ้ มูลที่มอี ยู่ในระบบตา่ งๆได้ และสามารถเพิ่มขอ้ มูลใหม่ๆ ได้ง่าย 1.6.1.3 ตอ้ งมกี ลไกลในการสง่ ข้อมลู ผ่านระบบเครือข่ายๆ 1.6.1.4 มีวิธีอา้ งถึงเอกสารไฮเปอร์เทก็ ซ์ไดท้ ้ังที่อยู่ในระบบหรอื เอกสารที่อยูใ่ นระบบเครือขา่ ยอ่ืน 1.6.1.5 มีภาษาในการจดั รูปแบบของเอกสารไฮเปอรเ์ ทก็ ซ์ ภาษา HTML ถกู พฒั นาข้ึนถูกนาไปใช้อยา่ งแพรห่ ลายเร่ือยๆ มกี ารพฒั นาต่อเพ่ือขยายความสามารถโดยกลุม่ คนตา่ งๆ ทาใหเ้ กดิ ความหลากหลายในการใชง้ านมากขึ้น เนื่องจากไม่มีการกาหนดมาตรฐานของภาษาไว้ ดังนัน้ ในปี ค.ศ. 1993 จึงได้เกิดภาษา เวอรช์ ัน 1.0 ข้นึ โดยทิมเบอรเ์ นอรส์ ลี และนายเดฟ แรกเกต (Dave Raggett) เพ่อื ใหภ้ าษาดงั กลา่ วทใี่ ชง้ านกันอยใู่ นปจั จุบันถึงแมจ้ ะไมใ่ ชม่ าตรฐานเดยี วกนั แต่จะต้องไม่ทาให้อ่านเอกสารเหลา่ นน้ั ไมไ่ ด้ ในปี ค.ศ.1995 จึงไดเ้ กิดมาตรฐานอย่างเปน็ ทางการขน้ึ คือ เวอรช์ ัน 2.0 และมีการนาเข้าทีป่ ระชมุ ของไออไี อเอฟ (IETF : The Internet Engineering Task Force) ซึ่งเปน็ หนว่ ยงานทพ่ี ัฒนาสถาปตั ยกรรมดา้ นตา่ งๆ ของอินเทอรเ์ น็ต โดยเน้นรวบรวมการประยุกต์ใช้กบั บราวเซอร์ต่างๆในขณะนัน้ ในปจั จบุ ันการพฒั นา HTML5 และอยูภ่ ายใตก้ ารดแู ลขององคก์ าร W3C (W3C :TheWorld Wide Web Consortium) ซงึ่ รับผดิ ชอบพัฒนาเทคโนโลยตี ่างๆ เพื่อให้สามารถใช้งานอินเทอร์เน็ตไดอ้ ยา่ งเตม็ ประสิทธิภาพ รูปแบบไฟลข์ องภาษาที่เรยี กโดยท่ัวไปวา่ ไฟล์เวบ็ เพจ จะมีส่วนขยายเปน็ ดอทเอชทเี อ็มแอล (.html) หรอื ดอทเอชทีเอ็ม (.htm) เชน่ อินเด็กซด์ อทเอชทีเอม็ แอล (index.html) โดยไฟล์จะเป็นไฟลแ์ บบเทก็ ซ์ไฟล์ (Text File) คอื เปน็ ไฟลท์ ส่ี ามารถเปดิ อา่ นไดด้ ้วยโปรแกรมเท็กซ์อิดิเตอร์(Text Editor) ท่วั ไป เชน่ Notepad เป็นต้น บทท่ี 1 อนิ เทอรเ์ นต็ เบอื้ งต้นและโครงสร้างของการเขยี น HTML
191.7 ขน้ั ตอนการเขยี นโปรแกรมดว้ ยภาษา HTML เบ้ืองต้นการกาหนดพ้นื ที่ท่ีจะใชจ้ ัดเก็บเอกสารทั้งหมด เปดิ โปรแกรม Notepad พิมพค์ าสั่งภาษาHTML บนั ทึกเอกสาร เรยี กดูผลลัพธท์ ่ีเวบ็ บราวเซอร์ ดงั นี้1.7.1 สร้างโฟลเดอร์ (folder) โดยการตั้งช่อื เป็น ภาษาอังกฤษ เช่น D: /web ภายในโฟลเดอร์ web ใหส้ ร้างโฟลเดอรย์ ่อยทใี่ ชใ้ นการจัดเกบ็ ภาพต่างๆ ทจี่ ะนามาแสดงในเว็บเพจโดยตั้งช่ือวา่ images เชน่ D: /web/ images1.7.2 เปิดโปรแกรม Notepad โดยการคลิกท่ีปมุ่ Start คลิกที่ All Programคลกิที่ Accessories คลิกเลือก Notepad ข้นั ตอนดงั น้ี1. คลิกท่ีปมุ่ Start หรอื ปมุ่2. คลกิ ท่ี3. คลิกท่ี4. คลิกเลือก หน้าตา่ งโปรแกรมดังภาพที่ 1.3 ภาพท่ี 1.3 หนา้ ตา่ งโปรแกรม Notepad บทท่ี 1 อนิ เทอรเ์ น็ตเบอื้ งตน้ และโครงสร้างของการเขยี น HTML
201.7.2.1 เม่อื เปิดโปรแกรม Notepad แลว้ ใหพ้ มิ พ์คาส่ังต่างๆ ดงั ตอ่ ไปน้ี ภาพท่ี 1.4 ตวั อยา่ งการเขยี นโปรแกรมภาษา HTML ดว้ ย Notepad1.7.2.3 หลงั จากพมิ พ์ข้อมลู ต่างๆ แล้วตอ้ งการจัดเก็บข้อมลู 1. วิธีการบนั ทกึ ไฟล์ คลกิ ทเี่ มนู File save ภาพท่ี 1.5 การบนั ทึกไฟล์ บทท่ี 1 อนิ เทอรเ์ น็ตเบอื้ งต้นและโครงสรา้ งของการเขียน HTML
21ขน้ั ตอนดังน้ี 2. การจดั เก็บครงั้ แรกโปรแกรมจะขึน้ กรอบ เพื่อใหต้ งั้ ช่ือใหก้ บั เอกสาร 1. Save in : เลือกโฟลเดอรท์ ่ีสร้างไว้ (web) 2. File name: ใหต้ ง้ั ช่ือว่า test.html 3. Save as type : ใหเ้ ลือกเป็น All Files 4. แลว้ คลกิ ท่ีป่มุ Save 1 24 3 ภาพที่ 1.6 วิธกี ารตง้ั ช่ือให้กับเอกสาร HTML บทท่ี 1 อนิ เทอรเ์ นต็ เบอื้ งตน้ และโครงสร้างของการเขียน HTML
22 1.7.3 เรยี กดูผลลพั ธ์ทเ่ี ว็บบราวเซอร์ โปรแกรมเว็บบราวเซอร์เปน็ โปรแกรมทมี่ ีหนา้ หลกั คือ แสดงผลตามคาส่งั ของภาษา ตามความกวา้ งของหน้าตา่ งโปรแกรม 1. เปดิ โปรแกรม Internet Explorer ภาพที่ 1.7 เปิดโปรแกรม Internet Explorer 2. คลกิ ทเี่ มนู File Open 1. 22 ภาพที่ 1.8 คลิกทเ่ี มนู File Open บทที่ 1 อินเทอร์เน็ตเบือ้ งตน้ และโครงสรา้ งของการเขยี น HTML
233. ปรากฏหน้าจอดังภาพดา้ นลา่ ง ใหค้ ลกิ ที่ปมุ่ Browse ภาพท่ี 1.9 หนา้ จอเปิดไฟล์4. ปรากฏหนา้ จอดงั ภาพภาพท่ี 1.9 แล้วเลอื กเปดิ ไฟล์ดังน้ี1) Files of type : เลือกเป็นแบบ All Files ถึงจะมองเห็นไฟล์เวบ็ เพจ2) Files เลอื กไฟล์3) คลกิ เพือ่ เปิดไฟล์เวบ็ เพจ 2 1 3ภาพท่ี 1.10 คลิกเลอื กชือ่ ไฟล์ท่ีต้องการเปิด บทที่ 1 อินเทอรเ์ น็ตเบือ้ งต้นและโครงสรา้ งของการเขียน HTML
244) คลกิ ปมุ่ Open จะปรากฏ ดังภาพที่ 1.11 ภาพที่ 1.11 คลกิ ปุ่ม Open5) คลกิ ท่ีปมุ่ เครื่องคอมพวิ เตอร์จะทาการเรียกโปรแกรมเวบ็ บราวเซอรข์ นึ้ มาและแสดงผลลพั ธ์ของขอ้ มูล ดงั ภาพท่ี 1.12ภาพท่ี 1.12 แสดงผลลพั ธ์ของขอ้ มลู บทท่ี 1 อินเทอรเ์ น็ตเบอื้ งต้นและโครงสรา้ งของการเขียน HTML
25 1.7.4 รูปแบบของภาษา HTML คือ การทาหน้าที่ควบคุมการแสดงผลข้อมลู ในเว็บเพจควบคมุ สีสัน กาหนดรูปภาพ ตาแหนง่ ของสิ่งตา่ งๆ ที่อยบู่ นเว็บเพจนั้น โดยประกอบด้วยคาสั่งการแสดงผลขอ้ ความตา่ งๆ มากมาย คาสง่ั ของภาษาเรียกวา่ “คาส่ังแท็ก (Tag)” โดยชอื่ คาสง่ั จะต้องอยภู่ ายในเครื่องหมาย “ < >” 1.7.4.1 รปู แบบของแทก็ แบ่งรปู แบบของแท็กออกเป็น 2 กลุ่ม ดังน้ี 1. แทก็ เดยี่ ว คือ รปู แบบคาสั่งทีม่ เี พยี งคาสง่ั เดียวหรือมีเพียงแทก็ เดยี วและสามารถใช้งานได้ เช่น <br> 2. แท็กคู่ คอื รูปแบบคาสั่ง 2 ส่วน คือ มีส่วนเรม่ิ ต้นและตอ้ งมสี ่วนจบของคาส่ังถึงจะสามารถทางานไดส้ มบรู ณ์ โดยส่วนจบของแต่ละคาสัง่ จะมีเครือ่ งหมาย Slash (/) ไว้หนา้ แท็กคาส่ังน้ัน เช่น <html>......</html> การพิมพ์คาส่ังแทก็ แต่ละกลุม่ ดังภาพท่ี 1.13 1.5.2.2 ขอ้ กาหนดการเขียนคาสง่ั ของภาษา HTML ดงั นี้ 1. ภาพท่ี 1.13 รปู แบบของแท็ก บทท่ี 1 อนิ เทอร์เนต็ เบ้อื งตน้ และโครงสร้างของการเขียน HTML
26 จากภาพท่ี 1.13 ปรากฏรปู แบบแท็ก ดังน้ี แท็กคู่ มีทั้งหมด 4 แท็ก คือ 1. <html>...</html> 2. <head>....</head> 3. <title>....</title> 4. <body>....</body> แท็กเด่ียว มที ้ังหมด 1 แท็ก คือ <br> 1.7.5 แท็กคาส่ังหลักของการเขียนโปรแกรมดว้ ยภาษา HTML การเขยี นโปรแกรมจะมีโครงสร้างและการจัดวางคาสง่ั หลักที่เปน็ มาตรฐานเหมอื นกันทั่งโลก โดยจะประกอบด้วยคาส่งัหลักๆ อยู่ 4 คาสัง่ ดงั นี้ ภาพที่ 1.14 โครงสรา้ งภาษา HTML บทท่ี 1 อินเทอรเ์ น็ตเบอ้ื งตน้ และโครงสร้างของการเขียน HTML
27 1.7.5.1 <html>........</html> เป็นคาส่งั ทีท่ าหนา้ ท่บี อกจุดเรม่ิ ต้นและจดุ สนิ้ สดุของเอกสาร HTML 1.7.5.2 <head>........</head> เปน็ คาส่ังทท่ี าหน้าทก่ี าหนดส่วนหัวเรื่อง 1.7.5.3 <title>.........</title> เป็นคาส่ังที่ใช้กาหนดข้อความท่ตี ้องการนามาแสดงผลบนแถบ Title Bar ของหน้าต่างบราวเซอร์ในส่วนของหัวเรื่องคาสั่งนจ้ี ะอย่ภู ายในคาสัง่ แท็กสว่ น<head>......</head> โดยกาหนดความยาวของตวั อักษรไมเ่ กิน 64 ตวั อกั ษร 1.7.5.4 <body>.........</body> เปน็ ส่วนที่ต้องใส่ขอ้ ความท่ีเป็นเน้ือหาของเว็บเพจและกาหนดคณุ สมบตั พิ ้นื ฐาน เชน่ คาสง่ั ทกี่ าหนดข้อความ และรปู แบบของคาสงั่ ต่างๆ สาหรบัปรบั แตง่ เอกสารที่จะนาเสนอแสดงผลผา่ นเวบ็ บราวเซอร์ เชน่ สพี ื้นหลัง รูปแบบของพ้ืนหลงั สีของตัวอักษรและตัวอักษรที่เป็นจดุ ลิงค์ ภาพที่ 1.15 โครงสรา้ งหลกั ของภาษา HTML 1.7.7 ขอ้ กาหนดการเขียนคาสง่ั โดยคาส่ังต่างๆ ต้องอยภู่ ายในเครื่องหมาย ” < >” ดงั นี้ 1.7.7.1 คาสั่งแทก็ ทั่วไปประกอบด้วยแทก็ เปิดและแทก็ ปิด แท็กเปดิ จะมีช่อื คาสงั่ อยู่ระหวา่ งเครอ่ื งหมาย < > แท็กปิดจะมีเคร่ืองหมาย / อยหู่ น้าชอ่ื คาสง่ั และอยู่ระหว่างเคร่อื งหมาย <> เชน่ กนั 1.7.7.2 ระหว่างแท็กเปิดและแทก็ ปดิ คือ การนาข้อความที่ต้องการแสดงผลด้วยคาส่ังแท็กนนั้ ๆ บทท่ี 1 อินเทอรเ์ น็ตเบ้ืองต้นและโครงสรา้ งของการเขยี น HTML
28 1.8 ความร้เู กย่ี วกับ HTML 5 HTML5 เปน็ มาตรฐานรุ่นต่อไปของ HTML ทอี่ ยใู่ นระหว่างการพัฒนา โดยมีลกั ษณะเหมอื นมาตรฐานรุน่ ก่อนหน้าทั้ง HTML 4.01 และ XHTML 1.1 ทใ่ี ชใ้ นการจัดโครงสร้างและการแสดงผลของเนอ้ื หาสาหรบั เวลิ ด์ไวดเ์ วบ็ HTML5 ถอื กาเนดิ ข้ึนด้วยความรว่ มมือกนั ระหว่างWorld Wide Web Consortium (W3C) และ Web Hypertext Application Technology WorkingGroup (WHATWG) WHATWG ได้ทางานเกยี่ วกับรูปแบบฟอร์มของเว็บและแอพพลิเคชน่ั และW3C ได้ทางานเก่ยี วกับ XHTML 2.0 ในปี 2006 โดยกลุ่มพฒั นาตดั สนิ ใจที่จะรว่ มมือกันและสร้างเวอรช์ ันใหมข่ องภาษา HTML ข้อกาหนดสาหรับ HTML5 ดงั นี้ 1. คณุ ลักษณะ เช่น HTML, CSS, DOM และ JavaScript เป็นหลกั 2. ลดความจาเป็นสาหรับปลัก๊ อินภายนอก เช่น การใชง้ าน Flash Video 3. การจัดการขอ้ ผิดพลาดท่ดี ขี ึ้น 4. Markup จานวนมากใช้แทนที่สครปิ ต์ 5. HTML5 ควรจะเปน็ อุปกรณ์ท่ีมคี วามเป็นอสิ ระ 6. การพัฒนาควรมองเห็นต่อสาธารณะ 1.8.1 คุณสมบตั ิเพม่ิ เติมที่สาคญั ของ HTML5 คุณสมบัติที่สาคัญของภาษา การเรยี กใช้งา่ ยมคี วามเปน็ ระเบยี บ เพ่มิ ประสิทธภิ าพของฟอรม์ มคี วามสามารถในรูปแบบมัลติมีเดีย อานวยความสะดวกสาหรับผ้ใู ชใ้ นการปรับปรงุ แกไ้ ขขอ้ มูลเวบ็ เพจ 1.8.1.1. Semantic Markup โคด้ เป็นระเบยี บสามารถสืบคน้ เพื่อเกบ็ ขอ้ มลู ไดง้ ่าย 1.8.1.2. Form Enhancement เพมิ่ ประสิทธิภาพของฟอรม์ ในลกั ษณะ input typeแบบใหม่ เช่น search, number, range, color, tel, url, email, date, month, week, time, datetime,datetime-local การแสดงตาแหนง่ ทางภูมศิ าสตร์โดยใชง้ านผา่ นแท็ก สาหรับรับข้อมลู ผ่านฟอร์ม 1.8.1.3. Sound/Video รองรับการอ่านไฟลเ์ สยี ง และวดิ ีโอ โดยไม่จาเป็นต้อง EmbedCode ของ Third Party เช่น ควบคุมการเล่น วิดโี อบนเวบ็ เพจ 1.8.1.4. Canvas คาสั่งสาหรบั การวาดวตั ถุ ตกแตง่ วัตถุ สามารถแสดงไดท้ ้ังภาพนิ่งและภาพเคลอื่ นไหว 1.8.1.5. Content Editable สามารถคลกิ บนข้อความในเวบ็ เพจเพอ่ื แกไ้ ขทันท่ี 1.8.1.6. Drag and Drop สามารถลากวางวตั ถุ เพ่ือการตอบสนองระหวา่ งระบบอนิ เทอร์เน็ตกับผู้ใช้งาน บทท่ี 1 อนิ เทอรเ์ น็ตเบ้ืองตน้ และโครงสรา้ งของการเขียน HTML
29 1.8.1.7. Persistent Data Storage การเกบ็ ข้อมูลบนเคร่ืองคอมพิวเตอร์ผใู้ ช้ ซงึ่ สามารถเกบ็ ขอ้ มูลการใช้งานเวบ็ เพจดงั กล่าวไวใ้ นหน่วยความจาของฐานข้อมูลเวบ็ เพจ 1.8.3 บราวเซอรท์ ี่สนบั สนุนการใช้งาน HTML 5 บราวเซอร์เวอร์ท่ไี ด้รับความนิยมในปัจจุบนั เช่น Safari, Google Chrome, Firefox, Opera และ Internet Explore ตง้ั แตเ่ วอรช์ ั่น 9 ไปมีการพัฒนารูปแบบในลกั ษณะที่เรียกวา่ เอพไี อ (API: Application Programming Interface) เป็นไลบรารีท่สี ร้างเพ่ือสนับสนุนใหผ้ ูพ้ ัฒนาแอพพลเิ คชัน ใหส้ ามารถเขยี นโค้ดไดง้ า่ ย เนอ่ื งจากการเขยี นคาส่ังให้คอมพิวเตอร์ทางาน สามารถติดต่อผ่านเอพไี อแทน โดยไม่จาเป็นต้องทราบรายละเอียดท่อี ยูใ่ นเอพไี อ เช่น การวาดรูปบน ”แคนวาส Canvas” และสาหรับควบคมุ การเล่นวดิ โี อ 1.8.4 โครงสรา้ งพ้นื ฐานของ HTML5 การเขียนโปรแกรมจะมีโครงสรา้ ง และการจดัวางคาสั่งหลักทเ่ี ปน็ มาตรฐาน โดยประกอบด้วยคาสง่ั ดังนี้ <!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <title>ขอ้ ความท่ตี ้องการนามาแสดงผลบนแถบ Title Bar</title> </head> <body> เน้อื หาของเว็บเพจ </body> </html> ภาพท่ี 1.16 โครงสร้างภาษา HTML5บทความ 1.8.4.1 <header> …</header> แสดงข้อมลู สว่ นบนของเว็บเพจ 1.8.4.2 <footer>…</footer> แสดงขอ้ มลู สว่ นล่างของเว็บเพจ 1.8.4.3 <section>…</section> แสดงข้อมูลส่วนทีแ่ ตกต่างกนั ของเนื้อหาที่อยู่ใน 1.8.4.4 <article>…</article> แสดงข้อมลู ส่วนหน้าหลักของเว็บเพจ 1.8.4.5 <nav>…</nav> แสดงขอ้ มลู ส่วนลิงคห์ ลักของเว็บเพจ 1.8.4.6 <aside>…</aside> แสดงข้อมูลสว่ นอ่นื ทไ่ี ม่ใช่สว่ นหลกั ของเวบ็ เพจ บทท่ี 1 อนิ เทอรเ์ นต็ เบอื้ งต้นและโครงสร้างของการเขยี น HTML
30 การจดั วางตาแหนง่ ของ “เอลิเมนต์ Element” ต่างๆในโปรแกรมบนเว็บเพจ โดยการแบ่งเน้อื หาของเว็บเพจออกเปน็ ส่วนย่อยๆ ด้วยแท็ก <div> แต่ละส่วนจะตอ้ งกาหนดแอททรบิ วิ ต์ idหรือ class แล้วจงึ เรยี กใช้ CSS เพอื่ กาหนดตาแหน่ง เช่น กาหนดให้ <div id=’header’ > คือแสดงผลขอ้ มูลส่วนบนของเวบ็ เพจ เป็นต้น เอลิเมนตส์ าหรับการใชง้ านเก่ียวกบั การแสดงผลในรปู แบบต่างๆ ดงั ตารางที่ 1.2ตารางท่ี 1.2 เอลเิ มนตส์ าหรับการใชง้ านเกย่ี วกบั การแสดงผลแทก็ จุดประสงคก์ ารนาไปใช้<canvas> การวาดภาพ การแสดงผลด้วยการใชจ้ าวาสคริปต์ (JavaScript)<audio> ใช้สาหรบั งานเกี่ยวกบั เสยี ง<video> สาหรบั วดิ ีโอหรือภาพยนตร์<source> กาหนดส่ือหลายรปู แบบในแทก็ <video>และ <audio><embed> กาหนดตาแหนง่ การใชง้ านจากโปรแกรมภายนอกหรือรปู แบบงาน อนิ เตอร์แอคทีฟ<track> กาหนดขอ้ ความสาหรบั <video> และ <audio><datalist> กาหนดรายการล่วงหน้าสาหรับการป้อนขอ้ มูล<keygen> กาหนดขอบเขตข้อมูลสาหรับฟลิ ด์<output> การกาหนดผลของการคานวณ 1.8.5 รูปแบบการเขียนโปรแกรมภาษา HTML5 การกาหนดรูปแบบการเขยี นสั้น ภาษาเหมือนภาษา XML การกาหนดชดุ ตัวอักษร ทาให้สะดวกข้นึ รูปแบบการเขียนโปรแกรมดังน้ี 1.8.5.1 DOCTYPE กาหนดประเภทของ DOCTYPE ของเอกสารเวบ็ เพจกาหนดโดยกาหนดได้ง่าย การเขยี นโปรแกรมเวอร์ช่นั ก่อน ต้องกาหนด <!DOCTYPE แลว้ ตามดว้ ยรายละเอียดของโปรแกรม ซงึ่ ยุ่งยาก แต่ HTML5 เขียนโดยไม่มีกาหนดเวอรช์ ั่น และสามารถนาไปใช้งานกบั เวอร์ช่นั อืน่ ๆ ในอนาคต โดยการกานดรูปแบบการเขยี นสน้ั เป็นคาส่ังทีท่ าหนา้ ท่ีอธบิ ายประเภทของเว็บเพจสาหรับบราวเซอร์ รปู แบบดงั น้ี รปู แบบ <!DOCTYPE html> หรือ <!DOCTYPE HTML> บทที่ 1 อินเทอร์เนต็ เบอื้ งตน้ และโครงสร้างของการเขยี น HTML
31 1.8.5.2 การกาหนดรปู แบบภาษาเหมือนภาษา XML ในแทก็ <html>เพ่ือกาหนดภาษาของเวบ็ เพจ ทาให้สะดวกขึ้น รปู แบบดงั นี้ รูปแบบ <html lang=”en”> 1.8.5.3 การกาหนดชุดตัวอักษรทาได้ง่าย สามารถกาหนด โดยเขียนรูปแบบ <metacharset=”utf-8″ /> เปน็ คาสง่ั กาหนดสว่ นหวั เรื่อง การกาหนดรปู แบบ Character encodingรูปแบบดังน้ี รปู แบบ <meta charset=\"UTF-8\"> หรอื <meta charset=\"windows-874\"> 1.8.5.4 การใชง้ านโดยไม่ต้องมี “/” สาหรบั แทก็ เดี่ยว หมายถึง แทก็ ทไ่ี มม่ ีแท็กปิดเช่น <img> <input> <br> แท็กเปดิ ปดิ เช่น <div></div> <strong></strong> แตใ่ น HTML5แท็กเดยี่ วไม่จาเป็นต้องมี “/” ปิดแท็ก 1.8.5.5 แท็กหรือเอลเิ มนต์ใน HTML ทยี่ กเลิกการใชง้ าน บางส่วนจะไมร่ องรับในHTML5 แทก็ เก่า ๆ บางแท็กตดั ทง้ิ ไป หรือบางแท็กสามารถใช้ CSS แทนได้ โดยแทก็ ทถ่ี ูกยกเลิกการใช้งาน เชน่ <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <frame>,<strike>,<frameset>, <noframes>, <s>, <tt>, <u> และ<xmp> บทท่ี 1 อนิ เทอรเ์ น็ตเบื้องต้นและโครงสรา้ งของการเขยี น HTML
32ตัวอย่างที่ 1.1 การเขียนโปรแกรมของภาษา HTML5 <!doctype html> <html lang=\"en\"> <head> <title>First for HTML5</title> <meta charset=\"UTF-8\"> </head> <body> First for HTML5 <br> Hello World. </body> </html>ภาพที่ 1.17 ตัวอย่างการเขยี นโปรแกรมภาษา HTML5 บทท่ี 1 อนิ เทอร์เน็ตเบอื้ งตน้ และโครงสร้างของการเขียน HTML
33อินเทอร์เน็ต หมายถึง เครือข่ายคอมพิวเตอรข์ นาดใหญท่ ีเ่ ชื่อมต่อกนั ท่วั โลกโดยใช้มาตรฐานการรับสง่ ข้อมลู เดียวกัน คือ TCP/IP (Transmission Control Protocol /Internet Protocol)เครือขา่ ยอินเทอร์เน็ต พฒั นามาจากโครงการอารพ์ าเนต็ (ARPAnet) ซึ่งอยูภ่ ายใต้การควบคมุ ของอาร์พาหน่วยงานในสงั กัดกระทรวงกลาโหมของสหรฐั อเมรกิ า โดยมวี ัตถุประสงค์เบื้องตน้ 2ประการ คอื เชอื่ มโยงเคร่ืองคอมพิวเตอร์ในสถานทต่ี ่างๆ ใหเ้ ปน็ เครือข่ายเดยี วกัน เพื่อสามารถเข้าถงึ ขอ้ มลู ในเครื่องคอมพิวเตอร์จากสถานทใ่ี ดๆ สามารถโอนถ่ายแฟ้มขอ้ มลู และรับสง่ อีเมล์และระบบการสอื่ สารบางส่วนเสยี หายจนใชก้ ารไมไ่ ด้ ตามปกติการเช่ือมต่อเขา้ สเู่ ครือขา่ ยอินเตอร์เนต็ นั้นสามารถทาได้หลากหลาย แตล่ ะแบบจะต้องใช้อปุ กรณท์ แี่ ตกต่างกัน การเช่ือมต่อกับเครือขา่ ยอินเทอรเ์ น็ตในปัจจบุ ันน้ัน มีการเชื่อมต่อผ่านไปยงั บรษิ ทั ผู้ใหบ้ รกิ ารระบบอนิ เทอร์เน็ต เวลิ ด์ไวด์เว็บ หมายถึง บรกิ ารสบื คน้ สารสนเทศทีอ่ ยู่ในอนิ เทอร์เน็ตในระบบขอ้ ความแบบหลายมิติ โดยคลกิ ทีจ่ ุดเช่อื มโยง เพ่ือนาเสนอหน้าเอกสารตา่ งๆ โดยสารสนเทศที่นาเสนอจะมีรูปแบบทง้ั ในลักษณะของตัวอกั ษร ภาพนิง่ ภาพเคล่อื นไหว และเสยี ง การเข้าสรู่ ะบบเว็บโปรแกรมเรียกว่า บราวเซอร์ ชอ่ื โดเมนเนม หมายถึง ชอ่ื เฉพาะของเวบ็ ไซต์ทีไ่ มม่ กี ารซ้ากนัเป็นหมายเลขอินเทอร์เนต็ ซ่ึงมกั จะเปน็ ชอื่ ทีส่ ื่อความหมายถงึ หนว่ ยงานวัตถุประสงค์ เน้ือหาหรอื เจา้ ของเวบ็ ไซต์นน้ั ๆ เครื่องคอมพิวเตอรท์ ท่ี าหน้าท่ีเป็นเวบ็ เซิรฟ์ เวอร์ เวบ็ เซิร์ฟเวอร์ 1เครื่อง สามารถมเี ว็บไซต์ได้หลายเว็บไซต์ แต่ละเวบ็ ไซต์จะเกบ็ อยู่ในโฟลเดอรท์ ีแ่ ตกต่างกนั โดยปกติ 1 โฟลเดอร์จัดเก็บไฟลเ์ ว็บเพจตา่ งๆ ของเว็บ 1 เวบ็ ไซต์ และในแต่ละเวบ็ ไซต์อาจมกี ารแบง่ โฟลเดอร์ย่อยอีกหรอื ไม่มีก็ได้ ภาษา HTML ใช้สาหรบั การสร้างเวบ็ เพจ โดยการกาหนดรูปแบบการเขยี นและเอกสารตามโครงสรา้ งของภาษาออกเป็นสว่ นๆ มีหนา้ ทแ่ี ตกต่างกันHTML5 ทางานเกย่ี วกับรูปแบบฟอร์มของเวบ็ และแอพพลิเคช่นั คณุ สมบัติทส่ี าคัญของภาษาการเรียกใช้ง่ายมคี วามเปน็ ระเบียบ เพิ่มประสิทธภิ าพของฟอร์ม มคี วามสามารถในรูปแบบมัลติมีเดีย สะดวกในการปรับปรุงแก้ไขข้อมูลเว็บเพจ บราวเซอร์เวอร์ที่ได้รบั ความนิยมในปัจจุบนัเชน่ Safari, Google Chrome, Firefox, Opera และ Internet Explore ต้งั แต่เวอรช์ ัน่ 9 มกี ารกาหนดรปู แบบการเขยี นสั้น ภาษาเหมอื นภาษา XML การกาหนดชุดตวั อักษร ทาให้สะดวก บทท่ี 1 อินเทอร์เน็ตเบือ้ งต้นและโครงสร้างของการเขยี น HTML
34 แบบฝึกหดั บทท่ี 1 เรือ่ ง อนิ เทอร์เน็ตเบือ้ งต้นและโครงสร้างของการเขยี น HTML/HTML5คาชแ้ี จง จงตอบคาถามต่อไปนใี้ ห้ไดใ้ จความสมบูรณ์1. จงอธิบายความหมายของอินเทอร์เน็ต2. จงยกตัวอย่างอปุ กรณส์ าหรบั การเชื่อมต่ออินเทอร์เน็ต บทที่ 1 อนิ เทอร์เนต็ เบอ้ื งต้นและโครงสร้างของการเขียน HTML
353. การแบง่ การเชอ่ื มต่อกับเครอื ขา่ ยอินเทอร์เน็ตตามลกั ษณะการเชอ่ื มตอ่ ไปยงั บริษทั ผู้ให้บริการอินเทอร์เน็ต (ISP : Internet Service Provider) แบง่ การเชื่อมตอ่ เป็นกีล่ กั ษณะ และอธบิ ายลกั ษณะการเชื่อมตอ่4. จงอธบิ ายส่วนประกอบของเวิลดไ์ วดเ์ ว็บ บทที่ 1 อนิ เทอรเ์ น็ตเบอื้ งต้นและโครงสร้างของการเขียน HTML
365. จงอธบิ ายโครงสร้างของเวบ็ ไซต์ และยกตวั อยา่ ง บทที่ 1 อนิ เทอร์เนต็ เบื้องตน้ และโครงสรา้ งของการเขยี น HTML
37 ใบงานที่ 1 บทที่ 1ชอ่ื วชิ า : การสรา้ งเว็บเพจด้วยภาษา HTML สอนคร้ังท่ี 1ชือ่ หนว่ ย : อนิ เทอร์เน็ตเบอ้ื งตน้ และโครงสรา้ งของ จานวน 4 ชัว่ โมงการเขียน HTML/HTML5ช่อื งาน : โครงสรา้ งของการเขยี น HTMLชื่อ – นามสกุล..............................................ระดบั ช้นั ..............สาขาวิชา........................................จุดประสงค์การเรียนรู้ รายการฝึกปฏบิ ัติ1. อธิบายรปู แบบของภาษา HTML และ 1. ข้ันเตรียมการ (Plan)โครงสร้างไฟล์ HTML ได้ 1.1 ทฤษฎีท่เี กี่ยวข้อง 1.1.1 ภาษา HTML, HTML5 1.1.2 โครงสร้างไฟล์ HTML, HTML5 1.2 วสั ดุและอุปกรณ์ บทที่ 1 อินเทอร์เน็ตเบ้อื งตน้ และโครงสร้างของการเขียน HTML
จดุ ประสงคก์ ารเรียนรู้ 38 รายการฝึกปฏิบัติ 2. ขนั้ ปฏิบตั กิ าร (Do) 2.1 โครงสร้างของการเขียน HTML 2.1.1 ภาษา HTML, HTML5 2.1.2 โครงสร้างไฟล์ HTML, HTML5 3. ข้ันตรวจสอบ (Check) ตรวจสอบผลงานตามแบบประเมินผลทักษะ การปฏิบตั ิงาน 4. ข้ันสรุปผล (Act) สรุปผลและวิจารณ์การปฏบิ ัติงาน บทที่ 1 อินเทอร์เนต็ เบ้อื งต้นและโครงสร้างของการเขยี น HTML
39 1. ขนั้ เตรียมการคาส่ัง ให้นักศึกษา ศึกษาทฤษฎที ี่เกยี่ วข้องตามหัวขอ้ ท่กี าหนดใหต้ ่อไปน้ี จากเอกสารประกอบการสอน วิชา การพัฒนาเวบ็ เพจด้วยภาษา HTML รหสั 3204-2201 บทที่ 1เร่ือง อินเทอรเ์ นต็ เบ้ืองต้นและโครงสร้างของการเขียน HTML 1.1 ทฤษฎีทีเ่ ก่ียวขอ้ งโครงสรา้ ง HTML 1.1.1 ภาษา HTML, HTML5 1.1.2 โครงสรา้ งไฟล์ HTML, HTML5 1.2 วสั ดุและอุปกรณ์ 1.2.1 เครื่องคอมพิวเตอร์ 1.2.2 สื่อบันทกึ ข้อมูล เชน่ แฟลชไดร์ฟ แผ่นซีดี หรอื ดีวดี ี 2. ขน้ั ปฏบิ ตั กิ ารคาสง่ั ให้นักศึกษาปฏิบตั ิตามขัน้ ตอนท่กี าหนดตอ่ ไปนี้ 2.1 รูปแบบของภาษา HTML, HTML5 และโครงสรา้ งไฟล์ HTML, HTML5 (เพื่อบรรลุจดุ ประสงค์ข้อที่ 6 ) 2.1.1 ให้นักศึกษาตอบแบ่งกล่มุ กลุ่มละ 2 คน โดยการแบ่งตามเลขท่ี และหาขอ้ มูลเก่ยี วกับ tag ของภาษา HTML, HTML5 และออกแบบการนาเสนอในรปู แบบโปรแกรมMicrosoft PowerPoint รายงานหน้าชน้ั เรียน 2.1.2 ใหน้ ักศกึ ษาเขยี นแทก็ ของภาษา HTML, HTML5 อยา่ งนอ้ ยคนละ 5 tag ตามความสนใจ และบนั ทึกในสมดุ ของตนเอง บทท่ี 1 อินเทอร์เนต็ เบ้ืองต้นและโครงสร้างของการเขียน HTML
403. ขั้นตรวจสอบ ตรวจสอบผลงานตามแบบประเมินผลทักษะการปฏิบตั งิ าน แบบประเมนิ ผลทักษะการปฏิบัตงิ านชื่อหน่วย : อินเทอร์เน็ตเบ้ืองต้นและโครงสร้างของการเขยี น HTMLชอ่ื งาน : โครงสร้างของการเขียน HTMLชือ่ – นามสกลุ ...........................................ระดับชั้น.................กลุ่มท.่ี ...........สาขาวิชา..................ท่ี รายการประเมิน คะแนน คะแนน หมายเหตุ เตม็ ท่ีได้1 ความพร้อมในการนาเสนอ 3 จปส. 1-62 รูปแบบการนาเสนอ 5 จปส. 1-63 เน้ือหา Microsoft PowerPoint ความสมบูรณ์ 5 จปส. 1-64 ความสมบูรณข์ อง Tag 7 จปส. 1-6 รวมคะแนน 20 เกณฑ์การประเมินผลกระบวนการทางทักษะ คะแนนรวม ระดบั คณุ ภาพ ต่ากว่า 10 คะแนน 0 ต้องแก้ไข 10 – 12 คะแนน 1 ตอ้ งปรับปรุง 13 – 15 คะแนน 2 พอใช้ ต้องพัฒนา 16 – 18 คะแนน 3 ดี ควรพัฒนาต่อไป 19 – 20 คะแนน 4 ดมี าก รกั ษาระดับไว้ลงชอ่ื .........................................ผปู้ ระเมนิ วนั ท่.ี .......เดอื น.......................พ.ศ. ................. (.......................................) ครูผูส้ อน ตนเอง เพื่อนร่วมชนั้ เรียน บทที่ 1 อนิ เทอรเ์ น็ตเบื้องตน้ และโครงสร้างของการเขยี น HTML
41แบบประเมินพฤตกิ รรมการปฏบิ ัตงิ าน (คณุ ธรรม จริยธรรม และเศรษฐกิจพอเพียง)ช่ือหนว่ ย : อนิ เทอรเ์ น็ตเบ้ืองต้นและโครงสรา้ งของการเขียน HTMLชอ่ื งาน : โครงสรา้ งของการเขยี น HTMLชื่อ – นามสกลุ ...........................................ระดับช้นั .................กลมุ่ ที.่ ...........สาขาวชิ า..................ที่ รายการประเมิน/พฤติกรรมบ่งช้ี คะแนน คะแนนที่ เต็ม ได้ 21 ระเบยี บวนิ ัย (ปฏบิ ัตงิ านตามทไี่ ด้รับมอบหมาย ด้วยความเครง่ ครัด) 2 22 สนใจใฝ่รู้ (ศกึ ษาคน้ คว้าเพิ่มเตมิ จากแหลง่ เรียนรู้) 23 ซอ่ื สัตย์สจุ รติ (ไม่ทุจริตต่อการปฏบิ ัติงานทไ่ี ด้รับมอบหมาย) 24 ประหยดั อดออม (เหน็ คณุ คา่ ของทรัพยากรและรกั ษา 2 สิ่งแวดลอ้ ม) 2 25 เอ้ือเฟือ้ เผือ่ แผ่ (รูจ้ กั แบ่งปนั มนี ้าใจต่อครู และเพื่อนร่วมชน้ั เรียน) 26 พง่ึ พาตนเอง (ตัง้ ใจปฏบิ ัติงานด้วยตนเองจนสาเรจ็ ลลุ ่วง) 27 รกั ษาความสะอาด (ดูแลหอ้ งเรยี นและอปุ กรณ์การเรยี น) 208 กิริยามารยาทดี (แต่งกายเรยี บร้อย พดู จาไพเราะ และรูจ้ ักการวางตัว)9 มนษุ ยสัมพันธ์ (ให้ความร่วมมอื กับผ้อู ่ืนและสามารถ ทางานเป็นทีมได้)10 ความคิดสรา้ งสรรค์ (ผลงานมีคุณค่าสามารถ นาไปเป็นแบบอยา่ งได)้ รวมคะแนน บทท่ี 1 อนิ เทอร์เน็ตเบอ้ื งตน้ และโครงสร้างของการเขียน HTML
42 เกณฑ์การประเมนิ ผลพฤติกรรมการปฏบิ ตั ิงาน คะแนนรวม ระดับ คุณภาพ ต่ากว่า 10 คะแนน 0 ตอ้ งแก้ไข 10 – 12 คะแนน 1 ต้องปรับปรงุ 13 – 15 คะแนน 2 พอใช้ ต้องพัฒนา 16 – 18 คะแนน 3 ดี ควรพัฒนาต่อไป 19 – 20 คะแนน 4 ดมี าก รักษาระดบั ไว้ลงชอ่ื .........................................ผ้ปู ระเมนิ วันที.่ .......เดอื น.......................พ.ศ. ................. (.......................................) ครผู สู้ อน ตนเอง เพอื่ นรว่ มชั้นเรียน4. ข้ันสรุปผลสรปุ ผลและวิจารณ์การปฏิบัตงิ าน (เพ่ือใหบ้ รรลจุ ุดประสงคข์ อ้ ที่ 1) นกั ศกึ ษามีความรูค้ วามเขา้ ใจความหมาย หลักการในการเขียนเว็บเพจดว้ ยภาษา HTML,HTML5 รปู แบบของภาษา HTML รวมทง้ั โครงสรา้ ง Site Map ของ เว็บเพจ บทที่ 1 อนิ เทอรเ์ น็ตเบือ้ งตน้ และโครงสรา้ งของการเขยี น HTML
43 แบบประเมินผลหลังเรียน บทท่ี 1 เรอื่ ง อินเทอร์เนต็ เบอ้ื งต้นและโครงสรา้ งของการเขยี น HTMLคาชแ้ี จง จงเลือกคาตอบทถี่ กู ตอ้ ง แลว้ กาเคร่ืองหมาย ลงในกระดาษคาตอบ1. ความหมายของอินเทอร์เน็ตคือข้อใด ก. เครอื ข่ายขนาดใหญท่ เี่ ช่ือมต่อกนั ทว่ั โลก ใช้มาตรฐานรับสง่ ข้อมลู เดียวกนั คือ TCP/IP ข. เครือขา่ ยขนาดใหญ่ท่ีเช่ือมต่อกนั ทั่วโลก ใชม้ าตรฐานรบั สง่ ขอ้ มูลตามเงื่อนไขของแต่ละ ประเทศ ค. เครือข่ายขนาดใหญท่ เ่ี ช่ือมต่อกันทวั่ โลก ใช้มาตรฐานรบั สง่ ข้อมลู เดียวกนั คือ TCP/PI ง. เครือข่ายขนาดใหญท่ เ่ี ชื่อมตอ่ กนั ทั่วโลก ใชม้ าตรฐานรับส่งข้อมูลเฉพาะกลมุ่ อาเซียน2. โครงการอาร์พาเน็ต (APRAnet) ขอ้ ใดกลา่ วถกู ต้อง ก. โครงการพฒั นาระบบเชือ่ มต่อเครือขา่ ยการสื่อสาร ข. โครงการพฒั นาระบบเครอื ขา่ ยอินเทอร์เน็ต ค. โครงการพฒั นาระบบโทรศัพท์ ง. โครงการพัฒนาระบบสืบค้นขอ้ มลู ระหวา่ งประเทศ3. ขอ้ ใดไม่ใชอ่ ุปกรณส์ าหรับเชือ่ มต่อระบบอนิ เทอรเ์ น็ต ก. โมเด็ม ข. เคร่ืองไมโครคอมพิวเตอร์ ค. คสู่ ายโทรศพั ท์ ง. บญั ชีการเงิน4. การเช่ือมตอ่ อินเทอรเ์ น็ตแบ่งตามลกั ษณะการเชือ่ มต่อตามลกั ษณะดงั ขอ้ ใด ก. 2 ลักษณะ ข. 3 ลักษณะ ค. 4 ลักษณะ ง. 5 ลกั ษณะ บทที่ 1 อินเทอรเ์ นต็ เบ้ืองตน้ และโครงสร้างของการเขยี น HTML
445. www. มคี วามหมายตรงกับข้อใด ก. บริการข้อมลู ทางระบบการเงนิ ในอนิ เทอรเ์ น็ต ข. บรกิ ารสืบคน้ สารสนเทศทอ่ี ยใู่ นอินเทอรเ์ น็ต ค. บรกิ ารข้อมลู ระหวา่ งประเทศสมาชกิ ง. บรกิ ารสบื คน้ ข้อมลู ทางโทรคมนาคมระหวา่ งประเทศ6. ความหมายของโดเมนเนม ขอ้ ใดกลา่ วถกู ตอ้ ง ก. ชอ่ื หมายเลขผู้ใช้อินเทอร์เน็ต ข. ชอื่ หมายเลขโทรศพั ท์ ค. ช่อื ท่ีถกู เรยี กเปน็ หมายเลขอินเทอรเ์ นต็ ง. ชือ่ เว็บไซต์ที่สามารถซ้ากนั ได้7. ช่อื โดเมนเนม ใดไม่ใช่ชือ่ โดเมนเนม ในประเทศไทย ก. *.co ข. *.ac ค. *.go ง. *.au8. ขอ้ ใดไม่ใช่โครงสรา้ งของเวบ็ ไซต์ ก. โครงสร้างของเวบ็ ไซต์ในมมุ มองการจัดการไฟลเ์ ว็บเพจ ข. โครงสร้างของเวบ็ ไซต์ในมมุ มองการเชอื่ มโยงไฟล์เวบ็ เพจ ค. โครงสรา้ งของเว็บไซตใ์ นมุมมองการเช่อื มโยงการสื่อสาร ง. โครงสร้างของเวบ็ ไซตท์ ่เี น้นการเช่ือมโยงของไฟลเ์ วบ็ เพจต่างๆ9. ขอ้ ใดไมใ่ ช่ข้นั ตอนการเขียนโปรแกรม HTML ก. สรา้ งโฟลเดอร์ ข. เปดิ โปรแกรม Notepad ค. เรยี กดผู ลลัพธเ์ วบ็ บราวเซอร์ ง. รปู แบบการพมิ พข์ ้อมูลต่างๆ10. ข้อใดคอื รปู แบบภาษา HTML ก. รูปแบบ Tag เด่ยี วคอื <br> ข. รูปแบบ Tag เด่ียวคอื <html>…</html> ค. รปู แบบ Tag เดี่ยวคอื <head>…<head> ง. รปู แบบ Tag เดย่ี วคือ <i>…</i> บทที่ 1 อินเทอรเ์ น็ตเบอื้ งต้นและโครงสร้างของการเขยี น HTML
Search
Read the Text Version
- 1 - 45
Pages:
