รายวิชา 5654703 เว็บเทคโนโลยี (Web Technology)

รายวิชา 5654703เว็บเทคโนโลยี (Web Technology) ความรู้เบื้องต้นเกี่ยวกับเว็บเทคโนโลยี

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • ลงทะเบียนชื่อเว็บไซต์และจัดหาพื้นที่เก็บข้อมูล • สำหรับการสร้างเว็บไซต์ของอาจารย์จะมีชื่อเว็บไซต์ตามตัวอย่างดังนี้ • Login: suchada จะมีชื่อเว็บไซต์ว่า http://netra.lpru.ac.th/~suchada/ • เนื้อที่ในการจัดทำเว็บไซต์จะมีพื้นที่ 10 MB

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

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

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

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

รายวิชา 5654703 เว็บเทคโนโลยี (Web Technology)