Pertama kita membuat file Index dan menyimpannya dengan format seperti ini Index.htm, script'a seperti ini:
Ini adalah file Index.htm
<html>
<head>
<title>Belajar Themes</title>
<link rel="stylesheet" href="themes060/main.css" type="text/css"/>
</head>
<body>
<div id="countainer">
<div id="header">
<h2><font style="color: white"><h2></font>
</div>
<div id="body">
<div id="kiri">
<h2>Ini Menu</h2>
<a href="kanan.htm" target="isi">Menu Pertama</a><br/>
<a href="kanan1.htm" target="isi">Menu Kedua</a><br/>
</div>
<div id="kanan">
<h2>Ini Contoh Judul</h2>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab.</p>
</div>
</div>
</div>
</body>
</html>
Setelah kita memebuat file index'a kemudian kita memebuat sebuah folder yang bernama themes060 untuk mengisi gambar dah file CSS'a didalam folder tersebut.
Cara menyimpan'a main.css
#countainer {
width:900px;
margin: 0 auto;
}
#header {
Height:250px;
background-color: green;
background-image:url('dc.gif');
}
#body {
margin-top:0px;
height:100%;
width:100%;
background-color:blue;
background-image:url('iseng.jpg');
}
#kiri {
width:200px;
height:96%;
float:right;
border: solid;
padding:10px;
border-radius: 15px;
}
#kanan {
margin-left:200px;
height:100%
}
p {
font-family: vernada, tahoma;
font-size: 14px;
color: yellow;
}
Setelah kalian menyimpan file main dan index'a maka kita bisa melihat hasil yg telah kita buat, dan seperti inilah hasilnya.
Hari ini hanya sekian dari saya semoga dapat bermanfaat buat temen-temen semua...
Selamat mencoba sob (^_^)
