เพิ่มรูปภาพและไฟล์สื่อ (Images and Media)

เพิ่มรูปภาพและไฟล์สื่อ (Images and Media) ให้เว็บไซต์ของคุณ

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

ทำความเข้าใจกับแท็ก `<img>`

แท็ก <img> เป็นแท็กที่ใช้สำหรับแสดงรูปภาพบนเว็บไซต์ของเรา เป็นแท็กแบบ "self-closing tag" หมายความว่ามันไม่มีแท็กปิด (</img>) สิ่งที่เราต้องระบุคือแอตทริบิวต์ (attribute) ที่สำคัญสองอย่าง:

src (source): ระบุที่อยู่ (URL) ของรูปภาพที่เราต้องการแสดง
alt (alternative text): ข้อความที่อธิบายรูปภาพ (สำคัญมาก!)

ตัวอย่างการใช้งาน:

<img src="images/logo.png" alt="โลโก้เว็บไซต์ของฉัน">

ในตัวอย่างนี้:

src="images/logo.png" บอกเบราว์เซอร์ว่ารูปภาพชื่อ logo.png อยู่ในโฟลเดอร์ชื่อ images
alt="โลโก้เว็บไซต์ของฉัน" บอกเบราว์เซอร์ว่าถ้าไม่สามารถแสดงรูปภาพได้ (เช่น รูปภาพหาย หรือผู้ใช้งานปิดการแสดงรูปภาพ) ให้แสดงข้อความ "โลโก้เว็บไซต์ของฉัน" แทน

ทำไม `alt` text ถึงสำคัญ?

การใส่ alt text ไม่ใช่แค่ "มารยาท" ในการเขียน HTML แต่มันมีความสำคัญอย่างมากในหลายด้าน:

SEO (Search Engine Optimization): เสิร์ชเอ็นจิน (เช่น Google) ใช้ alt text เพื่อทำความเข้าใจว่ารูปภาพเกี่ยวกับอะไร ซึ่งจะช่วยให้เว็บไซต์ของเราถูกค้นเจอได้ง่ายขึ้น
Accessibility (การเข้าถึง): ผู้พิการทางสายตาที่ใช้โปรแกรมอ่านหน้าจอ (screen reader) จะฟัง alt text เพื่อทำความเข้าใจว่ารูปภาพนั้นคืออะไร การใส่ alt text ที่สื่อความหมายจึงเป็นการช่วยเหลือพวกเขาให้เข้าถึงเนื้อหาของเราได้
User Experience (ประสบการณ์ผู้ใช้): หากรูปภาพไม่สามารถโหลดได้ (เช่น อินเทอร์เน็ตช้า) ผู้ใช้งานจะเห็น alt text แทน ทำให้พวกเขายังพอทราบว่ารูปภาพนั้นเกี่ยวกับอะไร

แนวปฏิบัติที่ดี: เขียน alt text ให้กระชับ เข้าใจง่าย และสื่อความหมายของรูปภาพได้อย่างถูกต้อง ถ้าเป็นรูปภาพตกแต่ง (decorative image) ที่ไม่มีความหมายต่อเนื้อหา สามารถใส่ alt="" เพื่อบอกว่ารูปภาพนี้ไม่มีความสำคัญ

การปรับขนาดและจัดวางรูปภาพ

เราสามารถปรับขนาดรูปภาพได้โดยใช้แอตทริบิวต์ width (ความกว้าง) และ height (ความสูง) แต่การปรับขนาดด้วยวิธีนี้อาจทำให้รูปภาพผิดสัดส่วนได้หากเราไม่ได้ปรับทั้งสองค่าให้สัมพันธ์กัน

<img src="images/my-image.jpg" alt="ภาพวิวสวยๆ" width="500" height="300">

ทางเลือกที่ดีกว่า: ใช้ CSS เพื่อปรับขนาดและจัดวางรูปภาพ วิธีนี้จะช่วยให้เราควบคุมการแสดงผลได้ละเอียดกว่าและยังสามารถปรับเปลี่ยนได้ง่ายกว่าด้วย

ตัวอย่างการใช้ CSS:

<img src="images/my-image.jpg" alt="ภาพวิวสวยๆ" class="responsive-image">

.responsive-image {
  width: 100%; /* รูปภาพจะปรับขนาดตามความกว้างของคอนเทนเนอร์ */
  height: auto; /* ความสูงจะปรับตามสัดส่วนเดิม */
}

ในตัวอย่างนี้ เรากำหนดคลาส responsive-image ให้กับรูปภาพ แล้วใช้ CSS กำหนดให้ความกว้างของรูปภาพเป็น 100% ซึ่งจะทำให้รูปภาพปรับขนาดตามความกว้างของคอนเทนเนอร์ที่มันอยู่ และกำหนด height: auto; เพื่อรักษาสัดส่วนของรูปภาพไว้

การจัดวางรูปภาพ: เราสามารถใช้ CSS properties ต่างๆ เช่น float, margin, และ padding เพื่อจัดวางรูปภาพให้อยู่ในตำแหน่งที่ต้องการ

การเพิ่มวิดีโอด้วยแท็ก `<video>`

แท็ก <video> ใช้สำหรับฝังวิดีโอลงในเว็บไซต์ของเรา

<video width="640" height="360" controls>
  <source src="videos/my-video.mp4" type="video/mp4">
  <source src="videos/my-video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

อธิบาย:

width และ height: กำหนดขนาดของวิดีโอ
controls: เพิ่มปุ่มควบคุมวิดีโอ (เล่น, หยุด, ปรับเสียง)
<source>: ระบุไฟล์วิดีโอและประเภทของไฟล์ (type) เราสามารถระบุไฟล์วิดีโอหลายรูปแบบเพื่อให้เบราว์เซอร์เลือกรูปแบบที่รองรับได้
ข้อความ "Your browser does not support the video tag.": ข้อความที่จะแสดงถ้าเบราว์เซอร์ไม่รองรับแท็ก <video>

เหตุผลเชิงออกแบบ: การระบุไฟล์วิดีโอหลายรูปแบบ (เช่น MP4 และ WebM) เป็นแนวปฏิบัติที่ดี เพราะเบราว์เซอร์แต่ละตัวอาจรองรับรูปแบบวิดีโอที่แตกต่างกัน การทำเช่นนี้จะช่วยให้มั่นใจได้ว่าวิดีโอจะสามารถเล่นได้บนเบราว์เซอร์ส่วนใหญ่

การเพิ่มไฟล์เสียงด้วยแท็ก `<audio>`

แท็ก <audio> ใช้สำหรับฝังไฟล์เสียงลงในเว็บไซต์ของเรา

<audio controls>
  <source src="audio/my-audio.mp3" type="audio/mpeg">
  <source src="audio/my-audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

อธิบาย:

controls: เพิ่มปุ่มควบคุมเสียง (เล่น, หยุด, ปรับเสียง)
<source>: ระบุไฟล์เสียงและประเภทของไฟล์ (type) เช่นเดียวกับวิดีโอ เราสามารถระบุไฟล์เสียงหลายรูปแบบได้
ข้อความ "Your browser does not support the audio tag.": ข้อความที่จะแสดงถ้าเบราว์เซอร์ไม่รองรับแท็ก <audio>

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการเพิ่มรูปภาพ วิดีโอ และเสียงลงในเว็บไซต์ของเรา การใช้รูปภาพและไฟล์สื่อต่างๆ จะช่วยให้เว็บไซต์ของเราน่าสนใจและสื่อความหมายได้ดียิ่งขึ้น อย่าลืมใส่ alt text ให้กับรูปภาพเสมอเพื่อ SEO และ Accessibility และใช้ CSS เพื่อปรับขนาดและจัดวางรูปภาพให้สวยงาม

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

เพิ่มรูปภาพและไฟล์สื่อ (Images and Media)