บทเรียนการสร้างเว็บไซต์พื้นฐาน

HTML Cheat Sheet - สรุปคำสั่ง 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>
    <!-- เนื้อหา -->
</body>
</html>

แท็กข้อความ (Text Tags)

แท็ก คำอธิบาย ตัวอย่าง
<h1> ถึง <h6> หัวเรื่อง (ใหญ่สุดถึงเล็กสุด) <h1>หัวข้อหลัก</h1>
<p> ย่อหน้า <p>ข้อความ</p>
<br> ขึ้นบรรทัดใหม่ บรรทัด 1<br>บรรทัด 2
<hr> เส้นแบ่งแนวนอน <hr>
<strong> ตัวหนา (เน้นความสำคัญ) <strong>สำคัญ</strong>
<em> ตัวเอียง (เน้น) <em>เน้น</em>
<mark> ไฮไลท์ข้อความ <mark>ไฮไลท์</mark>
<small> ตัวอักษรเล็ก <small>เล็ก</small>
<del> ขีดฆ่า <del>ลบ</del>
<ins> ขีดเส้นใต้ <ins>เพิ่ม</ins>
<sub> ตัวห้อย H<sub>2</sub>O
<sup> ตัวยก x<sup>2</sup>

รายการ (Lists)

<!-- รายการมีลำดับ -->
<ol>
    <li>ขั้นตอนที่ 1</li>
    <li>ขั้นตอนที่ 2</li>
</ol>

<!-- รายการไม่มีลำดับ -->
<ul>
    <li>รายการ A</li>
    <li>รายการ B</li>
</ul>

<!-- รายการคำจำกัดความ -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

ลิงก์และรูปภาพ

<!-- ลิงก์ -->
<a href="https://example.com">ข้อความลิงก์</a>
<a href="page.html">หน้าภายใน</a>
<a href="#section">ไปยังส่วนในหน้า</a>
<a href="mailto:email@example.com">ส่งอีเมล</a>
<a href="tel:+66812345678">โทร</a>
<a href="file.pdf" download>ดาวน์โหลด</a>
<a href="https://example.com" target="_blank">เปิดแท็บใหม่</a>

<!-- รูปภาพ -->
<img src="image.jpg" alt="คำอธิบาย">
<img src="image.jpg" alt="คำอธิบาย" width="300" height="200">

<!-- รูปภาพที่คลิกได้ -->
<a href="page.html">
    <img src="image.jpg" alt="คำอธิบาย">
</a>

ตาราง (Tables)

<table>
    <thead>
        <tr>
            <th>หัวข้อ 1</th>
            <th>หัวข้อ 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ข้อมูล 1</td>
            <td>ข้อมูล 2</td>
        </tr>
    </tbody>
</table>

ฟอร์ม (Forms)

<form action="process.php" method="POST">
    <!-- ช่องกรอกข้อความ -->
    <input type="text" name="username" placeholder="ชื่อผู้ใช้" required>

    <!-- รหัสผ่าน -->
    <input type="password" name="password" required>

    <!-- อีเมล -->
    <input type="email" name="email" required>

    <!-- ตัวเลข -->
    <input type="number" name="age" min="1" max="100">

    <!-- วันที่ -->
    <input type="date" name="birthday">

    <!-- Checkbox -->
    <input type="checkbox" name="agree" value="yes" id="agree">
    <label for="agree">ยอมรับเงื่อนไข</label>

    <!-- Radio -->
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">ชาย</label>
    <input type="radio" name="gender" value="female" id="female">
    <label for="female">หญิง</label>

    <!-- Select -->
    <select name="country">
        <option value="">เลือกประเทศ</option>
        <option value="th">ไทย</option>
        <option value="us">สหรัฐอเมริกา</option>
    </select>

    <!-- Textarea -->
    <textarea name="message" rows="5" cols="30"></textarea>

    <!-- ปุ่ม -->
    <button type="submit">ส่งข้อมูล</button>
    <button type="reset">ล้างข้อมูล</button>
</form>

Semantic HTML

<header>ส่วนหัว</header>
<nav>เมนูนำทาง</nav>
<main>เนื้อหาหลัก</main>
<section>ส่วนของเนื้อหา</section>
<article>บทความ</article>
<aside>เนื้อหาเสริม/Sidebar</aside>
<footer>ส่วนท้าย</footer>
<figure>
    <img src="image.jpg" alt="รูปภาพ">
    <figcaption>คำบรรยายภาพ</figcaption>
</figure>

สื่อ (Media)

<!-- วิดีโอ -->
<video src="video.mp4" controls width="640" height="360">
    เบราว์เซอร์ไม่รองรับ
</video>

<!-- เสียง -->
<audio src="audio.mp3" controls>
    เบราว์เซอร์ไม่รองรับ
</audio>

<!-- iframe -->
<iframe src="https://example.com" width="600" height="400"></iframe>

Attributes ที่ใช้บ่อย

Attribute คำอธิบาย ตัวอย่าง
id ตัวระบุเฉพาะ (ใช้ครั้งเดียว) <div id="header">
class คลาส (ใช้ได้หลายครั้ง) <p class="text-red">
style CSS แบบ Inline <p style="color: red;">
title คำอธิบายเมื่อเอาเมาส์ชี้ <a title="คลิกที่นี่">
data-* เก็บข้อมูลเพิ่มเติม <div data-id="123">
hidden ซ่อน Element <div hidden>
disabled ปิดการใช้งาน <button disabled>
readonly อ่านอย่างเดียว <input readonly>

HTML Entities (อักขระพิเศษ)

Entity สัญลักษณ์ คำอธิบาย
&lt; < น้อยกว่า
&gt; > มากกว่า
&amp; & And
&quot; " เครื่องหมายคำพูด
&apos; ' Apostrophe
&nbsp; ช่องว่าง
&copy; © Copyright
&reg; ® Registered
&trade; ™ Trademark

Meta Tags ที่สำคัญ

<head>
    <!-- Character Set -->
    <meta charset="UTF-8">

    <!-- Viewport (สำหรับ Responsive) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Description -->
    <meta name="description" content="คำอธิบายเว็บไซต์">

    <!-- Keywords -->
    <meta name="keywords" content="html, css, javascript">

    <!-- Author -->
    <meta name="author" content="ชื่อผู้เขียน">

    <!-- Refresh -->
    <meta http-equiv="refresh" content="30">

    <!-- Open Graph (Facebook) -->
    <meta property="og:title" content="ชื่อเรื่อง">
    <meta property="og:description" content="คำอธิบาย">
    <meta property="og:image" content="image.jpg">
</head>

เทมเพลตพื้นฐาน

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="คำอธิบายเว็บไซต์">
    <title>ชื่อเว็บไซต์</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">หน้าแรก</a></li>
                <li><a href="/about">เกี่ยวกับ</a></li>
                <li><a href="/contact">ติดต่อ</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h1>หัวข้อหลัก</h1>
            <p>เนื้อหา</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 ชื่อเว็บไซต์. สงวนลิขสิทธิ์.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

💡 Tips:

  • ใช้ Semantic HTML เพื่อ SEO ที่ดีขึ้น
  • ใส่ alt ในรูปภาพเสมอ
  • ใช้ id เฉพาะเจาะจง, ใช้ class สำหรับกลุ่ม
  • ตรวจสอบ HTML ด้วย W3C Validator

เรียนจบบทนี้แล้ว?

ลองทำแบบฝึกหัดเพื่อทดสอบความเข้าใจ หรือไปบทถัดไปเลย!

กลับหน้าแรก