HTML คือภาษาพื้นฐานที่สุดของการทำเว็บ ทุกหน้าเว็บที่คุณเห็นบนอินเทอร์เน็ตล้วนสร้างจาก HTML บทความนี้จะพาคุณเรียนรู้ตั้งแต่ศูนย์จนเข้าใจโครงสร้าง แท็กสำคัญ และเขียนหน้าเว็บจริงได้ ═══════════════════════════════════════ 📌 1. HTML คืออะไร ═══════════════════════════════════════ HTML ย่อมาจาก HyperText Markup Language เป็น "ภาษามาร์กอัป" ที่ใช้กำหนดโครงสร้างและเนื้อหาของหน้าเว็บ ไม่ใช่ภาษาโปรแกรม (ไม่มีตรรกะ if/loop) แต่ใช้ "แท็ก" (Tag) บอกเบราว์เซอร์ว่า ส่วนไหนเป็นหัวข้อ ย่อหน้า รูปภาพ ลิงก์ ฯลฯ เปรียบเทียบง่าย ๆ กับการสร้างบ้าน: • HTML = โครงสร้างบ้าน (เสา ผนัง ห้อง) • CSS = การตกแต่ง (สี วอลเปเปอร์ เฟอร์นิเจอร์) • JavaScript = ระบบไฟฟ้า/การทำงาน (เปิดปิดไฟ ประตูอัตโนมัติ) ═══════════════════════════════════════ 🏷️ 2. แท็ก (Tag) และอิลิเมนต์ (Element) ทำงานอย่างไร ═══════════════════════════════════════ แท็กส่วนใหญ่มาเป็น "คู่" คือ แท็กเปิด และ แท็กปิด (มี / นำหน้า) ```html <p>สวัสดีชาวโลก</p> │ │ │ │ └เนื้อหา └แท็กปิด └แท็กเปิด ``` • <p> = แท็กเปิด (opening tag) • สวัสดีชาวโลก = เนื้อหา (content) • </p> = แท็กปิด (closing tag) • ทั้งหมดรวมกัน = 1 อิลิเมนต์ (element) บางแท็กไม่มีแท็กปิด เรียกว่า "Empty/Void Element" เช่น ```html <br> (ขึ้นบรรทัดใหม่) <img> (รูปภาพ) <hr> (เส้นคั่น) ``` ═══════════════════════════════════════ 🧱 3. โครงสร้างพื้นฐานของหน้า 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> </head> <body> <h1>สวัสดีครับ</h1> <p>นี่คือหน้าเว็บแรกของผม</p> </body> </html> ``` อธิบายแต่ละส่วน: • <!DOCTYPE html> → บอกว่าเป็นเอกสาร HTML5 • <html lang="th"> → ราก(root)ของเอกสาร กำหนดภาษาเป็นไทย • <head> → ข้อมูลเบื้องหลัง (ไม่แสดงบนหน้า) เช่น title, meta, ลิงก์ CSS • <meta charset="UTF-8"> → กำหนดชุดอักขระ (รองรับภาษาไทย/อีโมจิ) • <meta name="viewport"...> → ทำให้แสดงผลดีบนมือถือ (สำคัญมาก!) • <title> → ชื่อที่แสดงบนแท็บเบราว์เซอร์ • <body> → เนื้อหาทั้งหมดที่ผู้ใช้เห็นบนหน้าจอ ═══════════════════════════════════════ ✍️ 4. แท็กข้อความที่ใช้บ่อย ═══════════════════════════════════════ หัวข้อ (Heading) มี 6 ระดับ h1 (ใหญ่สุด) ถึง h6 (เล็กสุด) ```html <h1>หัวข้อใหญ่สุด</h1> <h2>หัวข้อรอง</h2> <h3>หัวข้อย่อย</h3> ``` ย่อหน้าและการจัดข้อความ ```html <p>นี่คือย่อหน้าหนึ่ง</p> <b>ตัวหนา</b> หรือ <strong>สำคัญ (ตัวหนา)</strong> <i>ตัวเอียง</i> หรือ <em>เน้น (ตัวเอียง)</em> <u>ขีดเส้นใต้</u> <mark>ไฮไลต์</mark> <br> → ขึ้นบรรทัดใหม่ <hr> → เส้นคั่นแนวนอน ``` *** เคล็ดลับ: ใช้ <strong> และ <em> แทน <b>/<i> จะดีต่อ SEO และการเข้าถึง *** ═══════════════════════════════════════ 🔗 5. ลิงก์และรูปภาพ ═══════════════════════════════════════ ลิงก์ (Anchor) — ใช้แท็ก <a> กับแอตทริบิวต์ href ```html <a href="https://www.google.com">ไปที่ Google</a> <a href="https://google.com" target="_blank">เปิดในแท็บใหม่</a> <a href="page2.html">ไปหน้าถัดไป</a> ``` รูปภาพ — ใช้แท็ก <img> (ไม่มีแท็กปิด) ```html <img src="cat.jpg" alt="รูปแมวน่ารัก" width="300"> ``` • src → ที่อยู่ของรูป (path หรือ URL) • alt → ข้อความแทนรูป (แสดงเมื่อโหลดรูปไม่ได้ + ช่วยผู้พิการทางสายตา) • width → ความกว้าง (พิกเซล) ═══════════════════════════════════════ 📋 6. รายการ (List) ═══════════════════════════════════════ รายการแบบไม่เรียงลำดับ (จุด bullet) — <ul> ```html <ul> <li>แอปเปิล</li> <li>กล้วย</li> <li>ส้ม</li> </ul> ``` รายการแบบเรียงลำดับ (ตัวเลข) — <ol> ```html <ol> <li>ตื่นนอน</li> <li>แปรงฟัน</li> <li>กินข้าว</li> </ol> ``` • <ul> = Unordered List (มีจุดนำหน้า) • <ol> = Ordered List (มีตัวเลขนำหน้า) • <li> = List Item (แต่ละรายการ) ═══════════════════════════════════════ 📊 7. ตาราง (Table) ═══════════════════════════════════════ ```html <table border="1"> <thead> <tr> <th>ชื่อ</th> <th>อายุ</th> </tr> </thead> <tbody> <tr> <td>สมชาย</td> <td>25</td> </tr> <tr> <td>สมหญิง</td> <td>23</td> </tr> </tbody> </table> ``` • <table> → ตาราง • <tr> → แถว (Table Row) • <th> → หัวคอลัมน์ (ตัวหนา จัดกลาง) • <td> → ช่องข้อมูล (Table Data) • <thead>/<tbody> → แบ่งส่วนหัว/ตัวตาราง ═══════════════════════════════════════ 📝 8. ฟอร์ม (Form) — รับข้อมูลจากผู้ใช้ ═══════════════════════════════════════ ```html <form action="/submit" method="POST"> <label>ชื่อ:</label> <input type="text" name="name" placeholder="กรอกชื่อ"> <label>อีเมล:</label> <input type="email" name="email" required> <label>รหัสผ่าน:</label> <input type="password" name="password"> <label>ข้อความ:</label> <textarea name="message" rows="4"></textarea> <label>เพศ:</label> <select name="gender"> <option value="m">ชาย</option> <option value="f">หญิง</option> </select> <button type="submit">ส่งข้อมูล</button> </form> ``` ชนิดของ input (type) ที่ใช้บ่อย: • text → ข้อความทั่วไป • email → อีเมล (ตรวจรูปแบบให้) • password → รหัสผ่าน (แสดงเป็นจุด) • number → ตัวเลข • date → วันที่ • checkbox → ช่องติ๊กเลือกได้หลายอัน • radio → เลือกได้อันเดียว • file → อัปโหลดไฟล์ แอตทริบิวต์สำคัญ: name (ชื่อฟิลด์), placeholder (ข้อความแนะนำ), required (บังคับกรอก) ═══════════════════════════════════════ 🏗️ 9. Semantic Tags — แท็กเชิงความหมาย (HTML5) ═══════════════════════════════════════ แทนที่จะใช้ <div> ไปหมด ควรใช้แท็กที่สื่อความหมาย ช่วยเรื่อง SEO และการเข้าถึง ```html <header> → ส่วนหัวเว็บ (โลโก้ เมนู) <nav> → แถบเมนูนำทาง <main> → เนื้อหาหลัก <section> → ส่วน/หมวดของเนื้อหา <article> → บทความ/เนื้อหาที่จบในตัว <aside> → เนื้อหาข้าง (sidebar) <footer> → ส่วนท้ายเว็บ ``` ตัวอย่างโครงหน้าเว็บ: ```html <body> <header>โลโก้ + เมนู</header> <nav>หน้าแรก | สินค้า | ติดต่อ</nav> <main> <article>เนื้อหาบทความ</article> <aside>โฆษณา/ลิงก์ที่เกี่ยวข้อง</aside> </main> <footer>© 2026 เว็บของฉัน</footer> </body> ``` ═══════════════════════════════════════ ⚙️ 10. แอตทริบิวต์ (Attribute) และ Block vs Inline ═══════════════════════════════════════ แอตทริบิวต์ = ข้อมูลเสริมของแท็ก เขียนในแท็กเปิด รูปแบบ ชื่อ="ค่า" ```html <img src="a.jpg" alt="ภาพ" width="200"> <a href="x.html" target="_blank" title="คำอธิบาย">ลิงก์</a> <div id="box1" class="card">กล่อง</div> ``` แอตทริบิวต์สากลที่ใช้ได้ทุกแท็ก: • id → ชื่อเฉพาะ (ห้ามซ้ำในหน้าเดียว) ใช้อ้างอิง • class → กลุ่ม (ซ้ำได้) ใช้จัดสไตล์ด้วย CSS • style → ใส่ CSS ตรง ๆ เช่น style="color:red;" Block vs Inline: • Block-level → ขึ้นบรรทัดใหม่ กินความกว้างเต็มแถว เช่น <div>, <p>, <h1>, <ul>, <section> • Inline → อยู่ในบรรทัดเดียวกัน กินพื้นที่เท่าเนื้อหา เช่น <span>, <a>, <b>, <img> ═══════════════════════════════════════ 🎯 11. ตัวอย่างหน้าเว็บสมบูรณ์ (นำไปใช้ได้จริง) ═══════════════════════════════════════ ```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> <header> <h1>สมชาย ใจดี</h1> <p>นักพัฒนาเว็บมือใหม่</p> </header> <nav> <a href="#about">เกี่ยวกับ</a> | <a href="#skills">ทักษะ</a> | <a href="#contact">ติดต่อ</a> </nav> <main> <section id="about"> <h2>เกี่ยวกับฉัน</h2> <p>สวัสดีครับ ผมกำลังเรียน HTML อยู่</p> </section> <section id="skills"> <h2>ทักษะ</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </section> </main> <footer> <p>© 2026 สมชาย ใจดี</p> </footer> </body> </html> ``` ลองคัดลอกโค้ดนี้ไปวางในไฟล์ .html แล้วเปิดด้วยเบราว์เซอร์ได้เลย! ═══════════════════════════════════════ ✅ 12. สรุปและเคล็ดลับสำหรับมือใหม่ ═══════════════════════════════════════ • ทุกหน้าเริ่มด้วย <!DOCTYPE html> และมี head + body เสมอ • ปิดแท็กให้ครบ และจัดย่อหน้า (indent) ให้อ่านง่าย • ใช้ Semantic tags แทน <div> ล้วน ๆ เพื่อ SEO ที่ดี • ใส่ alt ให้รูปภาพเสมอ และใส่ viewport meta เพื่อรองรับมือถือ • HTML วางโครงสร้าง → ใช้ CSS แต่งสวย → ใช้ JavaScript เพิ่มลูกเล่น จำไว้ว่า: วิธีเรียน HTML ที่ดีที่สุดคือ "ลงมือเขียนจริง" เปิดโปรแกรมแก้ไขข้อความ สร้างไฟล์ .html แล้วทดลองเล่นกับแท็กต่าง ๆ 🚀