← Writing
Development & Cloud

HTML 101

เริ่มต้นสร้างเว็บไซต์ด้วยตัวเอง (ฉบับเรียนไปเขียนไป)

5 Dec 202529 min readChatGPTDashboardHR
HTML & CSS Basics · Part 1 of 4

HTML 101

เริ่มต้นสร้างเว็บไซต์ด้วยตัวเอง (ฉบับเรียนไปเขียนไป)

เคยสงสัยไหมครับว่าหน้าเว็บที่เราเปิดดูกันทุกวัน สร้างขึ้นมาได้ยังไง? สำหรับคนที่อยากเริ่มต้นเขียนเว็บ แต่ไม่รู้จะเริ่มตรงไหน โพสต์นี้คือคำตอบครับ! ผมเขียนสรุปจากการเรียนจริง เจ็บจริง (เอ้ย! ลองทำจริง) รวบรวมพื้นฐาน HTML ที่จำเป็นที่สุดแบบ “เนื้อๆ เน้นๆ”

เข้าใจโครงสร้าง: เว็บไซต์ 1 หน้า ประกอบด้วยอะไรบ้าง?

เปรียบเทียบง่ายๆ การสร้างเว็บเหมือนการสร้างบ้านครับ ต้องใช้ 3 ส่วนหลักทำงานร่วมกัน:

  • HTML (Structure): เหมือน “เสาเข็มและโครงบ้าน” เป็นตัวกำหนดเนื้อหา (Content) ว่าหน้าเว็บจะมีอะไรบ้าง
  • CSS (Presentation): เหมือน “การทาสีและตกแต่ง” ทำให้หน้าเว็บสวยงาม จัดวางตำแหน่ง (Styling)
  • JavaScript (Behavior): เหมือน “ระบบไฟและกลไก” ทำให้เว็บขยับได้ มีลูกเล่นโต้ตอบกับผู้ใช้ (Interaction)

(ในบทความนี้ เราจะโฟกัสที่ HTML ที่เป็นโครงสร้างหลักกันก่อนครับ)

1) เริ่มเขียน HTML เบื้องต้น (Hands-on)

ทำตาม 3 ขั้นตอนนี้ คุณก็สร้างเว็บไซต์แรกของตัวเองได้แล้ว!

Step 1: เตรียมเครื่องมือ

  • แบบง่าย: ใช้ Notepad (Windows) หรือ TextEdit (Mac) ก็เขียนได้
  • แบบมืออาชีพ (แนะนำ): ใช้ IDE (Integrated Development Environment) เช่น VS Code (Visual Studio Code) เพราะมีตัวช่วยไฮไลต์สีโค้ด และจัดระเบียบให้อ่านง่ายขึ้นเยอะครับ

Step 2: พิมพ์โค้ดโครงสร้างหลัก

พิมพ์โค้ดด้านล่างนี้ลงไปครับ นี่คือ “แม่แบบ” ที่ทุกหน้าเว็บต้องมี

โค้ดนี้คือโครงสร้างพื้นฐานของเว็บ HTML:

  • <!DOCTYPE html> บอกว่าไฟล์นี้ใช้มาตรฐาน HTML5
  • <html> คือส่วนที่ครอบทุกอย่างของหน้าเว็บ
  • <head> ใช้กำหนดข้อมูลของเว็บ เช่นชื่อแท็บที่แสดงในเบราว์เซอร์
  • <title> ตั้งชื่อหน้าเว็บ — ในตัวอย่างคือ first web
  • <body> ส่วนที่ผู้ใช้จะมองเห็นจริงบนหน้าเว็บ
  • <h1>Hello World!</h1> คือการแสดงหัวข้อใหญ่บนหน้าเว็บ (มักใช้ในการเริ่มต้นเรียน HTML)

Step 3: Save & Run

  • กด Save ไฟล์โดยตั้งชื่อว่า firstweb.html
  • ดับเบิลคลิกไฟล์นั้น…

Figure: Output

2) HTML ทำงานอย่างไร? (Markup & Structure)

HTML ย่อมาจาก Hypertext Markup Language หัวใจสำคัญคือคำว่า Markup หรือการ “กำกับ” เนื้อหา

ถ้าเราพิมพ์ข้อความยาวๆ ลงไปเฉยๆ Browser จะไม่รู้ว่าตรงไหนคือหัวข้อ ตรงไหนคือย่อหน้า มันจะแสดงผลติดกันเป็นพืดยาวๆ (เหมือนที่เราเห็นใน Text file ธรรมดา) ดังนั้นเราต้องใช้ Tags เพื่อจัดระเบียบให้มันครับ

ตัวอย่าง: การจัดหน้าเว็บให้สวยด้วย Tags

ลองจินตนาการว่าเราจะเขียนหน้า “แนะนำตัว” ถ้าใช้ Tag แบ่งสัดส่วนชัดเจน ผลลัพธ์จะออกมาดูดีทันทีแม้ยังไม่แต่งสี

ลองพิมพ์โค้ดนี้แทนที่ <h1>Hello World!</h1> เดิมดูครับ:

<p>ยินดีที่ได้รู้จัก! ผมกำลังเริ่มฝึกเขียนเว็บด้วย HTML เพื่อปูพื้นฐานสู่โลก Dev ครับ</p>  

<p>การเรียนรู้เทคโนโลยีใหม่ๆ เป็นเรื่องท้าทาย แต่ผมเชื่อว่าการลงมือทำคือวิธีเรียนรู้ที่ดีที่สุด</p>  

<h2>My Goals (เป้าหมาย)</h2>  
<ul>  
    <li>เขียน HTML ให้คล่อง</li>  
    <li>ต่อยอดไปทำ CSS เพื่อตกแต่ง</li>  
    <li>สร้างเว็บ Portfolio ของตัวเอง</li>  
</ul>

Figure: Output

อธิบาย Tag ใหม่ที่ใช้

  • <h1> ถึง <h6>: ใช้สร้าง หัวข้อ (Heading) โดย <h1> ใหญ่สุด และ <h6> เล็กสุด
  • <p>: ใช้สร้าง ย่อหน้า (Paragraph) Browser จะเว้นช่องว่างระหว่างบรรทัดให้อัตโนมัติทำให้อ่านง่าย
  • <ul>: ย่อมาจาก Unordered List ใช้สร้างกลุ่มรายการแบบ "มีจุด Bullet" (ไม่มีลำดับตัวเลข)
  • <li>: ย่อมาจาก List Item คือของแต่ละชิ้นที่อยู่ในรายการ

3) รู้จักกับ HTML Element

HTML Element คือชิ้นส่วนเล็กๆ ที่ประกอบร่างกันขึ้นมาเป็นหน้าเว็บ โดย 1 Element จะมีโครงสร้างหลัก 3 ส่วนคือ:

  1. Opening Tag (แท็กเปิด): เป็นตัวบอกจุดเริ่มต้น เช่น <h1>
  2. Content (เนื้อหา): ข้อความหรือข้อมูลที่เราต้องการแสดง My Profile
  3. Closing Tag (แท็กปิด): เป็นตัวบอกจุดสิ้นสุด ต้องมีเครื่องหมาย **/** เสมอ เช่น </h1>

สูตรจำ:_<tag>_ เนื้อหา _</tag>_

<h1>ประวัติส่วนตัว (H1 ใหญ่สุด)</h1>  
<h2>สิ่งที่ฉันชอบ (H2 รองลงมา)</h2>  

<img src="profile.jpg" alt="รูปโปรไฟล์ของฉัน" width="200">  

<p>สวัสดีครับ ผมกำลังฝึกเขียนเว็บด้วย HTML เริ่มต้นจากศูนย์</p>  
<p>เป้าหมายคือการสร้างเว็บ Blog ของตัวเองให้ได้!</p>  

<p>ติดตามผลงานผมได้ที่ <a href="https://www.facebook.com">Facebook</a></p>  

<h3>ลำดับขั้นตอนการเรียน:</h3>  
<ol>  
    <li>เรียนรู้โครงสร้าง HTML</li>  
    <li>ฝึกใช้ Tags พื้นฐาน</li>  
    <li>เริ่มแต่งสวยด้วย CSS</li>  
</ol>  

<h3>งานอดิเรก:</h3>  
<ul>  
    <li>อ่านหนังสือ</li>  
    <li>เขียนโค้ด</li>  
    <li>ถ่ายรูป</li>  
</ul>

Figure: Output

นี่คือรายชื่อ Tag ที่นักพัฒนาเว็บทุกคนต้องใช้ (ตามภาพประกอบที่คุณเรียนมา)

  • <h1> ถึง <h6>: ใช้สร้าง หัวข้อ (Headings) โดย h1 ใหญ่สุด และ h6 เล็กสุด
  • <p>: ใช้สร้าง ย่อหน้า (Paragraph)
  • <ul>: ย่อมาจาก Unordered List ใช้สร้างรายการแบบ ไม่มีลำดับ (แสดงเป็นจุด Bullet)
  • <ol>: ย่อมาจาก Ordered List ใช้สร้างรายการแบบ มีลำดับ (แสดงเป็นตัวเลข 1, 2, 3...)
  • <li>: ย่อมาจาก List Item เป็นไส้ในที่ต้องอยู่ข้างใน <ul> หรือ <ol> อีกที
  • <a>: ย่อมาจาก Anchor ใช้ทำ ลิงก์ เชื่อมโยงไปยังหน้าอื่น
  • <img>: ใช้แทรก รูปภาพ (ข้อควรระวัง: Tag นี้เป็นข้อยกเว้น คือไม่ต้องมีแท็กปิด!)

แบบฝึกหัด (Workshop): สร้างหน้าเว็บ GenAI

ในขั้นตอนนี้ เราจะจำลองการทำงานจริง โดยเริ่มจาก “Raw Text” ที่ยังไม่มีการจัดหน้า แล้วค่อยๆ ใส่โค้ดเพื่อเปลี่ยนให้เป็นหน้าเว็บที่สมบูรณ์ครับ

🛑 Raw Text (เนื้อหาตั้งต้น)

    สิ่งที่ GenAI ทำได้ดี  
    เขียนบทความและสรุปเนื้อหา  
    สร้างรูปภาพจากคำสั่ง (Text-to-Image)  
    ช่วยเขียนโปรแกรมคอมพิวเตอร์  
    แต่งเพลงและสร้างเสียงสังเคราะห์  

    ขั้นตอนการใช้ Generative AI  
    1. เข้าไปที่ ChatGPT, Gemini Website  
    2. สมัครและ Log In  
    3. พิม Prompt เพื่อใช้งานได้เลย  

    สรุปสั้นๆ  
    GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น "ผู้ช่วย" ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
</body>

Figure: Output (ผลลัพธ์ตอนนี้คือข้อความติดกันเป็นพืดยาวๆ)

✅ เฉลย: ลงมือแก้ไขทีละ Step

Step 1: ฝึกแก้ไขเนื้อหา (Update Content) ก่อนจะไปยุ่งกับโค้ด ลองเปลี่ยนข้อความดูก่อน เพื่อเช็คว่าเราแก้ไขถูกไฟล์

เปลี่ยน "Generative AI คืออะไร?" เป็น "What is Generative AI"

ผลลัพธ์: กด Save แล้ว Refresh หน้าเว็บ ข้อความเปลี่ยนทันที แต่ยังคงติดกันเป็นพืดเหมือนเดิม

Note: โดยปกติจะนิยม save ชื่อไฟล์เป็น index.html เพราะเป็นชื่อมาตรฐานที่ Web Server จะมองหาและแสดงผลเป็น หน้าแรก (Home Page) เสมอ

Figure: Output

Step 2: จัดโครงสร้างหลัก (Add Structure) เรามากำหนด “หัวข้อ” และ “ย่อหน้า” เพื่อแก้ปัญหาตัวหนังสือติดกัน

สิ่งที่ต้องทำ:

  • ใส่ <h1>...</h1> ครอบหัวข้อใหญ่สุด
  • ใส่ <p>...</p> ครอบย่อหน้าอธิบายความหมาย
    <p>  
    Generative AI (GenAI) คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <p>  
    สิ่งที่ GenAI ทำได้ดี  
    เขียนบทความและสรุปเนื้อหา  
    สร้างรูปภาพจากคำสั่ง (Text-to-Image)  
    ช่วยเขียนโปรแกรมคอมพิวเตอร์  
    แต่งเพลงและสร้างเสียงสังเคราะห์  
    </p>  

    <p>  
    ขั้นตอนการใช้ Generative AI  
    1. เข้าไปที่ ChatGPT, Gemini Website  
    2. สมัครและ Log In  
    3. พิม Prompt เพื่อใช้งานได้เลย  
    </p>  

    <p>  
    สรุปสั้นๆ  
    GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น "ผู้ช่วย" ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  
      
</body>

Figure: Output (ตอนนี้ข้อความถูกแบ่งกลุ่มแล้ว แต่อ่านยากเพราะยังไม่มีหัวข้อย่อยและรายการ)

Step 3: จัดระเบียบด้วยรายการ (Lists & Sub-headings) ส่วนที่เหลือเราจะใช้ <h2> ทำหัวข้อรอง และใช้ List เพื่อจัดลำดับเนื้อหาให้สวยงาม

สิ่งที่ต้องทำ:

  • ใส่ <h2> ตรง "สิ่งที่ GenAI ทำได้ดี", "ขั้นตอนการใช้ Generative AI" และ "สรุปสั้นๆ"
  • ใช้ <ul> (Unordered List) กับ สิ่งที่ทำได้ดี (เพราะสลับลำดับได้ ไม่ซีเรียส)
  • ใช้ <ol> (Ordered List) กับขั้นตอนการใช้งาน (เพราะต้องทำตามลำดับ 1, 2, 3)
  • ใช้ <li> ครอบแต่ละบรรทัดย่อย

ดูเฉลย Code:

    <p>  
    Generative AI (GenAI) คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol>  
        <li>เข้าไปที่ ChatGPT, Gemini Website</li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น "ผู้ช่วย" ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  
</body>

Figure: Output (ตอนนี้หน้าเว็บสมบูรณ์แล้ว! มีทั้งหัวข้อใหญ่ หัวข้อรอง รายการแบบจุด และรายการแบบตัวเลขที่ถูกต้องตามความหมาย)

Step 4: เน้นคำและใส่หมายเหตุ (Formatting & Comments) ในขั้นตอนนี้เราจะมาตกแต่งข้อความในบรรทัด (Inline) เพื่อเน้นจุดสำคัญและจัดระเบียบโค้ดครับ

1. การเน้นคำ (Visual vs Semantic)

HTML มี Tag สำหรับทำตัวหนาและตัวเอียงอย่างละ 2 แบบ หน้าตาเหมือนกันเป๊ะ แต่ “ความหมาย” ต่างกัน

  • ตัวหนา (Bold):
    - <b>: ทำตัวหนาเพื่อความสวยงามเฉยๆ (Visual)
    - <strong>: ทำตัวหนาเพื่อบอกว่า "สำคัญมาก" (Important) Google และโปรแกรมอ่านจอภาพจะให้ความสำคัญกับคำนี้
  • ตัวเอียง (Italic):
    - <i>: ทำตัวเอียงเพื่อความสวยงามเฉยๆ (Visual) เช่น ชื่อเฉพาะ, ศัพท์เทคนิค
    - <em>: ทำตัวเอียงเพื่อ "เน้นเสียง/เน้นย้ำ" (Emphasis) เหมือนเวลาเราพูดเน้นเสียงหนักเบา

Tip: ยุคใหม่แนะนำให้ใช้ _<strong>_ และ _<em>_ เป็นหลัก เพื่อผลดีต่อ SEO และการเข้าถึง (Accessibility)

2. Element อื่นๆ ที่ควรรู้ในหมวดนี้

  • <hr>: (Horizontal Rule) ขีดเส้นกั้นแนวนอน ใช้แบ่งเนื้อหาเป็นส่วนๆ
  • <br>: (Break Line) สั่งขึ้นบรรทัดใหม่ทันที (ใช้แทรกใน <p> ได้)

สิ่งที่ต้องทำ:

  1. เปลี่ยนคำว่า Generative AI ในย่อหน้าแรกเป็น <em>
  2. เปลี่ยนคำว่า “ผู้ช่วย” ในสรุปเป็น <strong>
  3. ใส่ <hr> กั้นก่อนเข้าสู่ส่วนสรุป
    <p>  
      <em>Generative AI (GenAI)</em> คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol>  
        <li>เข้าไปที่ ChatGPT, Gemini Website</li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <hr>  
    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น   
        <strong>"ผู้ช่วย"</strong>  
        ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  
</body>

4) การจัดการกับทรัพยากรภายนอก (Dealing with External Resources)

เว็บเพจจะสมบูรณ์ไม่ได้เลยถ้าขาดการเชื่อมโยงและการแสดงผลสื่อต่างๆ ในหัวข้อนี้เราจะมาเรียนรู้วิธีการดึงทรัพยากรจากภายนอกเข้ามาแสดงผลในหน้าเว็บของเรากันครับ

1. การสร้างลิงก์ (Anchors)

เราใช้ Tag <a> (ย่อมาจาก Anchor) เพื่อสร้างลิงก์เชื่อมโยงไปยังหน้าเว็บอื่น หรือส่วนอื่นๆ ภายในหน้าเดียวกัน สิ่งที่สำคัญที่สุดของ Tag นี้คือ attribute ที่ชื่อว่า href (hypertext reference) ซึ่งใช้ระบุปลายทางที่ต้องการจะไปครับ

  • รูปแบบ: <a href="URL_ปลายทาง">ข้อความที่ต้องการให้คลิก</a>

2. การแทรกรูปภาพ (Images) จากภายในเครื่อง

เราใช้ Tag <img> เพื่อแสดงรูปภาพบนหน้าเว็บ Tag นี้เป็นหนึ่งใน "ข้อยกเว้น" คือเป็น Self-closing tag (ไม่ต้องมีแท็กปิด </img>) ครับ

Tag นี้มี attribute สำคัญ 2 ตัวคือ:

  1. src (source): ใช้ระบุที่อยู่ (path) ของไฟล์รูปภาพที่เราต้องการแสดง
  2. alt (alternative text): ใช้ใส่ข้อความอธิบายรูปภาพ ซึ่งมีประโยชน์มากใน 2 กรณีคือ
    - เมื่อรูปภาพโหลดไม่ขึ้น ข้อความนี้จะแสดงขึ้นมาแทน
    - ช่วยให้โปรแกรมอ่านหน้าจอ (Screen Reader) อธิบายรูปภาพให้ผู้พิการทางสายตาทราบได้
  • รูปแบบ: <img src="ชื่อไฟล์รูปภาพ.jpg" alt="คำอธิบายรูปภาพ">

3. การใช้รูปภาพจากภายนอก (External Images)

นอกจากการใช้ไฟล์รูปในเครื่อง (File Path) เรายังสามารถนำ URL ของรูปภาพ จากเว็บไซต์อื่นมาใส่ใน src ได้โดยตรงเลยครับ

แนะนำแหล่งรูปฟรี: Unsplash.com เป็นเว็บที่มีรูปสวยๆ ให้ใช้ฟรีเยอะมาก
วิธีใช้: คลิกขวาที่รูปที่ต้องการ -> เลือก “Copy Image Address” (คัดลอกที่อยู่รูปภาพ) -> นำมาวางใน src

แบบฝึกหัด (Workshop):

สิ่งที่ต้องเตรียม: เพื่อให้ทำตามตัวอย่างนี้ได้ ให้คุณเตรียมไฟล์รูปภาพของคุณเอง 1 รูป ตั้งชื่อว่า Photo.png แล้วนำไปวางไว้ใน Folder เดียวกับไฟล์ index.html และไปเรียกรูปจาก Unsplash.com

สิ่งที่ต้องทำ:

  1. แก้ไขในส่วน <ol> โดยเพิ่มลิงก์ไปยังเว็บไซต์ ChatGPT และ Gemini ตรงข้อความที่เราเขียนไว้
  2. เพิ่มรูปภาพของคุณ (Photo.png) และรูปจาก Unsplash.com ไว้ที่ด้านล่างสุดของเนื้อหา (ก่อนปิด Tag </body>) และใส่ alt ให้เรียบร้อย
    <p>  
      <em>Generative AI (GenAI)</em> คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol>  
        <li>  
            เข้าไปที่ Website:   
            <a href="https://chatgpt.com/">ChatGPT</a>,   
            <a href="https://gemini.google.com/app?hl=th">Gemini</a>  
        </li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <hr>  
    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น   
        <strong>"ผู้ช่วย"</strong>  
        ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  

    <hr>  
    <h3>เกี่ยวกับผู้เขียน</h3>  
    <img src="Photo.png" alt="รูปภาพโปรไฟล์ของผู้เขียน Blog" width="200">  

    <h3>ภาพประกอบจาก Unsplash</h3>  
    <img src="https://plus.unsplash.com/premium_photo-1725907643701-9ba38affe7bb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="GenAI Concept Art" width="300">  

</body>

Figure: Output (ตอนนี้ที่ด้านล่างเว็บ คุณจะเห็นรูปโปรไฟล์ของคุณคู่กับรูป GenAI สวยๆ ที่ดึงมาจาก Unsplash แล้วครับ!)

4. การจัดการที่อยู่ไฟล์ (File Paths) — เมื่อรูปไม่ได้วางที่เดียวกับ HTML

ในการเขียนเว็บไซต์จริง เรามักจะแยกไฟล์รูปภาพไปเก็บไว้ใน Folder เฉพาะเพื่อให้เป็นระเบียบ เราจึงต้องรู้วิธี “บอกทาง” ให้ HTML ไปหารูปให้เจอครับ

กรณีที่ 1: รูปอยู่ใน Folder ย่อย (Relative Path) ✅ วิธีที่ถูกต้อง

สมมติไฟล์ index.html อยู่ที่หน้าบ้าน แต่รูป Inside_Folder.png ถูกเก็บอยู่ในห้องเก็บของที่ชื่อว่า Image

  • ที่อยู่ไฟล์: HTML101/Image/Inside_Folder.png
  • วิธีเขียน: เราต้องบอกให้ Browser “เดินเข้า” ไปใน Folder นั้นก่อน โดยใช้เครื่องหมาย /

กรณีที่ 2: รูปอยู่นอก Project หรือคนละ Drive (Absolute Path) ❌ ไม่แนะนำ

สมมติรูป Outside_Folder.png อยู่ไกลมาก อยู่ที่ C:\Users\ADMIN\Downloads\Tiktok (คนละ Drive กับไฟล์ HTML)

  • วิธีเขียน: ต้องระบุที่อยู่แบบเต็มยศ (Absolute Path) ตั้งแต่ชื่อ Drive
  • ข้อเสียร้ายแรง: วิธีนี้ ห้ามใช้ในการทำเว็บจริง เพราะถ้าคุณอัปโหลดเว็บขึ้นอินเทอร์เน็ต หรือส่งไฟล์ให้เพื่อน เพื่อนจะเปิดรูปไม่ได้ (เพราะคอมของเพื่อนไม่มี Drive C: ที่มี Folder ชื่อ ADMIN ของคุณ)

แต่ถ้าจะเขียนเพื่อเทสต์ในเครื่องตัวเอง ให้ทำแบบนี้:

  • Copy path เต็มมา: C:\Users\ADMIN\Downloads\Tiktok\Outside_Folder.png
  • เปลี่ยน Backslash \ ให้เป็น Slash /

💡 Best Practice (วิธีปฏิบัติที่ดีที่สุด): ถ้าต้องการใช้รูปที่อยู่ไกลๆ (เช่น อยู่ใน Downloads) ให้ Copy รูปนั้นมาวางใน Folder เดียวกับ Project ของเราก่อน (เช่น ย้ายมาไว้ใน _F:\...\HTML101\Image_) แล้วใช้วิธีใน กรณีที่ 1 จะดีที่สุดครับ

แบบฝึกหัด (Workshop):

ลองจัดการไฟล์ให้เป็นระเบียบดูครับ

  • สร้าง Folder ชื่อ Image ไว้ข้างๆ ไฟล์ index.html
  • ย้ายรูป Inside_Folder.png เข้าไปในนั้น
  • ลองเรียกใช้รูปด้วย code ด้านล่าง
    <p>  
      <em>Generative AI (GenAI)</em> คือปัญญาประดิษฐ์รูปแบบหนึ่งที่มีความสามารถในการ "สร้างสรรค์ผลงานใหม่" ได้ ไม่ว่าจะเป็นข้อความ รูปภาพ เสียง หรือแม้แต่เขียนโค้ดโปรแกรม ซึ่งต่างจาก AI ยุคเก่าที่เน้นแค่การวิเคราะห์ข้อมูลที่มีอยู่แล้ว  
    </p>  
      
    <h2>สิ่งที่ GenAI ทำได้ดี</h2>  
    <ul>  
        <li>เขียนบทความและสรุปเนื้อหา</li>  
        <li>สร้างรูปภาพจากคำสั่ง (Text-to-Image)</li>  
        <li>ช่วยเขียนโปรแกรมคอมพิวเตอร์</li>  
        <li>แต่งเพลงและสร้างเสียงสังเคราะห์</li>  
    </ul>  

    <h2>ขั้นตอนการใช้ Generative AI</h2>  
    <ol>  
        <li>  
            เข้าไปที่ Website:   
            <a href="https://chatgpt.com/">ChatGPT</a>,   
            <a href="https://gemini.google.com/app?hl=th">Gemini</a>  
        </li>  
        <li>สมัครและ Log In</li>  
        <li>พิมพ์ Prompt เพื่อใช้งานได้เลย</li>  
    </ol>  

    <hr>  
    <h2>สรุปสั้นๆ</h2>  
    <p>  
        GenAI ไม่ได้มาแทนที่มนุษย์ แต่จะเป็น   
        <strong>"ผู้ช่วย"</strong>  
        ที่ทรงพลังที่สุดสำหรับคนที่ใช้งานเป็น  
    </p>  

    <hr>  
    <h3>เกี่ยวกับผู้เขียน</h3>  
    <img src="Photo.png" alt="รูปภาพโปรไฟล์ของผู้เขียน Blog" width="200">  

    <h3>ภาพประกอบจาก Unsplash</h3>  
    <img src="https://plus.unsplash.com/premium_photo-1725907643701-9ba38affe7bb?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="GenAI Concept Art" width="300">  

    <h3>การจัดระเบียบไฟล์ (File Paths)</h3>  
      
    <p>รูปที่เก็บใน Folder Image:</p>  
    <img src="Image/Inside_Folder.png" alt="Test Image inside folder" width="200">  

    <p>รูปจาก Drive C (Local Path):</p>  
    <img src="file:///C:/Users/ADMIN/Downloads/Tiktok/Outside_Folder.png" alt="Test Image outside" width="200">  

</body>

Figure: Output (ตอนนี้ที่ด้านล่างเว็บ คุณจะเห็นรูปโปรไฟล์ของคุณที่เพิ่มเข้ามาใหม่แล้วครับ!)

5) 3 Concepts สำคัญที่ต้องรู้ (ก่อนไปต่อ CSS)

ก่อนจะจบบทเรียน HTML ผมขอฝาก 3 เรื่องสำคัญที่จะทำให้คุณเขียนโค้ดได้แบบ “มือโปร” ครับ

1. Attribute (ส่วนขยายคำสั่ง)

คือการใส่ข้อมูลเพิ่มเติมเข้าไปใน Tag เพื่อให้มันทำงานได้สมบูรณ์ขึ้น หรือปรับพฤติกรรมให้เป็นไปตามที่เราต้องการ

  • Attribute เฉพาะทาง: ใช้ได้กับบาง Tag เท่านั้น เช่น href ใช้กับ <a> (ลิงก์) หรือ src ใช้กับ <img> (รูป)
  • Global Attribute: ใช้ได้กับทุก Tag เช่น class และ id (เอาไว้ระบุชื่อเพื่อส่งไปแต่งสวยใน CSS)

2. Semantic HTML (การใช้ Tag ให้ตรงความหมาย)

หลักการคือ “Choosing the right element for the content” หรือการเลือกใช้ Tag ให้ตรงกับหน้าที่ของมัน

  • ทำไมต้องแคร์? เพราะหน้าที่ของ HTML คือการสร้าง “โครงสร้าง” (Structure) ให้กับเนื้อหา ไม่ใช่ความสวยงาม
  • ตัวอย่าง: หัวข้อใหญ่ที่สุดต้องใช้ <h1>, หัวข้อรองใช้ <h2> ไล่ลงไปเรื่อยๆ
  • ข้อดี: ช่วยให้ Google (SEO) เข้าใจเว็บเราง่ายขึ้น และช่วยให้คนพิการที่ใช้โปรแกรมอ่านหน้าจอ เข้าใจลำดับความสำคัญของเนื้อหาได้ถูกต้อง

3. Generic Elements (<div> & <span>)

คือ Tag ที่ “ไม่มีความหมายในตัวเอง” ต่างจาก <h1> หรือ <p> ที่เรารู้ทันทีว่าเป็นหัวข้อหรือย่อหน้า

  • หน้าที่: ใช้สำหรับ “จัดกลุ่ม” (Grouping) Elements หลายๆ ตัวเข้าด้วยกัน เพื่อเตรียมเอาไปตกแต่งด้วย CSS
  • (Division): ใช้แบ่งส่วนเนื้อหาก้อนใหญ่ๆ
  • : ใช้ครอบข้อความสั้นๆ ในบรรทัดเดียวกัน
  • Tip: ควรใช้ก็ต่อเมื่อหา Semantic Tag ตัวอื่นที่เหมาะสมไม่ได้แล้ว

ยินดีด้วยครับ! ตอนนี้คุณมีโครงสร้างบ้าน (HTML) ที่แข็งแรงแล้ว แต่บ้านยังเป็นปูนเปลือยอยู่ ขั้นตอนต่อไปคือการทาสีและตกแต่งบ้านให้น่าอยู่ด้วย CSS (Cascading Style Sheets) ครับ ในบทความหน้าเราจะมาเปลี่ยนหน้าเว็บขาว-ดำ ให้มีสีสันกันเถอะ!

ถ้าเพื่อนๆ อ่านแล้วรู้สึกว่ามีประโยชน์ หรือใครลองทำตามแล้วติดปัญหาตรงไหน คอมเมนต์คุยกันได้เลยนะครับ และถ้าไม่อยากพลาดเนื้อหาตอนต่อไป (CSS, JavaScript) ฝากกด Follow หรือแชร์บทความนี้เก็บไว้ด้วยนะครับ แล้วเจอกันใหม่บทความหน้าครับ!

Data Science Explore the world of data science with Donato_Story

Dashboard Discover the power of data visualization with Donato_Story

Donato_Journey Join me on my journey (Thai version)

Course_Review Discover the training courses with Donato_Story (Thai version)

Let’s Connect!

Your thoughts and feedback are invaluable. Feel free to share them in the comments or connect with me on

Originally published on Medium

Related

Development & Cloud

CSS 101

เปลี่ยนหน้าเว็บ HTML ธรรมดา ให้สวยสะดุดตาด้วย CSS (ฉบับมือใหม่)

6 Dec 202530 min
AI & Generative AI

Everyday Text Use Cases with ChatGPT (EP3)

สำรวจ GPTs ตัวช่วยทำงานที่คุณอาจยังไม่เคยใช้

19 Jun 202511 min
People & HR

Generative AI for HR

ศิลปะการเขียน Prompt เพื่อผลลัพธ์ระดับมืออาชีพ

29 Nov 202512 min
Automation

Make.com Workflow Inspiration & Pro Tips

EP3: รวม Workflow ไอเดียเด็ด พร้อม Tips & Tricks ต่างๆ

10 Jul 202527 min