พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน body Tag

ใน HTML5 แท็ก <body> ใช้เพื่อกำหนดส่วนของเนื้อหาหลัก (main content) ของเอกสาร HTML ซึ่งเป็นส่วนที่แสดงให้ผู้ใช้เห็นบนเบราว์เซอร์ แท็กนี้อยู่ภายในแท็ก <html> และนอกแท็ก <head> โดยจะประกอบด้วยข้อมูลที่สามารถมองเห็นหรือมีการโต้ตอบได้ เช่น ข้อความ ภาพ ลิงก์ ฟอร์ม และส่วนประกอบอื่นๆ ของเว็บเพจ

โครงสร้างพื้นฐานของเอกสาร HTML5

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการใช้แท็ก body</title>
</head>
<body>
    <h1>ยินดีต้อนรับสู่เว็บไซต์ของเรา</h1>
    <p>นี่คือเนื้อหาของเว็บเพจซึ่งอยู่ในแท็ก body</p>
</body>
</html>

รูปแบบการประยุกต์ใช้งานแท็ก <body>

การแสดงเนื้อหาพื้นฐาน ข้อความ, หัวเรื่อง, ภาพ, ลิงก์, และฟอร์มเป็นเนื้อหาที่พบเห็นได้ในแท็ก <body>

HTML
<body>
    <h1>การใช้งานแท็ก body</h1>
    <p>เนื้อหานี้เป็นส่วนหนึ่งของเว็บเพจ</p>
    <a href="https://www.example.com">ลิงก์ไปยังเว็บไซต์</a>
    <img src="image.jpg" alt="รูปตัวอย่าง">
</body>

การใช้ CSS เพื่อจัดรูปแบบเนื้อหา สามารถใช้ CSS เพื่อจัดรูปแบบและการแสดงผลของแท็ก <body> รวมถึงการกำหนดพื้นหลัง ขนาดตัวอักษร และการจัดตำแหน่งเนื้อหา

HTML
<style>
    body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
    }
</style>
<body>
    <h1>หน้าแรก</h1>
    <p>ยินดีต้อนรับสู่เว็บไซต์ของเรา</p>
</body>

การใช้ JavaScript ใน <body> สามารถใช้ JavaScript เพื่อเพิ่มการโต้ตอบในเว็บเพจ เช่น การตอบสนองเมื่อผู้ใช้กดปุ่มหรือการเปลี่ยนแปลงเนื้อหาใน <body>

HTML
<body>
    <h1>คลิกปุ่มเพื่อเปลี่ยนข้อความ</h1>
    <p id="message">ข้อความนี้จะถูกเปลี่ยนแปลง</p>
    <button onclick="changeText()">เปลี่ยนข้อความ</button>

    <script>
        function changeText() {
            document.getElementById("message").innerHTML = "ข้อความถูกเปลี่ยนแล้ว!";
        }
    </script>
</body>

การใช้รูปภาพและมัลติมีเดีย สามารถฝังภาพ วิดีโอ หรือเสียงลงในแท็ก <body> ได้

HTML
<body>
    <h1>แสดงภาพและวิดีโอ</h1>
    <img src="example.jpg" alt="รูปตัวอย่าง" width="300">
    <video controls>
        <source src="video.mp4" type="video/mp4">
        เบราว์เซอร์ของคุณไม่รองรับการแสดงวิดีโอ
    </video>
</body>

การใช้งาน Event Handler ใช้ JavaScript เพื่อจับเหตุการณ์ต่างๆ เช่น การคลิกหรือการโหลดหน้าจอ

HTML
<body onload="alert('ยินดีต้อนรับ!')">
    <h1>หน้าเว็บพร้อมใช้งานแล้ว</h1>
</body>

สรุป

แท็ก <body> เป็นส่วนที่สำคัญใน HTML5 สำหรับการแสดงเนื้อหาหลักที่ผู้ใช้จะเห็นหรือโต้ตอบได้ สามารถประยุกต์ใช้ได้หลายรูปแบบ เช่น การจัดวางเนื้อหาข้อความและภาพ การฝังมัลติมีเดีย การโต้ตอบผ่าน JavaScript และการปรับแต่งด้วย CSS

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ