Baca selengkapnya...>>
Untuk source 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>Desain Layout Sederhana</title>
<link rel="stylesheet" href="newtgs.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "kotak10">
<img src="jember_cin.jpg"/>
</div>
<div id = "kotak11">
<img src="angkatan_Q1.jpg"/>
</div>
</div>
<div id="content">
<b>Lomba Desain Web<br/></b>
<br/>
<b>27 Februari 2010<br/></b>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br/>
sed do eiusmod tempor incididunt ut labore et dolore magna<br/>
aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br/>
ullamco laboris nisi ut aliquip ex ea commodo consequat. <br/>
</p>
<p>
Read More....
<br/>
</p>
</div>
<div id="right">
<b>Event :</b>
<ul>
<li>Kuliah Tamu "Video Streaming" </li>
<li>Electro English Club (E2C)</li>
<li>Seminar Nasional "Hacking and Security"</li>
</ul>
</div>
</div>
<div id="footer">
<h3 align="center"><b>© Arum_Poenya</b></h3>
</div>
</div>
</body>
</html>
Untuk Source CSS
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 110px;
width: 988px;
background: url(headerQ.jpg);
background-repeat: repeat-x;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid green;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}
#right {
float: right;
width: 355px;
height: 165px;
background: #CCFF99;
border: 1px solid green;
}
#footer {
clear:both;
height: 50px;
background: url(foot.jpg);
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
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
}
#kotak10 {
float: left;
margin-top: 5px;
width: 406px;
height: 110px;
background: url(KKL1.jpg);
border: 1px solid #FFFFCC;
}
#kotak11 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: url(des.jpg);
border: 1px solid #FFFFCC;
}
NotE : buat lembar kerja CSS sendiri karna ney di Link
Hasilnya sebagi berikut...Narsis dikit yaK..
Tidak ada komentar:
Posting Komentar
Dari desain layout yang kita buat kita dapat membuat web dengan menggunakan sintaks berikut...
Baca selengkapnya...>>
Untuk source 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>Desain Layout Sederhana</title>
<link rel="stylesheet" href="newtgs.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "kotak10">
<img src="jember_cin.jpg"/>
</div>
<div id = "kotak11">
<img src="angkatan_Q1.jpg"/>
</div>
</div>
<div id="content">
<b>Lomba Desain Web<br/></b>
<br/>
<b>27 Februari 2010<br/></b>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br/>
sed do eiusmod tempor incididunt ut labore et dolore magna<br/>
aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br/>
ullamco laboris nisi ut aliquip ex ea commodo consequat. <br/>
</p>
<p>
Read More....
<br/>
</p>
</div>
<div id="right">
<b>Event :</b>
<ul>
<li>Kuliah Tamu "Video Streaming" </li>
<li>Electro English Club (E2C)</li>
<li>Seminar Nasional "Hacking and Security"</li>
</ul>
</div>
</div>
<div id="footer">
<h3 align="center"><b>© Arum_Poenya</b></h3>
</div>
</div>
</body>
</html>
Untuk Source CSS
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 110px;
width: 988px;
background: url(headerQ.jpg);
background-repeat: repeat-x;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid green;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}
#right {
float: right;
width: 355px;
height: 165px;
background: #CCFF99;
border: 1px solid green;
}
#footer {
clear:both;
height: 50px;
background: url(foot.jpg);
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
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
}
#kotak10 {
float: left;
margin-top: 5px;
width: 406px;
height: 110px;
background: url(KKL1.jpg);
border: 1px solid #FFFFCC;
}
#kotak11 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: url(des.jpg);
border: 1px solid #FFFFCC;
}
NotE : buat lembar kerja CSS sendiri karna ney di Link
Hasilnya sebagi berikut...Narsis dikit yaK..