ว20264 เทคโนโลยีคอมพิวเตอร์ 4
ว20264 เทคโนโลยีคอมพิวเตอร์ 4
Embedded Files
ปิดรับส่งงาน
ใครจะส่งงานหลังจากนี้ให้ติดต่อครูก่อน เนื่องจากได้ตัดเกรดเรียบร้อยแล้ว
สี background
โค้ดตัวอย่าง
<html>
<head>
<title></title>
</head>
<body bgcolor="Goldenrod1">
</body>
</html>
2. พื้นหลังรูปภาพ
โค้ดตัวอย่าง
<html>
<head>
<title></title>
</head>
<body background="https://i.pinimg.com/736x/b5/9a/0c/b59a0cfa8a32043258ba8dae7fad62da.jpg">
</body>
</html>
3. หัวเรื่อง h1-6
โค้ดตัวอย่าง
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>วริทธิ์</h1>
<h2>กิ่งเณร</h2>
<h3>อ้น</h3>
<h4>Warit</h4>
<h5>Kingnen</h5>
<h6>Aon</h6>
</body>
</html>
4. Font ขนาดและสีตัวอักษร
โค้ดตัวอย่าง
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>ชื่อ-นามสกุล</h2>
<font size="5" color="#abc123">วริทธิ์</font><br>
<font size="7" color="DarkSlateGray">กิ่งเณร</font>
</body>
</html>
5. รูปแบบตัวอักษร และการจัดตำแหน่ง
โค้ดตัวอย่าง
<html>
<head>
<meta charset="utf-8">
<title>นายวริทธิ์ กิ่งเณร</title>
</head>
<body bgcolor="#FFF456">
<font size="6" face="AngsanaUPC">วริทธิ์ Aon<br>
<b>อ้น</b><br>
<i>อ้น</i><br>
<u>อ้น</u><br>
<s>อ้น</s>
<p align="center">ครูอ้นสุดหล่อ</p>
<p align="left">ครูอ้นสุดหล่อ</p>
<p align="right">ครูอ้นสุดหล่อ</p>
<center>ครูอ้น</center>
</font>
</body>
</html>
6. ลิ้ง Link + การใส่รูป + การใส่วีดีโอจาก Youtube
โค้ดตัวอย่าง
<html>
<head>
<meta charset="utf-8">
<title>นายวริทธิ์ กิ่งเณร</title>
</head>
<body>
<a href="https://www.google.com">Google</a>
<br><br>
<img src="https://www.lobstershack.com.au/wp-content/uploads/2023/02/Sea-Lion-1080x675.jpg" width="1000">
<br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/EUfzGPbe8oc?si=05R1x5oC-MR0SfiE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> <-- นำโค้ดมาจาก Youtube
</body>
</html>
7. ตาราง Table
โค้ดตัวอย่าง
<html>
<head>
<meta charset="utf-8">
<title>นายวริทธิ์ กิ่งเณร</title>
<style>
table {
border : 1px solid;
width : 90%;
background-color : #CCCFFF;
color : #555FFF;
border-radius: 10px;
}
th, td {
border : 1px solid;
width : 33%;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>ชื่อ</th>
<th>นามสกุล</th>
<th>ชื่อเล่น</th>
</tr>
<tr>
<td>วริทธิ์</td>
<td>กิ่งเณร</td>
<td>ครูอ้น</td>
</tr>
</table>
</body>
</html>
สอบเขียนโค้ด
1.ให้นักเรียนเขียนภาษา HTML ตามโจทย์ดังนี้ แล้ว Copy โค้ดที่เขียนส่ง
1.พิมพ์ชื่อนักเรียนในส่วนของ Title
2.ส่วนของเนื้อหา
- พิมพ์ชื่อนักเรียน กำหนดให้เป็นหัวเรื่องขนาดใหญ่สุด
- ขึ้นบรรทัดใหม่ พิมพ์ "ชั้น ม.3/...." กำหนดขนาดตัวอักษรตามความเหมาะสม
- ขึ้นบรรทัดใหม่ พิมพ์ "เลขที่ ...." กำหนดขนาดตัวอักษรตามความเหมาะสม
- ขึ้นบรรทัดใหม่ พิมพ์ "โรงเรียนหนองจอกประชานุสรณ์" กำหนดให้เป็นหัวเรื่องเท่ากับ 3 และลักษณะพิเศษตัวเอียง
3.ใส่สีตัวอักษร โดยแต่ละบรรทัดสีต้องไม่เหมือนกัน
4.จัดตำแหน่งตัวอักษรให้อยู่กึ่งกลาง
ให้นักเรียนเขียนโครงสร้างภาษา HTML
ให้นักเรียนเขียนภาษา HTML ใส่ชื่อ-นามสกุลของนักเรียน โดยกำหนดให้
ขนาดตัวอักษรเป็นหัวข้อเรื่องใหญ่สุด
ใส่สีแดง
จัดกลาง
ตัวอักษรเอียง
>>ตัวอย่าง<<
นายวริทธิ์ กิ่งเณร
นายวริทธิ์ กิ่งเณร
ใบความรู้
ใบความรู้
แนวข้อสอบ
แนวข้อสอบ
ตอนที่ 1 เป็นแบบปรนัย 4 ตัวเลือก จำนวน 20 ข้อ 15 คะแนน
ตอนที่ 2 เป็นแบบอัตนัย จำนวน 2 ข้อ 5 คะแนน
ให้นักเรียนเขียนโครงสร้างของ HTML (2 คะแนน)
ให้นักเรียนเขียนภาษา HTML ใส่ชื่อ-นามสกุลของนักเรียน โดยกำหนดให้ (3 คะแนน)
- ขนาดตัวอักษรเป็นหัวข้อเรื่องใหญ่สุด
- ใส่สีแดง
- จัดกลาง
- ตัวอักษรเอียง
Page updated
Google Sites
Report abuse