หน่วยที่ 1

หนว่ ยที่ 1 โครงสร้างภาษาโปรแกรมคอมพิวเตอร์ท่ใี ชใ้ น การเขยี นโปรแกรมเว็บ

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพิวเตอรท์ ี่ใชใ้ นการเขยี นโปรแกรมเวบ็

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพวิ เตอร์ท่ใี ช้ในการเขยี นโปรแกรมเว็บ ความหมายของเวบ็ ไซต์ ความหมายของโฮมเพจ เวบ็ เพจ เวบ็ ไซต์ - โฮมเพจ คือ เวบ็ เพจหน้าแรกที่เป็นหน้าดชั นีหรือรายการท่ีบอกรายละเอียดของเวบ็ ไซต์นนั้ ๆ เรา อาจจะเปรียบโฮมเพจเหมือนหน้าบ้านของเวบ็ ไซต์กไ็ ด้ - เวบ็ เพจ (Web Page) เป็นหน้าเอกสารเวบ็ ท่ีสร้างขนึ ้ ด้วยภาษา HTML (Hypertext Markup Language)ซง่ึ โปรแกรมเบราเซอร์จะทาหน้าที่แปลภาษาHTML ออกมาเป็นหน้าเอกสารทางจอภาพ คอมพิวเตอร์ เว็บเพจอาจจะประกอบด้วยข้อความ ภาพกราฟิก หรือภาพเคล่ือนไหวอาจมีเสยี ง ประกอบด้วยก็ได้ ทาให้ดงึ ดดู ความสนใจ และทาให้เวิล์ดไวด์เวบ็ ได้รับความนิยมเป็นอย่างมากในปัจจบบ นั

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพวิ เตอรท์ ใี่ ชใ้ นการเขยี นโปรแกรมเวบ็ - เวบ็ ไซต์ (Web Site) คือ แหลง่ ที่เกบ็ รวบรวมข้อมลู เอกสารและส่ือประสมต่าง ๆ เชน่ ภาพ เสยี ง ข้อความ ของแตล่ ะบริษัทหรือหน่วยงานโดยเรียกเอกสารตา่ ง ๆ เหลา่ นีว้ า่ เวบ็ เพจ (Web Page) และเรียกเวบ็ หน้าแรกของแตล่ ะเวบ็ ไซต์วา่ โฮมเพจ (Home Page) หรืออาจกลา่ วได้วา่ เวบ็ ไซต์กค็ ือ เวบ็ เพจอยา่ งน้อยสองหน้าที่มีลงิ ก์ (Links) ถงึ กนั ตามหลกั คาวา่ เวบ็ ไซต์จะใช้สาหรับผ้ทู ี่มี คอมพิวเตอร์แบบเซริ ์ฟเวอร์หรือจดทะเบียนเป็นของตนเองเรียบร้อยแล้วเช่น www.google.co.th ซงึ่ เป็นเวบ็ ไซต์ท่ีให้บริการสืบค้นข้อมลู เป็นต้นหรือหนว่ ยงานโดยเรียกเอกสารตา่ ง ๆ เหลา่ นีว้ า่ เวบ็ เพจ

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพิวเตอร์ทใี่ ช้ในการเขยี นโปรแกรมเวบ็ ประเภทของเวบ็ แบง่ แยกตามหน้าที่ 1. Advertise (งานประชาสัมพนั ธ์) การประชาสมั พนั ธ์โรงเรียน บริษัท ห้างร้าน ตวั เอง หรือทกบ เวบ็ ที่มีเปา้ หมายเพ่ือให้ผู้คนได้รู้จกั เวบ็ ของ ตนเอง เชน่ TV บริษัท ดารา นกั ร้อง สถาบนั กรม กระทรวง เป็นต้น 2. Data resource (แหล่งข้อมูล) แหลง่ ที่ให้ข้อมลู ท่ีเป็นประโยชน์ เชน่ วิธีการดแู ลสขบ ภาพ การซอ่ มคอมพิวเตอร์ การเขียนโปรแกรม บทความทางวชิ าการ การบริหาร การทาอาหาร เป็นต้น 3. Gallery เวบ็ เพื่อการสะสม เชน่ เคร่ืองรถยนต์ นาฬกิ า ภาพดารา ภาพการ์ตนู สตั ว์ ผลไม้ เป็นต้น

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอร์ทใ่ี ชใ้ นการเขียนโปรแกรมเว็บ 4. บริการส่ง Mail ICQ Pager บริการเหลา่ นีใ้ นไทยรู้จกั กนั ดี บางเวบ็ สามารถสง่ ได้ทงั้ Mail icq และ Pager 5. Download มีหน้าท่ีรวบรวม มาให้ผ้คู นได้ copy เช่น Freeware Shareware ไมว่ า่ จะเป็น Script Program Clipart Screensaver Background Song Game เป็นต้น 6. Free ให้บริการฟรีทงั้ หลาย ไมว่ า่ จะเป็น Redirection Homepage Email Banner Cache Advertise เป็นต้น

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอร์ทใ่ี ชใ้ นการเขยี นโปรแกรมเว็บ 7. www board (กระดาน) จดั กระดานไว้เป็นหมวด ๆ ให้ผ้คู นเข้ไปสง่ คาถาม และผ้คู นกจ็ ะเข้าไปตอบคาถาม เป็นการแลกเปลี่ยน ความรู้ คล้ายหลกั การของ usenet news ซง่ึ มีมาแตโ่ บราณ และทาให้ Internet กระจายอยา่ งทวั่ ถงึ มา จนทกั วนั นี ้แตป่ ัจจบบ นั รัศมีของ Web บดบงั การใช้ Usenet news จนคนไทยหลายคนไมร่ ู้จกั กนั แล้ว 8. Chat เป็นการคยบ กนั ผา่ นแปน้ พิมพ์ 9. E-commerce ซือ้ ขายผา่ นเวบ็ ด้วยบตั รเครดิตบ้าง E-mail ซือ้ ขายกนั บ้าง เชน่ เสอื ้ ผ้า อปบ กรณ์คอมพวิ เตอร์ รถยนต์ เป็นต้น

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพิวเตอร์ทใ่ี ชใ้ นการเขยี นโปรแกรมเว็บ 10. Search engine บริการสบื ค้นเวบ็ ที่ดงั มานานกค็ ือ yahoo.com ซง่ึ ช่วยให้สบื ค้นอะไรได้อยา่ งรวดเร็ว และปัจจบบ นั ก็มีคน ทากนั มาก เพระถือเป็น Gallery ที่ให้ผ้คู นเข้ามาสบื ค้น 11. Poll online ปัจจบบ นั มีคนทา Poll ถามกนั เลน่ ๆ บนเวบ็ มากมาย แตจ่ ะเอาข้อมลู ไปอ้างอิงทางิวชาการไม่ได้ 12. Quiz online มีข้อสอบให้ทา และเฉลยวา่ ข้อใดถกู ผดิ 13. Game online มีการสร้างเกมส์ที่เลน่ แบบ Online ด้วยหลาย ๆ ภาษา

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพวิ เตอรท์ ี่ใชใ้ นการเขียนโปรแกรมเวบ็ กระบวนการพฒั นาโปรแกรม - การวางแผน การวางแผนนบั วา่ มีความสาคญั มากในการสร้างเว็บไซต์ เพ่ือให้การทางานใน ขนั้ ตอนตา่ ง ๆ มีแนว ทางทชี่ ดั เจนและสามารถปฏิบตั ิได้ตามท่ีตงั้ เปา้ ไว้ ซง่ึ ประกอบด้วย - การกาหนดเนือ้ หาและจดบ ประสงค์ของเวบ็ ไซต์ การกาหนดเนือ้ หาและจดบ ประสงค์ของเวบ็ ไซต์ ท่ีจะสร้าง นบั เป็นสิง่ สาคญั อยา่ งมากในการเริ่มต้นสร้างเวบ็ ไซต์เลยทีเดียว เพ่ือให้เหน็ ภาพวา่ เราต้องการ นาเสนอข้อมลู แบบใด เชน่ เวบ็ ไซต์เพื่อให้ข้อมลู ขา่ วสาร การบริการด้านตา่ ง ๆ หรือขายสินค้า เป็นต้น เม่ือสามารถกาหนดจดบ ประสงค์ของเวบ็ ไซต์ได้แล้ว เง่ือนไขเหลา่ นีจ้ ะเป็นตวั กาหนดโครง สร้างรูปแบบ รวมถึงหน้าตา และสีเวบ็ ไซต์ของเราด้วย

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอรท์ ใ่ี ชใ้ นการเขียนโปรแกรมเวบ็ - การกาหนดกลม่บ เปา้ หมาย เพื่อให้การสร้างและออกแบบเวบ็ ไซต์ได้รับความนิยม การ กาหนดกลม่บ เปา้ หมายในการเข้าชมเวบ็ ไซต์ก็นบั วา่ มีสว่ นสาคญั ไมน่ ้อย เช่น เวบ็ ไซต์สาหรับเยาวชน นกั เรียน นกั ศกึ ษาในการค้นหาข้อมลู หรือเวบ็ ไซต์สาหรับบคบ คลทว่ั ไปทเี่ ข้าไปใช้บริการต่าง ๆ เป็นต้น - การเตรียมข้อมลู เนือ้ หาหรือข้อมลู จดั วา่ เป็นส่ิงที่เชิญชวนให้ผ้อู ื่นเข้ามาเย่ียมชมเว็บไซต์ และต้องทราบวา่ ข้อมลู ข่าวสารตา่ ง ๆ สามารถนามาจากแหลง่ ใดบ้าง เช่น การคดิ นาเสนอข้อมลู ด้วย ตวั เอง หรือนาข้อมลู ที่นา่ สนใจมาจากสอื่ อื่น เชน่ หนงั สือพิมพ์ แมกกาซีน เวบ็ ไซต์ และทีส่ าคญั ขอ อนญบ าตเจ้าของบทความกอ่ นเพื่อปอ้ งกนั เรื่องลขิ สทิ ธิ์ด้วย

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอร์ทใี่ ชใ้ นการเขยี นโปรแกรมเว็บ - การเตรียมสงิ่ ตา่ ง ๆ ที่จาเป็น ในการออกแบบเวบ็ ไซต์ต้องอาศยั ความสามารถตา่ ง ๆ เชน่ โปรแกรมสาหรับสร้าง เวบ็ ไซต์ ภาพเคลือ่ นไหว มลั ตมิ ีเดีย การจดโดเมนเนม การหาผ้ใู ห้บริการรับฝาก เวบ็ ไซต์ (Web Hosting) เป็นต้น - การจดั โครงสร้างข้อมลู เมื่อได้ข้อมลู ตา่ ง ๆ เชน่ กาหนดเนือ้ หาและจดบ ประสงค์ของเวบ็ ไซต์ การกาหนดกลม่บ เปา้ หมาย การเตรียมข้อมลู การเตรียมสิง่ ตา่ ง ๆ ที่จาเป็นจากขนั้ แรกเรียบร้อยแล้ว ใน ขนั้ ตอนนี ้เราจะจดั ระบบเพ่ือใช้เป็นกรอบสาหรับการออกแบบและดาเนินการในขนั้ ตอนต่อไป ซง่ึ มี รายละเอียด ดงั นี ้

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพวิ เตอร์ที่ใชใ้ นการเขยี นโปรแกรมเว็บ - โครงสร้างและสารบญั ของเวบ็ ไซต์ - การใช้ระบบนาผ้เู ข้าชมไปยงั สว่ นตา่ ง ๆ ภายในเวบ็ ไซต์หรือท่ีเราเรียกว่าระบบนาทาง (Navigation) - องค์ประกอบท่ีต้องนามาใช้ เช่น ส่ือมลั ตมิ ีเดีย ภาพกราฟิก แบบฟอร์มตา่ ง ๆ - การกาหนดรูปแบบและลกั ษณะของเวบ็ เพจ - การกาหนดฐานข้อมลู ภาษาสคริปต์หรือแอปพลเิ คชนั ท่ีนามาใช้ในเวบ็ ไซต์ - การบริการเสริมตา่ ง ๆ

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพิวเตอร์ท่ใี ชใ้ นการเขียนโปรแกรมเวบ็ เทคนิคการออกแบบเวบ็ ไซต์ การออกแบบเวบ็ ไซต์ให้นา่ สนใจต้องพิจารณา 3 ประการ คือ 1. ออกแบบเวบ็ ไซต์ท่ีเน้นเนือ้ หา เวบ็ ไซต์บางประเภทจะเน้นเนือ้ หา หรือข้อความเป็นหลกั ภายในเวบ็ ไซต์จะประกอบไปด้วย ตวั หนงั สอื มีภาพประกอบบ้างแตไ่ มม่ าก เช่น เอน็ ไซโคพีเดีย ดิกชนั นารี ฯลฯ 2. ออกแบบเวบ็ ไซต์ท่ีเน้นภาพกราฟิก 3. ออกแบบเวบ็ ไซต์ที่เน้นทงั้ ภาพและเนือ้ หา

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพิวเตอร์ท่ีใช้ในการเขยี นโปรแกรมเว็บ ส่วนประกอบของหน้าเวบ็ เพจ เราสามารถจาแนกสว่ นประกอบของหน้าเวบ็ เพจ เป็น 3 สว่ น ดงั นี ้ 1. สว่ นหวั (Page Header) นา่ จะอยบู่ ริเวณบนสดบ ของหน้าเวบ็ เพจ เป็นสว่ นท่ีแสดงชื่อ เวบ็ ไซต์ โลโก้ แบนเนอร์โฆษณาลงิ ก์สาหรับข้ามไปยงั หน้าเวบ็ อื่น

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพิวเตอรท์ ่ใี ช้ในการเขยี นโปรแกรมเว็บ2.ส่วนเน้ือหา(Page Body)จะอยบู่ ริเวณตอนกลางของหนา้ เวบ็ เพจซ่ึงเป็นส่วนที่แสดงเน้ือหาภายในหนา้ เวบ็ เพจน้นั โดยประกอบดว้ ยขอ้ 2. สว่ นเนือ้ หา (Page Body) จะอยบู่ จะอยบู่ ริเวณตอนกลางของหน้าเวบ็ เพจ ซง่ึ เป็นสว่ นที่แสดงเนือ้ หาภายในหน้าเวบ็ เพจนนั้ โดย ประกอบด้วยข้อความ ข้อมลู ภาพเคล่อื นไหว เป็นต้นริเวณตอนกลางของหนา้ เวบ็ เพจ ซ่ึงเป็นส่วนที่แสดงเน้ือหาภายในหนา้ เวบ็ เพจน้นั โดยประกอบดว้ ยขอ้ ความ ขอ้ มูล ภาพเคลื่อนไหว เป็นตน้

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอร์ทใ่ี ชใ้ นการเขียนโปรแกรมเวบ็ 3. สว่ นท้าย (Page Footer) จะอยบู่ ริเวณด้านลา่ งสดบ ของหน้าเวบ็ เพจ สว่ นมากใช้สาหรับลิงก์ข้อความ สนั้ ๆ เข้าใจงา่ ย หรือจะมีช่ือเจ้าของเวบ็ ไซต์ อีเมลแอดเดรสของผ้ดู แู ลเวบ็ ไซต์สาหรับตดิ ตอ่ กบั ทาง เวบ็ ไซต์

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพวิ เตอร์ที่ใชใ้ นการเขยี นโปรแกรมเว็บ แนวคดิ ในการออกแบบ - ดจู ากเวบ็ ไซต์อ่ืนเพื่อเป็นตวั อยา่ ง การดจู ากเวบ็ ไซต์อ่ืนบนอนิ เตอร์เนต็ เพื่อศกึ ษาเป็นตวั อยา่ ง นนั้ นบั เป็นวิธีการท่ีงา่ ยท่ีสดบ แตก่ ค็ วรนาไปประยกบ ต์ใช้ให้เหมาะสมกบั เนือ้ หาและกลม่บ เปา้ หมายของเรา ด้วย - ศกึ ษาจากสื่อสง่ิ พิมพ์ในรูปแบบตา่ ง ๆ ส่อื ส่งิ พมิ พ์ในท่ีนี ้ได้แก่ แมกกาซีน โปสเตอร์โฆษณา โบรชวั ร์ หรือหนงั สอื บางเลม่ ที่มีรูปแบบและจดบ ดงึ ดดู ความสนใจ สามารถนามาประยกบ ต์ใช้ในเวบ็ ไซต์ของ เราได้เช่นกนั

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพิวเตอร์ที่ใชใ้ นการเขียนโปรแกรมเวบ็ กระบวนการพัฒนาเวบ็ ไซต์ การที่จะสร้างพฒั นาเวบ็ เพจและนาเวบ็ ไซต์เข้าสรู่ ะบบเวลิ ด์ ไวด์ เวบ็ ให้คนอ่ืนเข้ามาเยี่ยมชมได้ นนั้ มีกระบวนการที่ผ้พู ฒั นาเวบ็ ไซต์จะต้องศกึ ษาและปฏบิ ตั ิตาม ดงั นี ้ 1. การวางแผนการทางาน การวางแผนการทางานเปรียบเหมือนเข็มทิศท่ีจะชีท้ างให้เรารู้วา่ ควรจะเดนิ ทางไปในทิศทาง ใดเพื่อไมใ่ ห้หลงทาง การสร้างเวบ็ ไซต์ก็เหมือนกนั จาเป็นต้องมีการวางแผนการทางานให้รอบด้านก่อนท่ี จะเร่ิมลงมือทา โดยมีหลกั ที่ต้องกาหนดในการวางแผน ดงั นี ้ 1. ระยะเวลาการทางาน เป็นการกาหนดช่วงเวลาท่ีจะใช้ในการสร้างเวบ็

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพิวเตอร์ท่ใี ชใ้ นการเขยี นโปรแกรมเวบ็ 2. ทีมงานหรือผ้รู ่วมงาน ปกติการสร้างเวบ็ ต้องทางานเป็นทมี อยา่ งน้อยต้องมี ผ้เู ช่ียวชาญ 3 ฝ่าย คือ ผ้เู ช่ียวชาญด้านภาษา HTML หรือ โปรแกรมสร้างเวบ็ เพจ ผ้เู ชี่ยวชาญด้านการ ออกแบบและตกแตง่ ภาพ และผ้เู ช่ียวชาญด้านเนือ้ หาหรือบรรณาธิการ 3. งบประมาณ เป็นการกาหนดคา่ ใช้จา่ ย 4. อปบ กรณ์หรือเคร่ืองมอื ชว่ ยงาน เช่น เคร่ืองคอมพิวเตอร์ เคร่ืองสแกนเนอร์และรูปภาพ ประกอบเวบ็ เพจ เป็นต้น 5. ปัญหาและอปบ สรรค

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอรท์ ใี่ ชใ้ นการเขยี นโปรแกรมเวบ็ 2. การรวบรวมและวิเคราะห์โครงสร้าง เป็นขนั้ ตอนหนง่ึ ท่ีตอ่ จากการวางแผน เป็นการแผนงานไปปฏิบตั ิ โดยการรวบรวมข้อมลู ท่ี จาเป็นต้องใช้ในการสร้างเวบ็ ตามหวั ข้อท่เี ลอื กไว้ ทงั้ เนือ้ หา ภาพ เสยี งและภาพเคลอ่ื นไหว เก็บรวบรวม เป็นไฟล์ข้อมลู หรือใสแ่ ฟม้ แยกเป็นหมวดหมู่ เพ่ือความสะดวกในการนามาใช้งาน

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพิวเตอร์ท่ีใช้ในการเขยี นโปรแกรมเวบ็ 3. การออกแบบและการสร้างเวบ็ ไซต์ เป็นขนั้ ตอนการนาข้อมลู ทงั้ หมดมาสร้างเป็นเวบ็ ไซต์ด้วยภาษา HTML หรือเครื่องมือในการ สร้างเวบ็ อื่นๆ หลกั สาคญั ในการออกแบบและสร้างเวบ็ คือ 1. กาหนดจดบ ประสงค์เวบ็ ไซต์ โดยวางเปา้ หมายของผ้เู ข้าชมวา่ จะเป็นกลม่บ ใด 2. เลือกเวบ็ เบราว์เซอร์ เป็นการเลอื กเวบ็ เบราว์เซอร์ท่ีใช้แสดงผลเวบ็ ไซต์ จะได้กาหนด ขนาดกว้าง ยาว และลกั ษณะการวางองค์ประกอบ เวบ็ ให้สวยงามและแสดงผลได้เร็ว

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพิวเตอร์ท่ใี ช้ในการเขยี นโปรแกรมเว็บ 3. วางโครงร่างของเวบ็ ไซต์ กาหนดโครงร่างวา่ มีทงั้ หมดก่ีเวบ็ เพจ แตล่ ะเวบ็ เพจมีเนือ้ หา อะไรบ้าง ควรเขียนเป็นแผนผงั เวบ็ ไซต์ออกมาบนกระดาษ 4. ออกแบบหน้าตาเวบ็ เป็นขนั้ ตอนในการลงมือสร้างเวบ็ เพจแตล่ ะหน้าตามทไ่ี ด้ ออกแบบไว้ พร้อมกบั ทดสอบผ่านเวบ็ เบราว์เซอร์ (แบบ Offline)

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอรท์ ีใ่ ชใ้ นการเขียนโปรแกรมเวบ็ 4. ทดสอบและปรับปรบงเวบ็ ไซต์ หมายถงึ การทดสอบแบบออฟไลน์ โดยท่ียงั ไมไ่ ด้นาเวบ็ ไซต์เข้าสอู่ ินเทอร์เน็ต แตก่ ส็ ามารถ แสดงผลได้เหมือนจริงผา่ นเวบ็ เบราว์เซอร์ เช่น IE เพื่อตรวจสอบตวั อยา่ งเวบ็ ท่ีสร้างไว้ เช่น ขนาดตวั อกั ษร ขนาดภาพ การใช้สี ตาราง ฯลฯ วา่ เหมาะสมหรือไม่ พร้อมกบั การปรับปรบงจนเป็นที่นา่ พอใจ

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพิวเตอร์ทใี่ ช้ในการเขียนโปรแกรมเวบ็ 5. เผยแพร่ผ่านเวบ็ ไซต์ เป็นการเผยแพร่ให้คนทว่ั ไปได้รู้จกั หรือเรียกวา่ การอพั โหลด (Upload) โดยเจ้าของเวบ็ จะต้อง จดทะเบียนโดเมนเนม และเชา่ พืน้ ที่โฮสต์ ก็สามารถนาเวบ็ เพจอพั โหลดขนึ ้ สอู่ นิ เทอร์เน็ต และ ประชาสมั พนั ธ์ให้คนทวั่ ไปได้รู้จกั การที่จะทาให้คนรับรู้ และเข้ามาใช้บริการเวบ็ ไซต์ได้มากนนั้ จะต้องมี การประชาสมั พนั ธ์อยา่ งตอ่ เนื่องและใช้เวลาพอสมควร และถ้าจะให้ดีควรมีเคาน์เตอร์ (Counter) หรือตวั จดสถิตผิ ้เู ข้าชม ก็จะช่วยให้ประเมินได้วา่ เวบ็ ไซต์ของเราได้รับความสนใจมากน้อยเพียงใด

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพวิ เตอร์ทใ่ี ชใ้ นการเขยี นโปรแกรมเว็บ 6. การพฒั นาเวบ็ ไซต์ เป็นการปรับปรบงเนือ้ หา ภาพประกอบหรืออพั เดท (Update) เวบ็ ไซต์ ถือเป็นขนั้ ตอนสาคญั เพราะในโลกของอินเทอร์เน็ตมีการเปลย่ี นแปลงอย่างรวดเร็วอยตู่ ลอดเวลา ผ้ชู มเว็บมกั จะใช้เวลาในการ ค้นหาและเปิดผา่ นเวบ็ ไซต์ตา่ งๆ อยา่ งรวดเร็วหากพบวา่ เวบ็ ไซต์ของเราไมไ่ ด้เปลยี่ นแปลงหรือมีข้อมลู ใหมๆ่ เพม่ิ ขนึ ้ เลย ผ้เู ข้าชมเวบ็ กจ็ ะลดจานวนลงไปเรื่อยๆ จนกลายเป็นเวบ็ ที่ไมม่ ีผู้คนเข้ามาเลยหรือเป็น เวบ็ ท่ีตายแล้ว ดงั นนั้ การปรับปรบงเวบ็ ไซต์อยเู่ สมออาจจะวนั ละครัง้ หรือสปั ดาห์ละครัง้ โดยเพิ่มข้อมลู ข่าวสารใหมๆ่ อยเู่ ป็นประจากจ็ ะทาให้เวบ็ ไซต์ทนั สมยั ผ้คู นเข้าชมเป็นประจาและมากขนึ ้ จนพฒั นาเป็น เวบ็ ไซต์ยอดนิยมได้ในทสี่ ดบ

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอร์ท่ีใช้ในการเขยี นโปรแกรมเว็บ ภาษาท่ีใช้ในการสร้างเวบ็ ไซต์พนื้ ฐาน 1. HTML (ย่อมาจาก Hyper Text Markup Language) เป็นภาษาที่ใช้สาหรับสร้างเวบ็ เพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ตา่ งๆ ท่ีใช้ ในการควบคมบ การแสดงผลของข้อความ รูปภาพ หรือวตั ถอบ ื่น ๆ ภาษา HTML นนั้ เป็นภาษาประเภท Markup ไมจ่ ดั เป็นภาษาประเภท Programming สามารถที่จะเรียนรู้ได้ง่าย

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพิวเตอรท์ ่ใี ชใ้ นการเขียนโปรแกรมเว็บ ส่งิ ท่ตี ้องเตรียมเม่ือต้องการเขียนโฮมเพจ 1. เคร่ืองคอมพิวเตอร์ ขนาดตงั้ แต่ 486 หรือ pentium ขนึ ้ ไป 2. หน่วยความจาไมน่ ้อยกวา่ 8 MB 3. พืน้ ที่ฮาร์ดดิสต์ขนาดไมน่ ้อยกวา่ 20 MB 4. Mouse 5. โปรแกรม Internet Explorer Version 3.0 ขนึ ้ ไป 6. โปรแกรม Netscape Navigator Version 3.0 ขนึ ้ ไป 7. โปรแกรม Notepad

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอรท์ ใี่ ชใ้ นการเขยี นโปรแกรมเว็บ โครงสร้างพนื้ ฐานของ HTML โครงสร้างของ HTML จะประกอบไปด้วยสว่ นของคาสง่ั 2 สว่ น คือ สว่ นท่ีเป็น สว่ นหวั (Head) และสว่ นที่เป็นเนือ้ หา (Body) โดยมีรูปแบบคาสงั่ ดงั นี ้ <HTML> <HEAD> <TITLE> ชื่อโปรแกรมหรือข้อมลู ท่ีต้องการแสดงในสว่ นหวั </TITLE> </HEAD> <BODY> คาสง่ั หรือข้อความท่ีต้องการให้แสดง </BODY> </HTML>

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพิวเตอร์ทีใ่ ช้ในการเขียนโปรแกรมเวบ็ การจัดโครงสร้ างแฟ้ มเอกสาร ในความงา่ ยของภาษา HTML นนั้ เพราะภาษานีไ้ มม่ ีโครงสร้างใด ๆ มากาหนดนอก จาก โครงสร้างพืน้ ฐานเทา่ นนั้ หรือ แม้แตจ่ ะไมม่ ีโครงสร้าง พืน้ ฐานอยู่ โปรแกรมท่ีเขียนขึน้ มานนั้ กส็ ามารถ ทางานได้เสมือนมี โครงสร้างทง่ั นีเ้ป็นเพราะ วา่ ตวั โปรแกรม เวบ็ เบราเซอร์ จะมองเหน็ ทกบ สิง่ ทกบ อยา่ งใน โปรแกรม HTML เป็นสว่ นเนือ้ หาทงั้ สนิ ้

หน่วยท่ี 1 โครงสร้างภาษาโปรแกรมคอมพิวเตอร์ท่ใี ชใ้ นการเขยี นโปรแกรมเวบ็ การแสดงผลท่เี วบ็ เบราเซอร์ หลงั จากมีการพิมพ์โปรแกรมนีเ้สร็จเรียบร้อยแล้ว ให้บนั ทกึ เป็น ไฟล์ที่มีนามสกลบ .htm หรือ .html จากนนั้ ให้เรียก โปรแกรมเวบ็ เบราเซอร์ขนึ ้ มาทาการทดสอบ ข้อมลู ที่เราสร้างจะถกู นามาท่ีออกมาแสดงท่ีจอภาพ ถ้าไม่เขียนอะไรผิด บน จอภาพก็จะแสดงผลตามนนั้ ถ้าเรามีการปรับปรบงแก้ไขข้อมลู ในโปรแกรมเดมิ ให้อย่ใู นรูปของ โปรแกรมใหม่ ก็จา เป็นต้อง โหลดโปรแกรมขนึ ้ มาใหม่ เพียงแตเ่ ลอื่ นเมาส์ไปคลิกท่ีป่มบ Refresh โปรแกรมก็จะทาการ ประมวลผลและแสดงผลออกมา ใหม่ ในคาสง่ั HTML สว่ นใหญ่ใช้ตวั เปิด เป็นเคร่ืองหมาย น้อยกวา่ < ตามด้วยคาสงั่ และปิดท้ายด้วยเครื่องหมายมากกวา่ > และมีตวั ปิดท่ีมีรูปแบบเหมือนตวั เปิดเสมอ เพียงแตจ่ ะมีเคร่ือง หมาย / อยหู่ น้าคาสงั่ นนั้ ๆ เช่น คาสง่ั <BODY> จะมี </BODY> เป็นคาสงั่ ปิด เมื่อใดท่ีผ้เู ขียนลมื หรือพิมพ์คาสงั่ ผดิ จะสง่ ผลให้การทางานของโปรแกรมผิดพลาดทนั ที

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอร์ทีใ่ ช้ในการเขียนโปรแกรมเว็บ 2. CSS (ย่อมาจาก Cascading Style Sheets) เป็นภาษาท่ีมีรูปแบบการเขียน Syntax ที่เฉพาะ ถกู กาหนดขนึ ้ เพื่อใช้เสริมภาษา HTML ให้ สามารถจดั รูปแบบการแสดงผลให้กบั เอกสาร HTML ได้สมบรู ณ์แบบมากขนึ ้ 3. XHTML (ย่อมาจาก Extensible HyperText Markup Language) เป็นมาตรฐานใหมข่ อง HTML คาสงั่ ตา่ งๆนนั้ กย็ งั เหมือนกบั HTML แตจ่ ะมีความเข้มงวดในเร่ือง โครงสร้างภาษามากกวา่ และมีการตดั tag และ attribute ท่ีล้าสมยั ออกไป

หน่วยท่ี 1 โครงสรา้ งภาษาโปรแกรมคอมพวิ เตอร์ทใี่ ชใ้ นการเขยี นโปรแกรมเว็บ ภาษา Script ท่ีใช้ในการสร้างเวบ็ เพจ แบ่งได้เป็ น 1) Server-Side Script เชน่ PHP, ASP, JSP, CGI เป็นภาษา script ที่ประมวลผลท่ีฝ่ัง Server แล้ว สง่ ผลลพั ธ์ไปแสดงผลท่ีฝ่ัง Client ผา่ นโปรแกรมเวบ็ บราวเซอร์ เชน่ IE, Firefox

หน่วยท่ี 2 โครงสร้างภาษาโปรแกรมคอมพิวเตอรท์ ่ีใชใ้ นการเขียนโปรแกรมเว็บ 2) Client-Side Script เชน่ JavaScript, VBScript, JScript เป็นภาษา script ท่ีประมวลผลบนเคร่ือง คอมพวิ เตอร์ของผ้เู ย่ียมชมเวบ็ ไซต์ โดยใช้โปรแกรมเวบ็ เบราเซอร์ ซงึ่ จะช่วยแบง่ เบาการทางานให้กบั เคร่ือง Web Server ได้ในกรณีท่ีต้องการให้แอพพลเิ คชนั ทางานร่วมกนั กบั แอพพลเิ คชนั อ่ืน เชน่ ฐานข้อมลู เราจะต้องใช้ Server-Side Script เขียนคาสงั่ ตดิ ตอ่ กบั ฐานข้อมลู โดยผ้ชู มเวบ็ จะไม่ สามารถดคู าสงั่ ( Source Code) ของ Server-Side Script เหลา่ นนั้ ได้ ตา่ งจากการเขียนคาสง่ั แบบ Client-Side Script ท่ีผ้ชู มเวบ็ สามารถดคู าสงั่ ท่ีเขียนด้วย Client-Side Script รวมถงึ HTML, CSS ของ หน้าเวบ็ เพจนนั้ ได้ ด้วยการคลกิ เมาส์ขวาบนหน้าเวบ็ เพจนนั้ ๆ และเลือกคาสงั่ View Source หรือ View Page Source ในโปรแกรมเวบ็ เบราเซอร์