ใบงานที่ 3
คำสั่ง ที่ 1 ดาวน์โหลดไฟล์บีบอัด จาก ใบงานที่ 3 ขยายไฟล์ลงในโฟลเตอร์ /home/document
ข้อ 1.
เปิดไฟล์ /home/document/job3/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. <style>
- ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
- การสร้างคลาสสำหรับสีพื้นหลัง สถานที่ท่องเที่ยว
div.food {
background-color:Bisque;
color: blue;
margin: 20px 0 20px 0;
padding: 20px;
}
- การสร้างคลาสสำหรับสีพื้นหลัง ร้านอาหารที่น่าสนใจ
</style>
- ปิดคำสั่ง Style
6. </head>
- ปิดคำสั่ง head
7. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
โค้ชของสถานที่น่าท่องเที่ยว
8. <h1>5 แหล่งท่องเที่ยวเมืองสองแควพิษณุโลกต้องห้ามพลาด</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
9. <div class="cities">
- เป็นองค์ประกอบระดับบล็อกใช้คลาสของ cities
10. <h2>1. วัดพระศรีรัตนมหาธาตุวรมหาวิหาร (วัดใหญ่)</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
11. <img src = pic01.jpeg >
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
12. <p>วัดพระศรีรัตนมหาธาตุวรมหาวิหาร จังหวัดพิษณุโลก เรียกกันทั่วไปว่าวัดใหญ่หรือวัดหลวงพ่อพระพุทธชินราช เป็นพระอารามหลวงมาแต่เดิมสร้างขึ้นในสมัยกรุงสุโขทัย ต่อมาเมื่อ ปีพุทธศักราช ๒๔๕๘ พระบาทสมเด็จพระมงกุฎเกล้าเจ้าอยู่หัว ทรงพระกรุณาโปรดเกล้า ฯให้ยกขึ้นเป็นพระอารามหลวงชั้นเอก ชนิด วรมหาวิหาร เมื่อ พ.ศ. ๒๔๕๘ ปัจจุบันจึงมีชื่อเต็มว่า วัดพระศรีรัตนมหาธาตุวรมหาวิหาร เป็นวัดเก่าแก่ที่มีความสำคัญยิ่งทั้งทางประวัติศาสตร์และโบราณคดี
เมื่อกล่าวถึงพระพุทธรูปที่มีความงามเป็นเลิศ ทุกคนต้องนึกถึงพระพุทธชินราช วัดพระศรีรัตนมหาธาตุ จังหวัดพิษณุโลก อย่างแน่นอน เพราะเป็นพระพุทธรูปที่สง่างามล้ำค่าไปด้วยศิลปกรรมเลิศล้ำด้วยคุณลักษณะ กว่าพระพุทธรูปทั้งหมดในแผ่นดิน นักประวัติศาสตร์และนักโบราณคดีทุกสมัย ต่างตกลงใจเป็นอย่างเดียวกันว่าพระพุทธชินราชนั้นงามเป็นหนึ่ง ประดุจดั่งเพชรเม็ดงามที่ล้ำค่ามหาศาล</p>
- องค์ประกอบกำหนดย่อหน้า
13. </div>
- ปิดคำสั่ง div
โค้ชของร้านอาหารที่น่าสนใจ
14. <h1>5 แหล่งอาหารการกินเมืองสองแควพิษณุโลกที่ต้องห้ามพลาด</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
15. <div class="food">
- เป็นองค์ประกอบระดับบล็อกใช้คลาสของ food
16. <h2>1.ร้าน ศ.โภชนา</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
17. <img src = pic06.jpeg >
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
18. <p>
ศ.โภชนา เป็นอีกหนึ่งร้านอาหารพิษณุโลกที่มีชื่อเสียงมาก ๆ เพราะเมนูต้มเลือดหมูที่นี่มีรสชาติอร่อยเป็นเอกลักษณ์ ตัวน้ำซุปมีรสชาติกลมกล่อม ให้เครื่องต่าง ๆ มาแบบเต็มชาม ทั้งเครื่องใน, หมูสับ, เลือดหมู, ตับ, ใบจิงจูฉ่าย ฯลฯ </p>
- องค์ประกอบกำหนดย่อหน้า
19. <img src = pic061.jpeg >
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
20. <img src = pic062.jpeg >
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
21. <p>วัตถุดิบแต่ละอย่างก็มีการคัดสรรมาอย่างดี ใช้แต่ของสดใหม่ เกรดพรีเมียม จึงทำให้เมนูต้มเลือดหมูที่นี่อร่อยแบบไม่ต้องปรุงรส นอกจากนี้ที่ร้านยังมีเมนูอื่น ๆ ให้ลิ้มลองกันอีกด้วย อาทิ ข้าวหมูทอด, ข้าวกะเพราหมู, ข้าวไข่เจียว, ข้าวผัดพริก เป็นต้น
</p>
- องค์ประกอบกำหนดย่อหน้า
22. </div>
- ปิดคำสั่ง div
ปิดท้ายทั้ง 2 โปรแกรม ด้วย
23. </body>
- ปิดคำสั่ง Body
24. </html>
- ปิดคำสั่ง HTML
คำสั่งที่ 2 ปรับปรุงให้เว็บเพจแสดงจากตัวอย่างให้เนื้อสมบูรณ์และมีการแสดงผลสวยงาม
ข้อ 1. เปิดเอกสารเว็บเพจที่แก้ไขแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 2 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
1. การทำงานของโปรแกรม คือ แสดงข้อมูลแหล่งท่องเที่ยวเมืองสองแควพิษณุโลกและร้านอาหารที่น่าสนใจ
2. ข้อผิดพลาดที่พบ
ข้อ 2. เขียนอธิบายคำสั่งในเอกสารเว็บเพจที่แก้ไขแล้ว
อธิบายคำสังโปรแกรม
1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML
4. <meta charset=utf-8>
- กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. <style>
- ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
- การสร้างคลาสสำหรับสีพื้นหลัง สถานที่ท่องเที่ยว
div.food {
background-color:Bisque;
color: blue;
margin: 20px 0 20px 0;
padding: 20px;
}
- การสร้างคลาสสำหรับสีพื้นหลัง ร้านอาหารที่น่าสนใจ
div.text0{
background-color:#0C090A;
border-radius: 15px;
border: 5px solid Black;
color: #FFFFFF;
width: 90%;
margin: 20px 0 20px 0;
padding: 20px;
}
- การสร้างคลาสสำหรับหัวข้อใหญ่ของ สถานที่ท่องเที่ยวและร้านอาหารที่น่าสนใจ
div.text3{
background-color:#0C090A;
border-radius: 15px;
border: 5px solid White;
color: #FFFFFF;
width: 90%;
margin: 20px 0 20px 0;
padding: 20px;
}
- การสร้างคลาสสำหรับเนื้อหาของ สถานที่ท่องเที่ยว
div.text1{
background-color:#000000;
border-radius: 15px;
border: 5px solid Black;
color: #4EE2EC;
width: 50%;
margin: 20px 0 20px 0;
padding: 20px;
}
- การสร้างคลาสสำหรับหัวข้อของ ร้านอาหารที่น่าสนใจ
div.text2{
background-color:#C2DFFF;
border-radius: 15px;
border: 5px solid Black;
color: #1569C7;
width: 70%;
margin: 20px 0 20px 0;
padding: 20px;
}
- การสร้างคลาสสำหรับส่วนแหล่งที่มา
img.cities{
border-radius: 25px;
border: 8px solid Black;
width: 50%;
}
- การสร้างคลาสสำหรับกำหนดขนาดและใส่ขอบของ ร้านอาหารที่น่าสนใจ
img.cities2{
border-radius: 25px;
border: 8px solid White;
width: 50%;
}
- การสร้างคลาสสำหรับกำหนดขนาดและใส่ขอบของ สถานที่ท่องเที่ยว
img.citiessm{
border-radius: 25px;
border: 8px solid Black;
width: 20%;
}
- การสร้างคลาสสำหรับกำหนดขนาดและใส่ขอบของ ร้านอาหารที่น่าสนใจ
img.citiessm2{
border-radius: 25px;
border: 8px solid White;
width: 30%;
}
- การสร้างคลาสสำหรับกำหนดขนาดและใส่ขอบของ สถานที่ท่องเที่ยว
</style>
- ปิดคำสั่ง Style
6. </head>
- ปิดคำสั่ง head
7. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
โค้ชของสถานที่น่าท่องเที่ยว
8. <div class="text0"><h1>5 แหล่งท่องเที่ยวเมืองสองแควพิษณุโลกต้องห้ามพลาด</h1></div>
- องค์ประกอบกำหนดหัวข้อใหญ่ใช้คลาส text0
9. <div class="cities">
- เป็นองค์ประกอบระดับบล็อกใช้คลาสของ cities
10. <h2>1. วัดพระศรีรัตนมหาธาตุวรมหาวิหาร (วัดใหญ่)</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
11. <img class="cities2" src = pic01.jpeg >
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้ใช้คลาส cities2
12. <div class="text3">
- เป็นองค์ประกอบระดับบล็อกใช้คลาสของ text3
13. <p>วัดพระศรีรัตนมหาธาตุวรมหาวิหาร จังหวัดพิษณุโลก เรียกกันทั่วไปว่าวัดใหญ่หรือวัดหลวงพ่อพระพุทธชินราช เป็นพระอารามหลวงมาแต่เดิมสร้างขึ้นในสมัยกรุงสุโขทัย ต่อมาเมื่อ ปีพุทธศักราช ๒๔๕๘ พระบาทสมเด็จพระมงกุฎเกล้าเจ้าอยู่หัว ทรงพระกรุณาโปรดเกล้า ฯให้ยกขึ้นเป็นพระอารามหลวงชั้นเอก ชนิด วรมหาวิหาร เมื่อ พ.ศ. ๒๔๕๘ ปัจจุบันจึงมีชื่อเต็มว่า วัดพระศรีรัตนมหาธาตุวรมหาวิหาร เป็นวัดเก่าแก่ที่มีความสำคัญยิ่งทั้งทางประวัติศาสตร์และโบราณคดี
เมื่อกล่าวถึงพระพุทธรูปที่มีความงามเป็นเลิศ ทุกคนต้องนึกถึงพระพุทธชินราช วัดพระศรีรัตนมหาธาตุ จังหวัดพิษณุโลก อย่างแน่นอน เพราะเป็นพระพุทธรูปที่สง่างามล้ำค่าไปด้วยศิลปกรรมเลิศล้ำด้วยคุณลักษณะ กว่าพระพุทธรูปทั้งหมดในแผ่นดิน นักประวัติศาสตร์และนักโบราณคดีทุกสมัย ต่างตกลงใจเป็นอย่างเดียวกันว่าพระพุทธชินราชนั้นงามเป็นหนึ่ง ประดุจดั่งเพชรเม็ดงามที่ล้ำค่ามหาศาล</p>
- องค์ประกอบกำหนดย่อหน้า
14. </div>
- ปิดคำสั่ง div
15. <div class="text2">
- เป็นองค์ประกอบระดับบล็อกใช้คลาสของ text2
16. แหล่งที่มาจาก http://www.painaidii.com/diary/diary-detail/002004/lang/th/
- แสดงข้อความ "แหล่งที่มาจาก http://www.painaidii.com/diary/diary-detail/002004/lang/th/"
17. </div>
- ปิดคำสั่ง div
18. </div>
- ปิดคำสั่ง div
โค้ชของร้านอาหารที่น่าสนใจ
19. <div class="text0"><h1>5 แหล่งอาหารการกินเมืองสองแควพิษณุโลกที่ต้องห้ามพลาด</h1></div>
- องค์ประกอบกำหนดหัวข้อใหญ่
20. <div class="food">
- เป็นองค์ประกอบระดับบล็อกใช้คลาสของ food
21. <div class="text1"><h2>1.ร้าน ศ.โภชนา</h2></div>
- องค์ประกอบกำหนดหัวข้อใหญ่
22. <img class="cities" src = pic06.jpeg >
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
23. <div class="text2">
- เป็นองค์ประกอบระดับบล็อกใช้คลาสของ text2
24. <p>
ศ.โภชนา เป็นอีกหนึ่งร้านอาหารพิษณุโลกที่มีชื่อเสียงมาก ๆ เพราะเมนูต้มเลือดหมูที่นี่มีรสชาติอร่อยเป็นเอกลักษณ์ ตัวน้ำซุปมีรสชาติกลมกล่อม ให้เครื่องต่าง ๆ มาแบบเต็มชาม ทั้งเครื่องใน, หมูสับ, เลือดหมู, ตับ, ใบจิงจูฉ่าย ฯลฯ </p>
- องค์ประกอบกำหนดย่อหน้า
25. </div>
- ปิดคำสั่ง div
26. <img class="citiessm" src = pic061.jpeg >
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
27. <img class="citiessm" src = pic062.jpeg >
- ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้
28. <div class="text2">
- เป็นองค์ประกอบระดับบล็อกใช้คลาสของ text2
29. <p>วัตถุดิบแต่ละอย่างก็มีการคัดสรรมาอย่างดี ใช้แต่ของสดใหม่ เกรดพรีเมียม จึงทำให้เมนูต้มเลือดหมูที่นี่อร่อยแบบไม่ต้องปรุงรส นอกจากนี้ที่ร้านยังมีเมนูอื่น ๆ ให้ลิ้มลองกันอีกด้วย อาทิ ข้าวหมูทอด, ข้าวกะเพราหมู, ข้าวไข่เจียว, ข้าวผัดพริก เป็นต้น
</p>
- องค์ประกอบกำหนดย่อหน้า
30. </div>
- ปิดคำสั่ง div
31. </div>
- ปิดคำสั่ง div
ปิดท้ายทั้ง 2 โปรแกรม ด้วย
32. </body>
- ปิดคำสั่ง Body
33. </html>
- ปิดคำสั่ง HTML
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น