Tidak Terasa Uda masuk Modul Berikut hasil kerja saya
Tugas Studi Kasus
Outputnya begini:
Source Codenya :
studikasus.html
<! doctype html>
<html lang="en">
<head>
<title>Studi Kasus Modul 4</title>
<link rel="stylesheet" href="style1.css" type="text/css"/>
</head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<section>
<article>
article
</article>
<aside>
aside
</aside>
<br>
hello world
</section>
<footer>
footer
</footer>
</body>
</html>
style1.css
body {
margin: 10px auto;
width: 750px;
}
header, nav, section, footer {
display:block;
border:2px solid green;
}
header {
height:80px;
border:2px solid blue;
}
nav{
height:50px;
}
section{
height:400px;
border-right:5px solid royalblue;
padding : 10px
}
article{
float:left;
width:500px;
height:350px;
border:2px dashed red;
}
aside{
float:right;
width:200px;
height:350px;
border:2px dashed yellow;
}
footer{
height:20px;
border-top :2px solid blue;
}
Tugas Pratikumnya punya Output gini :
Source Code nya:
pratikum.html
<! doctype html>
<html lang="en">
<head>
<title>Pratikum Modul 4</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<header><font color=red size=10>
<img src="images/UM1.png" width=80 height=80 align=middle> TEKNIK ELEKTRO
</font></header>
<nav>
<black>
<ul><li><a href="#">Home</a></li>
<li><a href="#">News&Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips&Tricks</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<searchboxo>
<form action='/search' id='searchform' method='get'>
<input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "")
{this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='Insert keyword here...'/><input class='submitbutton' type='submit' value='Search'/></form>
</black>
</searchboxo>
</nav>
<section>
<article>
<img src="images/Witchville-2010.jpg" width=185 height=375>
</article>
<aside>
<aside1>
New info gan..
Jakarta - Motion Pictures Association (MPA) merasa keberatan dengan keputusan pemerintah untuk menambah beban pajak film impor. Jika MPA benar-benar menghentikan peredaran film Hollywood, berikut film-film bagus yang akan Anda lewati.
Mulai April hingga Juli mendatang, Hollywood bakal merilis beberapa film terbaiknya. Sepuluh di antaranya adalah film-film yang paling dinantikan kehadirannya di bioskop. Film-film itu adalah:
</aside1>
<aside2><font color=blue>
Events :<br><font>
<ul><li><a href="#">Balapan makan kerupuk</a></li>
<li><a href="#">Lomba ngupil</a></li>
<li><a href="#">Wisuda PTI07</a></li>
<li><a href="#">Audisi Mahasiswa Abadi</a></li>
</ul>
</aside2>
</aside>
</section>
<footer>
<center>
<a href="#">Home | </a><a href="#">News&Media | </a><a href="#">Tutorial | </a><a href="#">Tips&Trik | </a><a href="#">Download | </a><br>
</center>
<footer1>
© Marcelino Bayu
</footer1>
</footer>
</body>
</html>
style.css
body {
margin: 10px auto;
width: 750px;
}
header, nav, section, footer {
display:block;
}
header {
background-image:url(images/darksoul.gif);
height:80px;
border-top :2px solid blue;
border-bottom :2px solid blue;
}
nav{
height:50px;
}
section{
height:400px;
border-right:5px solid royalblue;
}
article{
float:left;
width:185px;
height:375px;
border:5px solid black;
}
aside{
background-color:royalblue;
float:right;
width:550px;
height:385px;
}
aside1{
float:right;
background-color:white;
width:550px;
height:250px;
padding:1px;
}
aside2{
float:right;
width:550px;
height:125px;
border-right:2px solid blue;
border-bottom:2px solid blue;
}
black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 10px Verdana;
list-style-type: none; }
black li{
display: inline; margin: 0;}
black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}
.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}
searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }
searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }
searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}
footer{
background-image:url(images/darksoul.gif);
height:40px;
border-top :2px solid blue;
border-bottom :2px solid blue;
}
footer1{
float:right;
height:20px;
width:150px;
}
Ayo Gan Baca Lanjutannya...
