Membuat Layout dengan CSS (Sample 1)
Pada bagian ini, Anda akan dipandu bagaimana membuat layout desain halaman web
dengan memanfaatkan CSS. Dengan CSS, Anda tidak membutuhkan tabel dalam menata
layoutnya. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan
juga lebih meminimalisasi jumlah byte file. Apabila Anda menggunakan tabel untuk
mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran
byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama.
Untuk membuat layout dengan CSS hal terpenting yang harus dilakukan adalah membagi
elemen halaman ke dalam division-division tertentu.
Berikut ini adalah code halaman web yang belum dilayout tampilannya.
<html>
<head>
<title>Dasar-dasar layout</title>
</head>
<body>
<div id="header">
<h1>welcome to my site</h1>
</div>
<div id="navigasi">
<h3>Menu Navigasi</h3>
<ul>
<li><a href="link1.htm">Link 1</a></li>
<li><a href="link2.htm">Link 2</a></li>
<li><a href="link3.htm">Link 3</a></li>
<li><a href="link4.htm">Link 4</a></li>
<li><a href="link5.htm">Link 5</a></li>
<li><a href="link6.htm">Link 6</a></li>
</ul>
</div>
<div id="isi">
<img src="sunset.jpg" />
<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.
Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.
Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.
Ini adalah bagian isi. Ini adalah bagian isi.
</p>
<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.
Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.
Membuat Layout dengan CSS (Sample 1)
Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah
bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.
Ini adalah bagian isi. Ini adalah bagian isi.
</p>
</div>
<div id="footer">
<p>Copyright © 2007 by rosihanari</p>
</div>
</body>
</html>
Pada contoh ini, kita akan membuat layout sbb:
Perhatikan desain di atas, terdapat 4 bagian sel yang akan kita buat. Sebaiknya untuk
nama id pada masing-masing division diberi nama sesuai desain supaya mudah dipahami.
Untuk yang pertama, kita akan membuat sel untuk bagian header. Berikut ini style untuk
bagian header yang saya buat.
#header {
padding:10px; /* jarak teks dari tepi kotak */
border:1px solid #000000; /* membuat garis tepi 1 pixel */
background-color:#CCCCCC; /* membuat warna latar */
}
Properti padding menyatakan jarak antara tepi sel dengan elemen yang ada di dalamnya.
Berikut contoh style lain dengan padding nya 40 pixel dan juga tipe garis bordernya
putus-putus (dashed).
#header {
padding:40px;
border:3px dashed #000000; /* garis tepi putus-putus */
background-color:#CCCCCC;
}
Kita kembalikan ke style yang header awal saja ya, karena contoh di atas hanya untuk
menjelaskan penggunaan padding dan dashed. Style header yang kita gunakan adalah
#header {
padding:10px;
border:1px solid #000000;
background-color:#CCCCCC;
}
Sedangkan style untuk footernya dapat ditulis sebagai berikut:
#footer {
padding:10px;
border:1px solid #000000;
background-color:#CCCCCC;
}
Selanjutnya kita buat style untuk bagian isi.
#isi {
padding:10px;
border:1px solid #000;
}
0 comments:
Post a Comment