close

Pengenalan kepada Struktur HTML: Elemen Asas dan Sintaks

Struktur HTML memainkan peranan penting dalam membina halaman web. Ia mentakrifkan cara kandungan disusun dan dipaparkan pada halaman web. Berikut ialah pengenalan kepada struktur HTML asas:

1. Doctype

Doctype(Pengisytiharan Jenis Dokumen) mentakrifkan versi HTML yang digunakan oleh halaman web. Ia harus diletakkan pada permulaan fail HTML.

2. tag html

Teg html ialah elemen akar bagi setiap fail HTML. Ia merangkumi keseluruhan kandungan halaman web.

3. head tag

Teg kepala mengandungi maklumat tentang halaman web yang tidak dipaparkan secara langsung pada penyemak imbas. Di sinilah tajuk halaman, tag meta, pautan ke fail CSS dan JavaScript, dan pelbagai elemen lain ditakrifkan.

4. body tag

Teg badan mengandungi semua kandungan yang dipaparkan pada halaman web. Di sinilah elemen seperti teks, imej, video, pautan dan komponen antara muka pengguna lain ditakrifkan.

5. Tag bersarang

HTML menggunakan struktur hierarki dengan tag pembuka dan penutup. Tag anak diletakkan di dalam tag induk. Contohnya, teg p(perenggan) boleh mengandungi teg rentang(teks sebaris), teg kuat(teks tebal) dan banyak teg lain.

6. Tag biasa

HTML menyediakan pelbagai teg untuk memformat dan memaparkan kandungan. Contohnya, tag h1-h6(tajuk), tag p(perenggan), tag img(imej), tag(pautan) dan lain-lain lagi.

 

Berikut ialah contoh struktur halaman HTML yang lengkap:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

Dalam contoh di atas, kami mempunyai halaman HTML lengkap dengan elemen utama seperti doctype, html teg, head teg dan body teg. Di bahagian kepala, kami mentakrifkan tajuk halaman, fail CSS dan JavaScript yang akan digunakan. Bahagian badan mengandungi elemen seperti pengepala, utama dan pengaki untuk memaparkan kandungan halaman web.

 

Dengan menggunakan struktur HTML yang betul, anda boleh membina halaman web yang teratur, boleh dibaca dan interaktif.