Membuat Layout Website dengan CSS
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
berikut layout website yang menggunakan CSS
contoh layout menggunakan CSSdalam membuat layout seperti gambar diatas membutuhkan linked CSS dan HTML. buka notepad terus tulis script berikut ini :
#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;
}
setelah itu simpan script diatas dengan nama mystyle.css
setelah itu buat lagi script seperti dibawah ini :
<!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" xml:lang="en" lang="en">
<head>
<title>MY Website</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></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>
simpan dengan nama terserah, misal layout.html. ingat file CSS dan HTML harus ada dalam satu folder.
berikut ini adalah hasil desain website dengan menggunakan CSS.
contoh layout sudah jadi menggunakan CSS
scripnya sebagai berikut
untuk CSS:
#wrapper {
margin: auto;
width: 900px;
padding:5px 2px 5px 2px;
background-color: #f6a00b;
}
#header {
height: 100px;
margin-bottom:5px;
padding: 5px 0px 5px 20px;
background-color: #F00;
}
#cari {
height: 20px;
padding-right: 10px;
text-align: right;
color: #0F0;
}
#logo {
float: auto;
height: 30px;
text-align:left;
color: #0F0;
}
#headermenu{
height: 20px;
padding-right: 10px;
text-align: right;
color: #0F0;
}
#inner {
margin: auto;
color: #0F0;
background-color: white;
}
#sidebar {
float: left;
width: 200px;
height: 350px;
background-color: #C93;
}
#content {
float: right;
width: 700px;
height: 350px;
color: #0F0;
background-color: #9FF;
}
#contentgambar {
height: 100px;
border: 1px solid red;
}
#tekskanan{
float: left;
width: 400px;
height:230px;
color: #300;
padding-left:20px;
}
#tekskiri {
float: right;
width: 235px;
height: 150px;
background-color: #C93;
color: #0F0;
padding-left:20px;
}
#footer {
clear: both;
height: 50px;
padding-top:20px;
text-align: center;
background-color: #F00;
color: #0F0;
}
#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: #9C0 no-repeat left center;
margin: 0px 0px 1px; color: #F00;
}
#leftmenu a:hover{
background: #5e9711 no-repeat left center; color: #F00;
}
Untuk 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" xml:lang="en" lang="en">
<head>
<title>MY Website</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div id="wrapper">
<div id="header">
<img src="logo.jpg" width="100" height="100" align="left" />
<div id="headermenu">
<strong>Home RSS About Us</strong>
</div>
<div id="logo">
<h1> 5ufy4n website</h1>
</div>
<div id="cari"><strong>cari </strong>
<input type="text" />
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><strong><a href="#">Home</a></strong></li>
<li><a href="#"><strong>Profil</strong></a></li>
<li><a href="#"><strong>Photo</strong></a></li>
<li><a href="#"><strong>About me</strong></a></li>
<li><a href="#"><strong>My Friend</strong></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="contentgambar">
<img src="g1.jpg" width="349" height="100" /><img src="g2.jpg" width="349" height="100" />
</div>
<div id="tekskanan">
<h3>Dont Sleep Away The Night</h3>
<p><strong>26 Februari 2010 [13:00]</strong><br />
Tomorrow's near, never I felt this way<br />
Tomorrow, how empty it'll be that day<br />
It tastes a bitter, obvious to tears to dried<br />
To know that you're my only light<br />
I love you, oh I need you<br />
Oh, yes I do</p>
<p><strong>Raad More...</strong></p>
</div>
<div id="tekskiri">
<p><strong>Lagu terbaru</strong>
</p>
<ul>
<li>Nothing to lose</li>
<li>Tears in Heaven</li>
<li>Wonderful Tonight</li>
<li>Tears in Heaven</li>
</ul>
</div>
</div>
</div>
<div id="footer">
© 2010 By Sufyan
</div>
</div>
</body>
</html>
simpan kedua file diatas dengan nama mystyle.css dan desain.html dalam satu folder.
tunggu tutorial selanjutnya..
#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;
}
setelah itu simpan script diatas dengan nama mystyle.css
setelah itu buat lagi script seperti dibawah ini :
<!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" xml:lang="en" lang="en">
<head>
<title>MY Website</title>
<link rel="stylesheet" href="mystyle1.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></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>
simpan dengan nama terserah, misal layout.html. ingat file CSS dan HTML harus ada dalam satu folder.
berikut ini adalah hasil desain website dengan menggunakan CSS.
contoh layout sudah jadi menggunakan CSSscripnya sebagai berikut
untuk CSS:
#wrapper {
margin: auto;
width: 900px;
padding:5px 2px 5px 2px;
background-color: #f6a00b;
}
#header {
height: 100px;
margin-bottom:5px;
padding: 5px 0px 5px 20px;
background-color: #F00;
}
#cari {
height: 20px;
padding-right: 10px;
text-align: right;
color: #0F0;
}
#logo {
float: auto;
height: 30px;
text-align:left;
color: #0F0;
}
#headermenu{
height: 20px;
padding-right: 10px;
text-align: right;
color: #0F0;
}
#inner {
margin: auto;
color: #0F0;
background-color: white;
}
#sidebar {
float: left;
width: 200px;
height: 350px;
background-color: #C93;
}
#content {
float: right;
width: 700px;
height: 350px;
color: #0F0;
background-color: #9FF;
}
#contentgambar {
height: 100px;
border: 1px solid red;
}
#tekskanan{
float: left;
width: 400px;
height:230px;
color: #300;
padding-left:20px;
}
#tekskiri {
float: right;
width: 235px;
height: 150px;
background-color: #C93;
color: #0F0;
padding-left:20px;
}
#footer {
clear: both;
height: 50px;
padding-top:20px;
text-align: center;
background-color: #F00;
color: #0F0;
}
#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: #9C0 no-repeat left center;
margin: 0px 0px 1px; color: #F00;
}
#leftmenu a:hover{
background: #5e9711 no-repeat left center; color: #F00;
}
Untuk 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" xml:lang="en" lang="en">
<head>
<title>MY Website</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div id="wrapper">
<div id="header">
<img src="logo.jpg" width="100" height="100" align="left" />
<div id="headermenu">
<strong>Home RSS About Us</strong>
</div>
<div id="logo">
<h1> 5ufy4n website</h1>
</div>
<div id="cari"><strong>cari </strong>
<input type="text" />
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><strong><a href="#">Home</a></strong></li>
<li><a href="#"><strong>Profil</strong></a></li>
<li><a href="#"><strong>Photo</strong></a></li>
<li><a href="#"><strong>About me</strong></a></li>
<li><a href="#"><strong>My Friend</strong></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="contentgambar">
<img src="g1.jpg" width="349" height="100" /><img src="g2.jpg" width="349" height="100" />
</div>
<div id="tekskanan">
<h3>Dont Sleep Away The Night</h3>
<p><strong>26 Februari 2010 [13:00]</strong><br />
Tomorrow's near, never I felt this way<br />
Tomorrow, how empty it'll be that day<br />
It tastes a bitter, obvious to tears to dried<br />
To know that you're my only light<br />
I love you, oh I need you<br />
Oh, yes I do</p>
<p><strong>Raad More...</strong></p>
</div>
<div id="tekskiri">
<p><strong>Lagu terbaru</strong>
</p>
<ul>
<li>Nothing to lose</li>
<li>Tears in Heaven</li>
<li>Wonderful Tonight</li>
<li>Tears in Heaven</li>
</ul>
</div>
</div>
</div>
<div id="footer">
© 2010 By Sufyan
</div>
</div>
</body>
</html>
simpan kedua file diatas dengan nama mystyle.css dan desain.html dalam satu folder.
tunggu tutorial selanjutnya..
0 komentar:
Posting Komentar