Belajar div pada html

belajar div pada html

Div adalah salah satu elemen pada HTML yang berguna untuk membuat sebuah container atau wadah elemen dan memudahkan untuk mengelompokan elemen pada HTML. Div kepanjangan dari division, div sendiri sering disebut layout pada halaman web. Biasanya div sering ditambahkan atribut id atau class untuk memudahkan style pada css dan event pada javascript.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    <style>
    #container {
        width: 250px;
        height: 200px;
        background-color: yellow;
    }
    .container-box {
        width: 200px;
        height: 150px;
        background-color: orange;
    }
    </style>
    </head>
    <body>

    <div id="container">
        <p>Box 1</p>
    </div>

    <div class="container-box">
        <p>Box 2</p>
    </div>

    <div class="container-box">
        <p>Box 3</p>
    </div>

    </body>
</html>

Hasilnya:

Box 1

Box 1

Box 2

Div bersarang

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    <style>
    #container {
        width: 250px;
        height: 200px;
        background-color: yellow;
    }
    .container-box {
        width: 150px;
        height: 150px;
        background-color: orange;
    }
    </style>
    </head>
    <body>

    <div id="container">
        <div class="container-box">
            <p>Box 2</p>
        </div>
    </div>

    </body>
</html>

Hasilnya:

Box 2

Anda akan belajar lebih dalam tentang CSS dilain waktu

Leave a Reply

Your email address will not be published. Required fields are marked *