ใบงานที่ 4
ข้อ 1.
เปิดไฟล์ /home/document/job4/index.html ด้วยโปรแกรมเบาวน์เซอร์
เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 1 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ ใส่ข้อมูลและจะแสดงข้อมูลที่ URL
2. ข้อผิดพลาดที่พบ เมื่อกรอกข้อมูลไปแล้วมันแสดงที่ URL อาจทำให้โดนแฮ็คได้
ข้อ 2. เปิดไฟล์ /home/document/html/index.html ด้วยโปรแกรมแก้ไขข้อความ เขียนอธิบายคำสั่งการทำงานที่ Blogger
อธิบายคำสังโปรแกรม
1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. <style>
- ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้
6. form{
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
- สร้างฟอร์ม พื้นหลัง:สีดำ ตัวอักษร:สีขาว หางจากหน้าจอ 20 px 0 20 px 0 ขอบหนา 20 px
7. </style>
- ปิดคำสั่ง Style
8. </head>
- ปิดคำสั่ง head
9. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
10. <form action="index.html" method = get>
- ให้แสดงค่าที่ป้อนที่ URL ของเว็บไซด์
11. ชื่อ-นามสกุล:<br>
- แสดงข้อความ "ชื่อ-นามสกุล:" และ เว้น 1 บรรทัด
12. <input type="text" name="firstname" value="" size=30>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า firsrtname ทั้งหมด 30 ตัว
13. <br> - เว้น 1 บรรทัด
14. ที่อยู่:<br>
- แสดงข้อความ "ที่อยู่:" และ เว้น 1 บรรทัด
15. <input type="text" name="lastname" value="" size=60>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 60 ตัว
16. <br>
- เว้น 1 บรรทัด
17. โทรศัพท์ มือถือ:<br>
- แสดงข้อความ "โทรศัพท์ มือถือ:"และ เว้น 1 บรรทัด
18. <input type="text" name="lastname" value="" size=10>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 10 ตัว
19. <br><br>
- เว้น 2 บรรทัด
20. <input type="submit" value="Submit">
- ช่อง input รับประเภทแสดงผลลัพธ์
21. </form>
- ปิดคำสั่ง Form
22. <p>หมายเหตุ ตัวอย่างนี้ ยังไม่ได้นำข้อมูลไปดำเนินการอื่น ให้ทดลองและสังเกตที่ ช่อง urlเว็บเบาว์เซอร์ การวิธีส่งข้อมูล แบบ get และแบบ post</p>
- องค์ประกอบกำหนดย่อหน้า
23. </body>
- ปิดคำสั่ง Body
24. </html>
- ปิดคำสั่ง HTML
ข้อที่ 3. ทำลองกรอกข้อมูลส่งข้อมูล ดูผลลัพธ์ที่ช่อง url โปรแกรมเบราว์เซอร์ นำมาเขียนอธิบายการทำงานของเว็บเพจ ที่ Blogger
เมื่อกด submit จะส่งข้อมูลผ่าน url
คำสั่งที่ 2 ปรับปรุงให้เว็บเพจแสดงจากตัวอย่างให้ซ่อนข้อมูลลงทะเทียนในช่อง url และเพิ่มช่องกรอกข้อมูล เกี่ยวกับการศึกษา ประวัติการทำงาน งานอดิเรกและความสนใจพิเศษให้สมบูรณ์และมีการแสดงผลสวยงาม
ข้อ 1. เปิดเอกสารเว็บเพจที่แก้ไขแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 2 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
การทำงานของโปรแกรม คือ ใส่ข้อมูลและจะแสดงข้อมูลที่ URL
ข้อผิดพลาดที่พบ คือ
แก้ไขโปรแกรม คือ โดยดารเป็น get เป็น post ทำให้ไม่ส่งข้อมูลทาง url
ข้อ 2. เขียนอธิบายคำสั่งในเอกสารเว็บเพจที่แก้ไขแล้ว
อธิบายคำสังโปรแกรม
1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. <style>
- ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้
6. form{
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
- สร้างฟอร์ม พื้นหลัง:สีดำ ตัวอักษร:สีขาว หางจากหน้าจอ 20 px 0 20 px 0 ขอบหนา 20 px
7. </style>
- ปิดคำสั่ง Style
8. </head>
- ปิดคำสั่ง head
9. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
10. <form action="index.html" method = post>
- ไม่แสดงค่าที่ป้อนที่ URL ของเว็บไซด์
11. ชื่อ-นามสกุล:<br>
- แสดงข้อความ "ชื่อ-นามสกุล:" และ เว้น 1 บรรทัด
12. <input type="text" name="firstname" value="" size=30>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า firsrtname ทั้งหมด 30 ตัว
13. <br> - เว้น 1 บรรทัด
14. ที่อยู่:<br>
- แสดงข้อความ "ที่อยู่:" และ เว้น 1 บรรทัด
15. <input type="text" name="lastname" value="" size=60>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 60 ตัว
16. <br>
- เว้น 1 บรรทัด
17. โทรศัพท์ มือถือ:<br>
- แสดงข้อความ "โทรศัพท์ มือถือ:"และ เว้น 1 บรรทัด
18. <input type="text" name="lastname" value="" size=10>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 10 ตัว
19. <br><br>
- เว้น 2 บรรทัด
20. <input type="submit" value="Submit">
- ช่อง input รับประเภทแสดงผลลัพธ์
21. </form>
- ปิดคำสั่ง Form
22. <p>หมายเหตุ ตัวอย่างนี้ ยังไม่ได้นำข้อมูลไปดำเนินการอื่น ให้ทดลองและสังเกตที่ ช่อง urlเว็บเบาว์เซอร์ การวิธีส่งข้อมูล แบบ get และแบบ post</p>
- องค์ประกอบกำหนดย่อหน้า
23. </body>
- ปิดคำสั่ง Body
24. </html>
- ปิดคำสั่ง HTML
ข้อ 2. เขียนอธิบายคำสั่งในเอกสารเว็บเพจที่แก้ไขแล้ว
อธิบายคำสังโปรแกรม
1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. <style>
- ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้
6. form{
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
- สร้างฟอร์ม พื้นหลัง:สีดำ ตัวอักษร:สีขาว หางจากหน้าจอ 20 px 0 20 px 0 ขอบหนา 20 px
7. </style>
- ปิดคำสั่ง Style
8. </head>
- ปิดคำสั่ง head
9. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
10. <form action="index.html" method = post>
- ไม่แสดงค่าที่ป้อนที่ URL ของเว็บไซด์
11. ชื่อ-นามสกุล:<br>
- แสดงข้อความ "ชื่อ-นามสกุล:" และ เว้น 1 บรรทัด
12. <input type="text" name="firstname" value="" size=30>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า firsrtname ทั้งหมด 30 ตัว
13. <br> - เว้น 1 บรรทัด
14. ที่อยู่:<br>
- แสดงข้อความ "ที่อยู่:" และ เว้น 1 บรรทัด
15. <input type="text" name="lastname" value="" size=60>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 60 ตัว
16. <br>
- เว้น 1 บรรทัด
17. โทรศัพท์ มือถือ:<br>
- แสดงข้อความ "โทรศัพท์ มือถือ:"และ เว้น 1 บรรทัด
18. <input type="text" name="lastname" value="" size=10>
- ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 10 ตัว
19. <br><br>
- เว้น 2 บรรทัด
20. <input type="submit" value="Submit">
- ช่อง input รับประเภทแสดงผลลัพธ์
21. </form>
- ปิดคำสั่ง Form
22. <p>หมายเหตุ ตัวอย่างนี้ ยังไม่ได้นำข้อมูลไปดำเนินการอื่น ให้ทดลองและสังเกตที่ ช่อง urlเว็บเบาว์เซอร์ การวิธีส่งข้อมูล แบบ get และแบบ post</p>
- องค์ประกอบกำหนดย่อหน้า
23. </body>
- ปิดคำสั่ง Body
24. </html>
- ปิดคำสั่ง HTML
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น