# การสร้างเว็บไซต์แบบง่ายด้วย HTML และ JavaScript
## บทนำ
HTML (HyperText Markup Language) เป็นภาษาที่ใช้ในการสร้างโครงสร้างของเว็บไซต์ ในขณะที่ JavaScript เป็นภาษาการเขียนโปรแกรมที่ช่วยให้เว็บไซต์มีความน่าสนใจและตอบสนองต่อการกระทำของผู้ใช้ ในบทความนี้ เราจะเรียนรู้การสร้างเว็บไซต์แบบง่ายโดยใช้ HTML และ JavaScript ร่วมกัน
## โครงสร้างของ HTML
HTML มีรูปแบบการเขียนที่ง่ายและสามารถเข้าใจได้ง่าย โดยมีโครงสร้างพื้นฐานดังนี้:
```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่างเว็บไซต์</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>ยินดีต้อนรับสู่เว็บไซต์ของเรา!</h1>
<p id="message">กดปุ่มด้านล่างเพื่อต้อนรับ</p>
<button onclick="showMessage()">คลิกที่นี่</button>
<script src="script.js"></script>
</body>
</html>
```
## การใช้ JavaScript
ในตัวอย่างนี้ เราจะใช้ JavaScript เพื่อเพิ่มการทำงานให้กับปุ่ม เมื่อผู้ใช้คลิกที่ปุ่ม "คลิกที่นี่" จะมีข้อความแสดงขึ้นมา โดยเราจะสร้างไฟล์ `script.js` ดังนี้:
```javascript
function showMessage() {
document.getElementById('message').innerText = "สวัสดี! ขอบคุณที่เยี่ยมชมเว็บไซต์ของเรา.";
}
```
## การสรุป
ในบทความนี้ เราได้เรียนรู้เกี่ยวกับการใช้ HTML เพื่อสร้างโครงสร้างพื้นฐานของเว็บไซต์และการใช้ JavaScript เพื่อเพิ่มฟังก์ชันการทำงานที่ทำให้ผู้ใช้สามารถโต้ตอบกับเว็บไซต์ได้ง่ายขึ้น การสร้างเว็บไซต์ของคุณเองไม่ยากเลยใช่ไหม? ลองไปสร้างเว็บไซต์ของคุณเองดูสิ!
## ตัวอย่างเต็ม
เมื่อรวมทุกอย่างเข้าด้วยกันเราจะได้ไฟล์ลงท้าย `.html` ที่สามารถเปิดในเว็บเบราว์เซอร์ได้:
```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่างเว็บไซต์</title>
</head>
<body>
<h1>ยินดีต้อนรับสู่เว็บไซต์ของเรา!</h1>
<p id="message">กดปุ่มด้านล่างเพื่อต้อนรับ</p>
<button onclick="showMessage()">คลิกที่นี่</button>
<script>
function showMessage() {
document.getElementById('message').innerText = "สวัสดี! ขอบคุณที่เยี่ยมชมเว็บไซต์ของเรา.";
}
</script>
</body>
</html>
```
## ปิดท้าย
การเรียนรู้การใช้ HTML และ JavaScript เป็นก้าวแรกที่สำคัญในการเข้าใจการพัฒนาเว็บไซต์ เริ่มลองสร้างเว็บไซต์ของคุณเองวันนี้และสำรวจความคิดสร้างสรรค์ของคุณ!