ใบงานที่ 1
คำสั่ง ที่ 1 ดาวน์โหลดไฟล์บีบอัด จาก ใบงานที่ 1 ขยายไฟล์ลงในโฟลเตอร์ /home/document
ข้อ 1. เปิดไฟล์ /home/document/job1/index.html ด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 1 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา
2. ข้อผิดพลาดที่พบ คือ ไม่สามารถแปลข้อความและแสดงรูปภาพที่ใส่ไว้ในเว็บไซด์ได้
3. แนวทางแก้ไข คือ
1: <!DOCTYPE html>
4: <h1>ข้อมูลนักศึกษา</h1>
ข้อที่ 2. เปิดไฟล์ /home/document/html/index.html ด้วยโปรแกรมแก้ไขข้อความ เขียนอธิบายคำสั่งการทำงานที่ Blogger
อธิบายคำสังโปรแกรม
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 แก้ไขเอกสารเว็บเพจให้แสดงผลภาษาไทยอย่างถูกต้อง
ข้อ 1. เปิดเอกสารเว็บเพจที่แก้ไขแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 2 ผลการแก้ไขทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา
2. ข้อผิดพลาดที่พบ คือ ไม่สามารถแปลข้อความได้
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
ลงไปในโปรแกรมหลัง <body> จะทำให้สามารถแสดงอักษรภาษาไทยได้
ข้อที่ 2. เขียนอธิบายเอกสารเว็บเพจที่แก้ไขแล้ว
อธิบายคำสังโปรแกรม
1: <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2: <html>
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
ข้อ 1. เปิดเอกสารเว็บเพจที่แก้ไขแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 3 ผลการแก้ไขทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา
2. ข้อผิดพลาดที่พบ คือ ไม่สามารถแปลข้อความและรูปภาพได้
3.1 สำหรับการแก้ไขปัญหาตัวอักษรให้พิมพ์
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
ลงไปในโปรแกรมหลัง <body> จะทำให้สามารถแสดงอักษรภาษาไทยได้
3.2 สำหรับการแก้ไขปัญหารูปภาพให้พิมพ์
<img src="me.jpeg" alt="me" style="width:304px;height:228px;">
ลงไปในโปรแกรมหลัง <body> จะทำให้สามารถแสดงรูปภาพได้
ข้อที่ 2. เขียนอธิบายเอกสารเว็บเพจที่แก้ไขแล้ว
อธิบายคำสังโปรแกรม
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;">
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
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 สร้างเว็บเพจตามแบบตัวอย่างแต่ใช้ข้อมูลจริงของนักเรียน
ข้อ 1. เปิดเอกสารเว็บเพจที่นักเรียนสร้างแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 4 ผลการแก้ไขทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา
2. ข้อผิดพลาดที่พบ คือ ไม่สามารถแปลข้อความและรูปภาพได้
3.1 สำหรับการแก้ไขปัญหาตัวอักษรให้พิมพ์
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
ลงไปในโปรแกรมหลัง <body> จะทำให้สามารถแสดงอักษรภาษาไทยได้
3.2 สำหรับการแก้ไขปัญหารูปภาพให้พิมพ์
<img src="non.jpg" alt="non" style="width:304px;height:228px;">
ลงไปในโปรแกรมหลัง <body> จะทำให้สามารถแสดงรูปภาพได้
ข้อ 2. เขียนอธิบายเอกสารเว็บเพจที่ที่นักเรียนสร้าง
อธิบายคำสังโปรแกรม
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="non.jpg" alt="non" style="width:304px;height:228px;">
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
6: <h1>ข้อมูลนักศึกษา</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
7: <h2>รหัสนักศึกษา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
8: 5931280003
- แสดงข้อความ "5931280003"
9:<h2>ชื่อ-นามสกุล</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
10: นายนนทวัฒน์ ชมหอม
- แสดงข้อความ "นายนนทวัฒน์ ชมหอม"
11: <h2>สาขาวิชา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
12:เทคโนโลยีคอมพิวเตอร์
- แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"
13:<h2>ที่อยู่</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
14:<p>777/22 หมู่ 9 ถนนมิตรภาพ 16 ตำบลอรัญญิก อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
- องค์ประกอบกำหนดย่อหน้า
15:</body>
- ปิดคำสั่ง Body
16:</html>
- ปิดคำสั่ง html 
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น