Tugas Praktikum 4 (Pemrograman WEB)
On Selasa, 22 Februari 2011
0
komentar
Kode CSS(styles.css):
body {
margin: 10px auto;
width: 750px;
}
header {
height:80px;
background-image:url('header-blue.png');
background-repeat:repeat-x;
padding:12px 0 0 0;
}
nav {
width:740px;
height:40px;
background-color: lightblue;
padding: 0 0 0 10px;
}
section {
width:748;
height:375px;
border-right: 4px solid lightblue;
border-bottom: 4px solid lightblue;
}
article {
float:left;
width:300px;
height:375px;
}
aside {
margin-left:300px;
width:446px;
height:220px;
font-size:10px;
padding: 3px;
}
event{
background-color:lightblue;
float:right;
margin:0px 0px 0px 0px;
width:444px;
height:150px;
border:1px solid royalblue;
}
li {
margin-left:30px;
color:#0099CC;
}
footer{
clear:both;
height:30px;
background-image:url('footer.jpg');
background-repeat:repeat-x;
border:1px solid royalblue;
}
#logo {
margin-left:40px;
float:left;
}
#logo_text {
margin-top:20px;
margin-left:130px;
color:white;
font-size:30px;
}
.menu{
float:right;
color:white;
font-size:10px;
width:auto;
background-color:#3461BC;
border:1px solid #3461BC;
margin-left:2px;
}
.search{
width:100px;
margin-top:10px;
}
a{
color:blue;
}
.blue {
color:#0099CC;
margin:5px;
}
.footer {
color:white;
font-size:12px;
}
.footer1 {
margin-top:1px;
color:white;
font-size:12px;
}
Kode HTML (index.html):
<!DOCTYPE HTML>
<html lang="id">
<head>
<title>UNIVERSITAS NEGERI MALANG</title>
<link rel="stylesheet" href="img/styles.css" type="text/css"/>
<link rel="shortcut icon" href="img/Logo UM.png"/>
</head>
<body>
<header>
<div id="logo"> <img src="img/Logo UM.png" width="70px"
height="70px" title="Universitas Negeri Malang"/> </div>
<div id="logo_text">Universitas Negeri Malang</div>
</header>
<nav>
Search
<input class="search"></input>
<input class="menu" value="Downloads" type="submit"></input>
<input class="menu" value="Tips & Tricks" type="submit"></input>
<input class="menu" value="Tutorials" type="submit"></input>
<input class="menu" value="News & Media" type="submit"></input>
<input class="menu" value="Home" type="submit"></input>
</nav>
<section>
<article>
<img src="img/mbahmu.png" width="300px" height="375px" title="Mbahmu"/>
</article>
<aside>The fuselage is the main body of the rc airplane. It serves as a housing of the internal components and holds together the outer parts. Obviously the wings is what makes the rc model airplane fly. This part supports the rc airplane in flight and the size, type, and location of the wing determines the flight characteristics of the rc airplane (see Chapter 2). The aileron located at the trailing edge (see Fig. 1) of the wing is what controls the longitudinal axis or the rolling motion of the wing. It also controls the rc airplane's direction by means of banking the wing either in the left or right direction. Flaps is sometimes added to increase the lift of the wing and to reduce the runway distance on take-off. </br></br>
The horizontal stabilizer is usually located at the tail of the aircraft. It serves to stabilize it in the lateral axis or to counter act the up and down motion of the aircraft (or pitch). The elevator is attached to the horizontal stabilizer. It controls the up and down motion (or pitch). The vertical stabilizer is also located at the tail and perpendicular to the horizontal stabilizer. It stabilizes the aircraft in the vertical axis. The rudder is attached to the vertical stab, which control the rc airplane in the vertical axis. This mechanism is usually found in full size aircraft but optional in model aircraft. The landing gear along with the wheels supports the aircraft on the ground. The two common types are tricycle and the tail dragger (see Fig 2).
</aside>
<event>
<div class="blue">EVENTS:</div>
<li><a href="#">Balapan Makan Kerupuk</a></li>
<li><a href="#">Lomba Ngupil</a></li>
<li><a href="#">Wisuda PTI '09</a></li>
<li><a href="#">Audisi Mahasiswa Elektro</a></li>
</event>
</section>
<footer>
<div class="footer" align="center">Home | News & Media | Tutorials | Tips & Tricks | Downloads</div>
<div class="footer1" align="right">© Gee</div>
</footer>
</body>
</html>
