ความรู้พ้ืนฐานเกีย่ วกบั การสร้างเวบ็ ไซต์e-Mail: [email protected]
ศพั ทเ์ บือ้ งตน้ เกยี่ วกบั เว็บไซต์ Internet คอื ระบบเครอื ข่ายคอมพวิ เตอร์ที่ใหญท่ ่สี ดุ ในโลกเกดิ จากการเชอื่ มโยง ของคอมพิวเตอร์หลายลา้ นเครอื่ งทก่ี ระจายอยตู่ ามท่ตี ่างๆ ในโลก อินเตอรเ์ น็ตเปน็ แหล่งทร่ี วมของข้อมลู มหาศาลและเปน็ ชอ่ งทางติดตอ่ สอ่ื สาร เพือ่ แลกเปล่ยี นข้อมลู ท่ีสะดวกและรวดเรว็ บริการยอดนิยมบนอินเตอรเ์ น็ต ได้แก่ เวบ็ เพจ (www) อเี มล์ และ Instant Messageing เช่น MSN Messenger, Yahoo Messenger, ICQ เปน็ ต้น www (World Wide Web) เปน็ บริการขอ้ มูล โดยข้อมลู ของ www จะอยูใ่ นรปู เอกสาร แบบ Hypertext ซ่ึงภายในเอกสารจะมีจุดเชื่อมโยง (link) ไปยังเอกสารอืน่ ๆ ทเี่ กย่ี วข้อง เอกสารตา่ งๆ ทเ่ี ชื่อมโยงกันเหมือนใยแมงมุม เป็นทีม่ าของคาวา่ Web. HTTP เป็นโปรโตคอลสาหรบั เปดิ ดูข้อมลู จาก www เรยี กใชง้ านไดโ้ ดยระบุ http:// และตามดว้ ย URL ในชอ่ งกรอก Address ดา้ นบนของโปรแกรมเวบ็ บราวเซอร์
ศพั ทเ์ บื้องตน้ เกี่ยวกบั เว็บไซต์ (ต่อ)URL (Uniform Resource Locator) คอื ขอ้ ความทบ่ี อกตาแหน่ง ของขอ้ มูลใน Internet ไม่วา่ จะเปน็ Web page, File ประเภท ตา่ งๆ เช่น รูปภาพ เสยี ง URL ประกอบด้วย โปรโตคอล + domain name + (directory ท่ีเก็บไฟล)์ ช่ือไฟล์ เชน่ http://www.enjoyday.net/webtutorial/css/index.html http://www.enjoyday.net/images/logo.jpgDomain name คอื ชอื่ เว็บไซต์ (ท่ไี มม่ ีการซา้ กันกับเว็บไซตอ์ ่นื ๆ) เช่น google.com, enjoyday.net
ศพั ท์เบอ้ื งตน้ เก่ยี วกับเว็บไซต์ (ต่อ)Webpage คือ หน้าเอกสารของบรกิ าร www ทอี่ ยู่ในรปู แบบ HTML ภายในประกอบดว้ ยข้อความ ภาพ ลิงค์ Web page แต่ ละหนา้ จะเชอ่ื มโยงกนั เพ่ือให้เราเรยี กดเู อกสารหน้าอ่ืนๆ ที่ เก่ียวขอ้ งไดอ้ ย่างสะดวก ไมต่ อ้ งระบุ URL เองทกุ ครั้งHomepage คอื Web page หน้าแรกที่ผูใ้ ช้เหน็ เมอ่ื เข้ามายัง Web site มักถูกออกแบบใหโ้ ดดเดน่ นา่ สนใจ และมีลิงคเ์ ชื่อมโยงไป เว็บเพจหนา้ อ่ืนๆWebsite คอื Web page หลายๆ หนา้ ทมี่ ีเน้อื หาเกยี่ วข้องกัน ประกอบเข้าดว้ ยกัน
ศัพทเ์ บ้ืองตน้ เกยี่ วกับเวบ็ ไซต์ (ต่อ) Web browser คอื โปรแกรมสาหรบั เรียกดูเวบ็ เพจ โดยจะแปลคาสั่ง HTML แล้ว ประมวลผลเพ่อื แสดงผลออกมาเป็น Web page เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เปน็ ต้น Web server คอื เครื่องคอมพวิ เตอรท์ ที่ าหนา้ ทใ่ี หบ้ รกิ ารข้อมลู ใน www ซึ่งเก็บ Web page และโปรแกรมจัดการบริการ เมอ่ื ผ้ใู ชต้ ้องการดู Web page ท่อี ยู่ในเคร่อื ง Server กจ็ ะใช้ Web browser เรยี กขอข้อมลู โดยระบทุ ีอ่ ยขู่ องขอ้ มลู ในลกั ษณะทเี่ รียกวา่ URL Upload คือ การสง่ ข้อมลู จากเคร่อื งของเราไปยงั Web Server เมื่อเราสร้าง Web page แต่ละหน้าแล้ว ต้องส่งข้อมูลไปเก็บไวท้ ี่ Web Server ทเ่ี ปน็ เคร่ืองคอมพิวเตอรท์ ่ใี ห้บริการข้อมลู www โดยอาศัยโปรแกรม FTP Search engine เป็นเครือ่ งมอื หรอื โปรแกรมในการคน้ หาเวบ็ ตา่ งๆ โดยมกี ารเกบ็ รายชอ่ื เว็บไซต์ และข้อมูลทเี่ ก่ยี วข้องต่างๆ ของเว็บไซต์ และนามาจัดเกบ็ ไวใ้ น server เพ่ือให้ สามารถค้นหาและแสดงผลไดส้ ะดวกรวดเร็ว เช่น google.com, yahoo.com, bing.com, altavista.com, sanook.com เปน็ ต้น
ภาษามาตรฐานที่ใช้ในการสรา้ งเวบ็ เพจ HTML (Hypertext Markup Language) คือ ภาษามาตรฐานท่ีใช้ใน การสร้างเวบ็ เพจ เพ่ือนาไปแสดงผลในโปรแกรม Web browser เอกสารเวบ็ เพจจะมนี ามสกลุ เป็น .htm หรอื .htmlตวั อย่าง code ภาษา HTML เพือ่ สรา้ งหน้าเว็บเพจ <html> <head> <title>การเรม่ิ ตน้ สรา้ งเว็บเพจ</title> </head> <body> ตวั อย่างการสร้างเวบ็ เพจดว้ ย HTML</html> </body>
รปู แบบของเวบ็ ไซต์แบ่งไดเ้ ป็น 2 รปู แบบหลกั ๆ คือ 1. Static Website 2. Dynamic Website
รปู แบบของเวบ็ ไซต์1. Static Website หมายถึง เว็บไซตท์ ่ีสรา้ งด้วยภาษา HTML ธรรมดา และบนั ทึกเป็นไฟล์นามสกุล .html เน้อื หาขอ้ ความ รปู ภาพในหนา้ เวบ็ เพจนนั้ จะเป็นไปตามท่ีเราเขียนกาหนดไว้ Static Website เหมาะกับเว็บไซตท์ ่ีมขี นาดไม่ใหญ่ จานวนหนา้ เว็บเพจไม่มาก ไมม่ กี ารเปลี่ยนแปลงขอ้ มูลบ่อยๆ และไมม่ กี ารติดต่อฐานข้อมลู 2. Dynamic Website หมายถึง เวบ็ ไซตท์ ่หี น้าเว็บเพจสามารถเปลีย่ นแปลงข้อมูลเองได้ โดยไม่ต้องเขยี นแต่ละหนา้ เว็บเพจเอง เชน่ กระดานข่าว (Webboard), ระบบสบื ค้นข้อมลู เว็บไซต์รูปแบบนี้จะถูกสร้างดว้ ยภาษา Script แบบ Server Side Scriptเชน่ PHP, ASP, ASP.Net, JSP และอ่ืนๆ ไฟลเ์ อกสารท่ไี ด้จะมนี ามสกุล .php,.asp เปน็ ต้น และมกั จะมีการตดิ ตอ่ กบั ฐานข้อมูลเพอื่ บนั ทกึ ขอ้ มูลลงในฐานข้อมูลหรือนาข้อมูลจากฐานข้อมลู ขนึ้ มาแสดงผลเปน็ หน้าเวบ็ เพจ
สว่ นประกอบของหนา้ เวบ็ เพจ แบง่ เปน็ 3 ส่วน สว่ นหวั ของหนา้ (Page Header) สว่ นของเน้อื หา (Page Body) สว่ นท้ายกระดาษ (Page Footer)
1. สว่ นหวั (Page Header) จะอย่บู รเิ วณบนสดุ ของหน้าเวบ็ เพจเปน็ สว่ นทแี่ สดงช่ือ เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สาหรับขา้ มไปยังหน้าเว็บอนื่2. ส่วนเนอ้ื หา (Page Body) จะอย่บู ริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นสว่ นที่แสดง เนอ้ื หาภายในหนา้ เว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมลู ภาพเคลื่อนไหว เปน็ ตน้
3. ส่วนท้าย (Page Footer) จะอยู่บรเิ วณดา้ นล่างสุดของหนา้ เวบ็ เพจ ส่วนมากใชส้ าหรับลิงก์ขอ้ ความสนั้ ๆ เข้าใจง่ายหรอื จะมีชือ่ เจ้าของ เวบ็ ไซต์ อีเมลแอดเดรสของผูด้ แู ลเว็บไซต์สาหรับติดตอ่ กบั ทางเวบ็ ไซต์
ขัน้ ตอนการพฒั นาเวบ็ ไซต์1. วางแผนการพฒั นาเวบ็ เพจ การกาหนดรูปแบบโครงสร้าง ออกแบบหน้าเวบ็ แตล่ ะหนา้2. กาหนดไดเร็กทรอร่ี หรือโฟลเดอร์ (Directory/Folder) ท่ใี ชเ้ กบ็ เอกสารเวบ็3. สรา้ งภาพหรือจดั หาภาพท่ีเก่ยี วข้องกับเน้ือหาแล้วจดั เก็บไวใ้ นไดเร็กทรอรตี่ ามข้อ 2.4. สรา้ งเอกสารเวบ็ โดยกาหนดช่ือไฟลเ์ อกสารเว็บ ตามข้อกาหนดของผูด้ ูแลระบบเครือขา่ ย (Web System Administrator) และจัดเกบ็ ไวใ้ นไดเร็กทรอรต่ี ามข้อ5. ตรวจสอบผลเอกสารเวบ็ ผ่านเบราเซอร์6. ส่งข้อมลู ข้นึ เครื่องแม่ข่าย (Server) และทาการตรวจสอบผลการเรียกดจู าก เครอ่ื งแมข่ ่าย
การวางแผนพัฒนาเว็บเพจ
การวางแผนพฒั นาเวบ็ เพจ (ตอ่ )
ออกแบบโดยใชส้ ีสดใสมาเรยี งกันทาใหเ้ วบ็ ไซต์ดสู ะดดุ ตา หลงั จากน้นั ผู้ท่เี ขา้ มาชมกจ็ ะเริ่มดเู มนูสว่ นอื่นๆของเว็บไซต์
ออกแบบโดยสรา้ งเมนเู ป็นรปู อย่แู ถบซา้ ยมอื แลว้ ใช้ frame เรยี กขอ้ มูลมาแสดงบริเวณตรงกลาง
http://www.prapayneethai.com/th/culture/
http://thai.tourismthailand.org/
http://women.sanook.com/health/
แหลง่ อ้างองิ http://www.art2bdesign.com http://courseware.bodin.ac.th/ http://www.krirk.ac.th/
Search
Read the Text Version
- 1 - 23
Pages:
