ความร้พู ืน้ ฐานเกี่ยวกบั การสร้างเวบ็ ไซต์ โดย.... ครูรัชชนก วงศเ์ ขียว
ศพั ทเ์ บอื้ งต้นเก่ียวกบั เวบ็ ไซต์ 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.jpg Domain 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 คเมออื่มเพริาวสเตรอ้างรท์W่ีใeหb้บpรaิกgาeรขแ้อตม่ลูละหwนw้าwแลโด้วยตอ้อางศสยั่งโขป้อรมแูลกไรปมเกFบ็TไPว้ท่ี Web Server ท่ีเป็นเครื่อง 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/
แหล่งอ้างอิง • http://www.art2bdesign.com • http://courseware.bodin.ac.th/ • http://www.krirk.ac.th/
Search
Read the Text Version
- 1 - 23
Pages:
