SlideShare a Scribd company logo
1 of 23
Download to read offline
ความรู้พื้นฐานเกี่ยวกับการสร้างเว็บไซต์
ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์
 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/

More Related Content

What's hot

คำศัพท์เกี่ยวกับอินเทอร์เน็ตและเว็บไซต์น่ารู้
คำศัพท์เกี่ยวกับอินเทอร์เน็ตและเว็บไซต์น่ารู้คำศัพท์เกี่ยวกับอินเทอร์เน็ตและเว็บไซต์น่ารู้
คำศัพท์เกี่ยวกับอินเทอร์เน็ตและเว็บไซต์น่ารู้โรงเรียนอนุบาลระนอง
 
Worksheet 15
Worksheet 15Worksheet 15
Worksheet 15Jobzaza
 
Worksheet 15
Worksheet 15Worksheet 15
Worksheet 15Jobzaza
 
Session1 part1
Session1 part1Session1 part1
Session1 part1maovkh
 
Session1 part1
Session1 part1Session1 part1
Session1 part1banputer
 
ใบความรู้ 5
ใบความรู้ 5ใบความรู้ 5
ใบความรู้ 5Tharasin
 
Session1 part1
Session1 part1Session1 part1
Session1 part1maovkh
 
Sasicha pbu2 no23 dropbox
Sasicha pbu2 no23 dropboxSasicha pbu2 no23 dropbox
Sasicha pbu2 no23 dropboxmiwwsasicha
 
ส่งงานคอมอาจารย์เชษฐา
ส่งงานคอมอาจารย์เชษฐาส่งงานคอมอาจารย์เชษฐา
ส่งงานคอมอาจารย์เชษฐาrossukhon ouamthanom
 
ความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตเขมิกา กุลาศรี
 
นาย อาณา ทัศนพันธุ์ 1
นาย อาณา ทัศนพันธุ์ 1นาย อาณา ทัศนพันธุ์ 1
นาย อาณา ทัศนพันธุ์ 1Ana Thasnapanth
 

What's hot (13)

คำศัพท์เกี่ยวกับอินเทอร์เน็ตและเว็บไซต์น่ารู้
คำศัพท์เกี่ยวกับอินเทอร์เน็ตและเว็บไซต์น่ารู้คำศัพท์เกี่ยวกับอินเทอร์เน็ตและเว็บไซต์น่ารู้
คำศัพท์เกี่ยวกับอินเทอร์เน็ตและเว็บไซต์น่ารู้
 
Worksheet 15
Worksheet 15Worksheet 15
Worksheet 15
 
Worksheet 15
Worksheet 15Worksheet 15
Worksheet 15
 
Session1 part1
Session1 part1Session1 part1
Session1 part1
 
Session1 part1
Session1 part1Session1 part1
Session1 part1
 
Internet
InternetInternet
Internet
 
ใบความรู้ 5
ใบความรู้ 5ใบความรู้ 5
ใบความรู้ 5
 
Session1 part1
Session1 part1Session1 part1
Session1 part1
 
Sasicha pbu2 no23 dropbox
Sasicha pbu2 no23 dropboxSasicha pbu2 no23 dropbox
Sasicha pbu2 no23 dropbox
 
ส่งงานคอมอาจารย์เชษฐา
ส่งงานคอมอาจารย์เชษฐาส่งงานคอมอาจารย์เชษฐา
ส่งงานคอมอาจารย์เชษฐา
 
ใบงานที่ 4
ใบงานที่  4 ใบงานที่  4
ใบงานที่ 4
 
ความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ต
 
นาย อาณา ทัศนพันธุ์ 1
นาย อาณา ทัศนพันธุ์ 1นาย อาณา ทัศนพันธุ์ 1
นาย อาณา ทัศนพันธุ์ 1
 

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

61สรุปเว็บไซต์.pptx
61สรุปเว็บไซต์.pptx61สรุปเว็บไซต์.pptx
61สรุปเว็บไซต์.pptxJessadarLuksoom
 
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwSamorn Tara
 
อินเตอร์เน็ตเบื้องต้นสำหรับครูยุคใหม่
อินเตอร์เน็ตเบื้องต้นสำหรับครูยุคใหม่อินเตอร์เน็ตเบื้องต้นสำหรับครูยุคใหม่
อินเตอร์เน็ตเบื้องต้นสำหรับครูยุคใหม่Kobwit Piriyawat
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊กsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
ดรีม
ดรีมดรีม
ดรีมsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
หวิว
หวิวหวิว
หวิวViewMik
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์sirinet
 
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ตความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ตSutin Yotyavilai
 
ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ตความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ตssuseraa96d2
 

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

Websitebasic
WebsitebasicWebsitebasic
Websitebasic
 
Website
WebsiteWebsite
Website
 
61สรุปเว็บไซต์.pptx
61สรุปเว็บไซต์.pptx61สรุปเว็บไซต์.pptx
61สรุปเว็บไซต์.pptx
 
4
44
4
 
4
44
4
 
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
 
เวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บเวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บ
 
Joomla
JoomlaJoomla
Joomla
 
อินเตอร์เน็ตเบื้องต้นสำหรับครูยุคใหม่
อินเตอร์เน็ตเบื้องต้นสำหรับครูยุคใหม่อินเตอร์เน็ตเบื้องต้นสำหรับครูยุคใหม่
อินเตอร์เน็ตเบื้องต้นสำหรับครูยุคใหม่
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊ก
 
โบ
โบโบ
โบ
 
Best
BestBest
Best
 
หมวย
หมวยหมวย
หมวย
 
ดรีม
ดรีมดรีม
ดรีม
 
หมวย
หมวยหมวย
หมวย
 
หวิว
หวิวหวิว
หวิว
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์
 
Internet
InternetInternet
Internet
 
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ตความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
 
ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ตความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ต
 

More from ไกรลาศ จิบจันทร์

ใบความรู้ เรื่อง การสร้างเมนูหลัก
ใบความรู้ เรื่อง การสร้างเมนูหลักใบความรู้ เรื่อง การสร้างเมนูหลัก
ใบความรู้ เรื่อง การสร้างเมนูหลักไกรลาศ จิบจันทร์
 
วิสัยทัศน์ พันธกิจ และเป้าประสงค์
วิสัยทัศน์ พันธกิจ และเป้าประสงค์วิสัยทัศน์ พันธกิจ และเป้าประสงค์
วิสัยทัศน์ พันธกิจ และเป้าประสงค์ไกรลาศ จิบจันทร์
 
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop csความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop csไกรลาศ จิบจันทร์
 

More from ไกรลาศ จิบจันทร์ (20)

ใบความรู้ เรื่อง การสร้างเมนูหลัก
ใบความรู้ เรื่อง การสร้างเมนูหลักใบความรู้ เรื่อง การสร้างเมนูหลัก
ใบความรู้ เรื่อง การสร้างเมนูหลัก
 
ซอร์ฟแวร์และการเลือกใช้งาน
ซอร์ฟแวร์และการเลือกใช้งานซอร์ฟแวร์และการเลือกใช้งาน
ซอร์ฟแวร์และการเลือกใช้งาน
 
Banner
BannerBanner
Banner
 
คำศัพท์ ต้องรู้
คำศัพท์ ต้องรู้คำศัพท์ ต้องรู้
คำศัพท์ ต้องรู้
 
สรุปคำศัพท์ทางการบริหาร
สรุปคำศัพท์ทางการบริหารสรุปคำศัพท์ทางการบริหาร
สรุปคำศัพท์ทางการบริหาร
 
งานนำเสนอแรงจูงใจ กลุ่ม 2
งานนำเสนอแรงจูงใจ กลุ่ม 2 งานนำเสนอแรงจูงใจ กลุ่ม 2
งานนำเสนอแรงจูงใจ กลุ่ม 2
 
ระบบคอมพิวเตอร์
ระบบคอมพิวเตอร์ ระบบคอมพิวเตอร์
ระบบคอมพิวเตอร์
 
เอกสารประกอบการสอน Dreamweaver8 ม.6
เอกสารประกอบการสอน  Dreamweaver8 ม.6เอกสารประกอบการสอน  Dreamweaver8 ม.6
เอกสารประกอบการสอน Dreamweaver8 ม.6
 
คำอธิบายรายวิชา
คำอธิบายรายวิชาคำอธิบายรายวิชา
คำอธิบายรายวิชา
 
การเปิดใช้งานโปรแกรม
การเปิดใช้งานโปรแกรมการเปิดใช้งานโปรแกรม
การเปิดใช้งานโปรแกรม
 
ผลการเรียนรู้
ผลการเรียนรู้ผลการเรียนรู้
ผลการเรียนรู้
 
การสร้างไซต์ใหม่
การสร้างไซต์ใหม่การสร้างไซต์ใหม่
การสร้างไซต์ใหม่
 
วิสัยทัศน์ พันธกิจ และเป้าประสงค์
วิสัยทัศน์ พันธกิจ และเป้าประสงค์วิสัยทัศน์ พันธกิจ และเป้าประสงค์
วิสัยทัศน์ พันธกิจ และเป้าประสงค์
 
ข้อมูลบุคลากร1
ข้อมูลบุคลากร1ข้อมูลบุคลากร1
ข้อมูลบุคลากร1
 
Frameset
FramesetFrameset
Frameset
 
การสร้างเฟรมเซต
การสร้างเฟรมเซตการสร้างเฟรมเซต
การสร้างเฟรมเซต
 
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop csความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
 
ความรู้เกี่ยวกับ Html
ความรู้เกี่ยวกับ Htmlความรู้เกี่ยวกับ Html
ความรู้เกี่ยวกับ Html
 
การสร้างปกสมุดโรงเรียน
การสร้างปกสมุดโรงเรียนการสร้างปกสมุดโรงเรียน
การสร้างปกสมุดโรงเรียน
 
Photosho cs
Photosho csPhotosho cs
Photosho cs
 

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

  • 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 หลายๆ หน้าที่มีเนื้อหาเกี่ยวข้องกัน ประกอบ เข้าด้วยกัน
  • 5.
  • 6. ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ (ต่อ)  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 เป็นต้น
  • 7. ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ  HTML (Hypertext Markup Language) คือ ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ เพื่อนาไปแสดงผลในโปรแกรม Web browser เอกสารเว็บเพจจะมีนามสกุลเป็น .htm หรือ .html ตัวอย่าง code ภาษา HTML เพื่อสร้างหน้าเว็บเพจ <html> <head> <title>การเริ่มต้นสร้างเว็บเพจ</title> </head> <body> ตัวอย่างการสร้างเว็บเพจด้วย HTML </body> </html>
  • 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. ส่วนหัว (Page Header) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สาหรับข้ามไปยังหน้าเว็บอื่น 2. ส่วนเนื้อหา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็น ส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น
  • 12. 3. ส่วนท้าย (Page Footer) จะอยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สาหรับลิงก์ข้อความสั้น ๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของ เว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สาหรับติดต่อกับทางเว็บไซต์
  • 13. ขั้นตอนการพัฒนาเว็บไซต์ 1. วางแผนการพัฒนาเว็บเพจ  การกาหนดรูปแบบโครงสร้าง  ออกแบบหน้าเว็บแต่ละหน้า 2. กาหนดไดเร็กทรอรี่ หรือโฟลเดอร์ (Directory/Folder) ที่ใช้เก็บเอกสารเว็บ 3. สร้างภาพหรือจัดหาภาพที่เกี่ยวข้องกับเนื้อหาแล้วจัดเก็บไว้ในไดเร็กทรอรี่ ตามข้อ 2. 4. สร้างเอกสารเว็บ โดยกาหนดชื่อไฟล์เอกสารเว็บ ตามข้อกาหนดของผู้ดูแล ระบบเครือข่าย (Web System Administrator) และจัดเก็บไว้ในไดเร็กทรอรี่ ตามข้อ 5. ตรวจสอบผลเอกสารเว็บผ่านเบราเซอร์ 6. ส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server) และทาการตรวจสอบผลการเรียกดูจาก เครื่องแม่ข่าย
  • 16.
  • 17.