membuat suatu halaman web klasik seperti digambar ini menggunakan CSS

Nah kali ini akan membuat suatu halaman web klasik seperti digambar ini menggunakan CSS
nah untuk membuat seperti halaman web sederhana dia tas mari kita buka notpat++ atau notpat
biasa asal jangan bukak power point loh ya hahahah ......!!!!!
di bawah ini adalah langkah demi langkah untuk mebuat tampilan web sederhana seperti digambar
tersebut...
selamat mencoba ...!!!!!!!!!!
<html>
<head>
<h1 style="color:blue; font-family:Arial; text-align:center; font-size:200%;"><marquee>
Mengenal Susu dan Manfaatnya </marquee></h1>
<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:blue;
color:black;

}

.table-menu a {
color:black;

}
.table-menu a:hover{
color:yellow;

}
#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, li{
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;
<!--ini untuk sebuah tabel menu disamping kanan yg telah kita buat
dengan background berwarna biru. Sedangkan isi dalam menu ini untuk text yang berwarna hitam.--
>
}

.footer{
background-color:yellow; 
}

</style>
</head>
<body>
<table width="70%" align="center">
<tr>
<td colspan=2><img src="header.jpg"></td>
</tr>
<tr>
<td colspan=2>
<div id="menu"> 
<table width="100%">
<tr>
<td align="center"><a
href="http://localhost/css/index2.php">Depan</a></td>
href="https://www.facebook.com/YudYAjacHRezpectoR">Profil</a></td>
href="">Produk</a></td>
href="">Kontak</a></td>

href="http://forum.susu.org/">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">
<div id="isi"> <>
<h1 style="color:red; font:bold 16px Candara, Arial,
Tahoma;"> Daftar Artikel Lainnya</h1>
<a
href="http://mazinubersahabat.blogspot.sg/2013/11/manfaat-minum-susu-untuk-
kesehatan.html">Manfaat Minum Susu dan Jenis-jenis Susu - Hay
sahabat mazinu? Kalian sudah tahu tentang susu
bukan? Susu merupakan rangkaian yang ke-5

dalam lagu yang kita sering nyanyikan saat masih TK
yaitu 4 sehat 5 sempurna, nahh yang ke lima itu adalah susu.</a>
</div>
<div id="isi">
<a href="http://www.untukku.com/artikel-
untukku/11-manfaat-susu-untukku.html">11 manfaat susu untukku, Setiap 100 gram susu
terkandung panas sebesar 70.5 kilokalori, protein
sebanyak 3.4 gram, lemak 3.7 gram, mengandung kalsium sebesar 125 miligram,
sementara prosentase penyerapan dalam tubuh
sebesar 98% – 100%</a>
</div>
<div id="isi">
<a
href="http://caramembuatsemua.blogspot.sg/2013/05/cara-membuat-yogurt-dari-susu-
kambing.html#">Cara Membuat Yogurt Dari Susu Kambing
0 0 NewYogurt atau susu fermentasi sering menjadi
minumanyang disukkai oleh anak-anak hingga orang dewasa sekalipun.Biasanya yogurt dibuat dari
susu sapi tapi
kali ini kita akan membuat yogurt dari susu kambing
tentunya anda dapat membuat yogurt dengan cara mudah dan bahan yang murah.
Bahan
1. 1 Liter susu kambing
2. 100gr guka pasir</a>

</td>

</div>
</tr>
<tr>

<td colspan=2 height=50 class="footer">
<p style="color:blue; font:bold 12px candara, arial, tahoma;
text-align:center;">Hidup akan lebih terasa, apabila kita sehat,
Hidup Sehat Dimanapun Kapanpun</p>
</td>
</tr>
</table>
</body>
</html>

membuat suatu halaman web klasik seperti digambar ini menggunakan CSS

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to membuat suatu halaman web klasik seperti digambar ini menggunakan CSS

Similar to membuat suatu halaman web klasik seperti digambar ini menggunakan CSS (19)

membuat suatu halaman web klasik seperti digambar ini menggunakan CSS