Learn HTML - เรียนรู้ HTML

🎯 HTML คืออะไร?
What is HTML?

💡 Amazing Fact! / ข้อเท็จจริงน่าทึ่ง!

English: HTML was created in 1991 by Tim Berners-Lee. Every website you visit is built with HTML! There are over 1.9 billion websites on the internet today!

ไทย: HTML ถูกสร้างในปี 1991 โดย Tim Berners-Lee ทุกเว็บไซต์ที่คุณเข้าชมสร้างด้วย HTML! มีเว็บไซต์มากกว่า 1.9 พันล้านเว็บบนอินเทอร์เน็ตในปัจจุบัน!

HTML ย่อมาจากอะไร?

HTML ย่อมาจาก HyperText Markup Language

HyperText: ข้อความที่มีลิงก์เชื่อมโยงไปหน้าอื่นได้
Markup: ใช้แท็ก (tags) เพื่อจัดรูปแบบข้อความ
Language: ภาษาที่เบราว์เซอร์เข้าใจ

HTML ทำอะไรได้บ้าง?

สร้างโครงสร้างเว็บเพจ (headings, paragraphs, lists)
แสดงรูปภาพและวิดีโอ
สร้างลิงก์ไปหน้าอื่นๆ
สร้างฟอร์มรับข้อมูล (forms)
จัดวางเนื้อหาในตาราง (tables)
เป็นพื้นฐานของทุกเว็บไซต์!

English: HTML is the standard markup language for creating web pages. It describes the structure of a web page using tags and elements.

🤔 Simple Analogy / เปรียบเทียบง่ายๆ

คิดว่าเว็บไซต์เหมือนบ้าน:

HTML = โครงสร้างบ้าน (ผนัง, หลังคา, ประตู)
CSS = การตั้งค่า (สี, ขนาด, ตกแต่ง)
JavaScript = ระบบไฟฟ้า (ทำให้มีการทำงาน)

English: Think of a website like a house - HTML is the structure, CSS is the decoration, and JavaScript makes it functional!

📚 คำศัพท์สำคัญ
Key Vocabulary

📄 HTML

เอชทีเอ็มแอล

HyperText Markup Language - ภาษามาร์กอัปสำหรับสร้างเว็บเพจ
The markup language for creating web pages

🏷️ Tag

แท็ก / ป้ายกำกับ

คำสั่ง HTML ที่อยู่ในเครื่องหมาย < >
HTML command inside angle brackets like <p>

🧩 Element

เอลิเมนต์ / ส่วนประกอบ

แท็กเปิด + เนื้อหา + แท็กปิด รวมกัน
Opening tag + content + closing tag combined

🎨 Attribute

แอตทริบิวต์ / คุณสมบัติ

ข้อมูลเพิ่มเติมในแท็กเปิด เช่น class, id, src
Additional information in opening tag like class, id, src

📋 DOCTYPE

ด็อกไทป์

บอกเบราว์เซอร์ว่าเป็น HTML เวอร์ชันไหน
Tells the browser which HTML version to use

🏠 <html>

แท็ก html

แท็กหลักที่ครอบเอกสาร HTML ทั้งหมด
Root tag that wraps the entire HTML document

🧠 <head>

แท็ก head

ส่วนหัวที่มีข้อมูลเมตา ไม่แสดงบนหน้าเว็บ
Header section with metadata, not displayed on page

📰 <body>

แท็ก body

ส่วนเนื้อหาที่แสดงบนหน้าเว็บ
Content section that displays on the web page

📌 <title>

แท็ก title

ชื่อหน้าเว็บที่แสดงบนแท็บเบราว์เซอร์
Page title shown in browser tab

📝 <p>

แท็ก paragraph

ย่อหน้าข้อความ
Paragraph of text

📊 <h1> - <h6>

แท็ก heading

หัวข้อ 6 ระดับ (h1 ใหญ่สุด, h6 เล็กสุด)
Headings in 6 levels (h1 largest, h6 smallest)

🔗 <a>

แท็ก anchor / ลิงก์

สร้างลิงก์ไปยัง URL อื่น
Creates a hyperlink to another URL

🖼️ <img>

แท็ก image

แสดงรูปภาพ
Displays an image

📋 <div>

แท็ก division

กล่องสำหรับจัดกลุ่มเนื้อหา
Container box for grouping content

✨ <span>

แท็ก span

กล่องเล็กสำหรับจัดรูปแบบข้อความบางส่วน
Inline container for styling parts of text

📝 <ul> / <ol>

แท็ก list

รายการแบบไม่เรียงลำดับ / เรียงลำดับ
Unordered list / Ordered list

📊 <table>

แท็ก table

สร้างตาราง
Creates a table

📝 <form>

แท็ก form

สร้างแบบฟอร์มรับข้อมูล
Creates an input form

💬

คอมเมนต์

หมายเหตุที่ไม่แสดงบนหน้าเว็บ
Comment that doesn't display on the page

🌐 Browser

เบราว์เซอร์

โปรแกรมที่แสดง HTML เช่น Chrome, Firefox
Program that displays HTML like Chrome, Firefox

🎉 ยอดเยี่ยม! คุณได้เรียนรู้คำศัพท์ HTML สำคัญแล้ว 20 คำ!
Excellent! You've learned 20 important HTML vocabulary words!

💻 สร้างไฟล์ HTML แรก
Creating Your First HTML File

1เปิด Text Editor / Open a Text Editor

คุณสามารถใช้โปรแกรมเขียนข้อความใดก็ได้:

Windows: Notepad (มีอยู่แล้ว) หรือ Notepad++
Mac: TextEdit หรือ VS Code
แนะนำ: Visual Studio Code (ฟรี, ดีมาก!)

English: You can use any text editor. Notepad works, but Visual Studio Code is recommended for beginners!

💡 Download VS Code / ดาวน์โหลด VS Code

ไปที่ https://code.visualstudio.com และดาวน์โหลดฟรี!

VS Code มีการเติมคำอัตโนมัติ (autocomplete) ที่ช่วยคุณเขียนโค้ดได้เร็วขึ้น

2พิมพ์โครงสร้าง HTML พื้นฐาน / Type Basic HTML Structure

พิมพ์โค้ดนี้ในโปรแกรมของคุณ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is my first HTML page!</p>
</body>
</html>

English: This is the basic structure every HTML page needs. Let me explain each part!

🔍 อธิบายแต่ละส่วน:

<!DOCTYPE html> - บอกว่าเป็น HTML5
<html> - ตัวเริ่มต้นของเอกสาร
<head> - ข้อมูลเมตา (ไม่แสดงบนหน้าเว็บ)
<meta charset="UTF-8"> - รองรับภาษาไทย
<title> - ชื่อบนแท็บเบราว์เซอร์
<body> - เนื้อหาที่แสดงบนหน้าเว็บ
<h1> - หัวข้อใหญ่
<p> - ย่อหน้า

3บันทึกไฟล์ / Save the File

คลิก File > Save As
ตั้งชื่อไฟล์: index.html
เลือกตำแหน่งบันทึก: Desktop หรือโฟลเดอร์ที่จำง่าย
คลิก Save

English: Save your file as index.html. The .html extension is very important - it tells your computer this is a web page!

⚠️ สำคัญมาก! / Very Important!

ไฟล์ต้องลงท้ายด้วย .html หรือ .htm
ห้ามมีช่องว่างในชื่อไฟล์ (ใช้ my-page.html ไม่ใช่ "my page.html")
ใช้ตัวอักษรพิมพ์เล็ก (lowercase) จะดีที่สุด

🌐 เปิดดูในเบราว์เซอร์
Viewing HTML in Your Browser

1วิธีที่ 1: ดับเบิลคลิกไฟล์ / Method 1: Double-Click the File

วิธีง่ายที่สุด:

ไปที่ตำแหน่งที่บันทึกไฟล์ (Desktop หรือโฟลเดอร์)
ดับเบิลคลิกที่ index.html
ไฟล์จะเปิดในเบราว์เซอร์เริ่มต้นของคุณ!

English: Simply double-click your HTML file and it will open in your default browser! You should see "Hello World!" on the page.

2วิธีที่ 2: เปิดจากเบราว์เซอร์ / Method 2: Open from Browser

เปิดเบราว์เซอร์ (Chrome, Firefox, Edge, Safari)
กด Ctrl+O (Windows) หรือ Cmd+O (Mac)
เลือกไฟล์ index.html
คลิก Open

English: Press Control+O to open the file dialog in your browser, then select your HTML file!

3วิธีที่ 3: ลากไฟล์ / Method 3: Drag and Drop

เปิดเบราว์เซอร์ (แท็บใหม่)
ลากไฟล์ index.html จากโฟลเดอร์
วางลงในหน้าต่างเบราว์เซอร์
หน้าเว็บจะเปิดทันที!

English: You can drag and drop your HTML file directly into the browser window - super easy!

🔍 ดู URL Address / Look at the URL Address

เมื่อเปิดไฟล์ local คุณจะเห็น URL แบบนี้:

file:///C:/Users/YourName/Desktop/index.html

ถ้าเห็น file:// แสดงว่ากำลังเปิดจากเครื่องคุณ ไม่ใช่จากอินเทอร์เน็ต

English: When viewing local files, the URL starts with file:// instead of http:// or https://

4แก้ไขและรีเฟรช / Edit and Refresh

ลองแก้ไขหน้าเว็บของคุณ:

เปิดไฟล์ index.html ใน Text Editor
เปลี่ยน "Hello World!" เป็น "สวัสดีครับ!"
บันทึกไฟล์ (Ctrl+S)
กลับไปที่เบราว์เซอร์
กด F5 หรือ Ctrl+R เพื่อรีเฟรช
คุณจะเห็นการเปลี่ยนแปลง!

English: After editing your HTML file, save it and press F5 in the browser to see your changes!

🎊 สุดยอด! คุณเพิ่งสร้างและเปิดหน้าเว็บแรกแล้ว!
Amazing! You just created and opened your first web page!

🎨 โปรเจกต์แรก: หน้าแนะนำตัว
First Project: About Me Page

🎯 What You'll Build / สิ่งที่คุณจะสร้าง

English: Let's create a complete About Me page with headings, paragraphs, lists, images, and links!

ไทย: มาสร้างหน้าแนะนำตัวที่สมบูรณ์พร้อมหัวข้อ ย่อหน้า รายการ รูปภาพ และลิงก์!

1สร้างไฟล์ใหม่ / Create New File

สร้างไฟล์ใหม่ชื่อ about-me.html
พิมพ์โค้ดด้านล่างนี้:

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me - เกี่ยวกับฉัน</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            color: #FF6B6B;
            text-align: center;
        }
        h2 {
            color: #667eea;
            border-bottom: 2px solid #667eea;
            padding-bottom: 5px;
        }
        img {
            max-width: 200px;
            border-radius: 50%;
            display: block;
            margin: 20px auto;
        }
        ul, ol {
            line-height: 2;
        }
        a {
            color: #FF6B6B;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>👋 Hello! I'm [Your Name]</h1>
        
        <!-- คุณสามารถใส่รูปของคุณที่นี่ -->
        <img src="https://via.placeholder.com/200" alt="My Photo">
        
        <h2>📖 About Me / เกี่ยวกับฉัน</h2>
        <p>
            Hi! My name is [Your Name]. I'm learning HTML and web development!
            I'm excited to create my own websites and share them with the world.
        </p>
        <p>
            สวัสดีครับ/ค่ะ ชื่อ [ชื่อของคุณ] กำลังเรียนรู้ HTML และการพัฒนาเว็บไซต์
            ตื่นเต้นมากที่จะได้สร้างเว็บไซต์ของตัวเองและแชร์ให้คนอื่นดู
        </p>
        
        <h2>💡 My Interests / สิ่งที่ชอบ</h2>
        <ul>
            <li>Programming / เขียนโปรแกรม</li>
            <li>Web Design / ออกแบบเว็บ</li>
            <li>Learning English / เรียนภาษาอังกฤษ</li>
            <li>Technology / เทคโนโลยี</li>
        </ul>
        
        <h2>🎯 My Goals / เป้าหมาย</h2>
        <ol>
            <li>Learn HTML, CSS, and JavaScript</li>
            <li>Build my own portfolio website</li>
            <li>Create useful web applications</li>
            <li>Become a web developer</li>
        </ol>
        
        <h2>🔗 Connect With Me / ติดต่อฉัน</h2>
        <p>
            <a href="mailto:your.email@example.com">📧 Email Me</a> | 
            <a href="https://github.com/yourusername">💻 GitHub</a> | 
            <a href="https://twitter.com/yourusername">🐦 Twitter</a>
        </p>
        
        <hr>
        <p style="text-align: center; color: #666;">
            Made with ❤️ using HTML | สร้างด้วย HTML
        </p>
    </div>
</body>
</html>

2ปรับแต่งให้เป็นของคุณ / Customize It

แก้ไขข้อมูลให้เป็นของคุณ:

เปลี่ยน [Your Name] เป็นชื่อจริงของคุณ
เพิ่มความสนใจของคุณในรายการ
ตั้งเป้าหมายที่เป็นของคุณ
ใส่อีเมลและลิงก์โซเชียลมีเดียจริง
เพิ่มรูปของคุณ (หรือใช้รูปตัวการ์ตูน)

English: Replace all the placeholder text with your own information. Make it personal and unique!

3เข้าใจโครงสร้าง / Understand the Structure

ไฟล์นี้มีอะไรบ้าง:

<style> - CSS ในตัวทำให้หน้าสวย
<h1>, <h2> - หัวข้อระดับต่างๆ
<p> - ย่อหน้าข้อความ
<img> - รูปภาพ
<ul> - รายการแบบจุด (bullets)
<ol> - รายการแบบตัวเลข
<a> - ลิงก์
<hr> - เส้นคั่น
- คอมเมนต์

🌟 ยอดเยี่ยม! คุณสร้างหน้าเว็บที่สมบูรณ์แล้ว!
Fantastic! You've created a complete web page!

🚀 ขั้นตอนต่อไป
Next Steps

✅ สิ่งที่คุณได้เรียนรู้ / What You Learned

HTML คืออะไรและทำไมสำคัญ
คำศัพท์ HTML พื้นฐาน 20 คำ
วิธีสร้างไฟล์ HTML ด้วยมือ
วิธีเปิดไฟล์ HTML ในเบราว์เซอร์
โครงสร้างพื้นฐานของหน้า HTML
แท็กสำคัญ: h1-h6, p, img, a, ul, ol
วิธีแก้ไขและรีเฟรชหน้าเว็บ

English: You learned what HTML is, created your first HTML file, opened it in a browser, and built a complete About Me page!

📚 What's Next? / ต่อไปเรียนอะไร?

ในบทเรียนถัดไป คุณจะได้เรียนรู้:

HTML แท็กขั้นสูงและ semantic HTML
การโฮสต์เว็บด้วย Python SimpleHTTPServer
การใช้บริการโฮสต์ฟรี (GitHub Pages, Netlify)
HTML Forms และ Input elements
Tables และ Multimedia (audio, video)
Best Practices สำหรับการเขียน HTML

English: Next, you'll learn advanced HTML tags, how to host your website locally with Python, and how to publish it online for free!

🎉 Congratulations! / ยินดีด้วย!

ไทย: คุณเพิ่งก้าวเข้าสู่โลกของการพัฒนาเว็บ! HTML เป็นพื้นฐานของทุกเว็บไซต์บนอินเทอร์เน็ต เรียนรู้ต่อไปและสร้างเว็บที่น่าทึ่ง!

English: You just entered the world of web development! HTML is the foundation of every website on the internet. Keep learning and build amazing things!

🌐 Happy Coding! / สนุกกับการเขียนโค้ด! 🌐

Made with 💙 for Thai English Learners

สร้างด้วย 💙 สำหรับคนไทยที่กำลังเรียนภาษาอังกฤษ

📱 Tap the 🔊 buttons anytime to hear English pronunciation!

กดปุ่ม 🔊 เมื่อไรก็ได้เพื่อฟังการออกเสียงภาษาอังกฤษ!

🎯 HTML คืออะไร?What is HTML?