<html>
<head>
<style type="text/css">
table{
border-colapse:colapse;
border:1px solid black;
}
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
}
#menu table{
border:none;
}
#menu a{
color:white;
text-decoration:none;
}
#menu a:hover{
background-color:white;
color:black;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi ul{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi img{
boder: 1px solid black;
width: 80px;
height: 100px;
}
.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #0066cc;
}
.footer{
background-color:yellow;
}
.head{
background-color:magenta;
}
</style>
</head>
<body>
<table width="70%" align="center">
<tr>
<td colspan=2 class="head">
<center>
<h1 style="align:Center; color:white; font:34px Cooper Black">
Artikel Kita
</h1>
</center>
<img src="header.jpg">
</td>
</tr>
<tr>
<td colspan=2>
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="">Depan</a></td>
<td align="center"><a href="">Profil</a></td>
<td align="center"><a href="">Produk</a></td>
<td align="center"><a href="">Kontak</a></td>
<td align="center"><a href="">Forum</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="isi">
<h1 style="color:blue; font:bold 16px Candara, Arial, Tahoma;"> Ayo Minum Susu</h1>
<img src="susu.jpg"/>
<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina.
Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat.
Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.
Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>
<p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh.
Dalam segelas susu terdapat antara lain:
<ul>
<li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
<li>Zat besi, mempertahankan kulit tetap bersinar.</li>
<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak cepat.</li>
<li>Seng, menyembuhkan luka dengan cepat.</li>
<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
</ul>
</p>
</div>
</td>
<td width="30%" class="table-menu">
<h2 align="center">Tahukah Kamu..</h1>
<h3 align="center">Kenapa Susu itu berwarna putih?</h3>
<center>Itu karena kandungan kolostrum dan kalsium, juga ada kandungan kaliumnya</center>
<h3 align="center">lalu Kenapa rasa susu itu manis</h3>
<center>Nggak selalu manis, sebetulnya rasa susu itu hambar, namun sesampainya di tempat pengolahan
akan di campuri pemanis, ada yang pemanis buatan dan ada yang menggunakan pemanis alami<center>
</td>
</tr>
<tr>
<td colspan=2 height=50 class="footer">
<p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"></p>
</td>
</tr>
</table>
</body>
</html>
nah pada bingungkan maksud dari coding tersebut... gini nih, gw jelasin dulu ya...
trus pada code berikut tempat untuk menata baris Menu...
Lalu pada bagian # menu tabel berfungsi menghilangkan garis pada tabel tang kita buat sebelumnya.
kemudian pada #menu a untuk membagi bagian bagina yang kita butuhkan (untuk membagi bagian bagian pada menu).
Kemudian #menu a:hover merupakan bagian dimana ketika kita arahkan kursor ke menu, nantinya warna background akan berubah menjadi putih dan tulisannya menjadi hitam.
Nah pada bagian #menu td ini dimana nantinya tulisan dan letaknya diatus sejara proporsional.
Lalu code berikut...
Lalu #isi p merupakan bagian untuk mengatur paragraf pada artikel di dalam bagian #isi tadi, pengaturannya ditempatkan seperti ini agar nantinya tinggal memanggilnya kembali.
pada bagian #isi ul memberikan fungsi yang sebetulnya sama dengan sebelumnya.
Dan pada #isi img memberikan gambar default berbentuk persegi dengan frame warna hitam pekat (solid black) dengan ketebalan 1px, panjang 100px dan lebar 80px. Namun ini hanya sebagai frame default dan bisa digantikan dengan gambar lain.
Nah kemudian kita akan membahas akhir dari css-nya sebelum masuk ke coding HTML-nya... ini kode terakhir untuk css-nya...
Pada bagian .footer memberikan bagian tersendiri untuk bawah dari tampilan artikel, pada screen shoot tadi memang tidak tertampilkan.
Kemudian .head fungsinya sama seperti footer, cuman masalah posisi saja, dan sebetulnya fungsi .footer dipakai menjadi head cuman masalah warnanya aja...
Nah kayak gitu code CSS-nya... cukup susah kan... tapi sering sering belajar aja biar terbiasa...
Tidak ada komentar:
Posting Komentar