หน่วย1 ความรู้พื่้นฐานการสร้างเว็บไซต์

คำศัพท์เบ้ืองตน้ เกย่ี วกับเว็บไซต์ อินเตอร์เนต็ คือ เครือขา่ ยคอมพวิ เตอร์ขนาดใหญ่ท่เี ชื่อมต่อกับเครอ่ื งคอมพวิ เตอร์ทว่ั โลกเขา้ ดว้ ยกนั ผ้ใู ชอ้ นิ เตอรเ์ น็ตสามารถสือ่ สารถึงกันไดภ้ ายในเวลาอนั รวดเร็ว ชว่ ยประหยดั ทรัพยากรและทีส่ าคญั คือคลงั สมอง อนั ย่ิงใหญห่ รือห้องสมุดโลกที่ทุกคนสามารถค้นคว้าความรู้ ขา่ วสารไดอ้ ยา่ งไม่จากัด เวิลด์ ไวด์ เว็บ (World Wide Web : WWW) เป็นบริการหนึ่งในอินเทอร์เน็ตที่ได้รับความนิยมเป็นอย่าง มาก เป็นระบบที่พัฒนาข้ึนเพ่ือเชื่อมโยงข้อมูลที่อยู่บนเคร่ืองคอมพิวเตอร์ต่างๆ โดยใช้โปรโตคอลเป็น Http (Hypertext Transfer Protocol) ในการเรียกใช้เอกสารผ่านโปรแกรมประเภทเว็บบราวเซอร์ ผู้ใช้สามารถเช่ือมโยง เอกสารหนึ่งไปยังอีกเอกสารหนึ่งที่อยู่ในคอมพิวเตอร์เครื่องเดียวกันหรือต่างเครื่องกัน หรืออยู่คนละประเทศได้ อย่างรวดเรว็ เครอื ข่ายของเอกสารเหล่านี้ประกอบกับเทคโนโลยีทเี่ กยี่ วข้องในการนาเสนอข้อมูลน้ีบนอินเตอร์เน็ต รู้จกั โดยทว่ั ไปว่า World wide web (www) และเครอ่ื งคอมพิวเตอร์ทใี่ ห้บริการเวบ็ เพจ เรียกวา่ เว็บไซต์ (Website) HTTP (Hypertext Transfer Protocol) คือ เป็นโปรโตคอลสาหรับเปิดดูข้อมูลจาก www เรียกใช้งาน ได้โดยระบุ http:// และตามด้วย URL ในช่องกรอก Address ด้านบนของโปรแกรมเว็บเบราว์เซอร์ URL (Uniform Resource Locator) คือข้อความท่ีบอกตาแหน่งของข้อมูลในอินเตอร์เน็ต เช่น เว็บเพจ ไฟล์ประเภทตา่ งๆ URL ประกอบด้วย โปรโตคอล + Domain name + (Directory ทเ่ี กบ็ ไฟล์) ชื่อไฟล์ เช่น - http://www.sscm.ac.th/sscm/ - http://www.chiangmai.go.th/newweb/ Domain Name คือ ชื่อเว็บไซต์(ซึ่งจะไม่ซ้ากับเว็บไซต์อ่ืนๆ) เช่น Hotmail.com, google.co.th, yahoo.com เปน็ ต้น Webpage คือ หน้าเอกสารของบริการ www ที่อยู่ในรูปแบบ HTML ภายในประกอบด้วย ข้อความ รปู ภาพ ลิงค์ต่างๆ เว็บเพจแต่ละหน้าจะเช่อื มโยงกัน เพื่อให้เราเรียกดูเอกสารหน้าอื่นๆ ท่เี ก่ยี วขอ้ งได้อย่างสะดวก ไม่ตอ้ งระบุ URL ทกุ ครง้ั Homepage คือ เว็บเพจหน้าแรกท่ีผู้ใช้เห็นเม่ือเข้าไปยังเว็บไซต์น้ันๆ มักถูกออกแบบให้โดดเด่น นา่ สนใจ และมีลงิ คเ์ ชอื่ มโยงไปยงั เว็บเพจอน่ื ๆ Website คอื เว็บเพจหลายๆ หน้าท่ีมเี นอื้ หาเกย่ี วขอ้ งกันประกอบเขา้ ด้วยกัน Web Browser คือ โปรแกรมสาหรับเรียกดูเว็บเพจ โดยจะแปลคาส่ัง HTML แล้วประมวลผลเพื่อ แส ด งผ ลอ อ กม าเป็ น เว็บ เพ จ เช่ น Internet Explorer(IE), Mozilla Firefox, Safari, Opera, Netscape Navigator Web Server คือ เครื่องคอมพิวเตอร์ท่ีทาหน้าท่ีให้บริการข้อมูลใน www ซ่ึงเก็บเว็บเพจและโปรแกรม จัดการบรกิ ารเมอ่ื ผู้ใช้ต้องการดูเว็บเพจท่ีอยู่ในเครอื่ ง Server ก็จะใช้ Web Browser เรยี กขอข้อมูลโดยระบุที่อยู่ ของขอ้ มูลในลกั ษณะท่เี รยี กว่า URL

Upload คือ การส่งข้อมูลจากเคร่ืองของเราไปยัง Web Server เมื่อเราสรา้ งเว็บเพจแต่ละหน้าแล้ว ต้อง สง่ ขอ้ มลู ไปเก็บไวท้ ี่ Server ทเ่ี ปน็ เครอื่ งคอมพิวเตอรท์ ีใ่ ห้บรกิ ารข้อมลู www โดยอาศยั โปรแกรม FTP Search Engine คือ เครื่องมือหรือโปรแกรมในการค้นหาเว็บต่างๆ โดยมีการเก็บรายชื่อเว็บไซต์ และ ข้อมูลท่ีเกี่ยวข้องต่างๆ ของเว็บไซต์ และนามาจัดเก็บไว้ใน Server เพ่ือให้สามารถค้นหาและแสดงผลได้สะดวก รวดเรว็ เชน่ google.com, yahoo.com, bing.com, altavista.com, sanook.com เป็นตน้ สว่ นประกอบของหนำ้ เวบ็ เพจ สว่ นประกอบของหน้าเวบ็ เพจ ประกอบด้วย 3 ส่วน ดังนี้ 1. สว่ นหวั ของหนำ้ (Page Header) จะอยบู่ ริเวณบนสุดของหน้าเวบ็ เพจ เป็นส่วนท่ีแสดงชอื่ เว็บไซต์ โลโก้ แบนเนอรโ์ ฆษณาลงิ คส์ าหรบั ข้ามไปยงั หนา้ เว็บอ่ืน 2. ส่วนของเน้ือหำ (Page Body) จะอยู่บรเิ วณตอนกลางของหน้าเวบ็ เพจ ซ่ึงเปน็ ส่วนทแี่ สดงเนอ้ื หา ในหน้าเว็บเพจนน้ั โดยประกอบด้วยขอ้ ความ ข้อมลู ภาพเคล่อื นไหว เปน็ ตน้ 3. สว่ นท้ำยกระดำษ (Page Footer) จะอย่บู รเิ วณดา้ นล่างสดุ ของหน้าเวบ็ เพจ สว่ นมากใชส้ าหรับลงิ ค์ ข้อความสัน้ ๆ เขา้ ใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมล์แอดเดรสของผูด้ แู ลเว็บเวบ็ ไซต์สาหรับติดต่อกับทาง เว็บไซต์ Page Header Page Body Page Footer รูปแบบของเวบ็ ไซต์ รปู แบบของเวบ็ ไซต์ สามารถแบง่ ไดเ้ ปน็ 2 รูปแบบ ไดแ้ ก่ 1. Static Website Static Website เป็นเว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดาและบันทึกเป็นไฟล์นามสกุล .html เน้ือหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามท่ีเราเขียนกาหนดไว้ เป็นเว็บไซต์ท่ีเหมาะกับเว็บไซต์ที่มี ขนาดใหญ่ จานวนหนา้ เว็บเพจไม่มาก ไม่มกี ารเปลีย่ นแปลงข้อมลู บอ่ ยๆ และไมม่ ีการตดิ ตอ่ กับฐานขอ้ มูล 2. Dynamic Website Dynamic Website เป็นเว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลเองได้ โดยไม่ต้องเขียนแต่ ละหน้าเอง เช่น กระดานข่าว (Web board) , ระบบสืบค้นข้อมูลเว็บไซต์ รูปแบบน้ีจะถูกสร้างด้วยภาษา สคริปต์(Script) แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอ่ืนๆ ไฟล์เอกสารท่ีได้จะมี

นามสกุล .php , .asp เป็นต้น และมกั จะมีการติดต่อกับฐานข้อมูลเพอ่ื บันทึกข้อมลู ลงในฐานข้อมูล หรอื นาข้อมูล จากฐานขอ้ มลู ขน้ึ มาแสดงผลเปน็ หน้าเวบ็ เพจ ภำษำมำตรฐำนทใี่ ชใ้ นกำรสรำ้ งเวบ็ เพจ HTML (Hypertext Markup Language) คือ ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ เพื่อนาไป แสดงผลในโปรแกรม Web Browser เอกสารเว็บเพจจะมีนามสกลุ เปน็ .htm หรือ .html ตัวอย่ำง code ภำษำ HTML <html> <head> <title>การเร่ิมต้ นสร้ างเว็บเพจ</title> </head> <body> ตวั อยา่ งการสร้างเว็บเพจ ด้วยภาษา HTML </body> </html> แนวทำงกำรออกแบบเวบ็ ไซต์ แนวทางหลักการออกแบบเวบ็ ไซตส์ ามารถแบง่ ออกเป็นขน้ั ตอนต่าง ๆ เพื่อใหเ้ หมาะสมกับผู้ เร่ิมตน้ ใช้เปน็ แนวทางในการสร้างและพัฒนาเวบ็ ไซต์ ตลอดจนการเช่อื มโยงเว็บเพจแต่ละหนา้ เขา้ ด้วยกนั 1. การวางแผน การวางแผนนบั ว่ามคี วามสาคัญมากในการสรา้ งเว็บไซต์ เพื่อให้การทางาน ใน ข้นั ตอนต่างๆ มแี นวทางท่ชี ัดเจนและสามารถปฏิบัติไดต้ ามทต่ี ้ังเป้าไว้ 2. การกาหนดเนอื้ หาและจดุ ประสงค์ของเวบ็ ไซต์ การกาหนดเนื้อหาและจดุ ประสงคข์ องเวบ็ ไซต์ ทีจ่ ะสรา้ ง นับเปน็ สง่ิ สาคัญอย่างมากในการเรม่ิ ตน้ สรา้ งเวบ็ ไซต์เลยทีเดียวเพ่ือให้เหน็ ภาพว่าเราตอ้ งการ นาเสนอข้อมลู แบบใด เมือ่ สามารถกาหนดจุดประสงค์ได้แล้ว เงอ่ื นไขเหล่านจี้ ะเปน็ ตวั กาหนดโครงสรา้ ง รปู แบบรวมถงึ หนา้ ตาและสเี ว็บไซตข์ องเราไดด้ ้วย 3. การกาหนดกลุ่มเปา้ หมาย เพ่ือสร้างและออกแบบเว็บไซตไ์ ดร้ บั ความนยิ ม การกาหนด กลุ่มเปา้ หมายในการเข้ามาชมเว็บไซต์กน็ ับวา่ มคี วามสาคัญไมน่ ้อย 4. การเตรียมขอ้ มลู เนอ้ื หาหรือข้อมูลจดั ว่าเปน็ สงิ่ ทเ่ี ชิญชวนใหผ้ ู้อ่ืนเขา้ มาเยย่ี มชมเวบ็ ไซต์ และ ตอ้ งทราบวา่ ข้อมูลขา่ วสารตา่ ง ๆ สามารถนามาจากแหล่งใดบ้าง และที่สาคัญ ขออนุญาติเจา้ ของ บทความก่อนเพอ่ื ป้องกนั เรือ่ งลิขสิทธิ์ 5. การเตรียมส่งิ ต่างๆทจี่ าเปน็ การออกแบบเว็บไซตต์ อ้ งอาศยั ความสามารถตา่ งๆ เช่น โปรแกรมสาหรับสรา้ งเวบ็ ไซต์ ภาพเคลือ่ นไหว มลั ตมิ เี ดยี การจดโดเมนเนม การหาผใู้ หบ้ รกิ ารรบั ฝากเวบ็ ไซต์ (Web Hosting) เปน็ ตน้ 6. การออกแบบหน้าเว็บหลกั หนา้ แรกของเว็บเพจถือเปน็ หนา้ สาหรับต้อนรับผู้ชม เป็นหน้า เรมิ่ ตน้ ของเวบ็ ไซต์ เมื่อผู้ชมเปดิ เขา้ มาจะพบหน้านี้เปน็ อนั ดบั แรกโดยปกติหน้าแรกจะมีองค์ประกอบหลกั คอื โลโก องค์กร แถวชอ่ื องค์กร รปู ภาพ โฆษณา

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