<html>Kemudian buat sebuah file CSS dengan nama style.css, kemudian lampirkan file tersebutpada file coba.html cara melampirkan bisa anda lihat di Penempatan Kode CSS pada Web Kita dan anda pastekan kode berikut ini, lalu anda amati hasilnya dengan cara klik dobel pada file coba.html yang anda buat tadi.
<head><title>Percobaan Praktikum Pertama</title></head>
<body>
<table width=”800″ border=”1″>
<tr><td colspan=”2″> Header </td></tr>
<tr><td colspan=”2″>Menu</td></tr>
<tr><td width=”488″> Content</td><td width=”300″> Sidebar</td> </tr>
<tr><td colspan=”2″> Footer</td> </tr>
</table>
</body>
</html>
.badan_tabel {untuk menambahkan properti pada tabel dan kolom yang dibuat, silahkan anda lihat di Membahas Clas Selector dan ID.
margin: auto;
border: 1px solid #999999;
}
.tabel_form {
margin: auto;
}
.header{
background-color: #6699FF;
padding: 5px;
height: 100px;
}
.menu{
height: 40px;
background-color: #FFCC99;
padding: 0px;
}
.content{
}
.sidebar{
background-color: #66CCFF;
background-position: top;
vertical-align: top;
}
.footer{
font-size: 12px;
background-color: #CCCCCC;
height: 20px;
}
Kemudian kita tambahkan list menu pada kolom menu yang sudah kita persiapkan tadi, untuk mempersingkat anda pastekan kode berikut ini:
<ul><li>Home</li>li>Profil</li><li>Hubungi Kami</li></ul>dan anda tambahkan kode pada file css tadi dengan kode berikut ini :
.list_menu{Setelah selesai anda buka lagi file coba.html, akan muncul desain layout tampilan sederhana dengan menggunakan tabel dan CSS.
background-color: #FFCC99;
margin: 0px;
width: auto;
padding: 0px;
}
.list_menu li{
float: right;
display: block;
list-style-type: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
padding: 10px;
}
.list_menu li:hover{
background-color: #FFFFFF;
}
.list_menu li a{
text-decoration: none;
}
.list_menu li a:hover{
font-weight: bold;
color: red;
}
SOCIALIZE IT →