มัลติมีเดีย: เพิ่มวิดีโอและเสียง
ฝังวิดีโอและไฟล์เสียงลงในหน้าเว็บของคุณ
มัลติมีเดีย: เพิ่มวิดีโอและเสียง เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
รูปแบบอินไลน์: การเพิ่มรูปแบบอย่างง่ายให้ HTML
ยินดีต้อนรับสู่โลกแห่งการจัดรูปแบบ! วันนี้เราจะเรียนรู้วิธีใช้รูปแบบอินไลน์เพื่อเปลี่ยนลักษณะที่ปรากฏขององค์ประกอบบนหน้าเว็บ รูปแบบอินไลน์เป็นวิธีที่ง่ายและรวดเร็วในการทำให้หน้าเว็บดูดีขึ้น
รูปแบบอินไลน์คืออะไร
รูปแบบอินไลน์ช่วยให้คุณใช้ CSS (Cascading Style Sheets) กับองค์ประกอบ HTML ได้โดยตรงผ่านแอตทริบิวต์ style
ตัวอย่าง:
<h1 style="color: red;">Hello, World!</h1>
โค้ดนี้จะแสดงหัวข้อสีแดง มาสำรวจวิธีการทำงานกัน!
การเปลี่ยนสีข้อความ
คุณสามารถเปลี่ยนสีข้อความโดยใช้คุณสมบัติ color ในแอตทริบิวต์ style
ตัวอย่าง:
<p style="color: blue;">This is blue text.</p>
การเปลี่ยนขนาดตัวอักษร
หากต้องการเปลี่ยนขนาดข้อความ ให้ใช้คุณสมบัติ font-size
ตัวอย่าง:
<p style="font-size: 20px;">This text is 20 pixels large.</p>การเพิ่มสีพื้นหลัง
คุณสามารถเพิ่มสีพื้นหลังให้กับองค์ประกอบได้โดยใช้คุณสมบัติ background-color
ตัวอย่าง:
<p style="background-color: yellow;">This text has a yellow background.</p>การรวมรูปแบบหลายแบบ
คุณสามารถรวมรูปแบบหลายแบบได้โดยคั่นแต่ละรูปแบบด้วยอัฒภาค ;
ตัวอย่าง:
<p style="color: white; background-color: black; font-size: 18px;">
This text has multiple styles applied!
</p>การจัดรูปแบบองค์ประกอบอื่น ๆ
รูปแบบอินไลน์ใช้ได้กับองค์ประกอบ HTML ทั้งหมด เช่น หัวข้อ ย่อหน้า และปุ่ม
ตัวอย่าง:
<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: lightblue; border: none; padding: 10px;">
Styled Button
</button>ลองทำด้วยตนเอง
มาสร้างหน้าเว็บด้วยสไตล์แบบอินไลน์กันครับ ตัวอย่างมีดังนี้:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: purple;">Welcome to My Styled Page</h1>
<p style="color: gray; font-size: 16px;">
This paragraph has styled text.
</p>
<button style="background-color: coral; color: white; padding: 10px;">
Click Me!
</button>
</body>
</html>
ทำได้ยอดเยี่ยม
ขอแสดงความยินดีครับ คุณได้เรียนรู้วิธีใช้สไตล์แบบอินไลน์เพื่อเพิ่มการตกแต่งที่เรียบง่ายและมีประสิทธิภาพให้หน้าเว็บแล้ว สไตล์แบบอินไลน์เหมาะสำหรับการเปลี่ยนแปลงอย่างรวดเร็ว แต่การตกแต่งยังมีอะไรให้เรียนรู้อีกมากครับ ในบทเรียนถัดไป เราจะสำรวจพื้นฐาน CSS เพื่อปลดล็อกศักยภาพของการออกแบบเว็บอย่างเต็มที่ เตรียมพร้อมสร้างหน้าเว็บที่สวยงามกันครับ!
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 16
- บทเรียน
- 35
คำถามที่พบบ่อย
บทเรียน “มัลติมีเดีย: เพิ่มวิดีโอและเสียง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “มัลติมีเดีย: เพิ่มวิดีโอและเสียง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “มัลติมีเดีย: เพิ่มวิดีโอและเสียง”
ฝังวิดีโอและไฟล์เสียงลงในหน้าเว็บของคุณ คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “มัลติมีเดีย: เพิ่มวิดีโอและเสียง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตาราง: จัดระเบียบข้อมูล
- แบบฟอร์ม: รับข้อมูลจากผู้ใช้
- แอตทริบิวต์ของ HTML
- มัลติมีเดีย: เพิ่มวิดีโอและเสียง