LAPORAN
WEB DESAIN
(1
kolom, 2 kolom, 3 kolom)
Website
1 kolom
Source
code html(satu.html)
<html>
<head>
<title>web Satu
Kolom</title>
<link rel="stylesheet"
href="satu.css" type="text/css"> </head>
<body>
<div id="wrap">
<div id="main">
<div id="head">
<ul class="navbar">
<li><a href="#">
.:: Home ::. </a></li>
<li><a href="#">
.:: Profile ::. </a></li>
<li><a href="#">
.:: Kontak ::. </a></li>
<li><a href="#">
.:: Download ::.
</a></li>
</ul>
</div>
<div id="content">
<h2> Selamat Datang </h2>
<p> CSS adalah Cascading Style
Sheet merupakan pemrograman wajib bagi para programmer web, khususnya bagi web
designer dalam mendesain sebuah layout/kerangka web agar terlihat lebih
menarik. Banyak keuntungan dan kelebihan yang dapat diperoleh dengan
menggunakan CSS diantaranya akses lebih cepat diloading, fleksibel, interaktif,
tampilan web lebih nyaman dipandang dan tentu saja ringan pada filesize.
</p>
<div>
<div id="footer">
Copyright 2011 ©: http://www.soviarosalin.com
| Sovia Rosalin yang baik hati :)
</div>
</div>
</div>
</body>
</html>
Source
code css(satu.css)
body {
font : 70%/1.4em verdana, sans-serif;
color: #333;
background : #CCC;
}
a:link, a: visited, a:active{
color: #333;
}
a:hover{
text-decoration: none;
}
#wrap{
width: 760px;
margin: 0 auto;
}
#main{
background: #fff;
margin: 0;
overflow:hidden;
}
#head{
margin: 0;
padding: 10px 5px 17px 5px;
background:
url("bannerpar.jpg") no-repeat;
background-position: 50%;
height:140px;
}
#head .navbar{
padding:0;
margin:0;
}
#head .navbar li{
display:inline;
}
#head
.navbar li a{
padding:
0 10px;
font-weight:
bold;
font-size:
11px;
}
#head
h1.title{
color:#fff;
font-size:
18px;
text-align:
right;
margin:
0;
padding:
125px 10px 0 0;
}
#content{
width:
710px;
padding:
0 20px 20px 20px;
background-position:
98.5% 0;
}
#footer{
clear:
both;
text-align:
right;
background:
#ddd;
padding:
10px;
font-size:
8px;
color:
#333;
}
Website
2 kolom
Source
code html(dua.html)
<html>
<head>
<title>Web Dua Kolom</title>
<link rel="stylesheet"
href="dua.css" type="text/css">
<link rel="icon"
href="1.png" type="image/png"> </head>
<body>
<div id="wrap">
<div id="main">
<div id="head">
<ul class="navbar">
<li><a href="#">
.:: Home ::. </a></li>
<li><a href="#">
.:: Proofile ::. </a></li>
<li><a href="#">
.:: Kontak ::. </a></li>
<li><a href="#">
.:: Download ::.
</a></li>
</ul>
<h1 class="title">
http://www.soviarosalin.com </h1>
</div>
<div
id="menu"><br>
<ul>
<li><a href="#">
.:: Home ::. </a></li>
<li><a href="#">
.:: Proofile ::. </a></li>
<li><a href="#">
.:: Kontak ::. </a></li>
<li><a href="#">
.:: Download ::.
</a></li>
</ul>
</div>
<div id="content">
<h2> Selamat Datang </h2>
<p> CSS adalah Cascading Style
Sheet merupakan pemrograman wajib bagi para programmer web, khususnya bagi web
designer dalam mendesain sebuah layout/kerangka web agar terlihat lebih
menarik. Banyak keuntungan dan kelebihan yang dapat diperoleh dengan
menggunakan CSS diantaranya akses lebih cepat diloading, fleksibel, interaktif,
tampilan web lebih nyaman dipandang dan tentu saja ringan pada filesize.
</p>
<div>
<div id="footer">
Copyright 2011 ©
http://www.soviarosalin.com | Sovia Rosalin yang baik hati :)
</div></div></div></body></html>
Source
code css(dua.css)
body {
font : 70%/1.4em verdana, sans-serif;
color: #333;
background : #CCC;
}
a:link, a: visited, a:active{
color: #333;
}
a:hover{
text-decoration: none;
}
#wrap{
width: 760px;
margin: 0 auto;
}
#main{
background: #fff;
margin: 0;
overflow:hidden;
}
#head{
margin: 0;
padding: 10px 5px 17px 5px;
background:
url("bannerpar.jpg") no-repeat;
background-position: 50% 100%;
height:140px;
}
#head .navbar{
padding:0;
margin:0;
}
#head .navbar li{
display:inline;
}
padding: 0 10px;
font-weight: bold;
font-size: 11px;
}
#head h1.title{
color:#fff;
font-size: 18px;
text-align: right;
margin: 0;
padding: 125px 10px 0 0;
}
#content{
float: left;
width: 550px;
padding: 0 20px 20px 20px;
background-position: 98.5% 0;
}
#menu{
width: 150px;
float: left;
}
#footer{
clear: both;
text-align: right;
background: #ddd;
padding: 10px;
font-size: 8px;
color: #333;
}
Website
3 kolom
Source
code html(tiga.html)
<html>
<head>
<title>Web Tiga
Kolom</title>
<link rel="stylesheet"
href="tiga.css" type="text/css"> </head>
<body><div id="wrap"><div
id="main"><div id="head">
<ul class="navbar"><li><a
href="#"> .:: Home ::.
</a></li>
<li><a href="#">
.:: Proofile ::. </a></li>
<li><a href="#">
.:: Kontak ::. </a></li>
<li><a href="#">
.:: Download ::.
</a></li></ul>
<h1 class="title"> http://www.soviarosalin.com
</h1></div>
<div
id="menu"><br><ul>
<li><a href="#">
.:: Home ::. </a></li>
<li><a href="#">
.:: Proofile ::. </a></li>
<li><a href="#">
.:: Kontak ::. </a></li>
<li><a href="#">
.:: Download ::.
</a></li></ul></div>
<div id="content"><h2>
Selamat Datang </h2>
<p> CSS adalah Cascading Style
Sheet merupakan pemrograman wajib bagi para programmer web, khususnya bagi web
designer dalam mendesain sebuah layout/kerangka web agar terlihat lebih
menarik. Banyak keuntungan dan kelebihan yang dapat diperoleh dengan
menggunakan CSS diantaranya akses lebih cepat diloading, fleksibel, interaktif,
tampilan web lebih nyaman dipandang dan tentu saja ringan pada filesize.</p>
</div><div
id="kolom3">
<h3> Profil Pembuat Web :
</h3>
<p> Sovia Rosalin adalah manusia
biasa yang masih banyak kekurangan dan perlu untuk lebih banyak belajar..
</p>
<br> Semoga ilmu yang diberikan
kepada mahasiswa lebih banyak dan bermanfaat
</div>
<div id="footer">
Copyright 2011 ©:
http://www.soviarosalin.com | Sovia Rosalin yang baik hati :) </div>
</div>
</div>
</body>
</html>
Source
code css(tiga.css)
body {
font : 70%/1.4em verdana, sans-serif;
color: #333;
background : #CCC;
}
a:link, a: visited, a:active{
color: #333;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
#wrap{
width: 760px;
margin: 0 auto;
}
#main{
background: #fff;
margin: 0;
overflow:hidden;
}
#head{
margin: 0;
padding: 10px 5px 17px 5px;
background:
url("bannerpar.jpg") no-repeat;
background-position: 50% 100%;
height:140px;
}
#head .navbar{
padding:0;
margin:0;
}
#head .navbar li{
display:inline;
}
padding:
0 10px;
font-weight:
bold;
font-size:
11px;
color:
white;
}
#head
h1.title{
color:#fff;
font-size:
18px;
text-align:
right;
margin:
0;
padding:
125px 10px 0 0;
}
#content{
float:
left;
width:
400px;
padding:
0 20px 20px 20px;
background-position:
98.5% 0;
}
#menu{
width:
150px;
float:
left;
}
kolom3{
width:150px;
float:
left; }
#footer{
clear:
both;
text-align:
right;
background:
#ddd;
padding:
10px;
font-size:
8px;
color:
#333;
}
Tidak ada komentar:
Posting Komentar