VARIX CODE

บทที่ 1: HTML คืออะไร และโครงสร้างพื้นฐาน

HTML (HyperText Markup Language) เป็นภาษามาตรฐานที่ใช้สร้างโครงสร้างของเว็บเพจ ทุกเว็บไซต์ที่คุณเห็นบนอินเทอร์เน็ต—ตั้งแต่ Google, Facebook ไปจนถึงเว็บส่วนตัว—ล้วนสร้างด้วย HTML เป็นพื้นฐาน HTML ถูกพัฒนาโดย W3C และ WHATWG และเป็นส่วนหนึ่งของเว็บมาตั้งแต่ยุค 1990

ทำไม HTML ถึงสำคัญมาก เพราะ browser อ่าน HTML เพื่อรู้ว่าควรแสดงอะไรบนหน้า ไม่ว่าจะเป็น React, Vue, หรือ framework ใดๆ สุดท้ายแล้วก็ต้อง render เป็น HTML ให้ browser แสดงผล การเข้าใจ HTML จึงเป็นทักษะพื้นฐานที่ทุกคนที่ทำเว็บต้องมี

HTML ทำงานแบบ "Markup" คือใช้แท็ก (tags) ล้อมรอบข้อความเพื่อบอกความหมาย เช่น แท็ก <h1> แปลว่าหัวข้อหลัก แท็ก <p> แปลว่าย่อหน้า browser จะแปลความหมายเหล่านี้และแสดงผลให้ผู้ใช้เห็น การใช้แท็กให้ถูกต้องช่วยทั้งการอ่านง่ายของโค้ด และช่วย SEO (Search Engine Optimization) ด้วย

แท็กส่วนใหญ่มีทั้งแท็กเปิดและแท็กปิด เช่น <p>ข้อความ</p>บางแท็กเป็น self-closing เช่น <img>, <br>, <hr>ใน HTML5 สามารถเขียน <img /> หรือ <img> ก็ได้

โครงสร้าง HTML ทุกไฟล์ต้องมีส่วนหลัก 3 ส่วน: DOCTYPE (ประกาศประเภทเอกสารให้ browser รู้ว่าเป็น HTML5),head (ข้อมูลเมตา เช่น title, charset, viewport ที่ไม่แสดงบนหน้าแต่สำคัญต่อการทำงาน) และ body (เนื้อหาที่แสดงบนหน้า) meta charset UTF-8 ทำให้รองรับภาษาไทยได้ และ viewport ทำให้ responsive บนมือถือ

ใน head ยังใส่ได้ เช่น <link> สำหรับ CSS, <script> สำหรับ JavaScript<meta name="description"> สำหรับคำอธิบายหน้ารวมถึง SEO การใส่ lang ในแท็ก html เช่น lang="th" ช่วยให้ screen reader และ search engine รู้ภาษาของหน้า

การเขียน HTML ควรใช้ editor เช่น VS Code และเปิดไฟล์ .html ใน browser เพื่อดูผล แนะนำให้ตั้งค่า format on save และใช้ extension เช่น Prettier เพื่อจัดรูปแบบโค้ดให้อ่านง่าย ควรตั้งชื่อไฟล์ให้เป็น lowercase และใช้ hyphen เช่น about-us.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>นี่คือเว็บไซต์แรกที่สร้างด้วย HTML</p>
</body>
</html>

เมื่อคุณสร้างไฟล์ HTML แล้ว ให้เปิดด้วย browser โดย double-click ไฟล์ หรือคลิกขวา Open with แล้วเลือก Chrome, Firefox, Edge หากแก้ไขโค้ด ให้กด F5 เพื่อ refresh หน้าและดูผลลัพธ์ล่าสุด ถ้าต้องการ debug ใช้ Developer Tools (F12) ดูโครงสร้าง DOM และตรวจสอบ element ต่างๆ

ตัวอย่างโปรเจกต์จริง: หน้าเว็บของขวัญหัวข้อ

มาดูตัวอย่าง HTML จากหน้าเว็บของขวัญจริงๆ ที่ใช้ head, link สำหรับ CSS และ Google Fonts, div, img, h1, button, a

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>หัวข้อ</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600&family=Kanit:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
  <div class="headbanner" style="color:white;">
    <img class="first-image" src="./hello/c2061ddff50c6.png">
    <h1 style="color:rgb(255, 121, 199);">ของขวัญคุณ</h1>
    <button class="icon-button">
      <a href="index.html" class="icon-link">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
          <path fill="#fbfaff" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>
        </svg>
      </a>
    </button>
  </div>
  <div class="space"></div>
  <div class="page-4-content">
    <h1>ของขวัญคุณซานต้า</h1>
  </div>
</body>
</html>

สิ่งที่ใช้ในตัวอย่าง: <link rel="stylesheet"> โหลดไฟล์ CSS, <link href="..."> โหลดฟอนต์จาก Google Fonts (Prompt, Kanit),class สำหรับกำหนด style จาก CSS, style="..." สำหรับ inline style,<svg> สำหรับไอคอน (เวกเตอร์)