APIROM2565 - C08 : แก้ไขผลการเรียน

ขั้นตอนที่ 1 สร้างหน้าเว็บ index.html

สร้างโฟลเดอร์ในไดร์ฟ D ตั้งชื่อ ห้อง-เลขที่ ชื่อสกุล
เปิดโปรแกรม Notepad
บันทึกไฟล์ตั้งชื่อ index.html โดยตั้งค่าช่อง Encodind เป็น UTF-8
พิมพ์ code ตามตัวอย่าง
พิมพ์ code หน้า layout.css

ขั้นตอนที่ 2 การสร้างหน้าเว็บ p1.html - p4.html

p1.html

หาข้อมูลจากเว็บไซต์และรูปภาพเตรียมไว้ให้พร้อม
คัดลอกหน้า index.html แล้วเปลี่ยนชื่อเป็น p1.html (ใช้วิธีการ save as หน้า code ใน notepad)
แก้ไขข้อมูลในส่วนของ article ดังนี้

หัวเรื่อง <h2>
รูปภาพ <img>
ข้อมูล <p>
ที่มา

p2.html

หาข้อมูลจากเว็บไซต์และรูปภาพเตรียมไว้ให้พร้อม
คัดลอกหน้า p1.html แล้วเปลี่ยนชื่อเป็น p2.html (ใช้วิธีการ save as หน้า code ใน notepad)
แก้ไขข้อมูลในส่วนของ article ดังนี้

หัวเรื่อง <h2>
รูปภาพ <img>
ข้อมูล <p>
ที่มา

p3.html

ทำวิธีเดียวกันกับหน้า p2.html

p4.html

ทำวิธีเดียวกันกับหน้า p3.html

ขั้นตอนที่ 3 การสร้างหน้าเว็บ content.html

ขั้นตอนสร้างหน้าเว็บ content.html

1. เปิด code หน้า index.html ใน Notepad

2. เลือกเมนู File --> Save as

3. ตั้งชื่อ content.html ในช่อง File name

4. save

5. แก้ไข code ตามตัวอย่างด้านล่าง

ขั้นตอนการพิมพ์ code ในหน้า content.html

1. พิมพ์ code ส่วนที่ประกาศ div id ในกรอบสีส้ม

2. พิมพ์ code ในส่วนหมายเลข 1

3. คัดลอก code ในส่วนหมายเลข 1 และวางทั้งหมด 3 ครั้ง (กรอบหมายเลข 2-4)

4. แก้ไข code ในกรอบหมายเลข 2 ทั้งหมด 4 จุด คือตำแหน่งหมายเลข 5-8 ดังนี้

หมายเลข 5 เป็นรูปภาพ
หมายเลข 6 ชื่อหัวข้อ
หมายเลข 7 ข้อมูลเนื้อหาอย่างย่อ
หมายเลข 8 หน้าเว็บที่ต้องการเชื่อมโยงไปยังข้อมูลเพิ่มเติม

5. แก้ไข code ในกรอบหมายเลข 3 ทั้งหมด 4 จุด คือตำแหน่งหมายเลข 5-8

6. แก้ไข code ในกรอบหมายเลข 4 ทั้งหมด 4 จุด คือตำแหน่งหมายเลข 5-8

7. บันทึก

เพิ่ม code ในหน้า layout.css

1. พิมพ์ code css ทั้งหมด 5 ส่วน

2. ส่วน h3 (พิมพ์ต่อจาก code h2 ที่มีอยู่แล้ว)

3. ส่วนอื่นๆ พิมพ์ต่อจาก article video ที่มีอยู่แล้ว

7. บันทึก

ขั้นตอนที่ 4 การสร้างหน้าเว็บ gellery.html

ขั้นตอนสร้างหน้าเว็บ gallery.html

1. เปิด code หน้า index.html ใน Notepad

2. เลือกเมนู File --> Save as

3. ตั้งชื่อ gellery.html ในช่อง File name

4. save

5. แก้ไข code ตามตัวอย่างด้านล่าง

*** หารูปภาพจำนวน 12 รูป และตั้งชื่อ pg1-pg12

ขั้นตอนการพิมพ์ code ในหน้า gellery.html

1. แก้ไขหัวข้อที่ h2 (หมายเลข 1)

2. พิมพ์ code แทรกตารางในกรอบสีเขียว (หมายเลข 2)

3. คัดลอก code กรอบสีน้ำเงินอีก 2 ครั้ง

4. แก้ไขชื่อรูปภาพ ใน code ที่คัดลอกมาเป็นรูปที่ 5-12 และคำอธิบายรูปภาพที่ alt

7. บันทึก

เพิ่ม code ในหน้า layout.css

1. พิมพ์ code css ทั้งหมด 5 ส่วน ก่อน footer

2. บันทึก

Page updated

Report abuse