Docs/Basic/พื้นฐาน HTML
Basic

พื้นฐาน HTML

·47 ครั้งที่อ่าน

การเขียน HTML ให้มองเหมือนการ "ต่อเลโก้" หรือการ "วาดโครงกระดูก" ของบ้านครับ เราไม่ได้เน้นความสวยงามในขั้นตอนนี้ แต่เราเน้นว่า "อะไรอยู่ตรงไหน" และ "ชิ้นส่วนนี้คืออะไร"

1. Tag คืออะไร?

Tag คือคำสั่งที่บอก Browser ว่าข้อความหรือข้อมูลนั้นคืออะไร โดยปกติจะมาเป็นคู่คือ Tag เปิด และ Tag ปิด

  • <div> : ย่อมาจาก Division คือ "กล่อง" เปล่าๆ เอาไว้รวมกลุ่มสารพัดสิ่ง

  • <form> : คือ "แบบฟอร์ม" เอาไว้ครอบพวกช่องกรอกข้อมูลหรือปุ่มส่งค่า

  • <button> : คือ "ปุ่ม" ที่กดได้จริง

2. การวางโครงสร้างหน้าเว็บ (Standard Structure)

หน้าเว็บหนึ่งหน้าจะถูกแบ่งเป็นส่วนหลักๆ เพื่อให้ Google หรือ Browser อ่านง่าย ดังนี้ครับ:

  1. Header: ส่วนหัว (โลโก้, เมนูนำทาง)

  2. Main/Section: ส่วนเนื้อหาหลัก

  3. Footer: ส่วนท้าย (ที่อยู่, ลิงก์โซเชียล)

3. ตัวอย่าง Code HTML (แบบจัดเต็ม)

ลองดู Code ชุดนี้ครับ ผมจำลองหน้า "สมัครสมาชิก" แบบง่ายๆ มาให้ดูว่าแต่ละ Tag ทำงานร่วมกันยังไง

<!DOCTYPE html>
<html>
<head>
    <title>หน้าทดสอบของฉัน</title>
</head>
<body>

    <header>
        <h1>ยินดีต้อนรับเข้าสู่ระบบ</h1>
    </header>

    <main>
        <div class="registration-container">
            <h2>สมัครสมาชิกใหม่</h2>
            
            <form action="/submit-data" method="POST">
                
                <div>
                    <label>ชื่อผู้ใช้งาน:</label>
                    <input type="text" placeholder="กรอกชื่อที่นี่">
                </div>

                <div>
                    <label>รหัสผ่าน:</label>
                    <input type="password">
                </div>

                <button type="submit">ยืนยันการสมัคร</button>
                
            </form>
        </div>
    </main>

    <footer>
        <p>&copy; 2026 My Awesome Website</p>
    </footer>

</body>
</html>

สรุปหน้าที่ของแต่ละส่วน:

  • <html>: รากเหง้าของทุกอย่าง (เปรียบเหมือนตัวบ้าน)

  • <head>: ส่วนที่เก็บข้อมูลลับ/การตั้งค่า (คนดูไม่เห็นบนหน้าเว็บ แต่ Browser เห็น)

  • <body>: ส่วนที่โชว์ทุกอย่างให้คนเห็น

  • <h1> - <h6>: หัวข้อ (ใหญ่ไปเล็ก)

  • <p>: ย่อหน้าข้อความทั่วไป

💡 ข้อแนะนำ: เวลาเขียน HTML พยายาม "เยื้อง" (Indent) ให้สวยงามแบบตัวอย่างด้านบนนะครับ จะช่วยให้เราไม่หลงว่า <div> ตัวไหนเปิดแล้วยังไม่ได้ปิด