RSS

Membuat tampilan web (Front) sederhana

04 Mar

Setelah membuat header dan kerangka, coba aplikasikan membuat tampilan web sederhana seperti gambar di bawah ini:

Pastnya, dilakukan dengan css code. Untuk hal ini, css code-nya seperti ini

* { margin: 0; }

body { margin:5px auto; padding:0; font:0.72em/150% Arial; }

#wrapper { margin:auto; width:980px;}

#header { height:80px; margin:0px auto;background:#000;}

#header-content{height:70px; margin:auto; background:blue;}

#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% ‘Arial’; 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:#3052F2;}

#footer p { text-align:center;}

#sidebar { float:left; width:200px; height:400px; background-color:#8FB6F2}

#content { float:right; width:780px; height:400px; background:#FFF}

#content-top { clear:both; margin:auto; width:780px; height:140px;}

#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 dotted blue; background:#8FB6F2}

#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:#B3CDF2 no-repeat left center; margin: 0px 0px 1px; color: white }

#leftmenu a:hover { background:#3052F2 no-repeat left center; color:#black}
Sedangakn untuk Kode HTML-nya:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”en” xml:lang=”en”>

<head>

<title>Task 2</title>

<link type=”text/css” rel=”stylesheet” href=”css3.css” />

</head>

<body>

<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=”UMLogo.jpg” width=”60″/>

</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=”#”>Profil</a></li>

<li><a href=”#”>Blog Dosen</a></li>

<li><a href=”#”>Blog Mahasiswa</a></li>

<li><a href=”#”>Info</a></li>

</ul>

</div>

</div>

<div id=”content”>

<div id=”content-top”>

</div>

<div id=”content-main”>

<h3>Tim Robot mendapat dukungan spiritual dari PR</h3>

<hr />

<p>

Selasa, 1 Maret 2010

<p>

Hari senin, Tim Robot mendapatkan kunjungan mengejutkan dari Pembantu Rektor 3.
Kunjungan ini merupakan kunjungan pertama selama pengerjaan robot mulai dari tahap pembuatan proposal hingga pengiriman video.
Di sisa waktu, H-5 untuk tahap pengiriman Video, tentunya merupakan ajang memacu adrenalin mengingat membuat robot adalah hal yang
tidak bisa jadi hanya dalam semalam (seperti di dongeng). Di sini Pembantu REktor Bidang kemahasiswaan, Bapak Kadim Masjkur sangat
memberi support agar tim robot kebanggaan semua tetap ikut berlaga dalam Seleksi KRI/KRCI 2010Regional 3 yang diadakan di UMM Malang.
Tentu harapan tinggi menyertai Tim…..
<p>[Read More]

</div>

<div id=”content-right”>

<h3>Events</h3>

<ul>

<li><a href=”#”>Lomba Perakitan Komputer</a></li>

<li><a href=”#”>Lomba Rubics</a></li>

<li><a href=”#”>Pelatihan Web</a></li>

<li><a href=”#”>Pelatihan Edit Video</a></li>

</ul>

</div>

</div>

</div>

<div id=”footer”>

<br />

<p><b>© 2010. Teknik Elektro UM. Malang.</b></p>

</div>

</div>

</body>

Advertisements
 
Leave a comment

Posted by on March 4, 2010 in PTI478

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
The Way I Am

Live everyday as if it was your last

Some Good Eats

Eat and don't worry about it

Anggriani

Bacalah! Tulislah !

Padepokan Budi Rahardjo

belajar untuk menjadi manusia ...

Catatanku

Ini adalah album yang berisi catatan yang saya tulis dalam perjalanan waktu hidup. Catatan yang terinspirasi dari apa yang saya lihat, saya baca, saya dengar, dan saya rasakan.

Catatan Bang Akrie

Simplicity.Humble.Joyfull

%d bloggers like this: