แอตทริบิวต์ของ HTML
ทำความเข้าใจวิธีเพิ่มรายละเอียดให้กับองค์ประกอบโดยใช้แอตทริบิวต์
แอตทริบิวต์ของ HTML เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
สื่อผสม: การเพิ่มวิดีโอและเสียง
ยินดีต้อนรับสู่บทเรียนถัดไป! วันนี้เราจะเรียนรู้วิธีเพิ่มวิดีโอและเสียงลงในหน้าเว็บ สื่อผสมช่วยให้หน้าเว็บของคุณโต้ตอบได้มากขึ้นและสนุกยิ่งขึ้น!
เหตุใดจึงควรเพิ่มสื่อผสม
วิดีโอและเสียงช่วยทำให้หน้าเว็บของคุณ:
- น่าสนใจยิ่งขึ้น
- ให้ข้อมูลและสนุกสนาน
- โต้ตอบได้
มาเรียนรู้วิธีเพิ่มสื่อเหล่านี้โดยใช้ HTML กัน!
การเพิ่มวิดีโอ
วิดีโอถูกเพิ่มโดยใช้แท็ก <video> คุณสามารถระบุไฟล์วิดีโอโดยใช้แอตทริบิวต์ src
ตัวอย่าง:
ในตัวอย่างนี้:
src: ใช้ระบุไฟล์วิดีโอcontrols: เพิ่มตัวควบคุมการเล่น การหยุดชั่วคราว และระดับเสียงwidth: กำหนดความกว้างของวิดีโอ
<video src="example.mp4" controls width="400"></video>
การเพิ่มรูปแบบวิดีโอหลายรูปแบบ
เบราว์เซอร์แต่ละรายการไม่ได้รองรับรูปแบบวิดีโอเหมือนกันทั้งหมด คุณสามารถเพิ่มแหล่งที่มาหลายรายการโดยใช้แท็ก <source>
ตัวอย่าง:
<video controls width="400">
<source src="example.mp4" type="video/mp4">
<source src="example.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
การเพิ่มเสียง
เสียงถูกเพิ่มโดยใช้แท็ก <audio> คุณสามารถระบุไฟล์เสียงโดยใช้แอตทริบิวต์ src
ในตัวอย่างนี้:
src: ใช้ระบุไฟล์เสียงcontrols: เพิ่มตัวควบคุมการเล่น การหยุดชั่วคราว และระดับเสียง
<audio src="example.mp3" controls></audio>
การเพิ่มรูปแบบเสียงหลายรูปแบบ
เช่นเดียวกับวิดีโอ คุณสามารถเพิ่มแหล่งที่มาของเสียงหลายรายการเพื่อให้รองรับเบราว์เซอร์ได้ดียิ่งขึ้น
ตัวอย่าง:
<audio controls>
<source src="example.mp3" type="audio/mpeg">
<source src="example.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
เล่นอัตโนมัติและเล่นวนซ้ำ
คุณสามารถทำให้วิดีโอและเสียงเล่นโดยอัตโนมัติหรือเล่นวนซ้ำได้โดยเพิ่มแอตทริบิวต์ autoplay และ loop
ตัวอย่าง:
หมายเหตุ: เบราว์เซอร์บางรายการอาจปิดใช้การเล่นอัตโนมัติเพื่อประสบการณ์ที่ดีของผู้ใช้
<audio src="example.mp3" autoplay loop></audio>
การฝังวิดีโอ YouTube
คุณสามารถฝังวิดีโอ YouTube ในหน้าเว็บได้โดยใช้แท็ก <iframe>
ตัวอย่าง:
แทนที่ example ด้วย ID เฉพาะของวิดีโอ
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" frameborder="0" allowfullscreen></iframe>
ทำได้ดีมาก!
ขอแสดงความยินดี! คุณได้เรียนรู้วิธีเพิ่มวิดีโอ เสียง และแม้แต่การฝังวิดีโอ YouTube ลงในหน้าเว็บแล้ว สื่อผสมช่วยให้เนื้อหาของคุณมีชีวิตชีวาและน่าสนใจยิ่งขึ้น ในบทเรียนถัดไป เราจะเจาะลึกการจัดรูปแบบด้วย CSS เพื่อทำให้หน้าเว็บของคุณดูยอดเยี่ยม เตรียมสำรวจโลกแห่งการออกแบบได้เลย!
คำถามที่พบบ่อย
บทเรียน “แอตทริบิวต์ของ HTML” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แอตทริบิวต์ของ HTML” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แอตทริบิวต์ของ HTML”
ทำความเข้าใจวิธีเพิ่มรายละเอียดให้กับองค์ประกอบโดยใช้แอตทริบิวต์ คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “แอตทริบิวต์ของ HTML” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตาราง: จัดระเบียบข้อมูล
- แบบฟอร์ม: รับข้อมูลจากผู้ใช้
- แอตทริบิวต์ของ HTML
- มัลติมีเดีย: เพิ่มวิดีโอและเสียง