websitebasic
Download
Report
Transcript websitebasic
ความรู้พืน้ ฐานเกี่ยวกับการสร้างเว็บไซต์
Create By : Daowruang Srihathai [ Benchamaratrangsarit School ]
E-mail : [email protected]
ศัพท์เบือ้ งต้นเกี่ยวกับเว็บไซต์
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/