Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri.
Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar.
Anda juga bias menyebutnya sebagai template dari documents HTML yang menggunakanya.
Anda juga bisa membuat efek-efek sepesial di web anda dengan
menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk
Berikut ini merupakan langkah awal desain web yaitu desain lay outnya
untuk kode diatas adalah sebagai berikut
untuk kode diatas adalah sebagai berikut
<head≶
<style≶
#wrapper {
margin: auto;
width: 900px;
padding:5px 2px 5px 2px;
border: 1px solid red;
}
#header {
height: 100px;
margin-bottom:5px;
border: 1px solid red;
}
#inner {
margin: auto;
border: 1px solid red;
}
#sidebar {
float: left;
width: 200px;
height: 350px;
border: 1px solid red;
}
#content {
float: right;
width: 690px;
height: 350px;
border: 1px solid red;
}
#contentgambar {
height: 100px;
border: 1px solid red;
}
#tekskanan{
float: left;
width: 400px;
height:230px;
border: 1px solid red;
}
#tekskiri {
float: right;
width: 235px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid red;
}
</style≶
</head≶
<head≶
<title≶GO GREEN!!!</title≶
</head≶
<body≶
<div id="wrapper"≶
<div id="header"≶
Header
</div≶
<div id="inner"≶
<div id="sidebar"≶
Sidebar
</div≶
<div id="content"≶
<div id="contentgambar"≶
gambar
</div≶
<div id="tekskanan"≶
Content
</div≶
<div id="tekskiri"≶
Right
</div≶
</div≶
</div≶
<div id="footer"≶
Footer
</div≶
</div≶
</body≶
</html≶
Berikut ini contoh lay out desain web
Kode lay out di atas adalah sebagai berikut :
<head>
<style>
#wrapper {
margin: auto;
width: 900px;
padding:5px 2px 5px 2px;
border: 1px solid green;
background-color: #C5ECCB;
}
#header {
height: 100px;
margin-bottom:5px;
}
#inner {
margin-bottom:5px;
}
#sidebar {
float: left;
width: 200px;
height: 350px;
background-color: #6cae15;
}
#leftmenu ul {
width: 200px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}
#content {
float: right;
width: 690px;
height: 350px;
}
#contentgambar {
height: 100px;
margin-bottom:10px;
}
#tekskanan{
float: left;
width: 400px;
height:230px;
background-color: #C5ECCB;
}
#tekskiri {
float: right;
width: 235px;
height:130px;
background-color: #6cae15
}
#footer {
clear: both;
height: 50px;;
}
</style>
</head>
<body>
<div id="wrapper" height:auto;>
<div id="header">
<div id="menu_bar">
</div>
<img src="header.jpg">
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang Alam</a></li>
<li><a href="#">Peta</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="contentgambar">
<img src="top.jpg">
</div>
<div id="tekskanan">
<h3>Pembalakan Liar</h3>
<p>
Pembalakan liar di Indonesia telah meluas, hal ini jika terjadi terus menerus
akan mengakibatkan gundulnya hutan yang pada dasarnya adalah sumber dari banjir dan
tanah longsor
<P>
read more....</P>
</div>
<div id="tekskiri">
<P>Daftra Kegiatan</P>
<ol start="1" type="I">
<li>Januari</li>
<ol type="a">
<li>Penghijauan Pujon</li>
<li>Penghijauan Kasembon</li>
</ol>
</body>
</html>
</div>
</div>
</div>
<div id="footer"align="center">
@ 2010 Lukman Production Nature, Indonesia
</div>
</div>
</body>
Demikian semoga bermanfaat.
23.59
Label: PTI 478
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar