BELAJAR MEMBUAT WEBSITE MENGGUNAKAN CSS.[bagian II]
January 25, 2008penjelasan:
header_banner_left dan header_banner_right, merupakan perintah untuk membuat kolom header. Tetapi disini kita memisahkannya,ada yang kanan dan ada header sebelah kiri.fungsinya yaitu. Agar gambar yag nantinya yang kita masukkan ataupun kita selipkan dapat diatur atau dikelompokkan.
.cleardiv {
clear: both !important;
height: 10px !important;
}
penjelasan:
cleardiv,berfungsi untuk membersihkan div-div yang telah dibuat. Agar nantinya, apabila kita membuat fungsi div selanjutnya tidak saling menumpuk.
.menu_title
{
background-image: url(image/obj_ba_01.gif);
width: 175px;
height: 25px;
color: #208FFF;
border: medium;
font-weight: bold;
font-style:italic;
font-size: 18px;
float: left;
}
penjelasan:
menu_title, hanya berfungsi sebagai background. terserah anda mau memakainya atau tidak.
#div_kiri
{
float: left;
width: 624px;
height: auto !important;
padding-left: 5px;
padding-right: 5px;
margin: auto;
}
#div_kiri_kiri{
float: left;
width: 195px;
height: 350px !important;
background-color: #FFFFFF;
margin-left: 1px;
border-color:#CCCCCC;
border-style:solid;
}
penjelasan:
div_kiri dan div_kiri_kiri, berfungsi untuk membuat sebuah kolom yang nantinya terbentuk dalam 3[tiga] bagian.tapi sekali lagi terserah anda ingin memasangnya atau tidak.
.clear_all
{
clear: both !important;
}
penjelasan:
clear_all,fungsi samanya sama dgn cleardiv yakni membersihkan div-div yang telah dibuat. Agar nantinya, apabila kita membuat fungsi div selanjutnya tidak saling menumpuk.
#category
{
width: 195px;
height: 22px;
display: block;
background-image: url(image/obj_ba_02.gif);
margin: auto;
font-weight: bold;
color: #6699FF;
}
#category_a
{
width: 594px;
height: 22px;
background: url(image/bg_05.gif) repeat-x;
padding-left: 10px;
padding-right: 2px;
padding-top: 3px;
font-weight: bold;
font-size: 13px;
color: #6699ff;
float: center;
border: #CCCCCC 1px solid;
}
penjelasan:
category dan category_a,dari namanya kita sudah bisa tebak fungsinya. Yakni untuk membuat sebuah category atau kelompok. Artinya kita akan mengelompokkan sebuah pokok bahasan atau suatu topik.
#judul
{
background-image: url(image/bg_03.gif);
font-size: 12px;
padding: 15px 2px 5px 15px;
width: 490px;
color: #000000;
margin: auto !important;
height: auto !important;
}
penjelasan:
judul,berfungsi sebagai tag yang menampung isi dari artikel yang nantinya kita buat.
#next_link
{
font-size: 12px;
color: #0000FF;
margin: auto;
padding-left: 3px;
padding-right: 3px;
height: auto !important;
}
penjelasan:
next_link,berfungsi untuk memasangkan link pada sebuah tulisan yang menurut anda kepanjangan dan anda ingin singkat.
.footer
{
background-image: url(image/bg_02.gif);
width: 624px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #663333;
}
penjelasan:
footer, dari namanya kita tidak canggung lagi yakni sebagai catatan kaki yang biasa dan paling banyak digunakan dikalangan webmaster. Sekaligus penutup dari css yang kita buat.
Setelah CSS selasai kita buat maka kita akan membuat halaman index.html nya.
Contoh index.html nya:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="common02.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Anak Makassar</title>
</head>
<body>
<div id="layout">
<div id="snipet"></div>
<div id="broadcumb">
<div id="menu_horizontal">
</div>
</div>
<div class="cleardiv"></div>
<div id="header_banner_left"></div>
<div id="header_banner_right"></div>
<div class="cleardiv"></div>
<div id="kolom">
<div id="div_kiri">
<div id="div_kiri_kiri">
</div>
</div>
<div id="div_kiri">
<div id="div_kiri_kiri">
</div>
</div>
<div id="div_kiri">
<div id="div_kiri_kiri">
</div>
</div>
</div>
<div class="cleardiv"></div>
<div id="coloum">
<div id="category_a"></div>
<div id="coloum_a">
<div id="judul">
</div>
</div>
</div>
<div class="cleardiv"></div>
<div class="footer"></div>
</div>
</body>
</html>
Gbr03.tampilan index.html.
Keterangan dari gambar:
-
tampilan snipet.
-
Tampilan broadcumb.
-
Tampilan header banner left.
-
Tampilan header banner right.
-
Tampilan dari div_kiri dan div_kiri_kiri.
-
Tampilan category.
-
Tampilan dari colom dan coloum_a.
-
Tampilan dari judul.
-
Tampilan dari footer.
Barangkali sampai sini aja.artikelnya semoga bermanfaat dah….yang jelas…CSS itu ternyata enak dan menarik dipelajari….
- tak lupa saya ucapkan buat tutor aku yang setia mendampingi dikala aku membutuhkan.
- Tak lupa juga terima kasih buat teman-teman kantor yang selalu mendampingi aku sy mendapatkan kesulitan.
Comments »
The URI to TrackBack this entry is: http://blognaachmad.blogsome.com/2008/01/25/belajar-membuat-website-menggunakan-cssbagian-ii/trackback/
No comments yet.
RSS feed for comments on this post.
Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
•
