World Wide Web และ Web Browsers

World Wide Web และ Web Browsers ภาควิชาวิทยาการคอมพิวเตอร์ มหาวิทยาลัย บูรพา

เนื้อหา • WWW คืออะไร • ประโยชน์ของ WWW • Web Browsers • การใช้บริการ WWW

WWW : World Wide Web • เป็นระบบการเผยแพร่ข่าวสารข้อมูลในระบบเครือข่ายอินเทอร์เน็ต โดยการเชื่อมโยงและโอนย้ายข้อมูลจากแหล่งข้อมูลทีเรียกว่า Web Server • ข้อมูลใน World Wide Web เป็นได้ทั้งข้อความ รูปภาพและเสียง • การเชื่อมโยงใน WWW มีลักษณะของ Hyperlink และ Hypermedia โดยใช้โปรโตคอล HTTP (HyperText Transfer Protocal)

ความเป็นมาของ WWW • พัฒนาที่ สถาบัน CERN เมืองเจนีวา สวิตเซอร์แลนด์ ซึ่งเป็นห้องปฏิบัติการทางฟิสิกส์ • ค.ศ. 1989 Tim Berners-Lee ได้พัฒนาการนำเสนอเอกสาร ในรูปแบบที่เรียกว่า Hypertext (รูปแบบเอกสารในลักษณะของ Help ในปัจจุบัน) • Tim สร้าง Web Software ชุดแรกในเดือนตุลาคม ค.ศ. 1991 • World Wide Web ได้ถูกเผยแพร่ครั้งแรกนอกCERN ในระบบเครือข่ายอินเทอร์เน็ตในฤดูร้อนปี ค.ศ. 1991

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

ตัวอย่าง Hypertext The Department of Computer Sciences, founded in 1962, is the oldest CS department in the country. It offers bachelors, masters, and doctoral degrees and has about 400 undergraduates and 120 full-time graduate students. The department has active student chapters of the ACMand of the UPE Computing Sciences Honor Society.

HYPERLINK • เอกสารต่าง ๆใน WWW สามารถเชื่อโยงหรือติดต่อไปยังเอกสารอื่นๆ ทั้งที่อยู่ภายในแฟ้มเอกสารเดียวกัน หรือต่างแฟ้ม หรือต่างเครื่องคอมพิวเตอร์ • ในการเชื่อมโยงเอกสารนั้นจะทำให้สามารถค้นหาสารสนเทศได้อย่างอิสระ • Hypertext link จะเรียกว่า Hyperlinks • Hyperlinksสามารถสร้าง Web ที่ซับซ้อนได้

HYPERMEDIA • Hypermedia = Hypertext + Multimedia • เอกสาร Hypermedia นอกจากจะมีการเชื่อมโยงข้อความแล้ว ยังมีการเชื่อโยงในรูปแบบอื่นอีกได้แก่ภาพ (Images) เสียง (Sound) ภาพเคลื่อนไหว (Animation) และภาพยนต์ (movies)

รหัสสืบค้น URLs : Uniform Resource Locators • การเชื่อมโยงข้อมูลของWWWถูกกำหนดโดยรหัสสืบค้น URL • คำสั่งในการติดต่อกับ Server ที่มีบริการหลากหลาย โปรโตคอล ตัวอย่างเช่น • gopher, ftp, telnet และ news • รูปแบบมาตราฐานของคำสั่งเพื่อใช้สืบค้น เรียกว่า URL protocol://ชื่อโฮสต์/path/ชื่อไฟล์ • protocol เป็นการระบุชนิดโปรโตคอล • ชื่อโฮสต์ กำหนดชื่อโฮสต์คอมพิวเตอร์ที่ต้องการติดต่อ • Path/ชื่อไฟล์ แสดงชื่อไดเรคทอรีและชื่อแฟ้มเอกสาร • รูปแบบมาตราฐานของ WWW คือขึ้นต้นด้วย http:// ตัวอย่างเช่น • http://www.nectec.or.th

โปรโตคอล ใน WWW • โกเฟอร์ gopher://gopher host • gopher://gopher.nectec.or.th • ถ่ายโอนแฟ้ม ftp://ftp host • ftp://ftp.nectec.or.th/pub/ • ftp://192.150.251.33 • เปิดแฟ้ม file://host/path/file • file://c|index.html

โปรโตคอล ใน WWW(ต่อ) • อ่านข่าวยูสเน็ต news://host name • news://news.nectec.or.th • news://soc.culture.thai • เข้าใช้เครื่องระยะไกล telnet://host name • telnet://nwg.nectec.or.th • ใช้บริการ Hypertext http://host name • http://bucc4.buu.ac.th

HTTP : Hypertext Tranfer Protocol • HTTP เป็นโปรโตคอลที่ใช้เชื่อมโยงข้อมูลกับแหล่งข้อมูล บน WWW • เมื่อผู้ใช้คลิกเมาส์ ณ ตำแหน่งข้อมูลที่กำหนดไว้เป็นตัวเชื่อมโยง ก็จะเกิดการเชื่อมโยงไปยังแฟ้มข้อมูลที่กำหนดไว้

Web Server (Web Site) • คือเครื่องคอมพิวเตอร์ระบบ UNIX หรือ Windows NT หรือ Windows 95 ที่มีโปรแกรมจัดการทำให้เครื่องดังกล่าวทำหน้าที่เป็นผู้ให้บริการ (Server) คอยให้บริการข้อมูลกับผู้ที่มาติดต่อโดยผ่านระบบเครือข่าย Internet หรือ เครือข่าย Intranet

Web Server Software • IIS : Internet Information Server • Netscape Communication Server • Apache • Web Personal • Microsoft Fontpage Server

Web Browsers • เป็นโปรแกรมที่ทำหน้าที่แปลคำสั่งและข้อมูลที่อยู่ในรูปของภาษา HTML ให้กลายมาเป็นรูปแบบการแสดงข้อมูลบนจอภาพตามรูปแบบ คำสั่งที่กำหนดไว้ • ติดตั้งบนเครื่องที่จะขอใช้บริการ WWW (WWW Client Program)

Web Browser 2 กลุ่มใหญ่ • บราวเซอร์แบบ graphic Mode(ใช้งานแบบ Hypermedia) • Mosaic -Netscape • Microsoft Internet Explorer • บราวเซอร์แบบ Text mode(ใช้งานแบบ Hypertext) • Lynx และ DosLynx โดยมหาวิทยาลัยแคนซัส สหรัฐอเมริกา • อยู่ที่ ftp2.cc.ukans.edu

Web browser features • ลักษณะสำคัญของ Web browsers ที่ใช้งานในปัจจุบัน • Mouse-driven graphical interface • สามารถแสดงเอกสารแบบ Hypertext และ Hypermedia • สามารถแสดงข้อความตามชนิดของ fonts และตัวอักษรลักษณะพิเศษเช่นตัวหนา ตัวเอียง • สามารถจัดรูปแบบของเอกสารที่จะแสดงเช่น paragraph, lists • สนับสนุนการใช้เสียงและวิดีโอ • สนับสนุนบริการต่างๆ บนเครือข่ายเช่น ftp, telnet, gopher • สามารจัดเก็บรหัสสืบค้น URLs และเรียกใช้งานได้

การใช้งาน Web browser • Web browser โดยทั่วไปมีการทำงานแบบ pull-down menus • Location fields ใช้กำหนด URL ของเอกสารที่ต้องการแสดง • Viewing area เป็นบริเวณที่ใช้แสดงข้อมูลในเอกสารปัจจุบัน ซึ่งในเอกสารจะแสดงข้อมูลข่าวสารทั้งข้อความ ภาพ ภาพเคลื่อไหว เสียง วิดีโอ รวมทั้ง การเชื่อมโยงไปยังแหล่งข้อมูลต่างๆใน WWW

Windows history • Browser จะมีการจัดเก็บเอกสารที่เราได้เรียกดูไว้ ในขณะที่เรากำลังใช้งาน • แหล่งเชื่อมโยงเอกสารที่เราเคยอ่านจะจัดเก็บไว้ใน history window • สามารถเรียกใช้งานได้จากเมนูหลัก Window และเมนูย่อย History

Hotlists, Bookmarks, Favorites • Hotlists/Bookmarks/Favorites ใช้สำหรับจัดเก็บที่อยู่ในรูปแบบ URL ของWebsite ที่เคยเรียกดู ซึ่งมีประโยชน์สำหรับการเรียกดูในภายหลัง และทำให้เราไม่ต้องจดจำชื่อ Website นั้น • เราสามารถเพิ่มหรือลบที่อยู่ของ Website ที่จัดเก็บไว้ใน Hotlists/Bookmarks/Favorites ได้โดยง่าย

Web browser : Mosaic • Mosaic เป็นโปรแกรม Web browser ตัวแรกที่พัฒนาโดยMarc Andreessen และเพื่อน ที่ National Center for Supercomputing Application(NCSA) มหาวิทยาลัยอิลลินอยส์ โดยใช้เวลา 4 เดือนในช่วงปลายปี ค.ศ. 1992ถึงต้นปี ค.ศ. 1993 • โปรแกรม Mosaic รุ่นแรกพัฒนาเสร็จต้นปี 1993 ได้ถูกแจกจ่ายให้ผู้ใช้อย่างรวดเร็ว โดยไม่เสียค่าใช้จ่าย จึงกลายเป็นโปรแกรมยอดนิยมทันที เนื่องจากมีลักษณะการใช้งานเป็น point-and-click Multimedia interface • Mosaic เป็นมาตราฐานของ Web browser

Web browsers: Netscape Navigator • Marc Andreessen เป็นผู้ก่อตั้งบริษัท Netscape Communications Corporation • Netscape เวอร์ชันแรก ใช้งานในเดือนตุลาคม ค.ศ. 1994 • มีการทำงานแบบ Continuous document streaming • สามารใช้งานได้บน MS Windows, Apple Macintosh และ X-Windows บน UNIX • ปัจจุบัน Netscape เป็นผู้พัฒนามาตราฐานใหม่ ๆของภาษา HTML • เวอร์ชันใหม่ เรียกว่า Netscape Communicator

การใช้งาน Netscape • เป็นโปรแกรม Web browser ทีนิยมใช้ในปัจจุบัน • ใช้งานง่าย • สามารถถ่ายโอนโปรแกรมได้ฟรีจากอินเทอร์เน็ต • http://home.netscape.com/ • การเรียกใช้ สามารถทำได้โดยการ double-click ที่ไอคอน ของ Netscape หรือเรียกจาก start icon โดยจะเข้าสู่ Netscape home page

หน้าตาของโปรแกรม Netscape • Netscape home page เหมือนโปรแกรม windows ทั่วไป • ประกอบด้วย Title bar, Menu bar, Toolbar • นอกจากนี้ยังมี Location box เพื่อให้แสดงชื่อ web site ที่กำลังใช้งาน • มีปุ่ม 6 ปุ่มที่จะแสดงข่าวสารให้ใช้งานด้วนรวดเร็ว

ปุ่มคำสั่งทูลบาร์ • Back -- ใช้แสดงข้อมูลย้อนหลังหนึ่งหน้า • Forward -- ใช้แสดงข้อมูลหน้าถัดไปหนึ่งหน้า • Home -- ใช้แสดงข้อมูลที่เป็นโฮมเพจ • Reload -- เป็นคำสั่งสำหรับโหลดข้อมูลปัจจุบันจากแหล่งข้อมูลซ้ำ • Images -- เป็นคำสั่งสำหรับการโอนย้ายรูปภาพ • Open -- เป็นคำสั่งสำหรับเปิดแฟ้มข้อมูลหรือเชื่อมโยงกับ Web server • Print -- เป็นคำสั่งสำหรับพิมพ์แฟ้มข้อมูลที่เปิดอยู่ออกทางเครื่องพิมพ์ • Find --เป็นคำสั่งค้นหาคำบนเว็บเพจ • Stop -- เป็นคำสั่งเพื่อหยุดการเชื่อโยงกับ Web server

Home pageของ Netscape • มีสัญลักษณ์เป็นรูปเรือ Vikings และมีเมนูที่มีลักษณะของ hyperlink ให้เลือกใช้ • ถ้าต้องการเชื่อมโยงไปที่ใดให้เลือกคลิกที่เมนูได้ตามต้องการ • ขณะที่โปรแกรมกำลังโหลดข้อมูลที่สัญลักษณ์ตัว N จะมีรูปดาวหางกำลังวิ่ง

Mosaic and Netscape need TCP/IP • ทั้ง Mosaic และ Netscape (เหมือนWeb browser อื่นๆ) จะต้องทำงานบน Internet node • สำหรับ PC workstation ที่ใช้ในการเชื่อมต่อหรือเป็น node ของอินเทอร์เน็ตจะต้องติดตั้ง TCP/IP

Web browser: Lynx • Lynx เป็น browserที่แสดงผลเป็นข้อความ (Text mode) ไม่มีกราฟฟิก ไม่มี เสียง • Lynx ทำงานบน Internet node • Lynx เหมาะกับการใช้งานในลักษณะที่เป็น teminal โดยเชื่อม PCs หรือ MACs เข้ากับเครือข่ายอินเทอร์เน็ต โดยผ่านโมเด็ม • พัฒนาโดย Academic Computing Service, University of Kansas • ดูรายละเอียดที่ • http://www.cc.ukans.edu/ about lynx/about lynx.html

Web browser: Microsoft’s Internet Explorer • พัฒนาขึ้นเพื่อใช้งานบนระบบปฏิบัติการ Windows 95 • สนับสนุนมาตราฐานของ HTML ใหม่ๆเช่น Marquees, AVI(Audio Video Interleave) inline video clips, selectable fonts, background sounds • สนับสนุนการใช้งานแบบSSL(Secure Sockets Layer)และ RSA encrytion technology • สนับสนุน VRML(Virtual Reality Modelling Language)

Web page • Web page คือข้อมูลที่อยู่บน Web server • จะมีข้อมูลต่างๆ ที่เจ้าของระบบจัดเตรียมไว้ • เพื่อให้ผู้ใช้อินเทอร์เน็ตเข้ามาดู • เพื่อประชาสัมพันธ์กิจกรรมต่างๆของเจ้าของ Web site

Home page คืออะไร • Home Page คือ หน้าหนังสืออิเล็กทรอนิกส์บน World Wide Web ที่เสนอข้อมูลใดๆ ที่เจ้าของ Home Page ต้องการจะใส่ลงไปในหน้าหนังสืออิเล็กทรอนิกส์นั้นเช่น ข้อมูลแนะนำตัวเอง ซึ่งอาจเป็นบุคคลหรือองค์กรที่ต้องการให้ผู้อื่นได้รับทราบ หรือข้อมูลที่ น่าสนใจ เป็นต้น ซึ่งใน Home Page หนึ่งๆ อาจมีหลายหน้าจอ (Page) ได้ และ Page หนึ่งๆ เหล่านี้จะมีฐานะเป็น Web Page และมีนามสกุลเป็น .htm หรือ .html ข้อมูลที่แสดงก็เป็นได้ทั้งข้อความ เสียง ภาพนิ่ง และภาพเคลื่อนไหว และข้อมูลที่นำเสนอสามารถเชื่อมโยงในรูปของ Hypertext คือ โยง (link) ไปยัง Page อื่นที่จะให้ข้อมูลนั้นๆ ในระดับลึกลงไปได้เรื่อยๆ

ส่วนประกอบของ Homepage • 1. ส่วน Header ประกอบด้วย • ชื่อหน่วยงาน • ตราหรือสัญลักษณ์ของหน่วยงาน • หน้าที่หรือวัตถุประสงค์ของหน่วยงาน • 2. ส่วน Body ประกอบด้วย • เส้นแบ่งข้อความ • รายการของหัวข้อหรือเนื้อหา • ภาพประกอบ • ปุ่มหรือ icon

ส่วนประกอบของ Homepage • 3. ส่วน footer ประกอบด้วย • email address ของผู้สร้าง(webmaster) และหน่วยงาน • วันเวลาที่สร้างและปรับปรุงข้อมูล • คำประกาศลิขสิทธิ์ • ตราหรือสัญลักษณ์ของหน่วยงาน • คำประกาศหรือเจตนารมย์ของหน่วยงาน

การเตรียมข้อมูลใน Web page • เขียนโปรแกรมด้วยภาษา HTML (Hypertext Markup Language) • ใช้โปรแกรมประเภท HTML Editorหรือ HTML Authoring Tool ช่วยสร้างเอกสารที่มีอยู่แล้วให้เป็นภาษา HTML

โปรแกรมช่วยสร้างเอกสาร HTML: WWW Authoring Tool • โปรแกรมที่ช่วยผู้ใช้สร้าง Web pageได้อย่างรวดเร็ว • WWW Authoring Tool สามารถสร้างเอกสาร HTML โดยไม่ต้องเขียนคำสั่ง HTML เอง เช่น • Internet Assistant ของ Microsoft • Microsoft Front Page ของ Microsoft ขอดูข้อมูลที่ http://www.microsoft.com/ • WebAuthor ของบริษัท Quarterdeck ทำงานร่วมกับ MS Word 6.0 ขอดูข้อมูลที่ http://www.qdeck.com/ • MS Office 97

โปรแกรมช่วยสร้างเอกสาร HTML: HTML Editors • เป็นโปรแกรม Editor ที่สร้างขึ้นมาเพื่อใช้สำหรับเขียนภาษา HTML โดยเฉพาะ • มีคำสั่งหลักของภาษา HTML ให้เลือกใช้ • HoTMetal Pro http://ftp.ncsa.uiuc.edu/Web/html/htometal • HotDogs • Super NotePad

HTML : Hypertext Markup Language • แฟ้มข้อมูลข่าวสารบน WWW ถูกจัดรูปแบบด้วยภาษา HTML • แฟ้มคำสั่ง HTML เป็น Text File ที่มีนามสกุล htmlหรือ htm • คำสั่งแต่ละคำสั่งกำกับด้วย tag เช่น <html> <head> <title>………………..……</title> </head> <body>…………… </body> </html>

Advanced Features ของ HTML • Clickable image Maps • Table • Forms Processing • Forms, Input, Checkboxes, Style Sheets • Uniform Resource Naming • Commercialization

ตัวอย่าง HTML Document และผลลัพธ์ <html> <head> <title>My Documents/index.html</title> </head> <body> <h1>My Home Page</h1> <hr> <h2>E-mail</h2> click <a href=“mailto:seree@bucc.buu.ac.th”> Mail To Seree</a> </body> </html>

ตัวอย่าง ผลลัพธ์

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

การเปิด Web site • เลือกเมนู File • เลือกคำสั่ง Open Location • พิมพ์ที่อยู่ของ Web site ที่ต้องการ • ในกรณีต้องการเปลี่ยน Web site ให้พิมพ์ที่อยู่ของ Web siteที่ต้องการในช่อง Location ที่อยู่ใต้แถบเครื่องมือ

การค้นหาข้อมูลใน Web site • ติดต่อโดยตรงกับ Web server ที่สนใจ • เริ่มที่ home page • เจาะเข้าหา Web page ที่สนใจ • สืบค้นข้อมูลผ่าน Search engine • สืบค้นผ่าน Catalog ที่เป็น Home page ของ Web server ที่สำคัญๆ

Search Engine • เป็นโปรแกรมสืบค้นรายละเอียดหรือข้อมูลบน WWW ในระบบWindows • ช่วยค้นสิ่งที่ต้องการได้อย่างรวดเร็ว • โปรแกรมที่นิยมใช้ได้แก่ Yahoo, AltaVista, Lycos, Web crawer

การเรียกใช้ Search engine • ที่ช่อง Location พิมพ์รหัส URL ของ Search engine ที่ต้องการ • ในโปรแกรม Netscape จะมีปุ่มให้เลือกใช้โปรแกรม Search engine ที่ต้องการได้ทันที

Search engine ที่สำคัญ • Yahoo http://www.yahoo.com • Alta Vista http://www.altavista.com • Lycos http://www.lycos.com • Infoseek http://www.infoseek.com • Exite http://www.excite.com • Web crawler http://www.wencrawler.com • Shareware http://www.shareware.com

เทคนิคการใช้ Web Browser • เปิดหลายหน้าต่างพร้อมกัน • ระหว่างโหลดกราฟิกให้เลื่อนดูข้อความก่อน • ถ้าคอยข้อมูลนานให้หยุดแล้วลองเรียกใหม่อีกครั้ง • ดูข้อความอย่างเดียวเร็วที่สุด • เก็บ Web site ที่ชอบใส่ book Mark เอาไว้

การบันทึกแฟ้มรูปภาพจาก Web site • ใช้โปรแกรมเบราว์เซอร์วิ่งไปยัง Web site ที่ต้องการ • เลื่อนเมาส์พอยน์เตอร์ไปที่ภาพที่ต้องการแล้วคลิกเมาส์ปุ่มขวา • จากนั้นเมนูจะปรากฏ ให้คลิกคำสั่ง Save Image As • เมื่อไดอะล็อกบล็อกปรากฏ ให้คลิกโฟลเดอร์ที่ใช้เก็บไฟล์รูปภาพ • จากนั้นคลิกปุ่ม Save

การบันทึก Web page เก็บเป็นไฟล์ไว้ • เรียกโปรแกรมเบราว์เซอร์ • พิมพ์ที่อยู่ Web site ที่ต้องการ • คลิกเมนู File • คลิกคำสั่ง Save As • เลือกโฟลเดอร์ที่ใช้เก็บไฟล์ • คลิกปุ่ม Save เครื่องจะเก็บเป็นแฟ้มที่มีนามสกุลเป็น html หรือ htm

วิธีเรียกดูไฟล์ Web page ที่เก็บไว้ • เรียกโปรแกรมเบราว์เซอร์ • คลิกเมนู File • คลิกคำสั่ง Open File • เลือกโฟลเดอร์(ไดเร็คทอรี)ที่เก็บไฟล์เอาไว้ • คลิกชื่อไฟล์ Web page ที่ต้องการอ่าน • คลิกปุ่ม Open

World Wide Web และ Web Browsers