Wednesday, 6 November 2013

Rancangan Website Dengan Notepad++

Di di sub bab Ini kita akan membuat Rancangan Website menggunakan NP++ , setelah selesai menginstall np++ dan Xampp sekarang kita akan mulai menggarap rancangan website dengan cara pertama yaitu membuat  sebuah folder dengan nama "web" setelah itu buka notepad plus" dan mulai merancang web dengan CSS Dan HTML
pertama kita membuat CSS:
klik tab new pada notepad++
masukkan kode berikut:





*{margin:0 auto; padding:0}
body{background:#c0c0c0;
    font-family:verdana; font-size:10px; color:#4c4e55;
    }
#container{width:1007px; height:1369px;
    background:url('bg.jpg') no-repeat;
    }
#header{height: 150px;
    border: 1px solid #009900;
    }
#sidebar_kiri{float:left; width:250px; height:1000px; margin:3px 0;
    padding:3px; border:1px solid #009900;
    }
#center{float:left; width: 577px; height:1000px; margin:3px; padding:3px;
    border:1px solid #009900;
    }
#sidebar_kanan{float:left; width:150px; height:1000px; margin:3px 0;
    padding: 3px; border: 1px solid #009900;
    }
#footer{height:201px; border:1px solid #009900;
    clear: both;
    }

lalu simpan dengan nama style.css dan simpan pada folder yang sudah di ciptakan sebelim nya
berikut nya lakukan lagi membuat file baru pada notepad++ lalu pastekan kote html berikut:
<html>
<head>
<title>Layout Website 3 Kolom</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
    <div id="header">
    </div>
    <div id="sidebar_kiri">
    </div>
    <div id="center">
    </div>
    <div id="sidebar_kanan">
    </div>
    <div id="footer">
    </div>
</div>
</body>
</html>

Lalu simpat kode berikut dengan nama "index.html" seelah itu melakukan ujicoba dengan menekan tab RUN pada notepad dan pilih webbrowser yang di gunakan sekian...:D

[Klik Untuk Bertanya]





No comments:

Post a Comment