เอกสารประกอบการเรียน การสร้างเวบ็ เบอื้ งต้น ข้อมูลเพ่ิมเติม สำหรับนักเรียน
วชิ า การสร้างเวบ็ เบือ้ งต้น เบื้องต้นเกยี่ วกบั เวบ็ ไซต์ อนิ เตอรเ์ น็ต (Internet) เป็นเครอื ข่ำยคอมพวิ เตอรท์ ่ีใหญ่ท่ีสดุ ในโลกซง่ึ รวมเอำเครอื ขำ่ ยยอ่ ยเป็นจำนวนมำก ตอ่ เช่ือมภำยใตม้ ำตรฐำนเดียวกนั จนเป็น เครอื ข่ำยคอมพิวเตอรข์ นำดใหญ่ ทำใหท้ ่วั โลกเช่ือมโยงกนั เป็นเครอื ข่ำยเดียวกนั ไดใ้ นแพลตฟอรม์ ของ เวลิ ด์ ไวด์ เวบ็ (World Wide Web) เวลิ ด์ ไวด์ เวบ็ (World Wide Web – www) หรอื เรยี กยอ่ ๆ วำ่ เวบ็ (web) เป็นอินเตอรเ์ นต็ ชนิดหน่งึ ท่ีอยู่ ในรูปแบบของกรำฟิ กและมลั ติมีเดีย ซง่ึ ประกอบดว้ ยขอ้ ควำม(Text ภำพ (Graphic) เสยี (Sound) และภำพเคล่อื นไหว (Movie) เป็นตน้ ผใู้ ชท้ ่วั ไปสำมำรถเขำ้ ไปในเวบ็ ไดง้ ่ำย และจะไดร้ บั ขอ้ มลู ครบถว้ นปัจจบุ นั ถำ้ พดู ถงึ อนิ เตอรเ์ น็ต คน ท่วั ไปจะเขำ้ ใจวำ่ หมำยถงึ เวบ็ ทงั้ ท่ีจรงิ แลว้ เวบ็ เป็นสว่ นหน่งึ ของอินเตอรเ์ นต็ เทำ่ นนั้ http (HyperText Transfer Protocol: 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
โดเมนเนม (Domain Name) โดเมนเนม (Domain Name) หรอื ท่ีเขำ้ ใจกนั ท่วั ไป คือ ช่ือเรยี กเวบ็ ไซตน์ ่นั เอง กำรจดทะเบียนโดเมนเนมจงึ เป็นกำรลงทะเบียนช่ือใหก้ บั เวบ็ ไซตข์ องเรำในโลกอนิ เตอรเ์ น็ต โดเมนเนมท่ีขอจดทะเบียนจะตอ้ งไมซ่ ำ้ กบั คนอ่ืน และควร ตงั้ ใหเ้ ก่ียวขอ้ งกบั เนือ้ หำภำยในเวบ็ ไซต์ หรือเก่ียวขอ้ งกบั สนิ คำ้ และ บรกิ ำร ตลอดจนใชค้ ำงำ่ ย ๆ ใหจ้ ำได้ เชน่ sanook.com หรอื google.com เป็นตน้ ใหน้ ักเรียนยกตวั อยา่ งชื่อเวบ็ ไซตแ์ ตล่ ะซบั โดเมน ความหมายของซับโดเมน โดเดน หน่วยงาน ตวั อย่างชื่อเวบ็ ไซต์แต่ละ โดเมน www.google.com
โดเมนของแตล่ ะประเทศ เวบ็ ไซต์ (Website) และเวบ็ เพจ (Webpage) เอกสำรหรอื สว่ นท่ีตดิ ตอ่ กบั ผใู้ ชใ้ นเวบ็ เรยี กว่ำ เว็บเพจ (Webpage) หมำยถึง เอกสำรหนง่ึ หนำ้ กำรใชเ้ ว็บก็คือกำรเปิดอำ่ นหรอื เปิดใชเ้ วบ็ แตล่ ะหนำ้ น่นั เอง เวบ็ เพจอำจสรำ้ งขนึ้ ดว้ ย ภำษำคอมพวิ เตอร์ เช่น HTML, ASP, PHP, JAVA ฯลฯ เม่ือนำเวบ็ เพจหลำย ๆ หนำ้ มำรวมกนั และระบอุ ยใู่ นอินเตอรเ์ น็ต หรอื ยอู ำรแ์ อล (Uniform Resource Locator – URL) ใหก้ บั เวบ็ เพจกลมุ่ นนั้ จะเรยี กวำ่ เว็บไซต์ (Web Site) เม่ือเปิดเว็บไซตข์ นึ้ มำจะพบกบั หนำ้ แรกของเวบ็ ไซต์ ซง่ึ เรยี กว่ำโฮมเพจ (Homepage) ซง่ึ เป็น หนำ้ ท่ีสำคญั ท่ีสดุ และเป็นหนำ้ ท่ีจะเช่ือมโยงไปยงั เวบ็ เพจและเวบ็ ไซตอ์ ่ืน ๆ
เวบ็ เบราเซอร์ (Web Browser) คือโปรแกรมท่ีใชส้ ำหรบั เปิดเวบ็ เพจหรอื รบั สง่ ขอ้ มลู ตำมท่ีเครอ่ื ง ลกู ขำ่ ยรอ้ งขอเม่ือเรำเปิดเขำ้ สอู่ ินเตอรเ์ น็ต เวบ็ เบรำเซอรท์ ่ีไดร้ บั ควำมนิยมปัจจบุ นั มีหลำย โปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google Chrome เว็บเซฟิ เวอร์ (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 ภาษา HTML ยอ่ มำจำกคำวำ่ Hypertext Markup Language เป็นภำษำท่ีใชส้ ำหรบั สรำ้ งเว็บ เพจ โดยจะไดร้ บั กำรแปลหรอื กำรแสดงผลโดยเวบ็ เบรำเซอรซ์ ง่ึ สำมำรถแสดงไดท้ งั้ ขอ้ ควำม ภำพ และ เสียง โครงสร้างหลักของภาษา HTML ในไฟลเ์ อกสำร HTML ประกอบดว้ ย สองสว่ นใหญ่ๆ คือ สว่ นหวั HEAD และ สว่ นตวั BODY 1) Tag <HTML> และ </HTML> จะอยบู่ รรทดั แรก และ บรรทดั สดุ ทำ้ ย ในไฟล์ HTML เสมอ เป็น Tag ท่ีบอกใหร้ ูว้ ำ่ ขอ้ ควำม หรอื Tag ท่ีอยรู่ ะหว่ำง 2 Tag นี้ เป็นแบบ HTML 2) Tag <HEAD> และ </HEAD> สว่ นนีจ้ ะไวใ้ ส่ รำยละเอียดตำ่ ง ๆ เช่น Tag<TITLE>TodayLoad.com</TITLE> ไวใ้ สข่ อ้ ควำมท่ีตอ้ งกำรใหป้ รำกฎอยบู่ น ไตเตลิ้ บำร์ 3) <BODY ....... > ขอ้ ควำมท่ีปรำกฎอยตู่ รงช่วงจดุ ไขป่ ลำ 4) Tag <BODY> และ </BODY> ขอ้ ควำม หรอื Tag ท่ีอยรู่ ะหว่ำง 2 Tag นี้ เป็นสว่ นของ เนือ้ หำ
การออกแบบเวบ็ ไซต์ แนวคดิ ในการออกแบบ - ดจู ำกเวบ็ ไซตอ์ ่ืนเพ่ือเป็นตวั อยำ่ ง กำรดจู ำกเวบ็ ไซตอ์ ่ืนบนอินเตอรเ์ น็ตเพ่ือศกึ ษำเป็นตวั อยำ่ ง นนั้ นบั เป็นวธิ ีกำรท่ีงำ่ ยท่ีสดุ แตก่ ็ควรนำไปประยกุ ตใ์ ชใ้ หเ้ หมำะสมกบั เนือ้ หำและกลมุ่ เปำ้ หมำยของเรำ ดว้ ย - ศกึ ษำจำกส่อื สงิ่ พมิ พใ์ นรูปแบบตำ่ งๆ ส่ือสง่ิ พมิ พใ์ นท่ีนี้ ไดแ้ ก่ แมกกำซีน โปสเตอรโ์ ฆษณำ โบร ชวั ร์ หรอื หนงั สือบำงเลม่ ท่ีมีรูปแบบและจดุ ดงึ ดดู ควำมสนใจ สำมำรถนำมำประยกุ ตใ์ ชใ้ นเว็บไซตข์ องเรำได้ เช่นกนั การกาหนดขนาดของเวบ็ เพจ ขนำดของเว็บไซตท์ ่ีนิยมในปัจจบุ นั มี 2 ขนำด คือ 1. ขนำดเว็บไซตแ์ บบ 800 X 600 pixels เป็นขนำดท่ีสำมำรถใชไ้ ดก้ บั หนำ้ จอทกุ ขนำดในปัจจบุ นั เป็นขนำดของกำรออกแบบเว็บไซตท์ ่ีใชใ้ นอดตี เน่ืองจำกอดีตขนำดของจอคอมพิวเตอรม์ ีขนำดเลก็ 2. ขนำดเว็บไซตแ์ บบ 1024 X 768 pixels เป็นขนำดท่ีนิยมในปัจจบุ นั เน่ืองจำกผใู้ ชน้ ิยมใช้ จอคอมพวิ เตอรข์ นำดใหญ่ขนึ้ เน่ืองมำจำกรำคำจอคอมพวิ เตอรท์ ่ีถกู ลง
รูปแบบการออกแบบเวบ็ ไซต์ เวบ็ ไซตใ์ นปัจจบุ นั จะมีกำรออกแบบท่ีแตกตำ่ งกนั ไมม่ ำกนกั ซง่ึ กำรออกแบบหนำ้ ตำเวบ็ ไซตส์ ว่ น ใหญ่จะมองดอู งคป์ ระกอบขององคก์ ร หนว่ ยงำน หรอื เนือ้ หำเรอ่ื งท่ีนำเสนอเป็นหลกั ซง่ึ กำรออกแบบหนำ้ ตของเว็บไซตม์ ีอยู่ 3 แบบ คอื 1. การออกแบบเวบ็ ไซตท์ เ่ี น้นการนาเสนอเนือ้ หา เป็นกำรออกแบบเวบ็ ไซตท์ ่ีเนน้ กำรนำเสนอเนือ้ หำมำกกวำ่ รูปภำพ โดยโครงสรำ้ งใชร้ ูปแบบตำรำง เป็นหลกั มกี ำรออกแบบหนำ้ ตำรูปแบบงำ่ ย เช่น มีเมนสู ำรบญั และเนือ้ หำ 2. การออกแบบเว็บไซตท์ เี่ น้นภาพกราฟิ ก เป็นกำรออกแบบเวบ็ ไซตท์ ่ีเนน้ ภำพกรำฟิกท่ีสวยงำม ซง่ึ อำจจะใชโ้ ปรแกรม Photoshop สำหรบั กำรตกแตง่ ภำพ ขอ้ ดสี วยงำม นำ่ สนใจ ขอ้ เสยี อำจจะใชเ้ วลำในกำรโหลดเว็บนำน 3.การออกแบบเวบ็ ไซตท์ มี่ ที งั้ ภาพและเนือ้ หา เป็นกำรออกแบบเว็บท่ีนิยมในปัจจบุ นั ซง่ึ ประกอบดว้ ยขอ้ ควำม รูปภำพ โดยมกี ำรจดั องคป์ ระกอบ ตำ่ ง ๆ เพ่ือใหเ้ ว็บน่ำสนใจ
ส่วนประกอบของเวบ็ ไซตท์ ดี่ ี โครงสรำ้ งของเวบ็ ไซตโ์ ดยจะมีสว่ นหลกั ๆอยดู่ ว้ ยกนั ทงั้ หมด 3 สว่ นหลกั ๆ ดงั นี้ 1. ส่วนหวั ของหน้า (Page Header) เป็นสว่ นท่ีอยตู่ อนบนสดุ ของหนำ้ และเป็นสว่ นท่ีสำคญั ท่ีสดุ ของหนำ้ เพรำะเป็นสว่ นท่ีดงึ ดดู ผชู้ ม ใหต้ ิดตำมเนือ้ หำภำยในเว็บไซต์ มกั ใสภ่ ำพกรำฟิกเพ่ือสรำ้ งควำมประทบั ใจ สว่ นใหญ่ประกอบดว้ ย - โลโก้ (Logo) เป็นสิง่ ท่ีเวบ็ ไซตค์ วรมี เป็นตวั แทนของเว็บไซตไ์ ดเ้ ป็นอยำ่ งดี และยงั ทำใหเ้ ว็บ น่ำเช่ือถือ - ชื่อเวบ็ ไซต์ (Name) - เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจดุ เช่ือมโยงไปสเู่ นือ้ หำของเวบ็ ไซต์
2. ส่วนของเนือ้ หา (Page Body) เป็นสว่ นท่ีอยตู่ อนกลำงของหนำ้ ใชแ้ สดงขอ้ มลู เนือ้ หำของเว็บไซต์ ซง่ึ ประกอบดว้ ยขอ้ ควำม, ตำรำงขอ้ มลู ภำพกรำฟิ ก วีดโี อ และอ่ืนๆ และอำจมเี มนหู ลกั หรอื เมนเู ฉพำะกลมุ่ วำงอยใู่ นสว่ นนีด้ ว้ ย สำหรบั สว่ นเนือ้ หำควรแสดงใจควำมสำคญั ท่ีเป็นหวั เรอ่ื งไวบ้ นสดุ ขอ้ มลู มีควำมกระชบั ใชร้ ูปแบบ ตวั อกั ษรท่ีอำ่ นง่ำย และจดั Layout ใหเ้ หมำะสมและเป็นระเบียบ
3. ส่วนทา้ ยของหน้า (Page Footer) เป็นสว่ นท่ีอยดู่ ำ้ นลำ่ งสดุ ของหนำ้ มกั วำงระบบนำทำงท่ีเป็นลงิ คข์ อ้ ควำมง่ำย ๆ และอำจแสดง ขอ้ มลู เพ่ิมเตมิ เก่ียวกบั เนือ้ หำภำยในเว็บไซต์ เช่น เจำ้ ของเว็บไซต,์ ขอ้ ควำมแสดงลขิ สทิ ธิ์, วธิ ีกำรติดตอ่ กบั ผดู้ แู ลเว็บไซต,์ คำแนะนำกำรใชเ้ ว็บไซต์ เป็นตน้ โดยปกตสิ ว่ นหวั และสว่ นทำ้ ยมกั แสดงเหมอื นกนั ในทกุ หนำ้ ของเวบ็ เพจ
Search
Read the Text Version
- 1 - 12
Pages: