เรียนรู้ HTML / CSS สร้างเว็บไซต์ใน 10 นาที

เขียนเว็บเพจด้วยตัวเองได้ภายในไม่กี่บรรทัด

ทำความเข้าใจก่อนเริ่ม

HTML (HyperText Markup Language) คือภาษาใช้สร้าง “โครงสร้าง” ของเว็บ
CSS (Cascading Style Sheets) คือภาษาที่ใช้ “ตกแต่ง” รูปร่าง สี ขนาด ฟอนต์ ฯลฯ

สิ่งที่ต้องมี

โปรแกรมแก้ไขข้อความ: เช่น VS Code หรือ Notepad++
เว็บเบราว์เซอร์ เช่น Chrome, Edge
ไฟล์ HTML + CSS ง่าย ๆ (จะสอนสร้างให้เลยด้านล่าง)

STEP 1: สร้างไฟล์ HTML

เปิด VS Code แล้วสร้างไฟล์ชื่อ index.html
พิมพ์โค้ดด้านล่างลงไป:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>เว็บแรกของฉัน</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>สวัสดี, โลก!</h1>
  <p>นี่คือเว็บไซต์แรกที่ฉันสร้างขึ้นเอง</p>
  <a href="https://google.com" target="_blank">ไปที่ Google</a>
</body>
</html>

บันทึกไฟล์ แล้วดับเบิลคลิกเปิดในเบราว์เซอร์
คุณจะเห็นเว็บไซต์แรกของคุณขึ้นแล้ว!

STEP 2: สร้างไฟล์ CSS

สร้างไฟล์ชื่อ style.css ในโฟลเดอร์เดียวกัน แล้วพิมพ์:

body {
  background-color: #f0f0f0;
  font-family: sans-serif;
  padding: 40px;
}

h1 {
  color: #0066cc;
  font-size: 36px;
}

p {
  font-size: 18px;
  color: #333;
}

a {
  color: #ff6600;
  text-decoration: none;
}

บันทึกไฟล์ แล้วกด Refresh หน้าเว็บอีกครั้ง
เว็บไซต์ของคุณจะดูดีขึ้นทันที!

อธิบายโครงสร้าง HTML พื้นฐาน

แท็ก	หน้าที่
`<!DOCTYPE html>`	บอกว่าไฟล์นี้คือ HTML5
`<html>`	ครอบทุกอย่างของหน้าเว็บ
`<head>`	ส่วนข้อมูลเบื้องหลัง (title, CSS, meta)
`<body>`	เนื้อหาที่แสดงในหน้าเว็บ
`<h1>`	หัวข้อใหญ่
`<p>`	ย่อหน้า
`<a>`	ลิงก์

อธิบาย CSS พื้นฐาน

คำสั่ง	ความหมาย
`body { background-color: #f0f0f0; }`	เปลี่ยนสีพื้นหลัง
`h1 { font-size: 36px; }`	เปลี่ยนขนาดตัวอักษร
`a { text-decoration: none; }`	ลบขีดเส้นใต้ของลิงก์

BONUS: อยากให้เว็บไซต์ดูสวยขึ้นไวๆ?

ลองใส่โค้ดนี้ใน <head> เพื่อใช้ Google Fonts และ CSS reset

<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Prompt', sans-serif; }
</style>

ตัวอย่างโค้ดรวม (HTML + CSS)

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>แนะนำตัว</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>สวัสดีครับ ผมชื่อบอล</h1>
  <p>ผมสนใจการออกแบบเว็บไซต์ และกำลังเรียนรู้ HTML/CSS</p>
</body>
</html>

style.css

body {
  background: #ffffff;
  color: #333;
  font-family: 'Prompt', sans-serif;
  padding: 50px;
}

h1 {
  color: #0055aa;
  font-size: 32px;
}

p {
  font-size: 18px;
}

สรุป

ต้องรู้	ทำไมถึงสำคัญ
HTML = โครงสร้าง	สร้างเนื้อหาให้เว็บแสดงผลได้
CSS = การตกแต่ง	ทำให้เว็บดูน่าใช้งาน
ใช้ VS Code + Live Server	พัฒนาเว็บแบบเห็นผลทันที
เรียนรู้เพิ่มจาก w3schools หรือ MDN	สร้างเว็บระดับมืออาชีพได้เร็วขึ้น