Gambar. Desain Halaman Web Interaktif
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:
Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Berikut source code HTML-nya: (halamanWebCommunity.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layoutCommunity.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Forum | Blogs | What's New? | Log In
</div>
<div id="logo">
<img src="logo_um.png" width="60"/>
</div>
<div id="site-title">
<h2>UM COMMUNITY</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="#">Sekitar Forum</a></li>
<li><a href="#">Kesehatan dan Tips</a></li>
<li><a href="#">Teknologi Informasi dan Komunikasi</a></li>
<li><a href="#">Mahasiswa dan Alumni</a></li>
<li><a href="#">Bisnis</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Minggu, 1 Maret 2010
<p>
UM selenggarakan lomba desain Brand Name Logo, hadiah total 50 juta.
Universitas Negeri Malang (UM) menyelenggarakan Lomba Perancangan Brand Name Logo dan Desain Sticker �UM: The Learning University�. Kegiatan yang sasaran utama audiens ialah komunitas bisnis, masyarakat umum peminat pendidikan, para pelajar SMA, dan civitas akademika UM ini berhadiah total 50 juta. Karya yang dilombakan terdiri atas 2 kategori yaitu (a) lomba brand name logo dan (b) lomba desain sticker. Jenis lomba yang diadakan ini antara lain, Perancangan brand name logo Universitas Negeri Malang (UM),
Read more...
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Kepala Pusat TIK UM, Dr. Muladi, ST, MT: Peningkatan Peringkat Web UM Menjadi Motivasi Kedepan</a></li>
<li><a href="#">Pembelajaran Pengelolaan Arsip di Unit Arsip UM</a></li>
<li><a href="#">2010 UM Terima Dana BLOC GRANT 7 Milyar Lebih</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>Copyright @ 2010 Universitas Negeri Malang.</b></p>
</div>
</div>
</body>
Berikut ini code CSS-nya: (layoutCommunity.css)
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.72em/150% verdana; }
#wrapper { margin:auto; width:980px;}
#header { height:80px; margin:0px auto;background:#000;}
#header-content{height:70px; margin:auto; background:#fff url(bg_top.gif);}
#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% 'Verdana'; 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:#FF0000;}
#footer p { text-align:center;}
#sidebar { float:left; width:200px; height:400px; background-color:#FFFFCC}
#content { float:right; width:780px; height:400px; background:#FFF}
#content-top { clear:both; margin:auto; width:600px; height:99px; border: 2spx solid black; background-image:url(banner.png)}
#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: 3px solid black; background:#FF0000}
#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:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 }
#leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}
SELAMAT MENCOBA KAWAND
CSS : Halaman Web Interaktif
Subscribe to:
Post Comments (Atom)
0 komentar:
Post a Comment