ใบงานที่ 2 HTMLStyles
1. ดาวน์โหลดไฟล์บีบอัดจาก ใบงานที่ 2 ขยายไฟล์ลงในโฟลเตอร์ /home/document
รูปภาพที่ 1 ผลการทำงานของโปรแกรม
1.1 บรรยายการทำงานของโปรแกรม
1.1.1 การทำงานของโปรแกรม คือ เป็นเว็บเพจแสงแดงข้อมูลนักศึกษา
1.1.2
ข้อผิดพลาดที่พบ
คือ จัดไม่ค่อยเป็นระเบียบสวยงาม
1.1.3
แนวทางแก้ไข
คือ ทำการแก้ไขโค๊ตของเว็บเพจนี้1.2 อธิบายคำสังโปรแกรม
1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบเป็นภาชนะสำหรับข้อมูลเมตา
4. <meta charset=utf-8>
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. </head>
- ปิดคำสั่ง head
6. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
7. <h1 style="color:blue;">ข้อมูลนักศึกษา</h1>
5. </head>
- ปิดคำสั่ง head
6. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
7. <h1 style="color:blue;">ข้อมูลนักศึกษา</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
8. <div style="background-color:CornflowerBlue;
width: 70%">
8. <div style="background-color:CornflowerBlue;
width: 70%">
- เป็นองค์ประกอบระดับบล็อก
9. กรอบข้อมูลที่ 1
9. กรอบข้อมูลที่ 1
- แสดงข้อความ "กรอบข้อมูลที่ 1"
10. <br><img src=me.jpeg>
- องค์ประกอบกำหนดเส้นแบ่ง
11. <h2>รหัสนักศึกษา</h2>
10. <br><img src=me.jpeg>
- องค์ประกอบกำหนดเส้นแบ่ง
11. <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
12. 6031280100
- แสดงข้อความ "6031280100"
12. 6031280100
- แสดงข้อความ "6031280100"
13. <h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
14. นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
15. <h2>สาขาวิชา</h2>
14. นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
15. <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
16. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
17. </div>
16. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
17. </div>
- ปิดคำสั่ง div
18. <div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
18. <div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกและการตั้งค่าต่างๆในบล็อกนี้
19. กรอบข้อมูลที่ 2
19. กรอบข้อมูลที่ 2
- แสดงข้อความ "กรอบข้อมูลที่ 2"
20. <br>
20. <br>
- องค์ประกอบกำหนดเส้นแบ่ง
21. <h2>ที่อยู่</h2>
21. <h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
22. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
22. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
23. </div>
- ปิดคำสั่ง div
24. </body>
24. </body>
- ปิดคำสั่ง Body
25. </html>
25. </html>
- ปิดคำสั่ง html
________________________________________________________________________
2. ปรับปรุงให้เว็บเพจแสดงกรอบข้อมูลที่ 1 ในลักษณะเดียวกับกรอบข้อมูลที่ 2
รูปภาพที่ 2 ผลการทำงานของโปรแกรม
2.1 บรรยายการทำงานของโปรแกรม
2.1.1 การทำงานของโปรแกรม คือ เป็นเว็บเพจแสงแดงข้อมูลนักศึกษา
2.1.2
ข้อผิดพลาดที่พบ
คือ จัดไม่ค่อยเป็นระเบียบสวยงาม
2.1.3
แนวทางแก้ไข
คือ ทำการแก้ไขโค๊ตของเว็บเพจนี้
<div style="background-color:Cornsilk; 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.2 อธิบายคำสังโปรแกรม
23. </div>
1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบเป็นภาชนะสำหรับข้อมูลเมตา
4. <meta charset=utf-8>
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. </head>
- ปิดคำสั่ง head
6. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
7. <h1 style="color:blue;">ข้อมูลนักศึกษา</h1>
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;">
8. <div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกและการตั้งค่าต่างๆในบล็อกนี้
9. กรอบข้อมูลที่ 1
9. กรอบข้อมูลที่ 1
- แสดงข้อความ "กรอบข้อมูลที่ 1"
10. <br><img src=me.jpeg>
- องค์ประกอบกำหนดเส้นแบ่ง
11. <h2>รหัสนักศึกษา</h2>
10. <br><img src=me.jpeg>
- องค์ประกอบกำหนดเส้นแบ่ง
11. <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
12. 6031280100
- แสดงข้อความ "6031280100"
12. 6031280100
- แสดงข้อความ "6031280100"
13. <h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
14. นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
15. <h2>สาขาวิชา</h2>
14. นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
15. <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
16. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
17. </div>
16. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
17. </div>
- ปิดคำสั่ง div
18. <div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
18. <div style="background-color:Cornsilk;
color:DarkRed;
width: 300px;
border: 5px solid red;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกและการตั้งค่าต่างๆในบล็อกนี้
19. กรอบข้อมูลที่ 2
19. กรอบข้อมูลที่ 2
- แสดงข้อความ "กรอบข้อมูลที่ 2"
20. <br>
20. <br>
- องค์ประกอบกำหนดเส้นแบ่ง
21. <h2>ที่อยู่</h2>
21. <h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
22. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
22. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
23. </div>
- ปิดคำสั่ง div
24. </body>
24. </body>
- ปิดคำสั่ง Body
25. </html>
25. </html>
- ปิดคำสั่ง html
________________________________________________________________________
3. สร้างเว็บเพจตามแบบตัวอย่างแต่ใช้ข้อมูลจริงของนักเรียน
รูปภาพที่ 2 ผลการทำงานของโปรแกรม
3.1 บรรยายการทำงานของโปรแกรม
3.1.1 การทำงานของโปรแกรม คือ เป็นเว็บเพจแสงแดงข้อมูลนักศึกษา
3.2 อธิบายคำสังโปรแกรม
1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบเป็นภาชนะสำหรับข้อมูลเมตา
4. <meta charset=utf-8>
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. <style>
img {
border-radius: 8px;
border: 5px solid #cccccc;
}
img {
border-radius: 8px;
border: 5px solid #cccccc;
}
- การตั้งค่ารูปแบบขององค์ประกอบ
6. </style>
6. </style>
- ปิดคำสั่ง style
7. </head>
- ปิดคำสั่ง head
- ปิดคำสั่ง head
8. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
9. <div style="background-color:#33ffff;
color:#000000;
width: 310px;
border: 5px solid red;
border-radius: 15px;
padding: 25px;
margin: 25px;">
color:#000000;
width: 310px;
border: 5px solid red;
border-radius: 15px;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกและการตั้งค่าต่างๆในบล็อกนี้
10. <center><h1 style="color:blue;">ข้อมูลนักศึกษา</h1></center>
- องค์ประกอบกำหนดหัวข้อใหญ่
11.</div>
10. <center><h1 style="color:blue;">ข้อมูลนักศึกษา</h1></center>
- องค์ประกอบกำหนดหัวข้อใหญ่
11.</div>
- ปิดคำสั่ง div
12. <div style="background-color:#33ffff;
color:#000000;
width: 310px;
border: 5px solid red;
border-radius: 15px;
padding: 25px;
margin: 25px;">
color:#000000;
width: 310px;
border: 5px solid red;
border-radius: 15px;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกและการตั้งค่าต่างๆในบล็อกนี้
13. <center><img src=sun.jpg width=300px ></center>
- องค์ประกอบกำหนดเส้นแบ่ง
- องค์ประกอบกำหนดเส้นแบ่ง
14. <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
15. 5931280008
- แสดงข้อความ "5931280008"
- แสดงข้อความ "5931280008"
16. <h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
17. นายวชิรวิชญ์ อิ่มเกิด
- แสดงข้อความ "นายวชิรวิชญ์ อิ่มเกิด"
18. <h2>สาขาวิชา</h2>
- แสดงข้อความ "นายวชิรวิชญ์ อิ่มเกิด"
18. <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
19. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
19. เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
20. </div>
- ปิดคำสั่ง div
21. <div style="background-color:#cccccc;
color:#ff6600;
width: 310px;
border: 5px solid red;
border-radius: 15px;
padding: 25px;
margin: 25px;">
21. <div style="background-color:#cccccc;
color:#ff6600;
width: 310px;
border: 5px solid red;
border-radius: 15px;
padding: 25px;
margin: 25px;">
- เป็นองค์ประกอบระดับบล็อกและการตั้งค่าต่างๆในบล็อกนี้
22. <br>
22. <br>
- องค์ประกอบกำหนดเส้นแบ่ง
23. <h2>ที่อยู่</h2>
23. <h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
24. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
24. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
25. </div>
- ปิดคำสั่ง div
26. </body>
26. </body>
- ปิดคำสั่ง Body
27. </html>
27. </html>
- ปิดคำสั่ง html
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น