Home
Kali ini saya akan mengulas mengenain tampilan profile penyimpanan foto,
langsung saja pada pokok berita nya ya.. maklum udh ngantuk -_-“.
Pertama buat code html nya di folder baru,
Contoh code html nya :
<!DOCTYPE HTML>
<html>
<head>
<title>Galeri Foto</title>
<link type="text/css" rel="stylesheet" href="picture.css">
</head>
<body>
<table id="tablemenu">
<tr><td colspan="3" align="center"><h3 >MULTIMDIA MOMENT </h3></td></tr>
<tr>
<td align="center" >
<a href="#" target="_blank">
<img src="images/8.jpg" alt="menu CAPTURE" width="190" >
</a>
<h5>CAPTURE 1</h5>
</td>
<td align="center">
<a href="" target="_blank">
<img src="images/d.jpg" alt="menu CAPTURE" width="190" >
</a>
<h5>CAPTURE 2</h5>
</td>
<td align="center">
<a href="" target="_blank">
<img src="images/o.jpg" alt="menu CAPTURE" width="190" >
</a>
<h5>CAPTURE 3</h5>
</td>
</tr><tr>
<td align="center">
<a href="" target="_blank">
<img src="images/s.jpg" alt="menu CAPTURE" width="190" >
</a>
<h5>CAPTURE 4</h5>
</td>
<td align="center"><a href="" target="_blank">
<img src="images/q.jpg" alt="menu CAPTURE" width="190" >
</a>
<h5>CAPTURE 5</h5>
</td>
<td align="center">
<a href="" target="_blank">
<img src="images/12.jpg" alt="menu CAPTURE" width="190" >
</a>
<h5>CAPTURE 6</h5>
</td>
</tr>
</table>
</body>
</html>
Lalu buat kode css nya,
Berikut contoh kode css nya:
#tablemenu {
background-color:#ffffff;
border:#c1c8ec 2px solid;
padding:5px;
-moz-border-radius:5px;
border-radius: 10px;
}
#tablemenu td {
border:#ffffff 1px solid;
padding:5px;
}
#tablemenu td:hover {
border:#c1c8ec 1px solid;
-moz-border-radius:5px;
background-color:#9DACBF;
color:gray;
border-radius: 7px;
}
#tablemenu img {
border:#ffffff 5px solid;
-moz-border-radius:5px;
background-color:#ffffff;
}
#tablemenu h5 {
margin:0px;
color:gray;
}
#tablemenu h3 {
margin:0px;
color:#000000;
-moz-border-radius:5px;
background-color:#dce2fb;
border-radius: 10px;
padding:5px;
}
Hasilnya seperti berikut :
Demikian tutor dari saya, thanks bagi agan” yang sudah menyimak~
#salamperubahan :)
