ความรู้พื้นฐานเกี่ยวกับการสร้างเว็บไซต์
ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์
 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
เมื่อเราสร้าง 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/
แหล่งอ้างอิง
• http://www.art2bdesign.com
• http://courseware.bodin.ac.th/
• http://www.krirk.ac.th/

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

  • 1.
  • 2.
    ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์  Internet คือระบบเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกเกิดจากการเชื่อมโยง ของคอมพิวเตอร์หลายล้านเครื่องที่กระจายอยู่ตามที่ต่างๆ ในโลก อินเตอร์เน็ตเป็นแหล่งที่รวมของข้อมูลมหาศาลและเป็นช่องทางติดต่อสื่อสาร เพื่อแลกเปลี่ยนข้อมูลที่สะดวกและรวดเร็วบริการยอดนิยมบนอินเตอร์เน็ต ได้แก่ เว็บเพจ (www) อีเมล์ และ Instant Messageing เช่น MSN Messenger, Yahoo Messenger, ICQ เป็นต้น  www (World Wide Web) เป็นบริการข้อมูล โดยข้อมูลของ www จะอยู่ในรูป เอกสารแบบ Hypertext ซึ่งภายในเอกสารจะมีจุดเชื่อมโยง (link) ไปยังเอกสาร อื่นๆ ที่เกี่ยวข้อง เอกสารต่างๆ ที่เชื่อมโยงกันเหมือนใยแมงมุม เป็นที่มาของคาว่า Web.  HTTP เป็นโปรโตคอลสาหรับเปิดดูข้อมูลจาก www เรียกใช้งานได้โดยระบุ http:// และตามด้วย URL ในช่องกรอก Address ด้านบนของโปรแกรมเว็บ บราวเซอร์
  • 3.
    ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ (ต่อ)  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
  • 4.
    ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ (ต่อ)  Webpageคือ หน้าเอกสารของบริการ www ที่อยู่ในรูปแบบ HTML ภายในประกอบด้วยข้อความ ภาพ ลิงค์ Web page แต่ละหน้าจะเชื่อมโยง กัน เพื่อให้เราเรียกดูเอกสารหน้าอื่นๆ ที่เกี่ยวข้องได้อย่างสะดวก ไม่ต้อง ระบุ URL เองทุกครั้ง  Homepage คือ Web page หน้าแรกที่ผู้ใช้เห็นเมื่อเข้ามายัง Web site มักถูกออกแบบให้โดดเด่น น่าสนใจ และมีลิงค์เชื่อมโยงไปเว็บเพจหน้า อื่นๆ  Website คือ Web page หลายๆ หน้าที่มีเนื้อหาเกี่ยวข้องกัน ประกอบ เข้าด้วยกัน
  • 6.
    ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ (ต่อ)  Webbrowser คือ โปรแกรมสาหรับเรียกดูเว็บเพจ โดยจะแปลคาสั่ง 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 เป็นต้น
  • 7.
    ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ  HTML (HypertextMarkup Language) คือ ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ เพื่อนาไปแสดงผลในโปรแกรม Web browser เอกสารเว็บเพจจะมีนามสกุลเป็น .htm หรือ .html ตัวอย่าง code ภาษา HTML เพื่อสร้างหน้าเว็บเพจ <html> <head> <title>การเริ่มต้นสร้างเว็บเพจ</title> </head> <body> ตัวอย่างการสร้างเว็บเพจด้วย HTML </body> </html>
  • 8.
  • 9.
    รูปแบบของเว็บไซต์ 1. Static Website หมายถึงเว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกาหนดไว้ Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จานวนหน้าเว็บเพจไม่มาก ไม่มีการเปลี่ยนแปลงข้อมูลบ่อยๆ และไม่มีการติดต่อฐานข้อมูล 2. Dynamic Website หมายถึง เว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลเองได้ โดยไม่ต้อง เขียนแต่ละหน้าเว็บเพจเอง เช่น กระดานข่าว (Webboard), ระบบสืบค้นข้อมูล เว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่นๆ ไฟล์เอกสารที่ได้จะมีนามสกุล .php, .asp เป็นต้น และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนาข้อมูลจากฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจ
  • 10.
    ส่วนประกอบของหน้าเว็บเพจ แบ่งเป็น 3 ส่วน ส่วนหัวของหน้า (Page Header)  ส่วนของเนื้อหา (Page Body)  ส่วนท้ายกระดาษ (Page Footer)
  • 11.
    1. ส่วนหัว (PageHeader) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สาหรับข้ามไปยังหน้าเว็บอื่น 2. ส่วนเนื้อหา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็น ส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น
  • 12.
    3. ส่วนท้าย (PageFooter) จะอยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สาหรับลิงก์ข้อความสั้น ๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของ เว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สาหรับติดต่อกับทางเว็บไซต์
  • 13.
    ขั้นตอนการพัฒนาเว็บไซต์ 1. วางแผนการพัฒนาเว็บเพจ  การกาหนดรูปแบบโครงสร้าง ออกแบบหน้าเว็บแต่ละหน้า 2. กาหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ 3. สร้างภาพหรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหาแล้วจัดเก็บไว้ในไดเร็กทรอรี่ ตามข้อ 2. 4. สร้างเอกสารเว็บ โดยกาหนดชื่อไฟล์เอกสารเว็บ ตามข้อกาหนดของผู้ดูแล ระบบเครือข่าย (Web System Administrator) และจัดเก็บไว้ในไดเร็กทรอรี่ ตามข้อ 5. ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์ 6. ส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server) และทาการตรวจสอบผลการเรียกดูจาก เครื่องแม่ข่าย
  • 14.
  • 15.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.