-- My Country --

Glitter Words

Pages

Monday, February 14, 2011

Membuat Design Layout Sederhana

MEMBUAT DESIGN LAYOUT FACE-MU

Sintak Face-mu.css

#top{
height:100px;
background-color:#3366cc;}

#folkbook{
float:left;
height:100px;
width:350px;
padding-left:100px;
padding-top:20px;
}

#isikanan{
padding-top:20px;
padding-right:100px;
float:right;
}

#button{
background-color:#ffffff;
color:#3366cc;
}

#center{
height:500px;
background-image:URL(bg.jpg);
}

#bottom{
padding-left:5px;
padding-top:15px;
height:40px;
background-color:#3366cc;}



Sintak Face-mu.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Design Layout Face-mu </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="icon" href="icon.png" type="image/x-icon" />
<div id="top">
<div id="folkbook">
<font color="white" face="calibri" size=8><b> Face-mu </b></font>
</div>
<div id="isikanan">
<font color="white" face="calibri" size=3>
<table>
<tr>
<td><u>Email:</u></td>
<td><u>Password:</u></td>
</tr>
<tr>
<td>
<input type="text" maxlength=20>
</td>
<td>
<input type="password" maxlength=20>
</td>
<td><input id="button" type="button" maxlength=10 value="Masuk"></td>
</tr>
<tr>
<td><input type="checkbox" checked>Biarkan saya tetap masuk</td>
<td>Lupa kata sandi Anda?</td>
</tr>
</table>
</font>
</div>
</div>
</head>
<body>
<div id="center">
</div>
<div id="bottom">
<font color="white" face="calibri" size=3>
Face-mu © 2011 - Suastika Yulia Riska
<br>109533414510_S1 PTI09_Teknik Elektro
</font>
</div>
</body>
</html>

Tampilan Face-mu


1 komentar:

Langkah-Langkah Sederhana Agar Blog Terindex di Mesin Pencari said...

Mantab, klw buat blogger ngaturnya gimana ya mba?

Post a Comment

 
Powered by Blogger