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

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

บทเรียนนี้จะครอบคลุมพื้นฐานที่สำคัญที่สุดของ HTML (HyperText Markup Language) ซึ่งเป็นภาษาหลักในการสร้างโครงสร้างของหน้าเว็บ

1.1 ทำความรู้จักกับเว็บและเครื่องมือ

เว็บไซต์ทำงานอย่างไร: Client-Server Model

เว็บไซต์ คือชุดของเอกสารและไฟล์ที่เชื่อมโยงกันผ่านเครือข่ายอินเทอร์เน็ต การทำงานของเว็บไซต์เป็นไปตามหลักการ Client-Server Model ดังนี้:

  1. Client (ไคลเอนต์): คือโปรแกรมเว็บเบราว์เซอร์ (เช่น Chrome, Firefox, Safari) ที่ทำงานอยู่บนเครื่องของผู้ใช้
  2. Server (เซิร์ฟเวอร์): คือคอมพิวเตอร์ที่เก็บไฟล์เว็บไซต์และโปรแกรมที่ใช้ในการประมวลผล

เมื่อผู้ใช้พิมพ์ URL ในเบราว์เซอร์ (Client) เบราว์เซอร์จะส่งคำขอ (Request) ไปยังเซิร์ฟเวอร์ เซิร์ฟเวอร์จะประมวลผลและส่งไฟล์ HTML, CSS, JavaScript และรูปภาพกลับมา (Response) จากนั้นเบราว์เซอร์จะทำการแปล (Render) ไฟล์เหล่านั้นให้กลายเป็นหน้าเว็บที่เราเห็น

เครื่องมือที่ต้องใช้

ในการเริ่มต้น คุณต้องการเพียงสองสิ่ง:

  1. เว็บเบราว์เซอร์ (Web Browser): สำหรับดูผลลัพธ์ของโค้ด (แนะนำ Chrome หรือ Firefox)
  2. โปรแกรมแก้ไขโค้ด (Text Editor/IDE): สำหรับเขียนโค้ด (แนะนำ VS Code เพราะมีฟีเจอร์ช่วยเขียนโค้ดและส่วนเสริมมากมาย)

1.2 โครงสร้างพื้นฐาน HTML

เอกสาร HTML ทุกฉบับจะมีโครงสร้างพื้นฐานที่ต้องมี เพื่อให้เบราว์เซอร์เข้าใจและแสดงผลได้อย่างถูกต้อง

องค์ประกอบหลักของ HTML

องค์ประกอบ คำอธิบาย ตัวอย่าง
Tag (แท็ก) คำสั่งที่ใช้กำหนดโครงสร้างและเนื้อหา มักจะมาเป็นคู่ (เปิดและปิด) <p>...</p>
Element (องค์ประกอบ) ประกอบด้วยแท็กเปิด, เนื้อหา, และแท็กปิด <p>นี่คือย่อหน้า</p>
Attribute (แอตทริบิวต์) ข้อมูลเพิ่มเติมที่ใส่ในแท็กเปิด เพื่อกำหนดคุณสมบัติของ Element นั้นๆ <img src="image.jpg" alt="รูปภาพ">

โครงสร้างเอกสาร HTML5

นี่คือโครงสร้างพื้นฐานที่สมบูรณ์ของเอกสาร HTML5:

<!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> -->
    <h1>ยินดีต้อนรับสู่เว็บไซต์</h1>
    <p>นี่คือเนื้อหาแรกของเว็บไซต์ของเรา</p>
</body>
</html>
แท็ก หน้าที่
<!DOCTYPE html> ประกาศว่าเป็นเอกสาร HTML5
<html lang="th"> แท็กหลักที่ครอบคลุมเนื้อหาทั้งหมดของหน้าเว็บ และกำหนดภาษาเป็นภาษาไทย
<head> ส่วนหัวของเอกสาร ไม่แสดงผลบนหน้าจอ แต่เก็บข้อมูลสำคัญสำหรับเบราว์เซอร์และ Search Engine
<meta charset="UTF-8"> กำหนดชุดตัวอักษรเป็น UTF-8 เพื่อรองรับภาษาไทย
<meta name="viewport"...> สำคัญสำหรับการทำ Responsive Web Design
<title> ข้อความที่จะแสดงบนแถบชื่อเรื่องของเบราว์เซอร์
<body> ส่วนเนื้อหาทั้งหมดที่จะแสดงบนหน้าเว็บ

1.3 การจัดการข้อความและหัวเรื่อง

HTML มีแท็กสำหรับกำหนดลำดับความสำคัญและรูปแบบของข้อความ

หัวเรื่อง (Headings)

ใช้แท็ก <h1> ถึง <h6> เพื่อกำหนดลำดับความสำคัญของหัวข้อ <h1> คือหัวข้อที่สำคัญที่สุด และควรมีเพียงอันเดียวต่อหน้า

<h1>หัวเรื่องหลัก (สำคัญที่สุด)</h1>
<h2>หัวเรื่องรอง</h2>
<h3>หัวข้อย่อย</h3>
<!-- ... ไปจนถึง <h6> -->

ย่อหน้าและขึ้นบรรทัดใหม่

แท็ก หน้าที่
<p> กำหนดข้อความเป็นย่อหน้า (Paragraph)
<br> ขึ้นบรรทัดใหม่ (Line Break) เป็นแท็กเดี่ยว (Self-closing tag)
<hr> เส้นแบ่งแนวนอน (Horizontal Rule)

การเน้นข้อความ

แท็ก หน้าที่
<strong> เน้นข้อความให้มีความสำคัญมาก (มักแสดงผลเป็นตัวหนา)
<em> เน้นข้อความ (มักแสดงผลเป็นตัวเอียง)

1.4 การสร้างรายการและลิงก์

รายการ (Lists)

มี 2 ประเภทหลัก:

  1. รายการแบบมีลำดับ (Ordered List): ใช้ <ol> และ <li>

    <ol>
    <li>ขั้นตอนที่ 1</li>
    <li>ขั้นตอนที่ 2</li>
    <li>ขั้นตอนที่ 3</li>
</ol>

  2. รายการแบบไม่มีลำดับ (Unordered List): ใช้ <ul> และ <li>

    <ul>
    <li>รายการ A</li>
    <li>รายการ B</li>
    <li>รายการ C</li>
</ul>

ใช้แท็ก <a> (Anchor) เพื่อเชื่อมโยงไปยังหน้าเว็บอื่นหรือไฟล์อื่น

<!-- ลิงก์ไปยังเว็บไซต์ภายนอก -->
<p>
    เยี่ยมชม <a href="https://www.google.com" target="_blank">Google</a>
</p>

<!-- ลิงก์ไปยังหน้าภายในเว็บไซต์เดียวกัน -->
<p>
    <a href="about.html">เกี่ยวกับเรา</a>
</p>
Attribute หน้าที่
href กำหนด URL ปลายทางของลิงก์
target="_blank" สั่งให้เปิดลิงก์ในแท็บใหม่

1.5 การแทรกรูปภาพและสื่อ

รูปภาพ (Images)

ใช้แท็ก <img> ซึ่งเป็นแท็กเดี่ยว (Self-closing tag)

<img src="images/logo.png" alt="โลโก้บริษัท" width="150" height="150">
Attribute หน้าที่
src กำหนดที่อยู่ (Path) ของไฟล์รูปภาพ
alt ข้อความอธิบายรูปภาพ (สำคัญสำหรับ SEO และผู้พิการทางสายตา)
width, height กำหนดขนาดของรูปภาพ (แนะนำให้กำหนดขนาดด้วย CSS แทน)

สื่อ (Media: Video & Audio)

ใช้แท็ก <video> และ <audio>

<video src="media/intro.mp4" controls width="400">
    เบราว์เซอร์ของคุณไม่รองรับวิดีโอนี้
</video>

<audio src="media/music.mp3" controls>
    เบราว์เซอร์ของคุณไม่รองรับไฟล์เสียงนี้
</audio>

controls Attribute จะแสดงปุ่มควบคุมการเล่น (Play, Pause, Volume)

1.6 การสร้างตาราง

ใช้แท็ก <table> เพื่อสร้างตารางสำหรับแสดงข้อมูลที่เป็นระเบียบ (ไม่ควรใช้เพื่อจัด Layout)

<table>
    <thead>
        <tr>
            <th>ชื่อสินค้า</th>
            <th>ราคา</th>
            <th>จำนวน</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>โน้ตบุ๊ก</td>
            <td>25,000 บาท</td>
            <td>1</td>
        </tr>
        <tr>
            <td>เมาส์</td>
            <td>500 บาท</td>
            <td>2</td>
        </tr>
    </tbody>
</table>
แท็ก หน้าที่
<table> แท็กหลักของตาราง
<thead> ส่วนหัวของตาราง
<tbody> ส่วนเนื้อหาของตาราง
<tr> แถว (Table Row)
<th> หัวข้อในตาราง (Table Header Cell)
<td> ข้อมูลในตาราง (Table Data Cell)

1.7 การสร้างฟอร์มรับข้อมูล

ฟอร์มเป็นส่วนสำคัญสำหรับการโต้ตอบกับผู้ใช้ ใช้แท็ก <form> และ <input>

<form action="process_data.php" method="POST">
    <label for="username">ชื่อผู้ใช้:</label>
    <input type="text" id="username" name="username" required>
    <br>

    <label for="password">รหัสผ่าน:</label>
    <input type="password" id="password" name="password" required>
    <br>

    <input type="checkbox" id="remember" name="remember" value="yes">
    <label for="remember">จำฉันไว้</label>
    <br>

    <button type="submit">เข้าสู่ระบบ</button>
</form>
แท็ก/Attribute หน้าที่
<form> แท็กหลักของฟอร์ม
action กำหนดไฟล์ที่จะประมวลผลข้อมูลฟอร์ม (ในที่นี้คือ process_data.php)
method กำหนดวิธีการส่งข้อมูล (GET หรือ POST)
<label> ข้อความกำกับช่องกรอกข้อมูล
<input type="text"> ช่องกรอกข้อความทั่วไป
<input type="password"> ช่องกรอกรหัสผ่าน (ซ่อนตัวอักษร)
<input type="checkbox"> ช่องเลือกแบบหลายตัวเลือก
<button type="submit"> ปุ่มสำหรับส่งข้อมูลฟอร์ม
name ชื่อของข้อมูลที่จะส่งไปยังเซิร์ฟเวอร์ (สำคัญมาก)
required บังคับให้ผู้ใช้กรอกข้อมูลในช่องนี้

1.8 โครงสร้างหน้าเว็บด้วย Semantic HTML

Semantic HTML คือการใช้แท็กที่มีความหมายเพื่ออธิบายเนื้อหาของมัน ช่วยให้ Search Engine และเครื่องมือสำหรับผู้พิการทางสายตาเข้าใจโครงสร้างหน้าเว็บได้ดีขึ้น

แท็ก ความหมายเชิงโครงสร้าง
<header> ส่วนหัวของเว็บไซต์หรือของส่วนเนื้อหาใดๆ
<nav> ส่วนที่เก็บลิงก์นำทางหลักของเว็บไซต์
<main> เนื้อหาหลักและสำคัญที่สุดของเอกสาร (ควรมีเพียงอันเดียว)
<section> ส่วนของเนื้อหาที่มีความสัมพันธ์กันตามหัวข้อ
<article> เนื้อหาที่เป็นอิสระและสมบูรณ์ในตัวเอง (เช่น บทความ, โพสต์บล็อก)
<aside> เนื้อหาเสริมที่เกี่ยวข้องกับเนื้อหาหลัก (เช่น Sidebar)
<footer> ส่วนท้ายของเว็บไซต์หรือของส่วนเนื้อหาใดๆ

ตัวอย่างโครงสร้าง Semantic:

<body>
    <header>
        <h1>ชื่อเว็บไซต์</h1>
        <nav>
            <ul>
                <li><a href="/">หน้าแรก</a></li>
                <li><a href="/about">เกี่ยวกับ</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>บทความล่าสุด</h2>
            <article>
                <h3>หัวข้อบทความที่ 1</h3>
                <p>เนื้อหาบทความย่อๆ...</p>
            </article>
        </section>
        <aside>
            <h4>โฆษณา</h4>
            <p>พื้นที่โฆษณา</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 Manus AI. สงวนลิขสิทธิ์</p>
    </footer>
</body>

แบบฝึกหัดท้ายบท

  1. สร้างไฟล์ HTML ใหม่ที่มีโครงสร้างพื้นฐาน HTML5 ที่สมบูรณ์
  2. ใส่หัวเรื่อง <h1> และย่อหน้า <p> อย่างน้อย 3 ย่อหน้า
  3. สร้างรายการแบบมีลำดับสำหรับขั้นตอนการทำอาหาร 3 ขั้นตอน
  4. สร้างลิงก์ไปยังเว็บไซต์ที่คุณชื่นชอบ และให้เปิดในแท็บใหม่
  5. แทรกรูปภาพใดๆ (สมมติว่าชื่อไฟล์ my_photo.jpg) และกำหนด alt attribute ที่เหมาะสม

ในบทถัดไป เราจะเรียนรู้วิธีการจัดรูปแบบหน้าเว็บให้สวยงามด้วย CSS

ตัวอย่างโค้ดแบบฝึกหัดท้ายบท (HTML)

นี่คือตัวอย่างโค้ดที่ตอบโจทย์แบบฝึกหัดทั้งหมด:

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แบบฝึกหัด HTML - My First Website</title>
</head>
<body>

    <!-- ข้อ 2: หัวเรื่อง h1 และ 3 ย่อหน้า -->
    <h1>เว็บไซต์แรกของฉัน</h1>

    <p>
        นี่คือย่อหน้าแรกของเว็บไซต์ที่สร้างขึ้นจากการเรียนรู้พื้นฐาน HTML
        เราใช้แท็ก `<p>` เพื่อจัดกลุ่มข้อความให้เป็นย่อหน้าอย่างถูกต้องตามหลักการสร้างเว็บไซต์
        <strong>การสร้างโครงสร้างที่ถูกต้องเป็นสิ่งสำคัญที่สุด</strong>
    </p>

    <p>
        ย่อหน้าถัดมาเป็นส่วนเสริมเพื่อให้เนื้อหามีความน่าสนใจยิ่งขึ้น
        เราสามารถใช้แท็ก `<em>` เพื่อเน้นข้อความบางส่วนได้
        <em>อย่าลืมตรวจสอบโค้ดของคุณเสมอ</em>
    </p>

    <p>
        ย่อหน้าสุดท้ายนี้เป็นการสรุปสั้นๆ ถึงความสำเร็จในการสร้างหน้าเว็บเบื้องต้น
        ในบทเรียนถัดไป เราจะมาเรียนรู้วิธีการทำให้หน้าเว็บนี้สวยงามด้วย CSS
    </p>

    <!-- ข้อ 3: รายการแบบมีลำดับ -->
    <h2>ขั้นตอนการทำอาหารง่ายๆ</h2>
    <ol>
        <li>เตรียมวัตถุดิบทั้งหมดให้พร้อม</li>
        <li>เริ่มทำอาหารตามขั้นตอนที่กำหนด</li>
        <li>จัดจานให้สวยงามและพร้อมเสิร์ฟ</li>
    </ol>

    <!-- ข้อ 4: ลิงก์ไปยังเว็บไซต์ที่คุณชื่นชอบ (เปิดในแท็บใหม่) -->
    <h2>ลิงก์ที่น่าสนใจ</h2>
    <p>
        เยี่ยมชมเว็บไซต์ <a href="https://www.google.com" target="_blank">Google</a> เพื่อค้นหาข้อมูลเพิ่มเติม
    </p>

    <!-- ข้อ 5: แทรกรูปภาพ -->
    <h2>รูปภาพตัวอย่าง</h2>
    <img src="my_photo.jpg" alt="รูปภาพวิวทิวทัศน์ที่สวยงาม" width="300">

</body>
</html>

หมายเหตุ: สำหรับข้อ 5 คุณต้องมีไฟล์ชื่อ my_photo.jpg อยู่ในโฟลเดอร์เดียวกับไฟล์ HTML นี้เพื่อให้รูปภาพแสดงผล

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

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

กลับหน้าแรก