ใบงานที่ 2

ให้นักเรียนตอบคำถามต่อไปนี้

1.เว็บเบราเซอร์ (web browser) หมายถึงอะไร
ตอบ คือโปรแกรมคอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเวบที่สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล ที่จัดเก็บไว้ที่เว็บเซอร์วิซหรือเว็บเซิร์ฟเวอร์หรือระบบคลังข้อมูลอื่น ๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ

เว็บเบราว์เซอร์ตัวแรกของโลกชื่อ เวิลด์ไวด์เว็บขณะเดียวกันเว็บเบราว์เซอร์ที่นิยมมากที่สุดในปัจจุบันคือ อินเทอร์เน็ตเอกซ์พลอเรอร์

2. การทำงานของเว็บเบราว์เซอร์

ตอบ 

การทำงานของบริการ WWW นี้จะมีลักษณะเช่นเดียวกันกับบริการอื่นๆ ของอินเทอร์เน็ต คืออยู่ในรูปแบบไคลเอ็นต์-เซิร์ฟเวอร์ (client - server) โดยมีโปรแกรมเว็บไคลเอ็นต์ (web client) ทำหน้าที่เป็นผู้ร้องขอบริการ และมีโปรแกรมเว็บเซิร์ฟเวอร์ (web server) ทำหน้าที่เป็นผู้ให้บริการ โปรแกรมเว็บไคลเอ็นต์ก็คือโปรแกรมเว็บบราวเซอร์ (web browser) นั่นเอง สำหรับโปรแกรมเว็บเซิร์ฟเวอร์นั้นจะถูกติดตั้งไว้ในเครื่องของผู้ให้บริการเว็บไซต์ การิดต่อระหว่างโปรแกรมเว็บบราวเซอร์กับโปรแกรมเว็บเซิร์ฟเวอร์จะกระทำผ่านโปรโตคอล HTTP (Hypertext Transfer Protocol) 

กลไกการทำงานของเว็บเพจ

สำหรับเว็บเพจธรรมดาที่โดยปกติมีนามสกุลของไฟล์เป็น htm หรือ html นั้น เมื่อเราใช้เว็บบราวเซอร์เปิดดูเว็บเพจใด เว็บเซิร์ฟเวอร์ก็จะส่งเว็บเพจนั้นกลับมายังบราวเซอร์ จากนั้นบราวเซอร์จะแสดงผลไปตามคำสั่งภาษา HTML (Hypertext Markup Language) ที่อยู่ในไฟล์

   จะเห็นได้ว่าเว็บเพจดังรูปเป็นเว็บเพจที่มีลักษณะ static กล่าวคือ ผู้ใช้จะพบกับเว็บเพจหน้าตาเดิมๆ ทุกครั้งจนกว่าผู้ดูแลเว็บจะทำการปรับปรุงเว็บเพจนั้น นี่คือข้อจำกัดอันมีต้นเหตุมาจากภาษา HTML ซึ่งเป็นภาษาที่ใช้อธิบายหน้าตาของเว็บเพจ หรือกล่าวอีกนัยหนึ่งคือ HTML สามารถกำหนดให้เว็บเพจมีหน้าตาอย่างที่เราต้องการได้ แต่ไม่ช่วยให้เว็บเพจมี "ความฉลาด" ได้

     การสร้างเว็บเพจที่มีความฉลาดสามารถทำได้หลายวิธีด้วยกัน หนึ่งในนั้นก็คือ การฝังสคริปต์หรือชุดคำสั่งที่ทำงานทางฝั่งเซิร์ฟเวอร์ (server-side script) ไว้ในเว็บเพจ

จากรูปเป็นการทำงานของเว็บเพจที่ฝังสคริปต์ภาษา PHP ไว้ (ขอเรียกว่า ไฟล์ PHP) เมื่อเว็บบราวเซอร์ร้องขอไฟล์ PHP ไฟล์ใด เว็บเซิร์ฟเวอร์จะเรียก PHP engine ขึ้นมาแปล (interpret) และประมวลผลคำสั่งที่อยู่ในไฟล์ PHP นั้น โดยอาจมีการดึงข้อมูลจากฐานข้อมูล หรือเขียนข้อมูลลงไปยังฐานข้อมูลด้วย หลังจากนั้นผลลัพธ์ในรูปแบบ HTML จะถูกส่งกลับไปยังบราวเซอร์ บราวเซอร์ก็จะแสดงผลตามคำสั่ง HTML ที่ได้รับมา ซึ่งย่อมไม่มีคำสั่ง PHP ใดๆ หลงเหลืออยู่ เนื่องจากถูกแปลและประมวลผลโดย PHP engine ที่ฝั่งเซิร์ฟเวอร์ไปหมดแล้ว

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

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

3. ตัวอย่างเว็บเบราว์เซอร์ มา 3 โปรแกรม

ตอบ

 1.Internet Explorer 

                                                   

2.Firefox

3.Google Chrome 

อินเตอร์เน็ต

อินเตอร์เน็ต (Internet)

1.ความหมายของอินเตอร์เน็ต

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

2.ประวัติความเป็นมาของอินเตอร์เน็ตในประเทศไทย

ตอบ ประเทศไทยได้เริ่มติดต่อกับอินเทอร์เน็ตในปี พ.ศ. 2530 ในลักษณะการใช้บริการ จดหมายเล็กทรอนิกส์แบบแลกเปลี่ยนถุงเมล์เป็นครั้งแรก โดยเริ่มที่มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตหาดใหญ่ (Prince of Songkla University) และสถาบันเทคโนโลยีแห่งเอเชียหรือสถาบันเอไอที (AIT) ภายใต้โครงการความร่วมมือระหว่างประเทศไทยและออสเตรเลีย (โครงการ IDP) ซึ่งเป็นการติดต่อเชื่อมโยงโดยสายโทรศัพท์ จนกระทั่งปี พ.ศ. 2531 มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตหาดใหญ่ ได้ยื่นขอที่อยู่อินเทอร์เน็ตในประเทศไทย โดยได้รับที่อยู่อินเทอร์เน็ต Sritrang.psu.th ซึ่งนับเป็นที่อยู่อินเทอร์เน็ตแห่งแรกของประเทศไทย ต่อมาปี พ.ศ. 2534 บริษัท DEC (Thailand) จำกัดได้ขอที่อยู่อินเทอร์เน็ตเพื่อใช้ประโยชน์ภายในของบริษัท โดยได้รับที่อยู่อินเทอร์เน็ตเป็น dect.co.th โดยที่คำ “th” เป็นส่วนที่เรียกว่า โดเมน (Domain) ซึ่งเป็นส่วนที่แสดงโซนของเครือข่ายอินเทอร์เน็ตในประเทศไทย โดยย่อมาจากคำว่า Thailand

กล่าวได้ว่าการใช้งานอินเทอร์เน็ตชนิดเต็มรูปแบบตลอด 24 ชั่วโมง ในประเทศไทยเกิดขึ้นเป็นครั้งแรกเมื่อเดือน กรกฎาคม ปี พ.ศ. 2535 โดยสถาบันวิทยบริการ จุฬาลงกรณ์มหาวิทยาลัยได้เช่าวงจรสื่อสารความเร็ว 9600 บิตต่อวินาที จากการสื่อสารแห่งประเทศไทยเพื่อเชื่อมเข้าสู่อินเทอร์เน็ตที่บริษัท ยูยูเน็ตเทคโนโลยี (UUNET Technologies) ประเทศสหรัฐอเมริกา
ในปีเดียวกัน ได้มีหน่วยงานที่เชื่อมต่อแบบออนไลน์กับเครือข่ายอินเทอร์เน็ตผ่านจุฬาลงกรณ์มหาวิทยาลัย หลายแห่งด้วยกัน ได้แก่ สถาบันเทคโนโลยีแห่งเอเชีย (AIT) มหาวิทยาลัยมหิดล สถาบันเทคโนโลยีพระจอมเกล้า วิทยาเขตเจ้าคุณทหารลาดกระบัง มหาวิทยาลัยเชียงใหม่ และมหาวิทยาลัยอัสสัมชัญบริหารธุรกิจ โดยเรียกเครือข่ายนี้ว่าเครือข่าย “ไทยเน็ต” (THAInet) ซึ่งนับเป็นเครือข่ายที่มี “ เกตเวย์ “ (Gateway) หรือประตูสู่เครือข่ายอินเทอร์เน็ตเป็นแห่งแรกของประเทศไทย (ปัจจุบันเครือข่ายไทยเน็ตประกอบด้วยสถาบันการศึกษา 4 แห่งเท่านั้น ส่วนใหญ่ย้ายการเชื่อมโยงอินเทอร์เน็ตโดยผ่านเนคเทค (NECTEC) หรือศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ)
ปี พ.ศ.  2535 เช่นกัน เป็นปีเริ่มต้นของการจัดตั้งกลุ่มจดหมายอิเล็กทรอนิกส์เพื่อการศึกษาและวิจัยโดยมีชื่อว่า "เอ็นดับเบิลยูจี" (NWG : NECTEC E-mail Working Group) โดยการดูแลของเนคเทค และได้จัดตั้งเครือข่ายชื่อว่า "ไทยสาร" (ThaiSarn : Thai Social/Scientific Academic and Research Network) เพื่อการติดต่อสื่อสารและแลกเปลี่ยนข้อมูลข่าวสารระหว่างกัน โดยเริ่มแรกประกอบด้วยสถาบันการศึกษา 8 แห่ง ปัจจุบันเครือข่ายไทยสารเชื่อมโยงกับสถาบันต่างๆ กว่า 30 แห่ง ทั้งสถาบันการศึกษาและหน่วยงานของรัฐ

เต่ากาลาปากอส

เต่ากาลาปากอส from ACR

Black Hole

Black hole from ACR

คำสั่งการเเทรกรูปภาพ

คำสั่งการเเทรกรูปภาพ

สำหรับในการแทรกรูปภาพบนหน้าเว็บเพจนั้นสามารถทำได้ง่ายๆ ด้วยการระบุคำสั่ง <IMG SRC="ชื่อรูปภาพ">ดังตัวอย่างนี้จะเป็นการแทรกรูปภาพทั้งเป้นพื้นหลังและในหน้าเว็บเพจ

<html>       <head>           <title>               Insert Images : การแทรกภาพ           </title>       </head>       <body background="bgimage.gif">             ข้อความที่แสดงในส่วนเนื้อหา             <img src="kerokero.gif">       </body> </html>

ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ ข้อความที่แสดงในส่วนเนื้อหา

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

<html>       <head>           <title>               Insert Images : การกำหนดขนาดภาพ           </title>       </head>       <body>             แสดงการกำหนดขนาดภาพ<br>             <img src="daffy.gif"><br>             <img src="daffy.gif" width="50" height="51"><br>             <img src="daffy.gif" width="150" height="153"><br>       </body> </html>

ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ แสดงการกำหนดขนาดภาพ

การจัดวางตำแหน่งรูปภาพจะใช้คำสั่งเดียวกันกับการวางตำแหน่งตัวอักษร และยังสามารถกำหนดเส้นขอบรอบรูปภาพ ด้วยการเพิ่มคำสั่งคุณสมบัติเส้นขอบ border ต่อจากชื่อรูปภาพได้ดังตัวอย่าง

<html>       <head>           <title>               Insert Images : ตำแหน่งและเส้นขอบรูปภาพ           </title>       </head>       <body>             <div align="center">              ตำแหน่งและเส้นขอบรูปภาพ<br>               <img src="kerokero.gif" border="3">             </div>       </body> </html>

ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ ตำแหน่งและเส้นขอบรูปภาพ

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

<img src="kerokero.gif" border="3" alt="รูปกบ kero">

END : สรุปคำสั่งที่ใช้ในบทนี้

TAGS รายละเอียด <br> <p> ... </p> คำสั่งกำหนดการตัดคำขึ้นบรรทัดใหม่ ณ ตำแหน่งที่แทรกคำสั่งนี้ <br> คำสั่งกำหนดย่อหน้าข้อความ (จะเว้นบรรทัดทั้งก่อนหน้าและหลังย่อหน้านั้น 1 บรรทัด) &nbsp; การแทรกช่องว่างมากกว่า 1 เคาะวรรคด้วยการแทรกชุดอักขระพิเศษนี้แทน (1 ชุดแทน 1 เคาะวรรค) <blockqoute> , <p style="text-indent:x"> การกำหนดการเยื้องข้อความให้ห่างจากขอบทั้งซ้ายและขวา การเยื้องย่อหน้าในบรรทัดแรก x เป็นตัวเลขระบุหน่วยพิกเซล แสดงผลได้ดีใน IE บราวเซอร์อื่นอาจเพี้ยนได้ สามารถใช้การแทรกอักขระพิเศษ (ชุดอักษรว่าง) ตามจำนวนเคาะวรรคที่ต้องการเยื้องแทนได้ <div align="left/center/right"> การกำหนดการจัดวางตำแหน่งของข้อความหรือรูปภาพ ค่าปกติคือซ้าย <img src="name"> คำสั่งการแทรกรูปภาพในตำแหน่งต่างๆ name คือชื่อรูปภาพชนิด JPG, GIF, PNG

ใบงาน HTML

ให้สรุปคำสั่ง HTML มา 5 คำสั่ง


1.<HTML>.....</HTML> คือ คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง</HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม


2.<HEAD>.....</HEAD> คือ คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน


3.<TITLE>.....</TITLE> คือ คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar


4.<BODY>.....</BODY> คือ คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น

5.<br> คือ คำสั่งขึ้นบรรทัดใหม่

ใบงานที่6

1.หลักการเขียนภาษาคอมพิวเตอร์ หมายถึงอะไร
ตอบ 

ขั้นตอนการเขียนโปรแกรมหรือพัฒนาโปรแกรม มีขั้นตอนโดยสังเขปดังนี้
การวิเคราะห์ปัญหาและความต้องการ (Problem Analysis and Requirement Analysis)
การกำหนดและคุณสมบัติของโปรแกรม (Specification)

• การออกแบบ (Design)
• การเขียนรหัสโปรแกรม (Coding)
• การคอมไพล์ (Compilation)
• การทดสอบการทำงานของโปรแกรม (Testing)
• การจัดทำเอกสาร (Documentation)
• การเชื่อมต่อ (Integration)
• การบำรุงรักษา (Maintenance)

1.การวิเคราะห์ปัญหาและความต้องการ (Problem Analysis and Requirement Analysis)

เป็นการแยกแยะรายละเอียดของปัญหาและความต้องการออกเป็นส่วนย่อยๆ ให้ครอบคลุมการทำงานของโปรแกรมที่ต้องการเขียนทั้งหมด เพื่อให้เห็นถึงองค์ประกอบ ความสัมพันธ์ ความต้องการ และแนวทางการแก้ปัญหาที่ถูกต้องอย่างครบถ้วน

2.การออกแบบ (Design)
เป็นการออกแบบวิธีการแก้ปัญหา โดยการกำหนดขั้นตอน ทิศทาง รูปแบบการทำงานของโปรแกรม ผลลัพธ์ของโปรแกรม วิธีการประมวลผลและสูตรสมการต่างๆ การนำเข้าข้อมูล การกำหนดตัวแปรให้สอดคล้องกับข้อมูล การเลือกใช้โปรแกรมภาษา ทั้งนี้เพื่อให้การทำงานของโปรแกรมเป็นไปอย่างถูกต้อง และมีประสิทธิภาพมากที่สุด การออกแบบสามารถทำได้หลายวิธี แต่วิธีที่ได้รับความนิยมได้แก่ การเขียนขั้นตอนวิธี (Algorithms) การเขียนผังงาน (Flowcharts) และการเขียนรหัสลำลอง (Pseudo Code)

3.การเขียนรหัสโปรแกรม (Coding)

เป็นการเขียนรหัสโปรแกรมลงในโปรแกรมภาษาที่เลือกไว้ ตามวิธีการที่ได้ออกแบบไว้แล้ว โดยใช้คอมพิวเตอร์ที่ทำการติดตั้งโปรแกรมภาษาเอาไว้พร้อมที่จะทำการลงรหัสโปรแกรมและทดสอบความถูกต้องของโปรแกรม
4.การทดสอบการทำงานของโปรแกรม (Testing)

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

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

3.ตัวอย่างโปรเเกรมคอมพิวเตอร์ที่เขียนด้วยภาษาคอมพิวเตอร์ 1 โปรเเกรม
ตอบ notepad