Tugas Praktikum Modul 4 – Desain Web CSS

Pada Modul praktikum ke 4 ini akan membat desain web dari sebuah file css.  Untuk menghasilkan halaman web yang tampil haruslah cukup menarik. Untuk mendownload full source codenya silakan klik tombol download di bawah ini

Download

Download

Screen Shoot tampilan Desain Web CSS

 

Source Code HTML

<!DOCTYPE html>
<head>
 <title>Tugas Layout Web Elektro</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <header>
 <div>
 <div>
 <div>
 <a href=#>Beranda</a> | <a href=#>SiteMap</a> | <a href=#>RSS</a> | <a href=#>Kontak</a> | <a href=#>Pembuat</a></div>
 <div>Pencarian <input type="text"></div>
 </div>
 <img src="logo.png" width="50px" height="50px">

 </div><div>Teknik Informatika</div>
 </header>
 <nav>
 <div>
 <a href=#><div><div>Beranda</div></div></a>
 <a href=#><div><div>Berita & Trend</div></div></a>
 <a href=#><div><div>Tutorial</div></div></a>
 <a href=#><div><div>Tips & Trick</div></div></a>
 <a href=#><div><div>Downloads</div></div></a>
 </div>
 </nav>

 <section>
 <div>
 <img src="Banner.jpg" width="740">
 <div>
 <div>Dinding</div>
 <ul>
 <a href=#><li>Nilai Siswa</li></a>
 <li><a href=#>Jadwal Kuliah</a></li>
 <li><a href=#>Jadwal Dosen</a></li>
 <li><a href=#>Kegiatan Kampus</a></li>
 </ul>
 </div>
 <div>Seminar Komputer</div>
 <div>1 Maret 2011 - 11:14 AM</div>
 <div>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.
 <a href="#">[Baca Selengkapnya]</a></p>
 <p>&nbsp;</p>
 </div>
 <div>Lomba Membuat Program</div>
 <div>2 Maret 2011 - 06:00 PM</div>
 <div>
 Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.
 <a href="#">[Baca Selengkapnya]</a>            </div>
 </div>
 </section>

 <footer>
 <div>
 <div>Tugas css design layout web elektro &copy; 2011 by <strong><a href="http://bagusdream.wordpress.com">Setyo Bagus Fristanto</a></strong></div>
 </div>
 </footer>

</body>

</html>

 

 

Source Code CSS

body {
 margin:10px auto;
 width:894px;
 height:auto;
}

header,nav,section,footer {
 display:block;
 border:0px solid black;
 background-color:#CCCCCC;
}
 a{
 cursor:pointer;
 text-decoration:none;
 }
 a:hover{
 text-decoration:underline;
 }   

header {
 height:90px;
 margin-top:-10px;
 border:1px solid gray;
}
 .box-header {
 margin-top:10px;
 margin-bottom:10px;
 background-color:#666666;
 height:70px;
 }
 .logo-pic {
 margin-top:10px;
 margin-left:5px;
 }
 .logo-title {
 position: relative;
 left:70px;
 top: -55px;
 font-family: Arial;
 font-size:20px;
 font-weight:bolder;
 color:white;
 height: auto;
 width: 200px;
 }
 .header-rtext,.box-header a {
 color:yellow;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 }
 .header-link {
 margin-right:5px;
 font-family: Arial, Helvetica, sans-serif;
 font-size:10px;
 }
 .header-search {
 margin-top:30px;
 padding-left:45px;
 font-family:"Trebuchet MS";
 font-size:12px;
 }
 .input-search {
 border:1px solid #00FF00;
 background-color:#CCCCCC;
 width:130px;
 }

nav {
 float:left;
 width:150px;
 height:400px;
 background-color:#0099FF;
}
 .box-nav {
 margin-left:3px;
 background-color:#6600FF;
 height:inherit;
 border:1px solid #CCCCCC;
 }
 .menu-nav {
 margin-left:-3px;
 background-color: #CCCCCC;
 height:30px;
 border-width:1px;
 border-style:solid;
 border-color:#0033CC #000099 #000099 #0033CC;
 font-weight:lighter;
 padding-top:4px;
 }
 .menu-text {
 font-family:"Verdana";
 font-size:12px;
 color:#663399;
 margin-top:5px;
 margin-left:10px;
 }
 .menu-nav:hover {
 cursor:pointer;
 margin-left:0px;
 background-color: #66CCFF;
 height:30px;
 border-width:1px;
 border-style:solid;
 border-color:#0033CC #000099 #000099 #0033CC;
 font-weight:bold;
 }

section {
 margin-left:150px;
 width:auto;
 height:400px;
}
 .box-sect {
 background-color:#003399;
 height:inherit;
 margin-right:3px;
 }
 .subtitle {
 margin-top:5px;
 margin-left:10px;
 font-family:"Verdana";
 font-size:16px;
 font-weight:bolder;
 color:#FFFFFF;
 height: auto;
 width: 200px;
 }
 .datepost {
 padding-left:10px;
 color:#CCCCCC;
 font-family:"Tahoma";
 font-size:12px;
 font-style:italic;
 }
 .content {       
 margin-top:5px;
 margin-left:15px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#CCFFCC;
 width:65%;
 }
 .more {
 position:fixed;
 padding-left:16px;
 color:#FFFF00;
 font-family:"Trebuchet MS";
 font-size:10px;
 }
 .more:hover {
 font-weight:bold;
 text-decoration:none;
 }
 .box-rsect {
 width:200px;
 height:auto;
 margin-top:5px;
 margin-right:10px;
 padding-bottom:5px;
 background-color:#003399;
 border-width:1px;
 border-style:solid;
 border-color:#00CCFF;
 }
 .rsect-list ul, .rsect-list a{
 list-style-type:square;
 color:#FFFF99;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 font-weight:inherit;
 }

footer {
 clear:both;
 height:65px;
 border:1px solid blue;
}
 .box-footer {
 margin-top:5px;
 margin-bottom:10px;
 background-color:gray;
 height:50px;
 }
 .footer-text {
 padding-top:20px;
 padding-left:200px;
 }
 .footer-text,.box-footer  a {
 color:gray;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#FFCC33;
 }

.rightfloat {
 float:right;
}

About bagusware

Aku adalah aku, dan kamu adalah kamu... Aku dan kamu pasti bisa...

Posted on 2 Maret 2011, in PTI478. Bookmark the permalink. 2 Komentar.

  1. ahmad budianto

    help me…(urgent)
    saya da kasus soal pembuatan java dengan menggunakan software netbeans/BlueJ..dan blm bisa trepecahkan, karena menggunakan superclass. tlong pencerahannya bagaimana pembuatannya. contoh kasusnya:
    *Penjualan barang pada kasus waralaba Indomaret (Menggunakan fasilitas input, Minimal data yang diinput 3 record, Untuk tampilan, ada proses Input dan Output
    Terima kasih

    • waduh gan ini Expert banged nih…
      hehe…. tapi maaf nih sebelumnya aq lom pernah coba pemrograman java… soalnya dulu sempat kul tapi cuma dapat pemrograman pascal ama Delphi aja nih gan….
      program ini kalau di buat dengan Delphi sih kmungkinan aq bisa tetapi tidak pake class… pemrograman Delphi itu pun udah skitar 3 tahun yang lalu gan jadi skrang udah lupa-lupa ingat…

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: