CSS (Cascade Style Sheet) digunakan para web desainer untuk mengatur style elemen yang ada dalam sebuah web, mulai dari membuat layout, mengatur warna, font, text, dan masih banyak lagi. Perkembangan CSS sendiri cukup cepat, diawali pada tahun 1996 CSS diluncurkan, kemudian ditahun 1998 diperkenalkan CSS2, selanjutnya ditahun 2000 sampai sekarang kita kenal dengan CSS3. Namun sangat disayangkan pada saat ini hanya CSS2 yang masih didukung oleh kebanyakan web browser sedang CSS3 hanya sebagian web browser yang mendukungnya.
Div merupakan singkatan dari Division yang berarti sebuah Tag HTML untuk membuat suatu seksi atau kelompok tertentu dengan tujuan mengelompokan sebuah file HTML menjadi beberapa bagian sesuai dengan tempatnya agar mempermudah dalam pememberian style pada setiap bagiannya. Contoh penulisannya <div>….</div>
Dalam membuat layout web/blog, hal yang sangat penting untuk diperhatikan adalah tema web/blog itu sendiri, sehingga kita bisa menyesuaikan tema dan tampilannya. Secara umum index sebuah web terdiri dari: wrapper (isi keseluruhan), header, menu, sidebar, content , dan footer. Berikut contoh layout sebuah web/blog.
Selanjutnya berikut script HTML dan CSS nya:
index.html
<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /><title>Layout WEB/BLOG</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--------------- #header --------------->
<div id="header">
<h1>Header</h1>
</div>
<!--------------- #menu --------------->
<div id="menu">
<ul>
<li><a href="index.php">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Galeri Foto</a></li>
</ul>
</div>
<!--------------- #sidebar --------------->
<div id="sidebar">
<div class="previous">Sidebar</div>
</div>
<!--------------- #content --------------->
<div id="content">
<img src="image/esdua.png" width="144" height="144" />
<br />Bagian ini silakan isi dengan posing anda. Web/blog yang
dinamis selalu menyisipkan kode PHP pada bagian ini, agar
data-data dapat dengan mudah untuk diubah dan diperbanyak.
</div>
<!--------------- #footer --------------->
<div id="footer">
Copyright © 2012 by: <a href="#">esdua.web.id</a></div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /><title>Layout WEB/BLOG</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<!--------------- #header --------------->
<div id="header">
<h1>Header</h1>
</div>
<!--------------- #menu --------------->
<div id="menu">
<ul>
<li><a href="index.php">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Galeri Foto</a></li>
</ul>
</div>
<!--------------- #sidebar --------------->
<div id="sidebar">
<div class="previous">Sidebar</div>
</div>
<!--------------- #content --------------->
<div id="content">
<img src="image/esdua.png" width="144" height="144" />
<br />Bagian ini silakan isi dengan posing anda. Web/blog yang
dinamis selalu menyisipkan kode PHP pada bagian ini, agar
data-data dapat dengan mudah untuk diubah dan diperbanyak.
</div>
<!--------------- #footer --------------->
<div id="footer">
Copyright © 2012 by: <a href="#">esdua.web.id</a></div>
</div>
</div>
</body>
</html>
style.css
/* INDEX:
1. WRAPPER
2. HEADER
3. MENU
4. SIDEBAR
5. CONTENT
6. FOOTER
*/
body {
background-color: #FFC;
font-family: "calibri"
}
/* 1. WRAPPER
---------------------------------- */
#wrapper {
width: 850px;
margin: 15px auto;
height: auto;
padding: 20px;
background-color: #FFF;
box-shadow: 0px 0px 20px #F60;
-moz-box-shadow:0px 0px 20px #F60;
-webkit-box-shadow: 0px 0px 20px #F60;
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
}
/* 2. HEADER
---------------------------------- */
#header {
width: 850px;
height: 70px;
border: 1px solid #CCC;
margin-bottom: 7px;
text-align: center;
}
/* 3. MENU
---------------------------------- */
#menu {
width: 850px;
height: 27px;
margin-bottom: 7px;
border: 1px solid #FFF;
background-color: #CCC;
font-size:17x;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu ul{
margin: 4px 4px 4px 7px;
padding: 0px;
list-style: none;
}
#menu li{
margin: 10px;
padding: 0px;
display: inline;
}
#menu a{
padding: 6px 6px 6px 6px;
text-decoration: none;
}
#menu a:hover{
padding: 5px 5px 2px 5px;
text-decoration: none;
color: #FFF;
background: #FF9000;
}
/* 4. SIDEBAR
---------------------------------- */
#sidebar {
float: right;
width: 300px;
height: 290px;
border: 1px solid #CCC;
margin-bottom: 7px;
text-align: center;
}
/* 5. CONTENT
---------------------------------- */
#content {
width: 538px;
height: 290px;
margin-bottom: 2px;
border: 1px solid #CCC;
margin-bottom: 7px;
}
#content img{
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
box-shadow: 0px 0px 10px #CCC;
-moz-box-shadow:0px 0px 10px #CCC;
-webkit-box-shadow: 0px 0px 10px #CCC;
padding: 2px; margin-right: 10px;
float:left;
}
/* 6. FOOTER
---------------------------------- */
#footer {
width: 850px;
height: 20px;
padding-top: 0px;
border: 1px solid #CCC;
text-align: center;
background-color: #CCC;
clear: both;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
1. WRAPPER
2. HEADER
3. MENU
4. SIDEBAR
5. CONTENT
6. FOOTER
*/
body {
background-color: #FFC;
font-family: "calibri"
}
/* 1. WRAPPER
---------------------------------- */
#wrapper {
width: 850px;
margin: 15px auto;
height: auto;
padding: 20px;
background-color: #FFF;
box-shadow: 0px 0px 20px #F60;
-moz-box-shadow:0px 0px 20px #F60;
-webkit-box-shadow: 0px 0px 20px #F60;
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
}
/* 2. HEADER
---------------------------------- */
#header {
width: 850px;
height: 70px;
border: 1px solid #CCC;
margin-bottom: 7px;
text-align: center;
}
/* 3. MENU
---------------------------------- */
#menu {
width: 850px;
height: 27px;
margin-bottom: 7px;
border: 1px solid #FFF;
background-color: #CCC;
font-size:17x;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu ul{
margin: 4px 4px 4px 7px;
padding: 0px;
list-style: none;
}
#menu li{
margin: 10px;
padding: 0px;
display: inline;
}
#menu a{
padding: 6px 6px 6px 6px;
text-decoration: none;
}
#menu a:hover{
padding: 5px 5px 2px 5px;
text-decoration: none;
color: #FFF;
background: #FF9000;
}
/* 4. SIDEBAR
---------------------------------- */
#sidebar {
float: right;
width: 300px;
height: 290px;
border: 1px solid #CCC;
margin-bottom: 7px;
text-align: center;
}
/* 5. CONTENT
---------------------------------- */
#content {
width: 538px;
height: 290px;
margin-bottom: 2px;
border: 1px solid #CCC;
margin-bottom: 7px;
}
#content img{
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
box-shadow: 0px 0px 10px #CCC;
-moz-box-shadow:0px 0px 10px #CCC;
-webkit-box-shadow: 0px 0px 10px #CCC;
padding: 2px; margin-right: 10px;
float:left;
}
/* 6. FOOTER
---------------------------------- */
#footer {
width: 850px;
height: 20px;
padding-top: 0px;
border: 1px solid #CCC;
text-align: center;
background-color: #CCC;
clear: both;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Berikut hasilnya:
...:::Selamat mencoba, semoga bermanfaat:::...
15 komentar:
Makasih gan atas infonya, saya lagi butuh css ini untuk di pakai membuat website di kantor. Saya tunggu artikel selanjutnya. Salam kenal
hatur nuhun sanget gan......
exist terus ...dan ilmunya terus mengalir...
bermanfaat bagi banyak orang khususnya generasi it...
kalau fungsi main-wrapper apa sob?
terimakasih atas infonya sob,
makasih gan infonya ..
izin nyimak ..
http://jakartacity.olx.co.id/karya-swasta-membuat-huruf-timbul-pelayanan-pbb-pbhtb-tangerang-selatan-iid-522249678
makasih tuk infonya. lagi belajar html
Gk work ini
Makasih kakak :D semoga ilmu kakak bermanfaat :D syntax divnya emang sederhana dan juga syntax cssnya, sugoy jadi pngen belajar div lebih jauh :D
kalo membuat linknya bagaimana mas????misal untuk profilnya
Terima kasih Pak, sangat bermanfaat informasinya.
numpang tanya kalau seumpama menggunakan strict kira-kira bisa tidak? trima kasih
Maaf maksudnya Scrip ya?
Kalau membuat linknya enaknya kita copikan semua scripnya pada dreamweaver atau edit web yg lain, nanti kita gunakan fasilitas link pada aplikasi dreamweavernya, terima kasih. semoga membantu.
Main wrapper itu ukuran seluruh web kita, kita bisa cocokkan dengan keinginan kita sendiri, atau kita sesuaikan dg pengguna notebook. atau lebar panjang website kita.
Post a Comment