websitebasic

การพัฒนาเวบ็ ไซต์ พระมหาเอก เมธิกญาโณ น.ธ.เอก, ป.ธ.๖, วท.บ.(วทิ ยาการคอมพิวเตอร์)

การให้คะแนน คะแนนเกบ็ ๕๐ คะแนน • ใบงาน ๓๐ คะแนน ๒๐ คะแนน • งาน ๑๐ คะแนน ๓๐ คะแนน • มาเรียน ๑๐ คะแนน สอบกลางภาค สอบปลายภาค

ความร้พู ืน้ ฐานเกี่ยวกบั การสรา้ งเวบ็ ไซต์ Create By : Daowruang Srihathai [ Benchamaratrangsarit School ] E-mail : [email protected]

ศพั ทเ์ บอื้ งต้นเกี่ยวกบั เวบ็ ไซต์  Internet คือ ระบบเครือข่ายคอมพวิ เตอร์ทใ่ี หญ่ทส่ี ุดในโลกเกดิ จากการเช่ือมโยงของคอมพวิ เตอร์หลายล้านเคร่ืองทกี่ ระจายอยู่ ตามท่ตี ่างๆ ในโลกอนิ เตอร์เน็ตเป็ นแหล่งท่ีรวมของข้อมูล มหาศาลและเป็ นช่องทางตดิ ต่อสื่อสาร เพื่อแลกเปลยี่ นข้อมูลที่ สะดวกและรวดเร็วบริการยอดนิยมบนอนิ เตอร์เน็ต ได้แก่ เวบ็ เพจ (www) อเี มล์ และ Instant Messageing เช่น MSN Messenger, Yahoo Messenger, ICQ, Facebook เป็ นต้น  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.jpg  Domain name คือ ชื่อเวบ็ ไซต์ (ท่ีไม่มกี ารซ้ากนั กบั เวบ็ ไซต์อื่นๆ) เช่น google.com, enjoyday.net

 โดนเมนเนม มดี อทอยู่หลายประเภทแต่ทน่ี ิยมมากทส่ี ุดน้ันกค็ ือ .com เพราะเป็ นดอทในยุคแรกๆ ทเี่ ร่ิมใช้กนั และง่ายต่อการ จดจา ประเภทของ Domain Name แบ่งได้เป็ น 2 ประเภท 1. โดเมน 2 ระดบั ชื่อโดเมน . ประเภทของโดเมน 2. โดเมน 3 ระดบั ชื่อโดเมน . ประเภทของโดเมน . ประเทศ

 ประเภทของโดเมน คือ คำยอ่ ขององคก์ ร โดยประเภทขององคก์ รท่ีพบ บ่อย มีดงั ต่อไปน้ี https://www.google.co.th/ * .com คือ บริษทั หรือ องคก์ รพำณิชย์ * .org คือ องคก์ รเอกชนท่ีไม่แสวงผลกำไร * .net คือ องคก์ รที่เป็นเกตเวย์ หรือ จุดเชื่อมต่อเครือข่ำย * .edu คือ สถำบนั กำรศึกษำ * .gov คือ องคก์ รของรัฐบำล * .mil คือ องคก์ รทำงทหำร

 ตวั ย่อของประเทศทต่ี ้งั ขององค์กร * .th คือ ประเทศไทย * .cn คือ ประเทศจีน * .uk คือ ประเทศองั กฤษ * .jp คือ ประเทศญป่ี ่ นุ * .au คือ ประเทศออสเตรเลยี

ศพั ทเ์ บอื้ งต้นเก่ียวกบั เวบ็ ไซต์ (ต่อ)  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 </body> </html>

รปู แบบของเวบ็ ไซต์ แบง่ ได้เป็น 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/