โครงงาน เรื่อง EM Ball

http://emballnight.blogspot.com/

ประโยชน์ที่ได้รับจากการทำโครงงาน

1.ได้ทดลองการทำโครงงานตามความสนใจ

2.ฝึกความสามัคคีภายในกลุ่ม

3.เสริมสร้างความรับผิดชอบต่อหน้าที่ของตนเอง

4.ได้ศึกษาหาความรู้ในเชิงลึกเเละลงมือทำจริง

5.เกิดความคิดสร้างสรรค์

EM Ball

Em ball By ACR 58 from Channarong_13383

EM Ball

EM Ball

http://emballnight.blogspot.com/

คำศัพท์เรื่องทรัพย์สินทางปัญญา (Intellectual Property)

คำศัพท์เรื่องทรัพย์สินทางปัญญา

Imprisonment               การจำคุก
Intellectual Property      ทรัพย์สินทางปัญญา
Department                  กรม
Information                  ข้อมูล
Technology                   เทคโนโลยี
Distribution                   การจัดจำหน่าย
Science                         วิทยาศาสตร์
Communication             การสื่อสาร
Commerce                    พาณิชย์
Education                      การศึกษา
Ministry                         กระทรวง
Invalide                         คำสั่งที่คอมพิวเตอร์ปฏิบัติตามไม่ได้ 
wisdom                         ภูมิปัญญา
mathematical                คณิตศาสตร์
picture                          ภาพ
symbols                       สัญลักษณ์
owners                         เจ้าของ
machinery                    เครื่องจักรกล
related contributions    ผลงานที่เกี่ยวข้อง
advertising                   การโฆษณา

เว็บไซต์เพื่อการศึกษา

คอมพิวเตอร์ช่วยสอน Thai wbi1 from ACR

โครงงานคอมพิวเตอร์

525 from ACR

สรุปขั้นตอนการเเนบไฟล์ในบล็อก

1.สร้างไฟล์ต้นฉบับ Micrsoft Word
2.โหลดโปรเเกรมเเปลงไฟล์จาก Word เป็น pdf 
3.ทำการเเปลงไฟล์ Micrsoft Word ที่เราเลือกให้เป็นไฟล์ pdf เเละเหลือไฟล์ต้นฉบับไว้

4.เข้าไปในเว็บ http://www.slideshare.net/เเล้วกดLogin

5.กดอัพโหลด ไฟล์มุมขวาบน เเล้วจะถูกนำไปอีกหน้าเเล้วกดอัพโหลดตรงกลาง ให้เลือกไฟลบ์pdfที่เตรียมไว้

6.ทำการใส่ข้อมูลของไฟล์ ให้ครบ  เเล้วกด Save and Continue

7.กดที่ View Presentation 

8.กดที่เครื่องหมาย <> (Embed this document)

9.คัดลอกcodeตรงข้างล่าง Embed

10.เข้ามาในblogger

11.กดที่เครื่องหมายดินสอสีส้ม เพื่อเขียนโพสต์ใหม่

12.กดที่ซ้ายมือ คำว่า HTML

13.นำcodeคัดลอกมาจากข้อ9. มาวาง

14.กดที่คำว่า เขียน ซึ่งอยู่ข้างๆคำว่าHTML

15.กดเผยเเพร่ซึ่งอยู่ทางขวามือ

ใบงานที่4

ใบที่4 from ACR

ใบงานที่3 Firefox

Firefox

ประวัติ

       โครงการไฟร์ฟอกซ์ริเริ่มโดย เดฟ ไฮแอตต์ และ เบลก รอสส์ จากแนวความคิดการสร้างซอฟต์แวร์แยกย่อยมาจากโครงการมอซิลลา โดยตั้งใจพัฒนาโปรแกรมเดี่ยวที่ทำงานมุ่งเน้นสำหรับเป็นเว็บเบราว์เซอร์แยก ออกมาจากโปรแกรมชุดมอซิลลา (Mozilla Suite) โดยในวันที่ 3 เมษายน พ.ศ. 2546 มูลนิธิมอซิลลาได้ประกาศแผนการพัฒนามุ่งเน้นไปที่ไฟร์ฟอกซ์และทัน เดอร์เบิร์ดแทนที่โปรแกรมชุดมอซิลลา    ชื่อโครงการได้มีการเปลี่ยนชื่อ หลายครั้งกว่าจะมาเป็นไฟร์ฟอกซ์ ซึ่งเริ่มต้นที่ชื่อ "ฟีนิกซ์" (Phoenix) ต่อมาได้ถูกเปลี่ยนภายหลังจากมีปัญหาในด้านเครื่องหมายการค้ากับบริษัท ฟีนิกซ์เทคโนโลยีผู้ผลิตคอมพิวเตอร์ไบออส โดยเปลี่ยนมาเป็นชื่อ"ไฟร์เบิร์ด" (Firebird) และอีกครั้งได้มีปัญหาชื่อซ้ำซ้อนกับระบบจัดการฐานข้อมูลไฟร์เบิร์ด และในวันที่ 9 กุมภาพันธ์ พ.ศ. 2547 ทางมูลนิธิมอซิลลาได้เปลี่ยนชื่ออีกครั้งมาเป็น "ไฟร์ฟอกซ์" (Firefox) โดยใช้ชื่อย่อว่า Fx หรือ fx

                ไฟร์ฟอกซ์ 1.0 ได้เปิดให้ใช้งานอย่างเป็นทางการเมื่อวันที่ 9 พฤศจิกายน พ.ศ.2547 โดยระหว่างนั้นได้มีการปรับแก้ตลอดเวลารวมถึงเพิ่มระบบความปลอดภัยให้กับตัว ซอฟต์แวร์ โดยรุ่นถัดมาคือ ไฟร์ฟอกซ์ 1.5 ที่ออกมาเมื่อ 29 พฤศจิกายน พ.ศ. 2548และตามมาด้วย ไฟร์ฟอกซ์ 2 เมื่อวันที่ 24 ตุลาคม พ.ศ. 2549 ซึ่งในปัจจุบันไฟร์ฟอกซ์ 3กำลังอยู่ในขั้นทดสอบ
             
                 ผู้นำโครงการ ปัจจุบันคือ เบน กูดเจอร์ (Ben Goodger - ปัจจุบันเป็นพนักงานของกูเกิล แต่ยังคงทำหน้าที่นี้อยู่) ปัจจุบันมีผู้ดาวน์โหลดไปมากกว่า 100 ล้านชุด และปริมาณการใช้ในแถบยุโรปสูงขึ้นอย่างเห็นได้ชัด โดยเฉพาะอย่างยิ่งในประเทศฟินแลนด์

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

การตั้งเว็บไซต์เดียวเป็นหน้าแรก

1.เปิดเว็บไซต์ที่คุณอยากตั้งให้เป็นหน้าเริ่มต้นของคุณ
2.คลิกไอคอนที่อยู่ทางด้านซ้ายของที่อยู่เว็บค้างไว้ แล้วลากมาที่ปุ่มรูปบ้านแล้วปล่อย
3.คลิก ใช่ เพื่อตั้งเว็บไซต์นี้เป็นหน้าเริ่มต้น

ตั้งค่าเว็บไซต์หลายๆ เว็บไซต์เป็นหน้าแรก

1.เปิดหน้าต่างโปรแกรมใหม่ขึ้นมา และเปิดเว็บไซต์แรกที่คุณอยากตั้งเป็นหน้าแรก
2.คลิกที่ปุ่มเปิดแท็บใหม่และเปิดเว็บไซต์ต่อไปที่คุณอยากให้เป็นส่วนหนึ่งที่อยู่ในกลุ่มหน้าแรก
ทำซ้ำไปเรื่อยๆ จนกระทั่งเปิดเว็บไซต์ที่คุณต้องการครบแล้ว
3.คลิกปุ่มเมนู New Fx Menu และเลือก ตัวเลือก
4.คลิกที่แผง ทั่วไป (Main ใน Firefox 3.5)
5.คลิกที่ ใช้หน้าปัจจุบัน 
6.คลิก ตกลง เพื่อปิดหน้าต่าง ตัวเลือก

กู้คืนหน้าเริ่มต้นเดิม

1.คลิกปุ่มเมนู New Fx Menu และเลือก ตัวเลือก
2.คลิกที่แผง ทั่วไป (Main ใน Firefox 3.5)
3.ในกล่องเริ่มการทำงานคลิก คืนสู่ค่าปริยาย 
ตั้งค่าว่าให้เปิดเว็บไหนเมื่อเริ่ม Firefox
คลิกปุ่มเมนู New Fx Menu และเลือก ตัวเลือก
คลิกที่แผง ทั่วไป (Main ใน Firefox 3.5)
ในกล่องเริ่มการทำงาน คลิกที่เมนูรายการที่อยู่ใกล้กับ "เมื่อ Firefox เริ่ม:" และเลือกว่าจะให้ Firefox แสดงอะไรเมื่อเปิดขึ้นมา
---แสดงหน้าแรก - แสดงหน้าแรกเมื่อเปิดขึ้นมา (หน้าแรกหน้าเดียว หรือ หลายหน้าก็แล้วแต่ที่คุณตั้ง).
---แสดงหน้าว่าง - แสดงหน้าตาที่ว่างโล่ง ไม่มีอะไร (โหลดเร็วที่สุด – ไม่ต้องเสียเวลาโหลดหลายแท็บ).
---แสดงหน้าต่างและแท็บจากครั้งก่อน - เปิดเว็บที่คุณเข้าชมล่าสุดจากการใช้ Firefox ครั้งล่าสุด ดังนั้นจึงสามารถดำเนินการต่อจากที่ค้างไว้ได้ ข้อมูลเพิ่มเติมดูได้ที่ Restore previous session - Configure when Firefox shows your most recent tabs and windows
4.คลิก ตกลง เพื่อปิดหน้าต่าง ตัวเลือก

อ้างอิงจาก : http://nipaporn106.blogspot.com/2012/09/mozilla-firefox.html ,

https://support.mozilla.org/th/kb/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%95%E0%B8%B1%E0%B9%89%E0%B8%87%E0%B8%84%E0%B9%88%E0%B8%B2%E0%B8%AB%E0%B8%99%E0%B9%89%E0%B8%B2%E0%B9%80%E0%B8%A3%E0%B8%B4%E0%B9%88%E0%B8%A1%E0%B8%95%E0%B9%89%E0%B8%99

ใบงานที่ 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

ใบงานที่5

การเขียนผังงาน (Flowchart)
1.ความหมายของการเขียนผังงาน
ตอบ รูปภาพ (Image) หรือสัญลักษณ์(Symbol) ที่ใช้เขียนแทนขั้นตอน คำอธิบาย ข้อความ หรือคำพูด ที่ใช้ในอัลกอริทึม (Algorithm) เพราะการนำเสนอขั้นตอนของงานให้เข้าใจตรงกัน ระหว่างผู้เกี่ยวข้อง ด้วยคำพูด หรือข้อความทำได้ยากกว่า

2.สัญลักษณ์ที่ใช้ในการเขียนผังงาน

ตอบ 

3.การเขียนผังงาน /ตัวอย่าง

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

รูปแบบการเขียนโปรแกรมที่ง่ายที่สุดคือ เขียนให้ทำงานจากบนลงล่าง เขียนคำสั่งเป็นบรรทัด และ

ทำทีละบรรทัดจากบรรทัดบนสุดลงไปจนถึงบรรทัดล่างสุด สมมติให้มีการทำงาน 3 กระบวนการคือ อ่านข้อมูล คำนวณ และพิมพ์ 

2. การเลือกกระทำตามเงื่อนไข
(Decision or Selection)การตัดสินใจ หรือเลือกเงื่อนไขคือ เขียนโปรแกรมเพื่อนำค่าไปเลือกกระทำ โดยปกติจะมีเหตุการณ์ให้ทำ 2 กระบวนการ คือเงื่อนไขเป็นจริงจะกระทำกระบวนการหนึ่ง และเป็นเท็จจะกระทำอีกกระบวนการหนึ่ง แต่ถ้าซับซ้อนมากขึ้น จะต้องใช้เงื่อนไขหลายชั้น เช่นการตัดเกรดนักศึกษา เป็นต้น ตัวอย่างผังงานนี้ จะแสดงผลการเลือกอย่างง่าย เพื่อกระทำกระบวนการเพียงกระบวนการเดียว 

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

ใบงานที่4

ให้นักเรียนตอบปัญหาต่อไปนี้

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

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

3.การเขียนรหัสจำลองทำอย่างไร
ตอบ รหัสลำลองหรือ pseudocode เป็นคำบรรยายที่เขียนแสดงขั้นตอนวิธี(algorithm) ของการเขียนโปรแกรม โดยใช้ภาษาที่กะทัดรัด สื่อสารกับโปรแกรมเมอร์ผู้เขียนโปรแกรม โดยอาจใช้ภาษาที่ใช้ทั่วไปและอาจมีภาษาที่ใช้ในการเขียนโปรแกรมประกอบ แต่ไม่มีมาตรฐานแน่นอนในการเขียน pseudocode และไม่สามารถนำไปทำงานบนคอมพิวเตอร์โดยตรง(เพราะไม่ใช่คำสั่งในภาษาคอมพิวเตอร์) และไม่ขึ้นกับภาษาคอมพิวเตอร์ภาษาใดภาษาหนึ่ง นิยมใช้ pseudocode แสดง algorithmมากกว่าใช้ผังงาน เพราะผังงานอาจไม่แสดงรายละเอียดมากนักและใช้สัญลักษณ์ซึ่ง
ทำให้ไม่สะดวกในการเขียน เช่นโปรแกรมใหญ่ ๆ มักจะประกอบด้วยคำสั่งต่างๆที่ใกล้เคียงกับภาษาคอมพิวเตอร์ที่ใช้ในการเขียนโปรแกรมจริงๆ เช่น begin…end, if…else, do…while, while, for, read และ print การเขียนรหัสจำลองจะต้องมีการวางแผนสำหรับการอ้างอิงถึงข้อมูลต่างๆ
ที่จะใช้ในโปรแกรมด้วยการสร้างตัวแปร โดยใช้เครื่องหมายเท่ากับ (=) แทนการกำหนดค่าให้กำหนด
ตัวแปรนั้นๆ

ใบงานที่3

กระบวนการเทคโนโลยีสารสนเทศ

1. ความหมายของกระบวนการเทคโนโลยีสารสนเทศ

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

2.กระบวนการเทคโนโลยีสารสนเทศมีกี่ขั้นตอนอะไรบ้าง

ตอบ 6 ขั้นตอน

1.การรวบรวมข้อมูล

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

2.การตรวจสอบข้อมูล
ขั้นตอนการตรวจสอบข้อมูลในลักษณะต่างๆ เช่น การตรวจสอบ เพื่อหาข้อผิดพลาดความน่าเชื่อถือความสมเหตุสมผลเพื่อให้มีความมั่นใจได้ว่าข้อมูลที่ได้รับการรวบรวมและบันทึกไว้อย่างถูกต้อง

3.การประมวลผลข้อมูล
หมายถึง วิธีการดำเนินการกระทำข้อมูลให้เป็นสารสนเทศข้อมูล

4.การจัดเก็บข้อมูล
การเก็บรักษาข้อมูลเพื่อการบริหาร โดยเก็บไว้ในรูปแบบต่างๆ

5.การคิดวิเคราะห์

ขั้นตอนการดำเนินการ เพื่อสรุปความสำคัญของข้อมูลสารสนเทศให้ตรงสภาพที่เป็นจริงตรงตามวัตถุประสงค์ก่อนที่จะนำข้อมูลมาใช้

6.การนำข้อมูลไปใช้

การนำข้อมูลไปใช้ในลักษณะต่างๆ

3.ประโยชน์ของการเเก้ไขปัญหาด้วยกระบวนการเทคโนโลยีสารสนเทศ
ตอบ
1. ใช้ในการวางแผนการบริหาร
2. ใช้ประกอบการตัดสินใจ
3. ใช้ในการควบคุมสถานการณ์ หรือเหตุการณ์ที่เกิดขึ้น
4. เพื่อให้การบริหารงานมีระบบ ลดความซ้ำซ้อน

ใบงานที่2

1.ภาษาคอมพิวเตอร์ หมายถึง

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

2.ภาษาคอมพิวเตอร์ มีกี่ระดับ อะไรบ้าง
ตอบ   เเบ่งเป็น 3 ระดับ   ได้เเก่ 1. ภาษาระดับสูง 2. ภาษาระดับกลาง 3. ภาษาระดับต่ำ

3.จงเขียนชื่อภาษาคอมพิวเตอร์มา 5 ชื่อ
ตอบ   

• ภาษาโปรแกรม
• ภาษาสคริปต์
• ภาษามาร์กอัป
• ภาษาสอบถาม
• Transformation language

ใบงานที่1

จงตอบคำถามต่อไปนี้

1.ภาษาHTMLหมายถึงอะไร

ตอบ    HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเอง

2.โปรเเกรมที่ใช้ในการสร้างเว็บเพจด้วยภาษาHTMLมีโปรเเกรมใดบ้าง ยกตัวอย่างมา 2 โปรเเกรม

ตอบ   1. Text   Editor 

           2. Notepad

 นาย พลอธิป   พิศภา  ชั้น ม.5/3   เลขที่ 16

เกิดเมื่อ : วันที่ 19 ธันวาคม พ.ศ. 2541

• อายุ : 17 ปี    
• เลือดกรุ๊ป : B    
• สัญชาติไทย       
• เชื้อชาติ : ไทย    
• เพศ : ชาย  
• ศาสนา : พุทธ
• โรงเรียน : อัสสัมชัญระยอง   
• สายการเรียน : วิทย์-คณิต