Belajar CSS
Sabtu,30 Oleh : Unknown
sintak dibawah ini merupakan contoh penggunaan inline dan embeded css
bentuk laporannya dan penjelasan disini
perubahan
1. teks dalam list yang awal ukuran normal dirubah kedalam ukuran sama dengan paragraf sebelumnya dengan menambah fungsi
#isi ul{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
2. memberi link pada menu dengan menambah tag <a href=""> menu </a> dengan a dipanggil dari #menu a
<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>
3. Menambah konten yang beri link dan untuk style memanggil dati #konten p
<td width="30%" class="table-menu">
<div id="konten">
<p style="font-weight:bold; text-decoration:underline;">Daftar Konten</p>
<p><a href="">Belajar html</a></p>
<p><a href="">Belajar php</a></p>
<p><a href="">Belajar css</a></p>
</div>
</td>
4. bagian tulisan header ditambah pada bagian sebelum image ( gambar ) dan dibeli css secara inline.
<tr>
<td colspan=2 style="text-align:center; font-style:oblique; font-weight:bold; font-size:25px; color:Blue; background-color:green;">Belajar CSS
<p><img src="header.jpg"></p>
</td>
</tr>
Sintak
<!DOCTYPE html>
<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:yellow;
color:Red;
}
#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 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;
}
#isi ul{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#konten{
padding: 10 10 10 10;
}
#konten p{
color:white;
font: 14px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#konten a{
color:white;
text-decoration:blink;
font-style:oblique;
}
#konten a:hover{
background-color:white;
color:Red;
}
</style>
</head>
<body>
<table width="70%" align="center">
<tr>
<td colspan=2 style="text-align:center; font-style:oblique; font-weight:bold; font-size:25px; color:Blue; background-color:green;">
Belajar CSS
<p><img src="header.jpg"></p>
</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:</p>
<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>
</div>
</td>
<td width="30%" class="table-menu">
<div id="konten">
<p style="font-weight:bold; text-decoration:underline;">Daftar Konten</p>
<p><a href="">Belajar html</a></p>
<p><a href="">Belajar php</a></p>
<p><a href="">Belajar css</a></p>
</div>
</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>
Langganan:
Posting Komentar (Atom)
bayu breeze. Diberdayakan oleh Blogger.
Tidak ada komentar
Posting Komentar