MEMBUAT TAMPILAN LAYOUT ~ Rizka Mala Alfiana

Assalamu'alaikum wr.wb

Membuat file index

Buat file baru dengan nama index.html kemudian simpan di dalam folder layoutWEB
Isikan source code berikut dalam file index.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat tampilan layout WEB sederhana HTML dan CSS</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="warpper">

<div class="header">

<h1>header</h1>

</div>

<div class="nav">

menu

</div>

<div class="content">

<div class="main">

main content

</div>

<div class="sidebar">

sidebar

</div>

</div>

<div class="footer">

footer

</div>

</div>

</body>

</html>

Membuat file CSS

Buat file baru dengan nama style.css kemudian simpan di dalam folder layoutWEB

Isikan source code berikut dalam file style.css

*{
 margin: 0px;
 padding: 0px;
}
body{
 background-color: #B5B4A3;
}
.warpper{
 width: 1000px;
 margin: auto;
 padding: 5px 10px 5px 10px;
}
.header{
 width: 1000px;
 min-height: 150px;
 background-color: #F1F1F1;
 margin-bottom: 5px;
}
.nav{ 
 width: 1000px;
 height: 25px;
 background-color: #F1F1F1;
}
.content{
 margin-top: 5px;
 overflow: hidden; 
 width: 1000px;
 min-height: 300px; 
}
.main{ 
 float: left;
 width: 695px;
 min-height: 300px;
 background-color: #F1F1F1; 
 margin-right: 5px;
}
.sidebar{ 
 float: right;
 width: 300px;
 min-height: 300px;
 background-color: #F1F1F1;
}
.footer{ 
 width: 1000px;
 height: 100px;
 background-color: #F1F1F1;
 margin-top: 5px;
}

margin: 0px;

padding: 0px;

}

body{

background-color: #B5B4A3;

}

.warpper{

width: 1000px;

margin: auto;

padding: 5px 10px 5px 10px;

}

.header{

width: 1000px;

min-height: 150px;

background-color: #F1F1F1;

margin-bottom: 5px;

}

.nav{

width: 1000px;

height: 25px;

background-color: #F1F1F1;

}

.content{

margin-top: 5px;

overflow: hidden;

width: 1000px;

min-height: 300px;

}

.main{

float: left;

width: 695px;

min-height: 300px;

background-color: #F1F1F1;

margin-right: 5px;

}

.sidebar{

float: right;

width: 300px;

min-height: 300px;

background-color: #F1F1F1;

}

.footer{

width: 1000px;

height: 100px;

background-color: #F1F1F1;

margin-top: 5px;

}

Untuk Melihat hasilnya yaitu dengan cara buka file index.html di browser seperti Mozilla Firefox,Google Chrome dan lain sebagainya.

Berikut adalah tampilan file index.html di browser ...

Wassalamu'alaikum Wr.wb

Rabu, 15 Mei 2019