2.1 HTML คืออะไร
HTML (HyperText Markup Language) คือ ภาษาที่ใช้สร้างโครงสร้างของเว็บไซต์ เช่น หัวข้อ ย่อหน้า รูปภาพ และลิงก์
HTML เป็นพื้นฐานสำคัญของทุกเว็บไซต์
2.2 โครงสร้าง HTML พื้นฐาน
<!DOCTYPE html>
<html>
<head>
<title>เว็บไซต์</title>
</head>
<body>
เนื้อหาเว็บไซต์
</body>
</html>
<html>
<head>
<title>เว็บไซต์</title>
</head>
<body>
เนื้อหาเว็บไซต์
</body>
</html>
คำอธิบาย:
- <html> = จุดเริ่มต้นของเว็บไซต์
- <head> = ข้อมูลเว็บไซต์
- <body> = เนื้อหาที่แสดง
2.3 การใช้ Heading
<h1>หัวข้อใหญ่</h1>
<h2>หัวข้อรอง</h2>
<h3>หัวข้อย่อย</h3>
<h2>หัวข้อรอง</h2>
<h3>หัวข้อย่อย</h3>
ผลลัพธ์:
หัวข้อใหญ่
หัวข้อรอง
หัวข้อย่อย
2.4 การใช้ Paragraph
<p>นี่คือข้อความ</p>
ผลลัพธ์:
นี่คือข้อความ
2.5 การสร้างลิงก์
<a href="https://google.com">ไป Google</a>
ผลลัพธ์:
2.6 การแสดงรูปภาพ
<img src="https://via.placeholder.com/200">
ผลลัพธ์:
2.7 การสร้างรายการ
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<li>HTML</li>
<li>CSS</li>
</ul>
ผลลัพธ์:
- HTML
- CSS
2.8 การสร้างตาราง
<table border="1">
<tr>
<th>ชื่อ</th>
<th>อายุ</th>
</tr>
<tr>
<td>สมชาย</td>
<td>20</td>
</tr>
</table>
<tr>
<th>ชื่อ</th>
<th>อายุ</th>
</tr>
<tr>
<td>สมชาย</td>
<td>20</td>
</tr>
</table>
ผลลัพธ์:
| ชื่อ | อายุ |
|---|---|
| สมชาย | 20 |
Workshop
สร้างหน้าโปรไฟล์
<h1>โปรไฟล์ของฉัน</h1>
<p>ชื่อ: สมชาย</p>
<p>อายุ: 20 ปี</p>
<img src="https://via.placeholder.com/150">
<br>
<a href="https://google.com">Google</a>
<p>ชื่อ: สมชาย</p>
<p>อายุ: 20 ปี</p>
<img src="https://via.placeholder.com/150">
<br>
<a href="https://google.com">Google</a>
ผลลัพธ์:
สรุป
- HTML ใช้สร้างโครงสร้างเว็บไซต์
- ใช้ Heading สำหรับหัวข้อ
- ใช้ p สำหรับข้อความ
- ใช้ img สำหรับรูปภาพ
- ใช้ a สำหรับลิงก์