การออกแบบและพัฒนาเว็บไซด์: ใบงานที่ 2 HTML Styles

ใบงานที่ 2

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

ข้อ 1. เปิดไฟล์ /home/document/job2/index.html ด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger

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

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

1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา

2. ข้อผิดพลาดที่พบ

   3. แนวทางแก้ไข คือ

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

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

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

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

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

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

5. </head>
   - ปิดคำสั่ง head

6. <body>
   - องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้

7. <h1 style="color:blue;">ข้อมูลนักศึกษา</h1>
   - องค์ประกอบกำหนดหัวข้อใหญ่พร้อมใส่สีตัวอักษรเป็นสีฟ้า

8. <div style="background-color:CornflowerBlue;
            width:70%;">
   - เป็นองค์ประกอบระดับบล็อกทำการเปลี่ยนสีพื้นหลังให้เป็นสีบัวบกสีฟ้า กว้าง 70 %

9. กรอบข้อมูลที่ 1
   - แสดงข้อความ "กรอบข้อมูลที่ 1"

10. <br>
   - แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด

11. <img src=me.jpeg>
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้

12. <h2>รหัสนักศึกษา</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

13. 6031280100
   - แสดงข้อความ "6031280100"

14. <h2>ชื่อ-นามสกุล</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

15. นายมาดี มีบุญ
   - แสดงข้อความ "นายมาดี มีบุญ"

16. <h2>สาขาวิชา</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

17. เทคโนโลยีคอมพิวเตอร์
   - แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"

18. </div>
   - ปิดคำสั่ง div

19. <div style="background-color:Cornsilk;
            color:DarkRed;
            width: 300px;
            border: 5px solid red;
            padding: 25px;
            margin: 25px;">
   - เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีผ้าไหมข้าวโพดสีข้อความสีแดงกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px

20. กรอบข้อมูลที่ 2
   - แสดงข้อความ "กรอบข้อมูลที่ 2"

21. <br>
   - แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด

22. <h2>ที่อยู่</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

23. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์
65000</p>
   - องค์ประกอบกำหนดย่อหน้า

24. </div>

   - ปิดคำสั่ง div

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

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

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

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

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

1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา

2. ข้อผิดพลาดที่พบ การจัดเรียงข้อมูลไม่เหมาะสม

   3. แนวทางแก้ไข คือ ให้เปลี่ยน
    <div style="background-color:CornflowerBlue;
   width:70%;">
     เป็น

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

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

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

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

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

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

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;">
   - เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีผ้าไหมข้าวโพดสีข้อความสีแดงกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px

9. กรอบข้อมูลที่ 1
   - แสดงข้อความ "กรอบข้อมูลที่ 1"

10. <br>
   - แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด

11. <img src=me.jpeg>
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้

12. <h2>รหัสนักศึกษา</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

13. 6031280100
   - แสดงข้อความ "6031280100"

14. <h2>ชื่อ-นามสกุล</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

15. นายมาดี มีบุญ
   - แสดงข้อความ "นายมาดี มีบุญ"

16. <h2>สาขาวิชา</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

17. เทคโนโลยีคอมพิวเตอร์
   - แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"

18. </div>
   - ปิดคำสั่ง div

19. <div style="background-color:Cornsilk;
            color:DarkRed;
            width: 300px;
            border: 5px solid red;
            padding: 25px;
            margin: 25px;">
   - เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีผ้าไหมข้าวโพดสีข้อความสีแดงกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px

20. กรอบข้อมูลที่ 2
   - แสดงข้อความ "กรอบข้อมูลที่ 2"

21. <br>
   - แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด

22. <h2>ที่อยู่</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

23. <p>เลขที่ 2 ถนนราเมศวร ตำบลในเมือง อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์
65000</p>
   - องค์ประกอบกำหนดย่อหน้า

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

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

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

คำสั่งที่ 3 สร้างเว็บเพจตามแบบตัวอย่างแต่ใช้ข้อมูลจริงของนักเรียน

ข้อ 1. เปิดเอกสารเว็บเพจที่นักเรียนสร้างแล้วด้วยโปรแกรมเบาวน์เซอร์ เก็บภาพเอกสารเว็บเพจ และนำไปประกอบ การบรรยายผลการทำงานที่ Blogger

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

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

1. การทำงานของโปรแกรม คือ แสดงข้อมูลนักศึกษา

2. ข้อผิดพลาดที่พบ การจัดเรียงข้อมูลไม่เหมาะสม

   3. แนวทางแก้ไข คือ เพิ่มคำสั่ง
   <style>
        img {
            border-radius: 8px;
            border: 5px solid Black;
            }
   </style> และเปลี่ยนสีตามที่ต้องการ

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

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

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

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

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

4. <meta charset=utf-8>
   - กำหนดอักขระตามแบบตัวอักษรที่ต้องการ
5. <style>
    img {
        border-radius: 8px;
        border: 5px solid Black;
        }
  </style>
   - กำหนดรูปแบบของรูปให้มีรัศมี 8px ขอบหนา 5px เป็นเส้นสีดำ

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

7. <body>
   - องค์ประกอบประกอบด้วยเนื้อหาของหน้าเว็บที่มองเห็นได้

8. <h1 style="background-color: beige;
            color: tomato;
            width: 300px;
            border: 5px solid Black;
            padding: 25px;
            margin: 25px;
            text-align: center;">ข้อมูลนักศึกษา</h1>
   - เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีเหลืองสว่างสีข้อความสีแดงมะเขือเทศกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px ให้ข้อความอยู่ตรงกลาง

9. <div style="background-color: beige;
            color: tomato;
            width: 300px;
            border: 5px solid Black;
            padding: 25px;
            margin: 25px;">
   - เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีเหลืองสว่างสีข้อความสีแดงมะเขือเทศกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px

10. <br>
   - แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด

11. <img src=non.jpg alt="non" width=300px>
   - ประกาศคำสั่งแสดงภาพโดยการดึงภาพมาจากเครื่องคอมพิวเตอร์ของผู้ใช้ กว้าง 300 px

12. <h2>รหัสนักศึกษา</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

13. 5931280003
   - แสดงข้อความ "5931280003"

14. <h2>ชื่อ-นามสกุล</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

15. นายนนทวัฒน์ ชมหอม
   - แสดงข้อความ "นายนนทวัฒน์ ชมหอม"

16. <h2>สาขาวิชา</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

17. เทคโนโลยีคอมพิวเตอร์
   - แสดงข้อความ "เทคโนโลยีคอมพิวเตอร์"

18. </div>
   - ปิดคำสั่ง div

19. <div style="background-color: beige;
            color: tomato;
            width: 300px;
            border: 5px solid Black;
            padding: 25px;
            margin: 25px;">
   - เป็นองค์ประกอบระดับบล็อกที่การเปลี่ยนสีพื้นหลังเป็นสีเหลืองสว่างสีข้อความสีแดงมะเขือเทศกว้าง 300 px ขนาดหนา 5 px เป็นเส้นขอบสีแดง ขอบหนา 25 px ห่างจากขอบเบาร์เซอร์
25 px

20. <br>
   - แท็กเป็นแท็กที่ว่างเปล่าซึ่งหมายความว่ามันไม่มีแท็กปิด

21. <h2>ที่อยู่</h2>
   - องค์ประกอบกำหนดหัวข้อใหญ่

22. <p>เลขที่ 777/22 หมู่ 9 ถนนมิตรภาพ 16 ตำบลอรัญญิก อำเภอเมือง จังหวัดพิษณุโลก รหัสไปรษณีย์ 65000</p>
   - องค์ประกอบกำหนดย่อหน้า

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

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

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

การออกแบบและพัฒนาเว็บไซด์

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

ใบงานที่ 2 HTML Styles

ใบงานที่ 2

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

ใบงานที่ 4 HTML forms

ค้นหาบล็อกนี้