ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

1. ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยีความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

2. Outline • ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • HTML • วิธีสร้างเว็บไซต์ • ขนาดหน้าของเว็บเพจ • พื้นที่ของเว็บเพจ • ส่วนประกอบของเว็บ • ขั้นตอนในการพัฒนาเว็บไซต์ • ข้อแนะนำในการทำเว็บไซต์ • ประเภทของเว็บไซต์

3. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • เว็บเทคโนโลยี (Web Technology) • คือ บริการหนึ่งในรูปแบบต่างๆของการให้บริการของอินเตอร์เน็ต สำหรับผู้พัฒนาเว็บ หรือผู้ที่ต้องการเขียนโปรแกรมเพื่อติดต่อสื่อสารผ่านเว็บ หรือ อินเตอร์เน็ต แล้วจะต้องรู้และเข้าใจเรื่องเกี่ยวกับโปรโตคอล (Protocol)

4. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • โปรโตคอล คือ ข้อตกลงระหว่าง 2 ฝ่ายที่ให้เครื่องคอมพิวเตอร์ สามารถสื่อสารกันได้อย่างถูกต้อง และราบรื่นมากที่สุด • การใช้บริการเว็บจะทำงานภายใต้ โปรโตคอล HTTP • โดยโปรโตคอลจะเป็นตัวกำหนดวิธีการส่งข้อมูลหรือไฟล์ ระหว่างเครื่องคอมพิวเตอร์ที่เป็น Client และ Server รวมถึงการกำหนด กฎระเบียบในการติดต่อ โปรแกรมประเภท Browser เป็นตัวช่วยในการติดต่อสื่อสารได้ง่ายขึ้น

5. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • อินเทอร์เน็ต หมายถึง ลักษณะของการเชื่อมต่อของเครือข่ายคอมพิวเตอร์ทั้งเล็กและใหญ่จำนวนมากเข้าด้วยกัน โดยมีข้อกำหนดว่าทุกเครือข่ายที่เชื่อมต่อถึงกัน จะต้องอยู่ภายใต้มาตรฐานของการเชื่อมต่อ(โปรโตคอล) ที่ถูกสร้างขึ้นมาเพื่อใช้งานบนเครือข่ายแบบนี้โดยเฉพาะ ซึ่งเรียกว่า TCP/IP

6. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต

7. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • จากมาตรฐานการเชื่อมต่อกันนี้เอง จึงมีผลทำให้เครือข่ายคอมพิวเตอร์สามารถติดต่อสื่อสารแลกเปลี่ยนข้อมูลระหว่างกันได้อย่างรวดเร็วมีประสิทธิภาพ และไม่มีขีดจำกัดทางด้านเวลาและสถานที่

8. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • โปรโตคอล HTTP (Hypertext Transfer Protocol) • เป็นโปรโตคอลที่ใช้ในการกระจายและทำงานร่วมกันของข้อมูลที่ในอยู่ในรูปสื่อที่สามารถเชื่อมโยงถึงกันได้ เนื่องจากโปรโตคอล HTTP สามารถที่จะใช้ในการรับส่งข้อมูลที่เป็นข้อความ รูป ภาพ หรือภาพเคลื่อนไหวได้ จึงทำให้แหล่งข้อมูลส่วนใหญ่ใน WWW อนุญาตให้เข้าถึงได้โดยผ่านโปรโตคอล HTTP

9. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • WWW (World Wide Web) อาจเรียกสั้นๆ ว่าเว็บเปรียบเสมือนเป็นห้องสมุดขนาดใหญ่ที่รวบรวมข้อมูลที่มากที่สุดในโลกก็ว่าได้ สามารถค้นหาข้อมูลที่ต้องการได้เกือบทุกอย่างจากบริการเว็บ

10. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • ข้อมูลในเว็บจะอยู่ในรูปแบบที่เรียกว่า Hypertext และทำการเชื่อมโยง (Links)ข้อความหรือ รูปภาพ เข้ากับเอกสารอื่นๆ อย่างเป็นอิสระต่อกัน

11. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • ภาพหรือข้อความที่แสดงบนหน้าจอจะแสดงได้ทีละหน้า ซึ่งเรียกว่า เพจ (Page)หรืออาจมีการเชื่อมโยงด้วยการลิงค์ (Links)เพื่อค้นหาข้อมูลจากอีกเพจหนึ่งที่อยู่ห่างออกไปไกลๆได้

12. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • เว็บไซต์ เว็บเปรียบเหมือนเป็นห้องสมุดขนาดใหญ่ เว็บไซต์จะเปรียบเสมือนหนังสือหนึ่งเล่มในห้องสมุดนั้น สามารถเลือกหยิบหนังสือเล่มใดก็ได้ในห้องสมุดเว็บขึ้นมาอ่าน • โดยระบุชื่อหนังสือในลักษณะที่เรียกว่า URL(อ่านว่า ยู อาร์ แอล) • เช่น เว็บไซต์ของมหาวิทยาลัยราชภัฏเชียงรายมี URL หรือมีชื่อเป็นwww.cru.in.thเป็นต้น

13. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • เว็บเพจ (Web Page) และโฮมเพจ (Home Page) • ถ้าเว็บไซต์ คือ หนังสือหนึ่งเล่ม เว็บเพจก็คือ หน้ากระดาษต่างๆ ที่บรรจุเนื้อหาในหนังสือเล่มนั้นส่วน • โฮมเพจ คือ ปกหน้าของหนังสือ ปกติแล้วเมื่อเริ่มเปิดโปรแกรม Web Browser โปรแกรมจะนำเข้าสู่หน้าแรกของเว็บใดเว็บหนึ่งให้โดยอัตโนมัติ • หน้าแรกนั้นจะถือว่าเป็นโฮมเพจด้วยเช่นเดียวกัน สามารถเปลี่ยนโฮมเพจของโปรแกรม Web Browser ที่ใช้อยู่นี้ให้ไปยังเว็บไซต์ใดก่อนก็ได้

14. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • เว็บเพจ (Web Page) และโฮมเพจ (Home Page)

15. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • โปรแกรมเว็บบราวเซอร์ (Web Browser)การแสดงผลข้อมูลต่างๆ บนอินเทอร์เน็ตในรูปของ HTML ไม่สามารถที่จะแสดงผลข้อมูลออกมาโดยตรงได้ จะต้องใช้โปรแกรมเว็บบราวเซอร์เป็นตัวกลางที่จะทำหน้าที่แปลงคำสั่งก่อนแล้วแสดงผลคำสั่งให้ออกมาเป็นรูปภาพ เสียง และข้อมูลต่างๆ • บราวเซอร์ที่ผู้ใช้นิยมใช้กันก็จะมีโปรแกรม Internet Explorer และ Netscape Navigator

16. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • โปรแกรมเว็บบราวเซอร์ (Web Browser)

17. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • DNS-Domain Name Systemคือ ระบบการตั้งชื่อบนอินเทอร์เน็ต ทรัพยากรบนอินเทอร์เน็ต • โดยเฉพาะเครื่องคอมพิวเตอร์ที่ต่ออยู่นั้นต้องมีหมายเลขประจำเครื่อง ซึ่งหมายเลขนี้เรียกว่า IP โดยการที่จะจดจำหมายเลขประจำเครื่องนั้นทำได้ยาก จึงมีวิธีการตั้งชื่อให้จดจำและใช้งานง่าย ระบบชื่อจึงถูกกำหนดให้เป็นมาตรฐาน • โดยแบ่งตามลำดับขั้นตามสภาพภูมิศาสตร์ เป็นประเทศ ประเภทขององค์กร และชื่อองค์กร • เช่น www.cru.in.th thคือ ชื่อประเทศไทย inคือ ประเภทองค์กร cruคือ ชื่อองค์กร

18. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • Domain ที่นิยมใช้กันอยู่ในปัจจุบัน เช่น • .com = กลุ่มธุรกิจการค้า (Commercial) • .edu = กลุ่มการศึกษา (Education) • .gov = กลุ่มองค์กรรัฐบาล (Government)

19. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • ความหมายของ Sub Domain เช่น • .co = องค์การธุรกิจ (Commercial) • .ac = สถาบันการศึกษา (Academic) • .go = หน่วยงานรัฐบาล (Government) • .or = องค์กรอื่น ๆ (Organizations)

20. ความรู้เบื้องต้นการใช้งานอินเทอร์เน็ตความรู้เบื้องต้นการใช้งานอินเทอร์เน็ต • Domain Name ชื่อย่อของประเทศ เช่น • .th = Thailand • .hk = Hong Kong • .jp = Japan • .sg = Singapore

21. HTML • HTMLย่อมาจาก Hyper Text Markup Languageเป็นภาษาที่ใช้ในการพัฒนาเว็บเพจเพื่อให้โปรแกรมเว็บบราวเซอร์ (Web Browser)ต่างๆ สามารถแปลงคำสั่งและแสดงผลเป็นรูปภาพ เสียง หรือข้อมูลได้ • มีโปรแกรมเว็บบราวเซอร์มากกว่า 10 โปรแกรมที่สามารถอ่านหรือเข้าใจในภาษา HTML ซึ่งเป็นข้อความ Text กับรหัสที่อยู่ในเครื่องหมาย < > และมีนามสกุลเป็น .html โดยเมื่อเราเปิดโปรแกรมเว็บบราวเซอร์ เราจะไม่สามารถพบรหัสเหล่านี้ได้เลยบนจอภาพ แต่รหัสเหล่านี้จะเป็นคำสั่งที่บอกโปรแกรมเว็บบราวเซอร์ของเราว่า รูปแบบของข้อความเป็นอย่างไร รวมไปถึงการสร้างจุดเชื่อมโยงหรือลิงค์ (Link) ที่เชื่อมโยงต่อไปยังเว็บเพจอื่นๆ

22. HTML • สำหรับการสร้างไฟล์ HTML จะต้องอาศัยโปรแกรมที่มีคุณสมบัติเป็น Text Editor โดยเราจะใช้โปรแกรมเหล่านี้สำหรับเขียนคำสั่งต่างๆ หรือรายละเอียดของข้อมูลที่ต้องการให้แสดงผลบนจอภาพ และเก็บเป็นไฟล์โดยจะต้องมีนามสกุลเป็น .html จากนั้นก็ทดสอบไฟล์ในโปรแกรมเว็บบราวเซอร์ต่อไป แต่ในปัจจุบันได้มีการพัฒนาโปรแกรมที่ผู้ใช้งานไม่ต้องเขียนคำสั่งเองก็สามารถที่จะสร้างเว็บเพจอย่างง่ายๆ ได้เลย • เช่น Microsoft Frontpage Netscape Composer Macromedia Dreamweaver Adobe Golive

23. HTML • เอกสาร HTML เป็นเอกสารที่ประกอบไปด้วยข้อมูลที่เราต้องการเผยแพร่ผ่าน WWW และ ภาษา HTML ที่ใช้กำหนดการแสดงผลของข้อมูลดังกล่าว • ภาษา HTML เป็นภาษาที่อยูในรูปของ แท๊ก (Tag) ที่ใช้ห่อหุ้มข้อมูลที่เราต้องการเผยแพร่ผ่าน WWW ซึ่งการแสดงผลของเอกสาร HTML เราสามารถที่จะดูได้โดยใช้โปรแกรมที่เรียกว่า เว็บ บราวเซอร์ (Web Browser)

24. HTML • โครงสร้างของภาษา HTML จะประกอบไปด้วย 3 ส่วน ดังนี้ • ส่วนที่ใช้บอกจดเริ่มต้นและจุดสิ้นสุดของเอกสาร คือ แท๊ก <html></html> • ส่วนหัวของเอกสาร HTML คือ แท๊ก <head></head> ซึ่งเราจะแสดงหัวเรื่องของ เอกสาร HTML ไว้ในส่วนนี้ • ส่วนที่ใช้บอกจดเริ่มต้นและจุดสิ้นสุดของเนื้อหา คือ แท๊ก <body></body>

25. HTML

26. วิธีสร้างเว็บไซต์ • สร้างเว็บไซต์ด้วย Web Hosting • สร้างเว็บไซต์ด้วยโปรแกรมกราฟฟิก • สร้างเว็บไซต์ด้วยภาษา HTML และ JavaScript

27. ขนาดหน้าของเว็บเพจ • ขนาดหน้าของเว็บเพจที่นิยมใช้ในปัจจุบันมี 2 ขนาด คือ • ขนาด 800X600 pixelsจะสามารถแสดงหน้าเว็บได้ครบถ้วนกับหน้าจอที่มีขนาด 15 นิ้วขึ้นไป • ขนาด 1024X768 pixels เป็นขนาดของหน้าเว็บเพจที่นิยมมากที่สุดในปัจจุบัน เพราะสามารถแสดงข้อมูลของเว็บได้มากขึ้นและง่ายต่อการออกแบบด้วย

28. พื้นที่ของเว็บเพจ • การจัดสรรพื้นที่ของเว็บเพจสามารถทำได้หลายรูปแบบ แต่ที่นิยมใช้กันจริงๆจะมีอยู่ 3 แบบ คือ • การแบ่งแบบอิสระ • การแบ่ง 2 ส่วน • การแบ่ง 3 ส่วน

29. ส่วนประกอบของเว็บ

30. ส่วนประกอบของเว็บ • โลโก้ (Logo)

31. ส่วนประกอบของเว็บ • ส่วนหัวของเว็บเพจ (Page Header)

32. ส่วนประกอบของเว็บ • เมนูหลัก (Link Menu)

33. ส่วนประกอบของเว็บ • ส่วนที่ใช้แสดงเนื้อหาของเว็บ (Page Body)

34. ส่วนประกอบของเว็บ • ส่วนล่างสุดของเว็บไซต์ (Page Footer)

35. ส่วนประกอบของเว็บ • ช่องทางการโฆษณาของเว็บไซต์ (Banner)

36. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์

37. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • เตรียมเนื้อหาที่จะนำเสนอ • ก่อนอื่นต้องมีเป้าหมายก่อนว่าจะทำเว็บไซต์เกี่ยวกับเรื่องอะไรและเนื้อหาต่างๆ มีอะไรบ้าง แล้วจัดเตรียมสิ่งต่างๆ ซึ่งหมายถึง ข้อความ, ภาพประกอบ, เสียง และอื่น ๆ

38. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • ออกแบบหน้าตาของเว็บไซต์ • ว่าต้องการให้มีลักษณะเป็นอย่างไร เช่น จะมีการแบ่งเฟรมหรือไม่ สี ของ Background และตัวอักษรเป็นสีอะไร จะจัดวางอะไรไว้ตรงส่วนไหน จะมี Link ที่ใดบ้างและแต่ละ Link เชื่อมโยงไปหาส่วนใด เป็นต้น

39. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • ออกแบบหน้าตาของเว็บไซต์

40. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • ออกแบบหน้าตาของเว็บไซต์

41. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • ออกแบบหน้าตาของเว็บไซต์

42. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • เขียนและทดสอบ • ลงมือเขียนโดยใช้โปรแกรมสำหรับเขียนเว็บไซต์ แล้วทำการทดสอบการแสดงผลและ Link ต่างๆ ว่าเชื่อมโยงได้ถูกต้องหรือไม่ ในขั้นตอนนี้ถ้ามีปริมาณข้อมูลมากและมีการเชื่อมโยงที่ซับซ้อนก็จะใช้เวลาค่อนข้างมากเพราะต้องคอยปรับแก้อยู่เรื่อย ๆ

43. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • ลงทะเบียนชื่อเว็บไซต์และจัดหาพื้นที่เก็บข้อมูล • นำเว็บไซต์ที่สร้างขึ้น Upload ขึ้น Server และตรวจสอบความเรียบร้อย • คือ การคัดลอกข้อมูล จากเครื่องของเราไปเก็บไว้ในเครื่อง Server ซึ่งการคัดลอกนี้เรียกว่า Upload โดยใช้โปรแกรมสำหรับการUpload • เช่น โปรแกรม WinSCP, CuteFtp, WS_FTP (โปรแกรม Dreamweaver มีความสามารถนี้อยู่แล้ว)

44. ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • ประกาศให้โลกรับรู้ • เมื่อตรวจสอบความเรียบร้อยแล้ว ก็ถึงคราวที่จะชักชวนให้ผู้คนมาชมเว็บไซต์ โดยประชาสัมพันธ์ผ่านทางสื่อต่างๆ เช่น แลก Link กับเว็บไซต์อื่นๆ ฝากข้อความชักชวนไว้ตามกระดานข่าวต่างๆ หรือจะเพิ่มชื่อเว็บไซต์ให้กับแหล่งรวมข้อมูลบนอินเทอร์เน็ตอย่าง yahoo หรือ google

45. ข้อแนะนำในการทำเว็บไซต์ข้อแนะนำในการทำเว็บไซต์

46. ข้อแนะนำในการทำเว็บไซต์ข้อแนะนำในการทำเว็บไซต์ • การเลือกเนื้อหาเว็บไซต์ • ถือเป็นส่วนสำคัญในการเริ่มต้นทำเว็บไซต์ ทั้งการจัดโครงสร้าง และ ความนิยมของเว็บไซต์ สำหรับผู้เริ่มต้น ซึ่งไม่แน่ใจว่าจะเลือกหัวข้อใด • ควรเริ่มต้นจาก การสำรวจตัวเองว่า ชอบ หรือ สนใจสิ่งใด มากที่สุด หรือ มีความรู้เชี่ยวชาญด้านใดมากที่สุด

47. ข้อแนะนำในการทำเว็บไซต์ข้อแนะนำในการทำเว็บไซต์ • โครงสร้างของเว็บไซต์ • มีจุดมุ่งหมายสำคัญ คือ การที่จะทำให้ ผู้เข้าเยี่ยมชม สามารถค้นหาข้อมูล ในเว็บไซต์ได้อย่างเป็นระบบ ประการแรกต้องพิจารณาถึง ความเป็นไปได้ของประเภทของผู้เข้าเยี่ยมชมเพราะผู้เยี่ยมชมแต่ละประเภท ก็จะค้นหาข้อมูลที่แตกต่างกัน • ดังนั้นสิ่งที่ควรจะทำก็คือการจัดกลุ่มของข้อมูลโดยให้รวมหัวข้อย่อยต่างๆ ให้อยู่ในหัวข้อหลัก โดยมีจุดมุ่งหมายให้ จำนวนข้อหลักน้อย ที่สุด นอกจากนี้การจัดไฟล์และไดเร็กทอรี่ ก็จะช่วยให้การดูแลรักษาและการตรวจสอบความผิดพลาดของเว็บไซต์ง่ายยิ่งขึ้น

48. ข้อแนะนำในการทำเว็บไซต์ข้อแนะนำในการทำเว็บไซต์ • โครงสร้างของเว็บไซต์ • เช่น การจัดไฟล์รูปภาพไว้ที่เดียวกัน หรือ จัดเว็บไซต์ที่เป็นเรื่องเดียวกันไว้ในไดเร็กทอรี่เดียวกัน เป็นต้น

49. ข้อแนะนำในการทำเว็บไซต์ข้อแนะนำในการทำเว็บไซต์ • โครงสร้างของเว็บไซต์

50. ข้อแนะนำในการทำเว็บไซต์ข้อแนะนำในการทำเว็บไซต์ • สามารถดูเว็บไซต์ได้ในหลายบราวเซอร์ • การทำเว็บไซต์ควรจะทำเพื่อให้สามารถดูได้จากทุกๆ Version ของ Software ต่างๆ ไม่ว่าจะเป็น Netscape, Communicator, Internet Explorer หรือ อื่นๆ การทำให้ทุกคนดูได้นี้ ถือว่าเป็นการขยายฐานของผู้เข้าเยี่ยมชม