ใบงานที่ 1 HTML Document
1. แก้ไขเอกสารเว็บเพจให้แสดงผลภาษาไทย
รูปภาพที่ 1 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1.1 การทำงานของโปรแกรม คือ เป็นเว็บเพจแสดงข้อความภาษาไทย
1.2 ข้อผิดพลาดที่พบ คือ เป็นภาษาต่างดาวอ่านไม่ออก
1.3 แนวทางแก้ไข คือแก้ไขหรือเพิ่มเติมโค๊ตที่ทำไห้เว็บเพจแสดงภาษาไทยได้ถูกต้อง
อธิบายคำสังโปรแกรม
1: <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2: <html>
2: <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3: <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
4: <h1>ข้อมูลนักศึกษา</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
5: <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
6: 6031280100
- แสดงข้อความ "6031280100"
7:<h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
8: นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
9: <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
10:เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
11:<h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
12:<p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
- องค์ประกอบกำหนดย่อหน้า
13:</body>
- ปิดคำสั่ง Body
14:</html>
- ปิดคำสั่ง html
________________________________________________________________________2. แก้ไขเอกสารเว็บเพจให้แสดงผลภาษาไทยอย่างถูกต้อง
รูปภาพที่ 2 ผลการทำงานของโปรแกรม
2.1 การทำงานของโปรแกรม คือ เป็นเว็บเพจแสดงข้อความภาษาไทย
2.2 ข้อผิดพลาดที่พบ คือ เป็นภาษาต่างดาวอ่านไม่ออก
2.3 แนวทางแก้ไข คือ ไส่โค๊ต<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">ไว้ที่ไต้โค๊ต<body>
อธิบายคำสังโปรแกรม
1: <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2: <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3: <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
4: <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5: <h1>ข้อมูลนักศึกษา</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
6: <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
7: 6031280100
- แสดงข้อความ "6031280100"
8:<h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
9: นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
10: <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
11:เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
12:<h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
13:<p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
- องค์ประกอบกำหนดย่อหน้า
14:</body>
- ปิดคำสั่ง Body
15:</html>
- ปิดคำสั่ง html
________________________________________________________________________3. ปรับปรุงให้เว็บเพจแสดงภาพ me.jpeg
รูปภาพที่ 3 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ เป็นเว็บเพจแสดงข้อความภาษาไทย
2. ข้อผิดพลาดที่พบ คือ เป็นภาษาต่างดาวอ่านไม่ออก
3. แนวทางแก้ไข คือ แก้ไขโค๊ต2จุดดังนี้
3.1 ไส่โค๊ต<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
ไว้ที่ไต้โค๊ต<body>
3.2 ไส่โค๊ตบรรทัดถัดมาจากข้อที่ 3.1 <img src="me.jpeg" width="300" height="300">
อธิบายคำสังโปรแกรม
1: <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2: <html>
2: <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3: <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
4: <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ 5: <img src="me.jpeg" alt="me" style="width:304px;height:228px;"
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ 5: <img src="me.jpeg" alt="me" style="width:304px;height:228px;"
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
6: <h1>ข้อมูลนักศึกษา</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
7: <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
8: 6031280100
- แสดงข้อความ "6031280100"
9:<h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
10: นายมาดี มีบุญ
- แสดงข้อความ "นายมาดี มีบุญ"
11: <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
12:เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
13:<h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
14:<p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
- องค์ประกอบกำหนดย่อหน้า
15:</body>
- ปิดคำสั่ง Body
16:</html>
- ปิดคำสั่ง html ________________________________________________________________________
4. สร้างเว็บเพจตามแบบตัวอย่างแต่ใช้ข้อมูลจริงของนักเรียน
รูปภาพที่ 4 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1.
การทำงานของโปรแกรม
คือ เป็นเว็บเพจแสดงข้อความภาษาไทย
2.
ข้อผิดพลาดที่พบ
คือ เป็นภาษาต่างดาวอ่านไม่ออd
3.
แนวทางแก้ไข
คือ แก้ไขโค๊ต2จุดดังนี้
3.1
ไส่โค๊ต<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8">
ไว้ที่ไต้โค๊ต<body>
ไว้ที่ไต้โค๊ต<body>
3.2
ไส่โค๊ตบรรทัดถัดมาจากข้อที่
3.1 <img src="sun.jpg" alt="sun" width="300"
height="300">
height="300">
อธิบายคำสังโปรแกรม
1: <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2: <html>
2: <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3: <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
4: <meta http-equiv="content-type" content="text/html; charset=utf-8" />- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5:
<img src="sun.jpg" alt="sun" width="300" height="300">
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
6:
<h1>ข้อมูลนักศึกษา</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
7:
<h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
8:
6031280100
- แสดงข้อความ "5931280008"
9:
<h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
10: นายวชิรวิชญ์ อิ่มเกิด
- แสดงข้อความ "นายวชิรวิชญ์ อิ่มเกิด"
11: <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
12:เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
13:<h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
14:<p>8/101 หมู่ 5 ถนน - ตำบลสมอแข อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
- องค์ประกอบกำหนดย่อหน้า
15:</body>
- ปิดคำสั่ง Body
16:</html>
- ปิดคำสั่ง html 
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น