ebook

หน่วยที่ 1 โครงสร้างการทางานของเวบ็ ไซต์รหสั 2204-2009 วชิ า การสร้างเวบ็ ไซต์ ระดบั ปวช .2 จานวน 3 หนว่ ยกิตชอื่ หนว่ ย โครงสรา้ งการทางานของเว็บไซต์ เวลา 4 ช่วั โมง1.1 ความหมายของอนิ เทอร์เนต็ อินเตอรเ์ น็ต (Internet) ยอ่ มาจากคาวา่ “International network” หรอื “InterConnection network” ซึง่ หมายถงึ เครอื ข่ายคอมพวิ เตอรข์ นาดใหญท่ เี่ ชื่อมโยงเครือข่ายคอมพิวเตอร์ทว่ัโลกเข้าไว้ดว้ ยกัน เพือ่ ใหเ้ กดิ การสือ่ สาร และการแลกเปลยี่ นข้อมูลร่วมกนั โดยอาศยั ตัวเช่อื มเครอื ข่ายภายใตม้ าตรฐานการเชอื่ มโยงเดียวกนั นั่นก็คอื TCP/IP Protocol ซึ่งเปน็ ข้อกาหนดวิธกี ารตดิ ต่อสื่อสารระหว่างคอมพิวเตอรใ์ นระบบเครอื ข่าย ซงึ่ โปรโตคอลนจ้ี ะชว่ ยใหค้ อมพวิ เตอรท์ ี่มฮี าร์ดแวรท์ แ่ี ตกต่างกันสามารถตดิ ต่อถึงกนั ได้ 1.2 ความหมายของเวลิ ด์ไวด์เวบ็ เวิลด์ไวด์เวบ็ (World Wide Web) เรียกสน้ั ๆ ว่าเวบ็ หรอื WWW ถือเปน็ สว่ นที่นา่ สนใจทสี่ ดุ บนอินเทอรเ์ นต็ เพราะสามารถแสดงสารสนเทศตา่ งๆ ไดห้ ลากหลาย เปน็ สงิ่ ที่เชอื่ มโยงเคร่ืองคอมพวิ เตอร์เซิรฟ์ เวอรท์ ีใ่ ชเ้ กบ็ ข้อมลู ตา่ งๆ ใหส้ ามารถเขา้ ถึงได้ผา่ นอินเตอรเ์ นต็ แบบใยแมงมมุ 1.3 ความหมายของเวบ็ ไซต์ เวบ็ ไซต์ (Web Site) คือ คาท่ีใช้เรียกกลมุ่ ของเวบ็ เพจ ( ดังนั้นภายในเว็บไซต์จะประกอบไปด้วยโฮมเพจและเวบ็ เพจ ) เวบ็ ไซต์ก็คือแหล่งท่ีรวบรวมเวบ็ เพจจานวนมากมายหลายหน้าในเรอื่ งเดียวกนั มารวมอยู่ดว้ ยกัน แตส่ งิ่ หนงึ่ ในการเสนอเรือ่ งราวทีอ่ ยบู่ นเว็บไซตท์ ่ีแตกตา่ งไปจากโปรแกรมโทรทศั น์ เนอ้ื หาในนติ ยสาร หรอื หนังสอื พมิ พ์ เนอื่ งจากการทางานบนเว็บจะไมม่ ีวนั สนิ้ สดุ ทั้งน้เี นอื่ งจากเรา สามารถเปลยี่ นแปลงและเพมิ่ สารสนเทศบนเว็บไซตไ์ ดต้ ลอดเวลา และแต่ละเวบ็ เพจจะมกี ารเช่อื มโยงกนั ภายใน

เว็บไซตห์ รือไปยงั เวบ็ ไซต์อ่ืนๆ เพือ่ ใหผ้ ู้อ่านสามารถอา่ นไดใ้ นเวลาอันรวดเร็ว โดยเรามักใช้เรียกเวบ็ ทมี่ ขี นาดใหญแ่ ละมีการจดทะเบียนช่ือเวบ็ ไซต์นัน้ ๆไว้แล้ว (Domain Name) เว็บเพจ (Web Page) คอื คาท่ใี ชเ้ รยี กหนา้ เอกสารต่างๆ ทอ่ี ยใู่ นรปู แบบไฟล์ HTML (HyperText Markup Language) เปรียบเสมอื นหน้ากระดาษแตล่ ะหน้าทมี่ ีเรอ่ื งราวตา่ งๆมากมายบรรจุอย่ใู นนติ รสาร แต่แตกต่างกนั ตรงท่มี กี ารเช่อื มโยง (Link) ซึง่ เราสามารถคลิกไปทหี่ น้าใดของโฮมเพจก็ได้ เว็บเพจ คอื หน้าหนงั สืออเิ ลก็ ทรอนกิ สบ์ นเวบ็ ที่เจ้าของเวบ็ เพจ ต้องการจะใส่ลงไปในหนา้ หนงั สืออเิ ลก็ ทรอนิกส์นนั้ เช่น ข้อมลู แนะนาตัวเองซง่ึ อาจเปน็ บุคคลหรอื องค์กรทต่ี อ้ งการใหผ้ อู้ ่ืนไดท้ ราบ หรอื ข้อมลู ทนี่ ่าสนใจ เปน็ตน้ โดยท่ีขอ้ มลู ท่ีแสดงเป็นไดท้ ัง้ ขอ้ ความ เสียง ภาพน่ิง และภาพเคลอื่ นไหวและขอ้ มลู ที่นาเสนอสามารถเช่ือมโยงในรปู ของไฮเพอรเ์ ทก็ ซ์ คือ เช่ือมโยงไปยงั เว็บเพจอน่ื ทจ่ี ะให้ขอ้ มูลนนั้ ๆ ในระดับลกึ ลงไปไดเ้ รอื่ ยๆ และเวบ็ เพจจะตอ้ งมที อ่ี ยอู่ เิ ลก็ ทรอนกิ ส์บนเครือขา่ ยเฉพาะของตน ซึง่ แหล่งท่อี ยนู่ ้เี รยี กว่า URL (UniformResourceLocatorโฮมเพจ (Home page) โดยท่วั ไปแลว้ ในแตล่ ะเว็บไซตจ์ ะมีโฮมเพจ หรือ หน้าต้อนรบั(welcome page) ซึ่งปรากฏเปน็ หน้าแรกเมื่อเปดิ เวบ็ ไซตน์ ั้นข้ึนมา เปรยี บเสมือนกบั สารบญั และคานา ที่เจ้าของเว็บไซตส์ รา้ งข้นึ เพ่อื ใชป้ ระชาสมั พนั ธ์องค์กรของตนวา่ ให้บริการในสง่ิ ใดบ้าง ดงั นนั้ หากเราออกแบบหน้าโฮมเพจให้สวยงามและน่าสนใจ โอกาสทผี่ ชู้ มจะแวะเขา้ มาเยย่ี มเยียนโฮมเพจของเราก็จะยิง่ มากตามไปดว้ ยโปรแกรมเวบ็ บราวเซอร์ (Web Bowser) เป็นโปรแกรมทเี่ ป็นตวั กลางทีท่ าหนา้ ทีแ่ ปลงคาสัง่ ก่อนแล้วแสดงผลคาสง่ั ใหอ้ อกมาในรูปภาพ เสียง และขอ้ มลู ต่าง ๆ การแสดงผลขอ้ มูลต่าง ๆ บนอินเตอรเ์ น็ตในรูปของHTML ไมส่ ามารถทจ่ี ะแสดงผลขอ้ มูลออกมาไดโ้ ดยตรงจะตอ้ งใช้เวบ็ บราวเซอร์ โปรแกรมบราวเซอรท์ ผี่ ู้ใช้นยิ มใชก้ ัน ได้แก่ Microsoft Frontpage , Netscape Composer ,Internet Explorer 1.4 ประเภทของเวบ็ ไซต์ เวบ็ ไซต์สามารถแบง่ ออกไดเ้ ปน็ กลุ่มใหญ่ๆ ได้ 8 ประเภทตามลักษณะของเนอ้ื หาและรูปแบบของเว็บไซต์ กลมุ่ เว็บท้ัง 8 ประเภท ประกอบดว้ ย1. เวบ็ ทา่ (Portal Site) เว็บทา่ หรอื เรียกอยา่ งหนึ่งวา่ เวบ็ วาไรต้ี หมายถงึ เว็บทใี่ ห้บรกิ ารตา่ งๆมากมาย มกั ประกอบไปดว้ ย บริการเครื่องมอื ค้นหา ทีร่ วบรวมลิงค์ของเว็บไซตท์ ี่นา่ สนใจมากมายให้ไดค้ น้ หา รวมถึงบรกิ ารท่ี เก่ยี วกบั เรื่องราวท่ีมีสาระและบันทกึ หลากหลายประเภท เช่น ดหู นัง ฟังเพลง ดดู วง ทอ่ งเที่ยว เกม

สุขภาพ หรือ อืน่ ๆ นอกจากนนั้ แล้วเวบ็ ทา่ ยังมลี ักษณะในการเป็นแหลง่ แลกเปล่ียนความคิดเห็นของ ผคู้ นในสงั คมเรอ่ื งเกยี่ วกับประเด็นตา่ งๆ ซึ่งเรยี กว่า เวบ็ ชมุ ชน คอื เว็บทใ่ี หบ้ ริการพนื้ ที่แก่กลุ่มคนผ้มู ร ความสนใจในเรื่องเดยี วกนั ได้เข้ามาแลกเปลี่ยนและแสดงความคดิ เห็น รูปที่ 1.1 www.pantip.com (ท่มี า : www.pantip.com , 2559)2. เวบ็ ขา่ ว (News Site) เป็นเวบ็ ทส่ี ร้างขึน้ โดยองค์กรข่าวหรอื สถาบนั สอ่ื สาร มวลชนตา่ งๆ ท่มี สี ือ่ มวลชนประเภทต่างๆ ของ ตนอยู่เปน็ หลกั เช่น สถานโี ทรทัศน์ สถานวี ิทยุ หนงั สือพมิ พ์ นติ ยสาร วารสาร หรอื แม้กระทง่ั กระทรวง ทบวง กรมต่างๆ ซ่งึ ผ้ใู ช้สามารถค้นหาข้อมลู และตดิ ตามข่าวได้ทกุ เวลา รปู ที่ 1.2 http://www.thairath.co.th/ (ทมี่ า : http://www.thairath.co.th/, 2559)

3. เว็บข้อมูล (Information Site) เป็นเวบ็ ทใ่ี หบ้ รกิ ารเกีย่ วกับการสบื ค้น ขอ้ มูลขา่ วสาร หรอื ขอ้ เทจ็ จริงตา่ งๆ ท่นี า่ สนใจ องคก์ รตา่ งๆ มกั สรา้ งเว็บขอ้ มลู ของตนขน้ึ มาเพ่ือเปน็ ชอ่ งทางใหป้ ระชาชนหรอื กลุม่ บคุ คลท่ี สนใจ เขา้ มาศกึ ษา คน้ ควา้ ขอ้ มูลที่เก่ยี วขอ้ งกับองค์กรของตน รูปท่ี 1.3 https://th.wikipedia.org (ที่มา : https://th.wikipedia.org, 2559)4. เว็บธุรกิจหรอื การตลาด (Business/Marketing Site) สรา้ งขึ้นโดย องค์กรธุรกิจต่าง ๆ มจี ุดประสงคใ์ นการประชาสัมพันธอ์ งคก์ รและเพมิ่ ผลกาไรทาง การค้าด้วย โดยเน้อื หาสว่ นใหญห่ รือเกอื บทง้ั หมดมักจะเป็นการนาเสนอเก่ียวกบั รายละเอยี ด และ ความนา่ สนใจของสินค้าและบริการ รูปที่ 1.4 http://www.tarad.com (ทมี่ า : http://www.tarad.com, 2559)

5. เวบ็ การศึกษา (Educational Site) ส่วนใหญส่ ร้างขนึ้ โดยสถาบนั การศกึ ษาต่างๆ หรือองคก์ รทง้ั ของภาครัฐและเอกชนทม่ี นี โยบายใน การเผยแพร่ความรู้ และใหโ้ อกาสในการคน้ คว้าหาขอ้ มลู เพอื่ การศึกษาแกน่ ักเรียน นิสิต นกั ศึกษา รวมถงึ ประชาชนท่ัวไป เว็บการศกึ ษาใหข้ อ้ มลู เกีย่ วกบั การเรียนร้ทู เี่ ป็นทางการและไม่เป็นทางการ บรกิ ารการเรียนร้แู บบออนไลน์ หรอื ทีเ่ รียกว่า อเี ลริ ์นนิ่ง (E-Learning) ตา่ ง ๆ รปู ที่ 1.5 http://www.hellomyweb.com/index.php/main/content/36 (ทม่ี า : http://www.hellomyweb.com/index.php/main/content/36, 2559)6. เวบ็ บันเทิง (Entertainment Site) เปน็ เวบ็ นาเสนอและใหบ้ รกิ ารต่างๆ เพ่ือเสรมิ สร้างความบันเทงิ จะเปน็ เรื่องราวเกย่ี วกัน ดนตรี ภาพยนตร์ ดารา กฬี า เกม ความรัก บทกลอน การ์ตูน เรอื่ งขาขัน รวมถงึ บรกิ ารดาวน์โหลดโลโก้ และรงิ โทนสาหรบั โทรศพั ท์เคลื่อนที่ดว้ ย รูปที่ 1.6 http://www.sanook.com (ท่ีมา : http://www.sanook.com, 2559)

7. เว็บองค์กรทไ่ี ม่แสวงหาผลกาไร (Non-profit Organization Site) สว่ นใหญส่ รา้ งขน้ึ โดยบคุ คลหรอื องค์การต่าง ๆ ท่มี ีนโยบายในการสร้างและช่วยเหลอื สงั คมโดยที่ไม่ หวงั ผลกาไรหรอื ค่าตอบแทน ซงึ่ กลมุ่ บุคคลหรือองค์การเหลา่ นไ้ี ดแ้ ก่ สมาคม ชมรม มลู นิธิ และ โครงการต่างๆ โดยอาจจะมีจุดประสงคเ์ ฉพาะที่แตกต่างกันเชน่ เพอื่ ทาความดี สรา้ งสรรคส์ งั คม พิทักษส์ ง่ิ แวดลอ้ ม ปกปอ้ งสทิ ธมิ นษุ ยชน รณรงคไ์ มส่ บู บหุ ร่ี เปน็ ตน้ รปู ที่ 1.7 http://www.enconfund.go.th/ (ท่ีมา : http://www.enconfund.go.th/, 2559)8. เว็บส่วนตัว (Personal Site) บางครงั้ อาจเปน็ เวบ็ ของคนๆ เดยี ว เพอื่ นฝงู หรอื ครอบครวั กไ็ ด้ โดยอาจจะจดั ทาขนึ้ ด้วยเหตผุ ลที่ แตกต่างกนั เช่น แนะนาตนเอง แนะนากลมุ่ เพ่ือน โชวร์ ูปภาพ แสดงความคดิ เหน็ เขียนไดอารี่ ประจาวนั นาเสนอผลงาน ถ่ายทอดประสบการณเ์ กย่ี วกบั สงิ่ ที่เชย่ี วชาญหรอื สนใจ รูปที่ 1.8 http://inspiration-th.simdif.com/personal_website.html (ทีม่ า : http://inspiration-th.simdif.com/personal_website.html,2559)

1.5 รูปแบบโครงสร้างเวบ็ ไซต์รปู แบบของเวบ็ ไซตส์ ามารถแบง่ ไดเ้ ป็น 2 รูปแบบ หลักๆๆคอื 1. Static Website หมายถงึ เว็บไซต์ทสี่ รา้ งดว้ ยภาษา HTML ธรรมดา และบนั ทกึ เปน็ ไฟล์นามสกลุ .html เน้ือหาขอ้ ความ รปู ภาพในหนา้ เวบ็ เพจนนั้ จะเป็นไปตามทเี่ ราเขียนกาหนดไว้เหมาะสมกับเว็บไซตท์ ม่ี ีขนาดไมใ่ หญ่ จานวนหน้าเว็บเพจไมม่ ากไม่มีการเปล่ียนแปลงขอ้ มลู บ่อยๆและไมม่ กี ารติดตอ่ ฐานข้อมลู 2. Dynamic Wensite หมายถึงเวบ็ ไซต์ทหี่ นา้ เวบ็ เพจสามารถเปลยี่ นแปลงขอ้ มลู เองไดโ้ ดยมาต้องเขยี นแตล่ ะหนา้ เว็บเพจเอง เช่น กระดาษข่าว ระบบสืบคน้ ข้อมลู เว็บไซต์ท่ีถกู สร้างดว้ ยภาษาสครปิ ต์ เช่น php,ASP และมกั จะมีการตดิ ตอ่ กบั ฐานข้อมูลเพือ่ บนั ทึกข้อมลู ลงในฐานขอ้ มลูและนาข้อมลู จากฐานข้อมูลมาแสดงหน้าเวบ็ เพจได้