ใบงานที่ 2
คำสั่ง ที่ 1 ดาวน์โหลดไฟล์บีบอัด จาก ใบงานที่ 2 ขยายไฟล์ลงในโฟลเตอร์ /home/document
ข้อ 1.
เปิดไฟล์ /home/document/job2/index.html ด้วยโปรแกรมเบาวน์เซอร์
เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 1 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา
2. ข้อผิดพลาดที่พบ
ข้อ 2. เปิดไฟล์ /home/document/html/index.html ด้วยโปรแกรมแก้ไขข้อความ เขียนอธิบายคำสั่งการทำงานที่ Blogger
อธิบายคำสังโปรแกรม
1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. </head>
- ปิดคำสั่ง head
6. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
7. <h1 style="color:blue;">ข้อมูลนักศึกษา</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่พร้อมใส่สีตัวอักษรเป็นสีฟ้า
8. <div style="background-color:CornflowerBlue;
width:70%;">
- เป็นองค์ประกอบระดับบล็อกทำการเปลี่ยนสีพื้นหลังให้เป็นสีบัวบกสีฟ้า กว้าง 70 %
9. กรอบข้อมูลที่ 1
- แสดงข้อความ "กรอบข้อมูลที่ 1"
10. <br>
- แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด
11. <img src=me.jpeg>
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
12. <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
13. 6031280100
- แสดงข้อความ "6031280100"
14. <h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
15. นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
16. <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
17. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
18. </div>
- ปิดคำสั่ง div
19. <div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีผ้าไหมข้าวโพดสีข้อความสีแดงกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px
20. กรอบข้อมูลที่ 2
- แสดงข้อความ "กรอบข้อมูลที่ 2"
21. <br>
- แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด
22. <h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
23. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์
65000</p>
- องค์ประกอบกำหนดย่อหน้า
24. </div>
- ปิดคำสั่ง div
25. </body>
- ปิดคำสั่ง body
26. </html>
- ปิดคำสั่ง html
คำสั่งที่ 2 ปรับปรุงให้เว็บเพจแสดงกรอบข้อมูลที่ 1 ในลักษณะเดียวกับกรอบข้อมูลที่ 2
ข้อ 1. เปิดเอกสารเว็บเพจที่แก้ไขแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 2 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา
2. ข้อผิดพลาดที่พบ การจัดเรียงข้อมูลไม่เหมาะสม
<div style="background-color:CornflowerBlue;
width:70%;">
เป็น
<div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
ข้อ 2. เขียนอธิบายคำสั่งในเอกสารเว็บเพจที่แก้ไขแล้ว
อธิบายคำสังโปรแกรม
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. </head>
- ปิดคำสั่ง head
6. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
7. <h1 style="color:blue;">ข้อมูลนักศึกษา</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่พร้อมใส่สีตัวอักษรเป็นสีฟ้า
8. <div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีผ้าไหมข้าวโพดสีข้อความสีแดงกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px
9. กรอบข้อมูลที่ 1
- แสดงข้อความ "กรอบข้อมูลที่ 1"
10. <br>
- แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด
11. <img src=me.jpeg>
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
12. <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
13. 6031280100
- แสดงข้อความ "6031280100"
14. <h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
15. นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
16. <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
17. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
18. </div>
- ปิดคำสั่ง div
19. <div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีผ้าไหมข้าวโพดสีข้อความสีแดงกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px
20. กรอบข้อมูลที่ 2
- แสดงข้อความ "กรอบข้อมูลที่ 2"
21. <br>
- แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด
22. <h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
23. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์
65000</p>
- องค์ประกอบกำหนดย่อหน้า
24. </div>
- ปิดคำสั่ง div
25. </body>
- ปิดคำสั่ง body
26. </html>
- ปิดคำสั่ง html
คำสั่งที่ 3 สร้างเว็บเพจตามแบบตัวอย่างแต่ใช้ข้อมูลจริงของนักเรียน
ข้อ 1.
เปิดเอกสารเว็บเพจที่นักเรียนสร้างแล้วด้วยโปรแกรมเบาวน์เซอร์
เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 3 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา
2. ข้อผิดพลาดที่พบ การจัดเรียงข้อมูลไม่เหมาะสม
<style>
img {
border-radius: 8px;
border: 5px solid Black;
}
</style> และเปลี่ยนสีตามที่ต้องการ
ข้อ 2. เขียนอธิบายคำสั่งในเอกสารเว็บเพจที่แก้ไขแล้ว
อธิบายคำสังโปรแกรม
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. <style>
img {
border-radius: 8px;
border: 5px solid Black;
}
</style>
- กำหนดรูปแบบของรูปให้มีรัศมี 8px ขอบหนา 5px เป็นเส้นสีดำ
6. </head>
- ปิดคำสั่ง head
7. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
8. <h1 style="background-color: beige;
color: tomato;
width: 300px;
border: 5px solid Black;
padding: 25px;
margin: 25px;
text-align: center;">ข้อมูลนักศึกษา</h1>
- เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีเหลืองสว่างสีข้อความสีแดงมะเขือเทศกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px ให้ข้อความอยู่ตรงกลาง
9. <div style="background-color: beige;
color: tomato;
width: 300px;
border: 5px solid Black;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีเหลืองสว่างสีข้อความสีแดงมะเขือเทศกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px
10. <br>
- แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด
11. <img src=non.jpg alt="non" width=300px>
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้ กว้าง 300 px
12. <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
13. 5931280003
- แสดงข้อความ "5931280003"
14. <h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
15. นายนนทวัฒน์ ชมหอม
- แสดงข้อความ "นายนนทวัฒน์ ชมหอม"
16. <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
17. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
18. </div>
- ปิดคำสั่ง div
19. <div style="background-color: beige;
color: tomato;
width: 300px;
border: 5px solid Black;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีเหลืองสว่างสีข้อความสีแดงมะเขือเทศกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px
20. <br>
- แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด
21. <h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
22. <p>เลขที่ 777/22 หมู่ 9 ถนนมิตรภาพ 16 ตำบลอรัญญิก อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
- องค์ประกอบกำหนดย่อหน้า
23. </div>
- ปิดคำสั่ง div
24. </body>
- ปิดคำสั่ง body
25. </html>
- ปิดคำสั่ง html
