Twitter Facebook Delicious Digg Stumbleupon Favorites More

10/05/17

Membuat Kerangka Website Sederhana Menggunakan HTML & CSS

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.

Share:

0 comments:

Posting Komentar

Cari Di Blog Ini

Menerima Jasa

Diberdayakan oleh Blogger.
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS

TentangIT

Copyright © Tentang IT | Powered by Blogger
Design by SimpleWpThemes | Blogger Theme by NewBloggerThemes.com & Distributed By Protemplateslab