Berikut ini merupakan intruksi code untuk layout standart, yang harus kalian buat sebagai berikut :
1. Layout HTML nya
Silakan buat coding layout berikut ini, dan save dengan nama layout1_kelompok1.html, dan save didalam folder : Local Disk (C:) -> Xampp -> htdocs -> lalu buat folder kalian, dan simpan layout1_kelompok1.html ini di dalam folder tersebut.
code nya :
<html>
<head>
<meta charset="utf-8">
<title>Layout Website Sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="nav">
MENU
</div>
<div class="main">
<div class="content">
<h2>Content</h2>
<p>Content Web</p>
</div>
<div class="sidebar">
<h2>Righr Sidebar</h2>
</div>
<div class="clear"></div>
</div>
<div class="footer">
<center><p>Copyright © 2017 www.modulkomputer.com</p></center>
</div>
</div>
</body>
</html>
2. CSS Layout nya
Setelah kalian membuat HTML layoutnya, sekarang kalian membuat CSS untuk membentuk dan mempercantik tampilan website kalian, silakan buat code di bawah ini dengan nama : layout.css, lalu save berdampingan dengan file layout HTML diatas.
Code nya :
body {
font-family:arial,segoe ui;
}
.wrap {
width:1000px;
margin:0 auto;
}
.header {
width:auto;
background:#09C;
padding:20px;
color:#fff;
}
.clear {clear:both}
.nav {
width:auto;
background:#000;
padding:5px 20px;
color:#FFF;
}
.main {
width:100%;
background:#6F9;
}
.content {
float:left;
width:66%;
background:#FF9;
padding:2%;
min-height:400px;
}
.sidebar {
float:right;
width:26%;
background:#6F9;
padding:2%;
}
.clear {clear:both}
.footer {
width:auto;
height:auto;
padding:5px 10px;
background:#333;
color:#fff;
}
lalu silakan kalian cek dan buka apakah layout sudah berjalan dan dapat di akses?
Tidak ada komentar:
Posting Komentar