Tugas Praktikum ini pada dasarnya sama dengan studi kasus yang sebelumnya saya jelaskan tadi, dan saya menggunakan file css yang ada pada studi kasus modul 4 hanya saja saya menambahkan beberapa bagian untuk lebih melengkapi. Langsung saja anda bisa lihat pada scriptnya :
File .CSS :
body{
margin:10px auto;
width:750px;
}
header,nav,section,article,aside,footer,photo,logo,site-title{
display:block;
/*border:1px solid blue;*/
}
header{
height:80px;
border:5px solid black;
background-image:url(images/soccer_13.jpg);
}
#logo {
float:left;
margin:10px 10px 10px 50px;
height:30px;
}
#site-title h2{
float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'ravie';
font-weight: bold;
}
nav{
height:50px;
border:2px solid black;
padding:10px;
background-image:url(images/soccer_13.jpg);
}
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
position: relative;
float:left;
width:100px;
}
li ul{
position:absolute;
top:25px;
display:none;
}
ul li{
display:block;
line-height:20px;
text-align:center;
padding:7px;
background: red;
margin:0 2px;
border:1px solid blue;
}
ul li a:haver{background: grey;}
li:hover ul, li.over ul{display:block;}
section{
padding:20px;
height:410px;
border:2px solid black;
background-image:url(images/soccer_13.jpg);
}
article{
float:left;
width:70%;
height:100%;
border:2px solid black;
background-color:white;
}
aside{
float:right;
width:27a%;
height:100%;
border:2px solid black;
}
footer{
clear:both;
height:40px;
border:2px solid black;
background-image:url(images/soccer_13.jpg);
}
FILE .HTML :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="tgsprak.css" type="text/css" />
</head>
<body bgcolor="grey">
<header>
<div id="logo">
<img src="images/unm.png" alt="" />
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
</header>
<nav>
<ul id="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">PROFIL</a></li>
<li><a href="#">GALERY</a>
<ul>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">VIDEOS</a></li>
</ul>
</li>
<li><a href="#">DOWNLOAD</a>
<ul>
<li><a href="#">TUTORIAL</a></li>
<li><a href="#">APLIKASI</a></li>
<li><a href="#">GAME</a></li>
</ul>
</li>
</ul>
<div class="box1">
<button>Search</button><input type="text" size="10">
</div>
</nav>
<section>
<article>
<h4 align="center">PROGRAM STUDI S1 PENDIDIKAN TEKNIK INFORMATIKA</h4>
VISI :
<p>
Mewujudkan Prodi S1 Pendidikan Teknik Informatika sebagai prodi yang unggu dan menajdi rujukan nasional dalam pengembangan bidang pendidikan dan sains khususnya dalam bidang pendidikan teknik informatika yang relevan dengan kebutuhan pembangunan, masyarakat dan kemanusiaan.
</br></br>
MISI :
</br>
1. Menyelenggarakan pendidikan tinggi untuk menghasilkan lulusan yang unggul dan berdaya saing tinggi dalam bidang pendidikan teknik informatika.
</br>
2. Menyelenggarakan penelitian dan pengembangan ilmu untuk menghasilkan karya akademik yang unggul dan berdaya saing tinggi dalam bidang pendidikan,sains, dan teknologi khususnya bidang pendidikan teknik informatika.
</br>
3. Membangun masyarakat melalui penerapan iptek dalam bidang teknik informatika bagi kesejahteraan kualitas dan kinerja prodi.
</p>
</br>
</article>
<aside>
<div class="box1">
Email Anda <input type="text" size="10">
Password <input type="password" size="10">
<button>Login</button>
</br>
<h3>Events</h3>
<a href="#">1. Lomba Web Design</a></br>
<a href="#">2. Electrical Engineering Department Contest</a></br>
<a href="#">3. Diesnatalies Fakultas Teknik</a></br>
<a href="#">4. Kunjungan Industri Mahasiswa Angkatan 2009</a></br>
</aside>
</section>
<footer>
<h4 align="center">copyright 2011 by septian @ UM<h4>
</br>
</footer>
</body>
</html>
Untuk Hasilnya sbb :
