STUDI KASUS
cssbody{
margin:10px auto;
width:750px;
}
header{
height:80px;
display:block;
border:1px solid green;
background-color:green;
}
nav{
float:top;
width:748px;
height:30px;
display:block;
border:1px solid blue;
background-color:blue;
}
section{
width:748px;
height:370px;
display:block;
border:1px solid red;
background-color:red;
}
footer{
clear:both;
height:20px;
display:block;
border:1px solid green;
background-color:green;
}
article{
float:left;
margin-top:20px;
margin-left:20px;
height:325px;
width:500px;
border:1px dashed black;
background-color:white;
}
aside{
float:right;
margin-top:20px;
margin-right:20px;
height:325px;
width:180px;
border:1px dashed black;
background-color:white;
}
margin:10px auto;
width:750px;
}
header{
height:80px;
display:block;
border:1px solid green;
background-color:green;
}
nav{
float:top;
width:748px;
height:30px;
display:block;
border:1px solid blue;
background-color:blue;
}
section{
width:748px;
height:370px;
display:block;
border:1px solid red;
background-color:red;
}
footer{
clear:both;
height:20px;
display:block;
border:1px solid green;
background-color:green;
}
article{
float:left;
margin-top:20px;
margin-left:20px;
height:325px;
width:500px;
border:1px dashed black;
background-color:white;
}
aside{
float:right;
margin-top:20px;
margin-right:20px;
height:325px;
width:180px;
border:1px dashed black;
background-color:white;
}
html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Studi Kasus Modul 4</title>
<link rel="stylesheet" href="style_sk.css" type="text/css"/>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
<article>article</article>
<aside>aside</aside>
section
</section>
<footer>footer</footer>
</body>
</html>
<html lang="en">
<head>
<title>Studi Kasus Modul 4</title>
<link rel="stylesheet" href="style_sk.css" type="text/css"/>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
<article>article</article>
<aside>aside</aside>
section
</section>
<footer>footer</footer>
</body>
</html>
Screenshot
TUGAS PRAKTIKUM
cssbody{
margin:10px auto;
width:1100px;
background-color:silver;
}
header{
background-image:url(Header.jpg);
height:80px;
display:block;
padding:3px;
}
nav{
float:top;
width:1100px;
height:50px;
display:block;
background-color:#B0E0E6;
}
.button_nav{
background-color:RoyalBlue;
float:right;
color:white;
margin-left:2px;
height:30px;
border:1px solid RoyalBlue;
}
section{
width:1100px;
height:425px;
display:block;
background-color:#AFEEEE;
}
aside{
float:left;
height:418px;
width:300px;
border:4px solid black;
}
article{
margin-right:9px;
float:right;
height:300px;
width:782px;
background-color:white;
}
events{
background-color:#B0E0E6;
float:right;
border:1px solid blue;
margin-right:9px;
margin-left:1px;
margin-top:1px;
margin-bottom:1px;
height:122px;
width:780px;
}
footer{
background-image:url(Footer.jpg);
clear:both;
height:43px;
display:block;
padding:1px;
}
.text_footer{
color:white;
margin:1px;
}
#logo{
margin-top:3px;
margin-left:50px;
float:left;
}
#text_logo{
margin-top:15px;
margin-left:30px;
float:left;
color:white;
font-size:40px;
font-weight:bold;
}
#text_search{
margin-top:15px;
margin-left:30px;
float:left;
color:#0099CC;
}
#box_search{
margin-top:15px;
margin-left:10px;
float:left;
}
.text_events{
color:#0099CC;
font-size:20px;
font-weight:bold;
}
a{color:purple;}
li{color:#0099CC;}
margin:10px auto;
width:1100px;
background-color:silver;
}
header{
background-image:url(Header.jpg);
height:80px;
display:block;
padding:3px;
}
nav{
float:top;
width:1100px;
height:50px;
display:block;
background-color:#B0E0E6;
}
.button_nav{
background-color:RoyalBlue;
float:right;
color:white;
margin-left:2px;
height:30px;
border:1px solid RoyalBlue;
}
section{
width:1100px;
height:425px;
display:block;
background-color:#AFEEEE;
}
aside{
float:left;
height:418px;
width:300px;
border:4px solid black;
}
article{
margin-right:9px;
float:right;
height:300px;
width:782px;
background-color:white;
}
events{
background-color:#B0E0E6;
float:right;
border:1px solid blue;
margin-right:9px;
margin-left:1px;
margin-top:1px;
margin-bottom:1px;
height:122px;
width:780px;
}
footer{
background-image:url(Footer.jpg);
clear:both;
height:43px;
display:block;
padding:1px;
}
.text_footer{
color:white;
margin:1px;
}
#logo{
margin-top:3px;
margin-left:50px;
float:left;
}
#text_logo{
margin-top:15px;
margin-left:30px;
float:left;
color:white;
font-size:40px;
font-weight:bold;
}
#text_search{
margin-top:15px;
margin-left:30px;
float:left;
color:#0099CC;
}
#box_search{
margin-top:15px;
margin-left:10px;
float:left;
}
.text_events{
color:#0099CC;
font-size:20px;
font-weight:bold;
}
a{color:purple;}
li{color:#0099CC;}
html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum Modul 4</title>
<link rel="shortcut icon" href="Logo UM.png"/>
<link rel="stylesheet" href="style_tp.css" type="text/css"/>
</head>
<body>
<header>
<div id="logo"><img src="Logo UM.png" width="73" height="73"/></div>
<div id="text_logo">S1 PTI 2009 OFFERING C</div>
</header>
<nav>
<div id="text_search">Search</div>
<div id="box_search"><input type="text"/></td></div>
<input type="submit" value="Downloads" class="button_nav"/>
<input type="submit" value="Tips & Tricks" class="button_nav"/>
<input type="submit" value="Tutorials" class="button_nav"/>
<input type="submit" value="News & Media" class="button_nav"/>
<input type="submit" value="Home" class="button_nav"/>
</nav>
<section>
<aside>
<img src="Gunung Baung.jpg" width="300" height="418"/>
</aside>
<article>
Nama saya Hendriyanto, biasa dipanggil Hendri.<br>
Saya berasal dari Sumenep, kabupaten paling timur pulau Madura.<br>
Saya kuliah di Universitas Negeri Malang (UM), Fakultas Teknik,
Jurusan Teknik Elektro, Program Studi S1 Pendidikan Teknik Informatika.
<br><br>
Halaman web ini adalah halaman tugas praktikum modul 4.<br>
Text link di bawah ini tidak terhubung dengan link manapun,
melainkan link "no action".
</article>
<events>
<div class="text_events">Events:</div>
<ul>
<li><a href="#">Mengerjakan Tugas Kuliah</a></li>
<li><a href="#">Nyanyi Dangdut Lawas (Bukan Koplo, Apalagi Remix)</a></li>
<li><a href="#">Freestyle Soccer</a></li>
<li><a href="#">Capoeira</a></li>
</ul>
</events>
</section>
<footer>
<div class="text_footer" align="center">
Home | News & Media | Tutorials | Tips & Tricks | Downloads</div>
<div class="text_footer" align="right">
© bang_hendri</div>
</footer>
</body>
</html>
<html lang="en">
<head>
<title>Tugas Praktikum Modul 4</title>
<link rel="shortcut icon" href="Logo UM.png"/>
<link rel="stylesheet" href="style_tp.css" type="text/css"/>
</head>
<body>
<header>
<div id="logo"><img src="Logo UM.png" width="73" height="73"/></div>
<div id="text_logo">S1 PTI 2009 OFFERING C</div>
</header>
<nav>
<div id="text_search">Search</div>
<div id="box_search"><input type="text"/></td></div>
<input type="submit" value="Downloads" class="button_nav"/>
<input type="submit" value="Tips & Tricks" class="button_nav"/>
<input type="submit" value="Tutorials" class="button_nav"/>
<input type="submit" value="News & Media" class="button_nav"/>
<input type="submit" value="Home" class="button_nav"/>
</nav>
<section>
<aside>
<img src="Gunung Baung.jpg" width="300" height="418"/>
</aside>
<article>
Nama saya Hendriyanto, biasa dipanggil Hendri.<br>
Saya berasal dari Sumenep, kabupaten paling timur pulau Madura.<br>
Saya kuliah di Universitas Negeri Malang (UM), Fakultas Teknik,
Jurusan Teknik Elektro, Program Studi S1 Pendidikan Teknik Informatika.
<br><br>
Halaman web ini adalah halaman tugas praktikum modul 4.<br>
Text link di bawah ini tidak terhubung dengan link manapun,
melainkan link "no action".
</article>
<events>
<div class="text_events">Events:</div>
<ul>
<li><a href="#">Mengerjakan Tugas Kuliah</a></li>
<li><a href="#">Nyanyi Dangdut Lawas (Bukan Koplo, Apalagi Remix)</a></li>
<li><a href="#">Freestyle Soccer</a></li>
<li><a href="#">Capoeira</a></li>
</ul>
</events>
</section>
<footer>
<div class="text_footer" align="center">
Home | News & Media | Tutorials | Tips & Tricks | Downloads</div>
<div class="text_footer" align="right">
© bang_hendri</div>
</footer>
</body>
</html>
Screenshot
