Membuat Kerangka Website Sederhana Menggunakan HTML & CSS

Perangkat yang di butuhkan :

1. Browser (chrome, mozile, opera, dll).
2. Text Editor (notepad++, sublime text, atom dll). Saya menggunakan notepad++ jika belum ada download di sini
3. Internet (opsi), saya menggunakan internet karena untuk melihat kode warna.

Langsung ke langkah pertama.

Buat file HTML seperti di bawah dengan nama file index.html simpan di sebuah folder.

<html>
<head>
<title>MEMBUAT KERANGKA WEBSITE</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>INI ADALAH CLASS HEADER</h1>
</div>
<div class="menu">
<h4>INI ADALAH CLASS MENU</h4>
</div>
<div class="clear"></div>
<div class="left-sidebar">
<h4>INI ADALAH CLASS LEFT_SIDEBAR</h4>
</div>
<div class="content">
<h1>INI ADALAH CLASS CONTENT</h1>
</div>
<div class="right-sidebar">
<h4>INI ADALAH CLASS RIGHT_SIDEBAR</h4>
</div>
<div class="clear"></div>
<div class="footer">
<h1>INI ADALAH CLASS FOOTER</h1>
</div>

</div>

</body>
</html>

Langkah kedua buat file CSS seperti file di bawah, dan save dengan nama style.css di folder yang sama dengan file index.html

body{
margin: 0px 0px;
background-color: #f2a8a4;
}
.wrapper{
width: 1300px;
height: auto;
margin: auto;
background-color: #f1eba3;
text-align: center;
}
.clear{
clear: both;
}
.header{
width: 1300px;
height: 250px;
background-color: #a3f0c6;
text-align: center;
}
.menu{
width: 1300px;
height: 50px;
background-color: #462bf2;
float: left;
text-align: center;
}
.left-sidebar{
width: 300px;
height: 1000px;
float: left;
background-color: #e82af1;
text-align: center;
}
.content{
width: 700px;
height: 1000px;
background-color: #2af055;
float: left;
text-align: center;
}
.right-sidebar{
width: 300px;
height: 1000px;
background-color: #efe22a;
float: left;
text-align: center;
}
.footer{
width: 1300px;
height:150px;
background-color: #ef2a61;
float: left;
text-align: center;
}

Untuk Lebih jelas dan lengkapnya lihat video berikut :

Thx, semoga bermanfaat.

Tentang IT ~ Informasi Seputar Informasi Teknologi

Membuat Kerangka Website Sederhana Menggunakan HTML & CSS