วันจันทร์ที่ 10 กรกฎาคม พ.ศ. 2560

ใบงานที่ 4 HTML forms

ใบงานที่ 4 HTML forms

 

ใบงานที่ 4

  คำสั่ง ที่ 1  ดาวน์โหลดไฟล์บีบอัด จาก  ใบงานที่ 4ขยายไฟล์ลงในโฟลเตอร์ /home/document
ข้อ 1. เปิดไฟล์ /home/document/job4/index.html ด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger
รูปภาพที่ 1 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
   1. การทำงานของโปรแกรม คือ ใส่ข้อมูลและจะแสดงข้อมูลที่ URL
  
   2. ข้อผิดพลาดที่พบ เมื่อกรอกข้อมูลไปแล้วมันแสดงที่ URL อาจทำให้โดนแฮ็คได้
   3. แนวทางแก้ไข คือ

ข้อ 2. เปิดไฟล์ /home/document/html/index.html ด้วยโปรแกรมแก้ไขข้อความ เขียนอธิบายคำสั่งการทำงานที่ Blogger

อธิบายคำสังโปรแกรม

1. <!DOCTYPE html>
   - การประกาศกำหนดเอกสารนี้เป็น HTML5

2.
<html>
   -
องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
 

3. <head>
   -
องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML

4. <meta charset=utf-8>
   -
กำหนดอักขระตามแบบตัวอักษรที่ต้องการ 

5. <style>
   - ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้


6. form{
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}

   - สร้างฟอร์ม พื้นหลัง:สีดำ ตัวอักษร:สีขาว หางจากหน้าจอ 20 px 0 20 px 0 ขอบหนา 20 px

7. </style>
   - ปิดคำสั่ง Style
 
8. </head>  
   - ปิดคำสั่ง head

9. <body>
   - องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
 
10. <form action="index.html" method = get>
   - ให้แสดงค่าที่ป้อนที่ URL ของเว็บไซด์

11. ชื่อ-นามสกุล:<br>
   - แสดงข้อความ "ชื่อ-นามสกุล:" และ เว้น 1 บรรทัด
 
 

12. <input type="text" name="firstname" value="" size=30>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า firsrtname ทั้งหมด 30 ตัว
 
13. <br>   - เว้น 1 บรรทัด

14. ที่อยู่:<br>
   - แสดงข้อความ "ที่อยู่:" และ เว้น 1 บรรทัด
 

15. <input type="text" name="lastname" value="" size=60>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 60 ตัว
 

16. <br>
 
   - เว้น 1 บรรทัด

17. โทรศัพท์ มือถือ:<br>
   - แสดงข้อความ "โทรศัพท์ มือถือ:"และ เว้น 1 บรรทัด
 

18. <input type="text" name="lastname" value="" size=10>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 10 ตัว

19. <br><br>

   - เว้น 2 บรรทัด
 

20. <input type="submit" value="Submit">
 
   - ช่อง input รับประเภทแสดงผลลัพธ์

21. </form> 
   - ปิดคำสั่ง Form
 
22. <p>หมายเหตุ ตัวอย่างนี้ ยังไม่ได้นำข้อมูลไปดำเนินการอื่น ให้ทดลองและสังเกตที่ ช่อง urlเว็บเบาว์เซอร์ การวิธีส่งข้อมูล แบบ get และแบบ post</p>
   - องค์ประกอบกำหนดย่อหน้า 

23. </body>
   - ปิดคำสั่ง Body

24. </html>
   - ปิดคำสั่ง HTML

ข้อที่ 3. ทำลองกรอกข้อมูลส่งข้อมูล ดูผลลัพธ์ที่ช่อง url โปรแกรมเบราว์เซอร์ นำมาเขียนอธิบายการทำงานของเว็บเพจ ที่ Blogger



เมื่อกด submit จะส่งข้อมูลผ่าน url






คำสั่งที่ 2 ปรับปรุงให้เว็บเพจแสดงจากตัวอย่างให้ซ่อนข้อมูลลงทะเทียนในช่อง url  และเพิ่มช่องกรอกข้อมูล เกี่ยวกับการศึกษา ประวัติการทำงาน งานอดิเรกและความสนใจพิเศษให้สมบูรณ์และมีการแสดงผลสวยงาม
ข้อ 1. เปิดเอกสารเว็บเพจที่แก้ไขแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger


รูปภาพที่ 2 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม
การทำงานของโปรแกรม คือ ใส่ข้อมูลและจะแสดงข้อมูลที่ URL
ข้อผิดพลาดที่พบ คือ
แก้ไขโปรแกรม คือ  โดยดารเป็น get เป็น post ทำให้ไม่ส่งข้อมูลทาง url

ข้อ 2. เขียนอธิบายคำสั่งในเอกสารเว็บเพจที่แก้ไขแล้ว

อธิบายคำสังโปรแกรม

1. <!DOCTYPE html>
   - การประกาศกำหนดเอกสารนี้เป็น HTML5

2.
<html>
   -
องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
 

3. <head>
   -
องค์ประกอบที่เป็นองค์ประกอบส่วนหัวของหน้า HTML

4. <meta charset=utf-8>
   -
กำหนดอักขระตามแบบตัวอักษรที่ต้องการ 

5. <style>
   - ไว้สำหรับสร้างรูปแบบย่อยเพื่อนำไปปรับใช้


6. form{
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}

   - สร้างฟอร์ม พื้นหลัง:สีดำ ตัวอักษร:สีขาว หางจากหน้าจอ 20 px 0 20 px 0 ขอบหนา 20 px

7. </style>
   - ปิดคำสั่ง Style
 
8. </head>  
   - ปิดคำสั่ง head

9. <body>
   - องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
 
10. <form action="index.html" method = post>
   - ไม่แสดงค่าที่ป้อนที่ URL ของเว็บไซด์

11. ชื่อ-นามสกุล:<br>
   - แสดงข้อความ "ชื่อ-นามสกุล:" และ เว้น 1 บรรทัด
 
 

12. <input type="text" name="firstname" value="" size=30>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า firsrtname ทั้งหมด 30 ตัว
 
13. <br>   - เว้น 1 บรรทัด

14. ที่อยู่:<br>
   - แสดงข้อความ "ที่อยู่:" และ เว้น 1 บรรทัด
 

15. <input type="text" name="lastname" value="" size=60>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 60 ตัว
 

16. <br>
 
   - เว้น 1 บรรทัด

17. โทรศัพท์ มือถือ:<br>
   - แสดงข้อความ "โทรศัพท์ มือถือ:"และ เว้น 1 บรรทัด
 

18. <input type="text" name="lastname" value="" size=10>
   - ช่อง input รับประเภทตัวอักษร ชื่อว่า lastname ทั้งหมด 10 ตัว

19. <br><br>

   - เว้น 2 บรรทัด
 

20. <input type="submit" value="Submit">
 
   - ช่อง input รับประเภทแสดงผลลัพธ์

21. </form> 
   - ปิดคำสั่ง Form
 
22. <p>หมายเหตุ ตัวอย่างนี้ ยังไม่ได้นำข้อมูลไปดำเนินการอื่น ให้ทดลองและสังเกตที่ ช่อง urlเว็บเบาว์เซอร์ การวิธีส่งข้อมูล แบบ get และแบบ post</p>
   - องค์ประกอบกำหนดย่อหน้า 

23. </body>
   - ปิดคำสั่ง Body

24. </html>
   - ปิดคำสั่ง HTML 

 

ใบงานที่ 3HTMLClasses

ใบงานที่ 3 HTMLClasses

1. ดาวน์โหลดไฟล์บีบอัด จาก  ใบงานที่ 3   ขยายไฟล์ลงในโฟลเตอร์ /home/document




 รูปภาพที่ 1 ผลการทำงานของโปรแกรม

บรรยายการทำงานของโปรแกรม



 1.1 การทำงานของโปรแกรม คือ เป็นเว็บเพจแนะนำสถานที่ของพิษณุโลก

 1.2 ข้อผิดพลาดที่พบ คือ เรียงบล๊อกและรูปภาพแบบกระจัดกระจายบางรูปใหญ่บ้างเล็กบ้าง

 1.3 แนวทางแก้ไข คือแก้ไขหรือเพิ่มเติมโค๊ตที่ทำไห้เว็บเพจดูดีมีระเบียบ

อธิบายคำสังโปรแกรม

1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5 
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบเป็นภาชนะสำหรับข้อมูลเมตา
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;
}
- การตั้งค่ารูปแบบขององค์ประกอบ
6. </style>
- ปิดคำสั่ง style
7. </head>
- ปิดคำสั่ง head

8. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
9. <h1>5 แหล่งท่องเที่ยวเมืองสองแควพิษณุโลกต้องห้ามพลาด</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
10. <div class="cities">
11. <h2>1. วัดพระศรีรัตนมหาธาตุวรมหาวิหาร (วัดใหญ่)</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
12. <img src = pic01.jpeg >
13. <p>วัดพระศรีรัตนมหาธาตุวรมหาวิหาร จังหวัดพิษณุโลก เรียกกันทั่วไปว่าวัดใหญ่หรือวัดหลวงพ่อพระพุทธชินราช เป็นพระอารามหลวงมาแต่เดิมสร้างขึ้นในสมัยกรุงสุโขทัย ต่อมาเมื่อ ปีพุทธศักราช ๒๔๕๘ พระบาทสมเด็จพระมงกุฎเกล้าเจ้าอยู่หัว ทรงพระกรุณาโปรดเกล้า ฯให้ยกขึ้นเป็นพระอารามหลวงชั้นเอก ชนิด วรมหาวิหาร เมื่อ พ.ศ. ๒๔๕๘ ปัจจุบันจึงมีชื่อเต็มว่า วัดพระศรีรัตนมหาธาตุวรมหาวิหาร เป็นวัดเก่าแก่ที่มีความสำคัญยิ่งทั้งทางประวัติศาสตร์และโบราณคดี
เมื่อกล่าวถึงพระพุทธรูปที่มีความงามเป็นเลิศ ทุกคนต้องนึกถึงพระพุทธชินราช วัดพระศรีรัตนมหาธาตุ จังหวัดพิษณุโลก อย่างแน่นอน เพราะเป็นพระพุทธรูปที่สง่างามล้ำค่าไปด้วยศิลปกรรมเลิศล้ำด้วยคุณลักษณะ กว่าพระพุทธรูปทั้งหมดในแผ่นดิน นักประวัติศาสตร์และนักโบราณคดีทุกสมัย ต่างตกลงใจเป็นอย่างเดียวกันว่าพระพุทธชินราชนั้นงามเป็นหนึ่ง ประดุจดั่งเพชรเม็ดงามที่ล้ำค่ามหาศาล</p>
14. </div>
- ปิดคำสั่ง div
15. <div class="cities">
16. <h2>2.</h2>
17. <img src = pic02.jpeg >
18. <p>
..................................................................

19. </p>
20. </div>
- ปิดคำสั่ง div

21. <div class="food">
22. <h2>3.</h2>
23. <img src = pic02.jpeg >
22. <p>
..................................................................

23. </p>
24. </div>
- ปิดคำสั่ง div

25. <div class="cities">
26. <h2>4.</h2>
27. <img src = pic02.jpeg >
28. <p>
..................................................................

29. </p>
30. </div>
- ปิดคำสั่ง div
31. <div class="cities">
32. <h2>5.</h2>
33. <img src = pic02.jpeg >
34. <p>
..................................................................

35. </p>
36. </div>
- ปิดคำสั่ง div

37. <h1>5 แหล่งอาหารการกินเมืองสองแควพิษณุโลกที่ต้องห้ามพลาด</h1>
38. <div class="food">
39. <h2>1.ร้าน ศ.โภชนา</h2>
40. <img src = pic06.jpeg >
41. <p>
ศ.โภชนา เป็นอีกหนึ่งร้านอาหารพิษณุโลกที่มีชื่อเสียงมาก ๆ เพราะเมนูต้มเลือดหมูที่นี่มีรสชาติอร่อยเป็นเอกลักษณ์ ตัวน้ำซุปมีรสชาติกลมกล่อม ให้เครื่องต่าง ๆ มาแบบเต็มชาม ทั้งเครื่องใน, หมูสับ, เลือดหมู, ตับ, ใบจิงจูฉ่าย ฯลฯ </p>
42. <img src = pic061.jpeg >
43. <img src = pic062.jpeg >
44. <p>วัตถุดิบแต่ละอย่างก็มีการคัดสรรมาอย่างดี ใช้แต่ของสดใหม่ เกรดพรีเมียม จึงทำให้เมนูต้มเลือดหมูที่นี่อร่อยแบบไม่ต้องปรุงรส นอกจากนี้ที่ร้านยังมีเมนูอื่น ๆ ให้ลิ้มลองกันอีกด้วย อาทิ ข้าวหมูทอด, ข้าวกะเพราหมู, ข้าวไข่เจียว, ข้าวผัดพริก เป็นต้น
45. </p>
46. </div>
- ปิดคำสั่ง div

47. <div class="food">
48. <h2>2.</h2>
49. <img src = pic02.jpeg >
50. <p>
..................................................................

51. </p>
52. </div>
- ปิดคำสั่ง div

53. <div class="food">
54. <h2>3.</h2>
55. <img src = pic02.jpeg >
56. <p>
..................................................................

57. </p>
58. </div>
- ปิดคำสั่ง div

59. <div class="cities">
60. <h2>4.</h2>
61. <img src = pic02.jpeg >
62. <p>
..................................................................

63. </p>
64. </div>
- ปิดคำสั่ง div

65. <div class="cities">
66. <h2>5.</h2>
67. <img src = pic02.jpeg >
68. <p>
..................................................................

69. </p>
70. </div>
- ปิดคำสั่ง div

71. </body>
72. </html>

2. ปรับปรุงให้เว็บเพจแสดงจากตัวอย่างให้เนื้อสมบูรณ์และมีการแสดงผลสวยงาม



 รูปภาพที่ 1 ผลการทำงานของโปรแกรม

บรรยายการทำงานของโปรแกรม



 1.1 การทำงานของโปรแกรม คือ เป็นเว็บเพจแนะนำสถานที่ของพิษณุโลก

 1.2 ข้อผิดพลาดที่พบ คือ เรียงบล๊อกและรูปภาพแบบกระจัดกระจายบางรูปใหญ่บ้างเล็กบ้าง

 1.3 แนวทางแก้ไข คือแก้ไขหรือเพิ่มเติมโค๊ตที่ทำไห้เว็บเพจดูดีมีระเบียบ

อธิบายคำสังโปรแกรม

1. <!DOCTYPE html>
- การประกาศกำหนดเอกสารนี้เป็น HTML5 
2. <html>
- องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า HTML นั้น
3. <head>
- องค์ประกอบเป็นภาชนะสำหรับข้อมูลเมตา
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;
}

img{
    border-radius: 25px;
    border: 5px  solid #cccccc;
    width: 40%;
 margin: 10px;
}

p{
   background-color:#33ffff;
            color:#000000;
            border: 5px  solid red;
            border-radius: 15px;
            padding: 25px;
            margin: 10px;
 
}

- การตั้งค่ารูปแบบขององค์ประกอบ

6. </style>
- ปิดคำสั่ง style
7. </head>
- ปิดคำสั่ง head

8. <body>
- องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้
9. <h1>5 แหล่งท่องเที่ยวเมืองสองแควพิษณุโลกต้องห้ามพลาด</h1>
- องค์ประกอบกำหนดหัวข้อใหญ่
แหล่งที่มา
10. <br>
http://www.painaidii.com/diary/diary-detail/002004/lang/th/
- แสดงข้อความ
11. <div class="cities">
12. <h2>1. วัดพระศรีรัตนมหาธาตุวรมหาวิหาร (วัดใหญ่)</h2>
- องค์ประกอบกำหนดหัวข้อใหญ่
13. <center><img src = pic01.jpeg ></center>
- องค์ประกอบกำหนดกึ่งกลาง
14. <p>วัดพระศรีรัตนมหาธาตุวรมหาวิหาร จังหวัดพิษณุโลก เรียกกันทั่วไปว่าวัดใหญ่หรือวัดหลวงพ่อพระพุทธชินราช เป็นพระอารามหลวงมาแต่เดิมสร้างขึ้นในสมัยกรุงสุโขทัย ต่อมาเมื่อ ปีพุทธศักราช ๒๔๕๘ พระบาทสมเด็จพระมงกุฎเกล้าเจ้าอยู่หัว ทรงพระกรุณาโปรดเกล้า ฯให้ยกขึ้นเป็นพระอารามหลวงชั้นเอก ชนิด วรมหาวิหาร เมื่อ พ.ศ. ๒๔๕๘ ปัจจุบันจึงมีชื่อเต็มว่า วัดพระศรีรัตนมหาธาตุวรมหาวิหาร เป็นวัดเก่าแก่ที่มีความสำคัญยิ่งทั้งทางประวัติศาสตร์และโบราณคดี
เมื่อกล่าวถึงพระพุทธรูปที่มีความงามเป็นเลิศ ทุกคนต้องนึกถึงพระพุทธชินราช วัดพระศรีรัตนมหาธาตุ จังหวัดพิษณุโลก อย่างแน่นอน เพราะเป็นพระพุทธรูปที่สง่างามล้ำค่าไปด้วยศิลปกรรมเลิศล้ำด้วยคุณลักษณะ กว่าพระพุทธรูปทั้งหมดในแผ่นดิน นักประวัติศาสตร์และนักโบราณคดีทุกสมัย ต่างตกลงใจเป็นอย่างเดียวกันว่าพระพุทธชินราชนั้นงามเป็นหนึ่ง ประดุจดั่งเพชรเม็ดงามที่ล้ำค่ามหาศาล</p>
 - องค์ประกอบกำหนดหัวข้อ
15. </div>

16. <div class="cities">
17. <h2>2.อุทยานแห่งชาติภูหินร่องกล้า พิษณุโลก</h2>
18. <center><img src = 21.jpg >
19. <img src = 22.jpg ></center>
20. <p>
ข้อมูล : อุทยานแห่งชาติภูหินร่องกล้า (Phuhinrongkla National Park) เป็นอุทยานแห่งชาติแห่งที่ 48 ของประเทศ...และนับเป็นแห่งที่14 ของภาคเหนือ ซึ่งมีเนื้อที่ประมาณ 307 ตารางกิโลเมตร หรือ 191,875 ไร่ประกาศเป็นอุทยานแห่งชาติ เมื่อปี พ.ศ. 2527 ซึ่งตั้งครอบคลุมพื้นที่รอยต่อของสามจังหวัด คือ อำเภอเขาค้อ จังหวัดเพชรบูรณ์ อำเภอด่านซ้าย จังหวัดเลย และอำเภอนครไทย จังหวัดพิษณุโลก ภูหินร่องกล้าอันเป็นแหล่งกำเนิดของประวัติศาสตร์การสู้รบอันยาวนาน เป็นวีรกรรมของนักรบไทยที่เกิดขึ้น ณ ที่นี้ ตลอดจนสภาพสิ่งก่อสร้างในอดีตได้ถูกบันทึกเก็บรักษาไว้ นอกจากนี้ทางอุทยานฯ ยังมีบริการบ้านพักไว้บริการ และยังมีลานกว้างที่ทางอุทยานฯ จัดไว้สำหรับกางเต็นท์อีกด้วย
21. <br>
ที่ตั้ง : อำเภอนครไทย จังหวัดพิษณุโลก 65120
22. <br>
เวลาเปิด-ปิด : เปิดให้เข้าชมทุกวัน
23. <br>
การเดินทาง :  ใช้ถนนพิษณุโลก - หล่มสัก เข้าสู่อำเภอนครไทย ตรงเข้าไปที่ทำการอุทยานแห่งชาติภูหินร่องกล้า
24. <br>
ไฮไลท์ PaiNaiDii ขอบอก : ธารพายุ (จุดชมวิว) สามารถมองเห็นทิวทัศน์ของทะเลภูเขาและทะเลหมอกได้อย่างสวยงาม
25. </p>
26. </div>

27. <div class="cities">
28. <h2>3.วัดราชบูรณะ พิษณุโลก</h2>
29. <center><img src = 31.jpg >
30. <img src = 32.jpg ></center>
31. <p>
ข้อมูล :  วัดราชบูรณะ ปัจจุบันตั้งอยู่ใจกลางเมืองพิษณุโลก ติดฝั่งแม่น้ำน่าน เยื้องกับวัดพระศรีรัตนมหาธาตุวรมหาวิหาร (วัดใหญ่) ตรงข้ามกับวัดนางวัดราชบูรณะเป็นวัดโบราณ สันนิษฐานว่าสร้างขึ้นในสมัยสุโขทัยก่อนรัชสมัยพระยาลิไท แต่ไม่พบหลักฐานที่ชัดเจน ประวัติวัดบนไม้แผ่นป้ายของวัด มีความว่า “วัดราชบูรณะเดิมไม่ปรากฏชื่อ ก่อสร้างมานาน 1,000 ปีเศษ ก่อนที่พระยาลิไทได้ทรงบูรณปฏิสังขรณ์ ดังนั้นวัดนี้จึงได้ชื่อว่า “วัดราชบูรณะ” รวมความยาวนานถึงปัจจุบันประมาณ 1,000 ปีเศษ พระยาลิไททรงสร้างพระพุทธชินราช พระพุทธชินสีห์ และพระศรีศาสดาแล้ว ทองยังเหลืออยู่จึงได้หล่อพระเหลือขึ้น และทรงทอดพระเนตรเห็นว่าวัดนี้ชำรุดทรุดโทรมมาก จึงได้บูรณะขึ้นมาอีกครั้ง
32. <br>
ที่ตั้ง : ถนนมิตรภาพ ตำบลในเมือง จังหวัดพิษณุโลก 65000
33. <br>
เวลาเปิด-ปิด : เปิดทุกวัน เวลา 5.00 – 18.00 น.
34. <br>
การเดินทาง : ใช้ถนนพุทธบูชา สังเกตประตูวัดราชบูรณะอยู่ทางซ้ายมือตรงเชิงสะพานนเรศวร
ไฮไลท์ PaiNaiDii ขอบอก : สักการะหลวงพ่อทองดำอันศักดิ์สิทธิ์
35. </p>
36. </div>

37. <div class="cities">
38. <h2>4.ศาลสมเด็จพระนเรศวร  พิษณุโลก</h2>
39. <center><img src = 4.jpg ></center>
40. <p>
ข้อมูล :  ศาลสมเด็จพระนเรศวร สถานที่ยึดเหนี่ยวทางจิตใจของชาวพิษณุโลกเมืองสองแคว เป็นสิ่งศักดิ์สิทธิ์ที่เป็นที่เคารพคู่บ้านคู่เมืองของชาวพิษณุโลกตั้งแต่อดีตจนถึงปัจจุบัน ตัวศาลเป็นศาลาทรงไทยโบราณ องค์พระรูปสมเด็จพระนเรศวรมหาราชมีขนาดเท่าองค์จริง ประทับนั่ง สร้างโดยกรมศิลปากร เสร็จเมื่อปี พ.ศ. 2404 ศาลตั้งอยู่บริเวณโรงเรียนพิษณุโลกพิทยาคมเก่า ริมน้ำน่าน ซึ่งเป็นพระราชวังจันทน์เก่านั่นเอง
41. <br>
ที่ตั้ง : ถนนวังจันทน์ ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก 65000
42. <br>
เวลาเปิด-ปิด : เปิดทุกวัน เวลา 6.00 – 18.00 น
43. <br>
การเดินทาง : ใช้ถนนวังจันทร์ก่อนถึงสะพานนเรศวร เลียบไปตามแม่น้ำน่านพระราชวังจันทร์และศาลสมเด็จพระนเรศวรอยู่ทางด้านซ้ายมือ
ไฮไลท์ PaiNaiDii ขอบอก : แวะสักการะศาลสมเด็จพระนเรศวร สิ่งศักดิ์สิทธิ์คู่บ้านคู่เมือง
44. </p>
45. </div>

46. <div class="cities">
47. <h2>5.น้ำตกแก่งโสภา พิษณุโลก</h2>
48. <center><img src = 51.jpg >
49. <img src = 52.jpg ></center>
50. <p>

ข้อมูล :  น้ำตกแก่งโสภา หรือสมญานามที่ว่า “ไนแองการ่าเมืองไทย” เป็นน้ำตกขนาดใหญ่สูงประมาณ 40 เมตร มีชั้นย่อยๆ ทั้งหมด 3 ชั้น ด้านบนมีลักษณะเป็นแผ่นหินขนาดใหญ่วางขวางอยู่กลางทางน้ำ ด้านล่างมีโขดหินขนาดย่อมกระจายตัวอยู่ทั่วไป ในช่วงฤดูฝนสายน้ำสีโคลนของน้ำตกแก่งโสภาจะไหลแรงเชี่ยวกรากจนไม่สามารถลงเล่นน้ำได้ ส่วนในช่วงฤดูหนาว – ฤดูร้อนสายน้ำจะลดระดับความรุนแรงลงจนสามารถมองเห็นชั้นทั้ง 3 ของน้ำตกแก่งโสภาได้ชัดเจน นักท่องเที่ยวสามารถเดินตามบันไดลงไปยังจุดชมทิวทัศน์ด้านหน้าตัวน้ำตก
51. <br>
ที่ตั้ง : ตำบลชาติตระการ พิษณุโลก 65170
52. <br>
โทรศัพท์ : 055-252-742-3
53. <br>
เวลาเปิด-ปิด : เปิดทุกวัน เวลา 8.00 – 17.00 น.
54. <br>
การเดินทาง : ใช้ทางหลวงแผ่นดินหมายเลข 12 (ถนนสายพิษณุโลก – หล่มสัก)
ไฮไลท์ PaiNaiDii ขอบอก : ฤดูกาลท่องเที่ยวที่เหมาะสม คือ กลางเดือน พ.ย. – ต้นเดือน ก.พ. (ช่วงฤดูฝนจะมีการกั้นทางเดินสู่จุดชมทิวทัศน์ด้านหน้าตัวน้ำตกแก่งโสภาไม่ให้นักท่องเที่ยวผ่าน ทำให้นักท่องเที่ยวสามารถชมทิวทัศน์ได้จากด้านบนตัวน้ำตกเท่านั้น)

55. </p>
56. </div>


57. <h1>5 แหล่งอาหารการกินเมืองสองแควพิษณุโลกที่ต้องห้ามพลาด</h1>

แหล่งที่มา
58. <br>
http://www.painaidii.com/diary/diary-detail/002014/lang/th/

59. <div class="food">
60. <h2>1.ร้าน ศ.โภชนา</h2>
61. <center><img src = pic06.jpeg ></center>
62. <p>
ศ.โภชนา เป็นอีกหนึ่งร้านอาหารพิษณุโลกที่มีชื่อเสียงมาก ๆ เพราะเมนูต้มเลือดหมูที่นี่มีรสชาติอร่อยเป็นเอกลักษณ์ ตัวน้ำซุปมีรสชาติกลมกล่อม ให้เครื่องต่าง ๆ มาแบบเต็มชาม ทั้งเครื่องใน, หมูสับ, เลือดหมู, ตับ, ใบจิงจูฉ่าย ฯลฯ </p>
63. <center><img src = pic061.jpeg >
64. <img src = pic062.jpeg ></center>
65. <p>วัตถุดิบแต่ละอย่างก็มีการคัดสรรมาอย่างดี ใช้แต่ของสดใหม่ เกรดพรีเมียม จึงทำให้เมนูต้มเลือดหมูที่นี่อร่อยแบบไม่ต้องปรุงรส นอกจากนี้ที่ร้านยังมีเมนูอื่น ๆ ให้ลิ้มลองกันอีกด้วย อาทิ ข้าวหมูทอด, ข้าวกะเพราหมู, ข้าวไข่เจียว, ข้าวผัดพริก เป็นต้น
66. </p>
67. </div>

68. <div class="food">
69. <h2>2.ชามข้าวซอย พิษณุโลก</h2>
70. <center><img src = 3.1.jpg >
71. <img src = 3.2.jpeg >
72. <br>
73. <img src = 3.4.jpg ></center>
74. <p>
ข้อมูล : ชามข้าวซอย หรือเดิมใช้ชื่อว่า ข้าวซอยลำปาง ร้านอาหารเหนืออร่อยๆ ที่มีจุดเด่นที่เมนูข้าวซอย ร้านชามข้าวซอยปรับโฉมใหม่ทั้งอาหารที่เพิ่มความพิเศษลงในเมนูอาหารและรูปแบบร้านที่รีโนเวทใหม่ ภายในออกแบบแต่งได้อย่างมีเอกลักษณ์สวยงาม เมื่อมาที่นี่แล้วจะไม่ผิดหวังกับรสชาติบรรยากาศ พร้อมทั้งการบริการของทางร้านอันน่าประทับใจ
75. <br>
ที่ตั้ง : ถนนสนามบิน ตำบลในเมือง จังหวัดพิษณุโลก 65000
76. <br>
โทรศัพท์ : 085-009-9890
77. <br>
เวลาเปิด-ปิด : เปิดทุกวัน เวลา 9.30-16.30 น
78. <br>
การเดินทาง : ใช้ถนนสนามบิน สังเกตร้านตั้งตรงข้ามโรงเรียนสาธิตมหาวิทยาลัยนเรศวร
79. <br>
เมนูนี้นำ : ข้าวซอยหมูตุ๋น,ข้าวซอยหมูหมัก,ข้าวซอยเนื้อ,ข้าวซอยไก่,ข้าวซอยทะเล,ขนมจีนน้ำเงี้ยว,ขนมจีนแกงเขียวหวาน,ข้าวคลุกกะปิ
80. <br>
81. </p>
82. </div>

83. <div class="food">
84. <h2>3.กาแฟสดฝ้ายเงิน พิษณุโลก</h2>
85. <center><img src = 2.1.jpg >
86. <img src = 2.2.jpg ></center>
87. <p>
ข้อมูล : กาแฟสดฝ้ายเงิน ร้านกาแฟสด เบเกอรี่ ร้านขึ้นชื่อของจังหวัดพิษณุโลก ที่ให้ทุกคนในครอบครัวได้มาพูดคุยกันนั่งทานอาหารว่างกัน ร้านตกแต่งสวยงาม มีที่ให้เลือกนั่งสบายกันได้หลายๆ มุม โดยรวมอาหารอร่อย บรรยากาศดี
88. <br>
ที่ตั้ง : 68 ถนนบรมไตรโลกนารถ 2 ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก 65000
89. <br>
โทรศัพท์ : 055-248-264
90. <br>
เวลาเปิด-ปิด : เปิดทุกวัน เวลา 7.00-17.00น.
91. <br>
การเดินทาง : ใช้ถนนบรมไตรโลกนารถ2 ตรงไปผ่านแมคโครพิษณุโลก
92. <br>
เมนูแนะนำ : กาแฟสด ,โกโก้ปั่น ,น้ำผลไม้ปั่น ,สมูทตี้โยเกิร์ต
93. </p>
94. </div>


95. <div class="food">
96. <h2>4.ส้มตำปูเสื่อ พิษณุโลก</h2>
97. <center><img src = 4.1.jpg >
98. <img src = 4.2.jpg >
99. <br>
100.<img src = 4.3.jpg ></center>
101. <p>
ข้อมูล : ส้มตำปูเสื่อ ร้านอาหารไทย-อีสานชื่อดังประจำจังหวัดพิษณุโลก นอกจากบรรยากาศรอบๆ ร้านที่ถูกออกแบบให้เป็นลักษณะกระท่อมปลายนา ชายทุ่ง ริมสระน้ำ กับลมเย็นๆ รายการอาหารหลายหลายเมนูล้วนมีรสชาติดี แซบอีหลีแท้น้อ
102. <br>
ที่ตั้ง : 16/2 หมู่4 ถนนพิษณุโลก-บางกระทุ่ม ตำบลวัดจันทร์ อำเภอเมือง จังหวัดพิษณุโลก 65000
103. <br>
โทรศัพท์ : 081-971-3948, 081-523-9627
104. <br>
เวลาเปิด-ปิด : เปิดทุกวัน เวลา 10.00 - 18.00 น.
105. <br>
การเดินทาง : ใช้ถนนพิษณุโลก-บางกระทุ่ม
106. <br>
เมนูแนะนำ : ส้มตำทอด, เมี่ยงปลาเผา, หมูคำหวาน, ยำตำลึงทอด, ปลาเผาเกลือ
107. </p>
108. </div>

109. <div class="food">
110. <h2>5ก๋วยเตี๋ยวกาละมัง พิษณุโลก.</h2>
111. <center><img src = 5.1.jpg >
112. <img src = 5.2.jpg ></center>
113. <p>
ข้อมูล :  ก๋วยเตี๋ยวกาละมัง แค่ฟังชื่อก็รู้แล้วว่าร้านนี้มีก๋วยเตี๋ยวชามยักษ์เป็นจุดขาย โดยเฉพาะลูกชิ้นดับเบิ้ลจัมโบ้ที่ใหญ่เท่ากับลูกเทนนิส ลูกชิ้นทางร้านทำเองโดยใช้เนื้อล้วนไม่มีเจือปน ร้านตกแต่งสวยงาม เรียบง่ายเน้นบรรยากาศดี การบริการอันน่าประทับใจ
114. <br>
ที่ตั้ง : 46/11 ถนนสนามบิน อำเภอเมืองพิษณุโลก จังหวัดพิษณุโลก 65000
115. <br>
โทรศัพท์ : 081-567-3374, 055-303-330
116. <br>
เวลาเปิด-ปิด : เปิดทุกวัน เวลา  9.00 - 17.00 น.
117. <br>
การเดินทาง : ใช้ถนนสนามบิน สังเกตโรงแรมพิษณุโลกธานีทางด้านซ้ายมือ
118. <br>
เมนูแนะนำ : ก๋วยเตี๋ยวหมูน้ำตก , ก๋วยเตี๋ยวเนื้อน้ำตก , ก๋วยเตี๋ยวต้มยำ ,ลูกชิ้นยักษ์ลวก
119. </p>
120. </div>

121. </body>
122. </html>


วันจันทร์ที่ 3 กรกฎาคม พ.ศ. 2560

ใบงานที่ 1 HTML Document


ใบงานที่ 1 HTML Document 

1. แก้ไขเอกสารเว็บเพจให้แสดงผลภาษาไทย


 รูปภาพที่ 1 ผลการทำงานของโปรแกรม

บรรยายการทำงานของโปรแกรม




 1.1 การทำงานของโปรแกรม คือ เป็นเว็บเพจแสดงข้อความภาษาไทย

 1.2 ข้อผิดพลาดที่พบ คือ เป็นภาษาต่างดาวอ่านไม่ออก

 1.3 แนวทางแก้ไข คือแก้ไขหรือเพิ่มเติมโค๊ตที่ทำไห้เว็บเพจแสดงภาษาไทยได้ถูกต้อง


อธิบายคำสังโปรแกรม

1: <!DOCTYPE html> 
    - การประกาศกำหนดเอกสารนี้เป็น HTML5  
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>

    - องค์ประกอบที่เป็นองค์ประกอบหลักของหน้า 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. สร้างเว็บเพจตามแบบตัวอย่างแต่ใช้ข้อมูลจริงของนักเรียน



รูปภาพที่ 4 ผลการทำงานของโปรแกรม
บรรยายการทำงานของโปรแกรม

1. การทำงานของโปรแกรม คือ เป็นเว็บเพจแสดงข้อความภาษาไทย

2. ข้อผิดพลาดที่พบ คือ เป็นภาษาต่างดาวอ่านไม่ออd

3. แนวทางแก้ไข คือ แก้ไขโค๊ต2จุดดังนี้

3.1 ไส่โค๊ต<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
ไว้ที่ไต้โค๊ต<body>

3.2 ไส่โค๊ตบรรทัดถัดมาจากข้อที่ 3.1 <img src="sun.jpg" alt="sun" width="300" 

height="300">

อธิบายคำสังโปรแกรม 


1: <!DOCTYPE html> 

    - การประกาศกำหนดเอกสารนี้เป็น HTML5
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




ใบงานที่ 4 HTML forms

ใบงานที่ 4 HTML forms   ใบงานที่ 4   คำสั่ง ที่ 1   ดาวน์โหลดไฟล์บีบอัด จาก  ใบงานที่ 4 ขยายไฟล์ลงในโฟลเตอร์ /home/document ข้อ 1....