Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel websiteku</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="halaman"><!-- div id halaman dimulai -->
<div id="judul"><!-- div id judul dimulai -->
<h1 class="judul">Disini judul websiteku</h1>
<h2 class="sub-judul">Disini sub-judul websiteku</h2> </div><!-- div id judul berakhir -->
<div id="konten"><!-- div id konten dimulai -->
<div class="kiri"><!-- div class kiri dimulai -->
<p>Disini navigasi bagian kiri</p> </div><!-- div class kiri berakhir -->
<div class="tengah"><!-- div class tengah dimulai -->
<p>Disini konten websiteku</p> </div><!-- div class tengah berakhir -->
<div class="kanan"><!-- div class kanan dimulai -->
<p>Disini navigasi bagian kanan</p> </div><!-- div class kanan berakhir --> </div><!-- div id konten berakhir -->
<div class="footer"><!-- div class footer dimulai -->
<p>Disini Footer websiteku</p> </div><!-- div class footer berakhir --> </div><!-- div id halaman berakhir -->
</body>
</html>
Yang berada diantara <–– dan ––> hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya.
Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”
#halaman
{/* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul
{ width: 100%; height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten
{ width: 100%; margin: 0; padding: 0; }
.kiri {/* "class" dilambangkan dengan "." */ width: 25%; height: 300px; float: left; background: #ADD8E6; }
.tengah{ width: 50%; height: 300px; float: left; background: #FDF5E6; }
.kanan{ width: 25%; height: 300px; float: right; background: #ADD8E6; }
.footer{ height: 40px; background: #8FBC8F; clear: both; }
.judul { color: Red; padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */ }
.sub-judul { color: #ff0; padding: 0 10px 10px; }
p { padding-left: 10px;/* penulisan untuk satu sisi saja */ }
Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.
Sekarang buka file “csstest.html” dengan browser anda.
Itulah kira-kira secara dasar cara kerja dari CSS untuk mengontrol halaman website.
Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite. Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan refresh browser untuk melihat hasilnya.
0 Komentar