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

เต่ากาลาปากอส 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 การเขียนรหัสจำลองจะต้องมีการวางแผนสำหรับการอ้างอิงถึงข้อมูลต่างๆ
ที่จะใช้ในโปรแกรมด้วยการสร้างตัวแปร โดยใช้เครื่องหมายเท่ากับ (=) แทนการกำหนดค่าให้กำหนด
ตัวแปรนั้นๆ