Tugas Praktikum Modul 4
Senin, 28 Februari 2011
| 
Diposting oleh
Abdul Patrick |
Karena tuntutan menggunakan HTML5 tapi malah banyak errornya. akhirnya pake HTML4 ajha dah. heheCSS
body {
margin:5px auto;
padding:0;
font:0.72em/150% Calibri;
}
#wrapper {
margin:auto;
width:980px;
}
#header {
height:80px;
margin:0px auto;
background:#0000;
}
#header-content{
height:70px;
margin:auto;
background:url(image/header.jpg);
}
#menu-top {
font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;
}
#logo {
float:left;
margin:10px 10px 10px 50px;
height:50px;
}
#site-title h2{
float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'ravie';
font-weight: bold;
}
#search {
clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;
}
#inner {
float:left;
margin:0px;
}
#footer {
clear:both;
height:60px;
background:#2033a9;
}
#footer p {
text-align:center;
}
#sidebar {
float:left;
width:200px;
height:400px;
background-color:#bbbbbb;
}
#content {
float:right;
width:780px;
height:400px;
background:#FFF;
}
#content-top {
clear:both;
margin:auto;
width:780px;
height:140px;
background-image:url(TopBg.jpg)
}
#content-main {
float:left;
margin:auto;
width:480px;
height:240px;
}
#content-main p, h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
.style1 {
font-size:x-small;
}
#content-main hr{
width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;
}
#content-right {
float:right;
margin:10px auto;
width:260px;
border: 2px solid blue;
background:#4a5cca;
}
#content-right h3{
padding: 10px 20px 0px 20px;
text-align:justify;
}
#content-right ul{
padding: 10px 20px 20px 40px;
list-style:square;
}
#leftmenu ul {
width:200px;
list-style-type:none;
padding:0;
margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left:15px;
text-decoration:none;
}
#leftmenu a {
padding: 5px 0px 5px 15px;
display:block;
background:#818dd5 no-repeat left center;
margin: 0px 0px 1px; color:#000;
}
#leftmenu a:hover {
background:#5e9711 no-repeat left center;
color:#fff;
}
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Tugas Praktikum Modul 4</title>
<link rel="stylesheet" href="praktikumModul4.css" type="text/css" />
</head>
<body bgcolor=black>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="logo_um.png" width="50" alt="" />
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Pengumuman Lomba Desain Header Web</h3>
<hr />
<p class="style1">
Minggu, 28 Februari 2010
</p>
<p>
Setelah sempat tertunda beberapa hari, akhirnya panitia lomba desain header web mengumumkan hasil akhir lomba. Sebagaimana disampaikan pada tulisan sebelumnya, seleksi dilakukan secara ketat melalui tiga tahap: 10 besar, 5 besar, dan 3 besar. Dalam pelaksanaannya, panitia teknis dan tim juri bekerja secara cermat dan hati-hati. Adapun hasil selengkapnya bisa dilihat di blog resmi Jurusan Teknik Elektro.
Penyerahan hadiah dan sekaligus piagam penghargaan akan dijadwalkan secepatnya. Untuk itu, diharap para pemenang segera menghubungi panitia guna melakukan verifikasi akhir. Rencananya, penyerahan secara simbolis akan dilakukan langsung oleh Ketua Jurusan, Bapak Slamet Wibawanto.
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Pelatihan KORPS ASISTEN ELEKTRO</a></li>
<li><a href="#">Projas TE</a></li>
<li><a href="#">Kontes Robot Indonesia</a></li>
<li><a href="#">Kunjungan Industri S1 PTI</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>© 2010 Teknik Elektro UM. Malang, Indonesia.</b></p>
</div>
</div>
</body>
</html>
Senin, Februari 28, 2011 |
0 komentar:
Posting Komentar
Kritik dan saran yang anda berikan akan sangat bermanfaat bagi kami untuk terus memberi yang terbaik. ^_^