HTML - HyperText Markup Language

เรียนรู้พื้นฐาน HTML ตั้งแต่โครงสร้างพื้นฐานไปจนถึง Semantic Elements

1. โครงสร้างพื้นฐาน HTML - Tags, Elements, Attributes

💡 คำอธิบาย

HTML ประกอบด้วย Tags (แท็ก) ที่ใช้สร้าง Elements (องค์ประกอบ) และสามารถเพิ่ม Attributes (คุณสมบัติ) เพื่อกำหนดรายละเอียดเพิ่มเติม

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>หน้าแรกของฉัน</title>
</head>
<body>
    <h1>ยินดีต้อนรับ</h1>
    <p class="intro">นี่คือเว็บไซต์แรกของฉัน</p>
</body>
</html>

ยินดีต้อนรับ

นี่คือเว็บไซต์แรกของฉัน

อธิบาย:

<!DOCTYPE html> - ประกาศว่าเป็นเอกสาร HTML5
<html> - องค์ประกอบรากของหน้าเว็บ
<head> - ส่วนหัวที่เก็บข้อมูล metadata
<body> - ส่วนเนื้อหาที่แสดงบนหน้าเว็บ
class="intro" - Attribute ที่กำหนดชื่อ class

2. การสร้างโครงสร้างหน้าเว็บ (สำคัญมาก)

💡 คำอธิบาย

การจัดโครงสร้างหน้าเว็บที่ดีจะช่วยให้เว็บไซต์อ่านง่าย เข้าใจง่าย และเป็นมิตรกับ SEO

<body>
    <!-- Header / ส่วนหัว -->
    <header>
        <h1>ชื่อเว็บไซต์</h1>
        <nav>
            <a href="#">หน้าแรก</a>
            <a href="#">เกี่ยวกับ</a>
        </nav>
    </header>
    
    <!-- Main / ส่วนเนื้อหาหลัก -->
    <main>
        <article>
            <h2>บทความ</h2>
            <p>เนื้อหาบทความที่น่าสนใจ...</p>
        </article>
        
        <section>
            <h2>ส่วนข้อมูลเพิ่มเติม</h2>
        </section>
    </main>
    
    <!-- Footer / ส่วนท้าย -->
    <footer>
        <p>© 2025 My Website</p>
    </footer>
</body>

ชื่อเว็บไซต์

หน้าแรก เกี่ยวกับ

บทความ

เนื้อหาบทความที่น่าสนใจ...

โครงสร้างสำคัญ:

<header> - ส่วนหัวของเว็บ (โลโก้, เมนู)
<nav> - เมนูนำทาง
<main> - เนื้อหาหลักของหน้า (ใช้ครั้งเดียว)
<article> - เนื้อหาที่สมบูรณ์ในตัวเอง
<section> - กลุ่มเนื้อหาที่เกี่ยวข้องกัน
<footer> - ส่วนท้ายของเว็บ

3. ความแตกต่างระหว่าง ID และ Class

💡 คำอธิบาย

ID ใช้สำหรับองค์ประกอบที่ไม่ซ้ำ (ใช้ครั้งเดียว), Class ใช้ได้หลายครั้ง

<!-- ID: ใช้ได้แค่ครั้งเดียวในหน้าเดียว -->
<div id="header">
    <h1>ส่วนหัวเว็บไซต์</h1>
</div>

<!-- Class: ใช้ได้หลายครั้ง -->
<p class="highlight">ข้อความสำคัญ 1</p>
<p class="highlight">ข้อความสำคัญ 2</p>
<p class="highlight important">หลาย class</p>

<!-- เชื่อมโยงไปยัง ID ด้วย # -->
<a href="#header">กลับไปด้านบน</a>

ID (#)

ใช้ได้เพียง 1 ครั้ง/หน้า
มีความเฉพาะเจาะจงสูง
ใช้สำหรับจุดเด่นหลัก
CSS: #header { }
JS: getElementById()

Class (.)

ใช้ได้หลายครั้ง
ใส่หลาย class ได้
ใช้จัดกลุ่มองค์ประกอบ
CSS: .highlight { }
JS: getElementsByClassName()

4. การใช้ Semantic Elements

💡 คำอธิบาย

Semantic Elements คือ tags ที่มีความหมาย ช่วยให้เข้าใจโครงสร้างได้ง่ายขึ้น และดีต่อ SEO

<!-- ❌ ไม่ควรใช้แบบนี้ -->
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>

<!-- ✅ ควรใช้ Semantic Elements -->
<header>
    <h1>หัวเรื่องหลัก</h1>
</header>

<nav>
    <ul>
        <li><a href="#">หน้าแรก</a></li>
    </ul>
</nav>

<main>
    <article>
        <h2>หัวข้อบทความ</h2>
        <p>เนื้อหาบทความ...</p>
    </article>
    
    <aside>
        <h3>บทความที่เกี่ยวข้อง</h3>
    </aside>
</main>

<footer>
    <p>ติดต่อเรา: [email protected]</p>
</footer>

Semantic Elements ที่ควรรู้จัก:

Element	ความหมาย	ใช้เมื่อ
`<header>`	ส่วนหัว	โลโก้, เมนูหลัก
`<nav>`	เมนูนำทาง	ลิงก์นำทางหลัก
`<main>`	เนื้อหาหลัก	เนื้อหาสำคัญ (1 ครั้ง/หน้า)
`<article>`	บทความ	เนื้อหาอิสระที่สมบูรณ์
`<section>`	ส่วนเนื้อหา	กลุ่มเนื้อหาที่เกี่ยวข้อง
`<aside>`	เนื้อหาข้างเคียง	ไซด์บาร์, เนื้อหาเสริม
`<footer>`	ส่วนท้าย	ข้อมูลติดต่อ, ลิงก์เสริม

CSS - Cascading Style Sheets

เรียนรู้การจัดรูปแบบเว็บไซต์ด้วย CSS

1. พื้นฐาน CSS - Selectors และ Properties

💡 คำอธิบาย

CSS ใช้ Selectors เลือกองค์ประกอบ แล้วกำหนด Properties เพื่อตกแต่ง

/* Element Selector - เลือกตาม tag */
p {
    color: #111827;
    font-size: 16px;
}

/* Class Selector - เลือกด้วย . */
.highlight {
    background-color: #fef3c7;
    font-weight: bold;
}

/* ID Selector - เลือกด้วย # */
#header {
    background: #111827;
    color: white;
    padding: 20px;
}

นี่คือข้อความตัวอย่าง

ข้อความที่เน้น

Selectors หลัก:

p - เลือกทุก <p>
.class - เลือกตาม class
#id - เลือกตาม id
* - เลือกทุกองค์ประกอบ
div p - เลือก <p> ภายใน <div>

2. การใช้ Margin และ Padding

💡 คำอธิบาย

Margin = ระยะห่างภายนอก, Padding = ระยะห่างภายใน

.box {
    /* Padding - ช่องว่างภายใน */
    padding: 20px; /* ทุกด้าน */
    padding: 10px 20px; /* บน-ล่าง ซ้าย-ขวา */
    padding: 10px 20px 15px 25px; /* บน ขวา ล่าง ซ้าย */
    
    /* Margin - ช่องว่างภายนอก */
    margin: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}

Margin (ภายนอก)

Content

พื้นที่สีเหลือง = Margin

Padding (ภายใน)

Content

พื้นที่สีน้ำเงิน = Padding

Padding: 10px Margin: 10px

ทดลองปรับค่า

3. Flexbox - จัดวาง Layout แบบยืดหยุ่น

💡 คำอธิบาย

Flexbox ช่วยจัดวางองค์ประกอบในแนวแถว (row) หรือคอลัมน์ (column) ได้ง่าย

.container {
    display: flex;
    justify-content: center; /* แนวนอน */
    align-items: center; /* แนวตั้ง */
    gap: 10px; /* ระยะห่าง */
}

.item {
    flex: 1; /* ขยายเท่ากัน */
}

justify-content: align-items:

4. Responsive Design - ปรับตามขนาดหน้าจอ

💡 คำอธิบาย

ใช้ Media Query เพื่อปรับ CSS ตามขนาดหน้าจอของอุปกรณ์

/* Desktop - ค่าปกติ */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Tablet - หน้าจอเล็กกว่า 768px */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - หน้าจอเล็กกว่า 480px */
@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

Breakpoints ที่นิยมใช้:

Mobile: 0-480px (1 คอลัมน์)
Tablet: 481-768px (2 คอลัมน์)
Desktop: 769px+ (3-4 คอลัมน์)

Card 1

Card 2

Card 3

Card 4

ลองปรับขนาดหน้าจอเพื่อดูการเปลี่ยนแปลง

JavaScript - เพิ่มความสามารถให้เว็บไซต์

เรียนรู้การเขียนโปรแกรมเพื่อทำให้เว็บไซต์มีปฏิสัมพันธ์

1. ตัวแปร Variables - เก็บข้อมูล

💡 คำอธิบาย

ตัวแปรใช้เก็บข้อมูล มี 3 แบบ: let (เปลี่ยนได้), const (ไม่เปลี่ยน), var (แบบเก่า)

// ประกาศตัวแปร
let userName = "สมชาย";
let age = 25;
const PI = 3.14159;

// แสดงผล
console.log(userName); // สมชาย
console.log("อายุ: " + age); // อายุ: 25

// เปลี่ยนค่า
age = 26; // ✅ ทำได้
PI = 3.14; // ❌ Error! const เปลี่ยนไม่ได้

กดปุ่มเพื่อดูผล

ชนิดข้อมูล (Data Types):

String: "ข้อความ"
Number: 42, 3.14
Boolean: true, false
Array: [1, 2, 3]
Object: {name: "John", age: 30}

2. การทำงานกับ DOM (Document Object Model)

💡 คำอธิบาย

DOM คือการเข้าถึงและเปลี่ยนแปลงองค์ประกอบ HTML ด้วย JavaScript

// เลือกองค์ประกอบ
let element = document.getElementById("myDiv");
let items = document.getElementsByClassName("item");
let box = document.querySelector(".box");

// เปลี่ยนเนื้อหา
element.innerHTML = "เนื้อหาใหม่";
element.textContent = "ข้อความใหม่";

// เปลี่ยน Style
element.style.color = "red";
element.style.fontSize = "20px";

// เพิ่ม/ลบ Class
element.classList.add("active");
element.classList.remove("hidden");

คลิกปุ่มเพื่อเปลี่ยนแปลง

3. การใช้งาน Events - รับการกระทำจากผู้ใช้

💡 คำอธิบาย

Events ใช้รับการกระทำต่างๆ เช่น คลิก, พิมพ์, เลื่อนเมาส์

// Click Event
button.addEventListener("click", function() {
    alert("ถูกคลิก!");
});

// Input Event
input.addEventListener("input", function(e) {
    console.log(e.target.value);
});

// Mouse Events
div.addEventListener("mouseenter", function() {
    this.style.background = "lightblue";
});

div.addEventListener("mouseleave", function() {
    this.style.background = "white";
});

Click Counter

Live Input

พิมพ์อะไรก็ได้...

Events ที่ใช้บ่อย:

click - คลิกเมาส์
input - พิมพ์ข้อมูล
change - เปลี่ยนค่า
submit - ส่งฟอร์ม
mouseenter/mouseleave - เลื่อนเมาส์เข้า/ออก

4. Functions และ Arrays

💡 คำอธิบาย

Functions คือชุดคำสั่งที่เรียกใช้ซ้ำได้, Arrays คือตัวแปรที่เก็บหลายค่า

// Function - สร้างฟังก์ชัน
function greet(name) {
    return "สวัสดี " + name;
}

console.log(greet("สมชาย")); // สวัสดี สมชาย

// Arrow Function (แบบสั้น)
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

// Arrays - อาเรย์
let fruits = ["แอปเปิ้ล", "กล้วย", "ส้ม"];

// เพิ่มข้อมูล
fruits.push("มะม่วง");

// วนลูป
fruits.forEach(function(fruit) {
    console.log(fruit);
});

Todo List

✓ ตัวอย่าง Todo

Array Methods:

push() - เพิ่มท้ายอาเรย์
pop() - ลบตัวสุดท้าย
forEach() - วนลูป
map() - แปลงค่าทุกตัว
filter() - กรองข้อมูล