Cara Mudah Membuat Layout Website.

Cara Mudah Membuat Layout Website. -sebenarnya sudah banyak situs-situs yang menyediakan layanan pembuatan website gratis dan langsung jadi, namun kita buta akan pengetahuan, dan cara membuatnya seperti apa sih didalam sebuah website yang sudah jadi itu, dan akhirnya kita jadi bertanya-tanya. Di artikel ini kita akan membahas tentang cara membuat layout sebuah website silahkan ikuti caranya dibawah ini:

Perhatikan caranya dibawah ini:

Buka text editor kalian terserah mau pakai editor apa, sublime, php designer8, dreamweaver, atau notpad++.
Buat file index.html
Ikuti langkah dibawah ini.

Baiklah kini saatnya kita mulai mengisikan codingan dibawah ini kedalam index.html

1. Tuliskan atau pastekan syntax html ini kedalam index.html yang telah kkalian buat.


<!DOCTYPE HTML>


<html>

<head>

                <meta http-equiv="content-type"
content="text/html" />

                <meta name="author"
content="lolkittens" />

                <title>Layout</title>

</head>

<body>

>----------------<

</body>

</html>

2. Kemudian isikan syntax dibawah ini di dalam <body>--disini--</body>.



<div id="wrapper">

    <div class="head">

    <p>HEADER</p>

    </div>

    <div class="nav">

    <p>NAVBAR</p>

    </div>

    <div class="content">

    <p>CONTENT</p>

<br />

    <br />

    <br />

    <p>ROY4LTY.BLOGSPOT.COM</p>

    </div>

    <div class="sidebar">

    <p>SIDEBAR</p>

    </div>

</div>

<div class="footer">

<p>FOOTER</p>

</div>

3. Setelah langkah diatas sudah sellesai sekarang kita masukan design layout yang sudah jadi dibawah ini di atas code </head>.



    <style type="text/css">

    body{

        background: black;

    }

    p{

        text-align: center;

        color: red;

        text-autospace: punctuation;

    }

    #wrapper{

        background: white;

        width: 810px;

        height: auto;

        margin: auto;

    }

    .head{

        height: 50px;

        background-color: teal;

    }

    .nav{

        background-color: maroon;

        height: 30px;

    }

    .content{

        width: 600px;

        height: 400px;

        float: left;

        border: dotted 1px;

    }

    .sidebar{

        width: 200px;

        height: 400px;

        float: right;

        border: dotted 1px;

    }

    .footer{

        margin: auto;

        background-color: aqua;

        width: 810px;

        height: 30px;

        clear: both;

    }

    </style>

4. Selesai, Kita tinggal melihat hasilnya di browser dan menabahkan content-content yang akan kita isikan di halaman web ini untuk lebih lanjut silahkan kalian ber eksperimen sendiri untuk memahami code-code diatas.

Pinned Post

Cara Mudah Membuat Layout Website.

Artikel Terkait

Berikan Komentar

Pilihan Flash & Reset