Assalamualaikum wr-wb
"hai semua, apa kabar kali ini saya akan share sedikit tentang cara membuat layout website sederhana dengan html dan css.
A.pengertian.
Layout atau tata letak merupakan satu keputusan yang menentukan efisiensi sebuah operasi dalm jangka panjang. Banyak dampak strategis yang terjadi dari hasil keputusan tentang layout, diantaranya kapasitas, proses, fleksibilitas, biaya, kualitas lingkungan kerja, kontak konsumen dan citra perusahaan. Layout yang efektif membantu perusahaan mencapai sebuah strategi yang menunjang strategi bisnis yang telah ditetapkan diantara diferensiasi, biaya rendah maupun respon cepat.
Layout atau tata letak merupakan satu keputusan yang menentukan efisiensi sebuah operasi dalm jangka panjang. Banyak dampak strategis yang terjadi dari hasil keputusan tentang layout, diantaranya kapasitas, proses, fleksibilitas, biaya, kualitas lingkungan kerja, kontak konsumen dan citra perusahaan. Layout yang efektif membantu perusahaan mencapai sebuah strategi yang menunjang strategi bisnis yang telah ditetapkan diantara diferensiasi, biaya rendah maupun respon cepat.
1. buat sebuah file. di sini saya membuat sebuah file dengan nama index.html
index.html
Setelah itu kita buat text nya.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Percobaan Andi</h1>
<p>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">
<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">
</div>
</div>
<div class="clear"></div>
<div class="footer">
</div>
</div>
</body>
</html>
2.dan buat lagi sebuah file css nya. buat dengan nama style.css
style.css
.wrap {
background: yellow;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: red;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: #00ffff;
}
.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: #40ff00;
float: left;
width: 25%;
height: 100%;
}
/*akhir sidebar*/
.wrap .badan .content{
background: #00ffff;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
jalankan file index.html pada browse.
index.html
Setelah itu kita buat text nya.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Percobaan Andi</h1>
<p>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">
<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">
</div>
</div>
<div class="clear"></div>
<div class="footer">
</div>
</div>
</body>
</html>
2.dan buat lagi sebuah file css nya. buat dengan nama style.css
style.css
.wrap {
background: yellow;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: red;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: #00ffff;
}
.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: #40ff00;
float: left;
width: 25%;
height: 100%;
}
/*akhir sidebar*/
.wrap .badan .content{
background: #00ffff;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
jalankan file index.html pada browse.
>Referensi.
> http://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/
> http://www.malasngoding.com/membuat-tampilan-layout-website-sederhana-dengan-html-dan-css/
"Sekian dari saya, semoga bermanfaat,
Terima Kasih....!
Terima Kasih....!
Wassalamualaikum wr-wb
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon