Membuat Layout Website Sederhana HTML dan Css

Membuat Layout Website Sederhana HTML dan Css


Di bawah ini contoh  yang bisa kamu copy paste buat html dan css kalian ,
layout susunan bagian website unsur pembuatan web yang harus paling di perhatikan. khusus nya bagian kalian yang minat di bagian web design.
karna itu tampilan website akan menggambarkan tingkat profesional nya kalian di web design
Sebelum sini baca juga sebelum mengenal coding untuk formula

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="dasar.css">
</head>
<body>
    <div class="wrap">
        <div class="header">           
            <h1>Dunia Script</h1>
            <p>Tutorial belajar membuat layout website sederhana</p>
        </div>
        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Javascript</a></li>               
            </ul>
        </div>
        <div class="badan">           
            <div class="sidebar">
                sidebar
                <ul>
                    <li><a href="#">Tutorial HTML dasar</a></li>
                    <li><a href="#">Tutorial CSS dasar</a></li>
                    <li><a href="#">Tutorial PHP dasar</a></li>
                    <li><a href="#">Tutorial JQuery dasar</a></li>               
                </ul>
            </div>
            <div class="content">
                content
            </div>
        </div>
        <div class="clear"></div>
        <div class="footer">
            footer
        </div>
    </div>
</body>
</html>



.wrap{
    background: blue;
    width: 900px;
    margin: 10px auto;
}

/*bagian header*/
.wrap .header{
    background: green;
    /*height: 50px;*/
    padding: 2px 10px;
}

/*akhir header*/

/*bagian menu*/
.wrap .menu{
    background: yellow;
}

.wrap .menu ul{
    padding: 0;
    margin: 0;
    background: yellow;
    overflow: hidden;
}

.wrap .menu ul li{
    float: left;
    list-style-type: none;
    padding: 10px;
}
/*akhir menu*/

.clear{
    clear: both;
}

.badan{
    height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
    background: orange;
    float: left;   
    width: 25%;
    height: 100%;
}

/*akhir sidebar*/

.wrap .badan .content{
    background: red;
    float: left;
    height: 100%;
    width: 75%;   
}

.wrap .footer{
    width: 100%;
    padding: 10px;
}

Setelah di copy paste jangan lupa save dengan nama dasar.html


Setelah itu kita membuat css nya copy saja coding di bawah ini :


.wrap{
    background: blue;
    width: 900px;
    margin: 10px auto;
}

/*bagian header*/
.wrap .header{
    background: blue;
    /*height: 50px;*/
    padding: 2px 10px;
}

/*akhir header*/

/*bagian menu*/
.wrap .menu{
    background: gray;
}

.wrap .menu ul{
    padding: 0;
    margin: 0;
    background: gray;
    overflow: hidden;
}

.wrap .menu ul li{
    float: left;
    list-style-type: none;
    padding: 10px;
}
/*akhir menu*/

.clear{
    clear: both;
}

.badan{
    height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
    background: orange;
    float: left;   
    width: 25%;
    height: 100%;
}

/*akhir sidebar*/

.wrap .badan .content{
    background: red;
    float: left;
    height: 100%;
    width: 75%;   
}

.wrap .footer{
    width: 100%;
    padding: 10px;
}


   Dan Save dengan dasar.css

Dan selesai sudah enjoy ^_^ jika kalian suka ikuti terus blog saya masih banyak lagi lain nya

Baca juga Belajar HTML DASAR 

0 komentar