02: Hyperlinks, Paths & Images

การเชื่อมโยงหน้าเว็บ, การจัดการรูปภาพ และความเข้าใจเรื่อง Path (ที่อยู่ไฟล์)

1. Empty Tags (Void Elements)

ปกติ HTML Tag จะมีคู่ (เปิด-ปิด) เพื่อครอบเนื้อหา แต่มีบาง Tag ที่ "ไม่มีเนื้อหาข้างใน" จึงไม่ต้องมีตัวปิด

Container Tags (ปกติ)

มีเนื้อหาข้างใน ต้องมีตัวปิด

  • <p> เนื้อหา </p>
  • <h1> หัวข้อ </h1>
  • <b> ตัวหนา </b>
Void Elements

ทำงานด้วย Attribute ไม่ต้องมีตัวปิด (/) ก็ได้

  • <br> (Break Line) ขึ้นบรรทัดใหม่
  • <hr> (Horizontal Rule) เส้นคั่น
  • <img> (Image) รูปภาพ
  • <input> ช่องกรอกข้อมูล

2. Global Attributes ที่เจอบ่อย

นอกจาก title ที่เรียนไปแล้ว ยังมี Attribute สำคัญที่ใช้ระบุตัวตนและตกแต่ง Element

Attribute หน้าที่ / ความหมาย ตัวอย่าง
id ชื่อเฉพาะ (ห้ามซ้ำในหน้านั้น) เหมือนเลขบัตรประชาชน <div id="header">
class ชื่อกลุ่ม (ซ้ำได้) ใช้เพื่อตกแต่ง CSS หลายตัวพร้อมกัน เหมือนเครื่องแบบ <p class="text-red">
style ฝัง CSS ลงไปใน Tag โดยตรง (Inline Style) <p style="color: red;">
title แสดงข้อความเมื่อเอาเมาส์ชี้ (Tooltip) <a title="คลิกสิ">

3. การใส่รูปภาพ (Image)

ใช้ Tag <img> (เป็น Empty Tag) โดยมีพระเอกคือ attribute src

Syntax 
<img src="ชื่อไฟล์.jpg" alt="คำอธิบายภาพ" width="300">
Attributes ที่สำคัญ:
  • src (Source): ที่อยู่ของไฟล์รูป (สำคัญที่สุด)
  • alt (Alternative Text): สำคัญมาก ข้อความที่จะแสดงถ้าโหลดรูปไม่ได้ และช่วยเรื่องคนตาบอด (Screen Reader)
  • width / height: กำหนดขนาด (แนะนำให้กำหนดแค่ด้านใดด้านหนึ่ง อีกด้านจะ Auto)
ผลลัพธ์ (ตัวอย่าง) Example Image

4. การสร้างลิงก์ (Anchor)

หัวใจของ WWW คือการเชื่อมโยง ใช้ Tag <a> (Anchor)

Syntax 
<!-- ลิงก์ไปเว็บอื่น (External) -->
<a href="https://www.google.com" target="_blank">ไปที่ Google</a>

<!-- ลิงก์ไปยังหน้าเว็บภายใน (Internal) -->
<a href="contact.html">ติดต่อเรา</a>
Target Attribute:
ถ้าใส่ target="_blank" เว็บจะเปิดใน Tab ใหม่ (นิยมใช้กับลิงก์ออกไปเว็บนอก)

5. File Paths

เวลาอ้างอิงถึงไฟล์ (ทั้งรูปภาพ และลิงก์) จะต้องบอกที่อยู่ของไฟล์นั้นให้ถูกต้อง ซึ่งมี 2 แบบหลัก ๆ คือ

1. Absolute Path (ที่อยู่เต็ม)

ระบุแบบเจาะจง มี http/https นำหน้า เสมือนบอกพิกัด GPS

https://www.mysite.com/images/cat.jpg
  • ✅ ชัวร์ว่าเจอไฟล์ (ถ้ามีอินเทอร์เน็ต)
  • ✅ ถ้าไฟล์เว็บในเครื่องเปลี่ยนที่อยู่ ลิงก์ไม่เสีย (เพราะลิงก์ไปข้างนอก)
  • ❌ ยาว และต้องเชื่อมต่ออินเทอร์เน็ตจึงจะสามารถเข้าถึงได้ (กรณีลิงก์รูปออนไลน์)
2. Relative Path (ที่อยู่อ้างอิง)

ระบุโดยเทียบกับ "ไฟล์ปัจจุบัน" เสมือนบอกทางว่า "เดินไปซ้าย/ขวา"

./images/cat.jpg
  • ✅ สั้น ย้ายโฟลเดอร์โปรเจกต์ไปเครื่องอื่นก็ยังใช้ได้
  • ⚠️ ต้องเข้าใจโครงสร้างโฟลเดอร์ดีๆ
เจาะลึก Relative Path:

โครงสร้างไฟล์สมมติ

📂 my-website/
├── 📄 index.html (ตอนนี้เขียนโค้ดไฟล์นี้อยู่ 📍)
├── 📄 about.html
├── 📂 images/
│   └── 🖼️ logo.png
└── 📂 pages/
    └── 📄 contact.html

วิธีเขียน Path จากจุด 📍 index.html

logo.png images/logo.png (เข้าโฟลเดอร์ images)
about.html about.html หรือ ./about.html (อยู่ข้างกัน)
contact.html pages/contact.html (เข้าโฟลเดอร์ pages)

ถ้าย้ายไปเขียนโค้ดไฟล์ 📄 contact.html (อยู่ใน pages)

จะลิงก์กลับ index.html ../index.html (ถอยหลังออกมา 1 ชั้น)

👨‍🏫 เทคนิคการจำ:

  • ./ = "ที่นี่" (ไฟล์นี้)
  • folder/ = "เดินเข้าห้อง" (ชื่อโฟลเดอร์)
  • ../ = "เดินออกจากห้อง" (ถอยหลัง 1 ระดับ)

Workshop: Travel Guide

สมมติว่าคุณเป็นบล็อกเกอร์ท่องเที่ยว ให้สร้างไฟล์ travel.html เพื่อแนะนำสถานที่ในฝัน 1 แห่ง

Checklist ที่ต้องมี:
  • 1. ชื่อสถานที่ (ใช้ h1) และคำบรรยายสั้นๆ (ใช้ p)
  • 2. รูปภาพประกอบ (img) ที่เซฟเก็บไว้ในโฟลเดอร์ images (ฝึกใช้ Relative Path)
  • 3. ปุ่ม "ดูแผนที่" (a) ลิงก์ไปยัง Google Maps ของที่นั่น (ฝึก External Link + target="_blank")
  • 4. ปุ่ม "กลับหน้าหลัก" ลิงก์ย้อนกลับมา index.html ให้ถูกต้อง
Tip: ลองหารูปสวยๆ จาก Unsplash หรือ Google Images มาลองทำดูนะ
บทก่อนหน้า บทต่อไป