01-html.html

<div class="breadcrumb">
  <span class="breadcrumb-link" onclick="loadLesson('intro')">หน้าแรก</span> / <span>HTML</span>
</div>

<h2><span class="emoji">🏗️</span>HTML - โครงสร้างของเว็บเพจ</h2>

<p>HTML (HyperText Markup Language) คือภาษาที่ใช้สำหรับสร้างโครงสร้างของเว็บเพจ คิดว่า HTML เป็นกระดูกสันหลังของเว็บไซต์ ที่กำหนดว่าเนื้อหาต่างๆ ควรจะอยู่ที่ไหน</p>

<h3>โครงสร้างพื้นฐานของเอกสาร HTML</h3>

<pre><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang="th"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;ชื่อของเพจ&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;สวัสดี!&lt;/h1&gt;
    &lt;p&gt;นี่คือเว็บเพจแรกของฉัน&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h3>ส่วนประกอบหลัก</h3>

<div class="step-card">
  <h4>&lt;!DOCTYPE html&gt;</h4>
  <p>บอกให้เบราว์เซอร์รู้ว่านี่คือเอกสาร HTML5 (เวอร์ชันล่าสุด)</p>
</div>

<div class="step-card">
  <h4>&lt;html&gt; ... &lt;/html&gt;</h4>
  <p>แท็กรูทที่ห่อหุ้มเนื้อหาทั้งหมดของเว็บเพจ</p>
</div>

<div class="step-card">
  <h4>&lt;head&gt; ... &lt;/head&gt;</h4>
  <p>ส่วนที่มีข้อมูลเมตา (metadata) เช่น ชื่อเพจ, การเข้ารหัส, ลิงก์ไปยัง CSS ฯลฯ (ไม่แสดงบนเพจ)</p>
</div>

<div class="step-card">
  <h4>&lt;body&gt; ... &lt;/body&gt;</h4>
  <p>ส่วนที่มีเนื้อหาที่แสดงบนเว็บเพจ (สิ่งที่ผู้ใช้เห็น)</p>
</div>

<h3>แท็กที่ใช้บ่อย</h3>

<table class="comparison-table">
  <tr>
    <th>แท็ก</th>
    <th>ความหมาย</th>
    <th>ตัวอย่าง</th>
  </tr>
  <tr>
    <td>&lt;h1&gt; - &lt;h6&gt;</td>
    <td>หัวเรื่อง (h1 ใหญ่ที่สุด, h6 เล็กที่สุด)</td>
    <td>&lt;h1&gt;หัวเรื่องหลัก&lt;/h1&gt;</td>
  </tr>
  <tr>
    <td>&lt;p&gt;</td>
    <td>ย่อหน้า</td>
    <td>&lt;p&gt;นี่คือข้อความ&lt;/p&gt;</td>
  </tr>
  <tr>
    <td>&lt;a&gt;</td>
    <td>ลิงก์</td>
    <td>&lt;a href="url"&gt;คลิกที่นี่&lt;/a&gt;</td>
  </tr>
  <tr>
    <td>&lt;img&gt;</td>
    <td>รูปภาพ</td>
    <td>&lt;img src="image.jpg" alt="รูป"&gt;</td>
  </tr>
  <tr>
    <td>&lt;ul&gt; / &lt;li&gt;</td>
    <td>รายการไม่เรียงลำดับ</td>
    <td>&lt;ul&gt;&lt;li&gt;รายการ 1&lt;/li&gt;&lt;/ul&gt;</td>
  </tr>
  <tr>
    <td>&lt;div&gt;</td>
    <td>ตัวแบ่งเนื้อหา</td>
    <td>&lt;div&gt;เนื้อหา&lt;/div&gt;</td>
  </tr>
</table>

<h3>ตัวอย่างการสร้างหน้าเว็บง่ายๆ</h3>

<pre><code class="language-html">
  &lt;!DOCTYPE html&gt;
  &lt;html lang="th"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;เว็บเพจของฉัน&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;ยินดีต้อนรับ!&lt;/h1&gt;
  &lt;p&gt;นี่คือเว็บเพจแรกของฉัน&lt;/p&gt;

  &lt;h2&gt;เกี่ยวกับฉัน&lt;/h2&gt;
  &lt;p&gt;ฉันกำลังเรียนรู้การเขียนเว็บ&lt;/p&gt;

  &lt;h2&gt;สิ่งที่ฉันชอบ&lt;/h2&gt;
  &lt;ul&gt;
  &lt;li&gt;การเขียนโปรแกรม&lt;/li&gt;
  &lt;li&gt;การออกแบบ&lt;/li&gt;
  &lt;li&gt;การสอน&lt;/li&gt;
  &lt;/ul&gt;

  &lt;a href="https://example.com"&gt;ไปยังเว็บไซต์อื่น&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
</code></pre>

<div class="tip">
  <strong>💡 เคล็ดลับ:</strong> ใช้ Indentation (เยื้องบรรทัด) เพื่อให้โค้ดอ่านง่ายขึ้น VS Code จะช่วยคุณทำสิ่งนี้โดยอัตโนมัติ
</div>

<div class="navigation">
  <button class="btn btn-primary" id="prev-btn" data-current="html">← ก่อนหน้า</button>
  <button class="btn btn-primary" id="next-btn" data-current="html">ถัดไป →</button>
</div>

<div class="lesson-quiz">
  <h3>แบบทดสอบสั้นๆ (HTML)</h3>
  <div data-quiz-src="exercises/html-quiz.json"></div>
</div>